@tekus/design-system 5.19.0 → 5.20.0

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-radio-button.mjs","sources":["../../../projects/design-system/components/radio-button/src/radio-button.component.ts","../../../projects/design-system/components/radio-button/src/radio-button.component.html","../../../projects/design-system/components/radio-button/tekus-design-system-components-radio-button.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, input, model, signal, OnInit, inject, OnDestroy } from '@angular/core';\nimport { ControlValueAccessor, FormControl, ReactiveFormsModule, NgControl, FormsModule } from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { RadioButtonModule } from 'primeng/radiobutton';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n  selector: 'tk-radio-button',\n  imports: [CommonModule, ReactiveFormsModule, FormsModule, RadioButtonModule, MessageModule],\n  templateUrl: './radio-button.component.html',\n  styleUrl: './radio-button.component.scss'\n})\nexport class RadioButtonComponent implements ControlValueAccessor, OnInit, OnDestroy {\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\n\n  constructor() {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  /**\n   * @property {ModelSignal<any>} model\n   * @description\n   * The value of the radio button model (checked state).\n   * Supports two-way binding via signals.\n   */\n  model = model<unknown>();\n\n  /**\n   * @property {InputSignal<any>} value\n   * @description\n   * The value of the radio button itself (used when part of a group).\n   */\n  value = input<unknown>();\n\n  /**\n   * @property {InputSignal<string>} label\n   * @description\n   * Label displayed next to the radio button.\n   */\n  label = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} name\n   * @description\n   * Name attribute for the radio button.\n   */\n  name = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} inputId\n   * @description\n   * HTML id attribute for the radio button input.\n   */\n  inputId = input<string>('');\n\n  /**\n   * @property {InputSignal<FormControl>} control\n   * @description\n   * External FormControl used to read/set the radio button value.\n   * If not provided, an internal FormControl is created.\n   */\n  control = input<FormControl>(new FormControl());\n\n  /**\n   * @property {InputSignal<string>} errorMessage\n   * @description\n   * Message to display when the control is invalid and touched.\n   */\n  errorMessage = input<string>('');\n\n  /**\n   * @property {boolean} disabled\n   * @description\n   * Whether the radio button is disabled.\n   */\n  disabled = signal<boolean>(false);\n\n  get effectiveControl(): FormControl {\n    return (this.ngControl?.control as FormControl) || this.control();\n  }\n\n  onChange: (value: unknown) => void = () => {};\n  onTouched: () => void = () => {};\n  private readonly subscription = new Subscription();\n\n  ngOnInit(): void {\n    const control = this.effectiveControl;\n    if (control.value !== undefined) {\n      this.model.set(control.value);\n    }\n\n    // Sync initial disabled state\n    this.disabled.set(control.disabled);\n\n    this.subscription.add(\n      control.valueChanges.subscribe(val => {\n        if (val !== this.model()) {\n          this.model.set(val);\n          this.onChange(val);\n        }\n      })\n    );\n\n    // Sync disabled state on status change\n    this.subscription.add(\n      control.statusChanges.subscribe(() => {\n        this.disabled.set(control.disabled);\n      })\n    );\n  }\n\n  ngOnDestroy(): void {\n    this.subscription.unsubscribe();\n  }\n\n  writeValue(value: unknown): void {\n    this.model.set(value);\n    this.control().setValue(value, { emitEvent: false });\n  }\n\n  registerOnChange(fn: (value: unknown) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled.set(isDisabled);\n    if (isDisabled) {\n      this.control().disable({ emitEvent: false });\n    } else {\n      this.control().enable({ emitEvent: false });\n    }\n  }\n\n  onModelChange(value: unknown): void {\n    this.model.set(value);\n    this.onChange(value);\n    this.effectiveControl.setValue(value);\n    this.effectiveControl.markAsDirty();\n    this.onTouched();\n  }\n\n  onBlur(): void {\n    this.onTouched();\n    this.effectiveControl.markAsTouched();\n  }\n}\n","<div class=\"tk-radio-button-wrapper\">\n  <div class=\"tk-radio-button-group\" [class.tk-disabled]=\"disabled()\">\n    <p-radioButton\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\">\n    </p-radioButton>\n    @if(label()){\n        <label [for]=\"inputId()\" class=\"tk-radio-button-label\"> {{ label() }} </label>\n    }\n  </div>\n  \n  <div class=\"tk-input-bottom\">\n    <div class=\"tk-input-messages\">\n      @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n      }\n    </div>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;MAaa,oBAAoB,CAAA;AAG/B,IAAA,WAAA,GAAA;AAFS,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAQtE;;;;;AAKG;QACH,IAAK,CAAA,KAAA,GAAG,KAAK,EAAW;AAExB;;;;AAIG;QACH,IAAK,CAAA,KAAA,GAAG,KAAK,EAAW;AAExB;;;;AAIG;AACH,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,EAAE,CAAC;AAEzB;;;;AAIG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,EAAE,CAAC;AAExB;;;;AAIG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAS,EAAE,CAAC;AAE3B;;;;;AAKG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAc,IAAI,WAAW,EAAE,CAAC;AAE/C;;;;AAIG;AACH,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAS,EAAE,CAAC;AAEhC;;;;AAIG;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAU,KAAK,CAAC;AAMjC,QAAA,IAAA,CAAA,QAAQ,GAA6B,MAAK,GAAG;AAC7C,QAAA,IAAA,CAAA,SAAS,GAAe,MAAK,GAAG;AACf,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAE;AArEhD,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,IAAI,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI;;;AA8DvC,IAAA,IAAI,gBAAgB,GAAA;QAClB,OAAQ,IAAI,CAAC,SAAS,EAAE,OAAuB,IAAI,IAAI,CAAC,OAAO,EAAE;;IAOnE,QAAQ,GAAA;AACN,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB;AACrC,QAAA,IAAI,OAAO,CAAC,KAAK,KAAK,SAAS,EAAE;YAC/B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC;;;QAI/B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC;AAEnC,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CACnB,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,IAAG;AACnC,YAAA,IAAI,GAAG,KAAK,IAAI,CAAC,KAAK,EAAE,EAAE;AACxB,gBAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;AACnB,gBAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC;;SAErB,CAAC,CACH;;AAGD,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CACnB,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,MAAK;YACnC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC;SACpC,CAAC,CACH;;IAGH,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE;;AAGjC,IAAA,UAAU,CAAC,KAAc,EAAA;AACvB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;AACrB,QAAA,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;;AAGtD,IAAA,gBAAgB,CAAC,EAA4B,EAAA;AAC3C,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;;AAGpB,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;;AAGrB,IAAA,gBAAgB,CAAE,UAAmB,EAAA;AACnC,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC;QAC7B,IAAI,UAAU,EAAE;AACd,YAAA,IAAI,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;;aACvC;AACL,YAAA,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;;;AAI/C,IAAA,aAAa,CAAC,KAAc,EAAA;AAC1B,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;AACrB,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACpB,QAAA,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC;AACrC,QAAA,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE;QACnC,IAAI,CAAC,SAAS,EAAE;;IAGlB,MAAM,GAAA;QACJ,IAAI,CAAC,SAAS,EAAE;AAChB,QAAA,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE;;+GAzI5B,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,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,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECbjC,w9BA0BA,EAAA,MAAA,EAAA,CAAA,w2CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDjBY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,iBAAiB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,QAAA,EAAA,8CAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,OAAA,EAAA,YAAA,EAAA,WAAA,EAAA,QAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,YAAA,EAAA,UAAA,EAAA,MAAA,EAAA,WAAA,EAAA,MAAA,EAAA,uBAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAI/E,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBANhC,SAAS;+BACE,iBAAiB,EAAA,OAAA,EAClB,CAAC,YAAY,EAAE,mBAAmB,EAAE,WAAW,EAAE,iBAAiB,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,w9BAAA,EAAA,MAAA,EAAA,CAAA,w2CAAA,CAAA,EAAA;;;AET7F;;AAEG;;;;"}
+{"version":3,"file":"tekus-design-system-components-radio-button.mjs","sources":["../../../projects/design-system/components/radio-button/src/radio-button.component.ts","../../../projects/design-system/components/radio-button/src/radio-button.component.html","../../../projects/design-system/components/radio-button/tekus-design-system-components-radio-button.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  Component,\n  input,\n  model,\n  OnInit,\n  inject,\n  OnDestroy,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  FormControl,\n  ReactiveFormsModule,\n  NgControl,\n  FormsModule,\n} from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { RadioButtonModule } from 'primeng/radiobutton';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n  selector: 'tk-radio-button',\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    FormsModule,\n    RadioButtonModule,\n    MessageModule,\n  ],\n  templateUrl: './radio-button.component.html',\n  styleUrl: './radio-button.component.scss',\n})\nexport class RadioButtonComponent\n  implements ControlValueAccessor, OnInit, OnDestroy\n{\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\n\n  /**\n   * Initialize the component and register it as a ControlValueAccessor.\n   */\n  constructor() {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  /**\n   * @property {ModelSignal<any>} model\n   * @description\n   * The value of the radio button model (checked state).\n   * Supports two-way binding via signals.\n   */\n  model = model<unknown>();\n\n  /**\n   * @property {InputSignal<any>} value\n   * @description\n   * The value of the radio button itself (used when part of a group).\n   */\n  value = input<unknown>();\n\n  /**\n   * @property {InputSignal<string>} label\n   * @description\n   * Label displayed next to the radio button.\n   */\n  label = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} name\n   * @description\n   * Name attribute for the radio button.\n   */\n  name = input<string>('');\n\n  /**\n   * @property {InputSignal<string>} inputId\n   * @description\n   * HTML id attribute for the radio button input.\n   */\n  inputId = input<string>('');\n\n  /**\n   * @property {InputSignal<FormControl>} control\n   * @description\n   * External FormControl used to read/set the radio button value.\n   * If not provided, an internal FormControl is created.\n   */\n  control = input<FormControl>(new FormControl());\n\n  /**\n   * @property {InputSignal<string>} errorMessage\n   * @description\n   * Message to display when the control is invalid and touched.\n   */\n  errorMessage = input<string>('');\n\n  /**\n   * @property {ModelSignal<boolean>} disabled\n   * @description\n   * Whether the radio button is disabled.\n   */\n  disabled = model<boolean>(false);\n\n  /**\n   * Returns the control currently in use, either from NgControl or the standalone Input.\n   */\n  get effectiveControl(): FormControl {\n    return (this.ngControl?.control as FormControl) || this.control();\n  }\n\n  onChange: (value: unknown) => void = () => {};\n  onTouched: () => void = () => {};\n  private readonly subscription = new Subscription();\n\n  /**\n   * Configure synchronization between the form control and component state.\n   */\n  ngOnInit(): void {\n    const control = this.effectiveControl;\n\n    if (control.value !== undefined && control.value !== null) {\n      this.model.set(control.value);\n    }\n\n    if (this.control() === control && this.disabled()) {\n      control.disable({ emitEvent: false });\n    } else {\n      this.disabled.set(control.disabled);\n    }\n\n    this.subscription.add(\n      control.statusChanges.subscribe(() => {\n        this.disabled.set(control.disabled);\n      })\n    );\n\n    this.subscription.add(\n      control.valueChanges.subscribe(value => {\n        this.model.set(value);\n      })\n    );\n  }\n\n  /**\n   * Clean up subscriptions.\n   */\n  ngOnDestroy(): void {\n    this.subscription.unsubscribe();\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Writes a new value from the form.\n   */\n  writeValue(value: unknown): void {\n    this.model.set(value);\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Registers a callback for change events.\n   */\n  registerOnChange(fn: (value: unknown) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Registers a callback for touched events.\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * Implementation of ControlValueAccessor: Sets the disabled state.\n   */\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled.set(isDisabled);\n    if (isDisabled) {\n      this.control().disable();\n    } else {\n      this.control().enable();\n    }\n  }\n\n  /**\n   * Handle model change events from the template.\n   */\n  onModelChange(value: unknown): void {\n    this.model.set(value);\n    this.onChange(value);\n    this.effectiveControl.setValue(value);\n    this.effectiveControl.markAsDirty();\n    this.onTouched();\n  }\n\n  /**\n   * Handle blur events to trigger onTouched.\n   */\n  onBlur(): void {\n    this.onTouched();\n    this.effectiveControl.markAsTouched();\n  }\n}\n","<div class=\"tk-radio-button-wrapper\">\n  <div class=\"tk-radio-button-group\" [class.tk-disabled]=\"disabled()\">\n    <p-radioButton\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [ngModel]=\"model()\"\n      (ngModelChange)=\"onModelChange($event)\"\n      [class.ng-invalid]=\"effectiveControl.invalid\"\n      [class.ng-dirty]=\"effectiveControl.dirty\"\n      [class.ng-touched]=\"effectiveControl.touched\">\n    </p-radioButton>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-radio-button-label\">\n        {{ label() }}\n      </label>\n    }\n  </div>\n\n  @if (\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage()\n  ) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n          errorMessage()\n        }}</p-message>\n      </div>\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,10 +1,17 @@
 import * as i0 from '@angular/core';
-import { model, signal, input, Component } from '@angular/core';
+import { model, signal, input, output, Component } from '@angular/core';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { combineLatest, distinctUntilChanged, switchMap, EMPTY, timer } from 'rxjs';
 import { ButtonComponent } from '@tekus/design-system/components/button';
 import { SelectComponent } from '@tekus/design-system/components/select';
 import { InputTextComponent } from '@tekus/design-system/components/input-text';
 
 class ToolbarComponent {
+    /**
+     * @method constructor
+     * @description
+     * Initializes the automatic reload logic using a declarative RxJS approach.
+     */
     constructor() {
         /**
          * @property {ModelSignal<string>} searchModel
@@ -81,6 +88,59 @@ class ToolbarComponent {
          * @default 'Buscar'
          */
         this.searchFloatLabel = input('Buscar');
+        /**
+         * @property {InputSignal<boolean>} searchVisible
+         * @description
+         * Controls the visibility of the search button.
+         * @default true
+         */
+        this.searchVisible = input(true);
+        /**
+         * @property {InputSignal<boolean>} filterVisible
+         * @description
+         * Controls the visibility of the filter button.
+         * @default true
+         */
+        this.filterVisible = input(true);
+        /**
+         * @property {InputSignal<boolean>} reloadVisible
+         * @description
+         * Controls the visibility of the reload button.
+         * @default false
+         */
+        this.reloadVisible = input(false);
+        /**
+         * @property {InputSignal<number | null>} reloadInterval
+         * @description
+         * Sets the interval for automatic reload in milliseconds.
+         * If null, automatic reload is disabled.
+         * @default null
+         */
+        this.reloadInterval = input(null);
+        /**
+         * @property {InputSignal<boolean>} loading
+         * @description
+         * Controls the loading state of the reload button, triggering a rotation animation.
+         * @default false
+         */
+        this.loading = input(false);
+        /**
+         * @property {OutputEmitter<void>} reload
+         * @description
+         * Emits an event when the reload button is clicked or the automatic interval is reached.
+         */
+        this.reload = output();
+        combineLatest([
+            toObservable(this.reloadInterval).pipe(distinctUntilChanged()),
+            toObservable(this.loading).pipe(distinctUntilChanged()),
+        ])
+            .pipe(switchMap(([interval, isLoading]) => {
+            if (isLoading || !interval || interval <= 0) {
+                return EMPTY;
+            }
+            return timer(interval, interval);
+        }), takeUntilDestroyed())
+            .subscribe(() => this.onReload());
     }
     /**
      * @method toggleSearchInput
@@ -110,13 +170,21 @@ class ToolbarComponent {
     onSelectedOption(value) {
         this.filterModel.set(value);
     }
+    /**
+     * @method onReload
+     * @description
+     * Emits the reload event.
+     */
+    onReload() {
+        this.reload.emit();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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:end;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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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 }, searchVisible: { classPropertyName: "searchVisible", publicName: "searchVisible", isSignal: true, isRequired: false, transformFunction: null }, filterVisible: { classPropertyName: "filterVisible", publicName: "filterVisible", isSignal: true, isRequired: false, transformFunction: null }, reloadVisible: { classPropertyName: "reloadVisible", publicName: "reloadVisible", isSignal: true, isRequired: false, transformFunction: null }, reloadInterval: { classPropertyName: "reloadInterval", publicName: "reloadInterval", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchModel: "searchModelChange", filterModel: "filterModelChange", reload: "reload" }, ngImport: i0, template: "<div class=\"toolbar\">\n  @if (showSearchInput() && searchVisible()) {\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  }\n  @if (showFilterSelect() && filterVisible()) {\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 (searchVisible()) {\n      <tk-button\n        [icon]=\"'magnifying-glass'\"\n        severity=\"secondary\"\n        [variant]=\"!showSearchInput() ? 'outlined' : undefined\"\n        (clicked)=\"toggleSearchInput()\">\n      </tk-button>\n    }\n    @if (filterVisible()) {\n      <tk-button\n        [icon]=\"'filter'\"\n        severity=\"secondary\"\n        [variant]=\"!showFilterSelect() ? 'outlined' : undefined\"\n        (clicked)=\"toggleFilterSelect()\">\n      </tk-button>\n    }\n    @if (reloadVisible()) {\n      <tk-button\n        class=\"toolbar__reload-btn\"\n        [class.toolbar__reload-btn--animating]=\"\n          reloadInterval() && reloadInterval()! > 0 && !loading()\n        \"\n        [class.toolbar__reload-btn--spinning]=\"loading()\"\n        [style.--reload-interval]=\"(reloadInterval() ?? 0) + 'ms'\"\n        [icon]=\"'arrows-rotate'\"\n        severity=\"secondary\"\n        variant=\"outlined\"\n        (clicked)=\"onReload()\">\n      </tk-button>\n    }\n  </div>\n</div>\n", styles: [".toolbar{display:flex;justify-content:end;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)}.toolbar__reload-btn{border-radius:var(--tk-borderRadius-s, 8px)!important;position:relative}.toolbar__reload-btn--animating:before{content:\"\";position:absolute;inset:-2px;background:conic-gradient(var(--tk-color-base-sky-300, #92bada) var(--progress, 0%),transparent var(--progress, 0%));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px;border-radius:inherit;animation:draw-border var(--reload-interval, 5s) infinite linear;pointer-events:none}.toolbar__reload-btn--spinning ::ng-deep tk-icon{display:inline-block;animation:spin 1s infinite linear}@media (max-width: 768px){.toolbar{justify-content:flex-start}}@property --progress{syntax: \"<percentage>\"; inherits: false; initial-value: 0%;}@keyframes draw-border{0%{--progress: 0%}to{--progress: 100%}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}: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.18", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-toolbar', imports: [ButtonComponent, InputTextComponent, SelectComponent], 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:end;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"] }]
-        }] });
+            args: [{ selector: 'tk-toolbar', imports: [ButtonComponent, InputTextComponent, SelectComponent], template: "<div class=\"toolbar\">\n  @if (showSearchInput() && searchVisible()) {\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  }\n  @if (showFilterSelect() && filterVisible()) {\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 (searchVisible()) {\n      <tk-button\n        [icon]=\"'magnifying-glass'\"\n        severity=\"secondary\"\n        [variant]=\"!showSearchInput() ? 'outlined' : undefined\"\n        (clicked)=\"toggleSearchInput()\">\n      </tk-button>\n    }\n    @if (filterVisible()) {\n      <tk-button\n        [icon]=\"'filter'\"\n        severity=\"secondary\"\n        [variant]=\"!showFilterSelect() ? 'outlined' : undefined\"\n        (clicked)=\"toggleFilterSelect()\">\n      </tk-button>\n    }\n    @if (reloadVisible()) {\n      <tk-button\n        class=\"toolbar__reload-btn\"\n        [class.toolbar__reload-btn--animating]=\"\n          reloadInterval() && reloadInterval()! > 0 && !loading()\n        \"\n        [class.toolbar__reload-btn--spinning]=\"loading()\"\n        [style.--reload-interval]=\"(reloadInterval() ?? 0) + 'ms'\"\n        [icon]=\"'arrows-rotate'\"\n        severity=\"secondary\"\n        variant=\"outlined\"\n        (clicked)=\"onReload()\">\n      </tk-button>\n    }\n  </div>\n</div>\n", styles: [".toolbar{display:flex;justify-content:end;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)}.toolbar__reload-btn{border-radius:var(--tk-borderRadius-s, 8px)!important;position:relative}.toolbar__reload-btn--animating:before{content:\"\";position:absolute;inset:-2px;background:conic-gradient(var(--tk-color-base-sky-300, #92bada) var(--progress, 0%),transparent var(--progress, 0%));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px;border-radius:inherit;animation:draw-border var(--reload-interval, 5s) infinite linear;pointer-events:none}.toolbar__reload-btn--spinning ::ng-deep tk-icon{display:inline-block;animation:spin 1s infinite linear}@media (max-width: 768px){.toolbar{justify-content:flex-start}}@property --progress{syntax: \"<percentage>\"; inherits: false; initial-value: 0%;}@keyframes draw-border{0%{--progress: 0%}to{--progress: 100%}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host ::ng-deep .tk-input-bottom{display:none}:host ::ng-deep .p-button-outlined{border:1px solid transparent!important}\n"] }]
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.

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, output } from '@angular/core';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport {\n  combineLatest,\n  distinctUntilChanged,\n  EMPTY,\n  switchMap,\n  timer,\n} from 'rxjs';\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   * @property {InputSignal<boolean>} searchVisible\n   * @description\n   * Controls the visibility of the search button.\n   * @default true\n   */\n  searchVisible = input<boolean>(true);\n\n  /**\n   * @property {InputSignal<boolean>} filterVisible\n   * @description\n   * Controls the visibility of the filter button.\n   * @default true\n   */\n  filterVisible = input<boolean>(true);\n\n  /**\n   * @property {InputSignal<boolean>} reloadVisible\n   * @description\n   * Controls the visibility of the reload button.\n   * @default false\n   */\n  reloadVisible = input<boolean>(false);\n\n  /**\n   * @property {InputSignal<number | null>} reloadInterval\n   * @description\n   * Sets the interval for automatic reload in milliseconds.\n   * If null, automatic reload is disabled.\n   * @default null\n   */\n  reloadInterval = input<number | null>(null);\n\n  /**\n   * @property {InputSignal<boolean>} loading\n   * @description\n   * Controls the loading state of the reload button, triggering a rotation animation.\n   * @default false\n   */\n  loading = input<boolean>(false);\n\n  /**\n   * @property {OutputEmitter<void>} reload\n   * @description\n   * Emits an event when the reload button is clicked or the automatic interval is reached.\n   */\n  reload = output<void>();\n\n  /**\n   * @method constructor\n   * @description\n   * Initializes the automatic reload logic using a declarative RxJS approach.\n   */\n  constructor() {\n    combineLatest([\n      toObservable(this.reloadInterval).pipe(distinctUntilChanged()),\n      toObservable(this.loading).pipe(distinctUntilChanged()),\n    ])\n      .pipe(\n        switchMap(([interval, isLoading]) => {\n          if (isLoading || !interval || interval <= 0) {\n            return EMPTY;\n          }\n          return timer(interval, interval);\n        }),\n        takeUntilDestroyed()\n      )\n      .subscribe(() => this.onReload());\n  }\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  /**\n   * @method onReload\n   * @description\n   * Emits the reload event.\n   */\n  onReload(): void {\n    this.reload.emit();\n  }\n}\n","<div class=\"toolbar\">\n  @if (showSearchInput() && searchVisible()) {\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  }\n  @if (showFilterSelect() && filterVisible()) {\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 (searchVisible()) {\n      <tk-button\n        [icon]=\"'magnifying-glass'\"\n        severity=\"secondary\"\n        [variant]=\"!showSearchInput() ? 'outlined' : undefined\"\n        (clicked)=\"toggleSearchInput()\">\n      </tk-button>\n    }\n    @if (filterVisible()) {\n      <tk-button\n        [icon]=\"'filter'\"\n        severity=\"secondary\"\n        [variant]=\"!showFilterSelect() ? 'outlined' : undefined\"\n        (clicked)=\"toggleFilterSelect()\">\n      </tk-button>\n    }\n    @if (reloadVisible()) {\n      <tk-button\n        class=\"toolbar__reload-btn\"\n        [class.toolbar__reload-btn--animating]=\"\n          reloadInterval() && reloadInterval()! > 0 && !loading()\n        \"\n        [class.toolbar__reload-btn--spinning]=\"loading()\"\n        [style.--reload-interval]=\"(reloadInterval() ?? 0) + 'ms'\"\n        [icon]=\"'arrows-rotate'\"\n        severity=\"secondary\"\n        variant=\"outlined\"\n        (clicked)=\"onReload()\">\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.19.0",
+  "version": "5.20.0",
   "license": "UNLICENSED",
   "peerDependencies": {
     "@angular/core": "^19.2.15",