@c80/ui 1.0.42 → 1.0.45

package/esm2022/lib/modal/modal.component.js

@@ -0,0 +1,86 @@
+import { Component, computed, effect, inject } from '@angular/core';
+import { ModalService } from './modal.service';
+import { C80IconComponent } from './../icon';
+import * as i0 from "@angular/core";
+export class C80ModalComponent {
+    modalService = inject(ModalService);
+    isOpen = this.modalService.modalState.isOpen;
+    config = this.modalService.modalState.config;
+    isVisible = computed(() => this.isOpen(), ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    constructor() {
+        effect(() => {
+            if (this.isOpen()) {
+                // Auto-focus modal when opened for accessibility
+                setTimeout(() => {
+                    const backdrop = document.querySelector('.modal-backdrop');
+                    if (backdrop) {
+                        backdrop.focus();
+                    }
+                }, 100);
+            }
+        });
+    }
+    onConfirm() {
+        this.modalService.handleResult({ action: 'confirm', confirmed: true });
+    }
+    onCancel() {
+        this.modalService.handleResult({ action: 'cancel', confirmed: false });
+    }
+    onYes() {
+        this.modalService.handleResult({ action: 'yes', confirmed: true });
+    }
+    onNo() {
+        this.modalService.handleResult({ action: 'no', confirmed: false });
+    }
+    closeModal() {
+        this.modalService.closeModal();
+    }
+    onBackdropClick(event) {
+        if (event.target === event.currentTarget) {
+            this.closeModal();
+        }
+    }
+    getPrimaryButtonClass() {
+        const configValue = this.config();
+        switch (configValue.type) {
+            case 'warning':
+                return 'btn-warning';
+            case 'error':
+                return 'btn-danger';
+            case 'confirm':
+            case 'yesNo':
+                return 'btn-primary';
+            default:
+                return 'btn-info';
+        }
+    }
+    showYesNoButtons() {
+        return this.config().type === 'yesNo';
+    }
+    showConfirmButtons() {
+        const type = this.config().type;
+        return type === 'confirm' || type === 'warning' || type === 'error';
+    }
+    showOkButton() {
+        return this.config().type === 'info';
+    }
+    getConfirmText() {
+        return this.config().confirmText || 'Confirmar';
+    }
+    getCancelText() {
+        return this.config().cancelText || 'Cancelar';
+    }
+    getYesText() {
+        return this.config().yesText || 'Sí';
+    }
+    getNoText() {
+        return this.config().noText || 'No';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: C80ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: C80ModalComponent, isStandalone: true, selector: "c80-modal", ngImport: i0, template: "<!-- Modal Backdrop -->\r\n@if (isOpen()) {\r\n<div class=\"modal-backdrop\" [class.show]=\"isVisible()\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"closeModal()\">\r\n\r\n  <!-- Modal Container -->\r\n  <dialog class=\"modal-container\" [class.show]=\"isVisible()\" [attr.aria-labelledby]=\"'modal-title'\" [open]=\"isVisible()\">\r\n\r\n    <!-- Modal Header -->\r\n    <div class=\"modal-header\">\r\n      <h4 class=\"modal-title\" id=\"modal-title\">{{ config().title }}</h4>\r\n      <c80-icon [button]=\"true\" icon=\"close\" (iconClick)=\"closeModal()\" title=\"Cerrar\" />\r\n    </div>\r\n\r\n    <!-- Modal Body -->\r\n    <div class=\"modal-body\">\r\n      <p class=\"modal-message\">{{ config().message }}</p>\r\n    </div>\r\n\r\n    <!-- Modal Footer -->\r\n    <div class=\"modal-footer\">\r\n\r\n      <!-- Info Modal - Solo OK -->\r\n      @if (showOkButton()) {\r\n      <c80-icon [button]=\"true\" icon=\"check\" textRight=\"OK\" color=\"primary\" (iconClick)=\"onConfirm()\" [border]=\"true\" />\r\n      }\r\n\r\n      <!-- Yes/No Modal -->\r\n      @if (showYesNoButtons()) {\r\n      <c80-icon [button]=\"true\" icon=\"cancel\" [textRight]=\"getNoText()\" color=\"secondary\" (iconClick)=\"onNo()\" [border]=\"true\" />\r\n      <c80-icon [button]=\"true\" icon=\"check\" [textRight]=\"getYesText()\" color=\"primary\" (iconClick)=\"onYes()\" [border]=\"true\" />\r\n      }\r\n\r\n      <!-- Confirm Modal -->\r\n      @if (showConfirmButtons()) {\r\n      <c80-icon [button]=\"true\" icon=\"cancel\" [textRight]=\"getCancelText()\" color=\"secondary\" (iconClick)=\"onCancel()\" [border]=\"true\" />\r\n      <c80-icon [button]=\"true\" icon=\"check\" [textRight]=\"getConfirmText()\" color=\"primary\" (iconClick)=\"onConfirm()\" [border]=\"true\" />\r\n      }\r\n\r\n    </div>\r\n  </dialog>\r\n</div>\r\n}", styles: [".modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1050;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out;outline:none}.modal-backdrop.show{opacity:1}.modal-container{background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;border:none;max-width:400px;width:90%;max-height:90vh;overflow:hidden;transform:scale(.9) translateY(-10px);transition:all .15s ease-out;position:relative;padding:0}.modal-container.show{transform:scale(1) translateY(0)}.modal-container::backdrop{background:transparent}.modal-header{display:flex;align-items:center;gap:8px;padding:16px 20px 12px;border-bottom:1px solid #e5e7eb;background:#f8f9fa}.modal-header .modal-title{flex:1;margin:0;font-size:16px;font-weight:600;color:#1f2937;line-height:1.3}.modal-body{padding:16px 20px}.modal-body .modal-message{margin:0;font-size:14px;line-height:1.5;color:#374151;white-space:pre-line}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 16px;background:#f8f9fa;border-top:1px solid #e5e7eb}@media(max-width:768px){.modal-container{width:95%;margin:10px}.modal-header{padding:12px 16px 8px}.modal-header .modal-title{font-size:15px}.modal-body{padding:12px 16px}.modal-body .modal-message{font-size:13px}.modal-footer{padding:8px 16px 12px;flex-direction:column}}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.8) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalFadeOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.8) translateY(-20px)}}\n"], dependencies: [{ kind: "component", type: C80IconComponent, selector: "c80-icon", inputs: ["icon", "color", "customColor", "disabled", "size", "button", "border", "type", "textLeft", "textRight"], outputs: ["iconClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: C80ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c80-modal', standalone: true, imports: [C80IconComponent], template: "<!-- Modal Backdrop -->\r\n@if (isOpen()) {\r\n<div class=\"modal-backdrop\" [class.show]=\"isVisible()\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"closeModal()\">\r\n\r\n  <!-- Modal Container -->\r\n  <dialog class=\"modal-container\" [class.show]=\"isVisible()\" [attr.aria-labelledby]=\"'modal-title'\" [open]=\"isVisible()\">\r\n\r\n    <!-- Modal Header -->\r\n    <div class=\"modal-header\">\r\n      <h4 class=\"modal-title\" id=\"modal-title\">{{ config().title }}</h4>\r\n      <c80-icon [button]=\"true\" icon=\"close\" (iconClick)=\"closeModal()\" title=\"Cerrar\" />\r\n    </div>\r\n\r\n    <!-- Modal Body -->\r\n    <div class=\"modal-body\">\r\n      <p class=\"modal-message\">{{ config().message }}</p>\r\n    </div>\r\n\r\n    <!-- Modal Footer -->\r\n    <div class=\"modal-footer\">\r\n\r\n      <!-- Info Modal - Solo OK -->\r\n      @if (showOkButton()) {\r\n      <c80-icon [button]=\"true\" icon=\"check\" textRight=\"OK\" color=\"primary\" (iconClick)=\"onConfirm()\" [border]=\"true\" />\r\n      }\r\n\r\n      <!-- Yes/No Modal -->\r\n      @if (showYesNoButtons()) {\r\n      <c80-icon [button]=\"true\" icon=\"cancel\" [textRight]=\"getNoText()\" color=\"secondary\" (iconClick)=\"onNo()\" [border]=\"true\" />\r\n      <c80-icon [button]=\"true\" icon=\"check\" [textRight]=\"getYesText()\" color=\"primary\" (iconClick)=\"onYes()\" [border]=\"true\" />\r\n      }\r\n\r\n      <!-- Confirm Modal -->\r\n      @if (showConfirmButtons()) {\r\n      <c80-icon [button]=\"true\" icon=\"cancel\" [textRight]=\"getCancelText()\" color=\"secondary\" (iconClick)=\"onCancel()\" [border]=\"true\" />\r\n      <c80-icon [button]=\"true\" icon=\"check\" [textRight]=\"getConfirmText()\" color=\"primary\" (iconClick)=\"onConfirm()\" [border]=\"true\" />\r\n      }\r\n\r\n    </div>\r\n  </dialog>\r\n</div>\r\n}", styles: [".modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1050;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out;outline:none}.modal-backdrop.show{opacity:1}.modal-container{background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;border:none;max-width:400px;width:90%;max-height:90vh;overflow:hidden;transform:scale(.9) translateY(-10px);transition:all .15s ease-out;position:relative;padding:0}.modal-container.show{transform:scale(1) translateY(0)}.modal-container::backdrop{background:transparent}.modal-header{display:flex;align-items:center;gap:8px;padding:16px 20px 12px;border-bottom:1px solid #e5e7eb;background:#f8f9fa}.modal-header .modal-title{flex:1;margin:0;font-size:16px;font-weight:600;color:#1f2937;line-height:1.3}.modal-body{padding:16px 20px}.modal-body .modal-message{margin:0;font-size:14px;line-height:1.5;color:#374151;white-space:pre-line}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 16px;background:#f8f9fa;border-top:1px solid #e5e7eb}@media(max-width:768px){.modal-container{width:95%;margin:10px}.modal-header{padding:12px 16px 8px}.modal-header .modal-title{font-size:15px}.modal-body{padding:12px 16px}.modal-body .modal-message{font-size:13px}.modal-footer{padding:8px 16px 12px;flex-direction:column}}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.8) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalFadeOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.8) translateY(-20px)}}\n"] }]
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=modal.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/modal/modal.component.ts","../../../../../libs/ui/src/lib/modal/modal.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, computed, effect, inject } from '@angular/core';\nimport { ModalService } from './modal.service';\nimport { C80IconComponent } from './../icon';\n\nexport type ModalType = 'info' | 'confirm' | 'yesNo' | 'warning' | 'error';\n\nexport interface ModalConfig {\n  title: string;\n  message: string;\n  type?: ModalType;\n  confirmText?: string;\n  cancelText?: string;\n  yesText?: string;\n  noText?: string;\n  showCancel?: boolean;\n}\n\nexport interface ModalResult {\n  action: 'confirm' | 'cancel' | 'yes' | 'no';\n  confirmed: boolean;\n}\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'c80-modal',\n  standalone: true,\n  imports: [C80IconComponent],\n  templateUrl: './modal.component.html',\n  styleUrl: './modal.component.scss',\n})\nexport class C80ModalComponent {\n  private readonly modalService = inject(ModalService);\n\n  readonly isOpen = this.modalService.modalState.isOpen;\n  readonly config = this.modalService.modalState.config;\n  readonly isVisible = computed(() => this.isOpen());\n\n  constructor() {\n    effect(() => {\n      if (this.isOpen()) {\n        // Auto-focus modal when opened for accessibility\n        setTimeout(() => {\n          const backdrop = document.querySelector(\n            '.modal-backdrop'\n          ) as HTMLElement;\n          if (backdrop) {\n            backdrop.focus();\n          }\n        }, 100);\n      }\n    });\n  }\n\n  onConfirm() {\n    this.modalService.handleResult({ action: 'confirm', confirmed: true });\n  }\n\n  onCancel() {\n    this.modalService.handleResult({ action: 'cancel', confirmed: false });\n  }\n\n  onYes() {\n    this.modalService.handleResult({ action: 'yes', confirmed: true });\n  }\n\n  onNo() {\n    this.modalService.handleResult({ action: 'no', confirmed: false });\n  }\n\n  closeModal() {\n    this.modalService.closeModal();\n  }\n\n  onBackdropClick(event: Event) {\n    if (event.target === event.currentTarget) {\n      this.closeModal();\n    }\n  }\n\n  getPrimaryButtonClass(): string {\n    const configValue = this.config();\n    switch (configValue.type) {\n      case 'warning':\n        return 'btn-warning';\n      case 'error':\n        return 'btn-danger';\n      case 'confirm':\n      case 'yesNo':\n        return 'btn-primary';\n      default:\n        return 'btn-info';\n    }\n  }\n\n  showYesNoButtons(): boolean {\n    return this.config().type === 'yesNo';\n  }\n\n  showConfirmButtons(): boolean {\n    const type = this.config().type;\n    return type === 'confirm' || type === 'warning' || type === 'error';\n  }\n\n  showOkButton(): boolean {\n    return this.config().type === 'info';\n  }\n\n  getConfirmText(): string {\n    return this.config().confirmText || 'Confirmar';\n  }\n\n  getCancelText(): string {\n    return this.config().cancelText || 'Cancelar';\n  }\n\n  getYesText(): string {\n    return this.config().yesText || 'Sí';\n  }\n\n  getNoText(): string {\n    return this.config().noText || 'No';\n  }\n}\n","<!-- Modal Backdrop -->\r\n@if (isOpen()) {\r\n<div class=\"modal-backdrop\" [class.show]=\"isVisible()\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"closeModal()\">\r\n\r\n  <!-- Modal Container -->\r\n  <dialog class=\"modal-container\" [class.show]=\"isVisible()\" [attr.aria-labelledby]=\"'modal-title'\" [open]=\"isVisible()\">\r\n\r\n    <!-- Modal Header -->\r\n    <div class=\"modal-header\">\r\n      <h4 class=\"modal-title\" id=\"modal-title\">{{ config().title }}</h4>\r\n      <c80-icon [button]=\"true\" icon=\"close\" (iconClick)=\"closeModal()\" title=\"Cerrar\" />\r\n    </div>\r\n\r\n    <!-- Modal Body -->\r\n    <div class=\"modal-body\">\r\n      <p class=\"modal-message\">{{ config().message }}</p>\r\n    </div>\r\n\r\n    <!-- Modal Footer -->\r\n    <div class=\"modal-footer\">\r\n\r\n      <!-- Info Modal - Solo OK -->\r\n      @if (showOkButton()) {\r\n      <c80-icon [button]=\"true\" icon=\"check\" textRight=\"OK\" color=\"primary\" (iconClick)=\"onConfirm()\" [border]=\"true\" />\r\n      }\r\n\r\n      <!-- Yes/No Modal -->\r\n      @if (showYesNoButtons()) {\r\n      <c80-icon [button]=\"true\" icon=\"cancel\" [textRight]=\"getNoText()\" color=\"secondary\" (iconClick)=\"onNo()\" [border]=\"true\" />\r\n      <c80-icon [button]=\"true\" icon=\"check\" [textRight]=\"getYesText()\" color=\"primary\" (iconClick)=\"onYes()\" [border]=\"true\" />\r\n      }\r\n\r\n      <!-- Confirm Modal -->\r\n      @if (showConfirmButtons()) {\r\n      <c80-icon [button]=\"true\" icon=\"cancel\" [textRight]=\"getCancelText()\" color=\"secondary\" (iconClick)=\"onCancel()\" [border]=\"true\" />\r\n      <c80-icon [button]=\"true\" icon=\"check\" [textRight]=\"getConfirmText()\" color=\"primary\" (iconClick)=\"onConfirm()\" [border]=\"true\" />\r\n      }\r\n\r\n    </div>\r\n  </dialog>\r\n</div>\r\n}"]}

package/esm2022/lib/modal/modal.service.js

@@ -0,0 +1,83 @@
+import { Injectable, signal } from '@angular/core';
+import * as i0 from "@angular/core";
+export class ModalService {
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    config = signal({
+        title: '',
+        message: '',
+        type: 'info',
+    }, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    resolvePromise;
+    modalState = {
+        isOpen: this.isOpen.asReadonly(),
+        config: this.config.asReadonly(),
+    };
+    showModal(config) {
+        this.config.set(config);
+        this.isOpen.set(true);
+        return new Promise((resolve) => {
+            this.resolvePromise = resolve;
+        });
+    }
+    async confirm(title, message, confirmText = 'Confirmar', cancelText = 'Cancelar') {
+        return this.showModal({
+            title,
+            message,
+            type: 'confirm',
+            confirmText,
+            cancelText,
+        }).then((result) => result.confirmed);
+    }
+    async yesNo(title, message, yesText = 'Sí', noText = 'No') {
+        return this.showModal({
+            title,
+            message,
+            type: 'yesNo',
+            yesText,
+            noText,
+        }).then((result) => result.action === 'yes');
+    }
+    info(title, message) {
+        return this.showModal({
+            title,
+            message,
+            type: 'info',
+        }).then(() => void 0);
+    }
+    async warning(title, message, confirmText = 'Entendido', cancelText = 'Cancelar') {
+        return this.showModal({
+            title,
+            message,
+            type: 'warning',
+            confirmText,
+            cancelText,
+        }).then((result) => result.confirmed);
+    }
+    async error(title, message, confirmText = 'Entendido') {
+        return this.showModal({
+            title,
+            message,
+            type: 'error',
+            confirmText,
+        }).then(() => void 0);
+    }
+    handleResult(result) {
+        if (this.resolvePromise) {
+            this.resolvePromise(result);
+            this.resolvePromise = undefined;
+        }
+        this.closeModal();
+    }
+    closeModal() {
+        this.isOpen.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+//# sourceMappingURL=modal.service.js.map

package/esm2022/lib/modal/modal.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.service.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/modal/modal.service.ts"],"names":[],"mappings":"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","sourcesContent":["import { Injectable, signal } from '@angular/core';\r\nimport { ModalConfig, ModalResult } from './modal.component';\r\n\r\n@Injectable({\r\n  providedIn: 'root',\r\n})\r\nexport class ModalService {\r\n  private readonly isOpen = signal(false);\r\n  private readonly config = signal<ModalConfig>({\r\n    title: '',\r\n    message: '',\r\n    type: 'info',\r\n  });\r\n\r\n  private resolvePromise?: (result: ModalResult) => void;\r\n\r\n  readonly modalState = {\r\n    isOpen: this.isOpen.asReadonly(),\r\n    config: this.config.asReadonly(),\r\n  };\r\n\r\n  showModal(config: ModalConfig): Promise<ModalResult> {\r\n    this.config.set(config);\r\n    this.isOpen.set(true);\r\n\r\n    return new Promise<ModalResult>((resolve) => {\r\n      this.resolvePromise = resolve;\r\n    });\r\n  }\r\n\r\n  async confirm(\r\n    title: string,\r\n    message: string,\r\n    confirmText = 'Confirmar',\r\n    cancelText = 'Cancelar'\r\n  ): Promise<boolean> {\r\n    return this.showModal({\r\n      title,\r\n      message,\r\n      type: 'confirm',\r\n      confirmText,\r\n      cancelText,\r\n    }).then((result) => result.confirmed);\r\n  }\r\n\r\n  async yesNo(\r\n    title: string,\r\n    message: string,\r\n    yesText = 'Sí',\r\n    noText = 'No'\r\n  ): Promise<boolean> {\r\n    return this.showModal({\r\n      title,\r\n      message,\r\n      type: 'yesNo',\r\n      yesText,\r\n      noText,\r\n    }).then((result) => result.action === 'yes');\r\n  }\r\n\r\n  info(title: string, message: string): Promise<void> {\r\n    return this.showModal({\r\n      title,\r\n      message,\r\n      type: 'info',\r\n    }).then(() => void 0);\r\n  }\r\n\r\n  async warning(\r\n    title: string,\r\n    message: string,\r\n    confirmText = 'Entendido',\r\n    cancelText = 'Cancelar'\r\n  ): Promise<boolean> {\r\n    return this.showModal({\r\n      title,\r\n      message,\r\n      type: 'warning',\r\n      confirmText,\r\n      cancelText,\r\n    }).then((result) => result.confirmed);\r\n  }\r\n\r\n  async error(\r\n    title: string,\r\n    message: string,\r\n    confirmText = 'Entendido'\r\n  ): Promise<void> {\r\n    return this.showModal({\r\n      title,\r\n      message,\r\n      type: 'error',\r\n      confirmText,\r\n    }).then(() => void 0);\r\n  }\r\n\r\n  handleResult(result: ModalResult) {\r\n    if (this.resolvePromise) {\r\n      this.resolvePromise(result);\r\n      this.resolvePromise = undefined;\r\n    }\r\n    this.closeModal();\r\n  }\r\n\r\n  closeModal() {\r\n    this.isOpen.set(false);\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,2 @@
+export * from './stat-card.component';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/stat-card/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './stat-card.component';\n"]}

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

@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+import { C80IconComponent } from '../icon';
+import * as i0 from "@angular/core";
+export class C80StatCardComponent {
+    cards = input([], ...(ngDevMode ? [{ debugName: "cards" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: C80StatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: C80StatCardComponent, 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\"></c80-icon>\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:0 2px 8px #0000001a;transition:box-shadow .3s ease;border-left:4px solid transparent;background:#fff;color:#000000de;border-radius:4px;display:block;position:relative;padding:0;overflow:hidden}.stats-section .stat-card:hover{box-shadow:0 4px 12px #00000026}.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:#6b7280}.stat-info .stat-label{font-size:12px;color:#666;text-transform:uppercase;letter-spacing:.5px}\n"], dependencies: [{ kind: "component", type: C80IconComponent, selector: "c80-icon", inputs: ["icon", "color", "customColor", "disabled", "size", "button", "border", "type", "textLeft", "textRight"], outputs: ["iconClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: C80StatCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c80-stat-card', standalone: true, imports: [C80IconComponent], 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\"></c80-icon>\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:0 2px 8px #0000001a;transition:box-shadow .3s ease;border-left:4px solid transparent;background:#fff;color:#000000de;border-radius:4px;display:block;position:relative;padding:0;overflow:hidden}.stats-section .stat-card:hover{box-shadow:0 4px 12px #00000026}.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:#6b7280}.stat-info .stat-label{font-size:12px;color:#666;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

@@ -0,0 +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,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;;AAkB3C,MAAM,OAAO,oBAAoB;IACtB,KAAK,GAAG,KAAK,CAAY,EAAE,iDAAC,CAAC;uGAD3B,oBAAoB;2FAApB,oBAAoB,6MCnBjC,qjBAcM,uvBDCM,gBAAgB;;2FAIf,oBAAoB;kBARhC,SAAS;+BAEE,eAAe,cACb,IAAI,WACP,CAAC,gBAAgB,CAAC","sourcesContent":["import { Component, input } from '@angular/core';\nimport { C80IconComponent } from '../icon';\nimport { IconType } from '../icon/icon.types';\n\nexport interface CardDef {\n  color: string; // Acepta cualquier color CSS\n  icon: IconType;\n  text: string;\n  count: number;\n}\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'c80-stat-card',\n  standalone: true,\n  imports: [C80IconComponent],\n  templateUrl: './stat-card.component.html',\n  styleUrls: ['./stat-card.component.scss'],\n})\nexport class C80StatCardComponent {\n  readonly cards = input<CardDef[]>([]);\n}\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\"></c80-icon>\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/table/index.js

@@ -0,0 +1,9 @@
+export * from './table.types';
+export * from './table.component';
+export * from './table.utils';
+export * from './table-data-converter.service';
+export * from './table-column-visibility.service';
+export * from './table-data-utils.service';
+export * from './table-selection.service';
+export * from './table-crud-state.service';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './table.types';\nexport * from './table.component';\nexport * from './table.utils';\nexport * from './table-data-converter.service';\nexport * from './table-column-visibility.service';\nexport * from './table-data-utils.service';\nexport * from './table-selection.service';\nexport * from './table-crud-state.service';\n"]}

package/esm2022/lib/table/table-column-visibility.service.js

@@ -0,0 +1,105 @@
+import { Injectable, inject } from '@angular/core';
+import { TableDataConverterService } from './table-data-converter.service';
+import { TableDataUtilsService } from './table-data-utils.service';
+import * as i0 from "@angular/core";
+/**
+ * Servicio para gestionar la lógica de visibilidad de columnas en tablas C80
+ *
+ * Maneja las reglas complejas de visibilidad basadas en:
+ * - Configuración explícita (visible: false)
+ * - Ocultación automática (hideIfAllValuesAreNull)
+ * - Estado de creación y edición
+ */
+export class TableColumnVisibilityService {
+    dataConverter = inject(TableDataConverterService);
+    dataUtils = inject(TableDataUtilsService);
+    /**
+     * Actualiza las keys de columnas visibles basándose en el estado actual
+     * @param columns - Definiciones de columnas
+     * @param data - Datos actuales de la tabla
+     * @param creating - Si está en modo creación
+     * @param editing - ID de fila en edición (null si no hay edición)
+     * @returns Array de accessors de columnas visibles
+     */
+    updateVisibleKeys(columns, data, creating, editing) {
+        const visibleColumns = columns.filter(col => this.isColumnVisibleInHeader(col, data, creating, editing));
+        return visibleColumns.map(col => col.accessor);
+    }
+    /**
+     * Determina si una columna debe ser visible basándose en su configuración y datos
+     * Método unificado que maneja todos los casos de visibilidad
+     * @param column - La definición de la columna
+     * @param data - Datos actuales de la tabla
+     * @param options - Opciones de contexto (creación, edición, fila específica)
+     * @returns true si la columna debe ser visible
+     */
+    isColumnVisible(column, data, options = {}) {
+        // PRIORIDAD 1: Si visible está explícitamente establecido en false, SIEMPRE ocultar
+        if (column.visible === false) {
+            return false;
+        }
+        // Si no tiene hideIfAllValuesAreNull, mostrar siempre
+        if (!column.hideIfAllValuesAreNull) {
+            return true;
+        }
+        // PRIORIDAD 2: Para columnas con hideIfAllValuesAreNull, ocultar si el valor es falsy (excepto 0)
+        // Esto aplica tanto en modo creación como edición
+        // CONTEXTO: Modo creación
+        if (options.creating) {
+            // En creación, verificar el valor de la fila en creación si existe
+            const creatingRow = options.row;
+            if (creatingRow) {
+                const cellValue = this.dataUtils.getCellValue(creatingRow, column.accessor);
+                return !this.dataConverter.isValueEmpty(cellValue);
+            }
+            // Si no hay fila, ocultar (valor vacío por defecto)
+            return false;
+        }
+        // CONTEXTO: Fila en edición
+        if (options.editing !== undefined && options.editing !== null) {
+            const editingRow = options.row ?? data.find(r => r['id'] === options.editing);
+            if (editingRow) {
+                const cellValue = this.dataUtils.getCellValue(editingRow, column.accessor);
+                return !this.dataConverter.isValueEmpty(cellValue);
+            }
+            return false;
+        }
+        // CONTEXTO: Vista normal - verificar si todos los valores están vacíos
+        return !this.areAllColumnValuesEmpty(column, data);
+    }
+    /**
+     * Determina si una columna debe ser visible en los headers
+     * Wrapper para mantener compatibilidad con API existente
+     */
+    isColumnVisibleInHeader(column, data, creating, editing) {
+        return this.isColumnVisible(column, data, { creating, editing });
+    }
+    /**
+     * Determina si una columna debe ser visible en una fila específica
+     * Wrapper para mantener compatibilidad con API existente
+     */
+    isColumnVisibleForRow(column, row, data, editing) {
+        return this.isColumnVisible(column, data, { editing, row });
+    }
+    /**
+     * Verifica si todos los valores de una columna están vacíos/nulos
+     */
+    areAllColumnValuesEmpty(column, data) {
+        if (data.length === 0) {
+            return true;
+        }
+        return data.every(row => {
+            const value = this.dataUtils.getCellValue(row, column.accessor);
+            return this.dataConverter.isValueEmpty(value);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TableColumnVisibilityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TableColumnVisibilityService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TableColumnVisibilityService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+//# sourceMappingURL=table-column-visibility.service.js.map

package/esm2022/lib/table/table-column-visibility.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-column-visibility.service.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/table/table-column-visibility.service.ts"],"names":[],"mappings":"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","sourcesContent":["import { Injectable, inject } from '@angular/core';\nimport { C80TableColDef } from './table.types';\nimport { TableDataConverterService } from './table-data-converter.service';\nimport { TableDataUtilsService } from './table-data-utils.service';\n\n/**\n * Servicio para gestionar la lógica de visibilidad de columnas en tablas C80\n *\n * Maneja las reglas complejas de visibilidad basadas en:\n * - Configuración explícita (visible: false)\n * - Ocultación automática (hideIfAllValuesAreNull)\n * - Estado de creación y edición\n */\n@Injectable({\n  providedIn: 'root'\n})\nexport class TableColumnVisibilityService {\n\n  private readonly dataConverter = inject(TableDataConverterService);\n  private readonly dataUtils = inject(TableDataUtilsService);\n\n  /**\n   * Actualiza las keys de columnas visibles basándose en el estado actual\n   * @param columns - Definiciones de columnas\n   * @param data - Datos actuales de la tabla\n   * @param creating - Si está en modo creación\n   * @param editing - ID de fila en edición (null si no hay edición)\n   * @returns Array de accessors de columnas visibles\n   */\n  updateVisibleKeys<T extends Record<string, unknown>>(\n    columns: C80TableColDef[],\n    data: T[],\n    creating: boolean,\n    editing: string | null\n  ): string[] {\n    const visibleColumns = columns.filter(col =>\n      this.isColumnVisibleInHeader(col, data, creating, editing)\n    );\n    return visibleColumns.map(col => col.accessor);\n  }\n\n  /**\n   * Determina si una columna debe ser visible basándose en su configuración y datos\n   * Método unificado que maneja todos los casos de visibilidad\n   * @param column - La definición de la columna\n   * @param data - Datos actuales de la tabla\n   * @param options - Opciones de contexto (creación, edición, fila específica)\n   * @returns true si la columna debe ser visible\n   */\n  isColumnVisible<T extends Record<string, unknown>>(\n    column: C80TableColDef,\n    data: T[],\n    options: {\n      forceShowInCreation?: boolean;\n      creating?: boolean;\n      editing?: string | null;\n      row?: T;\n    } = {}\n  ): boolean {\n    // PRIORIDAD 1: Si visible está explícitamente establecido en false, SIEMPRE ocultar\n    if (column.visible === false) {\n      return false;\n    }\n\n    // Si no tiene hideIfAllValuesAreNull, mostrar siempre\n    if (!column.hideIfAllValuesAreNull) {\n      return true;\n    }\n\n    // PRIORIDAD 2: Para columnas con hideIfAllValuesAreNull, ocultar si el valor es falsy (excepto 0)\n    // Esto aplica tanto en modo creación como edición\n\n    // CONTEXTO: Modo creación\n    if (options.creating) {\n      // En creación, verificar el valor de la fila en creación si existe\n      const creatingRow = options.row;\n      if (creatingRow) {\n        const cellValue = this.dataUtils.getCellValue(creatingRow, column.accessor);\n        return !this.dataConverter.isValueEmpty(cellValue);\n      }\n      // Si no hay fila, ocultar (valor vacío por defecto)\n      return false;\n    }\n\n    // CONTEXTO: Fila en edición\n    if (options.editing !== undefined && options.editing !== null) {\n      const editingRow = options.row ?? data.find(r => r['id'] === options.editing);\n      if (editingRow) {\n        const cellValue = this.dataUtils.getCellValue(editingRow, column.accessor);\n        return !this.dataConverter.isValueEmpty(cellValue);\n      }\n      return false;\n    }\n\n    // CONTEXTO: Vista normal - verificar si todos los valores están vacíos\n    return !this.areAllColumnValuesEmpty(column, data);\n  }\n\n  /**\n   * Determina si una columna debe ser visible en los headers\n   * Wrapper para mantener compatibilidad con API existente\n   */\n  isColumnVisibleInHeader<T extends Record<string, unknown>>(\n    column: C80TableColDef,\n    data: T[],\n    creating: boolean,\n    editing: string | null\n  ): boolean {\n    return this.isColumnVisible(column, data, { creating, editing });\n  }\n\n  /**\n   * Determina si una columna debe ser visible en una fila específica\n   * Wrapper para mantener compatibilidad con API existente\n   */\n  isColumnVisibleForRow<T extends Record<string, unknown>>(\n    column: C80TableColDef,\n    row: T,\n    data: T[],\n    editing: string | null\n  ): boolean {\n    return this.isColumnVisible(column, data, { editing, row });\n  }\n\n  /**\n   * Verifica si todos los valores de una columna están vacíos/nulos\n   */\n  private areAllColumnValuesEmpty<T extends Record<string, unknown>>(\n    column: C80TableColDef,\n    data: T[]\n  ): boolean {\n    if (data.length === 0) {\n      return true;\n    }\n\n    return data.every(row => {\n      const value = this.dataUtils.getCellValue(row, column.accessor);\n      return this.dataConverter.isValueEmpty(value);\n    });\n  }\n}\n"]}

package/esm2022/lib/table/table-crud-state.service.js

@@ -0,0 +1,115 @@
+import { Injectable, signal, inject } from '@angular/core';
+import { TableColumnVisibilityService } from './table-column-visibility.service';
+import { TableDataUtilsService } from './table-data-utils.service';
+import * as i0 from "@angular/core";
+/**
+ * Servicio para gestionar el estado CRUD (Crear, Leer, Actualizar, Eliminar) en tablas C80
+ *
+ * Maneja:
+ * - Estado de creación y edición
+ * - Gestión de datos temporales (newRow, editRow)
+ * - Aplicación de valores dinámicos
+ * - Validación y conversión de datos
+ */
+export class TableCrudStateService {
+    visibilityService = inject(TableColumnVisibilityService);
+    dataUtils = inject(TableDataUtilsService);
+    /**
+     * Filtra columnas visibles y editables
+     */
+    getEditableColumns(columns, data, includeHiddenIfNull) {
+        return columns.filter(col => this.visibilityService.isColumnVisible(col, data, { forceShowInCreation: includeHiddenIfNull }) && !col.readOnly);
+    }
+    /**
+     * Inicializa row para creación con valores por defecto
+     */
+    initializeNewRow(columns, data) {
+        const row = {};
+        for (const col of this.getEditableColumns(columns, data, true)) {
+            const defaultValue = col.default === undefined ? '' : col.default;
+            row[col.accessor] = defaultValue;
+        }
+        return row;
+    }
+    /**
+     * Inicializa row para edición con valores actuales
+     */
+    initializeEditRow(row, columns, data) {
+        const edit = {};
+        for (const col of this.getEditableColumns(columns, data, true)) {
+            const value = this.dataUtils.getCellValue(row, col.accessor);
+            edit[col.accessor] = value;
+        }
+        return edit;
+    }
+    /**
+     * Inicializa el estado CRUD para una nueva tabla
+     * @returns Objeto con signals y métodos para gestión CRUD
+     */
+    createCrudState() {
+        const creating = signal(false, ...(ngDevMode ? [{ debugName: "creating" }] : []));
+        const newRow = signal(null, ...(ngDevMode ? [{ debugName: "newRow" }] : []));
+        const editing = signal(null, ...(ngDevMode ? [{ debugName: "editing" }] : []));
+        const editRow = signal(null, ...(ngDevMode ? [{ debugName: "editRow" }] : []));
+        return {
+            creating: creating.asReadonly(),
+            newRow: newRow.asReadonly(),
+            editing: editing.asReadonly(),
+            editRow: editRow.asReadonly(),
+            startCreate: (columns, data) => this.startCreate(creating, newRow, columns, data),
+            cancelCreate: () => this.cancelCreate(creating, newRow),
+            updateNewRow: (key, value) => this.updateRow(newRow, key, value),
+            startEdit: (row, columns, data) => this.startEdit({ editing, editRow }, row, columns, data),
+            cancelEdit: () => this.cancelEdit(editing, editRow),
+            updateEditRow: (key, value) => this.updateRow(editRow, key, value),
+            applyInputValues: (partialValues) => this.applyInputValues({ creating, newRow, editing, editRow }, partialValues),
+        };
+    }
+    startCreate(creating, newRow, columns, data) {
+        creating.set(true);
+        newRow.set(this.initializeNewRow(columns, data));
+    }
+    cancelCreate(creating, newRow) {
+        creating.set(false);
+        newRow.set(null);
+    }
+    updateRow(rowSignal, key, value) {
+        const current = rowSignal();
+        if (!current)
+            return;
+        rowSignal.set({ ...current, [key]: value });
+    }
+    startEdit(signals, row, columns, data) {
+        signals.editing.set(row['id']);
+        signals.editRow.set(this.initializeEditRow(row, columns, data));
+    }
+    cancelEdit(editing, editRow) {
+        editing.set(null);
+        editRow.set(null);
+    }
+    applyInputValues(signals, partialValues) {
+        if (!signals.creating() && signals.editing() === null)
+            return;
+        if (signals.creating()) {
+            const currentRow = signals.newRow();
+            if (currentRow) {
+                signals.newRow.set({ ...currentRow, ...partialValues });
+            }
+        }
+        else {
+            const currentEditRow = signals.editRow();
+            if (currentEditRow) {
+                signals.editRow.set({ ...currentEditRow, ...partialValues });
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TableCrudStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TableCrudStateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TableCrudStateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+//# sourceMappingURL=table-crud-state.service.js.map

package/esm2022/lib/table/table-crud-state.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-crud-state.service.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/table/table-crud-state.service.ts"],"names":[],"mappings":"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","sourcesContent":["import { Injectable, signal, inject } from '@angular/core';\nimport { C80TableColDef } from './table.types';\nimport { TableColumnVisibilityService } from './table-column-visibility.service';\nimport { TableDataUtilsService } from './table-data-utils.service';\n\n/**\n * Servicio para gestionar el estado CRUD (Crear, Leer, Actualizar, Eliminar) en tablas C80\n *\n * Maneja:\n * - Estado de creación y edición\n * - Gestión de datos temporales (newRow, editRow)\n * - Aplicación de valores dinámicos\n * - Validación y conversión de datos\n */\n@Injectable({\n  providedIn: 'root'\n})\nexport class TableCrudStateService {\n\n  private readonly visibilityService = inject(TableColumnVisibilityService);\n  private readonly dataUtils = inject(TableDataUtilsService);\n\n  /**\n   * Filtra columnas visibles y editables\n   */\n  private getEditableColumns<T extends Record<string, unknown>>(\n    columns: C80TableColDef[],\n    data: T[],\n    includeHiddenIfNull: boolean\n  ): C80TableColDef[] {\n    return columns.filter(\n      col => this.visibilityService.isColumnVisible(col, data, { forceShowInCreation: includeHiddenIfNull }) && !col.readOnly\n    );\n  }\n\n  /**\n   * Inicializa row para creación con valores por defecto\n   */\n  private initializeNewRow<T extends Record<string, unknown>>(\n    columns: C80TableColDef[],\n    data: T[]\n  ): Partial<T> {\n    const row: Partial<T> = {};\n    for (const col of this.getEditableColumns(columns, data, true)) {\n      const defaultValue = col.default === undefined ? '' : col.default;\n      (row as Record<string, unknown>)[col.accessor] = defaultValue;\n    }\n    return row;\n  }\n\n  /**\n   * Inicializa row para edición con valores actuales\n   */\n  private initializeEditRow<T extends Record<string, unknown>>(\n    row: T,\n    columns: C80TableColDef[],\n    data: T[]\n  ): Partial<T> {\n    const edit: Partial<T> = {};\n    for (const col of this.getEditableColumns(columns, data, true)) {\n      const value = this.dataUtils.getCellValue(row, col.accessor);\n      (edit as Record<string, unknown>)[col.accessor] = value;\n    }\n    return edit;\n  }\n\n  /**\n   * Inicializa el estado CRUD para una nueva tabla\n   * @returns Objeto con signals y métodos para gestión CRUD\n   */\n  createCrudState<T extends Record<string, unknown>>() {\n    const creating = signal(false);\n    const newRow = signal<Partial<T> | null>(null);\n    const editing = signal<string | null>(null);\n    const editRow = signal<Partial<T> | null>(null);\n\n    return {\n      creating: creating.asReadonly(),\n      newRow: newRow.asReadonly(),\n      editing: editing.asReadonly(),\n      editRow: editRow.asReadonly(),\n      startCreate: (columns: C80TableColDef[], data: T[]) => this.startCreate(creating, newRow, columns, data),\n      cancelCreate: () => this.cancelCreate(creating, newRow),\n      updateNewRow: (key: string, value: unknown) => this.updateRow(newRow, key, value),\n      startEdit: (row: T, columns: C80TableColDef[], data: T[]) => this.startEdit({ editing, editRow }, row, columns, data),\n      cancelEdit: () => this.cancelEdit(editing, editRow),\n      updateEditRow: (key: string, value: unknown) => this.updateRow(editRow, key, value),\n      applyInputValues: (partialValues: Partial<T>) => this.applyInputValues({ creating, newRow, editing, editRow }, partialValues),\n    };\n  }\n\n  private startCreate<T extends Record<string, unknown>>(\n    creating: ReturnType<typeof signal<boolean>>,\n    newRow: ReturnType<typeof signal<Partial<T> | null>>,\n    columns: C80TableColDef[],\n    data: T[]\n  ): void {\n    creating.set(true);\n    newRow.set(this.initializeNewRow(columns, data));\n  }\n\n  private cancelCreate<T extends Record<string, unknown>>(\n    creating: ReturnType<typeof signal<boolean>>,\n    newRow: ReturnType<typeof signal<Partial<T> | null>>\n  ): void {\n    creating.set(false);\n    newRow.set(null);\n  }\n\n  private updateRow<T extends Record<string, unknown>>(\n    rowSignal: ReturnType<typeof signal<Partial<T> | null>>,\n    key: string,\n    value: unknown\n  ): void {\n    const current = rowSignal();\n    if (!current) return;\n    rowSignal.set({ ...current, [key]: value });\n  }\n\n  private startEdit<T extends Record<string, unknown>>(\n    signals: {\n      editing: ReturnType<typeof signal<string | null>>;\n      editRow: ReturnType<typeof signal<Partial<T> | null>>;\n    },\n    row: T,\n    columns: C80TableColDef[],\n    data: T[]\n  ): void {\n    signals.editing.set(row['id'] as string);\n    signals.editRow.set(this.initializeEditRow(row, columns, data));\n  }\n\n  private cancelEdit<T extends Record<string, unknown>>(\n    editing: ReturnType<typeof signal<string | null>>,\n    editRow: ReturnType<typeof signal<Partial<T> | null>>\n  ): void {\n    editing.set(null);\n    editRow.set(null);\n  }\n\n  private applyInputValues<T extends Record<string, unknown>>(\n    signals: {\n      creating: ReturnType<typeof signal<boolean>>;\n      newRow: ReturnType<typeof signal<Partial<T> | null>>;\n      editing: ReturnType<typeof signal<string | null>>;\n      editRow: ReturnType<typeof signal<Partial<T> | null>>;\n    },\n    partialValues: Partial<T>\n  ): void {\n    if (!signals.creating() && signals.editing() === null) return;\n\n    if (signals.creating()) {\n      const currentRow = signals.newRow();\n      if (currentRow) {\n        signals.newRow.set({ ...currentRow, ...partialValues });\n      }\n    } else {\n      const currentEditRow = signals.editRow();\n      if (currentEditRow) {\n        signals.editRow.set({ ...currentEditRow, ...partialValues });\n      }\n    }\n  }\n}\n"]}