@c80/ui 2.0.0 → 2.0.1

package/esm2022/lib/select/select.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/select/select.component.ts","../../../../../libs/ui/src/lib/select/select.component.html"],"names":[],"mappings":"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","sourcesContent":["import { type ElementRef, ChangeDetectionStrategy, Component, computed, input, output, signal, viewChild } from '@angular/core';\r\nimport type { SelectOption } from './select.types';\r\n\r\nlet uniqueIdCounter = 0;\r\n\r\n/**\r\n *\r\n */\r\n@Component({\r\n  selector: 'c80-select',\r\n  standalone: true,\r\n  imports: [],\r\n  templateUrl: './select.component.html',\r\n  styleUrl: './select.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SelectComponent<T = string> {\r\n  readonly label = input.required<string>();\r\n  /* v8 ignore next */\r\n  readonly placeholder = input<string>('Seleccionar');\r\n  /* v8 ignore next */\r\n  readonly value = input<T | null>(null);\r\n  /* v8 ignore next */\r\n  readonly options = input<SelectOption<T>[]>([]);\r\n  /* v8 ignore next */\r\n  readonly disabled = input<boolean>(false);\r\n  /* v8 ignore next */\r\n  readonly loading = input<boolean>(false);\r\n  /* v8 ignore next */\r\n  readonly emptyMessage = input<string>('No hay opciones disponibles');\r\n  /* v8 ignore next */\r\n  readonly maxHeight = input<string>('300px');\r\n  /* v8 ignore next */\r\n  readonly filterable = input<boolean>(false);\r\n\r\n  readonly valueChange = output<T | null>();\r\n  readonly opened = output<void>();\r\n\r\n  /* v8 ignore next */\r\n  readonly isOpen = signal(false);\r\n  /* v8 ignore next */\r\n  readonly searchTerm = signal<string>('');\r\n  readonly controlId = `c80-select-${++uniqueIdCounter}`;\r\n  readonly searchInput = viewChild<ElementRef<HTMLInputElement>>('searchInput');\r\n\r\n  readonly filteredOptions = computed(() => {\r\n    const term = this.normalizeString(this.searchTerm());\r\n    if (!term || !this.filterable()) {\r\n      return this.options();\r\n    }\r\n    return this.options().filter(opt =>\r\n      opt.label.toLowerCase().includes(term)\r\n    );\r\n  });\r\n\r\n  normalizeString(str: string): string {\r\n    return str.toLowerCase().trim();\r\n  }\r\n\r\n  /**\r\n   *\r\n   */\r\n  toggleDropdown(): void {\r\n    if (this.disabled() || this.loading()) {\r\n      return;\r\n    }\r\n\r\n    const wasOpen = this.isOpen();\r\n    this.isOpen.set(!wasOpen);\r\n\r\n    if (wasOpen) {\r\n      this.clearSearch();\r\n    } else {\r\n      this.opened.emit();\r\n      if (this.filterable()) {\r\n        /* v8 ignore next 2 */\r\n        setTimeout(() => this.searchInput()?.nativeElement.focus(), 0);\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   *\r\n   * @param option\r\n   */\r\n  selectOption(option: SelectOption<T>): void {\r\n    if (option.disabled) {\r\n      return;\r\n    }\r\n\r\n    this.valueChange.emit(option.value);\r\n    this.isOpen.set(false);\r\n  }\r\n\r\n  /**\r\n   *\r\n   */\r\n  selectNull(): void {\r\n    this.valueChange.emit(null);\r\n    this.isOpen.set(false);\r\n  }\r\n\r\n  /**\r\n   *\r\n   * @returns Etiqueta del valor seleccionado o placeholder\r\n   */\r\n  getSelectedLabel(): string {\r\n    const currentValue = this.value();\r\n    if (currentValue === null || currentValue === undefined) {\r\n      return this.placeholder();\r\n    }\r\n\r\n    const selected = this.options().find(opt => opt.value === currentValue);\r\n    return selected?.label ?? this.placeholder();\r\n  }\r\n\r\n  /**\r\n   *\r\n   */\r\n  closeDropdown(): void {\r\n    this.isOpen.set(false);\r\n    this.clearSearch();\r\n  }\r\n\r\n  /**\r\n   *\r\n   * @param term\r\n   */\r\n  onSearchChange(term: string): void {\r\n    this.searchTerm.set(term);\r\n  }\r\n\r\n  /**\r\n   *\r\n   */\r\n  clearSearch(): void {\r\n    this.searchTerm.set('');\r\n  }\r\n}\r\n","<div class=\"k-select\" [class.k-select--disabled]=\"disabled()\" [class.k-select--open]=\"isOpen()\">\r\n  <button type=\"button\" class=\"k-select__control\" [attr.id]=\"controlId\" [attr.aria-label]=\"label()\" [attr.aria-expanded]=\"isOpen()\" [disabled]=\"disabled() || loading()\" (click)=\"toggleDropdown()\" (keydown.enter)=\"toggleDropdown()\"\r\n    (keydown.space)=\"$event.preventDefault(); toggleDropdown()\">\r\n    <span class=\"k-select__value\" [class.k-select__value--placeholder]=\"value() === null\">\r\n      @if (loading()) {\r\n      Cargando...\r\n      } @else {\r\n      {{ getSelectedLabel() }}\r\n      }\r\n    </span>\r\n    <span class=\"k-select__arrow\" [class.k-select__arrow--up]=\"isOpen()\">▼</span>\r\n  </button>\r\n\r\n  @if (isOpen()) {\r\n  <div class=\"k-select__backdrop\" tabindex=\"-1\" (click)=\"closeDropdown()\" (keydown.escape)=\"closeDropdown()\"></div>\r\n  <div class=\"k-select__dropdown\" [style.max-height]=\"maxHeight()\">\r\n    @if (filterable()) {\r\n    <div class=\"k-select__search\">\r\n      <input type=\"text\" class=\"k-select__search-input\" [value]=\"searchTerm()\" (input)=\"onSearchChange($any($event.target).value)\" placeholder=\"Buscar...\" (click)=\"$event.stopPropagation()\" (keydown.escape)=\"closeDropdown()\" #searchInput />\r\n    </div>\r\n    }\r\n\r\n    <button type=\"button\" class=\"k-select__option\" (click)=\"selectNull()\" (keydown.enter)=\"selectNull()\">\r\n      -- {{ placeholder() }} --\r\n    </button>\r\n\r\n    @if (loading()) {\r\n    <button type=\"button\" class=\"k-select__option k-select__option--disabled\" disabled>\r\n      Cargando...\r\n    </button>\r\n    } @else if (filteredOptions().length === 0) {\r\n    <button type=\"button\" class=\"k-select__option k-select__option--disabled\" disabled>\r\n      {{ searchTerm() ? 'No se encontraron resultados' : emptyMessage() }}\r\n    </button>\r\n    } @else {\r\n    @for (option of filteredOptions(); track option.value) {\r\n    <button type=\"button\" class=\"k-select__option\" [class.k-select__option--selected]=\"option.value === value()\" [class.k-select__option--disabled]=\"option.disabled\" [disabled]=\"option.disabled\" (click)=\"selectOption(option)\"\r\n      (keydown.enter)=\"selectOption(option)\">\r\n      {{ option.label }}\r\n    </button>\r\n    }\r\n    }\r\n  </div>\r\n  }\r\n</div>"]}
+{"version":3,"file":"select.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/select/select.component.ts","../../../../../libs/ui/src/lib/select/select.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAmB,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAGhI,IAAI,eAAe,GAAG,CAAC,CAAC;AAExB;;GAEG;AAQH,MAAM,OAAO,eAAe;IACjB,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU,CAAC;IACjC,WAAW,GAAG,KAAK,CAAS,aAAa,kFAAC,CAAC;IAC3C,KAAK,GAAG,KAAK,CAAW,IAAI,4EAAC,CAAC;IAC9B,OAAO,GAAG,KAAK,CAAoB,EAAE,8EAAC,CAAC;IACvC,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC,CAAC;IACjC,OAAO,GAAG,KAAK,CAAU,KAAK,8EAAC,CAAC;IAChC,YAAY,GAAG,KAAK,CAAS,6BAA6B,mFAAC,CAAC;IAC5D,SAAS,GAAG,KAAK,CAAS,OAAO,gFAAC,CAAC;IACnC,UAAU,GAAG,KAAK,CAAU,KAAK,iFAAC,CAAC;IAEnC,WAAW,GAAG,MAAM,EAAY,CAAC;IACjC,MAAM,GAAG,MAAM,EAAQ,CAAC;IAExB,MAAM,GAAG,MAAM,CAAC,KAAK,6EAAC,CAAC;IACvB,UAAU,GAAG,MAAM,CAAS,EAAE,iFAAC,CAAC;IAChC,SAAS,GAAG,cAAc,EAAE,eAAe,EAAE,CAAC;IAC9C,WAAW,GAAG,SAAS,CAA+B,aAAa,kFAAC,CAAC;IAErE,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE;QACvC,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QACrD,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC;YAChC,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;QACxB,CAAC;QACD,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CACjC,GAAG,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CACvC,CAAC;IACJ,CAAC,sFAAC,CAAC;IAEH,eAAe,CAAC,GAAW;QACzB,OAAO,GAAG,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC;IAClC,CAAC;IAED;;OAEG;IACH,cAAc;QACZ,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC9B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC;QAE1B,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC;gBACtB,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,aAAa,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;YACjE,CAAC;QACH,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,YAAY,CAAC,MAAuB;QAClC,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC;IAED;;OAEG;IACH,UAAU;QACR,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC;IAED;;;OAGG;IACH,gBAAgB;QACd,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAClC,IAAI,YAAY,KAAK,IAAI,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;YACxD,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;QAC5B,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,YAAY,CAAC,CAAC;QACxE,OAAO,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;IAC/C,CAAC;IAED;;OAEG;IACH,aAAa;QACX,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACvB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED;;;OAGG;IACH,cAAc,CAAC,IAAY;QACzB,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,WAAW;QACT,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC1B,CAAC;wGA9GU,eAAe;4FAAf,eAAe,u5CCf5B,00EA4CM;;4FD7BO,eAAe;kBAP3B,SAAS;+BACE,YAAY,WACb,EAAE,mBAGM,uBAAuB,CAAC,MAAM;whCAmBgB,aAAa","sourcesContent":["import { type ElementRef, ChangeDetectionStrategy, Component, computed, input, output, signal, viewChild } from '@angular/core';\r\nimport type { SelectOption } from './select.types';\r\n\r\nlet uniqueIdCounter = 0;\r\n\r\n/**\r\n *\r\n */\r\n@Component({\r\n  selector: 'c80-select',\r\n  imports: [],\r\n  templateUrl: './select.component.html',\r\n  styleUrl: './select.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SelectComponent<T = string> {\r\n  readonly label = input.required<string>();\r\n  readonly placeholder = input<string>('Seleccionar');\r\n  readonly value = input<T | null>(null);\r\n  readonly options = input<SelectOption<T>[]>([]);\r\n  readonly disabled = input<boolean>(false);\r\n  readonly loading = input<boolean>(false);\r\n  readonly emptyMessage = input<string>('No hay opciones disponibles');\r\n  readonly maxHeight = input<string>('300px');\r\n  readonly filterable = input<boolean>(false);\r\n\r\n  readonly valueChange = output<T | null>();\r\n  readonly opened = output<void>();\r\n\r\n  readonly isOpen = signal(false);\r\n  readonly searchTerm = signal<string>('');\r\n  readonly controlId = `c80-select-${++uniqueIdCounter}`;\r\n  readonly searchInput = viewChild<ElementRef<HTMLInputElement>>('searchInput');\r\n\r\n  readonly filteredOptions = computed(() => {\r\n    const term = this.normalizeString(this.searchTerm());\r\n    if (!term || !this.filterable()) {\r\n      return this.options();\r\n    }\r\n    return this.options().filter(opt =>\r\n      opt.label.toLowerCase().includes(term)\r\n    );\r\n  });\r\n\r\n  normalizeString(str: string): string {\r\n    return str.toLowerCase().trim();\r\n  }\r\n\r\n  /**\r\n   *\r\n   */\r\n  toggleDropdown(): void {\r\n    if (this.disabled() || this.loading()) {\r\n      return;\r\n    }\r\n\r\n    const wasOpen = this.isOpen();\r\n    this.isOpen.set(!wasOpen);\r\n\r\n    if (wasOpen) {\r\n      this.clearSearch();\r\n    } else {\r\n      this.opened.emit();\r\n      if (this.filterable()) {\r\n        setTimeout(() => this.searchInput()?.nativeElement.focus(), 0);\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   *\r\n   * @param option\r\n   */\r\n  selectOption(option: SelectOption<T>): void {\r\n    if (option.disabled) {\r\n      return;\r\n    }\r\n\r\n    this.valueChange.emit(option.value);\r\n    this.isOpen.set(false);\r\n  }\r\n\r\n  /**\r\n   *\r\n   */\r\n  selectNull(): void {\r\n    this.valueChange.emit(null);\r\n    this.isOpen.set(false);\r\n  }\r\n\r\n  /**\r\n   *\r\n   * @returns Etiqueta del valor seleccionado o placeholder\r\n   */\r\n  getSelectedLabel(): string {\r\n    const currentValue = this.value();\r\n    if (currentValue === null || currentValue === undefined) {\r\n      return this.placeholder();\r\n    }\r\n\r\n    const selected = this.options().find(opt => opt.value === currentValue);\r\n    return selected?.label ?? this.placeholder();\r\n  }\r\n\r\n  /**\r\n   *\r\n   */\r\n  closeDropdown(): void {\r\n    this.isOpen.set(false);\r\n    this.clearSearch();\r\n  }\r\n\r\n  /**\r\n   *\r\n   * @param term\r\n   */\r\n  onSearchChange(term: string): void {\r\n    this.searchTerm.set(term);\r\n  }\r\n\r\n  /**\r\n   *\r\n   */\r\n  clearSearch(): void {\r\n    this.searchTerm.set('');\r\n  }\r\n}\r\n","<div class=\"k-select\" [class.k-select--disabled]=\"disabled()\" [class.k-select--open]=\"isOpen()\">\r\n  <button type=\"button\" class=\"k-select__control\" [attr.id]=\"controlId\" [attr.aria-label]=\"label()\" [attr.aria-expanded]=\"isOpen()\" [disabled]=\"disabled() || loading()\" (click)=\"toggleDropdown()\" (keydown.enter)=\"toggleDropdown()\"\r\n    (keydown.space)=\"$event.preventDefault(); toggleDropdown()\">\r\n    <span class=\"k-select__value\" [class.k-select__value--placeholder]=\"value() === null\">\r\n      @if (loading()) {\r\n      Cargando...\r\n      } @else {\r\n      {{ getSelectedLabel() }}\r\n      }\r\n    </span>\r\n    <span class=\"k-select__arrow\" [class.k-select__arrow--up]=\"isOpen()\">▼</span>\r\n  </button>\r\n\r\n  @if (isOpen()) {\r\n  <div class=\"k-select__backdrop\" tabindex=\"-1\" (click)=\"closeDropdown()\" (keydown.escape)=\"closeDropdown()\"></div>\r\n  <div class=\"k-select__dropdown\" [style.max-height]=\"maxHeight()\">\r\n    @if (filterable()) {\r\n    <div class=\"k-select__search\">\r\n      <input type=\"text\" class=\"k-select__search-input\" [value]=\"searchTerm()\" (input)=\"onSearchChange($any($event.target).value)\" placeholder=\"Buscar...\" (click)=\"$event.stopPropagation()\" (keydown.escape)=\"closeDropdown()\" #searchInput />\r\n    </div>\r\n    }\r\n\r\n    <button type=\"button\" class=\"k-select__option\" (click)=\"selectNull()\" (keydown.enter)=\"selectNull()\">\r\n      -- {{ placeholder() }} --\r\n    </button>\r\n\r\n    @if (loading()) {\r\n    <button type=\"button\" class=\"k-select__option k-select__option--disabled\" disabled>\r\n      Cargando...\r\n    </button>\r\n    } @else if (filteredOptions().length === 0) {\r\n    <button type=\"button\" class=\"k-select__option k-select__option--disabled\" disabled>\r\n      {{ searchTerm() ? 'No se encontraron resultados' : emptyMessage() }}\r\n    </button>\r\n    } @else {\r\n    @for (option of filteredOptions(); track option.value) {\r\n    <button type=\"button\" class=\"k-select__option\" [class.k-select__option--selected]=\"option.value === value()\" [class.k-select__option--disabled]=\"option.disabled\" [disabled]=\"option.disabled\" (click)=\"selectOption(option)\"\r\n      (keydown.enter)=\"selectOption(option)\">\r\n      {{ option.label }}\r\n    </button>\r\n    }\r\n    }\r\n  </div>\r\n  }\r\n</div>"]}

package/esm2022/lib/snackbar/snackbar.component.js

@@ -7,9 +7,7 @@ export class SnackbarComponent {
     elementRef = inject(ElementRef);
     renderer = inject(Renderer2);
     cdr = inject(ChangeDetectorRef);
-    /* v8 ignore next */
     data = signal(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    /* v8 ignore next */
     visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     timerId;
     panelClasses = computed(() => this.data()?.config.panelClass.join(' ') ?? '', ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
@@ -71,6 +69,6 @@ export class SnackbarComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SnackbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c80-snackbar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible() && data(); as snackData) {\n<div class=\"snackbar\" [class]=\"panelClasses()\">\n  <span class=\"snackbar-message\">{{ snackData.message }}</span>\n  @if (snackData.action) {\n  <button class=\"snackbar-action\" type=\"button\" (click)=\"dismiss()\">\n    {{ snackData.action }}\n  </button>\n  }\n</div>\n}", styles: [":host{position:fixed;z-index:9999;pointer-events:none}.snackbar{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;background:var(--color-bg-secondary);color:var(--color-text-primary);border:1px solid var(--color-border-default);border-radius:.5rem;box-shadow:var(--shadow-lg);pointer-events:auto;animation:slideIn .3s ease-out;min-width:20rem;max-width:35rem}.snackbar-message{flex:1;font-size:.875rem;line-height:1.5;font-weight:500}.snackbar-action{background:transparent;border:1px solid var(--color-border-default);color:var(--color-text-secondary);cursor:pointer;font-size:.75rem;font-weight:600;text-transform:uppercase;padding:.375rem .75rem;border-radius:.375rem;transition:all .2s ease;white-space:nowrap}.snackbar-action:hover{background-color:var(--color-bg-hover);border-color:var(--color-border-medium);color:var(--color-text-primary)}.snackbar-action:active{transform:scale(.98)}.notification-success{background:var(--color-bg-success-light);border-color:var(--color-border-success);color:var(--color-text-success)}.notification-success .snackbar-message{color:var(--color-text-success)}.notification-success .snackbar-action{color:var(--color-text-success);border-color:var(--color-border-success)}.notification-success .snackbar-action:hover{background-color:var(--color-bg-success);border-color:var(--color-border-success)}.notification-error{background:var(--color-bg-danger-light);border-color:var(--color-border-danger);color:var(--color-text-danger)}.notification-error .snackbar-message{color:var(--color-text-danger)}.notification-error .snackbar-action{color:var(--color-text-danger);border-color:var(--color-border-danger)}.notification-error .snackbar-action:hover{background-color:var(--color-bg-danger);border-color:var(--color-border-danger)}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
+            args: [{ selector: 'c80-snackbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible() && data(); as snackData) {\n<div class=\"snackbar\" [class]=\"panelClasses()\">\n  <span class=\"snackbar-message\">{{ snackData.message }}</span>\n  @if (snackData.action) {\n  <button class=\"snackbar-action\" type=\"button\" (click)=\"dismiss()\">\n    {{ snackData.action }}\n  </button>\n  }\n</div>\n}", styles: [":host{position:fixed;z-index:9999;pointer-events:none}.snackbar{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;background:var(--color-bg-secondary);color:var(--color-text-primary);border:1px solid var(--color-border-default);border-radius:.5rem;box-shadow:var(--shadow-lg);pointer-events:auto;animation:slideIn .3s ease-out;min-width:20rem;max-width:35rem}.snackbar-message{flex:1;font-size:.875rem;line-height:1.5;font-weight:500}.snackbar-action{background:transparent;border:1px solid var(--color-border-default);color:var(--color-text-secondary);cursor:pointer;font-size:.75rem;font-weight:600;text-transform:uppercase;padding:.375rem .75rem;border-radius:.375rem;transition:all .2s ease;white-space:nowrap}.snackbar-action:hover{background-color:var(--color-bg-hover);border-color:var(--color-border-medium);color:var(--color-text-primary)}.snackbar-action:active{transform:scale(.98)}.notification-success{background:var(--color-bg-success-light);border-color:var(--color-border-success);color:var(--color-text-success)}.notification-success .snackbar-message{color:var(--color-text-success)}.notification-success .snackbar-action{color:var(--color-text-success);border-color:var(--color-border-success)}.notification-success .snackbar-action:hover{background-color:var(--color-bg-success);border-color:var(--color-border-success)}.notification-error{background:var(--color-bg-danger-light);border-color:var(--color-border-danger);color:var(--color-text-danger)}.notification-error .snackbar-message{color:var(--color-text-danger)}.notification-error .snackbar-action{color:var(--color-text-danger);border-color:var(--color-border-danger)}.notification-error .snackbar-action:hover{background-color:var(--color-bg-danger);border-color:var(--color-border-danger)}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }] });
 //# sourceMappingURL=snackbar.component.js.map

package/esm2022/lib/snackbar/snackbar.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/snackbar/snackbar.component.ts","../../../../../libs/ui/src/lib/snackbar/snackbar.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, computed, signal, ElementRef, inject, Renderer2, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';\r\nimport type { SnackbarData } from './snackbar.types';\r\n\r\n/**\r\n *\r\n */\r\n@Component({\r\n  selector: 'c80-snackbar',\r\n  standalone: true,\r\n  templateUrl: './snackbar.component.html',\r\n  styleUrl: './snackbar.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SnackbarComponent {\r\n  private readonly elementRef = inject(ElementRef);\r\n  private readonly renderer = inject(Renderer2);\r\n  private readonly cdr = inject(ChangeDetectorRef);\r\n\r\n  /* v8 ignore next */\r\n  readonly data = signal<SnackbarData | null>(null);\r\n  /* v8 ignore next */\r\n  readonly visible = signal(false);\r\n\r\n  private timerId?: ReturnType<typeof setTimeout>;\r\n\r\n  readonly panelClasses = computed(() => this.data()?.config.panelClass.join(' ') ?? '');\r\n\r\n  /**\r\n   *\r\n   * @param data\r\n   */\r\n  show(data: SnackbarData): void {\r\n    this.clearTimer();\r\n    this.data.set(data);\r\n    this.applyPosition(data.config);\r\n    this.visible.set(true);\r\n\r\n    // Marcar para revisión de cambios con OnPush\r\n    this.cdr.markForCheck();\r\n\r\n    if (data.config.duration > 0) {\r\n      this.timerId = setTimeout(() => this.dismiss(), data.config.duration);\r\n    }\r\n  }\r\n\r\n  /**\r\n   *\r\n   */\r\n  dismiss(): void {\r\n    this.visible.set(false);\r\n    this.clearTimer();\r\n\r\n    // Marcar para revisión de cambios con OnPush\r\n    this.cdr.markForCheck();\r\n  }\r\n\r\n  /**\r\n   *\r\n   */\r\n  private clearTimer(): void {\r\n    if (this.timerId !== undefined) {\r\n      clearTimeout(this.timerId);\r\n      this.timerId = undefined;\r\n    }\r\n  }\r\n\r\n  /**\r\n   *\r\n   * @param config\r\n   */\r\n  private applyPosition(config: SnackbarData['config']): void {\r\n    const host = this.elementRef.nativeElement;\r\n    const { verticalPosition, horizontalPosition } = config;\r\n\r\n    const positions = ['top', 'bottom', 'left', 'right', 'transform'];\r\n    for (const pos of positions) {\r\n      this.renderer.removeStyle(host, pos);\r\n    }\r\n\r\n    this.renderer.setStyle(host, verticalPosition, '1rem');\r\n\r\n    if (horizontalPosition === 'center') {\r\n      this.renderer.setStyle(host, 'left', '50%');\r\n      this.renderer.setStyle(host, 'transform', 'translateX(-50%)');\r\n    } else {\r\n      this.renderer.setStyle(host, horizontalPosition, '1rem');\r\n    }\r\n  }\r\n}\r\n","@if (visible() && data(); as snackData) {\n<div class=\"snackbar\" [class]=\"panelClasses()\">\n  <span class=\"snackbar-message\">{{ snackData.message }}</span>\n  @if (snackData.action) {\n  <button class=\"snackbar-action\" type=\"button\" (click)=\"dismiss()\">\n    {{ snackData.action }}\n  </button>\n  }\n</div>\n}"]}
+{"version":3,"file":"snackbar.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/snackbar/snackbar.component.ts","../../../../../libs/ui/src/lib/snackbar/snackbar.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, computed, signal, ElementRef, inject, Renderer2, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';\r\nimport type { SnackbarData } from './snackbar.types';\r\n\r\n/**\r\n *\r\n */\r\n@Component({\r\n  selector: 'c80-snackbar',\r\n  templateUrl: './snackbar.component.html',\r\n  styleUrl: './snackbar.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SnackbarComponent {\r\n  private readonly elementRef = inject(ElementRef);\r\n  private readonly renderer = inject(Renderer2);\r\n  private readonly cdr = inject(ChangeDetectorRef);\r\n\r\n  readonly data = signal<SnackbarData | null>(null);\r\n  readonly visible = signal(false);\r\n\r\n  private timerId?: ReturnType<typeof setTimeout>;\r\n\r\n  readonly panelClasses = computed(() => this.data()?.config.panelClass.join(' ') ?? '');\r\n\r\n  /**\r\n   *\r\n   * @param data\r\n   */\r\n  show(data: SnackbarData): void {\r\n    this.clearTimer();\r\n    this.data.set(data);\r\n    this.applyPosition(data.config);\r\n    this.visible.set(true);\r\n\r\n    // Marcar para revisión de cambios con OnPush\r\n    this.cdr.markForCheck();\r\n\r\n    if (data.config.duration > 0) {\r\n      this.timerId = setTimeout(() => this.dismiss(), data.config.duration);\r\n    }\r\n  }\r\n\r\n  /**\r\n   *\r\n   */\r\n  dismiss(): void {\r\n    this.visible.set(false);\r\n    this.clearTimer();\r\n\r\n    // Marcar para revisión de cambios con OnPush\r\n    this.cdr.markForCheck();\r\n  }\r\n\r\n  /**\r\n   *\r\n   */\r\n  private clearTimer(): void {\r\n    if (this.timerId !== undefined) {\r\n      clearTimeout(this.timerId);\r\n      this.timerId = undefined;\r\n    }\r\n  }\r\n\r\n  /**\r\n   *\r\n   * @param config\r\n   */\r\n  private applyPosition(config: SnackbarData['config']): void {\r\n    const host = this.elementRef.nativeElement;\r\n    const { verticalPosition, horizontalPosition } = config;\r\n\r\n    const positions = ['top', 'bottom', 'left', 'right', 'transform'];\r\n    for (const pos of positions) {\r\n      this.renderer.removeStyle(host, pos);\r\n    }\r\n\r\n    this.renderer.setStyle(host, verticalPosition, '1rem');\r\n\r\n    if (horizontalPosition === 'center') {\r\n      this.renderer.setStyle(host, 'left', '50%');\r\n      this.renderer.setStyle(host, 'transform', 'translateX(-50%)');\r\n    } else {\r\n      this.renderer.setStyle(host, horizontalPosition, '1rem');\r\n    }\r\n  }\r\n}\r\n","@if (visible() && data(); as snackData) {\n<div class=\"snackbar\" [class]=\"panelClasses()\">\n  <span class=\"snackbar-message\">{{ snackData.message }}</span>\n  @if (snackData.action) {\n  <button class=\"snackbar-action\" type=\"button\" (click)=\"dismiss()\">\n    {{ snackData.action }}\n  </button>\n  }\n</div>\n}"]}

package/esm2022/lib/stat-card/stat-card.component.js

@@ -5,13 +5,12 @@ import * as i0 from "@angular/core";
  *
  */
 export class StatCardComponent {
-    /* v8 ignore next */
     cards = input([], ...(ngDevMode ? [{ debugName: "cards" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: StatCardComponent, isStandalone: true, selector: "c80-stat-card", inputs: { cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"stats-section py-4\">\r\n  @for (card of cards(); track card.text) {\r\n  <div class=\"stat-card\" [style.border-left-color]=\"card.color\">\r\n    <div class=\"stat-card-content\">\r\n      <div class=\"stat-content\">\r\n        <c80-icon [icon]=\"card.icon\" [color]=\"'secondary'\" [size]=\"1.1\" />\r\n        <div class=\"stat-info\">\r\n          <div class=\"stat-number\">{{ card.count }}</div>\r\n          <div class=\"stat-label\">{{ card.text }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [".stats-section{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}.stats-section .stat-card{flex:1;min-width:200px;box-shadow:var(--shadow-sm);transition:box-shadow .3s ease;border-left:4px solid transparent;background:var(--color-bg-primary);color:var(--color-text-primary);border-radius:4px;display:block;position:relative;padding:0;overflow:hidden}.stats-section .stat-card:hover{box-shadow:var(--shadow-md)}.stats-section .stat-card-content{display:block;padding:16px}.stat-content{display:flex;align-items:center;gap:12px}.stat-info .stat-number{font-size:24px;font-weight:700;line-height:1;margin-bottom:4px;color:var(--color-text-secondary)}.stat-info .stat-label{font-size:12px;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.5px}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "c80-icon", inputs: ["icon", "color", "customColor", "disabled", "size", "button", "border", "type", "textLeft", "textRight", "dark"], outputs: ["iconClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: StatCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c80-stat-card', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"stats-section py-4\">\r\n  @for (card of cards(); track card.text) {\r\n  <div class=\"stat-card\" [style.border-left-color]=\"card.color\">\r\n    <div class=\"stat-card-content\">\r\n      <div class=\"stat-content\">\r\n        <c80-icon [icon]=\"card.icon\" [color]=\"'secondary'\" [size]=\"1.1\" />\r\n        <div class=\"stat-info\">\r\n          <div class=\"stat-number\">{{ card.count }}</div>\r\n          <div class=\"stat-label\">{{ card.text }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [".stats-section{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}.stats-section .stat-card{flex:1;min-width:200px;box-shadow:var(--shadow-sm);transition:box-shadow .3s ease;border-left:4px solid transparent;background:var(--color-bg-primary);color:var(--color-text-primary);border-radius:4px;display:block;position:relative;padding:0;overflow:hidden}.stats-section .stat-card:hover{box-shadow:var(--shadow-md)}.stats-section .stat-card-content{display:block;padding:16px}.stat-content{display:flex;align-items:center;gap:12px}.stat-info .stat-number{font-size:24px;font-weight:700;line-height:1;margin-bottom:4px;color:var(--color-text-secondary)}.stat-info .stat-label{font-size:12px;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.5px}\n"] }]
+            args: [{ selector: 'c80-stat-card', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"stats-section py-4\">\r\n  @for (card of cards(); track card.text) {\r\n  <div class=\"stat-card\" [style.border-left-color]=\"card.color\">\r\n    <div class=\"stat-card-content\">\r\n      <div class=\"stat-content\">\r\n        <c80-icon [icon]=\"card.icon\" [color]=\"'secondary'\" [size]=\"1.1\" />\r\n        <div class=\"stat-info\">\r\n          <div class=\"stat-number\">{{ card.count }}</div>\r\n          <div class=\"stat-label\">{{ card.text }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [".stats-section{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}.stats-section .stat-card{flex:1;min-width:200px;box-shadow:var(--shadow-sm);transition:box-shadow .3s ease;border-left:4px solid transparent;background:var(--color-bg-primary);color:var(--color-text-primary);border-radius:4px;display:block;position:relative;padding:0;overflow:hidden}.stats-section .stat-card:hover{box-shadow:var(--shadow-md)}.stats-section .stat-card-content{display:block;padding:16px}.stat-content{display:flex;align-items:center;gap:12px}.stat-info .stat-number{font-size:24px;font-weight:700;line-height:1;margin-bottom:4px;color:var(--color-text-secondary)}.stat-info .stat-label{font-size:12px;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.5px}\n"] }]
         }], propDecorators: { cards: [{ type: i0.Input, args: [{ isSignal: true, alias: "cards", required: false }] }] } });
 //# sourceMappingURL=stat-card.component.js.map

package/esm2022/lib/stat-card/stat-card.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/stat-card/stat-card.component.ts","../../../../../libs/ui/src/lib/stat-card/stat-card.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;AAGxC;;GAEG;AASH,MAAM,OAAO,iBAAiB;IAC5B,oBAAoB;IACX,KAAK,GAAG,KAAK,CAAY,EAAE,4EAAC,CAAC;wGAF3B,iBAAiB;4FAAjB,iBAAiB,6MCf9B,4iBAcM,6zBDJM,aAAa;;4FAKZ,iBAAiB;kBAR7B,SAAS;+BACE,eAAe,cACb,IAAI,WACP,CAAC,aAAa,CAAC,mBAGP,uBAAuB,CAAC,MAAM","sourcesContent":["import { Component, input, ChangeDetectionStrategy } from '@angular/core';\r\nimport { IconComponent } from '../icon';\r\nimport type { CardDef } from './stat-card.types';\r\n\r\n/**\r\n *\r\n */\r\n@Component({\r\n  selector: 'c80-stat-card',\r\n  standalone: true,\r\n  imports: [IconComponent],\r\n  templateUrl: './stat-card.component.html',\r\n  styleUrls: ['./stat-card.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class StatCardComponent {\r\n  /* v8 ignore next */\r\n  readonly cards = input<CardDef[]>([]);\r\n}\r\n","<div class=\"stats-section py-4\">\r\n  @for (card of cards(); track card.text) {\r\n  <div class=\"stat-card\" [style.border-left-color]=\"card.color\">\r\n    <div class=\"stat-card-content\">\r\n      <div class=\"stat-content\">\r\n        <c80-icon [icon]=\"card.icon\" [color]=\"'secondary'\" [size]=\"1.1\" />\r\n        <div class=\"stat-info\">\r\n          <div class=\"stat-number\">{{ card.count }}</div>\r\n          <div class=\"stat-label\">{{ card.text }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>"]}
+{"version":3,"file":"stat-card.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/stat-card/stat-card.component.ts","../../../../../libs/ui/src/lib/stat-card/stat-card.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;AAGxC;;GAEG;AAQH,MAAM,OAAO,iBAAiB;IACnB,KAAK,GAAG,KAAK,CAAY,EAAE,4EAAC,CAAC;wGAD3B,iBAAiB;4FAAjB,iBAAiB,6MCd9B,4iBAcM,6zBDLM,aAAa;;4FAKZ,iBAAiB;kBAP7B,SAAS;+BACE,eAAe,WAChB,CAAC,aAAa,CAAC,mBAGP,uBAAuB,CAAC,MAAM","sourcesContent":["import { Component, input, ChangeDetectionStrategy } from '@angular/core';\r\nimport { IconComponent } from '../icon';\r\nimport type { CardDef } from './stat-card.types';\r\n\r\n/**\r\n *\r\n */\r\n@Component({\r\n  selector: 'c80-stat-card',\r\n  imports: [IconComponent],\r\n  templateUrl: './stat-card.component.html',\r\n  styleUrls: ['./stat-card.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class StatCardComponent {\r\n  readonly cards = input<CardDef[]>([]);\r\n}\r\n","<div class=\"stats-section py-4\">\r\n  @for (card of cards(); track card.text) {\r\n  <div class=\"stat-card\" [style.border-left-color]=\"card.color\">\r\n    <div class=\"stat-card-content\">\r\n      <div class=\"stat-content\">\r\n        <c80-icon [icon]=\"card.icon\" [color]=\"'secondary'\" [size]=\"1.1\" />\r\n        <div class=\"stat-info\">\r\n          <div class=\"stat-number\">{{ card.count }}</div>\r\n          <div class=\"stat-label\">{{ card.text }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>"]}

package/esm2022/lib/tab/c80-tab.component.js

@@ -1,4 +1,4 @@
-import { Component, output, model, ChangeDetectionStrategy, contentChildren } from '@angular/core';
+import { Component, model, ChangeDetectionStrategy, contentChildren } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { C80TabItemDirective } from './directives/c80-tab-item.directive';
 import { C80TabLabelDirective } from './directives/c80-tab-label.directive';
@@ -9,16 +9,13 @@ import * as i0 from "@angular/core";
 export class TabComponent {
     tabs = contentChildren(C80TabItemDirective, ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
     labels = contentChildren(C80TabLabelDirective, ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
-    /* v8 ignore next */
     selectedIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
-    selectedIndexChange = output();
     /**
      *
      * @param index
      */
     onTabClick(index) {
         this.selectedIndex.set(index);
-        this.selectedIndexChange.emit(index);
     }
     /**
      *
@@ -41,10 +38,10 @@ export class TabComponent {
         return label?.template ?? null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TabComponent, isStandalone: true, selector: "c80-tab", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectedIndexChange: "selectedIndexChange" }, queries: [{ propertyName: "tabs", predicate: C80TabItemDirective, isSignal: true }, { propertyName: "labels", predicate: C80TabLabelDirective, isSignal: true }], ngImport: i0, template: "<div class=\"c80-tab-container\">\n  <div class=\"c80-tab-header\">\n    <div class=\"c80-tab-labels\">\n      @for (tab of tabs(); track $index) {\n      <button type=\"button\" class=\"c80-tab-label\" [class.active]=\"selectedIndex() === $index\" (click)=\"onTabClick($index)\">\n        @if (getTabLabel($index); as labelTemplate) {\n        <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n        }\n      </button>\n      }\n    </div>\n  </div>\n\n  <div class=\"c80-tab-body\">\n    @for (tab of tabs(); track $index) {\n    @if (selectedIndex() === $index) {\n    <div class=\"c80-tab-content\">\n      <ng-container *ngTemplateOutlet=\"getTabContent($index)\" />\n    </div>\n    }\n    }\n  </div>\n</div>", styles: [".c80-tab-container{display:flex;flex-direction:column;height:100%}.c80-tab-header{border-bottom:1px solid var(--color-border);background:transparent;margin-bottom:8px}.c80-tab-labels{display:flex;gap:0;width:100%;max-height:40px}.c80-tab-labels button{padding:10px}.c80-tab-label{flex:1;min-width:120px;padding:16px;background:transparent;border:none;border-bottom:1px solid transparent;cursor:pointer;opacity:.7;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;font-weight:500;color:inherit}.c80-tab-label:hover{opacity:.9;background:rgba(var(--color-primary-rgb),.05)}.c80-tab-label.active{opacity:1;border-bottom-color:var(--color-primary);color:var(--color-primary)}.c80-tab-label:focus-visible{outline:none;outline-offset:-2px}.c80-tab-body{flex:1;overflow-y:auto;position:relative}.c80-tab-content{height:100%;animation:fadeIn .2s ease-in;padding:.2rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:768px){.c80-tab-label{min-width:80px;padding:12px 8px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TabComponent, isStandalone: true, selector: "c80-tab", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange" }, queries: [{ propertyName: "tabs", predicate: C80TabItemDirective, isSignal: true }, { propertyName: "labels", predicate: C80TabLabelDirective, isSignal: true }], ngImport: i0, template: "<div class=\"c80-tab-container\">\n  <div class=\"c80-tab-header\">\n    <div class=\"c80-tab-labels\">\n      @for (tab of tabs(); track $index) {\n      <button type=\"button\" class=\"c80-tab-label\" [class.active]=\"selectedIndex() === $index\" (click)=\"onTabClick($index)\">\n        @if (getTabLabel($index); as labelTemplate) {\n        <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n        }\n      </button>\n      }\n    </div>\n  </div>\n\n  <div class=\"c80-tab-body\">\n    @for (tab of tabs(); track $index) {\n    @if (selectedIndex() === $index) {\n    <div class=\"c80-tab-content\">\n      <ng-container *ngTemplateOutlet=\"getTabContent($index)\" />\n    </div>\n    }\n    }\n  </div>\n</div>", styles: [".c80-tab-container{display:flex;flex-direction:column;height:100%}.c80-tab-header{border-bottom:1px solid var(--color-border);background:transparent;margin-bottom:8px}.c80-tab-labels{display:flex;gap:0;width:100%;max-height:40px}.c80-tab-labels button{padding:10px}.c80-tab-label{flex:1;min-width:120px;padding:16px;background:transparent;border:none;border-bottom:1px solid transparent;cursor:pointer;opacity:.7;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;font-weight:500;color:inherit}.c80-tab-label:hover{opacity:.9;background:rgba(var(--color-primary-rgb),.05)}.c80-tab-label.active{opacity:1;border-bottom-color:var(--color-primary);color:var(--color-primary)}.c80-tab-label:focus-visible{outline:none;outline-offset:-2px}.c80-tab-body{flex:1;overflow-y:auto;position:relative}.c80-tab-content{height:100%;animation:fadeIn .2s ease-in;padding:.2rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:768px){.c80-tab-label{min-width:80px;padding:12px 8px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c80-tab', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c80-tab-container\">\n  <div class=\"c80-tab-header\">\n    <div class=\"c80-tab-labels\">\n      @for (tab of tabs(); track $index) {\n      <button type=\"button\" class=\"c80-tab-label\" [class.active]=\"selectedIndex() === $index\" (click)=\"onTabClick($index)\">\n        @if (getTabLabel($index); as labelTemplate) {\n        <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n        }\n      </button>\n      }\n    </div>\n  </div>\n\n  <div class=\"c80-tab-body\">\n    @for (tab of tabs(); track $index) {\n    @if (selectedIndex() === $index) {\n    <div class=\"c80-tab-content\">\n      <ng-container *ngTemplateOutlet=\"getTabContent($index)\" />\n    </div>\n    }\n    }\n  </div>\n</div>", styles: [".c80-tab-container{display:flex;flex-direction:column;height:100%}.c80-tab-header{border-bottom:1px solid var(--color-border);background:transparent;margin-bottom:8px}.c80-tab-labels{display:flex;gap:0;width:100%;max-height:40px}.c80-tab-labels button{padding:10px}.c80-tab-label{flex:1;min-width:120px;padding:16px;background:transparent;border:none;border-bottom:1px solid transparent;cursor:pointer;opacity:.7;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;font-weight:500;color:inherit}.c80-tab-label:hover{opacity:.9;background:rgba(var(--color-primary-rgb),.05)}.c80-tab-label.active{opacity:1;border-bottom-color:var(--color-primary);color:var(--color-primary)}.c80-tab-label:focus-visible{outline:none;outline-offset:-2px}.c80-tab-body{flex:1;overflow-y:auto;position:relative}.c80-tab-content{height:100%;animation:fadeIn .2s ease-in;padding:.2rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:768px){.c80-tab-label{min-width:80px;padding:12px 8px}}\n"] }]
-        }], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => C80TabItemDirective), { isSignal: true }] }], labels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => C80TabLabelDirective), { isSignal: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], selectedIndexChange: [{ type: i0.Output, args: ["selectedIndexChange"] }] } });
+            args: [{ selector: 'c80-tab', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c80-tab-container\">\n  <div class=\"c80-tab-header\">\n    <div class=\"c80-tab-labels\">\n      @for (tab of tabs(); track $index) {\n      <button type=\"button\" class=\"c80-tab-label\" [class.active]=\"selectedIndex() === $index\" (click)=\"onTabClick($index)\">\n        @if (getTabLabel($index); as labelTemplate) {\n        <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n        }\n      </button>\n      }\n    </div>\n  </div>\n\n  <div class=\"c80-tab-body\">\n    @for (tab of tabs(); track $index) {\n    @if (selectedIndex() === $index) {\n    <div class=\"c80-tab-content\">\n      <ng-container *ngTemplateOutlet=\"getTabContent($index)\" />\n    </div>\n    }\n    }\n  </div>\n</div>", styles: [".c80-tab-container{display:flex;flex-direction:column;height:100%}.c80-tab-header{border-bottom:1px solid var(--color-border);background:transparent;margin-bottom:8px}.c80-tab-labels{display:flex;gap:0;width:100%;max-height:40px}.c80-tab-labels button{padding:10px}.c80-tab-label{flex:1;min-width:120px;padding:16px;background:transparent;border:none;border-bottom:1px solid transparent;cursor:pointer;opacity:.7;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;font-weight:500;color:inherit}.c80-tab-label:hover{opacity:.9;background:rgba(var(--color-primary-rgb),.05)}.c80-tab-label.active{opacity:1;border-bottom-color:var(--color-primary);color:var(--color-primary)}.c80-tab-label:focus-visible{outline:none;outline-offset:-2px}.c80-tab-body{flex:1;overflow-y:auto;position:relative}.c80-tab-content{height:100%;animation:fadeIn .2s ease-in;padding:.2rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:768px){.c80-tab-label{min-width:80px;padding:12px 8px}}\n"] }]
+        }], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => C80TabItemDirective), { isSignal: true }] }], labels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => C80TabLabelDirective), { isSignal: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }] } });
 //# sourceMappingURL=c80-tab.component.js.map

package/esm2022/lib/tab/c80-tab.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"c80-tab.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/tab/c80-tab.component.ts","../../../../../libs/ui/src/lib/tab/c80-tab.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,uBAAuB,EAAE,eAAe,EAAoB,MAAM,eAAe,CAAC;AACrH,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;;AAE5E;;GAEG;AASH,MAAM,OAAO,YAAY;IACd,IAAI,GAAG,eAAe,CAAsB,mBAAmB,2EAAC,CAAC;IACjE,MAAM,GAAG,eAAe,CAAuB,oBAAoB,6EAAC,CAAC;IAE9E,oBAAoB;IACX,aAAa,GAAG,KAAK,CAAS,CAAC,oFAAC,CAAC;IACjC,mBAAmB,GAAG,MAAM,EAAU,CAAC;IAEhD;;;OAGG;IACH,UAAU,CAAC,KAAa;QACtB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC;IAED;;;;OAIG;IACH,aAAa,CAAC,KAAa;QACzB,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QAC5B,MAAM,GAAG,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;QAC3B,OAAO,GAAG,EAAE,OAAO,IAAI,IAAI,CAAC;IAC9B,CAAC;IAED;;;;OAIG;IACH,WAAW,CAAC,KAAa;QACvB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAChC,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;QAC/B,OAAO,KAAK,EAAE,QAAQ,IAAI,IAAI,CAAC;IACjC,CAAC;wGArCU,YAAY;4FAAZ,YAAY,mVAC8B,mBAAmB,yDAChB,oBAAoB,6CClB9E,mtBAsBM,glCDXM,gBAAgB;;4FAKf,YAAY;kBARxB,SAAS;+BACE,SAAS,cACP,IAAI,WACP,CAAC,gBAAgB,CAAC,mBAGV,uBAAuB,CAAC,MAAM;4FAGM,mBAAmB,2FAChB,oBAAoB","sourcesContent":["import { Component, output, model, ChangeDetectionStrategy, contentChildren, type TemplateRef } from '@angular/core';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { C80TabItemDirective } from './directives/c80-tab-item.directive';\r\nimport { C80TabLabelDirective } from './directives/c80-tab-label.directive';\r\n\r\n/**\r\n *\r\n */\r\n@Component({\r\n  selector: 'c80-tab',\r\n  standalone: true,\r\n  imports: [NgTemplateOutlet],\r\n  templateUrl: './c80-tab.component.html',\r\n  styleUrl: './c80-tab.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class TabComponent {\r\n  readonly tabs = contentChildren<C80TabItemDirective>(C80TabItemDirective);\r\n  readonly labels = contentChildren<C80TabLabelDirective>(C80TabLabelDirective);\r\n\r\n  /* v8 ignore next */\r\n  readonly selectedIndex = model<number>(0);\r\n  readonly selectedIndexChange = output<number>();\r\n\r\n  /**\r\n   *\r\n   * @param index\r\n   */\r\n  onTabClick(index: number): void {\r\n    this.selectedIndex.set(index);\r\n    this.selectedIndexChange.emit(index);\r\n  }\r\n\r\n  /**\r\n   *\r\n   * @param index\r\n   * @returns Template del contenido del tab o null\r\n   */\r\n  getTabContent(index: number): TemplateRef<unknown> | null {\r\n    const tabList = this.tabs();\r\n    const tab = tabList[index];\r\n    return tab?.content ?? null;\r\n  }\r\n\r\n  /**\r\n   *\r\n   * @param index\r\n   * @returns Template de la etiqueta del tab o null\r\n   */\r\n  getTabLabel(index: number): TemplateRef<unknown> | null {\r\n    const labelList = this.labels();\r\n    const label = labelList[index];\r\n    return label?.template ?? null;\r\n  }\r\n}\r\n","<div class=\"c80-tab-container\">\n  <div class=\"c80-tab-header\">\n    <div class=\"c80-tab-labels\">\n      @for (tab of tabs(); track $index) {\n      <button type=\"button\" class=\"c80-tab-label\" [class.active]=\"selectedIndex() === $index\" (click)=\"onTabClick($index)\">\n        @if (getTabLabel($index); as labelTemplate) {\n        <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n        }\n      </button>\n      }\n    </div>\n  </div>\n\n  <div class=\"c80-tab-body\">\n    @for (tab of tabs(); track $index) {\n    @if (selectedIndex() === $index) {\n    <div class=\"c80-tab-content\">\n      <ng-container *ngTemplateOutlet=\"getTabContent($index)\" />\n    </div>\n    }\n    }\n  </div>\n</div>"]}
+{"version":3,"file":"c80-tab.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/tab/c80-tab.component.ts","../../../../../libs/ui/src/lib/tab/c80-tab.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,uBAAuB,EAAE,eAAe,EAAoB,MAAM,eAAe,CAAC;AAC7G,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;;AAE5E;;GAEG;AAQH,MAAM,OAAO,YAAY;IACd,IAAI,GAAG,eAAe,CAAsB,mBAAmB,2EAAC,CAAC;IACjE,MAAM,GAAG,eAAe,CAAuB,oBAAoB,6EAAC,CAAC;IAErE,aAAa,GAAG,KAAK,CAAS,CAAC,oFAAC,CAAC;IAE1C;;;OAGG;IACH,UAAU,CAAC,KAAa;QACtB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;IAED;;;;OAIG;IACH,aAAa,CAAC,KAAa;QACzB,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QAC5B,MAAM,GAAG,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;QAC3B,OAAO,GAAG,EAAE,OAAO,IAAI,IAAI,CAAC;IAC9B,CAAC;IAED;;;;OAIG;IACH,WAAW,CAAC,KAAa;QACvB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAChC,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;QAC/B,OAAO,KAAK,EAAE,QAAQ,IAAI,IAAI,CAAC;IACjC,CAAC;wGAlCU,YAAY;4FAAZ,YAAY,uSAC8B,mBAAmB,yDAChB,oBAAoB,6CCjB9E,mtBAsBM,glCDZM,gBAAgB;;4FAKf,YAAY;kBAPxB,SAAS;+BACE,SAAS,WACV,CAAC,gBAAgB,CAAC,mBAGV,uBAAuB,CAAC,MAAM;4FAGM,mBAAmB,2FAChB,oBAAoB","sourcesContent":["import { Component, model, ChangeDetectionStrategy, contentChildren, type TemplateRef } from '@angular/core';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { C80TabItemDirective } from './directives/c80-tab-item.directive';\r\nimport { C80TabLabelDirective } from './directives/c80-tab-label.directive';\r\n\r\n/**\r\n *\r\n */\r\n@Component({\r\n  selector: 'c80-tab',\r\n  imports: [NgTemplateOutlet],\r\n  templateUrl: './c80-tab.component.html',\r\n  styleUrl: './c80-tab.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class TabComponent {\r\n  readonly tabs = contentChildren<C80TabItemDirective>(C80TabItemDirective);\r\n  readonly labels = contentChildren<C80TabLabelDirective>(C80TabLabelDirective);\r\n\r\n  readonly selectedIndex = model<number>(0);\r\n\r\n  /**\r\n   *\r\n   * @param index\r\n   */\r\n  onTabClick(index: number): void {\r\n    this.selectedIndex.set(index);\r\n  }\r\n\r\n  /**\r\n   *\r\n   * @param index\r\n   * @returns Template del contenido del tab o null\r\n   */\r\n  getTabContent(index: number): TemplateRef<unknown> | null {\r\n    const tabList = this.tabs();\r\n    const tab = tabList[index];\r\n    return tab?.content ?? null;\r\n  }\r\n\r\n  /**\r\n   *\r\n   * @param index\r\n   * @returns Template de la etiqueta del tab o null\r\n   */\r\n  getTabLabel(index: number): TemplateRef<unknown> | null {\r\n    const labelList = this.labels();\r\n    const label = labelList[index];\r\n    return label?.template ?? null;\r\n  }\r\n}\r\n","<div class=\"c80-tab-container\">\n  <div class=\"c80-tab-header\">\n    <div class=\"c80-tab-labels\">\n      @for (tab of tabs(); track $index) {\n      <button type=\"button\" class=\"c80-tab-label\" [class.active]=\"selectedIndex() === $index\" (click)=\"onTabClick($index)\">\n        @if (getTabLabel($index); as labelTemplate) {\n        <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n        }\n      </button>\n      }\n    </div>\n  </div>\n\n  <div class=\"c80-tab-body\">\n    @for (tab of tabs(); track $index) {\n    @if (selectedIndex() === $index) {\n    <div class=\"c80-tab-content\">\n      <ng-container *ngTemplateOutlet=\"getTabContent($index)\" />\n    </div>\n    }\n    }\n  </div>\n</div>"]}

package/esm2022/lib/tab/directives/c80-tab-item.directive.js

@@ -13,7 +13,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[tabItem]',
-                    standalone: true,
                 }]
         }] });
 //# sourceMappingURL=c80-tab-item.directive.js.map

package/esm2022/lib/tab/directives/c80-tab-item.directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"c80-tab-item.directive.js","sourceRoot":"","sources":["../../../../../../libs/ui/src/lib/tab/directives/c80-tab-item.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;AAE/D;;GAEG;AAMH,MAAM,OAAO,mBAAmB;IACrB,OAAO,GAAG,MAAM,CAAC,CAAA,WAAoB,CAAA,CAAC,CAAC;wGADrC,mBAAmB;4FAAnB,mBAAmB;;4FAAnB,mBAAmB;kBAL/B,SAAS;mBAAC;oBACT,8DAA8D;oBAC9D,QAAQ,EAAE,WAAW;oBACrB,UAAU,EAAE,IAAI;iBACjB","sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n/**\n *\n */\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: '[tabItem]',\n  standalone: true,\n})\nexport class C80TabItemDirective {\n  readonly content = inject(TemplateRef<unknown>);\n}\n"]}
+{"version":3,"file":"c80-tab-item.directive.js","sourceRoot":"","sources":["../../../../../../libs/ui/src/lib/tab/directives/c80-tab-item.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;AAE/D;;GAEG;AAKH,MAAM,OAAO,mBAAmB;IACrB,OAAO,GAAG,MAAM,CAAC,CAAA,WAAoB,CAAA,CAAC,CAAC;wGADrC,mBAAmB;4FAAnB,mBAAmB;;4FAAnB,mBAAmB;kBAJ/B,SAAS;mBAAC;oBACT,8DAA8D;oBAC9D,QAAQ,EAAE,WAAW;iBACtB","sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n/**\n *\n */\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: '[tabItem]',\n})\nexport class C80TabItemDirective {\n  readonly content = inject(TemplateRef<unknown>);\n}\n"]}

package/esm2022/lib/tab/directives/c80-tab-label.directive.js

@@ -13,7 +13,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[tabLabel]',
-                    standalone: true,
                 }]
         }] });
 //# sourceMappingURL=c80-tab-label.directive.js.map

package/esm2022/lib/tab/directives/c80-tab-label.directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"c80-tab-label.directive.js","sourceRoot":"","sources":["../../../../../../libs/ui/src/lib/tab/directives/c80-tab-label.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;AAE/D;;GAEG;AAMH,MAAM,OAAO,oBAAoB;IACtB,QAAQ,GAAG,MAAM,CAAC,CAAA,WAAoB,CAAA,CAAC,CAAC;wGADtC,oBAAoB;4FAApB,oBAAoB;;4FAApB,oBAAoB;kBALhC,SAAS;mBAAC;oBACT,8DAA8D;oBAC9D,QAAQ,EAAE,YAAY;oBACtB,UAAU,EAAE,IAAI;iBACjB","sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n/**\n *\n */\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: '[tabLabel]',\n  standalone: true,\n})\nexport class C80TabLabelDirective {\n  readonly template = inject(TemplateRef<unknown>);\n}\n"]}
+{"version":3,"file":"c80-tab-label.directive.js","sourceRoot":"","sources":["../../../../../../libs/ui/src/lib/tab/directives/c80-tab-label.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;AAE/D;;GAEG;AAKH,MAAM,OAAO,oBAAoB;IACtB,QAAQ,GAAG,MAAM,CAAC,CAAA,WAAoB,CAAA,CAAC,CAAC;wGADtC,oBAAoB;4FAApB,oBAAoB;;4FAApB,oBAAoB;kBAJhC,SAAS;mBAAC;oBACT,8DAA8D;oBAC9D,QAAQ,EAAE,YAAY;iBACvB","sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n/**\n *\n */\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: '[tabLabel]',\n})\nexport class C80TabLabelDirective {\n  readonly template = inject(TemplateRef<unknown>);\n}\n"]}

package/esm2022/lib/tab/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC","sourcesContent":["export { TabComponent } from './c80-tab.component';\nexport { C80TabItemDirective } from './directives/c80-tab-item.directive';\nexport { C80TabLabelDirective } from './directives/c80-tab-label.directive';\nexport type { C80Tab } from './c80-tab.types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC","sourcesContent":["export { TabComponent } from './c80-tab.component';\nexport { C80TabItemDirective } from './directives/c80-tab-item.directive';\nexport { C80TabLabelDirective } from './directives/c80-tab-label.directive';\n"]}

package/esm2022/lib/table/table.component.js

@@ -1,5 +1,5 @@
 import { Component, ChangeDetectionStrategy, input, signal, computed, output, inject, effect, } from '@angular/core';
-import { IconComponent } from '../icon';
+import { IconComponent, THEME_DARK_COLOR } from '../icon';
 import { TableColumnVisibilityService } from './table-column-visibility.service';
 import { TableDataUtilsService } from './table-data-utils.service';
 import { TableDataConverterService } from './table-data-converter.service';
@@ -133,7 +133,6 @@ import * as i0 from "@angular/core";
  * - customActions con custom → Botón personalizado emite evento
  */ export class TableComponent {
     // Servicios inyectados
-    /* v8 ignore next 7 */
     modalService = inject(ModalService);
     visibilityService = inject(TableColumnVisibilityService);
     dataUtils = inject(TableDataUtilsService);
@@ -142,58 +141,40 @@ import * as i0 from "@angular/core";
     crudService = inject(TableCrudStateService);
     paginationService = inject(TablePaginationService);
     // Inputs
-    /* v8 ignore next */
     data$ = input.required(...(ngDevMode ? [{ debugName: "data$" }] : /* istanbul ignore next */ []));
-    /* v8 ignore next */
     columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
-    /* v8 ignore next */
     inputValues$ = input(...(ngDevMode ? [undefined, { debugName: "inputValues$" }] : /* istanbul ignore next */ [])); // Observable para actualizar valores de inputs dinámicamente en creación/edición
-    /* v8 ignore next */
     customActions = input([], ...(ngDevMode ? [{ debugName: "customActions" }] : /* istanbul ignore next */ [])); // Acciones personalizadas dinámicas
-    /* v8 ignore next */
     size = input(0, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ [])); // Tamaño de la tabla (0 = sin límite, > 0 aplica max-height)
-    /* v8 ignore next */
     multiple = input(true, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ [])); // Permite selección múltiple por defecto
-    /* v8 ignore next */
     rowId = input('id', ...(ngDevMode ? [{ debugName: "rowId" }] : /* istanbul ignore next */ [])); // Accessor de la PK de cada fila (default 'id'); usar si la entidad no usa 'id'
-    /* v8 ignore next */
     searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {}), transform: booleanAttribute }); // Si es true, muestra barra de búsqueda
-    /* v8 ignore next */
     allowSelection = input(false, { ...(ngDevMode ? { debugName: "allowSelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute }); // Si es true, permite selección de filas
-    /* v8 ignore next */
     noConfirm = input(false, { ...(ngDevMode ? { debugName: "noConfirm" } : /* istanbul ignore next */ {}), transform: booleanAttribute }); // Si es true, no muestra confirmaciones modales
-    /* v8 ignore next */
     paginated = input(false, { ...(ngDevMode ? { debugName: "paginated" } : /* istanbul ignore next */ {}), transform: booleanAttribute }); // Si es true, habilita paginación con limit/offset
-    /* v8 ignore next */
     paginationConfig = input({ pageSize: 10 }, ...(ngDevMode ? [{ debugName: "paginationConfig" }] : /* istanbul ignore next */ [])); // Configuración de paginación (tamaño de página, total items)
     // Outputs - Acciones unificadas (Angular 18+ output API)
-    /* v8 ignore next */
     actionClick = output(); // Output unificado para TODAS las acciones (CRUD + custom)
     // Outputs - Utilidades
-    /* v8 ignore next 4 */
     searchTerm = output();
     errorEvent = output();
     selectable = output();
     paginationChange = output(); // Output para cambios de paginación (page, limit, offset)
     // Estado principal
-    /* v8 ignore next 2 */
     data = signal([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     searchValue = signal('', ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
     // Estado de selección (delegado a servicio)
-    /* v8 ignore next 4 */
     selectionState = this.selectionService.createSelectionState((item) => item[this.rowId()]);
     selectedItems = this.selectionState.selectedItems;
     selectAllChecked = this.selectionState.selectAllChecked;
     selectAllIndeterminate = this.selectionState.selectAllIndeterminate;
     // Estado CRUD (delegado a servicio)
-    /* v8 ignore next 5 */
     crudState = this.crudService.createCrudState();
     creating = this.crudState.creating;
     newRow = this.crudState.newRow;
     editing = this.crudState.editing;
     editRow = this.crudState.editRow;
     // Estado de paginación (delegado a servicio)
-    /* v8 ignore next 7 */
     paginationState = this.paginationService.createPaginationState(this.paginationConfig().pageSize ?? 10);
     currentPage = this.paginationState.currentPage;
     pageSize = this.paginationState.pageSize;
@@ -201,16 +182,13 @@ import * as i0 from "@angular/core";
     hasNextPage = this.paginationState.hasNextPage;
     hasPrevPage = this.paginationState.hasPrevPage;
     // Keys visibles computed automáticamente
-    /* v8 ignore next 7 */
     keys = computed(() => this.visibilityService.updateVisibleKeys(this.columns(), { data: this.data(), creating: this.creating(), editing: this.editing() }), ...(ngDevMode ? [{ debugName: "keys" }] : /* istanbul ignore next */ []));
     // Computed - Detecta acciones CRUD y custom
-    /* v8 ignore next 5 */
     hasAnyActions = computed(() => this.customActions().length > 0, ...(ngDevMode ? [{ debugName: "hasAnyActions" }] : /* istanbul ignore next */ []));
     hasCrudCreate = computed(() => this.customActions().some(a => a.name === 'create'), ...(ngDevMode ? [{ debugName: "hasCrudCreate" }] : /* istanbul ignore next */ []));
     hasCrudUpdate = computed(() => this.customActions().some(a => a.name === 'update'), ...(ngDevMode ? [{ debugName: "hasCrudUpdate" }] : /* istanbul ignore next */ []));
     hasCrudDelete = computed(() => this.customActions().some(a => a.name === 'delete'), ...(ngDevMode ? [{ debugName: "hasCrudDelete" }] : /* istanbul ignore next */ []));
     hasCrudCancel = computed(() => this.customActions().some(a => a.name === 'cancel'), ...(ngDevMode ? [{ debugName: "hasCrudCancel" }] : /* istanbul ignore next */ []));
-    /* v8 ignore next 5 */
     shouldShowCreateButton = computed(() => {
         const createAction = this.customActions().find(a => a.name === 'create');
         if (!createAction)
@@ -218,14 +196,11 @@ import * as i0 from "@angular/core";
         return !createAction.condition || createAction.condition({}, this.data());
     }, ...(ngDevMode ? [{ debugName: "shouldShowCreateButton" }] : /* istanbul ignore next */ []));
     // Table max height computed
-    /* v8 ignore next 3 */
     tableMaxHeight = computed(() => this.dataUtils.getTableMaxHeight(this.size()), ...(ngDevMode ? [{ debugName: "tableMaxHeight" }] : /* istanbul ignore next */ []));
-    /* v8 ignore next 2 */
     dataSub;
     inputValuesSub;
     constructor() {
         // Sincronizar totalItems del paginationConfig con el estado de paginación
-        /* v8 ignore next 4 */
         effect(() => {
             const config = this.paginationConfig();
             if (config.totalItems !== undefined && this.paginated()) {
@@ -236,7 +211,6 @@ import * as i0 from "@angular/core";
         // DESPUÉS de la construcción, así que el estado se inicializa con el default;
         // este effect reaplica el pageSize real del padre cuando cambia (sin resetear
         // la página por otros cambios del config como totalItems).
-        /* v8 ignore next 8 */
         let lastPageSize;
         effect(() => {
             const size = this.paginationConfig().pageSize ?? 10;
@@ -554,13 +528,13 @@ import * as i0 from "@angular/core";
             return action.color;
         }
         // Para acciones sin color explícito, usar el color de dark mode
-        return '#e9ecef';
+        return THEME_DARK_COLOR;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "c80-table", inputs: { data$: { classPropertyName: "data$", publicName: "data$", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, inputValues$: { classPropertyName: "inputValues$", publicName: "inputValues$", isSignal: true, isRequired: false, transformFunction: null }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, rowId: { classPropertyName: "rowId", publicName: "rowId", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, allowSelection: { classPropertyName: "allowSelection", publicName: "allowSelection", isSignal: true, isRequired: false, transformFunction: null }, noConfirm: { classPropertyName: "noConfirm", publicName: "noConfirm", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, paginationConfig: { classPropertyName: "paginationConfig", publicName: "paginationConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", searchTerm: "searchTerm", errorEvent: "errorEvent", selectable: "selectable", paginationChange: "paginationChange" }, ngImport: i0, template: "<div class=\"table-responsive\" [style.max-height]=\"tableMaxHeight()\" [style.overflow-y]=\"size() > 0 ? 'auto' : 'visible'\">\r\n  <!-- Search Bar -->\r\n  @if (searchable()) {\r\n  <div class=\"search-container\">\r\n    <div class=\"search-input-wrapper\">\r\n      <div class=\"input-group\">\r\n        <span class=\"input-group-text\">\r\n          <c80-icon icon=\"search\" [size]=\".65\" [button]=\"false\" />\r\n        </span>\r\n        <input type=\"text\" class=\"form-control search-input\" placeholder=\"Buscar...\" [value]=\"searchValue()\" (input)=\"onSearchInput($event)\" aria-label=\"Buscar en la tabla\" />\r\n        @if (searchValue()) {\r\n        <button class=\"btn btn-outline-secondary btn-borrar\" type=\"button\" (click)=\"clearSearch()\" title=\"Limpiar b\u00FAsqueda\">\r\n          <c80-icon icon=\"cancel\" [size]=\".6\" />\r\n        </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  <table class=\"table table-bordered table-hover align-middle\">\r\n    <thead class=\"thead table-light sticky-header\">\r\n      <tr>\r\n        @if (allowSelection() && data().length !== 0) {\r\n        <th class=\"text-center selection-column\">\r\n          @if (multiple()) {\r\n          <input type=\"checkbox\" [checked]=\"selectAllChecked()\" [indeterminate]=\"selectAllIndeterminate()\" (change)=\"toggleSelectAll()\" aria-label=\"Seleccionar todo\" />\r\n          }\r\n        </th>\r\n        }\r\n        @for (col of columns(); track col) {\r\n        @if (isColumnVisibleInHeader(col)) {\r\n        @if (col.type === 'boolean') {\r\n        <th class=\"text-center boolean-column\">{{ col.label }}</th>\r\n        }\r\n        @else if (col.type === 'number' || col.type === 'integer') {\r\n        <th class=\"text-center number-column\">{{ col.label }}</th>\r\n        }\r\n        @else if (col.type === 'date') {\r\n        <th class=\"text-center date-column\">{{ col.label }}</th>\r\n        }\r\n        @else {\r\n        <th>{{ col.label }}</th>\r\n        }\r\n        }\r\n        }\r\n        @if (hasAnyActions()) {\r\n        <th class=\"table-actions-header\">\r\n          <div class=\"actions-wrapper\">\r\n            <span>Actions</span>\r\n            @if (shouldShowCreateButton()) {\r\n            <c80-icon button icon=\"add\" [disabled]=\"creating()\" title=\"Agregar\" [size]=\".6\" (iconClick)=\"startCreate()\" />\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (row of data(); track trackById(i, row); let i = $index) {\r\n      <tr>\r\n        @if (allowSelection() && data().length !== 0) {\r\n        <td class=\"text-center selection-column\">\r\n          <input type=\"checkbox\" [checked]=\"isItemSelected(row)\" (change)=\"toggleItemSelection(row)\" [attr.aria-label]=\"'Seleccionar fila ' + (i + 1)\" />\r\n        </td>\r\n        }\r\n        @for (col of columns(); track col) {\r\n        @if (isColumnVisibleForRow(col, row)) {\r\n        @if (col.type === 'boolean') {\r\n        <td class=\"text-center boolean-column\">\r\n          @if (editing() === row['id'] && !col.readOnly) {\r\n          <input type=\"checkbox\" [checked]=\"!!editRow()?.[col.accessor]\" (change)=\"onEditInput($event, col.accessor, col)\" [attr.aria-label]=\"col.label\" />\r\n          }\r\n          @else {\r\n          @if (getCellValue(row, col.accessor) === true) {\r\n          <c80-icon icon=\"check\" [size]=\".7\" />\r\n          <br />\r\n          }\r\n          @else if (getCellValue(row, col.accessor) === false) {\r\n          <c80-icon icon=\"cancel\" [size]=\".7\" />\r\n          <br />\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        @else if (col.type === 'number' || col.type === 'integer') {\r\n        <td class=\"text-center number-column\">\r\n          @if (editing() === row['id'] && !col.readOnly) {\r\n          <input class=\"form-control form-control-sm\" type=\"number\" [value]=\"editRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" [min]=\"col.min\" [max]=\"col.max\" [step]=\"col.type === 'integer' ? '1' : 'any'\"\r\n            (input)=\"onEditInput($event, col.accessor, col)\" />\r\n          }\r\n          @else {\r\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{ getDisplayValue(getCellValue(row,\r\n            col.accessor), col) }}</span>\r\n          }\r\n        </td>\r\n        }\r\n        @else if (col.type === 'date') {\r\n        <td class=\"text-center date-column\">\r\n          @if (editing() === row['id'] && !col.readOnly) {\r\n          <input class=\"form-control form-control-sm\" type=\"datetime-local\" [value]=\"editRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" (input)=\"onEditInput($event, col.accessor, col)\" />\r\n          }\r\n          @else {\r\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{ getDisplayValue(getCellValue(row,\r\n            col.accessor), col) }}</span>\r\n          }\r\n        </td>\r\n        }\r\n        @else {\r\n        <td>\r\n          @if (editing() === row['id'] && !col.readOnly) {\r\n          @if (col.type === 'enum') {\r\n          <select class=\"form-control form-control-sm\" [value]=\"editRow()?.[col.accessor] ?? ''\" (change)=\"onEditInput($event, col.accessor, col)\">\r\n            <option value=\"\">{{ col.label }}</option>\r\n            @for (option of getEnumOptions(col); track option.value) {\r\n            <option [value]=\"option.value\">{{ option.label }}</option>\r\n            }\r\n          </select>\r\n          }\r\n          @else {\r\n          <input class=\"form-control form-control-sm\" [type]=\"col.type === 'password' ? 'password' : 'text'\" [value]=\"editRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" (input)=\"onEditInput($event, col.accessor, col)\" />\r\n          }\r\n          }\r\n          @else {\r\n          @if (col.type === 'password') {\r\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">******</span>\r\n          }\r\n          @else if (col.type === 'enum') {\r\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{\r\n            getEnumDisplayValue(getCellValue(row, col.accessor), col)\r\n            }}</span>\r\n          }\r\n          @else if (getCellValue(row, col.accessor) === true) {\r\n          <c80-icon icon=\"check\" [size]=\".7\" />\r\n          }\r\n          @else if (getCellValue(row, col.accessor) === false) {\r\n          <c80-icon icon=\"cancel\" [size]=\".7\" />\r\n          }\r\n          @else {\r\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{ getDisplayValue(getCellValue(row,\r\n            col.accessor), col) }}</span>\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n        }\r\n        @if (hasAnyActions()) {\r\n        <td class=\"text-end actions-cell\">\r\n          <div class=\"actions-container\" [class.centered-actions]=\"editing() === row['id']\">\r\n            @if (editing() === row['id']) {\r\n            <!-- Modo edici\u00F3n: mostrar guardar y cancelar -->\r\n            @if (hasCrudUpdate()) {\r\n            <c80-icon button icon=\"check\" title=\"Guardar\" (iconClick)=\"saveEdit(row)\" [size]=\".7\" />\r\n            }\r\n            <c80-icon button icon=\"cancel\" color=\"warn\" title=\"Cancelar\" (iconClick)=\"cancelEdit()\" [size]=\".7\" />\r\n            }\r\n            @else {\r\n            @for (action of customActions(); track action.name) {\r\n            @if (shouldShowAction(action, row, data())) {\r\n            <c80-icon button [icon]=\"action.icon\" [customColor]=\"getActionColor(action)\" [color]=\"action.name === 'delete' ? 'warn' : 'primary'\" [title]=\"getActionTooltip(action)\" (iconClick)=\"onDynamicAction(action, row)\" [size]=\".7\" />\r\n            }\r\n            }\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n      }\r\n      @if (creating() && hasCrudCreate()) {\r\n      <tr>\r\n        @if (allowSelection() && data().length !== 0) {\r\n        <td class=\"text-center selection-column\">\r\n          <!-- Empty cell for alignment -->\r\n        </td>\r\n        }\r\n        @for (col of columns(); track col) {\r\n        @if (isColumnVisible(col)) {\r\n        @if (col.type === 'boolean') {\r\n        <td class=\"text-center\">\r\n          @if (!col.readOnly) {\r\n          <input type=\"checkbox\" [checked]=\"!!newRow()?.[col.accessor]\" (change)=\"onInput($event, col.accessor, col)\" [attr.aria-label]=\"col.label\" />\r\n          }\r\n          @else {\r\n          <!-- ReadOnly boolean column in create mode shows empty -->\r\n          <span class=\"text-muted\">-</span>\r\n          }\r\n        </td>\r\n        } @else if (col.type === 'number' || col.type === 'integer') {\r\n        <td class=\"text-center number-column\">\r\n          @if (!col.readOnly) {\r\n          <input class=\"form-control form-control-sm\" type=\"number\" [value]=\"newRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" [min]=\"col.min\" [max]=\"col.max\" [step]=\"col.type === 'integer' ? '1' : 'any'\"\r\n            (input)=\"onInput($event, col.accessor, col)\" />\r\n          }\r\n          @else {\r\n          <!-- ReadOnly number column in create mode shows empty -->\r\n          <span class=\"text-muted\">-</span>\r\n          }\r\n        </td>\r\n        } @else {\r\n        <td>\r\n          @if (!col.readOnly) {\r\n          @if (col.type === 'enum') {\r\n          <select class=\"form-control form-control-sm\" [value]=\"newRow()?.[col.accessor] ?? ''\" (change)=\"onInput($event, col.accessor, col)\">\r\n            <option value=\"\">{{ col.label }}</option>\r\n            @for (option of getEnumOptions(col); track option.value) {\r\n            <option [value]=\"option.value\">{{ option.label }}</option>\r\n            }\r\n          </select>\r\n          }\r\n          @else {\r\n          <input class=\"form-control form-control-sm\" type=\"text\" [value]=\"newRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" (input)=\"onInput($event, col.accessor, col)\" />\r\n          }\r\n          }\r\n          @else {\r\n          <!-- ReadOnly column in create mode shows empty -->\r\n          <span class=\"text-muted\">-</span>\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n        }\r\n        <td class=\"text-end actions-cell\">\r\n          <div class=\"actions-container centered-actions\">\r\n            @if (hasCrudCreate()) {\r\n            <c80-icon button icon=\"check\" title=\"Guardar\" (iconClick)=\"saveCreate()\" [size]=\".7\" />\r\n            }\r\n            <c80-icon button icon=\"cancel\" color=\"warn\" title=\"Cancelar\" (iconClick)=\"cancelCreate()\" [size]=\".7\" />\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n  @if (data().length === 0 && !creating()) {\r\n  <div class=\"text-center text-muted py-3 small\">\r\n    No hay datos para mostrar.\r\n  </div>\r\n  }\r\n\r\n  <!-- Pagination Controls -->\r\n  @if (paginated() && data().length > 0) {\r\n  <div class=\"pagination-container\">\r\n    <div class=\"pagination-info\">\r\n      P\u00E1gina {{ currentPage() }} de {{ totalPages() }}\r\n    </div>\r\n    <div class=\"pagination-controls\">\r\n      <button type=\"button\" class=\"btn btn-sm\" [disabled]=\"!hasPrevPage()\" (click)=\"onPrevPage()\" title=\"P\u00E1gina anterior\">\r\n        <c80-icon icon=\"arrowLeft\" [size]=\".6\" [button]=\"false\" />\r\n      </button>\r\n      <button type=\"button\" class=\"btn btn-sm\" [disabled]=\"!hasNextPage()\" (click)=\"onNextPage()\" title=\"P\u00E1gina siguiente\">\r\n        <c80-icon icon=\"arrowRight\" [size]=\".6\" [button]=\"false\" />\r\n      </button>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n<c80-modal />", styles: ["@charset \"UTF-8\";input[type=checkbox]{width:1.3rem!important;height:1.3rem!important;accent-color:var(--color-icon-danger);background:var(--color-bg-primary);margin:0 .25rem;vertical-align:middle;cursor:pointer}.table-responsive{width:100%;overflow-x:auto}.table-responsive .search-container{margin-bottom:-.06rem}.table-responsive .search-container .search-input-wrapper .input-group .btn-borrar{border-bottom-right-radius:0;border-color:var(--color-border-default);height:32px}.table-responsive .search-container .search-input-wrapper .input-group .input-group-text{background-color:var(--color-bg-secondary);border-color:var(--color-border-default);border-bottom-left-radius:0;color:var(--color-text-secondary);width:56.1px;height:32px;padding:.25rem .5rem}.table-responsive .search-container .search-input-wrapper .input-group .input-group-text c80-icon{display:flex;align-items:center;justify-content:center}.table-responsive .search-container .search-input-wrapper .input-group .search-input{border-color:var(--color-border-default);border-bottom-right-radius:0;font-size:.75rem;height:32px;padding:.25rem .5rem;outline:none!important;background-color:var(--color-bg-primary);color:var(--color-text-primary)}.table-responsive .search-container .search-input-wrapper .input-group .search-input:focus{outline:none!important}.table-responsive .search-container .search-input-wrapper .input-group .search-input::placeholder{color:var(--color-text-muted);font-style:italic}.table-responsive .table{min-width:0px;margin-bottom:0;background-color:var(--color-bg-primary);color:var(--color-text-primary);border-color:var(--color-border-default)}.table-responsive .table.table-bordered,.table-responsive .table.table-bordered th,.table-responsive .table.table-bordered td{border-color:var(--color-border-default)}.table-responsive .table.table-hover tbody tr:hover{background-color:var(--color-bg-hover)!important;color:var(--color-text-primary)}.table-responsive .table.table-hover tbody tr:hover td{background-color:var(--color-bg-hover)}.table-responsive .table .sticky-header{position:sticky;top:0;z-index:10;background-color:var(--color-bg-secondary)!important}.table-responsive .table .sticky-header .table-actions-header{display:table-cell;vertical-align:middle;padding:.2rem .6rem!important;background-color:var(--color-bg-secondary)!important}.table-responsive .table .sticky-header .actions-wrapper{display:flex;align-items:center;justify-content:center;gap:.5rem;height:100%}.table-responsive .table .sticky-header th{max-height:31px!important;vertical-align:middle!important;padding:.2rem .6rem!important;font-size:small!important;background-color:var(--color-bg-secondary)!important;border-bottom:2px solid var(--color-border-default);color:var(--color-text-primary)}.table-responsive .table tbody{background-color:var(--color-bg-primary)}.table-responsive .table tbody td{height:35px!important;min-height:35px!important;max-height:35px!important;vertical-align:middle!important;padding:.2rem .8rem!important;font-size:small;color:var(--color-text-primary);background-color:var(--color-bg-primary);border-color:var(--color-border-default)}.table-responsive .table tbody tr{height:35px!important;min-height:35px!important;max-height:35px!important;cursor:pointer;background-color:var(--color-bg-primary)}.table-responsive .table tbody tr:hover{background-color:var(--color-bg-hover)!important}.table-responsive .table tbody tr:hover td{background-color:var(--color-bg-hover)}.table-responsive .table tbody .text-muted{color:var(--color-text-muted)!important}.table-responsive .table tbody input,.table-responsive .table tbody select{border:1px solid var(--color-border-default);height:100%!important;font-size:smaller!important;background-color:var(--color-bg-primary);color:var(--color-text-primary)}.table-responsive .table tbody input:focus,.table-responsive .table tbody select:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus)}.table-responsive .table tbody input::placeholder,.table-responsive .table tbody select::placeholder{color:var(--color-text-muted)}.table-responsive .table tbody input[type=text],.table-responsive .table tbody input:not([type]){width:100%!important}.table-responsive .table tbody input[type=number]{min-width:80px!important;width:80px!important;text-align:center}.table-responsive .table tbody select{width:100%!important;padding:.25rem .5rem}.table-responsive .table thead th.boolean-column,.table-responsive .table tbody td.boolean-column,.table-responsive .table thead th.selection-column,.table-responsive .table tbody td.selection-column,.table-responsive .table thead th.table-actions-header,.table-responsive .table tbody td.table-actions-header{width:1%;white-space:nowrap}.table-responsive .table thead th.number-column,.table-responsive .table tbody td.number-column{width:1%;white-space:nowrap;text-align:center}.table-responsive .table thead th.number-column input[type=number],.table-responsive .table tbody td.number-column input[type=number]{min-width:80px!important;width:80px!important;text-align:center}.table-responsive .table thead th.date-column,.table-responsive .table tbody td.date-column{width:1%;white-space:nowrap;text-align:center}.table-responsive .table thead th.date-column input[type=datetime-local],.table-responsive .table tbody td.date-column input[type=datetime-local]{min-width:200px!important;width:200px!important;text-align:center}.table-responsive .table .actions-cell{white-space:nowrap;padding:0!important}.table-responsive .table .actions-container{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;width:100%;height:100%}.table-responsive .table .actions-container.centered-actions{justify-content:center}.table-responsive .text-center.text-muted{color:var(--color-text-muted)!important}.table-responsive .btn-outline-secondary{background-color:var(--color-bg-primary);color:var(--color-text-primary);border-color:var(--color-border-default)}.table-responsive .btn-outline-secondary:hover{background-color:var(--color-bg-hover);border-color:var(--color-border-medium)}.table-responsive .btn-outline-secondary:focus{box-shadow:var(--shadow-focus)}.table-responsive .pagination-container{display:flex;justify-content:space-between;align-items:center;padding:.2rem .5rem;background-color:var(--color-bg-secondary);border:1px solid var(--color-border-default);border-top:none;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.table-responsive .pagination-container .pagination-info{font-size:.875rem;color:var(--color-text-secondary);font-weight:500}.table-responsive .pagination-container .pagination-controls{display:flex;gap:.5rem}.table-responsive .pagination-container .pagination-controls button{min-width:36px;height:32px;padding:.25rem .5rem;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-primary);color:var(--color-text-primary);border:none}.table-responsive .pagination-container .pagination-controls button:hover:not(:disabled){background-color:var(--color-bg-hover);border:none}.table-responsive .pagination-container .pagination-controls button:disabled{opacity:.5;cursor:auto;background-color:var(--color-bg-primary);border:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "c80-icon", inputs: ["icon", "color", "customColor", "disabled", "size", "button", "border", "type", "textLeft", "textRight", "dark"], outputs: ["iconClick"] }, { kind: "component", type: ModalComponent, selector: "c80-modal" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c80-table', standalone: true, imports: [IconComponent, ModalComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-responsive\" [style.max-height]=\"tableMaxHeight()\" [style.overflow-y]=\"size() > 0 ? 'auto' : 'visible'\">\r\n  <!-- Search Bar -->\r\n  @if (searchable()) {\r\n  <div class=\"search-container\">\r\n    <div class=\"search-input-wrapper\">\r\n      <div class=\"input-group\">\r\n        <span class=\"input-group-text\">\r\n          <c80-icon icon=\"search\" [size]=\".65\" [button]=\"false\" />\r\n        </span>\r\n        <input type=\"text\" class=\"form-control search-input\" placeholder=\"Buscar...\" [value]=\"searchValue()\" (input)=\"onSearchInput($event)\" aria-label=\"Buscar en la tabla\" />\r\n        @if (searchValue()) {\r\n        <button class=\"btn btn-outline-secondary btn-borrar\" type=\"button\" (click)=\"clearSearch()\" title=\"Limpiar b\u00FAsqueda\">\r\n          <c80-icon icon=\"cancel\" [size]=\".6\" />\r\n        </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  <table class=\"table table-bordered table-hover align-middle\">\r\n    <thead class=\"thead table-light sticky-header\">\r\n      <tr>\r\n        @if (allowSelection() && data().length !== 0) {\r\n        <th class=\"text-center selection-column\">\r\n          @if (multiple()) {\r\n          <input type=\"checkbox\" [checked]=\"selectAllChecked()\" [indeterminate]=\"selectAllIndeterminate()\" (change)=\"toggleSelectAll()\" aria-label=\"Seleccionar todo\" />\r\n          }\r\n        </th>\r\n        }\r\n        @for (col of columns(); track col) {\r\n        @if (isColumnVisibleInHeader(col)) {\r\n        @if (col.type === 'boolean') {\r\n        <th class=\"text-center boolean-column\">{{ col.label }}</th>\r\n        }\r\n        @else if (col.type === 'number' || col.type === 'integer') {\r\n        <th class=\"text-center number-column\">{{ col.label }}</th>\r\n        }\r\n        @else if (col.type === 'date') {\r\n        <th class=\"text-center date-column\">{{ col.label }}</th>\r\n        }\r\n        @else {\r\n        <th>{{ col.label }}</th>\r\n        }\r\n        }\r\n        }\r\n        @if (hasAnyActions()) {\r\n        <th class=\"table-actions-header\">\r\n          <div class=\"actions-wrapper\">\r\n            <span>Actions</span>\r\n            @if (shouldShowCreateButton()) {\r\n            <c80-icon button icon=\"add\" [disabled]=\"creating()\" title=\"Agregar\" [size]=\".6\" (iconClick)=\"startCreate()\" />\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (row of data(); track trackById(i, row); let i = $index) {\r\n      <tr>\r\n        @if (allowSelection() && data().length !== 0) {\r\n        <td class=\"text-center selection-column\">\r\n          <input type=\"checkbox\" [checked]=\"isItemSelected(row)\" (change)=\"toggleItemSelection(row)\" [attr.aria-label]=\"'Seleccionar fila ' + (i + 1)\" />\r\n        </td>\r\n        }\r\n        @for (col of columns(); track col) {\r\n        @if (isColumnVisibleForRow(col, row)) {\r\n        @if (col.type === 'boolean') {\r\n        <td class=\"text-center boolean-column\">\r\n          @if (editing() === row['id'] && !col.readOnly) {\r\n          <input type=\"checkbox\" [checked]=\"!!editRow()?.[col.accessor]\" (change)=\"onEditInput($event, col.accessor, col)\" [attr.aria-label]=\"col.label\" />\r\n          }\r\n          @else {\r\n          @if (getCellValue(row, col.accessor) === true) {\r\n          <c80-icon icon=\"check\" [size]=\".7\" />\r\n          <br />\r\n          }\r\n          @else if (getCellValue(row, col.accessor) === false) {\r\n          <c80-icon icon=\"cancel\" [size]=\".7\" />\r\n          <br />\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        @else if (col.type === 'number' || col.type === 'integer') {\r\n        <td class=\"text-center number-column\">\r\n          @if (editing() === row['id'] && !col.readOnly) {\r\n          <input class=\"form-control form-control-sm\" type=\"number\" [value]=\"editRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" [min]=\"col.min\" [max]=\"col.max\" [step]=\"col.type === 'integer' ? '1' : 'any'\"\r\n            (input)=\"onEditInput($event, col.accessor, col)\" />\r\n          }\r\n          @else {\r\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{ getDisplayValue(getCellValue(row,\r\n            col.accessor), col) }}</span>\r\n          }\r\n        </td>\r\n        }\r\n        @else if (col.type === 'date') {\r\n        <td class=\"text-center date-column\">\r\n          @if (editing() === row['id'] && !col.readOnly) {\r\n          <input class=\"form-control form-control-sm\" type=\"datetime-local\" [value]=\"editRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" (input)=\"onEditInput($event, col.accessor, col)\" />\r\n          }\r\n          @else {\r\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{ getDisplayValue(getCellValue(row,\r\n            col.accessor), col) }}</span>\r\n          }\r\n        </td>\r\n        }\r\n        @else {\r\n        <td>\r\n          @if (editing() === row['id'] && !col.readOnly) {\r\n          @if (col.type === 'enum') {\r\n          <select class=\"form-control form-control-sm\" [value]=\"editRow()?.[col.accessor] ?? ''\" (change)=\"onEditInput($event, col.accessor, col)\">\r\n            <option value=\"\">{{ col.label }}</option>\r\n            @for (option of getEnumOptions(col); track option.value) {\r\n            <option [value]=\"option.value\">{{ option.label }}</option>\r\n            }\r\n          </select>\r\n          }\r\n          @else {\r\n          <input class=\"form-control form-control-sm\" [type]=\"col.type === 'password' ? 'password' : 'text'\" [value]=\"editRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" (input)=\"onEditInput($event, col.accessor, col)\" />\r\n          }\r\n          }\r\n          @else {\r\n          @if (col.type === 'password') {\r\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">******</span>\r\n          }\r\n          @else if (col.type === 'enum') {\r\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{\r\n            getEnumDisplayValue(getCellValue(row, col.accessor), col)\r\n            }}</span>\r\n          }\r\n          @else if (getCellValue(row, col.accessor) === true) {\r\n          <c80-icon icon=\"check\" [size]=\".7\" />\r\n          }\r\n          @else if (getCellValue(row, col.accessor) === false) {\r\n          <c80-icon icon=\"cancel\" [size]=\".7\" />\r\n          }\r\n          @else {\r\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{ getDisplayValue(getCellValue(row,\r\n            col.accessor), col) }}</span>\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n        }\r\n        @if (hasAnyActions()) {\r\n        <td class=\"text-end actions-cell\">\r\n          <div class=\"actions-container\" [class.centered-actions]=\"editing() === row['id']\">\r\n            @if (editing() === row['id']) {\r\n            <!-- Modo edici\u00F3n: mostrar guardar y cancelar -->\r\n            @if (hasCrudUpdate()) {\r\n            <c80-icon button icon=\"check\" title=\"Guardar\" (iconClick)=\"saveEdit(row)\" [size]=\".7\" />\r\n            }\r\n            <c80-icon button icon=\"cancel\" color=\"warn\" title=\"Cancelar\" (iconClick)=\"cancelEdit()\" [size]=\".7\" />\r\n            }\r\n            @else {\r\n            @for (action of customActions(); track action.name) {\r\n            @if (shouldShowAction(action, row, data())) {\r\n            <c80-icon button [icon]=\"action.icon\" [customColor]=\"getActionColor(action)\" [color]=\"action.name === 'delete' ? 'warn' : 'primary'\" [title]=\"getActionTooltip(action)\" (iconClick)=\"onDynamicAction(action, row)\" [size]=\".7\" />\r\n            }\r\n            }\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n      }\r\n      @if (creating() && hasCrudCreate()) {\r\n      <tr>\r\n        @if (allowSelection() && data().length !== 0) {\r\n        <td class=\"text-center selection-column\">\r\n          <!-- Empty cell for alignment -->\r\n        </td>\r\n        }\r\n        @for (col of columns(); track col) {\r\n        @if (isColumnVisible(col)) {\r\n        @if (col.type === 'boolean') {\r\n        <td class=\"text-center\">\r\n          @if (!col.readOnly) {\r\n          <input type=\"checkbox\" [checked]=\"!!newRow()?.[col.accessor]\" (change)=\"onInput($event, col.accessor, col)\" [attr.aria-label]=\"col.label\" />\r\n          }\r\n          @else {\r\n          <!-- ReadOnly boolean column in create mode shows empty -->\r\n          <span class=\"text-muted\">-</span>\r\n          }\r\n        </td>\r\n        } @else if (col.type === 'number' || col.type === 'integer') {\r\n        <td class=\"text-center number-column\">\r\n          @if (!col.readOnly) {\r\n          <input class=\"form-control form-control-sm\" type=\"number\" [value]=\"newRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" [min]=\"col.min\" [max]=\"col.max\" [step]=\"col.type === 'integer' ? '1' : 'any'\"\r\n            (input)=\"onInput($event, col.accessor, col)\" />\r\n          }\r\n          @else {\r\n          <!-- ReadOnly number column in create mode shows empty -->\r\n          <span class=\"text-muted\">-</span>\r\n          }\r\n        </td>\r\n        } @else {\r\n        <td>\r\n          @if (!col.readOnly) {\r\n          @if (col.type === 'enum') {\r\n          <select class=\"form-control form-control-sm\" [value]=\"newRow()?.[col.accessor] ?? ''\" (change)=\"onInput($event, col.accessor, col)\">\r\n            <option value=\"\">{{ col.label }}</option>\r\n            @for (option of getEnumOptions(col); track option.value) {\r\n            <option [value]=\"option.value\">{{ option.label }}</option>\r\n            }\r\n          </select>\r\n          }\r\n          @else {\r\n          <input class=\"form-control form-control-sm\" type=\"text\" [value]=\"newRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" (input)=\"onInput($event, col.accessor, col)\" />\r\n          }\r\n          }\r\n          @else {\r\n          <!-- ReadOnly column in create mode shows empty -->\r\n          <span class=\"text-muted\">-</span>\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n        }\r\n        <td class=\"text-end actions-cell\">\r\n          <div class=\"actions-container centered-actions\">\r\n            @if (hasCrudCreate()) {\r\n            <c80-icon button icon=\"check\" title=\"Guardar\" (iconClick)=\"saveCreate()\" [size]=\".7\" />\r\n            }\r\n            <c80-icon button icon=\"cancel\" color=\"warn\" title=\"Cancelar\" (iconClick)=\"cancelCreate()\" [size]=\".7\" />\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n  @if (data().length === 0 && !creating()) {\r\n  <div class=\"text-center text-muted py-3 small\">\r\n    No hay datos para mostrar.\r\n  </div>\r\n  }\r\n\r\n  <!-- Pagination Controls -->\r\n  @if (paginated() && data().length > 0) {\r\n  <div class=\"pagination-container\">\r\n    <div class=\"pagination-info\">\r\n      P\u00E1gina {{ currentPage() }} de {{ totalPages() }}\r\n    </div>\r\n    <div class=\"pagination-controls\">\r\n      <button type=\"button\" class=\"btn btn-sm\" [disabled]=\"!hasPrevPage()\" (click)=\"onPrevPage()\" title=\"P\u00E1gina anterior\">\r\n        <c80-icon icon=\"arrowLeft\" [size]=\".6\" [button]=\"false\" />\r\n      </button>\r\n      <button type=\"button\" class=\"btn btn-sm\" [disabled]=\"!hasNextPage()\" (click)=\"onNextPage()\" title=\"P\u00E1gina siguiente\">\r\n        <c80-icon icon=\"arrowRight\" [size]=\".6\" [button]=\"false\" />\r\n      </button>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n<c80-modal />", styles: ["@charset \"UTF-8\";input[type=checkbox]{width:1.3rem!important;height:1.3rem!important;accent-color:var(--color-icon-danger);background:var(--color-bg-primary);margin:0 .25rem;vertical-align:middle;cursor:pointer}.table-responsive{width:100%;overflow-x:auto}.table-responsive .search-container{margin-bottom:-.06rem}.table-responsive .search-container .search-input-wrapper .input-group .btn-borrar{border-bottom-right-radius:0;border-color:var(--color-border-default);height:32px}.table-responsive .search-container .search-input-wrapper .input-group .input-group-text{background-color:var(--color-bg-secondary);border-color:var(--color-border-default);border-bottom-left-radius:0;color:var(--color-text-secondary);width:56.1px;height:32px;padding:.25rem .5rem}.table-responsive .search-container .search-input-wrapper .input-group .input-group-text c80-icon{display:flex;align-items:center;justify-content:center}.table-responsive .search-container .search-input-wrapper .input-group .search-input{border-color:var(--color-border-default);border-bottom-right-radius:0;font-size:.75rem;height:32px;padding:.25rem .5rem;outline:none!important;background-color:var(--color-bg-primary);color:var(--color-text-primary)}.table-responsive .search-container .search-input-wrapper .input-group .search-input:focus{outline:none!important}.table-responsive .search-container .search-input-wrapper .input-group .search-input::placeholder{color:var(--color-text-muted);font-style:italic}.table-responsive .table{min-width:0px;margin-bottom:0;background-color:var(--color-bg-primary);color:var(--color-text-primary);border-color:var(--color-border-default)}.table-responsive .table.table-bordered,.table-responsive .table.table-bordered th,.table-responsive .table.table-bordered td{border-color:var(--color-border-default)}.table-responsive .table.table-hover tbody tr:hover{background-color:var(--color-bg-hover)!important;color:var(--color-text-primary)}.table-responsive .table.table-hover tbody tr:hover td{background-color:var(--color-bg-hover)}.table-responsive .table .sticky-header{position:sticky;top:0;z-index:10;background-color:var(--color-bg-secondary)!important}.table-responsive .table .sticky-header .table-actions-header{display:table-cell;vertical-align:middle;padding:.2rem .6rem!important;background-color:var(--color-bg-secondary)!important}.table-responsive .table .sticky-header .actions-wrapper{display:flex;align-items:center;justify-content:center;gap:.5rem;height:100%}.table-responsive .table .sticky-header th{max-height:31px!important;vertical-align:middle!important;padding:.2rem .6rem!important;font-size:small!important;background-color:var(--color-bg-secondary)!important;border-bottom:2px solid var(--color-border-default);color:var(--color-text-primary)}.table-responsive .table tbody{background-color:var(--color-bg-primary)}.table-responsive .table tbody td{height:35px!important;min-height:35px!important;max-height:35px!important;vertical-align:middle!important;padding:.2rem .8rem!important;font-size:small;color:var(--color-text-primary);background-color:var(--color-bg-primary);border-color:var(--color-border-default)}.table-responsive .table tbody tr{height:35px!important;min-height:35px!important;max-height:35px!important;cursor:pointer;background-color:var(--color-bg-primary)}.table-responsive .table tbody tr:hover{background-color:var(--color-bg-hover)!important}.table-responsive .table tbody tr:hover td{background-color:var(--color-bg-hover)}.table-responsive .table tbody .text-muted{color:var(--color-text-muted)!important}.table-responsive .table tbody input,.table-responsive .table tbody select{border:1px solid var(--color-border-default);height:100%!important;font-size:smaller!important;background-color:var(--color-bg-primary);color:var(--color-text-primary)}.table-responsive .table tbody input:focus,.table-responsive .table tbody select:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus)}.table-responsive .table tbody input::placeholder,.table-responsive .table tbody select::placeholder{color:var(--color-text-muted)}.table-responsive .table tbody input[type=text],.table-responsive .table tbody input:not([type]){width:100%!important}.table-responsive .table tbody input[type=number]{min-width:80px!important;width:80px!important;text-align:center}.table-responsive .table tbody select{width:100%!important;padding:.25rem .5rem}.table-responsive .table thead th.boolean-column,.table-responsive .table tbody td.boolean-column,.table-responsive .table thead th.selection-column,.table-responsive .table tbody td.selection-column,.table-responsive .table thead th.table-actions-header,.table-responsive .table tbody td.table-actions-header{width:1%;white-space:nowrap}.table-responsive .table thead th.number-column,.table-responsive .table tbody td.number-column{width:1%;white-space:nowrap;text-align:center}.table-responsive .table thead th.number-column input[type=number],.table-responsive .table tbody td.number-column input[type=number]{min-width:80px!important;width:80px!important;text-align:center}.table-responsive .table thead th.date-column,.table-responsive .table tbody td.date-column{width:1%;white-space:nowrap;text-align:center}.table-responsive .table thead th.date-column input[type=datetime-local],.table-responsive .table tbody td.date-column input[type=datetime-local]{min-width:200px!important;width:200px!important;text-align:center}.table-responsive .table .actions-cell{white-space:nowrap;padding:0!important}.table-responsive .table .actions-container{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;width:100%;height:100%}.table-responsive .table .actions-container.centered-actions{justify-content:center}.table-responsive .text-center.text-muted{color:var(--color-text-muted)!important}.table-responsive .btn-outline-secondary{background-color:var(--color-bg-primary);color:var(--color-text-primary);border-color:var(--color-border-default)}.table-responsive .btn-outline-secondary:hover{background-color:var(--color-bg-hover);border-color:var(--color-border-medium)}.table-responsive .btn-outline-secondary:focus{box-shadow:var(--shadow-focus)}.table-responsive .pagination-container{display:flex;justify-content:space-between;align-items:center;padding:.2rem .5rem;background-color:var(--color-bg-secondary);border:1px solid var(--color-border-default);border-top:none;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.table-responsive .pagination-container .pagination-info{font-size:.875rem;color:var(--color-text-secondary);font-weight:500}.table-responsive .pagination-container .pagination-controls{display:flex;gap:.5rem}.table-responsive .pagination-container .pagination-controls button{min-width:36px;height:32px;padding:.25rem .5rem;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-primary);color:var(--color-text-primary);border:none}.table-responsive .pagination-container .pagination-controls button:hover:not(:disabled){background-color:var(--color-bg-hover);border:none}.table-responsive .pagination-container .pagination-controls button:disabled{opacity:.5;cursor:auto;background-color:var(--color-bg-primary);border:none}\n"] }]
+            args: [{ selector: 'c80-table', imports: [IconComponent, ModalComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-responsive\" [style.max-height]=\"tableMaxHeight()\" [style.overflow-y]=\"size() > 0 ? 'auto' : 'visible'\">\r\n  <!-- Search Bar -->\r\n  @if (searchable()) {\r\n  <div class=\"search-container\">\r\n    <div class=\"search-input-wrapper\">\r\n      <div class=\"input-group\">\r\n        <span class=\"input-group-text\">\r\n          <c80-icon icon=\"search\" [size]=\".65\" [button]=\"false\" />\r\n        </span>\r\n        <input type=\"text\" class=\"form-control search-input\" placeholder=\"Buscar...\" [value]=\"searchValue()\" (input)=\"onSearchInput($event)\" aria-label=\"Buscar en la tabla\" />\r\n        @if (searchValue()) {\r\n        <button class=\"btn btn-outline-secondary btn-borrar\" type=\"button\" (click)=\"clearSearch()\" title=\"Limpiar b\u00FAsqueda\">\r\n          <c80-icon icon=\"cancel\" [size]=\".6\" />\r\n        </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  <table class=\"table table-bordered table-hover align-middle\">\r\n    <thead class=\"thead table-light sticky-header\">\r\n      <tr>\r\n        @if (allowSelection() && data().length !== 0) {\r\n        <th class=\"text-center selection-column\">\r\n          @if (multiple()) {\r\n          <input type=\"checkbox\" [checked]=\"selectAllChecked()\" [indeterminate]=\"selectAllIndeterminate()\" (change)=\"toggleSelectAll()\" aria-label=\"Seleccionar todo\" />\r\n          }\r\n        </th>\r\n        }\r\n        @for (col of columns(); track col) {\r\n        @if (isColumnVisibleInHeader(col)) {\r\n        @if (col.type === 'boolean') {\r\n        <th class=\"text-center boolean-column\">{{ col.label }}</th>\r\n        }\r\n        @else if (col.type === 'number' || col.type === 'integer') {\r\n        <th class=\"text-center number-column\">{{ col.label }}</th>\r\n        }\r\n        @else if (col.type === 'date') {\r\n        <th class=\"text-center date-column\">{{ col.label }}</th>\r\n        }\r\n        @else {\r\n        <th>{{ col.label }}</th>\r\n        }\r\n        }\r\n        }\r\n        @if (hasAnyActions()) {\r\n        <th class=\"table-actions-header\">\r\n          <div class=\"actions-wrapper\">\r\n            <span>Actions</span>\r\n            @if (shouldShowCreateButton()) {\r\n            <c80-icon button icon=\"add\" [disabled]=\"creating()\" title=\"Agregar\" [size]=\".6\" (iconClick)=\"startCreate()\" />\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (row of data(); track trackById(i, row); let i = $index) {\r\n      <tr>\r\n        @if (allowSelection() && data().length !== 0) {\r\n        <td class=\"text-center selection-column\">\r\n          <input type=\"checkbox\" [checked]=\"isItemSelected(row)\" (change)=\"toggleItemSelection(row)\" [attr.aria-label]=\"'Seleccionar fila ' + (i + 1)\" />\r\n        </td>\r\n        }\r\n        @for (col of columns(); track col) {\r\n        @if (isColumnVisibleForRow(col, row)) {\r\n        @if (col.type === 'boolean') {\r\n        <td class=\"text-center boolean-column\">\r\n          @if (editing() === row['id'] && !col.readOnly) {\r\n          <input type=\"checkbox\" [checked]=\"!!editRow()?.[col.accessor]\" (change)=\"onEditInput($event, col.accessor, col)\" [attr.aria-label]=\"col.label\" />\r\n          }\r\n          @else {\r\n          @if (getCellValue(row, col.accessor) === true) {\r\n          <c80-icon icon=\"check\" [size]=\".7\" />\r\n          <br />\r\n          }\r\n          @else if (getCellValue(row, col.accessor) === false) {\r\n          <c80-icon icon=\"cancel\" [size]=\".7\" />\r\n          <br />\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        @else if (col.type === 'number' || col.type === 'integer') {\r\n        <td class=\"text-center number-column\">\r\n          @if (editing() === row['id'] && !col.readOnly) {\r\n          <input class=\"form-control form-control-sm\" type=\"number\" [value]=\"editRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" [min]=\"col.min\" [max]=\"col.max\" [step]=\"col.type === 'integer' ? '1' : 'any'\"\r\n            (input)=\"onEditInput($event, col.accessor, col)\" />\r\n          }\r\n          @else {\r\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{ getDisplayValue(getCellValue(row,\r\n            col.accessor), col) }}</span>\r\n          }\r\n        </td>\r\n        }\r\n        @else if (col.type === 'date') {\r\n        <td class=\"text-center date-column\">\r\n          @if (editing() === row['id'] && !col.readOnly) {\r\n          <input class=\"form-control form-control-sm\" type=\"datetime-local\" [value]=\"editRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" (input)=\"onEditInput($event, col.accessor, col)\" />\r\n          }\r\n          @else {\r\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{ getDisplayValue(getCellValue(row,\r\n            col.accessor), col) }}</span>\r\n          }\r\n        </td>\r\n        }\r\n        @else {\r\n        <td>\r\n          @if (editing() === row['id'] && !col.readOnly) {\r\n          @if (col.type === 'enum') {\r\n          <select class=\"form-control form-control-sm\" [value]=\"editRow()?.[col.accessor] ?? ''\" (change)=\"onEditInput($event, col.accessor, col)\">\r\n            <option value=\"\">{{ col.label }}</option>\r\n            @for (option of getEnumOptions(col); track option.value) {\r\n            <option [value]=\"option.value\">{{ option.label }}</option>\r\n            }\r\n          </select>\r\n          }\r\n          @else {\r\n          <input class=\"form-control form-control-sm\" [type]=\"col.type === 'password' ? 'password' : 'text'\" [value]=\"editRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" (input)=\"onEditInput($event, col.accessor, col)\" />\r\n          }\r\n          }\r\n          @else {\r\n          @if (col.type === 'password') {\r\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">******</span>\r\n          }\r\n          @else if (col.type === 'enum') {\r\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{\r\n            getEnumDisplayValue(getCellValue(row, col.accessor), col)\r\n            }}</span>\r\n          }\r\n          @else if (getCellValue(row, col.accessor) === true) {\r\n          <c80-icon icon=\"check\" [size]=\".7\" />\r\n          }\r\n          @else if (getCellValue(row, col.accessor) === false) {\r\n          <c80-icon icon=\"cancel\" [size]=\".7\" />\r\n          }\r\n          @else {\r\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{ getDisplayValue(getCellValue(row,\r\n            col.accessor), col) }}</span>\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n        }\r\n        @if (hasAnyActions()) {\r\n        <td class=\"text-end actions-cell\">\r\n          <div class=\"actions-container\" [class.centered-actions]=\"editing() === row['id']\">\r\n            @if (editing() === row['id']) {\r\n            <!-- Modo edici\u00F3n: mostrar guardar y cancelar -->\r\n            @if (hasCrudUpdate()) {\r\n            <c80-icon button icon=\"check\" title=\"Guardar\" (iconClick)=\"saveEdit(row)\" [size]=\".7\" />\r\n            }\r\n            <c80-icon button icon=\"cancel\" color=\"warn\" title=\"Cancelar\" (iconClick)=\"cancelEdit()\" [size]=\".7\" />\r\n            }\r\n            @else {\r\n            @for (action of customActions(); track action.name) {\r\n            @if (shouldShowAction(action, row, data())) {\r\n            <c80-icon button [icon]=\"action.icon\" [customColor]=\"getActionColor(action)\" [color]=\"action.name === 'delete' ? 'warn' : 'primary'\" [title]=\"getActionTooltip(action)\" (iconClick)=\"onDynamicAction(action, row)\" [size]=\".7\" />\r\n            }\r\n            }\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n      }\r\n      @if (creating() && hasCrudCreate()) {\r\n      <tr>\r\n        @if (allowSelection() && data().length !== 0) {\r\n        <td class=\"text-center selection-column\">\r\n          <!-- Empty cell for alignment -->\r\n        </td>\r\n        }\r\n        @for (col of columns(); track col) {\r\n        @if (isColumnVisible(col)) {\r\n        @if (col.type === 'boolean') {\r\n        <td class=\"text-center\">\r\n          @if (!col.readOnly) {\r\n          <input type=\"checkbox\" [checked]=\"!!newRow()?.[col.accessor]\" (change)=\"onInput($event, col.accessor, col)\" [attr.aria-label]=\"col.label\" />\r\n          }\r\n          @else {\r\n          <!-- ReadOnly boolean column in create mode shows empty -->\r\n          <span class=\"text-muted\">-</span>\r\n          }\r\n        </td>\r\n        } @else if (col.type === 'number' || col.type === 'integer') {\r\n        <td class=\"text-center number-column\">\r\n          @if (!col.readOnly) {\r\n          <input class=\"form-control form-control-sm\" type=\"number\" [value]=\"newRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" [min]=\"col.min\" [max]=\"col.max\" [step]=\"col.type === 'integer' ? '1' : 'any'\"\r\n            (input)=\"onInput($event, col.accessor, col)\" />\r\n          }\r\n          @else {\r\n          <!-- ReadOnly number column in create mode shows empty -->\r\n          <span class=\"text-muted\">-</span>\r\n          }\r\n        </td>\r\n        } @else {\r\n        <td>\r\n          @if (!col.readOnly) {\r\n          @if (col.type === 'enum') {\r\n          <select class=\"form-control form-control-sm\" [value]=\"newRow()?.[col.accessor] ?? ''\" (change)=\"onInput($event, col.accessor, col)\">\r\n            <option value=\"\">{{ col.label }}</option>\r\n            @for (option of getEnumOptions(col); track option.value) {\r\n            <option [value]=\"option.value\">{{ option.label }}</option>\r\n            }\r\n          </select>\r\n          }\r\n          @else {\r\n          <input class=\"form-control form-control-sm\" type=\"text\" [value]=\"newRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" (input)=\"onInput($event, col.accessor, col)\" />\r\n          }\r\n          }\r\n          @else {\r\n          <!-- ReadOnly column in create mode shows empty -->\r\n          <span class=\"text-muted\">-</span>\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n        }\r\n        <td class=\"text-end actions-cell\">\r\n          <div class=\"actions-container centered-actions\">\r\n            @if (hasCrudCreate()) {\r\n            <c80-icon button icon=\"check\" title=\"Guardar\" (iconClick)=\"saveCreate()\" [size]=\".7\" />\r\n            }\r\n            <c80-icon button icon=\"cancel\" color=\"warn\" title=\"Cancelar\" (iconClick)=\"cancelCreate()\" [size]=\".7\" />\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n  @if (data().length === 0 && !creating()) {\r\n  <div class=\"text-center text-muted py-3 small\">\r\n    No hay datos para mostrar.\r\n  </div>\r\n  }\r\n\r\n  <!-- Pagination Controls -->\r\n  @if (paginated() && data().length > 0) {\r\n  <div class=\"pagination-container\">\r\n    <div class=\"pagination-info\">\r\n      P\u00E1gina {{ currentPage() }} de {{ totalPages() }}\r\n    </div>\r\n    <div class=\"pagination-controls\">\r\n      <button type=\"button\" class=\"btn btn-sm\" [disabled]=\"!hasPrevPage()\" (click)=\"onPrevPage()\" title=\"P\u00E1gina anterior\">\r\n        <c80-icon icon=\"arrowLeft\" [size]=\".6\" [button]=\"false\" />\r\n      </button>\r\n      <button type=\"button\" class=\"btn btn-sm\" [disabled]=\"!hasNextPage()\" (click)=\"onNextPage()\" title=\"P\u00E1gina siguiente\">\r\n        <c80-icon icon=\"arrowRight\" [size]=\".6\" [button]=\"false\" />\r\n      </button>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n<c80-modal />", styles: ["@charset \"UTF-8\";input[type=checkbox]{width:1.3rem!important;height:1.3rem!important;accent-color:var(--color-icon-danger);background:var(--color-bg-primary);margin:0 .25rem;vertical-align:middle;cursor:pointer}.table-responsive{width:100%;overflow-x:auto}.table-responsive .search-container{margin-bottom:-.06rem}.table-responsive .search-container .search-input-wrapper .input-group .btn-borrar{border-bottom-right-radius:0;border-color:var(--color-border-default);height:32px}.table-responsive .search-container .search-input-wrapper .input-group .input-group-text{background-color:var(--color-bg-secondary);border-color:var(--color-border-default);border-bottom-left-radius:0;color:var(--color-text-secondary);width:56.1px;height:32px;padding:.25rem .5rem}.table-responsive .search-container .search-input-wrapper .input-group .input-group-text c80-icon{display:flex;align-items:center;justify-content:center}.table-responsive .search-container .search-input-wrapper .input-group .search-input{border-color:var(--color-border-default);border-bottom-right-radius:0;font-size:.75rem;height:32px;padding:.25rem .5rem;outline:none!important;background-color:var(--color-bg-primary);color:var(--color-text-primary)}.table-responsive .search-container .search-input-wrapper .input-group .search-input:focus{outline:none!important}.table-responsive .search-container .search-input-wrapper .input-group .search-input::placeholder{color:var(--color-text-muted);font-style:italic}.table-responsive .table{min-width:0px;margin-bottom:0;background-color:var(--color-bg-primary);color:var(--color-text-primary);border-color:var(--color-border-default)}.table-responsive .table.table-bordered,.table-responsive .table.table-bordered th,.table-responsive .table.table-bordered td{border-color:var(--color-border-default)}.table-responsive .table.table-hover tbody tr:hover{background-color:var(--color-bg-hover)!important;color:var(--color-text-primary)}.table-responsive .table.table-hover tbody tr:hover td{background-color:var(--color-bg-hover)}.table-responsive .table .sticky-header{position:sticky;top:0;z-index:10;background-color:var(--color-bg-secondary)!important}.table-responsive .table .sticky-header .table-actions-header{display:table-cell;vertical-align:middle;padding:.2rem .6rem!important;background-color:var(--color-bg-secondary)!important}.table-responsive .table .sticky-header .actions-wrapper{display:flex;align-items:center;justify-content:center;gap:.5rem;height:100%}.table-responsive .table .sticky-header th{max-height:31px!important;vertical-align:middle!important;padding:.2rem .6rem!important;font-size:small!important;background-color:var(--color-bg-secondary)!important;border-bottom:2px solid var(--color-border-default);color:var(--color-text-primary)}.table-responsive .table tbody{background-color:var(--color-bg-primary)}.table-responsive .table tbody td{height:35px!important;min-height:35px!important;max-height:35px!important;vertical-align:middle!important;padding:.2rem .8rem!important;font-size:small;color:var(--color-text-primary);background-color:var(--color-bg-primary);border-color:var(--color-border-default)}.table-responsive .table tbody tr{height:35px!important;min-height:35px!important;max-height:35px!important;cursor:pointer;background-color:var(--color-bg-primary)}.table-responsive .table tbody tr:hover{background-color:var(--color-bg-hover)!important}.table-responsive .table tbody tr:hover td{background-color:var(--color-bg-hover)}.table-responsive .table tbody .text-muted{color:var(--color-text-muted)!important}.table-responsive .table tbody input,.table-responsive .table tbody select{border:1px solid var(--color-border-default);height:100%!important;font-size:smaller!important;background-color:var(--color-bg-primary);color:var(--color-text-primary)}.table-responsive .table tbody input:focus,.table-responsive .table tbody select:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus)}.table-responsive .table tbody input::placeholder,.table-responsive .table tbody select::placeholder{color:var(--color-text-muted)}.table-responsive .table tbody input[type=text],.table-responsive .table tbody input:not([type]){width:100%!important}.table-responsive .table tbody input[type=number]{min-width:80px!important;width:80px!important;text-align:center}.table-responsive .table tbody select{width:100%!important;padding:.25rem .5rem}.table-responsive .table thead th.boolean-column,.table-responsive .table tbody td.boolean-column,.table-responsive .table thead th.selection-column,.table-responsive .table tbody td.selection-column,.table-responsive .table thead th.table-actions-header,.table-responsive .table tbody td.table-actions-header{width:1%;white-space:nowrap}.table-responsive .table thead th.number-column,.table-responsive .table tbody td.number-column{width:1%;white-space:nowrap;text-align:center}.table-responsive .table thead th.number-column input[type=number],.table-responsive .table tbody td.number-column input[type=number]{min-width:80px!important;width:80px!important;text-align:center}.table-responsive .table thead th.date-column,.table-responsive .table tbody td.date-column{width:1%;white-space:nowrap;text-align:center}.table-responsive .table thead th.date-column input[type=datetime-local],.table-responsive .table tbody td.date-column input[type=datetime-local]{min-width:200px!important;width:200px!important;text-align:center}.table-responsive .table .actions-cell{white-space:nowrap;padding:0!important}.table-responsive .table .actions-container{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;width:100%;height:100%}.table-responsive .table .actions-container.centered-actions{justify-content:center}.table-responsive .text-center.text-muted{color:var(--color-text-muted)!important}.table-responsive .btn-outline-secondary{background-color:var(--color-bg-primary);color:var(--color-text-primary);border-color:var(--color-border-default)}.table-responsive .btn-outline-secondary:hover{background-color:var(--color-bg-hover);border-color:var(--color-border-medium)}.table-responsive .btn-outline-secondary:focus{box-shadow:var(--shadow-focus)}.table-responsive .pagination-container{display:flex;justify-content:space-between;align-items:center;padding:.2rem .5rem;background-color:var(--color-bg-secondary);border:1px solid var(--color-border-default);border-top:none;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.table-responsive .pagination-container .pagination-info{font-size:.875rem;color:var(--color-text-secondary);font-weight:500}.table-responsive .pagination-container .pagination-controls{display:flex;gap:.5rem}.table-responsive .pagination-container .pagination-controls button{min-width:36px;height:32px;padding:.25rem .5rem;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-primary);color:var(--color-text-primary);border:none}.table-responsive .pagination-container .pagination-controls button:hover:not(:disabled){background-color:var(--color-bg-hover);border:none}.table-responsive .pagination-container .pagination-controls button:disabled{opacity:.5;cursor:auto;background-color:var(--color-bg-primary);border:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data$: [{ type: i0.Input, args: [{ isSignal: true, alias: "data$", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], inputValues$: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValues$", required: false }] }], customActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "customActions", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], rowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowId", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], allowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSelection", required: false }] }], noConfirm: [{ type: i0.Input, args: [{ isSignal: true, alias: "noConfirm", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], paginationConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationConfig", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], searchTerm: [{ type: i0.Output, args: ["searchTerm"] }], errorEvent: [{ type: i0.Output, args: ["errorEvent"] }], selectable: [{ type: i0.Output, args: ["selectable"] }], paginationChange: [{ type: i0.Output, args: ["paginationChange"] }] } });
 //# sourceMappingURL=table.component.js.map