@tekus/design-system 5.37.0 → 5.39.0

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

@@ -18,6 +18,7 @@ class ToggleComponent {
         this.inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
         this.control = input(new FormControl(), ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
         this.errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+        this.hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
         this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.onChange = () => { };
         this.onTouched = () => { };
@@ -80,12 +81,12 @@ class ToggleComponent {
         this.effectiveControl.markAsTouched();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToggleComponent, isStandalone: true, selector: "tk-toggle", inputs: { model: { classPropertyName: "model", publicName: "model", 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-toggle-wrapper\">\n  <div class=\"tk-toggle-group\" [class.tk-disabled]=\"disabled()\">\n    <p-toggleswitch\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\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      (blur)=\"onBlur()\">\n    </p-toggleswitch>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-toggle-label\">{{ label() }}</label>\n    }\n  </div>\n  @if (\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage()\n  ) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n          errorMessage()\n        }}</p-message>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host ::ng-deep .tk-toggle-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-toggle-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-toggle-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-toggle-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-toggle-label{cursor:pointer}: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-toggleswitch.ng-invalid.ng-touched .p-toggleswitch,:host ::ng-deep p-toggleswitch.ng-invalid.ng-dirty .p-toggleswitch{outline:2px solid var(--tk-color-base-red-700, #cf2604);outline-offset:2px;border-radius:var(--p-toggleswitch-border-radius)}\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: ToggleSwitchModule }, { kind: "component", type: i2.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToggleComponent, isStandalone: true, selector: "tk-toggle", inputs: { model: { classPropertyName: "model", publicName: "model", 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 }, hint: { classPropertyName: "hint", publicName: "hint", 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-toggle-wrapper\">\n  <div class=\"tk-toggle-group\" [class.tk-disabled]=\"disabled()\">\n    <p-toggleswitch\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\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      (blur)=\"onBlur()\">\n    </p-toggleswitch>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-toggle-label\">{{ label() }}</label>\n    }\n  </div>\n  @let showError =\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage();\n  @if (showError || hint()) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        @if (showError) {\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</div>\n", styles: [":host{display:inline-block}:host ::ng-deep .tk-toggle-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-toggle-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-toggle-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-toggle-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-toggle-label{cursor:pointer}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-input-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}:host ::ng-deep p-toggleswitch.ng-invalid.ng-touched .p-toggleswitch,:host ::ng-deep p-toggleswitch.ng-invalid.ng-dirty .p-toggleswitch{outline:2px solid var(--tk-color-base-red-700, #cf2604);outline-offset:2px;border-radius:var(--p-toggleswitch-border-radius)}\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: ToggleSwitchModule }, { kind: "component", type: i2.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-toggle', imports: [ReactiveFormsModule, FormsModule, ToggleSwitchModule, MessageModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tk-toggle-wrapper\">\n  <div class=\"tk-toggle-group\" [class.tk-disabled]=\"disabled()\">\n    <p-toggleswitch\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\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      (blur)=\"onBlur()\">\n    </p-toggleswitch>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-toggle-label\">{{ label() }}</label>\n    }\n  </div>\n  @if (\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage()\n  ) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n          errorMessage()\n        }}</p-message>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host ::ng-deep .tk-toggle-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-toggle-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-toggle-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-toggle-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-toggle-label{cursor:pointer}: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-toggleswitch.ng-invalid.ng-touched .p-toggleswitch,:host ::ng-deep p-toggleswitch.ng-invalid.ng-dirty .p-toggleswitch{outline:2px solid var(--tk-color-base-red-700, #cf2604);outline-offset:2px;border-radius:var(--p-toggleswitch-border-radius)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }] } });
+            args: [{ selector: 'tk-toggle', imports: [ReactiveFormsModule, FormsModule, ToggleSwitchModule, MessageModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tk-toggle-wrapper\">\n  <div class=\"tk-toggle-group\" [class.tk-disabled]=\"disabled()\">\n    <p-toggleswitch\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\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      (blur)=\"onBlur()\">\n    </p-toggleswitch>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-toggle-label\">{{ label() }}</label>\n    }\n  </div>\n  @let showError =\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage();\n  @if (showError || hint()) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        @if (showError) {\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</div>\n", styles: [":host{display:inline-block}:host ::ng-deep .tk-toggle-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-toggle-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-toggle-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-toggle-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-toggle-label{cursor:pointer}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-input-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}:host ::ng-deep p-toggleswitch.ng-invalid.ng-touched .p-toggleswitch,:host ::ng-deep p-toggleswitch.ng-invalid.ng-dirty .p-toggleswitch{outline:2px solid var(--tk-color-base-red-700, #cf2604);outline-offset:2px;border-radius:var(--p-toggleswitch-border-radius)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-toggle.mjs","sources":["../../../projects/design-system/components/toggle/src/toggle.component.ts","../../../projects/design-system/components/toggle/src/toggle.component.html","../../../projects/design-system/components/toggle/tekus-design-system-components-toggle.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  input,\n  model,\n  OnInit,\n  inject,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n  ControlValueAccessor,\n  FormControl,\n  ReactiveFormsModule,\n  NgControl,\n  FormsModule,\n} from '@angular/forms';\nimport { ToggleSwitchModule } from 'primeng/toggleswitch';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n  selector: 'tk-toggle',\n  imports: [ReactiveFormsModule, FormsModule, ToggleSwitchModule, MessageModule],\n  templateUrl: './toggle.component.html',\n  styleUrl: './toggle.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToggleComponent implements ControlValueAccessor, OnInit {\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\n  private readonly destroyRef = inject(DestroyRef);\n\n  constructor() {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  model = model<boolean>(false);\n\n  label = input<string>('');\n\n  name = input<string>('');\n\n  inputId = input<string>('');\n\n  control = input<FormControl>(new FormControl());\n\n  errorMessage = input<string>('');\n\n  disabled = model<boolean>(false);\n\n  get effectiveControl(): FormControl {\n    return (this.ngControl?.control as FormControl) || this.control();\n  }\n\n  onChange: (value: boolean) => void = () => {};\n  onTouched: () => void = () => {};\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    control.statusChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.disabled.set(control.disabled);\n      });\n\n    control.valueChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(value => {\n        this.model.set(!!value);\n      });\n  }\n\n  writeValue(value: boolean): void {\n    this.model.set(!!value);\n  }\n\n  registerOnChange(fn: (value: boolean) => 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: boolean): void {\n    this.model.set(value);\n    this.onChange(value);\n    this.effectiveControl.setValue(value, { emitEvent: false });\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-toggle-wrapper\">\n  <div class=\"tk-toggle-group\" [class.tk-disabled]=\"disabled()\">\n    <p-toggleswitch\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\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      (blur)=\"onBlur()\">\n    </p-toggleswitch>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-toggle-label\">{{ label() }}</label>\n    }\n  </div>\n  @if (\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage()\n  ) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n          errorMessage()\n        }}</p-message>\n      </div>\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;MA2Ba,eAAe,CAAA;AAI1B,IAAA,WAAA,GAAA;AAHS,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACrD,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAQhD,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAU,KAAK,4EAAC;AAE7B,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;AAEzB,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,EAAE,2EAAC;AAExB,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAS,EAAE,8EAAC;AAE3B,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAc,IAAI,WAAW,EAAE,8EAAC;AAE/C,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAS,EAAE,mFAAC;AAEhC,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAMhC,QAAA,IAAA,CAAA,QAAQ,GAA6B,MAAK,EAAE,CAAC;AAC7C,QAAA,IAAA,CAAA,SAAS,GAAe,MAAK,EAAE,CAAC;AAxB9B,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,IAAI,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI;QACrC;IACF;AAgBA,IAAA,IAAI,gBAAgB,GAAA;QAClB,OAAQ,IAAI,CAAC,SAAS,EAAE,OAAuB,IAAI,IAAI,CAAC,OAAO,EAAE;IACnE;IAKA,QAAQ,GAAA;AACN,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB;AAErC,QAAA,IAAI,OAAO,CAAC,KAAK,KAAK,SAAS,IAAI,OAAO,CAAC,KAAK,KAAK,IAAI,EAAE;YACzD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC;QACjC;AAEA,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,KAAK,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACjD,OAAO,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;QACvC;aAAO;YACL,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC;QACrC;AAEA,QAAA,OAAO,CAAC;AACL,aAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;aACxC,SAAS,CAAC,MAAK;YACd,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC;AACrC,QAAA,CAAC,CAAC;AAEJ,QAAA,OAAO,CAAC;AACL,aAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;aACxC,SAAS,CAAC,KAAK,IAAG;YACjB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;AACzB,QAAA,CAAC,CAAC;IACN;AAEA,IAAA,UAAU,CAAC,KAAc,EAAA;QACvB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;IACzB;AAEA,IAAA,gBAAgB,CAAC,EAA4B,EAAA;AAC3C,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AAEA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,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;QAC9C;aAAO;AACL,YAAA,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;QAC7C;IACF;AAEA,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,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;AAC3D,QAAA,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE;QACnC,IAAI,CAAC,SAAS,EAAE;IAClB;IAEA,MAAM,GAAA;QACJ,IAAI,CAAC,SAAS,EAAE;AAChB,QAAA,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE;IACvC;+GAzFW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,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,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,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3B5B,w+BA+BA,EAAA,MAAA,EAAA,CAAA,ujCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDTY,mBAAmB,sIAAE,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,kBAAkB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,iDAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,MAAA,EAAA,gBAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,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,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAKlE,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,OAAA,EACZ,CAAC,mBAAmB,EAAE,WAAW,EAAE,kBAAkB,EAAE,aAAa,CAAC,EAAA,eAAA,EAG7D,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,w+BAAA,EAAA,MAAA,EAAA,CAAA,ujCAAA,CAAA,EAAA;;;AEzBjD;;AAEG;;;;"}
+{"version":3,"file":"tekus-design-system-components-toggle.mjs","sources":["../../../projects/design-system/components/toggle/src/toggle.component.ts","../../../projects/design-system/components/toggle/src/toggle.component.html","../../../projects/design-system/components/toggle/tekus-design-system-components-toggle.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  input,\n  model,\n  OnInit,\n  inject,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n  ControlValueAccessor,\n  FormControl,\n  ReactiveFormsModule,\n  NgControl,\n  FormsModule,\n} from '@angular/forms';\nimport { ToggleSwitchModule } from 'primeng/toggleswitch';\nimport { MessageModule } from 'primeng/message';\n\n@Component({\n  selector: 'tk-toggle',\n  imports: [ReactiveFormsModule, FormsModule, ToggleSwitchModule, MessageModule],\n  templateUrl: './toggle.component.html',\n  styleUrl: './toggle.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToggleComponent implements ControlValueAccessor, OnInit {\n  readonly ngControl = inject(NgControl, { self: true, optional: true });\n  private readonly destroyRef = inject(DestroyRef);\n\n  constructor() {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  model = model<boolean>(false);\n\n  label = input<string>('');\n\n  name = input<string>('');\n\n  inputId = input<string>('');\n\n  control = input<FormControl>(new FormControl());\n\n  errorMessage = input<string>('');\n\n  hint = input<string>('');\n\n  disabled = model<boolean>(false);\n\n  get effectiveControl(): FormControl {\n    return (this.ngControl?.control as FormControl) || this.control();\n  }\n\n  onChange: (value: boolean) => void = () => {};\n  onTouched: () => void = () => {};\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    control.statusChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.disabled.set(control.disabled);\n      });\n\n    control.valueChanges\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(value => {\n        this.model.set(!!value);\n      });\n  }\n\n  writeValue(value: boolean): void {\n    this.model.set(!!value);\n  }\n\n  registerOnChange(fn: (value: boolean) => 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: boolean): void {\n    this.model.set(value);\n    this.onChange(value);\n    this.effectiveControl.setValue(value, { emitEvent: false });\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-toggle-wrapper\">\n  <div class=\"tk-toggle-group\" [class.tk-disabled]=\"disabled()\">\n    <p-toggleswitch\n      [inputId]=\"inputId()\"\n      [name]=\"name()\"\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      (blur)=\"onBlur()\">\n    </p-toggleswitch>\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"tk-toggle-label\">{{ label() }}</label>\n    }\n  </div>\n  @let showError =\n    effectiveControl.invalid &&\n    (effectiveControl.dirty || effectiveControl.touched) &&\n    errorMessage();\n  @if (showError || hint()) {\n    <div class=\"tk-input-bottom\">\n      <div class=\"tk-input-messages\">\n        @if (showError) {\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</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

@@ -424,7 +424,7 @@ class ToolbarComponent {
         this.reload.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToolbarComponent, isStandalone: true, selector: "tk-toolbar", inputs: { searchModel: { classPropertyName: "searchModel", publicName: "searchModel", 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 }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, viewToggleVisible: { classPropertyName: "viewToggleVisible", publicName: "viewToggleVisible", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", 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 }, filterVisible: { classPropertyName: "filterVisible", publicName: "filterVisible", isSignal: true, isRequired: false, transformFunction: null }, filterValues: { classPropertyName: "filterValues", publicName: "filterValues", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, deleteLabel: { classPropertyName: "deleteLabel", publicName: "deleteLabel", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedLabel: { classPropertyName: "selectedLabel", publicName: "selectedLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedPluralLabel: { classPropertyName: "selectedPluralLabel", publicName: "selectedPluralLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, reloadTooltip: { classPropertyName: "reloadTooltip", publicName: "reloadTooltip", isSignal: true, isRequired: false, transformFunction: null }, sortTooltip: { classPropertyName: "sortTooltip", publicName: "sortTooltip", isSignal: true, isRequired: false, transformFunction: null }, viewCardsTooltip: { classPropertyName: "viewCardsTooltip", publicName: "viewCardsTooltip", isSignal: true, isRequired: false, transformFunction: null }, viewTableTooltip: { classPropertyName: "viewTableTooltip", publicName: "viewTableTooltip", isSignal: true, isRequired: false, transformFunction: null }, sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: false, transformFunction: null }, sortLabel: { classPropertyName: "sortLabel", publicName: "sortLabel", isSignal: true, isRequired: false, transformFunction: null }, sortValue: { classPropertyName: "sortValue", publicName: "sortValue", 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 }, globalActions: { classPropertyName: "globalActions", publicName: "globalActions", isSignal: true, isRequired: false, transformFunction: null }, selectionCount: { classPropertyName: "selectionCount", publicName: "selectionCount", isSignal: true, isRequired: false, transformFunction: null }, allSelected: { classPropertyName: "allSelected", publicName: "allSelected", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, selectionActions: { classPropertyName: "selectionActions", publicName: "selectionActions", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleSelectionActions: { classPropertyName: "maxVisibleSelectionActions", publicName: "maxVisibleSelectionActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchModel: "searchModelChange", view: "viewChange", filterModel: "filterModelChange", filterValues: "filterValuesChange", sortValue: "sortValueChange", allSelected: "allSelectedChange", indeterminate: "indeterminateChange", reload: "reload", appliedFilters: "appliedFilters", appliedSort: "appliedSort" }, viewQueries: [{ propertyName: "filterPopover", first: true, predicate: ["filterPopover"], descendants: true, isSignal: true }, { propertyName: "sortPopover", first: true, predicate: ["sortPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tk-toolbar-container\">\n  <!-- 1. Selection Status Bar (Desktop replacement) -->\n  @if (selectionCount() > 0 && !isMobile()) {\n    <div class=\"tk-toolbar-selection-bar\" data-testid=\"selection-bar-desktop\">\n      <div class=\"tk-toolbar-selection-bar__left\">\n        <tk-checkbox\n          [binary]=\"true\"\n          [(model)]=\"allSelected\"\n          [indeterminate]=\"indeterminate()\">\n        </tk-checkbox>\n        <span class=\"tk-toolbar-selection-bar__count\">\n          {{ selectionCount() }} {{ selectionCount() === 1 ? selectedLabel() : selectedPluralLabel() }}\n        </span>\n      </div>\n      <div class=\"tk-toolbar-selection-bar__right\">\n        @for (action of visibleSelectionActions(); track action.label) {\n          <tk-button\n            [label]=\"action.label\"\n            [icon]=\"action.icon\"\n            [severity]=\"action.severity ?? 'secondary'\"\n            [variant]=\"action.variant !== undefined ? action.variant : (action.severity === 'danger' ? undefined : 'text')\"\n            [disabled]=\"action.disabled ?? false\"\n            (clicked)=\"action.action()\">\n          </tk-button>\n        }\n        @if (overflowSelectionActions().length > 0) {\n          <tk-dropdown\n            icon=\"ellipsis-vertical\"\n            [model]=\"overflowSelectionActions()\">\n          </tk-dropdown>\n        }\n      </div>\n    </div>\n  } @else {\n    <!-- 2. Main Tools Bar -->\n    <div class=\"tk-toolbar\" data-testid=\"main-toolbar\">\n      <!-- Left part: search input (always visible if searchVisible is true) -->\n      @if (searchVisible()) {\n        <div class=\"tk-toolbar__search\">\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\n      <!-- Right part: actions -->\n      <div class=\"tk-toolbar__actions\">\n        @if (viewToggleVisible()) {\n          <tk-button\n            [icon]=\"view() === 'table' ? 'table' : 'table-list'\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [tooltipText]=\"view() === 'table' ? viewCardsTooltip() : viewTableTooltip()\"\n            (clicked)=\"toggleView()\">\n          </tk-button>\n        }\n\n        @if (derivedFilters().length > 0 && filterVisible()) {\n          <tk-button\n            #filterBtn\n            [icon]=\"'filter'\"\n            [severity]=\"hasActiveFilters() ? 'primary' : 'secondary'\"\n            [variant]=\"hasActiveFilters() ? undefined : 'text'\"\n            [tooltipText]=\"filterLabel()\"\n            (click)=\"openFilters($event)\"\n            (keydown.enter)=\"openFilters($event)\"\n            (keydown.space)=\"openFilters($event)\">\n          </tk-button>\n        }\n\n        @if (sortOptions().length > 0) {\n          <tk-button\n            #sortBtn\n            [icon]=\"'arrow-down-wide-short'\"\n            [severity]=\"hasActiveSort() ? 'primary' : 'secondary'\"\n            [variant]=\"hasActiveSort() ? undefined : 'text'\"\n            [tooltipText]=\"sortTooltip()\"\n            (click)=\"openSort($event)\"\n            (keydown.enter)=\"openSort($event)\"\n            (keydown.space)=\"openSort($event)\">\n          </tk-button>\n        }\n\n        @if (shouldShowReload()) {\n          <tk-button\n            class=\"tk-toolbar__reload-btn\"\n            [class.tk-toolbar__reload-btn--animating]=\"\n              reloadInterval() && reloadInterval()! > 0 && !loading()\n            \"\n            [class.tk-toolbar__reload-btn--spinning]=\"loading()\"\n            [style.--reload-interval]=\"(reloadInterval() ?? 0) + 'ms'\"\n            [icon]=\"'arrows-rotate'\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [tooltipText]=\"reloadTooltip()\"\n            (clicked)=\"onReload()\">\n          </tk-button>\n        }\n\n        @if (globalActions().length > 0) {\n          <tk-action-group\n            [actions]=\"globalActions()\"\n            [maxVisible]=\"0\">\n          </tk-action-group>\n        }\n      </div>\n    </div>\n  }\n\n  @if (shouldShowActiveFiltersBar()) {\n    <div class=\"tk-toolbar-chips-bar\" data-testid=\"chips-bar\">\n      <div class=\"tk-toolbar-chips-bar__scroll\">\n        @for (chip of activeChips(); track chip.filterKey + '-' + chip.code) {\n          <tk-chip\n            [label]=\"chip.label\"\n            [removable]=\"true\"\n            (removed)=\"removeChip(chip)\">\n          </tk-chip>\n        }\n      </div>\n      <tk-button\n        [link]=\"true\"\n        [label]=\"clearLabel()\"\n        class=\"tk-toolbar-chips-bar__clear-btn\"\n        (clicked)=\"clearAllFilters()\">\n      </tk-button>\n    </div>\n  }\n\n  <!-- 4. Selection Status Bar (Mobile floating panel) -->\n  @if (selectionCount() > 0 && isMobile()) {\n    <div class=\"tk-toolbar-selection-bar tk-toolbar-selection-bar--mobile\" data-testid=\"selection-bar-mobile\">\n      <div class=\"tk-toolbar-selection-bar__left\">\n        <tk-checkbox\n          [binary]=\"true\"\n          [(model)]=\"allSelected\"\n          [indeterminate]=\"indeterminate()\">\n        </tk-checkbox>\n        <span class=\"tk-toolbar-selection-bar__count\">\n          {{ selectionCount() }} {{ selectionCount() === 1 ? selectedLabel() : selectedPluralLabel() }}\n        </span>\n      </div>\n      <div class=\"tk-toolbar-selection-bar__right\">\n        @for (action of visibleSelectionActions(); track action.label) {\n          <tk-button\n            [label]=\"action.label\"\n            [icon]=\"action.icon\"\n            [severity]=\"action.severity ?? 'secondary'\"\n            [variant]=\"action.variant !== undefined ? action.variant : (action.severity === 'danger' ? undefined : 'text')\"\n            [disabled]=\"action.disabled ?? false\"\n            (clicked)=\"action.action()\">\n          </tk-button>\n        }\n        @if (overflowSelectionActions().length > 0) {\n          <tk-dropdown\n            icon=\"ellipsis-vertical\"\n            [model]=\"overflowSelectionActions()\">\n          </tk-dropdown>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n<!-- 5. Desktop Popovers -->\n@if (derivedFilters().length > 0 && filterVisible() && !isMobile()) {\n  <p-popover #filterPopover styleClass=\"tk-toolbar-popover\">\n    <div class=\"tk-toolbar-overlay\" data-testid=\"filter-popover\">\n      <div class=\"tk-toolbar-overlay__header\">\n        <span class=\"tk-toolbar-overlay__title\">{{ filterLabel() }}</span>\n        <button type=\"button\" class=\"tk-toolbar-overlay__close\" (click)=\"filterPopover.hide()\">\n          <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n        </button>\n      </div>\n      <div class=\"tk-toolbar-overlay__body\">\n        @for (filter of derivedFilters(); track filter.key) {\n          <div class=\"tk-toolbar-overlay__field\">\n            <tk-multiselect\n              [id]=\"'filter-' + filter.key\"\n              [options]=\"filter.options\"\n              [labelText]=\"filter.label\"\n              [model]=\"tempFilterValues()[filter.key] || []\"\n              (modelChange)=\"onTempFilterChange(filter.key, $event || [])\"\n              appendTo=\"body\"\n              panelStyleClass=\"tk-toolbar-multiselect-panel\">\n            </tk-multiselect>\n          </div>\n        }\n      </div>\n      <div class=\"tk-toolbar-overlay__footer\">\n        <tk-button\n          [label]=\"clearLabel()\"\n          severity=\"secondary\"\n          variant=\"outlined\"\n          (clicked)=\"clearTempFilters()\">\n        </tk-button>\n        <tk-button\n          [label]=\"applyLabel()\"\n          severity=\"primary\"\n          (clicked)=\"applyFilters()\">\n        </tk-button>\n      </div>\n    </div>\n  </p-popover>\n}\n\n@if (sortOptions().length > 0 && !isMobile()) {\n  <p-popover #sortPopover styleClass=\"tk-toolbar-popover\">\n    <div class=\"tk-toolbar-overlay tk-toolbar-overlay--sort\" data-testid=\"sort-popover\">\n      <div class=\"tk-toolbar-overlay__header\">\n        <span class=\"tk-toolbar-overlay__title\">{{ sortLabel() }}</span>\n        <button type=\"button\" class=\"tk-toolbar-overlay__close\" (click)=\"sortPopover.hide()\">\n          <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n        </button>\n      </div>\n      <div class=\"tk-toolbar-overlay__body\">\n        <div class=\"tk-toolbar-sort-options\">\n          @for (option of sortOptions(); track option.value) {\n            <button \n              type=\"button\"\n              class=\"tk-toolbar-sort-option\" \n              [class.tk-toolbar-sort-option--active]=\"sortValue() === option.value\"\n              (click)=\"selectSortOption(option.value)\">\n              <span>{{ option.label }}</span>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  </p-popover>\n}\n\n<!-- 6. Mobile Drawers -->\n@if (derivedFilters().length > 0 && filterVisible() && isMobile()) {\n  <tk-drawer\n    [(isOpened)]=\"showFilterDrawer\"\n    [title]=\"filterLabel()\"\n    direction=\"bottom\"\n    [dismissible]=\"true\">\n    <div class=\"tk-toolbar-overlay__body\">\n      @for (filter of derivedFilters(); track filter.key) {\n        <div class=\"tk-toolbar-overlay__field\">\n          <tk-multiselect\n            [id]=\"'filter-mob-' + filter.key\"\n            [options]=\"filter.options\"\n            [labelText]=\"filter.label\"\n            [model]=\"tempFilterValues()[filter.key] || []\"\n            (modelChange)=\"onTempFilterChange(filter.key, $event || [])\"\n            appendTo=\"body\"\n            panelStyleClass=\"tk-toolbar-multiselect-panel\">\n          </tk-multiselect>\n        </div>\n      }\n    </div>\n    <div class=\"tk-toolbar-overlay__footer\">\n      <tk-button\n        [label]=\"clearLabel()\"\n        severity=\"secondary\"\n        variant=\"outlined\"\n        (clicked)=\"clearTempFilters()\">\n      </tk-button>\n      <tk-button\n        [label]=\"applyLabel()\"\n        severity=\"primary\"\n        (clicked)=\"applyFilters()\">\n      </tk-button>\n    </div>\n  </tk-drawer>\n}\n\n@if (sortOptions().length > 0 && isMobile()) {\n  <tk-drawer\n    [(isOpened)]=\"showSortDrawer\"\n    [title]=\"sortLabel()\"\n    direction=\"bottom\"\n    [dismissible]=\"true\">\n    <div class=\"tk-toolbar-overlay__body\">\n      <div class=\"tk-toolbar-sort-options\">\n        @for (option of sortOptions(); track option.value) {\n          <button \n            type=\"button\"\n            class=\"tk-toolbar-sort-option\" \n            [class.tk-toolbar-sort-option--active]=\"tempSortValue() === option.value\"\n            (click)=\"toggleSortOptionMobile(option.value)\">\n            <span>{{ option.label }}</span>\n          </button>\n        }\n      </div>\n    </div>\n    <div class=\"tk-toolbar-overlay__footer\">\n      <tk-button\n        [label]=\"applyLabel()\"\n        severity=\"primary\"\n        (clicked)=\"applySortMobile()\">\n      </tk-button>\n    </div>\n  </tk-drawer>\n}\n", styles: [".tk-toolbar-container{display:flex;flex-direction:column;gap:var(--tk-spacing-base-50, .5rem);width:100%}.tk-toolbar{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:var(--tk-spacing-base-100, 1rem);width:100%}.tk-toolbar__search{width:15rem;max-width:100%}@media(max-width:768px){.tk-toolbar__search{width:100%}}.tk-toolbar__actions{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar__actions>tk-button{width:2.5rem;height:2.5rem}.tk-toolbar__actions>tk-button ::ng-deep .p-button{width:100%;height:100%;padding:0;display:flex;align-items:center;justify-content:center}.tk-toolbar__reload-btn{border-radius:var(--tk-borderRadius-s, 8px);position:relative}.tk-toolbar__reload-btn--animating:before{content:\"\";position:absolute;inset:0;z-index:1;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:3px;border-radius:inherit;animation:draw-border var(--reload-interval, 5s) infinite linear;pointer-events:none}.tk-toolbar__reload-btn--spinning ::ng-deep tk-icon{display:inline-block;animation:spin 1s infinite linear}.tk-toolbar-selection-bar{display:flex;justify-content:space-between;align-items:center;width:100%;background-color:var(--tk-color-base-surface-50, #f8fafc);border:1px solid var(--tk-color-base-surface-200, #e2e8f0);border-radius:var(--tk-borderRadius-s, 8px);padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem);box-sizing:border-box}.tk-toolbar-selection-bar__left{display:flex;align-items:center;gap:var(--tk-spacing-base-75, .75rem)}.tk-toolbar-selection-bar__count{font-size:1rem;font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-selection-bar__right{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar-selection-bar--mobile{position:fixed;bottom:0;left:0;width:100%;max-width:none;transform:none;z-index:1000;background-color:var(--tk-color-base-surface-0, #ffffff);box-shadow:0 -4px 6px -1px #0000000d,0 -2px 4px -1px #00000008;border-radius:0;border:none;border-top:1px solid var(--tk-color-base-surface-200, #e2e8f0);padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem)}.tk-toolbar-chips-bar{width:100%;border-top:none;padding-top:var(--tk-spacing-base-50, .5rem);display:flex;justify-content:space-between;align-items:center;gap:var(--tk-spacing-base-100, 1rem)}.tk-toolbar-chips-bar__scroll{display:flex;align-items:center;flex-wrap:wrap;gap:var(--tk-spacing-base-50, .5rem);flex-grow:1}.tk-toolbar-chips-bar__clear-btn{flex-shrink:0}.tk-toolbar-overlay{display:flex;flex-direction:column;width:20rem;max-width:100%;padding:var(--tk-spacing-base-100, 1rem);box-sizing:border-box}.tk-toolbar-overlay--sort{width:15rem;padding:var(--tk-spacing-base-50, .5rem)!important}.tk-toolbar-overlay--sort .tk-toolbar-overlay__header{padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-25, .25rem) var(--tk-spacing-base-50, .5rem)!important}.tk-toolbar-overlay--sort .tk-toolbar-overlay__body{padding:0!important;margin-bottom:0!important}.tk-toolbar-overlay__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0;padding:0 0 var(--tk-spacing-base-50, .5rem) 0}.tk-toolbar-overlay__title{font-size:1rem;font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-overlay__close{background:none;border:none;padding:var(--tk-spacing-base-25, .25rem);color:var(--tk-color-base-surface-500, #64748b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--tk-borderRadius-s, 8px);transition:background-color .2s}.tk-toolbar-overlay__close:hover{background-color:var(--tk-color-base-surface-100, #f1f5f9);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-overlay__body{display:flex;flex-direction:column;gap:var(--tk-spacing-base-100, 1rem);padding-top:var(--tk-spacing-base-125, 1.25rem);margin-bottom:var(--tk-spacing-base-150, 1.5rem);max-height:24rem;overflow-y:auto}.tk-toolbar-overlay__field{display:flex;flex-direction:column;gap:var(--tk-spacing-base-25, .25rem)}.tk-toolbar-overlay__footer{display:flex;justify-content:flex-end;gap:var(--tk-spacing-base-50, .5rem);padding-top:var(--tk-spacing-base-100, 1rem)}.tk-toolbar-sort-options{display:flex;flex-direction:column;width:100%}.tk-toolbar-sort-option{display:flex;justify-content:space-between;align-items:center;padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem);cursor:pointer;border-radius:var(--tk-borderRadius-s, 8px);font-size:.875rem;color:var(--tk-color-base-surface-700, #334155);transition:background-color .2s,color .2s;background:none;border:none;width:100%;font-family:inherit;text-align:left}.tk-toolbar-sort-option:hover{background-color:var(--tk-color-primary-muted, #e9e6f4);color:var(--tk-color-base-primary-500, #16006f)}.tk-toolbar-sort-option--active{font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-primary-500, #16006f);background-color:var(--tk-color-primary-muted, #e9e6f4)}@media(max-width:768px){.tk-toolbar{flex-direction:column;align-items:stretch;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar__search{width:100%}.tk-toolbar__actions{width:100%;justify-content:flex-end;margin-left:0}}@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-popover{border-radius:var(--tk-borderRadius-m, 12px);box-shadow:0 10px 15px -3px #0000001a;border:1px solid var(--tk-color-base-surface-200, #e2e8f0);overflow:hidden}:host ::ng-deep .tk-toolbar-popover .p-popover-content{padding:0!important}:host ::ng-deep tk-drawer .tk-toolbar-overlay__body{padding-top:var(--tk-spacing-base-75, .75rem)!important;margin-bottom:0!important}:host ::ng-deep tk-drawer .tk-toolbar-overlay__footer{padding-top:var(--tk-spacing-base-75, .75rem)!important}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-option span{color:var(--tk-color-primary-default, #16006f);display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-option-selected{background-color:var(--tk-color-primary-muted, #b7b0d2)}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], 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: CheckboxComponent, selector: "tk-checkbox", inputs: ["model", "value", "label", "name", "inputId", "binary", "control", "errorMessage", "indeterminate", "disabled"], outputs: ["modelChange", "indeterminateChange", "disabledChange"] }, { kind: "component", type: ActionGroupComponent, selector: "tk-action-group", inputs: ["actions", "maxVisible", "disabled"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: DropdownComponent, selector: "tk-dropdown", inputs: ["model", "icon", "label", "iconPosition", "size", "disabled", "tooltip", "tooltipPosition"] }, { kind: "component", type: MultiselectComponent, selector: "tk-multiselect", inputs: ["model", "dataSource", "options", "labelText", "display", "maxSelectedLabels", "selectedItemsLabel", "emptyFilterMessage", "filter", "filterPlaceHolder", "appendTo", "panelStyleClass", "id", "styleClass", "errorMessage", "hint", "loading", "emptyMessage", "fetchParams", "sortField", "sortOrder", "disabled"], outputs: ["modelChange", "dataSourceChange", "selectionChange", "filterChange"] }, { kind: "component", type: ChipComponent, selector: "tk-chip", inputs: ["label", "icon", "removable", "removeIcon"], outputs: ["removed"] }, { kind: "component", type: DrawerComponent, selector: "tk-drawer", inputs: ["dialogRef", "title", "content", "headerAction", "tag", "subtle", "hasTabs", "size", "direction", "closable", "dismissible", "data", "interceptor", "isOpened"], outputs: ["isOpenedChange", "closed"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToolbarComponent, isStandalone: true, selector: "tk-toolbar", inputs: { searchModel: { classPropertyName: "searchModel", publicName: "searchModel", 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 }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, viewToggleVisible: { classPropertyName: "viewToggleVisible", publicName: "viewToggleVisible", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", 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 }, filterVisible: { classPropertyName: "filterVisible", publicName: "filterVisible", isSignal: true, isRequired: false, transformFunction: null }, filterValues: { classPropertyName: "filterValues", publicName: "filterValues", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, deleteLabel: { classPropertyName: "deleteLabel", publicName: "deleteLabel", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedLabel: { classPropertyName: "selectedLabel", publicName: "selectedLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedPluralLabel: { classPropertyName: "selectedPluralLabel", publicName: "selectedPluralLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, reloadTooltip: { classPropertyName: "reloadTooltip", publicName: "reloadTooltip", isSignal: true, isRequired: false, transformFunction: null }, sortTooltip: { classPropertyName: "sortTooltip", publicName: "sortTooltip", isSignal: true, isRequired: false, transformFunction: null }, viewCardsTooltip: { classPropertyName: "viewCardsTooltip", publicName: "viewCardsTooltip", isSignal: true, isRequired: false, transformFunction: null }, viewTableTooltip: { classPropertyName: "viewTableTooltip", publicName: "viewTableTooltip", isSignal: true, isRequired: false, transformFunction: null }, sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: false, transformFunction: null }, sortLabel: { classPropertyName: "sortLabel", publicName: "sortLabel", isSignal: true, isRequired: false, transformFunction: null }, sortValue: { classPropertyName: "sortValue", publicName: "sortValue", 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 }, globalActions: { classPropertyName: "globalActions", publicName: "globalActions", isSignal: true, isRequired: false, transformFunction: null }, selectionCount: { classPropertyName: "selectionCount", publicName: "selectionCount", isSignal: true, isRequired: false, transformFunction: null }, allSelected: { classPropertyName: "allSelected", publicName: "allSelected", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, selectionActions: { classPropertyName: "selectionActions", publicName: "selectionActions", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleSelectionActions: { classPropertyName: "maxVisibleSelectionActions", publicName: "maxVisibleSelectionActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchModel: "searchModelChange", view: "viewChange", filterModel: "filterModelChange", filterValues: "filterValuesChange", sortValue: "sortValueChange", allSelected: "allSelectedChange", indeterminate: "indeterminateChange", reload: "reload", appliedFilters: "appliedFilters", appliedSort: "appliedSort" }, viewQueries: [{ propertyName: "filterPopover", first: true, predicate: ["filterPopover"], descendants: true, isSignal: true }, { propertyName: "sortPopover", first: true, predicate: ["sortPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tk-toolbar-container\">\n  <!-- 1. Selection Status Bar (Desktop replacement) -->\n  @if (selectionCount() > 0 && !isMobile()) {\n    <div class=\"tk-toolbar-selection-bar\" data-testid=\"selection-bar-desktop\">\n      <div class=\"tk-toolbar-selection-bar__left\">\n        <tk-checkbox\n          [binary]=\"true\"\n          [(model)]=\"allSelected\"\n          [indeterminate]=\"indeterminate()\">\n        </tk-checkbox>\n        <span class=\"tk-toolbar-selection-bar__count\">\n          {{ selectionCount() }} {{ selectionCount() === 1 ? selectedLabel() : selectedPluralLabel() }}\n        </span>\n      </div>\n      <div class=\"tk-toolbar-selection-bar__right\">\n        @for (action of visibleSelectionActions(); track action.label) {\n          <tk-button\n            [label]=\"action.label\"\n            [icon]=\"action.icon\"\n            [severity]=\"action.severity ?? 'secondary'\"\n            [variant]=\"action.variant !== undefined ? action.variant : (action.severity === 'danger' ? undefined : 'text')\"\n            [disabled]=\"action.disabled ?? false\"\n            (clicked)=\"action.action()\">\n          </tk-button>\n        }\n        @if (overflowSelectionActions().length > 0) {\n          <tk-dropdown\n            icon=\"ellipsis-vertical\"\n            [model]=\"overflowSelectionActions()\">\n          </tk-dropdown>\n        }\n      </div>\n    </div>\n  } @else {\n    <!-- 2. Main Tools Bar -->\n    <div class=\"tk-toolbar\" data-testid=\"main-toolbar\">\n      <!-- Left part: search input (always visible if searchVisible is true) -->\n      @if (searchVisible()) {\n        <div class=\"tk-toolbar__search\">\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\n      <!-- Right part: actions -->\n      <div class=\"tk-toolbar__actions\">\n        @if (viewToggleVisible()) {\n          <tk-button\n            [icon]=\"view() === 'table' ? 'table' : 'table-list'\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [tooltipText]=\"view() === 'table' ? viewCardsTooltip() : viewTableTooltip()\"\n            (clicked)=\"toggleView()\">\n          </tk-button>\n        }\n\n        @if (derivedFilters().length > 0 && filterVisible()) {\n          <tk-button\n            #filterBtn\n            [icon]=\"'filter'\"\n            [severity]=\"hasActiveFilters() ? 'primary' : 'secondary'\"\n            [variant]=\"hasActiveFilters() ? undefined : 'text'\"\n            [tooltipText]=\"filterLabel()\"\n            (click)=\"openFilters($event)\"\n            (keydown.enter)=\"openFilters($event)\"\n            (keydown.space)=\"openFilters($event)\">\n          </tk-button>\n        }\n\n        @if (sortOptions().length > 0) {\n          <tk-button\n            #sortBtn\n            [icon]=\"'arrow-down-wide-short'\"\n            [severity]=\"hasActiveSort() ? 'primary' : 'secondary'\"\n            [variant]=\"hasActiveSort() ? undefined : 'text'\"\n            [tooltipText]=\"sortTooltip()\"\n            (click)=\"openSort($event)\"\n            (keydown.enter)=\"openSort($event)\"\n            (keydown.space)=\"openSort($event)\">\n          </tk-button>\n        }\n\n        @if (shouldShowReload()) {\n          <tk-button\n            class=\"tk-toolbar__reload-btn\"\n            [class.tk-toolbar__reload-btn--animating]=\"\n              reloadInterval() && reloadInterval()! > 0 && !loading()\n            \"\n            [class.tk-toolbar__reload-btn--spinning]=\"loading()\"\n            [style.--reload-interval]=\"(reloadInterval() ?? 0) + 'ms'\"\n            [icon]=\"'arrows-rotate'\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [tooltipText]=\"reloadTooltip()\"\n            (clicked)=\"onReload()\">\n          </tk-button>\n        }\n\n        @if (globalActions().length > 0) {\n          <tk-action-group\n            [actions]=\"globalActions()\"\n            [maxVisible]=\"0\">\n          </tk-action-group>\n        }\n      </div>\n    </div>\n  }\n\n  @if (shouldShowActiveFiltersBar()) {\n    <div class=\"tk-toolbar-chips-bar\" data-testid=\"chips-bar\">\n      <div class=\"tk-toolbar-chips-bar__scroll\">\n        @for (chip of activeChips(); track chip.filterKey + '-' + chip.code) {\n          <tk-chip\n            [label]=\"chip.label\"\n            [removable]=\"true\"\n            (removed)=\"removeChip(chip)\">\n          </tk-chip>\n        }\n      </div>\n      <tk-button\n        [link]=\"true\"\n        [label]=\"clearLabel()\"\n        class=\"tk-toolbar-chips-bar__clear-btn\"\n        (clicked)=\"clearAllFilters()\">\n      </tk-button>\n    </div>\n  }\n\n  <!-- 4. Selection Status Bar (Mobile floating panel) -->\n  @if (selectionCount() > 0 && isMobile()) {\n    <div class=\"tk-toolbar-selection-bar tk-toolbar-selection-bar--mobile\" data-testid=\"selection-bar-mobile\">\n      <div class=\"tk-toolbar-selection-bar__left\">\n        <tk-checkbox\n          [binary]=\"true\"\n          [(model)]=\"allSelected\"\n          [indeterminate]=\"indeterminate()\">\n        </tk-checkbox>\n        <span class=\"tk-toolbar-selection-bar__count\">\n          {{ selectionCount() }} {{ selectionCount() === 1 ? selectedLabel() : selectedPluralLabel() }}\n        </span>\n      </div>\n      <div class=\"tk-toolbar-selection-bar__right\">\n        @for (action of visibleSelectionActions(); track action.label) {\n          <tk-button\n            [label]=\"action.label\"\n            [icon]=\"action.icon\"\n            [severity]=\"action.severity ?? 'secondary'\"\n            [variant]=\"action.variant !== undefined ? action.variant : (action.severity === 'danger' ? undefined : 'text')\"\n            [disabled]=\"action.disabled ?? false\"\n            (clicked)=\"action.action()\">\n          </tk-button>\n        }\n        @if (overflowSelectionActions().length > 0) {\n          <tk-dropdown\n            icon=\"ellipsis-vertical\"\n            [model]=\"overflowSelectionActions()\">\n          </tk-dropdown>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n<!-- 5. Desktop Popovers -->\n@if (derivedFilters().length > 0 && filterVisible() && !isMobile()) {\n  <p-popover #filterPopover styleClass=\"tk-toolbar-popover\">\n    <div class=\"tk-toolbar-overlay\" data-testid=\"filter-popover\">\n      <div class=\"tk-toolbar-overlay__header\">\n        <span class=\"tk-toolbar-overlay__title\">{{ filterLabel() }}</span>\n        <button type=\"button\" class=\"tk-toolbar-overlay__close\" (click)=\"filterPopover.hide()\">\n          <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n        </button>\n      </div>\n      <div class=\"tk-toolbar-overlay__body\">\n        @for (filter of derivedFilters(); track filter.key) {\n          <div class=\"tk-toolbar-overlay__field\">\n            <tk-multiselect\n              [id]=\"'filter-' + filter.key\"\n              [options]=\"filter.options\"\n              [labelText]=\"filter.label\"\n              [model]=\"tempFilterValues()[filter.key] || []\"\n              (modelChange)=\"onTempFilterChange(filter.key, $event || [])\"\n              appendTo=\"body\"\n              panelStyleClass=\"tk-toolbar-multiselect-panel\">\n            </tk-multiselect>\n          </div>\n        }\n      </div>\n      <div class=\"tk-toolbar-overlay__footer\">\n        <tk-button\n          [label]=\"clearLabel()\"\n          severity=\"secondary\"\n          variant=\"outlined\"\n          (clicked)=\"clearTempFilters()\">\n        </tk-button>\n        <tk-button\n          [label]=\"applyLabel()\"\n          severity=\"primary\"\n          (clicked)=\"applyFilters()\">\n        </tk-button>\n      </div>\n    </div>\n  </p-popover>\n}\n\n@if (sortOptions().length > 0 && !isMobile()) {\n  <p-popover #sortPopover styleClass=\"tk-toolbar-popover\">\n    <div class=\"tk-toolbar-overlay tk-toolbar-overlay--sort\" data-testid=\"sort-popover\">\n      <div class=\"tk-toolbar-overlay__header\">\n        <span class=\"tk-toolbar-overlay__title\">{{ sortLabel() }}</span>\n        <button type=\"button\" class=\"tk-toolbar-overlay__close\" (click)=\"sortPopover.hide()\">\n          <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n        </button>\n      </div>\n      <div class=\"tk-toolbar-overlay__body\">\n        <div class=\"tk-toolbar-sort-options\">\n          @for (option of sortOptions(); track option.value) {\n            <button \n              type=\"button\"\n              class=\"tk-toolbar-sort-option\" \n              [class.tk-toolbar-sort-option--active]=\"sortValue() === option.value\"\n              (click)=\"selectSortOption(option.value)\">\n              <span>{{ option.label }}</span>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  </p-popover>\n}\n\n<!-- 6. Mobile Drawers -->\n@if (derivedFilters().length > 0 && filterVisible() && isMobile()) {\n  <tk-drawer\n    [(isOpened)]=\"showFilterDrawer\"\n    [title]=\"filterLabel()\"\n    direction=\"bottom\"\n    [dismissible]=\"true\">\n    <div class=\"tk-toolbar-overlay__body\">\n      @for (filter of derivedFilters(); track filter.key) {\n        <div class=\"tk-toolbar-overlay__field\">\n          <tk-multiselect\n            [id]=\"'filter-mob-' + filter.key\"\n            [options]=\"filter.options\"\n            [labelText]=\"filter.label\"\n            [model]=\"tempFilterValues()[filter.key] || []\"\n            (modelChange)=\"onTempFilterChange(filter.key, $event || [])\"\n            appendTo=\"body\"\n            panelStyleClass=\"tk-toolbar-multiselect-panel\">\n          </tk-multiselect>\n        </div>\n      }\n    </div>\n    <div class=\"tk-toolbar-overlay__footer\">\n      <tk-button\n        [label]=\"clearLabel()\"\n        severity=\"secondary\"\n        variant=\"outlined\"\n        (clicked)=\"clearTempFilters()\">\n      </tk-button>\n      <tk-button\n        [label]=\"applyLabel()\"\n        severity=\"primary\"\n        (clicked)=\"applyFilters()\">\n      </tk-button>\n    </div>\n  </tk-drawer>\n}\n\n@if (sortOptions().length > 0 && isMobile()) {\n  <tk-drawer\n    [(isOpened)]=\"showSortDrawer\"\n    [title]=\"sortLabel()\"\n    direction=\"bottom\"\n    [dismissible]=\"true\">\n    <div class=\"tk-toolbar-overlay__body\">\n      <div class=\"tk-toolbar-sort-options\">\n        @for (option of sortOptions(); track option.value) {\n          <button \n            type=\"button\"\n            class=\"tk-toolbar-sort-option\" \n            [class.tk-toolbar-sort-option--active]=\"tempSortValue() === option.value\"\n            (click)=\"toggleSortOptionMobile(option.value)\">\n            <span>{{ option.label }}</span>\n          </button>\n        }\n      </div>\n    </div>\n    <div class=\"tk-toolbar-overlay__footer\">\n      <tk-button\n        [label]=\"applyLabel()\"\n        severity=\"primary\"\n        (clicked)=\"applySortMobile()\">\n      </tk-button>\n    </div>\n  </tk-drawer>\n}\n", styles: [".tk-toolbar-container{display:flex;flex-direction:column;gap:var(--tk-spacing-base-50, .5rem);width:100%}.tk-toolbar{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:var(--tk-spacing-base-100, 1rem);width:100%}.tk-toolbar__search{width:15rem;max-width:100%}@media(max-width:768px){.tk-toolbar__search{width:100%}}.tk-toolbar__actions{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar__actions>tk-button{width:2.5rem;height:2.5rem}.tk-toolbar__actions>tk-button ::ng-deep .p-button{width:100%;height:100%;padding:0;display:flex;align-items:center;justify-content:center}.tk-toolbar__reload-btn{border-radius:var(--tk-borderRadius-theme-s, var(--tk-borderRadius-s, .5rem))!important;position:relative}.tk-toolbar__reload-btn--animating:before{content:\"\";position:absolute;inset:0;z-index:1;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:3px;border-radius:inherit;animation:draw-border var(--reload-interval, 5s) infinite linear;pointer-events:none}.tk-toolbar__reload-btn--spinning ::ng-deep tk-icon{display:inline-block;animation:spin 1s infinite linear}.tk-toolbar-selection-bar{display:flex;justify-content:space-between;align-items:center;width:100%;background-color:var(--tk-color-base-surface-50, #f8fafc);border:1px solid var(--tk-color-base-surface-200, #e2e8f0);border-radius:var(--tk-borderRadius-s, 8px);padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem);box-sizing:border-box}.tk-toolbar-selection-bar__left{display:flex;align-items:center;gap:var(--tk-spacing-base-75, .75rem)}.tk-toolbar-selection-bar__count{font-size:1rem;font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-selection-bar__right{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar-selection-bar--mobile{position:fixed;bottom:0;left:0;width:100%;max-width:none;transform:none;z-index:1000;background-color:var(--tk-color-base-surface-0, #ffffff);box-shadow:0 -4px 6px -1px #0000000d,0 -2px 4px -1px #00000008;border-radius:0;border:none;border-top:1px solid var(--tk-color-base-surface-200, #e2e8f0);padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem)}.tk-toolbar-chips-bar{width:100%;border-top:none;padding-top:var(--tk-spacing-base-50, .5rem);display:flex;justify-content:space-between;align-items:center;gap:var(--tk-spacing-base-100, 1rem)}.tk-toolbar-chips-bar__scroll{display:flex;align-items:center;flex-wrap:wrap;gap:var(--tk-spacing-base-50, .5rem);flex-grow:1}.tk-toolbar-chips-bar__clear-btn{flex-shrink:0}.tk-toolbar-overlay{display:flex;flex-direction:column;width:20rem;max-width:100%;padding:var(--tk-spacing-base-100, 1rem);box-sizing:border-box}.tk-toolbar-overlay--sort{width:15rem;padding:var(--tk-spacing-base-50, .5rem)!important}.tk-toolbar-overlay--sort .tk-toolbar-overlay__header{padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-25, .25rem) var(--tk-spacing-base-50, .5rem)!important}.tk-toolbar-overlay--sort .tk-toolbar-overlay__body{padding:0!important;margin-bottom:0!important}.tk-toolbar-overlay__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0;padding:0 0 var(--tk-spacing-base-50, .5rem) 0}.tk-toolbar-overlay__title{font-size:1rem;font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-overlay__close{background:none;border:none;padding:var(--tk-spacing-base-25, .25rem);color:var(--tk-color-base-surface-500, #64748b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--tk-borderRadius-s, 8px);transition:background-color .2s}.tk-toolbar-overlay__close:hover{background-color:var(--tk-color-base-surface-100, #f1f5f9);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-overlay__body{display:flex;flex-direction:column;gap:var(--tk-spacing-base-100, 1rem);padding-top:var(--tk-spacing-base-125, 1.25rem);margin-bottom:var(--tk-spacing-base-150, 1.5rem);max-height:24rem;overflow-y:auto}.tk-toolbar-overlay__field{display:flex;flex-direction:column;gap:var(--tk-spacing-base-25, .25rem)}.tk-toolbar-overlay__footer{display:flex;justify-content:flex-end;gap:var(--tk-spacing-base-50, .5rem);padding-top:var(--tk-spacing-base-100, 1rem)}.tk-toolbar-sort-options{display:flex;flex-direction:column;width:100%}.tk-toolbar-sort-option{display:flex;justify-content:space-between;align-items:center;padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem);cursor:pointer;border-radius:var(--tk-borderRadius-s, 8px);font-size:.875rem;color:var(--tk-color-base-surface-700, #334155);transition:background-color .2s,color .2s;background:none;border:none;width:100%;font-family:inherit;text-align:left}.tk-toolbar-sort-option:hover{background-color:var(--tk-color-primary-muted, #e9e6f4);color:var(--tk-color-base-primary-500, #16006f)}.tk-toolbar-sort-option--active{font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-primary-500, #16006f);background-color:var(--tk-color-primary-muted, #e9e6f4)}@media(max-width:768px){.tk-toolbar{flex-direction:column;align-items:stretch;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar__search{width:100%}.tk-toolbar__actions{width:100%;justify-content:flex-end;margin-left:0}}@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-popover{border-radius:var(--tk-borderRadius-m, 12px);box-shadow:0 10px 15px -3px #0000001a;border:1px solid var(--tk-color-base-surface-200, #e2e8f0);overflow:hidden}:host ::ng-deep .tk-toolbar-popover .p-popover-content{padding:0!important}:host ::ng-deep tk-drawer .tk-toolbar-overlay__body{padding-top:var(--tk-spacing-base-75, .75rem)!important;margin-bottom:0!important}:host ::ng-deep tk-drawer .tk-toolbar-overlay__footer{padding-top:var(--tk-spacing-base-75, .75rem)!important}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-option span{color:var(--tk-color-primary-default, #16006f);display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-option-selected{background-color:var(--tk-color-primary-muted, #b7b0d2)}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], 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: CheckboxComponent, selector: "tk-checkbox", inputs: ["model", "value", "label", "name", "inputId", "binary", "control", "errorMessage", "hint", "indeterminate", "disabled"], outputs: ["modelChange", "indeterminateChange", "disabledChange"] }, { kind: "component", type: ActionGroupComponent, selector: "tk-action-group", inputs: ["actions", "maxVisible", "disabled"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: DropdownComponent, selector: "tk-dropdown", inputs: ["model", "icon", "label", "iconPosition", "size", "disabled", "tooltip", "tooltipPosition"] }, { kind: "component", type: MultiselectComponent, selector: "tk-multiselect", inputs: ["model", "dataSource", "options", "labelText", "display", "maxSelectedLabels", "selectedItemsLabel", "emptyFilterMessage", "filter", "filterPlaceHolder", "appendTo", "panelStyleClass", "id", "styleClass", "errorMessage", "hint", "loading", "emptyMessage", "fetchParams", "sortField", "sortOrder", "disabled"], outputs: ["modelChange", "dataSourceChange", "selectionChange", "filterChange"] }, { kind: "component", type: ChipComponent, selector: "tk-chip", inputs: ["label", "icon", "removable", "removeIcon"], outputs: ["removed"] }, { kind: "component", type: DrawerComponent, selector: "tk-drawer", inputs: ["dialogRef", "title", "content", "headerAction", "tag", "subtle", "hasTabs", "size", "direction", "closable", "dismissible", "data", "interceptor", "isOpened"], outputs: ["isOpenedChange", "closed"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
@@ -439,7 +439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         ChipComponent,
                         DrawerComponent,
                         PopoverModule,
-                    ], template: "<div class=\"tk-toolbar-container\">\n  <!-- 1. Selection Status Bar (Desktop replacement) -->\n  @if (selectionCount() > 0 && !isMobile()) {\n    <div class=\"tk-toolbar-selection-bar\" data-testid=\"selection-bar-desktop\">\n      <div class=\"tk-toolbar-selection-bar__left\">\n        <tk-checkbox\n          [binary]=\"true\"\n          [(model)]=\"allSelected\"\n          [indeterminate]=\"indeterminate()\">\n        </tk-checkbox>\n        <span class=\"tk-toolbar-selection-bar__count\">\n          {{ selectionCount() }} {{ selectionCount() === 1 ? selectedLabel() : selectedPluralLabel() }}\n        </span>\n      </div>\n      <div class=\"tk-toolbar-selection-bar__right\">\n        @for (action of visibleSelectionActions(); track action.label) {\n          <tk-button\n            [label]=\"action.label\"\n            [icon]=\"action.icon\"\n            [severity]=\"action.severity ?? 'secondary'\"\n            [variant]=\"action.variant !== undefined ? action.variant : (action.severity === 'danger' ? undefined : 'text')\"\n            [disabled]=\"action.disabled ?? false\"\n            (clicked)=\"action.action()\">\n          </tk-button>\n        }\n        @if (overflowSelectionActions().length > 0) {\n          <tk-dropdown\n            icon=\"ellipsis-vertical\"\n            [model]=\"overflowSelectionActions()\">\n          </tk-dropdown>\n        }\n      </div>\n    </div>\n  } @else {\n    <!-- 2. Main Tools Bar -->\n    <div class=\"tk-toolbar\" data-testid=\"main-toolbar\">\n      <!-- Left part: search input (always visible if searchVisible is true) -->\n      @if (searchVisible()) {\n        <div class=\"tk-toolbar__search\">\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\n      <!-- Right part: actions -->\n      <div class=\"tk-toolbar__actions\">\n        @if (viewToggleVisible()) {\n          <tk-button\n            [icon]=\"view() === 'table' ? 'table' : 'table-list'\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [tooltipText]=\"view() === 'table' ? viewCardsTooltip() : viewTableTooltip()\"\n            (clicked)=\"toggleView()\">\n          </tk-button>\n        }\n\n        @if (derivedFilters().length > 0 && filterVisible()) {\n          <tk-button\n            #filterBtn\n            [icon]=\"'filter'\"\n            [severity]=\"hasActiveFilters() ? 'primary' : 'secondary'\"\n            [variant]=\"hasActiveFilters() ? undefined : 'text'\"\n            [tooltipText]=\"filterLabel()\"\n            (click)=\"openFilters($event)\"\n            (keydown.enter)=\"openFilters($event)\"\n            (keydown.space)=\"openFilters($event)\">\n          </tk-button>\n        }\n\n        @if (sortOptions().length > 0) {\n          <tk-button\n            #sortBtn\n            [icon]=\"'arrow-down-wide-short'\"\n            [severity]=\"hasActiveSort() ? 'primary' : 'secondary'\"\n            [variant]=\"hasActiveSort() ? undefined : 'text'\"\n            [tooltipText]=\"sortTooltip()\"\n            (click)=\"openSort($event)\"\n            (keydown.enter)=\"openSort($event)\"\n            (keydown.space)=\"openSort($event)\">\n          </tk-button>\n        }\n\n        @if (shouldShowReload()) {\n          <tk-button\n            class=\"tk-toolbar__reload-btn\"\n            [class.tk-toolbar__reload-btn--animating]=\"\n              reloadInterval() && reloadInterval()! > 0 && !loading()\n            \"\n            [class.tk-toolbar__reload-btn--spinning]=\"loading()\"\n            [style.--reload-interval]=\"(reloadInterval() ?? 0) + 'ms'\"\n            [icon]=\"'arrows-rotate'\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [tooltipText]=\"reloadTooltip()\"\n            (clicked)=\"onReload()\">\n          </tk-button>\n        }\n\n        @if (globalActions().length > 0) {\n          <tk-action-group\n            [actions]=\"globalActions()\"\n            [maxVisible]=\"0\">\n          </tk-action-group>\n        }\n      </div>\n    </div>\n  }\n\n  @if (shouldShowActiveFiltersBar()) {\n    <div class=\"tk-toolbar-chips-bar\" data-testid=\"chips-bar\">\n      <div class=\"tk-toolbar-chips-bar__scroll\">\n        @for (chip of activeChips(); track chip.filterKey + '-' + chip.code) {\n          <tk-chip\n            [label]=\"chip.label\"\n            [removable]=\"true\"\n            (removed)=\"removeChip(chip)\">\n          </tk-chip>\n        }\n      </div>\n      <tk-button\n        [link]=\"true\"\n        [label]=\"clearLabel()\"\n        class=\"tk-toolbar-chips-bar__clear-btn\"\n        (clicked)=\"clearAllFilters()\">\n      </tk-button>\n    </div>\n  }\n\n  <!-- 4. Selection Status Bar (Mobile floating panel) -->\n  @if (selectionCount() > 0 && isMobile()) {\n    <div class=\"tk-toolbar-selection-bar tk-toolbar-selection-bar--mobile\" data-testid=\"selection-bar-mobile\">\n      <div class=\"tk-toolbar-selection-bar__left\">\n        <tk-checkbox\n          [binary]=\"true\"\n          [(model)]=\"allSelected\"\n          [indeterminate]=\"indeterminate()\">\n        </tk-checkbox>\n        <span class=\"tk-toolbar-selection-bar__count\">\n          {{ selectionCount() }} {{ selectionCount() === 1 ? selectedLabel() : selectedPluralLabel() }}\n        </span>\n      </div>\n      <div class=\"tk-toolbar-selection-bar__right\">\n        @for (action of visibleSelectionActions(); track action.label) {\n          <tk-button\n            [label]=\"action.label\"\n            [icon]=\"action.icon\"\n            [severity]=\"action.severity ?? 'secondary'\"\n            [variant]=\"action.variant !== undefined ? action.variant : (action.severity === 'danger' ? undefined : 'text')\"\n            [disabled]=\"action.disabled ?? false\"\n            (clicked)=\"action.action()\">\n          </tk-button>\n        }\n        @if (overflowSelectionActions().length > 0) {\n          <tk-dropdown\n            icon=\"ellipsis-vertical\"\n            [model]=\"overflowSelectionActions()\">\n          </tk-dropdown>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n<!-- 5. Desktop Popovers -->\n@if (derivedFilters().length > 0 && filterVisible() && !isMobile()) {\n  <p-popover #filterPopover styleClass=\"tk-toolbar-popover\">\n    <div class=\"tk-toolbar-overlay\" data-testid=\"filter-popover\">\n      <div class=\"tk-toolbar-overlay__header\">\n        <span class=\"tk-toolbar-overlay__title\">{{ filterLabel() }}</span>\n        <button type=\"button\" class=\"tk-toolbar-overlay__close\" (click)=\"filterPopover.hide()\">\n          <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n        </button>\n      </div>\n      <div class=\"tk-toolbar-overlay__body\">\n        @for (filter of derivedFilters(); track filter.key) {\n          <div class=\"tk-toolbar-overlay__field\">\n            <tk-multiselect\n              [id]=\"'filter-' + filter.key\"\n              [options]=\"filter.options\"\n              [labelText]=\"filter.label\"\n              [model]=\"tempFilterValues()[filter.key] || []\"\n              (modelChange)=\"onTempFilterChange(filter.key, $event || [])\"\n              appendTo=\"body\"\n              panelStyleClass=\"tk-toolbar-multiselect-panel\">\n            </tk-multiselect>\n          </div>\n        }\n      </div>\n      <div class=\"tk-toolbar-overlay__footer\">\n        <tk-button\n          [label]=\"clearLabel()\"\n          severity=\"secondary\"\n          variant=\"outlined\"\n          (clicked)=\"clearTempFilters()\">\n        </tk-button>\n        <tk-button\n          [label]=\"applyLabel()\"\n          severity=\"primary\"\n          (clicked)=\"applyFilters()\">\n        </tk-button>\n      </div>\n    </div>\n  </p-popover>\n}\n\n@if (sortOptions().length > 0 && !isMobile()) {\n  <p-popover #sortPopover styleClass=\"tk-toolbar-popover\">\n    <div class=\"tk-toolbar-overlay tk-toolbar-overlay--sort\" data-testid=\"sort-popover\">\n      <div class=\"tk-toolbar-overlay__header\">\n        <span class=\"tk-toolbar-overlay__title\">{{ sortLabel() }}</span>\n        <button type=\"button\" class=\"tk-toolbar-overlay__close\" (click)=\"sortPopover.hide()\">\n          <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n        </button>\n      </div>\n      <div class=\"tk-toolbar-overlay__body\">\n        <div class=\"tk-toolbar-sort-options\">\n          @for (option of sortOptions(); track option.value) {\n            <button \n              type=\"button\"\n              class=\"tk-toolbar-sort-option\" \n              [class.tk-toolbar-sort-option--active]=\"sortValue() === option.value\"\n              (click)=\"selectSortOption(option.value)\">\n              <span>{{ option.label }}</span>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  </p-popover>\n}\n\n<!-- 6. Mobile Drawers -->\n@if (derivedFilters().length > 0 && filterVisible() && isMobile()) {\n  <tk-drawer\n    [(isOpened)]=\"showFilterDrawer\"\n    [title]=\"filterLabel()\"\n    direction=\"bottom\"\n    [dismissible]=\"true\">\n    <div class=\"tk-toolbar-overlay__body\">\n      @for (filter of derivedFilters(); track filter.key) {\n        <div class=\"tk-toolbar-overlay__field\">\n          <tk-multiselect\n            [id]=\"'filter-mob-' + filter.key\"\n            [options]=\"filter.options\"\n            [labelText]=\"filter.label\"\n            [model]=\"tempFilterValues()[filter.key] || []\"\n            (modelChange)=\"onTempFilterChange(filter.key, $event || [])\"\n            appendTo=\"body\"\n            panelStyleClass=\"tk-toolbar-multiselect-panel\">\n          </tk-multiselect>\n        </div>\n      }\n    </div>\n    <div class=\"tk-toolbar-overlay__footer\">\n      <tk-button\n        [label]=\"clearLabel()\"\n        severity=\"secondary\"\n        variant=\"outlined\"\n        (clicked)=\"clearTempFilters()\">\n      </tk-button>\n      <tk-button\n        [label]=\"applyLabel()\"\n        severity=\"primary\"\n        (clicked)=\"applyFilters()\">\n      </tk-button>\n    </div>\n  </tk-drawer>\n}\n\n@if (sortOptions().length > 0 && isMobile()) {\n  <tk-drawer\n    [(isOpened)]=\"showSortDrawer\"\n    [title]=\"sortLabel()\"\n    direction=\"bottom\"\n    [dismissible]=\"true\">\n    <div class=\"tk-toolbar-overlay__body\">\n      <div class=\"tk-toolbar-sort-options\">\n        @for (option of sortOptions(); track option.value) {\n          <button \n            type=\"button\"\n            class=\"tk-toolbar-sort-option\" \n            [class.tk-toolbar-sort-option--active]=\"tempSortValue() === option.value\"\n            (click)=\"toggleSortOptionMobile(option.value)\">\n            <span>{{ option.label }}</span>\n          </button>\n        }\n      </div>\n    </div>\n    <div class=\"tk-toolbar-overlay__footer\">\n      <tk-button\n        [label]=\"applyLabel()\"\n        severity=\"primary\"\n        (clicked)=\"applySortMobile()\">\n      </tk-button>\n    </div>\n  </tk-drawer>\n}\n", styles: [".tk-toolbar-container{display:flex;flex-direction:column;gap:var(--tk-spacing-base-50, .5rem);width:100%}.tk-toolbar{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:var(--tk-spacing-base-100, 1rem);width:100%}.tk-toolbar__search{width:15rem;max-width:100%}@media(max-width:768px){.tk-toolbar__search{width:100%}}.tk-toolbar__actions{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar__actions>tk-button{width:2.5rem;height:2.5rem}.tk-toolbar__actions>tk-button ::ng-deep .p-button{width:100%;height:100%;padding:0;display:flex;align-items:center;justify-content:center}.tk-toolbar__reload-btn{border-radius:var(--tk-borderRadius-s, 8px);position:relative}.tk-toolbar__reload-btn--animating:before{content:\"\";position:absolute;inset:0;z-index:1;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:3px;border-radius:inherit;animation:draw-border var(--reload-interval, 5s) infinite linear;pointer-events:none}.tk-toolbar__reload-btn--spinning ::ng-deep tk-icon{display:inline-block;animation:spin 1s infinite linear}.tk-toolbar-selection-bar{display:flex;justify-content:space-between;align-items:center;width:100%;background-color:var(--tk-color-base-surface-50, #f8fafc);border:1px solid var(--tk-color-base-surface-200, #e2e8f0);border-radius:var(--tk-borderRadius-s, 8px);padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem);box-sizing:border-box}.tk-toolbar-selection-bar__left{display:flex;align-items:center;gap:var(--tk-spacing-base-75, .75rem)}.tk-toolbar-selection-bar__count{font-size:1rem;font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-selection-bar__right{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar-selection-bar--mobile{position:fixed;bottom:0;left:0;width:100%;max-width:none;transform:none;z-index:1000;background-color:var(--tk-color-base-surface-0, #ffffff);box-shadow:0 -4px 6px -1px #0000000d,0 -2px 4px -1px #00000008;border-radius:0;border:none;border-top:1px solid var(--tk-color-base-surface-200, #e2e8f0);padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem)}.tk-toolbar-chips-bar{width:100%;border-top:none;padding-top:var(--tk-spacing-base-50, .5rem);display:flex;justify-content:space-between;align-items:center;gap:var(--tk-spacing-base-100, 1rem)}.tk-toolbar-chips-bar__scroll{display:flex;align-items:center;flex-wrap:wrap;gap:var(--tk-spacing-base-50, .5rem);flex-grow:1}.tk-toolbar-chips-bar__clear-btn{flex-shrink:0}.tk-toolbar-overlay{display:flex;flex-direction:column;width:20rem;max-width:100%;padding:var(--tk-spacing-base-100, 1rem);box-sizing:border-box}.tk-toolbar-overlay--sort{width:15rem;padding:var(--tk-spacing-base-50, .5rem)!important}.tk-toolbar-overlay--sort .tk-toolbar-overlay__header{padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-25, .25rem) var(--tk-spacing-base-50, .5rem)!important}.tk-toolbar-overlay--sort .tk-toolbar-overlay__body{padding:0!important;margin-bottom:0!important}.tk-toolbar-overlay__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0;padding:0 0 var(--tk-spacing-base-50, .5rem) 0}.tk-toolbar-overlay__title{font-size:1rem;font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-overlay__close{background:none;border:none;padding:var(--tk-spacing-base-25, .25rem);color:var(--tk-color-base-surface-500, #64748b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--tk-borderRadius-s, 8px);transition:background-color .2s}.tk-toolbar-overlay__close:hover{background-color:var(--tk-color-base-surface-100, #f1f5f9);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-overlay__body{display:flex;flex-direction:column;gap:var(--tk-spacing-base-100, 1rem);padding-top:var(--tk-spacing-base-125, 1.25rem);margin-bottom:var(--tk-spacing-base-150, 1.5rem);max-height:24rem;overflow-y:auto}.tk-toolbar-overlay__field{display:flex;flex-direction:column;gap:var(--tk-spacing-base-25, .25rem)}.tk-toolbar-overlay__footer{display:flex;justify-content:flex-end;gap:var(--tk-spacing-base-50, .5rem);padding-top:var(--tk-spacing-base-100, 1rem)}.tk-toolbar-sort-options{display:flex;flex-direction:column;width:100%}.tk-toolbar-sort-option{display:flex;justify-content:space-between;align-items:center;padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem);cursor:pointer;border-radius:var(--tk-borderRadius-s, 8px);font-size:.875rem;color:var(--tk-color-base-surface-700, #334155);transition:background-color .2s,color .2s;background:none;border:none;width:100%;font-family:inherit;text-align:left}.tk-toolbar-sort-option:hover{background-color:var(--tk-color-primary-muted, #e9e6f4);color:var(--tk-color-base-primary-500, #16006f)}.tk-toolbar-sort-option--active{font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-primary-500, #16006f);background-color:var(--tk-color-primary-muted, #e9e6f4)}@media(max-width:768px){.tk-toolbar{flex-direction:column;align-items:stretch;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar__search{width:100%}.tk-toolbar__actions{width:100%;justify-content:flex-end;margin-left:0}}@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-popover{border-radius:var(--tk-borderRadius-m, 12px);box-shadow:0 10px 15px -3px #0000001a;border:1px solid var(--tk-color-base-surface-200, #e2e8f0);overflow:hidden}:host ::ng-deep .tk-toolbar-popover .p-popover-content{padding:0!important}:host ::ng-deep tk-drawer .tk-toolbar-overlay__body{padding-top:var(--tk-spacing-base-75, .75rem)!important;margin-bottom:0!important}:host ::ng-deep tk-drawer .tk-toolbar-overlay__footer{padding-top:var(--tk-spacing-base-75, .75rem)!important}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-option span{color:var(--tk-color-primary-default, #16006f);display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-option-selected{background-color:var(--tk-color-primary-muted, #b7b0d2)}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}\n"] }]
+                    ], template: "<div class=\"tk-toolbar-container\">\n  <!-- 1. Selection Status Bar (Desktop replacement) -->\n  @if (selectionCount() > 0 && !isMobile()) {\n    <div class=\"tk-toolbar-selection-bar\" data-testid=\"selection-bar-desktop\">\n      <div class=\"tk-toolbar-selection-bar__left\">\n        <tk-checkbox\n          [binary]=\"true\"\n          [(model)]=\"allSelected\"\n          [indeterminate]=\"indeterminate()\">\n        </tk-checkbox>\n        <span class=\"tk-toolbar-selection-bar__count\">\n          {{ selectionCount() }} {{ selectionCount() === 1 ? selectedLabel() : selectedPluralLabel() }}\n        </span>\n      </div>\n      <div class=\"tk-toolbar-selection-bar__right\">\n        @for (action of visibleSelectionActions(); track action.label) {\n          <tk-button\n            [label]=\"action.label\"\n            [icon]=\"action.icon\"\n            [severity]=\"action.severity ?? 'secondary'\"\n            [variant]=\"action.variant !== undefined ? action.variant : (action.severity === 'danger' ? undefined : 'text')\"\n            [disabled]=\"action.disabled ?? false\"\n            (clicked)=\"action.action()\">\n          </tk-button>\n        }\n        @if (overflowSelectionActions().length > 0) {\n          <tk-dropdown\n            icon=\"ellipsis-vertical\"\n            [model]=\"overflowSelectionActions()\">\n          </tk-dropdown>\n        }\n      </div>\n    </div>\n  } @else {\n    <!-- 2. Main Tools Bar -->\n    <div class=\"tk-toolbar\" data-testid=\"main-toolbar\">\n      <!-- Left part: search input (always visible if searchVisible is true) -->\n      @if (searchVisible()) {\n        <div class=\"tk-toolbar__search\">\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\n      <!-- Right part: actions -->\n      <div class=\"tk-toolbar__actions\">\n        @if (viewToggleVisible()) {\n          <tk-button\n            [icon]=\"view() === 'table' ? 'table' : 'table-list'\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [tooltipText]=\"view() === 'table' ? viewCardsTooltip() : viewTableTooltip()\"\n            (clicked)=\"toggleView()\">\n          </tk-button>\n        }\n\n        @if (derivedFilters().length > 0 && filterVisible()) {\n          <tk-button\n            #filterBtn\n            [icon]=\"'filter'\"\n            [severity]=\"hasActiveFilters() ? 'primary' : 'secondary'\"\n            [variant]=\"hasActiveFilters() ? undefined : 'text'\"\n            [tooltipText]=\"filterLabel()\"\n            (click)=\"openFilters($event)\"\n            (keydown.enter)=\"openFilters($event)\"\n            (keydown.space)=\"openFilters($event)\">\n          </tk-button>\n        }\n\n        @if (sortOptions().length > 0) {\n          <tk-button\n            #sortBtn\n            [icon]=\"'arrow-down-wide-short'\"\n            [severity]=\"hasActiveSort() ? 'primary' : 'secondary'\"\n            [variant]=\"hasActiveSort() ? undefined : 'text'\"\n            [tooltipText]=\"sortTooltip()\"\n            (click)=\"openSort($event)\"\n            (keydown.enter)=\"openSort($event)\"\n            (keydown.space)=\"openSort($event)\">\n          </tk-button>\n        }\n\n        @if (shouldShowReload()) {\n          <tk-button\n            class=\"tk-toolbar__reload-btn\"\n            [class.tk-toolbar__reload-btn--animating]=\"\n              reloadInterval() && reloadInterval()! > 0 && !loading()\n            \"\n            [class.tk-toolbar__reload-btn--spinning]=\"loading()\"\n            [style.--reload-interval]=\"(reloadInterval() ?? 0) + 'ms'\"\n            [icon]=\"'arrows-rotate'\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [tooltipText]=\"reloadTooltip()\"\n            (clicked)=\"onReload()\">\n          </tk-button>\n        }\n\n        @if (globalActions().length > 0) {\n          <tk-action-group\n            [actions]=\"globalActions()\"\n            [maxVisible]=\"0\">\n          </tk-action-group>\n        }\n      </div>\n    </div>\n  }\n\n  @if (shouldShowActiveFiltersBar()) {\n    <div class=\"tk-toolbar-chips-bar\" data-testid=\"chips-bar\">\n      <div class=\"tk-toolbar-chips-bar__scroll\">\n        @for (chip of activeChips(); track chip.filterKey + '-' + chip.code) {\n          <tk-chip\n            [label]=\"chip.label\"\n            [removable]=\"true\"\n            (removed)=\"removeChip(chip)\">\n          </tk-chip>\n        }\n      </div>\n      <tk-button\n        [link]=\"true\"\n        [label]=\"clearLabel()\"\n        class=\"tk-toolbar-chips-bar__clear-btn\"\n        (clicked)=\"clearAllFilters()\">\n      </tk-button>\n    </div>\n  }\n\n  <!-- 4. Selection Status Bar (Mobile floating panel) -->\n  @if (selectionCount() > 0 && isMobile()) {\n    <div class=\"tk-toolbar-selection-bar tk-toolbar-selection-bar--mobile\" data-testid=\"selection-bar-mobile\">\n      <div class=\"tk-toolbar-selection-bar__left\">\n        <tk-checkbox\n          [binary]=\"true\"\n          [(model)]=\"allSelected\"\n          [indeterminate]=\"indeterminate()\">\n        </tk-checkbox>\n        <span class=\"tk-toolbar-selection-bar__count\">\n          {{ selectionCount() }} {{ selectionCount() === 1 ? selectedLabel() : selectedPluralLabel() }}\n        </span>\n      </div>\n      <div class=\"tk-toolbar-selection-bar__right\">\n        @for (action of visibleSelectionActions(); track action.label) {\n          <tk-button\n            [label]=\"action.label\"\n            [icon]=\"action.icon\"\n            [severity]=\"action.severity ?? 'secondary'\"\n            [variant]=\"action.variant !== undefined ? action.variant : (action.severity === 'danger' ? undefined : 'text')\"\n            [disabled]=\"action.disabled ?? false\"\n            (clicked)=\"action.action()\">\n          </tk-button>\n        }\n        @if (overflowSelectionActions().length > 0) {\n          <tk-dropdown\n            icon=\"ellipsis-vertical\"\n            [model]=\"overflowSelectionActions()\">\n          </tk-dropdown>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n<!-- 5. Desktop Popovers -->\n@if (derivedFilters().length > 0 && filterVisible() && !isMobile()) {\n  <p-popover #filterPopover styleClass=\"tk-toolbar-popover\">\n    <div class=\"tk-toolbar-overlay\" data-testid=\"filter-popover\">\n      <div class=\"tk-toolbar-overlay__header\">\n        <span class=\"tk-toolbar-overlay__title\">{{ filterLabel() }}</span>\n        <button type=\"button\" class=\"tk-toolbar-overlay__close\" (click)=\"filterPopover.hide()\">\n          <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n        </button>\n      </div>\n      <div class=\"tk-toolbar-overlay__body\">\n        @for (filter of derivedFilters(); track filter.key) {\n          <div class=\"tk-toolbar-overlay__field\">\n            <tk-multiselect\n              [id]=\"'filter-' + filter.key\"\n              [options]=\"filter.options\"\n              [labelText]=\"filter.label\"\n              [model]=\"tempFilterValues()[filter.key] || []\"\n              (modelChange)=\"onTempFilterChange(filter.key, $event || [])\"\n              appendTo=\"body\"\n              panelStyleClass=\"tk-toolbar-multiselect-panel\">\n            </tk-multiselect>\n          </div>\n        }\n      </div>\n      <div class=\"tk-toolbar-overlay__footer\">\n        <tk-button\n          [label]=\"clearLabel()\"\n          severity=\"secondary\"\n          variant=\"outlined\"\n          (clicked)=\"clearTempFilters()\">\n        </tk-button>\n        <tk-button\n          [label]=\"applyLabel()\"\n          severity=\"primary\"\n          (clicked)=\"applyFilters()\">\n        </tk-button>\n      </div>\n    </div>\n  </p-popover>\n}\n\n@if (sortOptions().length > 0 && !isMobile()) {\n  <p-popover #sortPopover styleClass=\"tk-toolbar-popover\">\n    <div class=\"tk-toolbar-overlay tk-toolbar-overlay--sort\" data-testid=\"sort-popover\">\n      <div class=\"tk-toolbar-overlay__header\">\n        <span class=\"tk-toolbar-overlay__title\">{{ sortLabel() }}</span>\n        <button type=\"button\" class=\"tk-toolbar-overlay__close\" (click)=\"sortPopover.hide()\">\n          <tk-icon icon=\"xmark\" size=\"lg\"></tk-icon>\n        </button>\n      </div>\n      <div class=\"tk-toolbar-overlay__body\">\n        <div class=\"tk-toolbar-sort-options\">\n          @for (option of sortOptions(); track option.value) {\n            <button \n              type=\"button\"\n              class=\"tk-toolbar-sort-option\" \n              [class.tk-toolbar-sort-option--active]=\"sortValue() === option.value\"\n              (click)=\"selectSortOption(option.value)\">\n              <span>{{ option.label }}</span>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  </p-popover>\n}\n\n<!-- 6. Mobile Drawers -->\n@if (derivedFilters().length > 0 && filterVisible() && isMobile()) {\n  <tk-drawer\n    [(isOpened)]=\"showFilterDrawer\"\n    [title]=\"filterLabel()\"\n    direction=\"bottom\"\n    [dismissible]=\"true\">\n    <div class=\"tk-toolbar-overlay__body\">\n      @for (filter of derivedFilters(); track filter.key) {\n        <div class=\"tk-toolbar-overlay__field\">\n          <tk-multiselect\n            [id]=\"'filter-mob-' + filter.key\"\n            [options]=\"filter.options\"\n            [labelText]=\"filter.label\"\n            [model]=\"tempFilterValues()[filter.key] || []\"\n            (modelChange)=\"onTempFilterChange(filter.key, $event || [])\"\n            appendTo=\"body\"\n            panelStyleClass=\"tk-toolbar-multiselect-panel\">\n          </tk-multiselect>\n        </div>\n      }\n    </div>\n    <div class=\"tk-toolbar-overlay__footer\">\n      <tk-button\n        [label]=\"clearLabel()\"\n        severity=\"secondary\"\n        variant=\"outlined\"\n        (clicked)=\"clearTempFilters()\">\n      </tk-button>\n      <tk-button\n        [label]=\"applyLabel()\"\n        severity=\"primary\"\n        (clicked)=\"applyFilters()\">\n      </tk-button>\n    </div>\n  </tk-drawer>\n}\n\n@if (sortOptions().length > 0 && isMobile()) {\n  <tk-drawer\n    [(isOpened)]=\"showSortDrawer\"\n    [title]=\"sortLabel()\"\n    direction=\"bottom\"\n    [dismissible]=\"true\">\n    <div class=\"tk-toolbar-overlay__body\">\n      <div class=\"tk-toolbar-sort-options\">\n        @for (option of sortOptions(); track option.value) {\n          <button \n            type=\"button\"\n            class=\"tk-toolbar-sort-option\" \n            [class.tk-toolbar-sort-option--active]=\"tempSortValue() === option.value\"\n            (click)=\"toggleSortOptionMobile(option.value)\">\n            <span>{{ option.label }}</span>\n          </button>\n        }\n      </div>\n    </div>\n    <div class=\"tk-toolbar-overlay__footer\">\n      <tk-button\n        [label]=\"applyLabel()\"\n        severity=\"primary\"\n        (clicked)=\"applySortMobile()\">\n      </tk-button>\n    </div>\n  </tk-drawer>\n}\n", styles: [".tk-toolbar-container{display:flex;flex-direction:column;gap:var(--tk-spacing-base-50, .5rem);width:100%}.tk-toolbar{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:var(--tk-spacing-base-100, 1rem);width:100%}.tk-toolbar__search{width:15rem;max-width:100%}@media(max-width:768px){.tk-toolbar__search{width:100%}}.tk-toolbar__actions{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar__actions>tk-button{width:2.5rem;height:2.5rem}.tk-toolbar__actions>tk-button ::ng-deep .p-button{width:100%;height:100%;padding:0;display:flex;align-items:center;justify-content:center}.tk-toolbar__reload-btn{border-radius:var(--tk-borderRadius-theme-s, var(--tk-borderRadius-s, .5rem))!important;position:relative}.tk-toolbar__reload-btn--animating:before{content:\"\";position:absolute;inset:0;z-index:1;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:3px;border-radius:inherit;animation:draw-border var(--reload-interval, 5s) infinite linear;pointer-events:none}.tk-toolbar__reload-btn--spinning ::ng-deep tk-icon{display:inline-block;animation:spin 1s infinite linear}.tk-toolbar-selection-bar{display:flex;justify-content:space-between;align-items:center;width:100%;background-color:var(--tk-color-base-surface-50, #f8fafc);border:1px solid var(--tk-color-base-surface-200, #e2e8f0);border-radius:var(--tk-borderRadius-s, 8px);padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem);box-sizing:border-box}.tk-toolbar-selection-bar__left{display:flex;align-items:center;gap:var(--tk-spacing-base-75, .75rem)}.tk-toolbar-selection-bar__count{font-size:1rem;font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-selection-bar__right{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar-selection-bar--mobile{position:fixed;bottom:0;left:0;width:100%;max-width:none;transform:none;z-index:1000;background-color:var(--tk-color-base-surface-0, #ffffff);box-shadow:0 -4px 6px -1px #0000000d,0 -2px 4px -1px #00000008;border-radius:0;border:none;border-top:1px solid var(--tk-color-base-surface-200, #e2e8f0);padding:var(--tk-spacing-base-75, .75rem) var(--tk-spacing-base-100, 1rem)}.tk-toolbar-chips-bar{width:100%;border-top:none;padding-top:var(--tk-spacing-base-50, .5rem);display:flex;justify-content:space-between;align-items:center;gap:var(--tk-spacing-base-100, 1rem)}.tk-toolbar-chips-bar__scroll{display:flex;align-items:center;flex-wrap:wrap;gap:var(--tk-spacing-base-50, .5rem);flex-grow:1}.tk-toolbar-chips-bar__clear-btn{flex-shrink:0}.tk-toolbar-overlay{display:flex;flex-direction:column;width:20rem;max-width:100%;padding:var(--tk-spacing-base-100, 1rem);box-sizing:border-box}.tk-toolbar-overlay--sort{width:15rem;padding:var(--tk-spacing-base-50, .5rem)!important}.tk-toolbar-overlay--sort .tk-toolbar-overlay__header{padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-25, .25rem) var(--tk-spacing-base-50, .5rem)!important}.tk-toolbar-overlay--sort .tk-toolbar-overlay__body{padding:0!important;margin-bottom:0!important}.tk-toolbar-overlay__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0;padding:0 0 var(--tk-spacing-base-50, .5rem) 0}.tk-toolbar-overlay__title{font-size:1rem;font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-overlay__close{background:none;border:none;padding:var(--tk-spacing-base-25, .25rem);color:var(--tk-color-base-surface-500, #64748b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--tk-borderRadius-s, 8px);transition:background-color .2s}.tk-toolbar-overlay__close:hover{background-color:var(--tk-color-base-surface-100, #f1f5f9);color:var(--tk-color-base-surface-900, #0f172a)}.tk-toolbar-overlay__body{display:flex;flex-direction:column;gap:var(--tk-spacing-base-100, 1rem);padding-top:var(--tk-spacing-base-125, 1.25rem);margin-bottom:var(--tk-spacing-base-150, 1.5rem);max-height:24rem;overflow-y:auto}.tk-toolbar-overlay__field{display:flex;flex-direction:column;gap:var(--tk-spacing-base-25, .25rem)}.tk-toolbar-overlay__footer{display:flex;justify-content:flex-end;gap:var(--tk-spacing-base-50, .5rem);padding-top:var(--tk-spacing-base-100, 1rem)}.tk-toolbar-sort-options{display:flex;flex-direction:column;width:100%}.tk-toolbar-sort-option{display:flex;justify-content:space-between;align-items:center;padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-50, .5rem);cursor:pointer;border-radius:var(--tk-borderRadius-s, 8px);font-size:.875rem;color:var(--tk-color-base-surface-700, #334155);transition:background-color .2s,color .2s;background:none;border:none;width:100%;font-family:inherit;text-align:left}.tk-toolbar-sort-option:hover{background-color:var(--tk-color-primary-muted, #e9e6f4);color:var(--tk-color-base-primary-500, #16006f)}.tk-toolbar-sort-option--active{font-weight:var(--tk-font-weight-600, 600);color:var(--tk-color-base-primary-500, #16006f);background-color:var(--tk-color-primary-muted, #e9e6f4)}@media(max-width:768px){.tk-toolbar{flex-direction:column;align-items:stretch;gap:var(--tk-spacing-base-50, .5rem)}.tk-toolbar__search{width:100%}.tk-toolbar__actions{width:100%;justify-content:flex-end;margin-left:0}}@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-popover{border-radius:var(--tk-borderRadius-m, 12px);box-shadow:0 10px 15px -3px #0000001a;border:1px solid var(--tk-color-base-surface-200, #e2e8f0);overflow:hidden}:host ::ng-deep .tk-toolbar-popover .p-popover-content{padding:0!important}:host ::ng-deep tk-drawer .tk-toolbar-overlay__body{padding-top:var(--tk-spacing-base-75, .75rem)!important;margin-bottom:0!important}:host ::ng-deep tk-drawer .tk-toolbar-overlay__footer{padding-top:var(--tk-spacing-base-75, .75rem)!important}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-option span{color:var(--tk-color-primary-default, #16006f);display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-option-selected{background-color:var(--tk-color-primary-muted, #b7b0d2)}::ng-deep .tk-toolbar-multiselect-panel .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { searchModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchModel", required: false }] }, { type: i0.Output, args: ["searchModelChange"] }], searchFloatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFloatLabel", required: false }] }], searchVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchVisible", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], viewToggleVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewToggleVisible", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], filterModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModel", required: false }] }, { type: i0.Output, args: ["filterModelChange"] }], filterOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOptions", required: false }] }], filterOptionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOptionLabel", required: false }] }], filterFloatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFloatLabel", required: false }] }], filterVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterVisible", required: false }] }], filterValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterValues", required: false }] }, { type: i0.Output, args: ["filterValuesChange"] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], deleteLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteLabel", required: false }] }], filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], selectedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedLabel", required: false }] }], selectedPluralLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPluralLabel", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], reloadTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "reloadTooltip", required: false }] }], sortTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortTooltip", required: false }] }], viewCardsTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewCardsTooltip", required: false }] }], viewTableTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewTableTooltip", required: false }] }], sortOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOptions", required: false }] }], sortLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortLabel", required: false }] }], sortValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortValue", required: false }] }, { type: i0.Output, args: ["sortValueChange"] }], reloadVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "reloadVisible", required: false }] }], reloadInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "reloadInterval", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], globalActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalActions", required: false }] }], selectionCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionCount", required: false }] }], allSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSelected", required: false }] }, { type: i0.Output, args: ["allSelectedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], selectionActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionActions", required: false }] }], maxVisibleSelectionActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleSelectionActions", required: false }] }], reload: [{ type: i0.Output, args: ["reload"] }], appliedFilters: [{ type: i0.Output, args: ["appliedFilters"] }], appliedSort: [{ type: i0.Output, args: ["appliedSort"] }], filterPopover: [{ type: i0.ViewChild, args: ['filterPopover', { isSignal: true }] }], sortPopover: [{ type: i0.ViewChild, args: ['sortPopover', { isSignal: true }] }] } });
 
 /**