@tekus/design-system 5.22.1 → 5.24.0

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-modal.mjs","sources":["../../../projects/design-system/components/modal/src/modal.component.ts","../../../projects/design-system/components/modal/src/modal.component.html","../../../projects/design-system/components/modal/src/services/modal.service.ts","../../../projects/design-system/components/modal/tekus-design-system-components-modal.ts"],"sourcesContent":["import { Component, computed, input, EventEmitter, Type, ElementRef, model, viewChild, ViewContainerRef, ComponentRef, effect, OnDestroy, untracked, afterEveryRender, inject } from '@angular/core';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { DialogModule } from 'primeng/dialog';\nimport { ModalFooterButton, ModalSizeType } from './modal.types';\nimport {\n  TkCanClose,\n  TkCloseInterceptor,\n} from '@tekus/design-system/core/types';\n\n/**\n * @component ModalComponent\n * @description\n * A programmatically controlled modal dialog used for displaying dynamic content.\n * Modernized for Angular 19 with 100% synchronous Signal-based closing interception.\n */\n@Component({\n  selector: 'tk-modal',\n  standalone: true,\n  imports: [DialogModule, ButtonComponent],\n  templateUrl: './modal.component.html',\n  styleUrls: ['./modal.component.scss'],\n})\nexport class ModalComponent<T = unknown> implements OnDestroy {\n  private readonly elementRef = inject(ElementRef);\n\n  private readonly contentHost = viewChild('contentHost', {\n    read: ViewContainerRef,\n  });\n  private componentRef?: ComponentRef<T>;\n\n  /** The title displayed at the top of the modal */\n  title = input<string>('');\n\n  /** The main content of the modal. Can be a string or a Component Type. */\n  content = input<string | Type<T> | null>(null);\n\n  /** Array of footer buttons with label, callback, and return value */\n  footerButtons = input<ModalFooterButton[]>([]);\n\n  /** Modal size: 'small', 'large', 'medium' or 'full' */\n  size = input<ModalSizeType>('small');\n\n  /** Whether the modal can be closed by the user via close button */\n  closable = input<boolean>(true);\n\n  /** Whether clicking outside the modal mask closes the modal */\n  closeOnOutsideClick = input<boolean>(false);\n\n  /**\n   * Optional data to be passed as inputs to the dynamic component.\n   */\n  data = input<Partial<T>>({});\n\n  /**\n   * Optional interceptor called before the modal closes.\n   * MUST be synchronous. Returns true to allow closing.\n   */\n  interceptor = input<TkCloseInterceptor | undefined>(undefined);\n\n  /** Computed: whether the content is a simple string */\n  isContentString = computed(() => typeof this.content() === 'string');\n\n  /** Computed: whether the modal has footer buttons to display */\n  hasFooter = computed(() => (this.footerButtons() ?? []).length > 0);\n\n  /** Whether the modal should be responsive on mobile screens */\n  responsive = input<boolean>(true);\n\n  /** Visibility flag as Model Signal (allows two-way binding) */\n  isOpened = model<boolean>(false);\n\n  /** Whether the modal content has a scrollbar */\n  hasScroll = false;\n\n  // --- Internals ---\n  /** Emits when the modal closes, passing the return value from footer buttons or null */\n  readonly onClose = new EventEmitter<unknown>();\n  private alreadyEmitted = false;\n  private returnValueOnClose: unknown = null;\n\n  constructor() {\n    /**\n     * @summary Orchestrates the reactive dynamic lifecycle.\n     */\n\n    effect(() => {\n      const opened = this.isOpened();\n      const host = this.contentHost();\n\n      untracked(() => {\n        if (opened && host) {\n          this.attachDynamicContent();\n        } else if (!opened) {\n          this.detachDynamicContent();\n        }\n      });\n    });\n\n    effect(() => {\n      const currentData = this.data();\n      untracked(() => this.syncDynamicInputs(currentData));\n    });\n\n    afterEveryRender(() => {\n      this.checkScroll();\n    });\n  }\n\n  /** Computed: calculates modal max-width based on `size` */\n  modalMaxWidth = computed(() => {\n    switch (this.size()) {\n      case 'large':\n        return '67.5rem';\n      case 'medium':\n        return '35rem';\n      case 'full':\n        return '98vw';\n      default:\n        return '25rem';\n    }\n  });\n\n  ngOnDestroy(): void {\n    this.detachDynamicContent();\n  }\n\n  /**\n   * @summary Orchestrates dynamic rendering and destruction based on visibility.\n   * @private\n   */\n  private attachDynamicContent(): void {\n    const type = this.content();\n    const host = this.contentHost();\n\n    if (!type || typeof type === 'string' || !host) return;\n    this.detachDynamicContent();\n    this.componentRef = host.createComponent(type);\n    this.syncDynamicInputs(this.data());\n  }\n\n  /**\n   * @summary Synchronizes incoming data record with the dynamic instance @Inputs.\n   * @private\n   */\n  private syncDynamicInputs(data: Partial<T>): void {\n    if (!this.componentRef) return;\n    Object.entries(data).forEach(([key, value]) => {\n      this.componentRef?.setInput(key, value);\n    });\n  }\n\n  /**\n   * @summary Safely destroys the dynamic component and clears references.\n   * @private\n   */\n  private detachDynamicContent(): void {\n    if (this.componentRef) {\n      this.componentRef.destroy();\n      this.componentRef = undefined;\n    }\n  }\n\n  /**\n   * Checks if the modal content has a scrollbar and updates `hasScroll` state.\n   */\n  checkScroll(): void {\n    const contentEl =\n      this.elementRef.nativeElement.querySelector('.p-dialog-content');\n    if (contentEl) {\n      this.hasScroll = contentEl.scrollHeight > contentEl.clientHeight;\n    }\n  }\n\n  /**\n   * Opens the modal dialog.\n   */\n  open(): void {\n    this.isOpened.set(true);\n    this.resetClosureState();\n  }\n\n  /**\n   * @summary Main entry point for closure requests.\n   * Evaluation is 100% synchronous based on current Signal state.\n   * @param returnValue (Optional) Value to emit on close.\n   */\n  tryClose(returnValue: unknown = null): void {\n    if (this.canExecuteClosure()) {\n      this.executeClosure(returnValue, arguments.length > 0);\n    } else {\n      const instance = this.componentRef?.instance as TkCanClose | undefined;\n      instance?.onBlockedClose?.();\n    }\n  }\n\n  /**\n   * @summary Synchronous evaluator of hierarchical guards.\n   * @returns true if closure is allowed.\n   * @private\n   */\n  private canExecuteClosure(): boolean {\n    const instance = this.componentRef?.instance as TkCanClose | undefined;\n    const canClose = instance?.canClose ? instance.canClose() : true;\n    if (!canClose) return false;\n\n    const configInterceptor = this.interceptor();\n    if (configInterceptor && !configInterceptor()) return false;\n\n    return true;\n  }\n\n  /**\n   * @summary Unified logic to execute the final closure state change.\n   * @private\n   */\n  private executeClosure(returnValue: unknown, hasReturnValue: boolean): void {\n    if (hasReturnValue) {\n      this.alreadyEmitted = true;\n      this.returnValueOnClose = returnValue;\n    }\n    this.isOpened.set(false);\n  }\n\n  /**\n   * @summary Handles external visibility changes (from p-dialog 'X' or Escape).\n   * Ensures the reactive guard is respected before allowing closure.\n   */\n  onVisibleChange(visible: boolean): void {\n    if (!visible) {\n      this.tryClose();\n    }\n  }\n\n  /**\n   * Handles the close event from the underlying dialog component.\n   */\n  handleClose(): void {\n    const valueToEmit = this.alreadyEmitted ? this.returnValueOnClose : null;\n    this.onClose.emit(valueToEmit);\n    this.resetClosureState();\n  }\n\n  /**\n   * @summary Handles actions triggered by footer buttons.\n   */\n  handleAction(action: (() => void) | undefined, returnValue: unknown): void {\n    if (action) action();\n    this.tryClose(returnValue);\n  }\n\n  /**\n   * @summary Safely closes the modal forcefully without checks.\n   */\n  close(): void {\n    this.tryClose();\n  }\n\n  /**\n   * @private\n   * Encapsulates state cleanup to avoid repetitive assignments\n   */\n  private resetClosureState(): void {\n    this.alreadyEmitted = false;\n    this.returnValueOnClose = null;\n  }\n}\n","<p-dialog\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissableMask]=\"closeOnOutsideClick()\"\n  [draggable]=\"false\"\n  [focusOnShow]=\"false\"\n  [header]=\"title()\"\n  [style]=\"{\n    'max-width': modalMaxWidth(),\n    width: 'calc(100% - var(--tk-spacing-base-200))',\n  }\"\n  (onHide)=\"handleClose()\"\n  (onShow)=\"checkScroll()\"\n  class=\"tk-modal\">\n  <section class=\"tk-modal__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n\n  <ng-template pTemplate=\"footer\">\n    @if (hasFooter()) {\n      <section\n        class=\"tk-modal__footer\"\n        [class.tk-modal__footer--with-content]=\"hasScroll\">\n        @for (btn of footerButtons()!; track $index) {\n          <tk-button\n            [label]=\"btn.label\"\n            [severity]=\"btn.severity\"\n            [variant]=\"btn.variant\"\n            (clicked)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.enter)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.space)=\"handleAction(btn.action, btn.returnValue)\" />\n        }\n      </section>\n    }\n  </ng-template>\n</p-dialog>\n","import { Injectable, ApplicationRef, ComponentRef, Injector, createComponent, EmbeddedViewRef, inject } from '@angular/core';\nimport { ModalComponent } from '../modal.component';\nimport { Observable, Subject } from 'rxjs';\nimport { ModalConfig } from '../modal.types';\n\n/**\n * @service ModalService\n * @description\n * Service responsible for programmatically opening and managing modal dialogs.\n * It handles component creation, attachment to the document body, and cleanup.\n */\n@Injectable({ providedIn: 'root' })\nexport class ModalService {\n  private readonly injector = inject(Injector);\n  private readonly appRef = inject(ApplicationRef);\n\n  /** Reference to the currently open modal component */\n  private modalRef: ComponentRef<ModalComponent> | null = null;\n\n  /** Internal getter for testing purposes */\n  get _modalRefForTesting(): ComponentRef<ModalComponent> | null {\n    return this.modalRef;\n  }\n  /** Internal setter for testing purposes */\n  set _modalRefForTesting(ref: ComponentRef<ModalComponent> | null) {\n    this.modalRef = ref;\n  }\n\n  /**\n   * Opens a modal dialog with the provided configuration.\n   * Only one modal can be open at a time.\n   * @param config Configuration object for the modal (title, content, buttons, etc.)\n   * @returns An observable that emits the modal's return value when it closes.\n   */\n  open(config: ModalConfig): Observable<unknown> {\n    if (this.modalRef) {\n      return this.modalRef.instance.onClose.asObservable();\n    }\n\n    const componentRef = createComponent(ModalComponent, {\n      environmentInjector: this.appRef.injector,\n    });\n\n    this.appRef.attachView(componentRef.hostView);\n\n    const domElem = (componentRef.hostView as EmbeddedViewRef<unknown>).rootNodes[0] as HTMLElement;\n    document.body.appendChild(domElem);\n\n    componentRef.setInput('title', config.title);\n    componentRef.setInput('content', config.content);\n    componentRef.setInput('footerButtons', config.footerButtons || []);\n    componentRef.setInput('size', config.size || 'small');\n    componentRef.setInput('closable', config.closable ?? true);\n    componentRef.setInput('closeOnOutsideClick', config.closeOnOutsideClick ?? false);\n    componentRef.setInput('interceptor', config.interceptor);\n    componentRef.setInput('data', config.data || {});\n\n    const close$ = new Subject<unknown>();\n\n    componentRef.instance.onClose.subscribe((value) => {\n      close$.next(value);\n      close$.complete();\n\n      this.appRef.detachView(componentRef.hostView);\n      componentRef.destroy();\n      this.modalRef = null;\n    });\n\n    componentRef.instance.open();\n    this.modalRef = componentRef;\n\n    return close$.asObservable();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tekus-design-system-components-modal.mjs","sources":["../../../projects/design-system/components/modal/src/modal.component.ts","../../../projects/design-system/components/modal/src/modal.component.html","../../../projects/design-system/components/modal/src/services/modal.service.ts","../../../projects/design-system/components/modal/tekus-design-system-components-modal.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output, Type, ElementRef, model, viewChild, ViewContainerRef, ComponentRef, effect, OnDestroy, untracked, afterEveryRender, inject } from '@angular/core';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { DialogModule } from 'primeng/dialog';\nimport { ModalFooterButton, ModalSizeType } from './modal.types';\nimport {\n  TkCanClose,\n  TkCloseInterceptor,\n} from '@tekus/design-system/core/types';\n\n/**\n * @component ModalComponent\n * @description\n * A programmatically controlled modal dialog used for displaying dynamic content.\n * Modernized for Angular 19 with 100% synchronous Signal-based closing interception.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'tk-modal',\n  imports: [DialogModule, ButtonComponent],\n  templateUrl: './modal.component.html',\n  styleUrl: './modal.component.scss',\n})\nexport class ModalComponent<T = unknown> implements OnDestroy {\n  private readonly elementRef = inject(ElementRef);\n\n  private readonly contentHost = viewChild('contentHost', {\n    read: ViewContainerRef,\n  });\n  private componentRef?: ComponentRef<T>;\n\n  /** The title displayed at the top of the modal */\n  title = input<string>('');\n\n  /** The main content of the modal. Can be a string or a Component Type. */\n  content = input<string | Type<T> | null>(null);\n\n  /** Array of footer buttons with label, callback, and return value */\n  footerButtons = input<ModalFooterButton[]>([]);\n\n  /** Modal size: 'small', 'large', 'medium' or 'full' */\n  size = input<ModalSizeType>('small');\n\n  /** Whether the modal can be closed by the user via close button */\n  closable = input<boolean>(true);\n\n  /** Whether clicking outside the modal mask closes the modal */\n  closeOnOutsideClick = input<boolean>(false);\n\n  /**\n   * Optional data to be passed as inputs to the dynamic component.\n   */\n  data = input<Partial<T>>({});\n\n  /**\n   * Optional interceptor called before the modal closes.\n   * MUST be synchronous. Returns true to allow closing.\n   */\n  interceptor = input<TkCloseInterceptor | undefined>(undefined);\n\n  /** Computed: whether the content is a simple string */\n  isContentString = computed(() => typeof this.content() === 'string');\n\n  /** Computed: whether the modal has footer buttons to display */\n  hasFooter = computed(() => (this.footerButtons() ?? []).length > 0);\n\n  /** Whether the modal should be responsive on mobile screens */\n  responsive = input<boolean>(true);\n\n  /** Visibility flag as Model Signal (allows two-way binding) */\n  isOpened = model<boolean>(false);\n\n  /** Whether the modal content has a scrollbar */\n  hasScroll = false;\n\n  // --- Internals ---\n  /** Emits when the modal closes, passing the return value from footer buttons or null */\n  readonly closed = output<unknown>();\n  private alreadyEmitted = false;\n  private returnValueOnClose: unknown = null;\n\n  constructor() {\n    /**\n     * @summary Orchestrates the reactive dynamic lifecycle.\n     */\n\n    effect(() => {\n      const opened = this.isOpened();\n      const host = this.contentHost();\n\n      untracked(() => {\n        if (opened && host) {\n          this.attachDynamicContent();\n        } else if (!opened) {\n          this.detachDynamicContent();\n        }\n      });\n    });\n\n    effect(() => {\n      const currentData = this.data();\n      untracked(() => this.syncDynamicInputs(currentData));\n    });\n\n    afterEveryRender(() => {\n      this.checkScroll();\n    });\n  }\n\n  /** Computed: calculates modal max-width based on `size` */\n  modalMaxWidth = computed(() => {\n    switch (this.size()) {\n      case 'large':\n        return '67.5rem';\n      case 'medium':\n        return '35rem';\n      case 'full':\n        return '98vw';\n      default:\n        return '25rem';\n    }\n  });\n\n  ngOnDestroy(): void {\n    this.detachDynamicContent();\n  }\n\n  /**\n   * @summary Orchestrates dynamic rendering and destruction based on visibility.\n   * @private\n   */\n  private attachDynamicContent(): void {\n    const type = this.content();\n    const host = this.contentHost();\n\n    if (!type || typeof type === 'string' || !host) return;\n    this.detachDynamicContent();\n    this.componentRef = host.createComponent(type);\n    this.syncDynamicInputs(this.data());\n  }\n\n  /**\n   * @summary Synchronizes incoming data record with the dynamic instance @Inputs.\n   * @private\n   */\n  private syncDynamicInputs(data: Partial<T>): void {\n    if (!this.componentRef) return;\n    Object.entries(data).forEach(([key, value]) => {\n      this.componentRef?.setInput(key, value);\n    });\n  }\n\n  /**\n   * @summary Safely destroys the dynamic component and clears references.\n   * @private\n   */\n  private detachDynamicContent(): void {\n    if (this.componentRef) {\n      this.componentRef.destroy();\n      this.componentRef = undefined;\n    }\n  }\n\n  /**\n   * Checks if the modal content has a scrollbar and updates `hasScroll` state.\n   */\n  checkScroll(): void {\n    const contentEl =\n      this.elementRef.nativeElement.querySelector('.p-dialog-content');\n    if (contentEl) {\n      this.hasScroll = contentEl.scrollHeight > contentEl.clientHeight;\n    }\n  }\n\n  /**\n   * Opens the modal dialog.\n   */\n  open(): void {\n    this.isOpened.set(true);\n    this.resetClosureState();\n  }\n\n  /**\n   * @summary Main entry point for closure requests.\n   * Evaluation is 100% synchronous based on current Signal state.\n   * @param returnValue (Optional) Value to emit on close.\n   */\n  tryClose(returnValue: unknown = null): void {\n    if (this.canExecuteClosure()) {\n      this.executeClosure(returnValue, arguments.length > 0);\n    } else {\n      const instance = this.componentRef?.instance as TkCanClose | undefined;\n      instance?.onBlockedClose?.();\n    }\n  }\n\n  /**\n   * @summary Synchronous evaluator of hierarchical guards.\n   * @returns true if closure is allowed.\n   * @private\n   */\n  private canExecuteClosure(): boolean {\n    const instance = this.componentRef?.instance as TkCanClose | undefined;\n    const canClose = instance?.canClose ? instance.canClose() : true;\n    if (!canClose) return false;\n\n    const configInterceptor = this.interceptor();\n    if (configInterceptor && !configInterceptor()) return false;\n\n    return true;\n  }\n\n  /**\n   * @summary Unified logic to execute the final closure state change.\n   * @private\n   */\n  private executeClosure(returnValue: unknown, hasReturnValue: boolean): void {\n    if (hasReturnValue) {\n      this.alreadyEmitted = true;\n      this.returnValueOnClose = returnValue;\n    }\n    this.isOpened.set(false);\n  }\n\n  /**\n   * @summary Handles external visibility changes (from p-dialog 'X' or Escape).\n   * Ensures the reactive guard is respected before allowing closure.\n   */\n  onVisibleChange(visible: boolean): void {\n    if (!visible) {\n      this.tryClose();\n    }\n  }\n\n  /**\n   * Handles the close event from the underlying dialog component.\n   */\n  handleClose(): void {\n    const valueToEmit = this.alreadyEmitted ? this.returnValueOnClose : null;\n    this.closed.emit(valueToEmit);\n    this.resetClosureState();\n  }\n\n  /**\n   * @summary Handles actions triggered by footer buttons.\n   */\n  handleAction(action: (() => void) | undefined, returnValue: unknown): void {\n    if (action) action();\n    this.tryClose(returnValue);\n  }\n\n  /**\n   * @summary Safely closes the modal forcefully without checks.\n   */\n  close(): void {\n    this.tryClose();\n  }\n\n  /**\n   * @private\n   * Encapsulates state cleanup to avoid repetitive assignments\n   */\n  private resetClosureState(): void {\n    this.alreadyEmitted = false;\n    this.returnValueOnClose = null;\n  }\n}\n","<p-dialog\n  [modal]=\"true\"\n  [visible]=\"isOpened()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  [closable]=\"closable()\"\n  [dismissableMask]=\"closeOnOutsideClick()\"\n  [draggable]=\"false\"\n  [focusOnShow]=\"false\"\n  [header]=\"title()\"\n  [style]=\"{\n    'max-width': modalMaxWidth(),\n    width: 'calc(100% - var(--tk-spacing-base-200))',\n  }\"\n  (onHide)=\"handleClose()\"\n  (onShow)=\"checkScroll()\"\n  class=\"tk-modal\">\n  <section class=\"tk-modal__content\">\n    @if (content()) {\n      @if (isContentString()) {\n        <p [innerHTML]=\"content()\"></p>\n      } @else {\n        <ng-template #contentHost></ng-template>\n      }\n    }\n  </section>\n\n  <ng-template pTemplate=\"footer\">\n    @if (hasFooter()) {\n      <section\n        class=\"tk-modal__footer\"\n        [class.tk-modal__footer--with-content]=\"hasScroll\">\n        @for (btn of footerButtons()!; track $index) {\n          <tk-button\n            [label]=\"btn.label\"\n            [severity]=\"btn.severity\"\n            [variant]=\"btn.variant\"\n            (clicked)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.enter)=\"handleAction(btn.action, btn.returnValue)\"\n            (keydown.space)=\"handleAction(btn.action, btn.returnValue)\" />\n        }\n      </section>\n    }\n  </ng-template>\n</p-dialog>\n","import { Injectable, ApplicationRef, ComponentRef, Injector, createComponent, EmbeddedViewRef, inject } from '@angular/core';\nimport { outputToObservable } from '@angular/core/rxjs-interop';\nimport { ModalComponent } from '../modal.component';\nimport { Observable, Subject } from 'rxjs';\nimport { ModalConfig } from '../modal.types';\n\n/**\n * @service ModalService\n * @description\n * Service responsible for programmatically opening and managing modal dialogs.\n * It handles component creation, attachment to the document body, and cleanup.\n */\n@Injectable({ providedIn: 'root' })\nexport class ModalService {\n  private readonly injector = inject(Injector);\n  private readonly appRef = inject(ApplicationRef);\n\n  /** Reference to the currently open modal component */\n  private modalRef: ComponentRef<ModalComponent> | null = null;\n\n  /** Internal getter for testing purposes */\n  get _modalRefForTesting(): ComponentRef<ModalComponent> | null {\n    return this.modalRef;\n  }\n  /** Internal setter for testing purposes */\n  set _modalRefForTesting(ref: ComponentRef<ModalComponent> | null) {\n    this.modalRef = ref;\n  }\n\n  /**\n   * Opens a modal dialog with the provided configuration.\n   * Only one modal can be open at a time.\n   * @param config Configuration object for the modal (title, content, buttons, etc.)\n   * @returns An observable that emits the modal's return value when it closes.\n   */\n  open(config: ModalConfig): Observable<unknown> {\n    if (this.modalRef) {\n      return outputToObservable(this.modalRef.instance.closed);\n    }\n\n    const componentRef = createComponent(ModalComponent, {\n      environmentInjector: this.appRef.injector,\n    });\n\n    this.appRef.attachView(componentRef.hostView);\n\n    const domElem = (componentRef.hostView as EmbeddedViewRef<unknown>).rootNodes[0] as HTMLElement;\n    document.body.appendChild(domElem);\n\n    componentRef.setInput('title', config.title);\n    componentRef.setInput('content', config.content);\n    componentRef.setInput('footerButtons', config.footerButtons || []);\n    componentRef.setInput('size', config.size || 'small');\n    componentRef.setInput('closable', config.closable ?? true);\n    componentRef.setInput('closeOnOutsideClick', config.closeOnOutsideClick ?? false);\n    componentRef.setInput('interceptor', config.interceptor);\n    componentRef.setInput('data', config.data || {});\n\n    const close$ = new Subject<unknown>();\n\n    componentRef.instance.closed.subscribe((value: unknown) => {\n      close$.next(value);\n      close$.complete();\n\n      this.appRef.detachView(componentRef.hostView);\n      componentRef.destroy();\n      this.modalRef = null;\n    });\n\n    componentRef.instance.open();\n    this.modalRef = componentRef;\n\n    return close$.asObservable();\n  }\n}\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-multiselect.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, signal, model, input, output, computed, Component } from '@angular/core';
+import { inject, signal, model, input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NgControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i2 from 'primeng/multiselect';
@@ -250,11 +250,11 @@ class MultiselectComponent {
         return this.ngControl?.control || null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: MultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: MultiselectComponent, isStandalone: true, selector: "tk-multiselect", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceHolder: { classPropertyName: "filterPlaceHolder", publicName: "filterPlaceHolder", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", selectionChange: "selectionChange", filterChange: "filterChange" }, ngImport: i0, template: "<p-floatlabel>\n  <p-multiselect\n    optionLabel=\"name\"\n    [id]=\"id()\"\n    [options]=\"options()\"\n    [(ngModel)]=\"model\"\n    [display]=\"display()\"\n    [maxSelectedLabels]=\"maxSelectedLabels()\"\n    [selectedItemsLabel]=\"selectedItemsLabel()\"\n    [emptyFilterMessage]=\"emptyFilterMessage()\"\n    [filter]=\"filter()\"\n    [filterPlaceHolder]=\"filterPlaceHolder()\"\n    [styleClass]=\"styleClass()\"\n    [class.ng-invalid]=\"\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched)\n    \"\n    [class.ng-dirty]=\"effectiveControl?.dirty\"\n    [class.ng-touched]=\"effectiveControl?.touched\"\n    (onFilter)=\"handleFilter($event)\"\n    (onChange)=\"handleChange($event)\">\n  </p-multiselect>\n  <label [for]=\"id()\">{{ labelText() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n  <div class=\"tk-select-messages\">\n    @if (\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched) &&\n      errorMessage()\n    ) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n        errorMessage()\n      }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n        hint()\n      }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-multiselect{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-multiselect:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #424243);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-multiselect-option span{color:var(--tk-color-accent-default, #16006f)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-multiselect-option-selected{background-color:var(--tk-color-accent-muted, #b7b0d2)!important}:host ::ng-deep .p-multiselect-chip{background-color:var(--tk-surface-100, #f4f4f5);color:var(--tk-surface-700, #424243);border-radius:var(--tk-borderRadius-full, 999px)!important;padding:4px 8px}:host ::ng-deep .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}:host ::ng-deep .p-overlay{width:-webkit-fill-available}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-multiselect-label{gap:.313rem;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: MultiselectComponent, isStandalone: true, selector: "tk-multiselect", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceHolder: { classPropertyName: "filterPlaceHolder", publicName: "filterPlaceHolder", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", selectionChange: "selectionChange", filterChange: "filterChange" }, ngImport: i0, template: "<p-floatlabel>\n  <p-multiselect\n    optionLabel=\"name\"\n    [id]=\"id()\"\n    [options]=\"options()\"\n    [(ngModel)]=\"model\"\n    [display]=\"display()\"\n    [maxSelectedLabels]=\"maxSelectedLabels()\"\n    [selectedItemsLabel]=\"selectedItemsLabel()\"\n    [emptyFilterMessage]=\"emptyFilterMessage()\"\n    [filter]=\"filter()\"\n    [filterPlaceHolder]=\"filterPlaceHolder()\"\n    [styleClass]=\"styleClass()\"\n    [class.ng-invalid]=\"\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched)\n    \"\n    [class.ng-dirty]=\"effectiveControl?.dirty\"\n    [class.ng-touched]=\"effectiveControl?.touched\"\n    (onFilter)=\"handleFilter($event)\"\n    (onChange)=\"handleChange($event)\">\n  </p-multiselect>\n  <label [for]=\"id()\">{{ labelText() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n  <div class=\"tk-select-messages\">\n    @if (\n      effectiveControl?.invalid &&\n      (effectiveControl?.dirty || effectiveControl?.touched) &&\n      errorMessage()\n    ) {\n      <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n        errorMessage()\n      }}</p-message>\n    } @else if (hint()) {\n      <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{\n        hint()\n      }}</p-message>\n    }\n  </div>\n</div>\n", styles: [":host ::ng-deep .p-multiselect{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-multiselect:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #424243);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-multiselect-option span{color:var(--tk-color-accent-default, #16006f)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-multiselect-option-selected{background-color:var(--tk-color-accent-muted, #b7b0d2)!important}:host ::ng-deep .p-multiselect-chip{background-color:var(--tk-surface-100, #f4f4f5);color:var(--tk-surface-700, #424243);border-radius:var(--tk-borderRadius-full, 999px)!important;padding:4px 8px}:host ::ng-deep .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}:host ::ng-deep .p-overlay{width:-webkit-fill-available}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-multiselect-label{gap:.313rem;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant", "motionOptions"], outputs: ["onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-multiselect', standalone: true, imports: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-multiselect', imports: [
                         ReactiveFormsModule,
                         FormsModule,
                         MultiSelectModule,

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

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

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, signal, output, computed, effect, Component } from '@angular/core';
+import { input, signal, output, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
 import * as i2 from '@angular/forms';
@@ -147,11 +147,11 @@ class PaginationComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.3", type: PaginationComponent, isStandalone: true, selector: "tk-pagination", inputs: { hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pagination\" [class.hidden]=\"hidden()\">\n  <div class=\"flex items-center\">\n    <span class=\"mx-1 pagination__caption\">Items per page: </span>\n    <p-select\n      [options]=\"options()\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"pageSizeInternal()\"\n      (ngModelChange)=\"onPageSizeChange($event)\" />\n  </div>\n  <p-paginator\n    [first]=\"pageIndexInternal()\"\n    [rows]=\"pageSizeInternal()\"\n    [totalRecords]=\"length()\"\n    (onPageChange)=\"onPageChange($event)\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n    [showPageLinks]=\"false\"\n    [showFirstLastIcon]=\"false\"></p-paginator>\n</div>\n", styles: [".pagination{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;flex-wrap:wrap}.pagination__caption{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-current{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-next-icon,:host ::ng-deep .p-paginator-prev-icon{width:18px!important;height:18px!important}:host ::ng-deep .p-select,:host ::ng-deep .p-inputwrapper{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);box-shadow:none}:host ::ng-deep .p-select:focus,:host ::ng-deep .p-inputwrapper:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-dropdown-icon{color:var(--tk-surface-700, #424243)!important}.hidden{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.3", type: PaginationComponent, isStandalone: true, selector: "tk-pagination", inputs: { hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pagination\" [class.hidden]=\"hidden()\">\n  <div class=\"flex items-center\">\n    <span class=\"mx-1 pagination__caption\">Items per page: </span>\n    <p-select\n      [options]=\"options()\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"pageSizeInternal()\"\n      (ngModelChange)=\"onPageSizeChange($event)\" />\n  </div>\n  <p-paginator\n    [first]=\"pageIndexInternal()\"\n    [rows]=\"pageSizeInternal()\"\n    [totalRecords]=\"length()\"\n    (onPageChange)=\"onPageChange($event)\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n    [showPageLinks]=\"false\"\n    [showFirstLastIcon]=\"false\"></p-paginator>\n</div>\n", styles: [".pagination{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;flex-wrap:wrap}.pagination__caption{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-current{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-next-icon,:host ::ng-deep .p-paginator-prev-icon{width:18px!important;height:18px!important}:host ::ng-deep .p-select,:host ::ng-deep .p-inputwrapper{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);box-shadow:none}:host ::ng-deep .p-select:focus,:host ::ng-deep .p-inputwrapper:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-dropdown-icon{color:var(--tk-surface-700, #424243)!important}.hidden{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-pagination', imports: [PaginatorModule, FormsModule, Select], template: "<div class=\"pagination\" [class.hidden]=\"hidden()\">\n  <div class=\"flex items-center\">\n    <span class=\"mx-1 pagination__caption\">Items per page: </span>\n    <p-select\n      [options]=\"options()\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"pageSizeInternal()\"\n      (ngModelChange)=\"onPageSizeChange($event)\" />\n  </div>\n  <p-paginator\n    [first]=\"pageIndexInternal()\"\n    [rows]=\"pageSizeInternal()\"\n    [totalRecords]=\"length()\"\n    (onPageChange)=\"onPageChange($event)\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n    [showPageLinks]=\"false\"\n    [showFirstLastIcon]=\"false\"></p-paginator>\n</div>\n", styles: [".pagination{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;flex-wrap:wrap}.pagination__caption{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-current{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-next-icon,:host ::ng-deep .p-paginator-prev-icon{width:18px!important;height:18px!important}:host ::ng-deep .p-select,:host ::ng-deep .p-inputwrapper{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);box-shadow:none}:host ::ng-deep .p-select:focus,:host ::ng-deep .p-inputwrapper:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-dropdown-icon{color:var(--tk-surface-700, #424243)!important}.hidden{display:none!important}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'tk-pagination', imports: [PaginatorModule, FormsModule, Select], template: "<div class=\"pagination\" [class.hidden]=\"hidden()\">\n  <div class=\"flex items-center\">\n    <span class=\"mx-1 pagination__caption\">Items per page: </span>\n    <p-select\n      [options]=\"options()\"\n      optionLabel=\"label\"\n      optionValue=\"value\"\n      [ngModel]=\"pageSizeInternal()\"\n      (ngModelChange)=\"onPageSizeChange($event)\" />\n  </div>\n  <p-paginator\n    [first]=\"pageIndexInternal()\"\n    [rows]=\"pageSizeInternal()\"\n    [totalRecords]=\"length()\"\n    (onPageChange)=\"onPageChange($event)\"\n    [showCurrentPageReport]=\"true\"\n    currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n    [showPageLinks]=\"false\"\n    [showFirstLastIcon]=\"false\"></p-paginator>\n</div>\n", styles: [".pagination{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;flex-wrap:wrap}.pagination__caption{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-current{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-next-icon,:host ::ng-deep .p-paginator-prev-icon{width:18px!important;height:18px!important}:host ::ng-deep .p-select,:host ::ng-deep .p-inputwrapper{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);box-shadow:none}:host ::ng-deep .p-select:focus,:host ::ng-deep .p-inputwrapper:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-dropdown-icon{color:var(--tk-surface-700, #424243)!important}.hidden{display:none!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: true }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
 /**

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

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

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component } from '@angular/core';
+import { input, model, output, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from 'primeng/panel';
 import { PanelModule } from 'primeng/panel';
 import { IconComponent } from '@tekus/design-system/components/icon';
@@ -19,13 +19,21 @@ import * as i2 from 'primeng/api';
  * <tk-panel
  *   header="Panel Title"
  *   [toggleable]="true"
- *   [collapsed]="false">
+ *   [(collapsed)]="isCollapsed">
  *   <p>Panel content goes here</p>
  * </tk-panel>
  * ```
  */
 class PanelComponent {
     constructor() {
+        /**
+         * @property {string} header
+         * @description
+         * Header text displayed at the top of the panel.
+         *
+         * @default undefined
+         */
+        this.header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
         /**
          * @property {boolean} toggleable
          * @description
@@ -33,23 +41,16 @@ class PanelComponent {
          *
          * @default false
          */
-        this.toggleable = false;
+        this.toggleable = input(false, ...(ngDevMode ? [{ debugName: "toggleable" }] : /* istanbul ignore next */ []));
         /**
-         * @property {boolean} collapsed
+         * @property {ModelSignal<boolean>} collapsed
          * @description
          * Defines whether the panel is collapsed or expanded.
-         * Supports two-way binding.
+         * Supports two-way binding via [(collapsed)].
          *
          * @default false
          */
-        this.collapsed = false;
-        /**
-         * @event collapsedChange
-         * @description
-         * Emits when the collapsed state changes.
-         * Enables two-way binding with [(collapsed)].
-         */
-        this.collapsedChange = new EventEmitter();
+        this.collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
         /**
          * @event toggled
          * @description
@@ -61,7 +62,7 @@ class PanelComponent {
          * <tk-panel (toggled)="handleToggle($event)"></tk-panel>
          * ```
          */
-        this.toggled = new EventEmitter();
+        this.toggled = output();
     }
     /**
      * @method handleToggle
@@ -72,27 +73,17 @@ class PanelComponent {
      * @param event - The toggle event from PrimeNG panel
      */
     handleToggle(event) {
-        this.collapsed = event.collapsed ?? false;
-        this.collapsedChange.emit(this.collapsed);
-        this.toggled.emit({ collapsed: this.collapsed });
+        const newState = event.collapsed ?? false;
+        this.collapsed.set(newState);
+        this.toggled.emit({ collapsed: newState });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: PanelComponent, isStandalone: true, selector: "tk-panel", inputs: { header: "header", toggleable: "toggleable", collapsed: "collapsed" }, outputs: { collapsedChange: "collapsedChange", toggled: "toggled" }, ngImport: i0, template: "<p-panel\n  class=\"tk-panel\"\n  [header]=\"header\"\n  [toggleable]=\"toggleable\"\n  [collapsed]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n  \n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .tk-panel{width:100%}:host ::ng-deep .tk-panel .p-panel-header .p-panel-title{color:var(--tk-color-text-default, #000000)}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button .p-button-icon{display:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button{background:transparent!important;border:none!important;padding:0!important;width:auto!important;min-width:auto!important;box-shadow:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button:hover{background:transparent!important}:host ::ng-deep .tk-panel .p-panel-content{background:var(--tk-color-background-default, #ffffff);border-radius:var(--tk-borderRadius-s, .5rem);margin:var(--tk-spacing-paddingY-s, .5rem);margin-top:var(--tk-spacing-paddingY-none, 0rem)}:host ::ng-deep .tk-panel .tk-panel-toggle-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:var(--tk-size-base-200, 2rem);min-height:var(--tk-size-base-200, 2rem)}\n"], dependencies: [{ kind: "ngmodule", type: PanelModule }, { kind: "component", type: i1.Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps", "motionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"], outputs: ["iconChange", "styleIconChange", "colorChange", "sizeChange", "disabledChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: PanelComponent, isStandalone: true, selector: "tk-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", toggled: "toggled" }, ngImport: i0, template: "<p-panel\n  class=\"tk-panel\"\n  [header]=\"header()\"\n  [toggleable]=\"toggleable()\"\n  [collapsed]=\"collapsed()\"\n  (onAfterToggle)=\"handleToggle($event)\">\n\n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable()) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed()) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .tk-panel{width:100%}:host ::ng-deep .tk-panel .p-panel-header .p-panel-title{color:var(--tk-color-text-default, #000000)}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button .p-button-icon{display:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button{background:transparent!important;border:none!important;padding:0!important;width:auto!important;min-width:auto!important;box-shadow:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button:hover{background:transparent!important}:host ::ng-deep .tk-panel .p-panel-content{background:var(--tk-color-background-default, #ffffff);border-radius:var(--tk-borderRadius-s, .5rem);margin:var(--tk-spacing-paddingY-s, .5rem);margin-top:var(--tk-spacing-paddingY-none, 0rem)}:host ::ng-deep .tk-panel .tk-panel-toggle-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:var(--tk-size-base-200, 2rem);min-height:var(--tk-size-base-200, 2rem)}\n"], dependencies: [{ kind: "ngmodule", type: PanelModule }, { kind: "component", type: i1.Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps", "motionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: PanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-panel', standalone: true, imports: [PanelModule, IconComponent], template: "<p-panel\n  class=\"tk-panel\"\n  [header]=\"header\"\n  [toggleable]=\"toggleable\"\n  [collapsed]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n  \n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .tk-panel{width:100%}:host ::ng-deep .tk-panel .p-panel-header .p-panel-title{color:var(--tk-color-text-default, #000000)}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button .p-button-icon{display:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button{background:transparent!important;border:none!important;padding:0!important;width:auto!important;min-width:auto!important;box-shadow:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button:hover{background:transparent!important}:host ::ng-deep .tk-panel .p-panel-content{background:var(--tk-color-background-default, #ffffff);border-radius:var(--tk-borderRadius-s, .5rem);margin:var(--tk-spacing-paddingY-s, .5rem);margin-top:var(--tk-spacing-paddingY-none, 0rem)}:host ::ng-deep .tk-panel .tk-panel-toggle-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:var(--tk-size-base-200, 2rem);min-height:var(--tk-size-base-200, 2rem)}\n"] }]
-        }], propDecorators: { header: [{
-                type: Input
-            }], toggleable: [{
-                type: Input
-            }], collapsed: [{
-                type: Input
-            }], collapsedChange: [{
-                type: Output
-            }], toggled: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'tk-panel', imports: [PanelModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-panel\n  class=\"tk-panel\"\n  [header]=\"header()\"\n  [toggleable]=\"toggleable()\"\n  [collapsed]=\"collapsed()\"\n  (onAfterToggle)=\"handleToggle($event)\">\n\n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable()) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed()) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .tk-panel{width:100%}:host ::ng-deep .tk-panel .p-panel-header .p-panel-title{color:var(--tk-color-text-default, #000000)}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button .p-button-icon{display:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button{background:transparent!important;border:none!important;padding:0!important;width:auto!important;min-width:auto!important;box-shadow:none!important}:host ::ng-deep .tk-panel .p-panel-header .p-panel-header-actions button:hover{background:transparent!important}:host ::ng-deep .tk-panel .p-panel-content{background:var(--tk-color-background-default, #ffffff);border-radius:var(--tk-borderRadius-s, .5rem);margin:var(--tk-spacing-paddingY-s, .5rem);margin-top:var(--tk-spacing-paddingY-none, 0rem)}:host ::ng-deep .tk-panel .tk-panel-toggle-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:var(--tk-size-base-200, 2rem);min-height:var(--tk-size-base-200, 2rem)}\n"] }]
+        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], toggled: [{ type: i0.Output, args: ["toggled"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"tekus-design-system-components-panel.mjs","sources":["../../../projects/design-system/components/panel/src/panel.component.ts","../../../projects/design-system/components/panel/src/panel.component.html","../../../projects/design-system/components/panel/tekus-design-system-components-panel.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { PanelModule } from 'primeng/panel';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\n/**\n * @component PanelComponent\n * @description\n * Panel is a container component with an optional content toggle feature.\n * It wraps PrimeNG's Panel component and provides a consistent design across the application.\n * \n * The panel can be toggled between expanded and collapsed states using the chevron icon\n * in the header. The component uses custom tk-icon for the toggle icons.\n *\n * @usage\n * ```html\n * <tk-panel \n *   header=\"Panel Title\" \n *   [toggleable]=\"true\"\n *   [collapsed]=\"false\">\n *   <p>Panel content goes here</p>\n * </tk-panel>\n * ```\n */\n@Component({\n  selector: 'tk-panel',\n  standalone: true,\n  imports: [PanelModule, IconComponent],\n  templateUrl: './panel.component.html',\n  styleUrls: ['./panel.component.scss'],\n})\nexport class PanelComponent {\n  /**\n   * @property {string} header\n   * @description\n   * Header text displayed at the top of the panel.\n   * \n   * @default undefined\n   */\n  @Input() header?: string;\n\n  /**\n   * @property {boolean} toggleable\n   * @description\n   * When enabled, the panel content can be expanded and collapsed.\n   * \n   * @default false\n   */\n  @Input() toggleable = false;\n\n  /**\n   * @property {boolean} collapsed\n   * @description\n   * Defines whether the panel is collapsed or expanded.\n   * Supports two-way binding.\n   * \n   * @default false\n   */\n  @Input() collapsed = false;\n\n  /**\n   * @event collapsedChange\n   * @description\n   * Emits when the collapsed state changes.\n   * Enables two-way binding with [(collapsed)].\n   */\n  @Output() collapsedChange = new EventEmitter<boolean>();\n\n  /**\n   * @event toggled\n   * @description\n   * Callback to invoke when the panel is toggled.\n   * Emits an object with the collapsed state.\n   * \n   * @example\n   * ```html\n   * <tk-panel (toggled)=\"handleToggle($event)\"></tk-panel>\n   * ```\n   */\n  @Output() toggled = new EventEmitter<{ collapsed: boolean }>();\n\n  /**\n   * @method handleToggle\n   * @description\n   * Handles the toggle event from the PrimeNG panel.\n   * Updates the collapsed state and emits the appropriate events.\n   * \n   * @param event - The toggle event from PrimeNG panel\n   */\n  handleToggle(event: { collapsed: boolean | undefined }): void {\n    this.collapsed = event.collapsed ?? false;\n    this.collapsedChange.emit(this.collapsed);\n    this.toggled.emit({ collapsed: this.collapsed });\n  }\n}\n","<p-panel\n  class=\"tk-panel\"\n  [header]=\"header\"\n  [toggleable]=\"toggleable\"\n  [collapsed]=\"collapsed\"\n  (onAfterToggle)=\"handleToggle($event)\">\n  \n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;AAIA;;;;;;;;;;;;;;;;;;AAkBG;MAQU,cAAc,CAAA;AAP3B,IAAA,WAAA,GAAA;AAiBE;;;;;;AAMG;QACM,IAAA,CAAA,UAAU,GAAG,KAAK;AAE3B;;;;;;;AAOG;QACM,IAAA,CAAA,SAAS,GAAG,KAAK;AAE1B;;;;;AAKG;AACO,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,YAAY,EAAW;AAEvD;;;;;;;;;;AAUG;AACO,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,YAAY,EAA0B;AAe/D,IAAA;AAbC;;;;;;;AAOG;AACH,IAAA,YAAY,CAAC,KAAyC,EAAA;QACpD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,KAAK;QACzC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;AACzC,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;IAClD;8GA9DW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC9B3B,ghBAqBA,EAAA,MAAA,EAAA,CAAA,giCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDKY,WAAW,qaAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,YAAA,EAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIzB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,cACR,IAAI,EAAA,OAAA,EACP,CAAC,WAAW,EAAE,aAAa,CAAC,EAAA,QAAA,EAAA,ghBAAA,EAAA,MAAA,EAAA,CAAA,giCAAA,CAAA,EAAA;;sBAYpC;;sBASA;;sBAUA;;sBAQA;;sBAaA;;;AE9EH;;AAEG;;;;"}
+{"version":3,"file":"tekus-design-system-components-panel.mjs","sources":["../../../projects/design-system/components/panel/src/panel.component.ts","../../../projects/design-system/components/panel/src/panel.component.html","../../../projects/design-system/components/panel/tekus-design-system-components-panel.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { PanelModule } from 'primeng/panel';\nimport { IconComponent } from '@tekus/design-system/components/icon';\n\n/**\n * @component PanelComponent\n * @description\n * Panel is a container component with an optional content toggle feature.\n * It wraps PrimeNG's Panel component and provides a consistent design across the application.\n *\n * The panel can be toggled between expanded and collapsed states using the chevron icon\n * in the header. The component uses custom tk-icon for the toggle icons.\n *\n * @usage\n * ```html\n * <tk-panel\n *   header=\"Panel Title\"\n *   [toggleable]=\"true\"\n *   [(collapsed)]=\"isCollapsed\">\n *   <p>Panel content goes here</p>\n * </tk-panel>\n * ```\n */\n@Component({\n  selector: 'tk-panel',\n  imports: [PanelModule, IconComponent],\n  templateUrl: './panel.component.html',\n  styleUrl: './panel.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PanelComponent {\n  /**\n   * @property {string} header\n   * @description\n   * Header text displayed at the top of the panel.\n   *\n   * @default undefined\n   */\n  header = input<string>();\n\n  /**\n   * @property {boolean} toggleable\n   * @description\n   * When enabled, the panel content can be expanded and collapsed.\n   *\n   * @default false\n   */\n  toggleable = input<boolean>(false);\n\n  /**\n   * @property {ModelSignal<boolean>} collapsed\n   * @description\n   * Defines whether the panel is collapsed or expanded.\n   * Supports two-way binding via [(collapsed)].\n   *\n   * @default false\n   */\n  collapsed = model<boolean>(false);\n\n  /**\n   * @event toggled\n   * @description\n   * Callback to invoke when the panel is toggled.\n   * Emits an object with the collapsed state.\n   *\n   * @example\n   * ```html\n   * <tk-panel (toggled)=\"handleToggle($event)\"></tk-panel>\n   * ```\n   */\n  toggled = output<{ collapsed: boolean }>();\n\n  /**\n   * @method handleToggle\n   * @description\n   * Handles the toggle event from the PrimeNG panel.\n   * Updates the collapsed state and emits the appropriate events.\n   *\n   * @param event - The toggle event from PrimeNG panel\n   */\n  handleToggle(event: { collapsed: boolean | undefined }): void {\n    const newState = event.collapsed ?? false;\n    this.collapsed.set(newState);\n    this.toggled.emit({ collapsed: newState });\n  }\n}\n","<p-panel\n  class=\"tk-panel\"\n  [header]=\"header()\"\n  [toggleable]=\"toggleable()\"\n  [collapsed]=\"collapsed()\"\n  (onAfterToggle)=\"handleToggle($event)\">\n\n  <ng-template pTemplate=\"headericons\">\n    @if (toggleable()) {\n      <div class=\"tk-panel-toggle-icon\">\n        @if (collapsed()) {\n          <tk-icon [icon]=\"'chevron-down'\"></tk-icon>\n        } @else {\n          <tk-icon [icon]=\"'chevron-up'\"></tk-icon>\n        }\n      </div>\n    }\n  </ng-template>\n\n  <ng-content></ng-content>\n</p-panel>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;AAIA;;;;;;;;;;;;;;;;;;AAkBG;MAQU,cAAc,CAAA;AAP3B,IAAA,WAAA,GAAA;AAQE;;;;;;AAMG;QACH,IAAA,CAAA,MAAM,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,QAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AAExB;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAU,KAAK,iFAAC;AAElC;;;;;;;AAOG;AACH,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,KAAK,gFAAC;AAEjC;;;;;;;;;;AAUG;QACH,IAAA,CAAA,OAAO,GAAG,MAAM,EAA0B;AAe3C,IAAA;AAbC;;;;;;;AAOG;AACH,IAAA,YAAY,CAAC,KAAyC,EAAA;AACpD,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,IAAI,KAAK;AACzC,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC;QAC5B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;IAC5C;8GAtDW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC9B3B,whBAqBA,EAAA,MAAA,EAAA,CAAA,giCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDIY,WAAW,qaAAE,aAAa,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAKzB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;+BACE,UAAU,EAAA,OAAA,EACX,CAAC,WAAW,EAAE,aAAa,CAAC,EAAA,eAAA,EAGpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,whBAAA,EAAA,MAAA,EAAA,CAAA,giCAAA,CAAA,EAAA;;;AE5BjD;;AAEG;;;;"}