b2b-tools 0.0.2 → 0.1.0

package/fesm2022/b2b-tools.mjs

@@ -1,761 +0,0 @@
-import * as i0 from '@angular/core';
-import { input, output, ChangeDetectionStrategy, Component, inject, computed, signal, effect } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DomSanitizer } from '@angular/platform-browser';
-
-class TableModalImageComponent {
-    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
-    src = input('', ...(ngDevMode ? [{ debugName: "src" }] : []));
-    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : []));
-    close = output();
-    onClose() {
-        this.close.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableModalImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: TableModalImageComponent, isStandalone: true, selector: "table-modal-image", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "@if (open()) {\r\n  <div class=\"dt-modal-backdrop\" (click)=\"onClose()\">\r\n    <div class=\"dt-modal\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"dt-modal-header\">\r\n        <span class=\"dt-modal-title\">{{ alt() }}</span>\r\n        <button type=\"button\" class=\"dt-btn\" (click)=\"onClose()\">Cerrar</button>\r\n      </div>\r\n\r\n      <div class=\"dt-modal-body\">\r\n        <img class=\"dt-modal-img\" [src]=\"src()\" [alt]=\"alt()\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".dt-modal-backdrop{position:fixed;inset:0;background:#0000008c;display:flex;justify-content:center;align-items:center;padding:18px;z-index:9999}.dt-modal{width:min(900px,95vw);max-height:90vh;background:var(--white);border-radius:var(--radius-md);border:var(--border);overflow:hidden;display:flex;flex-direction:column}.dt-modal-header{padding:12px;border-bottom:var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--gray-white)}.dt-modal-title{font-weight:600;color:var(--black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-modal-body{padding:12px;overflow:auto}.dt-modal-img{width:100%;height:auto;border-radius:var(--radius-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableModalImageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'table-modal-image', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open()) {\r\n  <div class=\"dt-modal-backdrop\" (click)=\"onClose()\">\r\n    <div class=\"dt-modal\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"dt-modal-header\">\r\n        <span class=\"dt-modal-title\">{{ alt() }}</span>\r\n        <button type=\"button\" class=\"dt-btn\" (click)=\"onClose()\">Cerrar</button>\r\n      </div>\r\n\r\n      <div class=\"dt-modal-body\">\r\n        <img class=\"dt-modal-img\" [src]=\"src()\" [alt]=\"alt()\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".dt-modal-backdrop{position:fixed;inset:0;background:#0000008c;display:flex;justify-content:center;align-items:center;padding:18px;z-index:9999}.dt-modal{width:min(900px,95vw);max-height:90vh;background:var(--white);border-radius:var(--radius-md);border:var(--border);overflow:hidden;display:flex;flex-direction:column}.dt-modal-header{padding:12px;border-bottom:var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--gray-white)}.dt-modal-title{font-weight:600;color:var(--black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-modal-body{padding:12px;overflow:auto}.dt-modal-img{width:100%;height:auto;border-radius:var(--radius-sm)}\n"] }]
-        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], close: [{ type: i0.Output, args: ["close"] }] } });
-
-const SVG_ICONS = {
-    edit: '<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24"><path fill="currentColor" d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h8.925l-2 2H5v14h14v-6.95l2-2V19q0 .825-.587 1.413T19 21zm4-6v-4.25l9.175-9.175q.3-.3.675-.45t.75-.15q.4 0 .763.15t.662.45L22.425 3q.275.3.425.663T23 4.4t-.137.738t-.438.662L13.25 15zM21.025 4.4l-1.4-1.4zM11 13h1.4l5.8-5.8l-.7-.7l-.725-.7L11 11.575zm6.5-6.5l-.725-.7zl.7.7z"/></svg>',
-    delete: '<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24"><path fill="currentColor" d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zM9 17h2V8H9zm4 0h2V8h-2zM7 6v13z"/></svg>',
-    open: '<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 14 14"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"><path d="M7 3.625c-4.187 0-5.945 3.766-5.945 3.844S2.813 11.312 7 11.312s5.945-3.765 5.945-3.843S11.187 3.625 7 3.625M2.169 5.813L.61 4.252m4.525-.354L4.5 1.843m7.331 3.97l1.559-1.56m-4.525-.355L9.5 1.843"/><path d="M5.306 7.081a1.738 1.738 0 1 0 3.388.776a1.738 1.738 0 1 0-3.388-.776"/></g></svg>',
-    copy: '<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24"><path fill="currentColor" d="M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm-4 4q-.825 0-1.412-.587T3 20V6h2v14h11v2z"/></svg>'
-};
-
-const TIME_ZONES = {
-    // AFRICA
-    CAIRO: { city: 'Cairo', timeZone: 'Africa/Cairo', name: 'Egypt', currency: 'EGP', locale: 'ar-EG', utcOffset: +2 },
-    CASABLANCA: { city: 'Casablanca', timeZone: 'Africa/Casablanca', name: 'Morocco', currency: 'MAD', locale: 'ar-MA', utcOffset: 0 },
-    JOHANNESBURG: { city: 'Johannesburg', timeZone: 'Africa/Johannesburg', name: 'South Africa', currency: 'ZAR', locale: 'en-ZA', utcOffset: +2 },
-    // AMERICA
-    BUENOS_AIRES: { city: 'Buenos Aires', timeZone: 'America/Argentina/Buenos_Aires', name: 'Argentina', currency: 'ARS', locale: 'es-AR', utcOffset: -3 },
-    SAO_PAULO: { city: 'Sao Paulo', timeZone: 'America/Sao_Paulo', name: 'Brazil', currency: 'BRL', locale: 'pt-BR', utcOffset: -3 },
-    TORONTO: { city: 'Toronto', timeZone: 'America/Toronto', name: 'Canada', currency: 'CAD', locale: 'en-CA', utcOffset: -5 },
-    VANCOUVER: { city: 'Vancouver', timeZone: 'America/Vancouver', name: 'Canada (Pacific)', currency: 'CAD', locale: 'en-CA', utcOffset: -8 },
-    BOGOTA: { city: 'Bogota', timeZone: 'America/Bogota', name: 'Colombia', currency: 'COP', locale: 'es-CO', utcOffset: -5 },
-    CANCUN: { city: 'Cancun', timeZone: 'America/Cancun', name: 'Mexico (Quintana Roo)', currency: 'MXN', locale: 'es-MX', utcOffset: -5 },
-    MEXICO_CITY: { city: 'Mexico City', timeZone: 'America/Mexico_City', name: 'Mexico', currency: 'MXN', locale: 'es-MX', utcOffset: -6 },
-    TIJUANA: { city: 'Tijuana', timeZone: 'America/Tijuana', name: 'Mexico (Pacific)', currency: 'MXN', locale: 'es-MX', utcOffset: -8 },
-    LIMA: { city: 'Lima', timeZone: 'America/Lima', name: 'Peru', currency: 'PEN', locale: 'es-PE', utcOffset: -5 },
-    SANTIAGO: { city: 'Santiago', timeZone: 'America/Santiago', name: 'Chile', currency: 'CLP', locale: 'es-CL', utcOffset: -4 },
-    CHICAGO: { city: 'Chicago', timeZone: 'America/Chicago', name: 'United States (Central)', currency: 'USD', locale: 'en-US', utcOffset: -6 },
-    DENVER: { city: 'Denver', timeZone: 'America/Denver', name: 'United States (Mountain)', currency: 'USD', locale: 'en-US', utcOffset: -7 },
-    LOS_ANGELES: { city: 'Los Angeles', timeZone: 'America/Los_Angeles', name: 'United States (Pacific)', currency: 'USD', locale: 'en-US', utcOffset: -8 },
-    NEW_YORK: { city: 'New York', timeZone: 'America/New_York', name: 'United States (Eastern)', currency: 'USD', locale: 'en-US', utcOffset: -5 },
-    // ASIA
-    SHANGHAI: { city: 'Shanghai', timeZone: 'Asia/Shanghai', name: 'China', currency: 'CNY', locale: 'zh-CN', utcOffset: +8 },
-    KOLKATA: { city: 'Kolkata', timeZone: 'Asia/Kolkata', name: 'India', currency: 'INR', locale: 'en-IN', utcOffset: +5.5 },
-    TOKYO: { city: 'Tokyo', timeZone: 'Asia/Tokyo', name: 'Japan', currency: 'JPY', locale: 'ja-JP', utcOffset: +9 },
-    SEOUL: { city: 'Seoul', timeZone: 'Asia/Seoul', name: 'South Korea', currency: 'KRW', locale: 'ko-KR', utcOffset: +9 },
-    DUBAI: { city: 'Dubai', timeZone: 'Asia/Dubai', name: 'United Arab Emirates', currency: 'AED', locale: 'ar-AE', utcOffset: +4 },
-    // EUROPE
-    BERLIN: { city: 'Berlin', timeZone: 'Europe/Berlin', name: 'Germany', currency: 'EUR', locale: 'de-DE', utcOffset: +1 },
-    PARIS: { city: 'Paris', timeZone: 'Europe/Paris', name: 'France', currency: 'EUR', locale: 'fr-FR', utcOffset: +1 },
-    ROME: { city: 'Rome', timeZone: 'Europe/Rome', name: 'Italy', currency: 'EUR', locale: 'it-IT', utcOffset: +1 },
-    MADRID: { city: 'Madrid', timeZone: 'Europe/Madrid', name: 'Spain', currency: 'EUR', locale: 'es-ES', utcOffset: +1 },
-    ZURICH: { city: 'Zurich', timeZone: 'Europe/Zurich', name: 'Switzerland', currency: 'CHF', locale: 'de-CH', utcOffset: +1 },
-    LONDON: { city: 'London', timeZone: 'Europe/London', name: 'United Kingdom', currency: 'GBP', locale: 'en-GB', utcOffset: 0 },
-    // OCEANIA
-    SYDNEY: { city: 'Sydney', timeZone: 'Australia/Sydney', name: 'Australia', currency: 'AUD', locale: 'en-AU', utcOffset: +10 },
-    AUCKLAND: { city: 'Auckland', timeZone: 'Pacific/Auckland', name: 'New Zealand', currency: 'NZD', locale: 'en-NZ', utcOffset: +12 },
-};
-
-class TableGridComponent {
-    sanitizer = inject(DomSanitizer);
-    // Inputs
-    config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
-    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
-    rows = input([], ...(ngDevMode ? [{ debugName: "rows" }] : []));
-    gridTemplateColumns = input('', ...(ngDevMode ? [{ debugName: "gridTemplateColumns" }] : []));
-    columnQueries = input({}, ...(ngDevMode ? [{ debugName: "columnQueries" }] : []));
-    sortState = input(null, ...(ngDevMode ? [{ debugName: "sortState" }] : []));
-    selectedIdsSet = input(new Set(), ...(ngDevMode ? [{ debugName: "selectedIdsSet" }] : []));
-    timeZone = input(TIME_ZONES.MEXICO_CITY, ...(ngDevMode ? [{ debugName: "timeZone" }] : []));
-    // Outputs
-    headerSort = output();
-    columnQueryChange = output();
-    rowClick = output();
-    toggleRow = output();
-    toggleAllOnPage = output();
-    openImage = output();
-    actionClick = output();
-    bodyScroll = output();
-    // Derived
-    showSelectionColumn = computed(() => !!this.config().selectable, ...(ngDevMode ? [{ debugName: "showSelectionColumn" }] : []));
-    // Helpers
-    getRowIdKey() {
-        return this.config().rowIdKey ?? 'id';
-    }
-    getRowId(row) {
-        const getter = this.config().rowIdGetter;
-        if (getter)
-            return getter(row);
-        const key = this.getRowIdKey();
-        return row?.[key];
-    }
-    isSelected(row) {
-        return this.selectedIdsSet().has(this.getRowId(row));
-    }
-    isAllSelectedOnPage() {
-        const rows = this.rows();
-        if (!rows.length)
-            return false;
-        const set = this.selectedIdsSet();
-        return rows.every((r) => set.has(this.getRowId(r)));
-    }
-    getSortIcon(colKey) {
-        const sorted = this.sortState();
-        if (!sorted || sorted.key !== colKey)
-            return '↕';
-        return sorted.dir === 'asc' ? '↑' : '↓';
-    }
-    getDisplayText(row, column) {
-        const value = this.getCellValue(row, column);
-        if (column.formatter) {
-            try {
-                return column.formatter(value, row);
-            }
-            catch {
-                return '';
-            }
-        }
-        switch (column.type) {
-            case 'string':
-                return value == null ? '' : String(value);
-            case 'integer':
-            case 'decimal':
-            case 'currency': {
-                const currencyValue = Number(value);
-                if (!Number.isFinite(currencyValue))
-                    return value == null ? '' : String(value);
-                if (column.type === 'currency') {
-                    try {
-                        return new Intl.NumberFormat(this.timeZone().locale, {
-                            style: 'currency',
-                            currency: column.options?.currency ?? this.timeZone().currency,
-                            maximumFractionDigits: 2,
-                        }).format(currencyValue);
-                    }
-                    catch {
-                        return String(currencyValue);
-                    }
-                }
-                return String(currencyValue);
-            }
-            case 'date':
-            case 'datetime': {
-                const dateTime = value instanceof Date ? value : new Date(String(value));
-                if (Number.isNaN(dateTime.getTime()))
-                    return value == null ? '' : String(value);
-                const locale = this.timeZone().locale;
-                return column.type === 'datetime'
-                    ? dateTime.toLocaleString(locale)
-                    : dateTime.toLocaleDateString(locale);
-            }
-            case 'boolean':
-                return value ? 'Sí' : 'No';
-            default:
-                return value == null ? '' : String(value);
-        }
-    }
-    getImageSrc(row, col) {
-        return this.getCellString(row, col);
-    }
-    getImageAlt(row, col) {
-        const altFn = col.options?.image?.alt;
-        return altFn ? altFn(row) : col.label;
-    }
-    getStatusClass(row, col) {
-        const raw = this.getCellString(row, col);
-        return col.options?.status?.classMap?.[raw] ?? '';
-    }
-    getLinkHref(row, col) {
-        const getter = col.options?.link?.hrefGetter;
-        return getter ? getter(row) : this.getCellString(row, col);
-    }
-    getLinkLabel(row, col) {
-        const getter = col.options?.link?.labelGetter;
-        if (getter)
-            return getter(row);
-        const cellValue = this.getCellValue(row, col);
-        return cellValue == null ? '' : String(cellValue);
-    }
-    getColumnActions(col) {
-        return col.actions ?? [];
-    }
-    isActionVisible(action, row) {
-        return action.visible ? action.visible(row) : true;
-    }
-    isActionDisabled(action, row) {
-        return action.disabled ? action.disabled(row) : false;
-    }
-    emitAction(action, row, event) {
-        event.stopPropagation();
-        this.actionClick.emit({ actionId: action.id, row });
-    }
-    getActionSvg(action) {
-        const key = (action.icon ?? action.id).toLowerCase();
-        return this.sanitizer.bypassSecurityTrustHtml(SVG_ICONS[key] ?? '*');
-    }
-    onHeaderClickSort(column) {
-        if (!column.sortable)
-            return;
-        this.headerSort.emit(column);
-    }
-    onColumnQueryInput(key, value) {
-        this.columnQueryChange.emit({ key, value });
-    }
-    onRowClick(row) {
-        this.rowClick.emit(row);
-    }
-    onToggleRow(row) {
-        this.toggleRow.emit(row);
-    }
-    onToggleAllOnPage() {
-        this.toggleAllOnPage.emit();
-    }
-    onOpenImage(src, alt, event) {
-        event.stopPropagation();
-        this.openImage.emit({ src, alt });
-    }
-    onBodyScroll(event) {
-        this.bodyScroll.emit(event);
-    }
-    getCellValue(row, col) {
-        if (col.valueGetter) {
-            try {
-                return col.valueGetter(row);
-            }
-            catch {
-                return null;
-            }
-        }
-        return row?.[col.key];
-    }
-    getCellString(row, col) {
-        const value = this.getCellValue(row, col);
-        return value == null ? '' : String(value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: TableGridComponent, isStandalone: true, selector: "table-grid", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, gridTemplateColumns: { classPropertyName: "gridTemplateColumns", publicName: "gridTemplateColumns", isSignal: true, isRequired: false, transformFunction: null }, columnQueries: { classPropertyName: "columnQueries", publicName: "columnQueries", isSignal: true, isRequired: false, transformFunction: null }, sortState: { classPropertyName: "sortState", publicName: "sortState", isSignal: true, isRequired: false, transformFunction: null }, selectedIdsSet: { classPropertyName: "selectedIdsSet", publicName: "selectedIdsSet", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { headerSort: "headerSort", columnQueryChange: "columnQueryChange", rowClick: "rowClick", toggleRow: "toggleRow", toggleAllOnPage: "toggleAllOnPage", openImage: "openImage", actionClick: "actionClick", bodyScroll: "bodyScroll" }, ngImport: i0, template: "<div class=\"dt-grid\">\r\n  <div class=\"dt-xscroll\">\r\n    <!-- Header -->\r\n    <div class=\"dt-row dt-header\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n      @if (showSelectionColumn()) {\r\n        <div class=\"dt-cell dt-cell--header dt-cell--center dt-select-col\">\r\n          @if ((config().selectionMode ?? 'multiple') === 'multiple') {\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"isAllSelectedOnPage()\"\r\n              (change)=\"onToggleAllOnPage()\"\r\n              aria-label=\"Seleccionar todo\"\r\n            />\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @for (col of columns(); track col.key) {\r\n        <div\r\n          class=\"dt-cell dt-cell--header\"\r\n          [class.dt-cell--sortable]=\"!!col.sortable\"\r\n          [attr.data-align]=\"col.align ?? 'left'\"\r\n          (click)=\"onHeaderClickSort(col)\"\r\n          role=\"button\"\r\n          tabindex=\"0\"\r\n        >\r\n          <span class=\"dt-header-label\">{{ col.label }}</span>\r\n          @if (col.sortable) {\r\n            <span class=\"dt-sort\">{{ getSortIcon(col.key) }}</span>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Filters row (under header) -->\r\n    @if (config().columnFilters) {\r\n      <div class=\"dt-row dt-filters\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n        @if (showSelectionColumn()) {\r\n          <div class=\"dt-cell dt-cell--filter dt-select-col\"></div>\r\n        }\r\n\r\n        @for (col of columns(); track col.key) {\r\n          <div class=\"dt-cell dt-cell--filter\" [attr.data-align]=\"col.align ?? 'left'\">\r\n            @if (col.filterable) {\r\n              <input\r\n                type=\"text\"\r\n                [value]=\"columnQueries()[col.key] ?? null\"\r\n                (input)=\"onColumnQueryInput(col.key, $any($event.target).value)\"\r\n                [placeholder]=\"'Filtrar ' + col.label\"\r\n              />\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Body -->\r\n    <div\r\n      class=\"dt-body\"\r\n      [style.maxHeight.px]=\"config().scroll?.heightPx ?? null\"\r\n      (scroll)=\"onBodyScroll($event)\"\r\n    >\r\n      @if (rows().length === 0) {\r\n        <div class=\"dt-empty\">\r\n          {{ config().emptyText ?? 'Sin resultados' }}\r\n        </div>\r\n      } @else {\r\n        @for (row of rows(); track getRowId(row)) {\r\n          <div class=\"dt-row dt-data\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n            @if (showSelectionColumn()) {\r\n              <div class=\"dt-cell dt-cell--center dt-select-col\">\r\n                <input\r\n                  type=\"checkbox\"\r\n                  [checked]=\"isSelected(row)\"\r\n                  (change)=\"onToggleRow(row)\"\r\n                  aria-label=\"Seleccionar fila\"\r\n                />\r\n              </div>\r\n            }\r\n\r\n            @for (col of columns(); track col.key) {\r\n              <div\r\n                class=\"dt-cell\"\r\n                [attr.data-align]=\"col.align ?? 'left'\"\r\n                (click)=\"onRowClick(row)\"\r\n              >\r\n                @switch (col.type) {\r\n                  @case ('image') {\r\n                    @if ((col.options?.image?.hidden ?? false) === true) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"dt-link\"\r\n                        (click)=\"onOpenImage(getImageSrc(row, col), getImageAlt(row, col), $event)\"\r\n                      >\r\n                        Ver imagen\r\n                      </button>\r\n                    } @else {\r\n                      <img\r\n                        class=\"dt-img\"\r\n                        [class.dt-img--full]=\"!!col.options?.image?.showFull\"\r\n                        [src]=\"getImageSrc(row, col)\"\r\n                        [alt]=\"getImageAlt(row, col)\"\r\n                        (click)=\"\r\n                          (col.options?.image?.openInModal ?? true) &&\r\n                            onOpenImage(getImageSrc(row, col), getImageAlt(row, col), $event)\r\n                        \"\r\n                      />\r\n                    }\r\n                  }\r\n\r\n                  @case ('status') {\r\n                    <span class=\"dt-badge\" [attr.data-variant]=\"getStatusClass(row, col)\">\r\n                      {{ getDisplayText(row, col) }}\r\n                    </span>\r\n                  }\r\n\r\n                  @case ('link') {\r\n                    <a\r\n                      class=\"dt-link\"\r\n                      [href]=\"getLinkHref(row, col)\"\r\n                      [target]=\"col.options?.link?.target ?? '_blank'\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                    >\r\n                      {{ getLinkLabel(row, col) }}\r\n                    </a>\r\n                  }\r\n\r\n                  @case ('actions') {\r\n                    <div class=\"dt-actions\">\r\n                      @for (action of getColumnActions(col); track action.id) {\r\n                        @if (isActionVisible(action, row)) {\r\n                          <button\r\n                            type=\"button\"\r\n                            class=\"dt-action-btn\"\r\n                            [class.dt-action--edit]=\"action.id === 'edit'\"\r\n                            [class.dt-action--delete]=\"action.id === 'delete'\"\r\n                            [class.dt-action--open]=\"action.id === 'open'\"\r\n                            [class.dt-action--copy]=\"action.id === 'copy'\"\r\n                            [disabled]=\"isActionDisabled(action, row)\"\r\n                            [title]=\"action.tooltip ?? action.label\"\r\n                            (click)=\"emitAction(action, row, $event)\"\r\n                          >\r\n                            @if ((action.render ?? 'icon') === 'text') {\r\n                              <span class=\"dt-action-text\">{{ action.label }}</span>\r\n                            } @else {\r\n                              <span\r\n                                class=\"dt-action-svg\"\r\n                                [innerHTML]=\"getActionSvg(action)\"\r\n                              ></span>\r\n                            }\r\n                          </button>\r\n                        }\r\n                      }\r\n                    </div>\r\n                  }\r\n\r\n                  @default {\r\n                    <span class=\"dt-text\">{{ getDisplayText(row, col) }}</span>\r\n                  }\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".dt-grid{width:100%}.dt-row{display:grid;align-items:stretch;min-width:max-content}.dt-xscroll{overflow-x:auto;overflow-y:hidden}.dt-header{background:var(--gray-white);border-bottom:var(--border);font-weight:600;color:var(--black)}.dt-cell--header{-webkit-user-select:none;user-select:none}.dt-cell--sortable{cursor:pointer}.dt-filters{background:var(--xxs-light-gray);border-bottom:var(--border)}.dt-cell--filter{padding:8px 12px}input{width:100%;padding:7px 8px;border:1px solid var(--light-gray);border-radius:var(--radius-sm);background:var(--white);color:var(--black);outline:none}input::placeholder{color:var(--xs-dark-gray)}input:focus{border-color:var(--blue);box-shadow:var(--focus-ring)}.dt-body{overflow-y:auto;overflow-x:hidden;min-width:max-content}@media(max-heicg:900px){.dt-body{max-height:none!important;overflow-y:visible!important;overflow-x:auto!important}}.dt-cell{padding:10px 12px;min-height:30px;border-bottom:1px solid var(--xxs-light-gray);display:flex;align-items:center;gap:8px;color:var(--black)}.dt-cell[data-align=left]{justify-content:flex-start;text-align:left}.dt-cell[data-align=center]{justify-content:center;text-align:center}.dt-cell[data-align=right]{justify-content:flex-end;text-align:right}.dt-cell--center,.dt-select-col{justify-content:center}.dt-header-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dt-sort{margin-left:auto;font-size:12px;opacity:.7;color:var(--xs-dark-gray)}.dt-data:hover{background:var(--gray)}.dt-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dt-img{width:40px;height:40px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--xs-light-gray);cursor:pointer}.dt-img--full{width:100%;height:auto}.dt-link{color:var(--blue);text-decoration:none;background:transparent;border:none;cursor:pointer;padding:0;font:inherit}.dt-link:hover{text-decoration:underline}.dt-badge{padding:4px 10px;border-radius:999px;border:1px solid var(--xs-light-gray);font-size:12px;background:var(--xxs-light-gray)}.dt-badge[data-variant=success]{background:#208b6a1f;border-color:#208b6a59}.dt-badge[data-variant=warn]{background:#ffbc5733;border-color:#ffbc5773}.dt-badge[data-variant=error]{background:#e600181f;border-color:#e6001859}.dt-badge[data-variant=info]{background:#7390ec24;border-color:#7390ec59}.dt-empty{padding:18px 12px;color:var(--xs-dark-gray)}.dt-actions{display:inline-flex;align-items:center;gap:6px}.dt-action-svg{width:24px;height:24px;display:inline-flex}.dt-action-svg svg{width:24px;height:24px;color:inherit}.dt-action-btn{width:32px;height:32px;border:1px solid var(--xs-light-gray);border-radius:var(--radius-sm);background:var(--white);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--xs-dark-gray)}.dt-action-btn:hover:not(:disabled){background:var(--gray-white);border-color:var(--dark-gray)}.dt-action-btn.dt-action--edit{color:var(--blue)}.dt-action-btn.dt-action--edit:hover:not(:disabled){color:var(--white);background-color:var(--blue)}.dt-action-btn.dt-action--open{color:var(--blue-medium)}.dt-action-btn.dt-action--open:hover:not(:disabled){color:var(--blue-dark)}.dt-action-btn.dt-action--copy{color:var(--xs-dark-gray)}.dt-action-btn.dt-action--copy:hover:not(:disabled){color:var(--white);background-color:var(--xs-dark-gray)}.dt-action-btn.dt-action--delete{color:var(--red)}.dt-action-btn.dt-action--delete:hover:not(:disabled){color:var(--white);background-color:var(--red)}.dt-action-btn:disabled{color:var(--disabled-text);background:var(--soft-white);cursor:not-allowed}.dt-action-text{font-size:24px;padding:0 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableGridComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'table-grid', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dt-grid\">\r\n  <div class=\"dt-xscroll\">\r\n    <!-- Header -->\r\n    <div class=\"dt-row dt-header\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n      @if (showSelectionColumn()) {\r\n        <div class=\"dt-cell dt-cell--header dt-cell--center dt-select-col\">\r\n          @if ((config().selectionMode ?? 'multiple') === 'multiple') {\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"isAllSelectedOnPage()\"\r\n              (change)=\"onToggleAllOnPage()\"\r\n              aria-label=\"Seleccionar todo\"\r\n            />\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @for (col of columns(); track col.key) {\r\n        <div\r\n          class=\"dt-cell dt-cell--header\"\r\n          [class.dt-cell--sortable]=\"!!col.sortable\"\r\n          [attr.data-align]=\"col.align ?? 'left'\"\r\n          (click)=\"onHeaderClickSort(col)\"\r\n          role=\"button\"\r\n          tabindex=\"0\"\r\n        >\r\n          <span class=\"dt-header-label\">{{ col.label }}</span>\r\n          @if (col.sortable) {\r\n            <span class=\"dt-sort\">{{ getSortIcon(col.key) }}</span>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Filters row (under header) -->\r\n    @if (config().columnFilters) {\r\n      <div class=\"dt-row dt-filters\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n        @if (showSelectionColumn()) {\r\n          <div class=\"dt-cell dt-cell--filter dt-select-col\"></div>\r\n        }\r\n\r\n        @for (col of columns(); track col.key) {\r\n          <div class=\"dt-cell dt-cell--filter\" [attr.data-align]=\"col.align ?? 'left'\">\r\n            @if (col.filterable) {\r\n              <input\r\n                type=\"text\"\r\n                [value]=\"columnQueries()[col.key] ?? null\"\r\n                (input)=\"onColumnQueryInput(col.key, $any($event.target).value)\"\r\n                [placeholder]=\"'Filtrar ' + col.label\"\r\n              />\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- Body -->\r\n    <div\r\n      class=\"dt-body\"\r\n      [style.maxHeight.px]=\"config().scroll?.heightPx ?? null\"\r\n      (scroll)=\"onBodyScroll($event)\"\r\n    >\r\n      @if (rows().length === 0) {\r\n        <div class=\"dt-empty\">\r\n          {{ config().emptyText ?? 'Sin resultados' }}\r\n        </div>\r\n      } @else {\r\n        @for (row of rows(); track getRowId(row)) {\r\n          <div class=\"dt-row dt-data\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n            @if (showSelectionColumn()) {\r\n              <div class=\"dt-cell dt-cell--center dt-select-col\">\r\n                <input\r\n                  type=\"checkbox\"\r\n                  [checked]=\"isSelected(row)\"\r\n                  (change)=\"onToggleRow(row)\"\r\n                  aria-label=\"Seleccionar fila\"\r\n                />\r\n              </div>\r\n            }\r\n\r\n            @for (col of columns(); track col.key) {\r\n              <div\r\n                class=\"dt-cell\"\r\n                [attr.data-align]=\"col.align ?? 'left'\"\r\n                (click)=\"onRowClick(row)\"\r\n              >\r\n                @switch (col.type) {\r\n                  @case ('image') {\r\n                    @if ((col.options?.image?.hidden ?? false) === true) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"dt-link\"\r\n                        (click)=\"onOpenImage(getImageSrc(row, col), getImageAlt(row, col), $event)\"\r\n                      >\r\n                        Ver imagen\r\n                      </button>\r\n                    } @else {\r\n                      <img\r\n                        class=\"dt-img\"\r\n                        [class.dt-img--full]=\"!!col.options?.image?.showFull\"\r\n                        [src]=\"getImageSrc(row, col)\"\r\n                        [alt]=\"getImageAlt(row, col)\"\r\n                        (click)=\"\r\n                          (col.options?.image?.openInModal ?? true) &&\r\n                            onOpenImage(getImageSrc(row, col), getImageAlt(row, col), $event)\r\n                        \"\r\n                      />\r\n                    }\r\n                  }\r\n\r\n                  @case ('status') {\r\n                    <span class=\"dt-badge\" [attr.data-variant]=\"getStatusClass(row, col)\">\r\n                      {{ getDisplayText(row, col) }}\r\n                    </span>\r\n                  }\r\n\r\n                  @case ('link') {\r\n                    <a\r\n                      class=\"dt-link\"\r\n                      [href]=\"getLinkHref(row, col)\"\r\n                      [target]=\"col.options?.link?.target ?? '_blank'\"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                    >\r\n                      {{ getLinkLabel(row, col) }}\r\n                    </a>\r\n                  }\r\n\r\n                  @case ('actions') {\r\n                    <div class=\"dt-actions\">\r\n                      @for (action of getColumnActions(col); track action.id) {\r\n                        @if (isActionVisible(action, row)) {\r\n                          <button\r\n                            type=\"button\"\r\n                            class=\"dt-action-btn\"\r\n                            [class.dt-action--edit]=\"action.id === 'edit'\"\r\n                            [class.dt-action--delete]=\"action.id === 'delete'\"\r\n                            [class.dt-action--open]=\"action.id === 'open'\"\r\n                            [class.dt-action--copy]=\"action.id === 'copy'\"\r\n                            [disabled]=\"isActionDisabled(action, row)\"\r\n                            [title]=\"action.tooltip ?? action.label\"\r\n                            (click)=\"emitAction(action, row, $event)\"\r\n                          >\r\n                            @if ((action.render ?? 'icon') === 'text') {\r\n                              <span class=\"dt-action-text\">{{ action.label }}</span>\r\n                            } @else {\r\n                              <span\r\n                                class=\"dt-action-svg\"\r\n                                [innerHTML]=\"getActionSvg(action)\"\r\n                              ></span>\r\n                            }\r\n                          </button>\r\n                        }\r\n                      }\r\n                    </div>\r\n                  }\r\n\r\n                  @default {\r\n                    <span class=\"dt-text\">{{ getDisplayText(row, col) }}</span>\r\n                  }\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".dt-grid{width:100%}.dt-row{display:grid;align-items:stretch;min-width:max-content}.dt-xscroll{overflow-x:auto;overflow-y:hidden}.dt-header{background:var(--gray-white);border-bottom:var(--border);font-weight:600;color:var(--black)}.dt-cell--header{-webkit-user-select:none;user-select:none}.dt-cell--sortable{cursor:pointer}.dt-filters{background:var(--xxs-light-gray);border-bottom:var(--border)}.dt-cell--filter{padding:8px 12px}input{width:100%;padding:7px 8px;border:1px solid var(--light-gray);border-radius:var(--radius-sm);background:var(--white);color:var(--black);outline:none}input::placeholder{color:var(--xs-dark-gray)}input:focus{border-color:var(--blue);box-shadow:var(--focus-ring)}.dt-body{overflow-y:auto;overflow-x:hidden;min-width:max-content}@media(max-heicg:900px){.dt-body{max-height:none!important;overflow-y:visible!important;overflow-x:auto!important}}.dt-cell{padding:10px 12px;min-height:30px;border-bottom:1px solid var(--xxs-light-gray);display:flex;align-items:center;gap:8px;color:var(--black)}.dt-cell[data-align=left]{justify-content:flex-start;text-align:left}.dt-cell[data-align=center]{justify-content:center;text-align:center}.dt-cell[data-align=right]{justify-content:flex-end;text-align:right}.dt-cell--center,.dt-select-col{justify-content:center}.dt-header-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dt-sort{margin-left:auto;font-size:12px;opacity:.7;color:var(--xs-dark-gray)}.dt-data:hover{background:var(--gray)}.dt-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dt-img{width:40px;height:40px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--xs-light-gray);cursor:pointer}.dt-img--full{width:100%;height:auto}.dt-link{color:var(--blue);text-decoration:none;background:transparent;border:none;cursor:pointer;padding:0;font:inherit}.dt-link:hover{text-decoration:underline}.dt-badge{padding:4px 10px;border-radius:999px;border:1px solid var(--xs-light-gray);font-size:12px;background:var(--xxs-light-gray)}.dt-badge[data-variant=success]{background:#208b6a1f;border-color:#208b6a59}.dt-badge[data-variant=warn]{background:#ffbc5733;border-color:#ffbc5773}.dt-badge[data-variant=error]{background:#e600181f;border-color:#e6001859}.dt-badge[data-variant=info]{background:#7390ec24;border-color:#7390ec59}.dt-empty{padding:18px 12px;color:var(--xs-dark-gray)}.dt-actions{display:inline-flex;align-items:center;gap:6px}.dt-action-svg{width:24px;height:24px;display:inline-flex}.dt-action-svg svg{width:24px;height:24px;color:inherit}.dt-action-btn{width:32px;height:32px;border:1px solid var(--xs-light-gray);border-radius:var(--radius-sm);background:var(--white);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--xs-dark-gray)}.dt-action-btn:hover:not(:disabled){background:var(--gray-white);border-color:var(--dark-gray)}.dt-action-btn.dt-action--edit{color:var(--blue)}.dt-action-btn.dt-action--edit:hover:not(:disabled){color:var(--white);background-color:var(--blue)}.dt-action-btn.dt-action--open{color:var(--blue-medium)}.dt-action-btn.dt-action--open:hover:not(:disabled){color:var(--blue-dark)}.dt-action-btn.dt-action--copy{color:var(--xs-dark-gray)}.dt-action-btn.dt-action--copy:hover:not(:disabled){color:var(--white);background-color:var(--xs-dark-gray)}.dt-action-btn.dt-action--delete{color:var(--red)}.dt-action-btn.dt-action--delete:hover:not(:disabled){color:var(--white);background-color:var(--red)}.dt-action-btn:disabled{color:var(--disabled-text);background:var(--soft-white);cursor:not-allowed}.dt-action-text{font-size:24px;padding:0 8px}\n"] }]
-        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], gridTemplateColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridTemplateColumns", required: false }] }], columnQueries: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnQueries", required: false }] }], sortState: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortState", required: false }] }], selectedIdsSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIdsSet", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], headerSort: [{ type: i0.Output, args: ["headerSort"] }], columnQueryChange: [{ type: i0.Output, args: ["columnQueryChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], toggleRow: [{ type: i0.Output, args: ["toggleRow"] }], toggleAllOnPage: [{ type: i0.Output, args: ["toggleAllOnPage"] }], openImage: [{ type: i0.Output, args: ["openImage"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], bodyScroll: [{ type: i0.Output, args: ["bodyScroll"] }] } });
-
-class TablePaginationComponent {
-    Math = Math;
-    // Inputs
-    page = input(1, ...(ngDevMode ? [{ debugName: "page" }] : []));
-    pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
-    pageCount = input(1, ...(ngDevMode ? [{ debugName: "pageCount" }] : []));
-    totalCount = input(0, ...(ngDevMode ? [{ debugName: "totalCount" }] : []));
-    pageSizeOptions = input([10, 25, 50], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
-    pagerItems = input([], ...(ngDevMode ? [{ debugName: "pagerItems" }] : []));
-    // Outputs
-    pageChange = output();
-    pageSizeChange = output();
-    startItem = computed(() => {
-        if (this.totalCount() <= 0)
-            return 0;
-        return (this.page() - 1) * this.pageSize() + 1;
-    }, ...(ngDevMode ? [{ debugName: "startItem" }] : []));
-    endItem = computed(() => {
-        if (this.totalCount() <= 0)
-            return 0;
-        return Math.min(this.page() * this.pageSize(), this.totalCount());
-    }, ...(ngDevMode ? [{ debugName: "endItem" }] : []));
-    goToPage(page) {
-        const clamped = Math.max(1, Math.min(this.pageCount(), page));
-        this.pageChange.emit(clamped);
-    }
-    prevPage() {
-        this.goToPage(this.page() - 1);
-    }
-    nextPage() {
-        this.goToPage(this.page() + 1);
-    }
-    onPageSizeSelect(size) {
-        if (!Number.isFinite(size) || size <= 0)
-            return;
-        this.pageSizeChange.emit(size);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TablePaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: TablePaginationComponent, isStandalone: true, selector: "table-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: false, transformFunction: null }, totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pagerItems: { classPropertyName: "pagerItems", publicName: "pagerItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"dt-pagination dt-pagination--classic\">\r\n  <!-- Info -->\r\n  <span class=\"dt-page-info dt-hide-sm\">\r\n    Mostrando {{ startItem() }} \u2013 {{ endItem() }} de {{ totalCount() }}\r\n  </span>\r\n\r\n  <!-- Compact info (mobile) -->\r\n  <span class=\"dt-page-compact dt-show-xs\">\r\n    {{ page() }} / {{ pageCount() }}\r\n  </span>\r\n\r\n  <!-- Rows per page -->\r\n  <div class=\"dt-rows dt-hide-md\">\r\n    <span>Filas:</span>\r\n    <select [value]=\"pageSize()\" (change)=\"onPageSizeSelect(+$any($event.target).value)\">\r\n      @for (size of pageSizeOptions(); track size) {\r\n        <option [value]=\"size\">{{ size }}</option>\r\n      }\r\n    </select>\r\n  </div>\r\n\r\n  <!-- Pager -->\r\n  <div class=\"dt-pager\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"dt-pager-btn dt-hide-sm\"\r\n      (click)=\"goToPage(1)\"\r\n      [disabled]=\"page() === 1\"\r\n      aria-label=\"Primera p\u00E1gina\"\r\n    >\r\n      <!-- svg -->\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n        <path\r\n          fill=\"currentColor\"\r\n          d=\"m11 18l-6-6l6-6l1.4 1.4L7.825 12l4.575 4.6zm6.6 0l-6-6l6-6L19 7.4L14.425 12L19 16.6z\"\r\n        />\r\n      </svg>\r\n    </button>\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"dt-pager-btn\"\r\n      (click)=\"prevPage()\"\r\n      [disabled]=\"page() === 1\"\r\n      aria-label=\"P\u00E1gina anterior\"\r\n    >\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n        <path fill=\"currentColor\" d=\"m14 18l-6-6l6-6l1.4 1.4l-4.6 4.6l4.6 4.6z\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- n\u00FAmeros/ellipsis: se ocultar\u00E1n en XS por CSS -->\r\n    @for (item of pagerItems(); track $index) {\r\n      @if (item === '\u2026') {\r\n        <span class=\"dt-pager-ellipsis dt-hide-xs\">\u2026</span>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          class=\"dt-pager-chip dt-hide-xs\"\r\n          [class.dt-pager-chip--active]=\"item === page()\"\r\n          (click)=\"goToPage(item)\"\r\n        >\r\n          {{ item }}\r\n        </button>\r\n      }\r\n    }\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"dt-pager-btn\"\r\n      (click)=\"nextPage()\"\r\n      [disabled]=\"page() === pageCount()\"\r\n      aria-label=\"P\u00E1gina siguiente\"\r\n    >\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n        <path fill=\"currentColor\" d=\"M12.6 12L8 7.4L9.4 6l6 6l-6 6L8 16.6z\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"dt-pager-btn dt-hide-sm\"\r\n      (click)=\"goToPage(pageCount())\"\r\n      [disabled]=\"page() === pageCount()\"\r\n      aria-label=\"\u00DAltima p\u00E1gina\"\r\n    >\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n        <path\r\n          fill=\"currentColor\"\r\n          d=\"M9.575 12L5 7.4L6.4 6l6 6l-6 6L5 16.6zm6.6 0L11.6 7.4L13 6l6 6l-6 6l-1.4-1.4z\"\r\n        />\r\n      </svg>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".dt-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;font-size:13px}.dt-page-info{white-space:nowrap;color:var(--xs-dark-gray)}.dt-rows{display:flex;align-items:center;gap:6px;color:var(--xs-dark-gray)}.dt-rows select{padding:6px 28px 6px 8px;border-radius:var(--radius-sm);border:1px solid var(--light-gray);background:var(--white);font-size:13px;color:var(--black)}.dt-pager{display:flex;align-items:center;gap:4px}.dt-pager-btn,.dt-pager-chip{min-width:28px;height:28px;border-radius:var(--radius-sm);border:1px solid var(--xs-light-gray);background:var(--white);cursor:pointer;font-size:13px;display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0}.dt-pager-btn:hover:not(:disabled),.dt-pager-chip:hover:not(:disabled){border-color:var(--dark-gray);background:var(--gray-white);color:var(--xs-dark-gray)}.dt-pager-chip--active{background:#3361fa;color:var(--white);border-color:var(--blue);font-weight:600}.dt-pager-chip--active:hover:not(:disabled){background:#3361fa;color:var(--white);border-color:var(--blue)}.dt-pager-btn:disabled,.dt-pager-chip:disabled{opacity:1;color:var(--disabled-text);background:var(--soft-white);border-color:var(--disabled);cursor:not-allowed}.dt-pager-ellipsis{padding:0 6px;color:var(--xs-dark-gray)}.dt-hide-xs,.dt-hide-sm,.dt-hide-md{display:inline-flex}.dt-show-xs{display:none}.dt-page-compact{white-space:nowrap;color:var(--xs-dark-gray)}@media(max-width:1200px){.dt-hide-md{display:none!important}}@media(max-width:900px){.dt-hide-sm{display:none!important}.dt-pagination{justify-content:center}}@media(max-width:640px){.dt-hide-xs{display:none!important}.dt-show-xs{display:inline-flex!important}.dt-pagination{gap:10px}.dt-pager{gap:8px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TablePaginationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'table-pagination', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dt-pagination dt-pagination--classic\">\r\n  <!-- Info -->\r\n  <span class=\"dt-page-info dt-hide-sm\">\r\n    Mostrando {{ startItem() }} \u2013 {{ endItem() }} de {{ totalCount() }}\r\n  </span>\r\n\r\n  <!-- Compact info (mobile) -->\r\n  <span class=\"dt-page-compact dt-show-xs\">\r\n    {{ page() }} / {{ pageCount() }}\r\n  </span>\r\n\r\n  <!-- Rows per page -->\r\n  <div class=\"dt-rows dt-hide-md\">\r\n    <span>Filas:</span>\r\n    <select [value]=\"pageSize()\" (change)=\"onPageSizeSelect(+$any($event.target).value)\">\r\n      @for (size of pageSizeOptions(); track size) {\r\n        <option [value]=\"size\">{{ size }}</option>\r\n      }\r\n    </select>\r\n  </div>\r\n\r\n  <!-- Pager -->\r\n  <div class=\"dt-pager\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"dt-pager-btn dt-hide-sm\"\r\n      (click)=\"goToPage(1)\"\r\n      [disabled]=\"page() === 1\"\r\n      aria-label=\"Primera p\u00E1gina\"\r\n    >\r\n      <!-- svg -->\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n        <path\r\n          fill=\"currentColor\"\r\n          d=\"m11 18l-6-6l6-6l1.4 1.4L7.825 12l4.575 4.6zm6.6 0l-6-6l6-6L19 7.4L14.425 12L19 16.6z\"\r\n        />\r\n      </svg>\r\n    </button>\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"dt-pager-btn\"\r\n      (click)=\"prevPage()\"\r\n      [disabled]=\"page() === 1\"\r\n      aria-label=\"P\u00E1gina anterior\"\r\n    >\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n        <path fill=\"currentColor\" d=\"m14 18l-6-6l6-6l1.4 1.4l-4.6 4.6l4.6 4.6z\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- n\u00FAmeros/ellipsis: se ocultar\u00E1n en XS por CSS -->\r\n    @for (item of pagerItems(); track $index) {\r\n      @if (item === '\u2026') {\r\n        <span class=\"dt-pager-ellipsis dt-hide-xs\">\u2026</span>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          class=\"dt-pager-chip dt-hide-xs\"\r\n          [class.dt-pager-chip--active]=\"item === page()\"\r\n          (click)=\"goToPage(item)\"\r\n        >\r\n          {{ item }}\r\n        </button>\r\n      }\r\n    }\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"dt-pager-btn\"\r\n      (click)=\"nextPage()\"\r\n      [disabled]=\"page() === pageCount()\"\r\n      aria-label=\"P\u00E1gina siguiente\"\r\n    >\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n        <path fill=\"currentColor\" d=\"M12.6 12L8 7.4L9.4 6l6 6l-6 6L8 16.6z\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"dt-pager-btn dt-hide-sm\"\r\n      (click)=\"goToPage(pageCount())\"\r\n      [disabled]=\"page() === pageCount()\"\r\n      aria-label=\"\u00DAltima p\u00E1gina\"\r\n    >\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n        <path\r\n          fill=\"currentColor\"\r\n          d=\"M9.575 12L5 7.4L6.4 6l6 6l-6 6L5 16.6zm6.6 0L11.6 7.4L13 6l6 6l-6 6l-1.4-1.4z\"\r\n        />\r\n      </svg>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".dt-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;font-size:13px}.dt-page-info{white-space:nowrap;color:var(--xs-dark-gray)}.dt-rows{display:flex;align-items:center;gap:6px;color:var(--xs-dark-gray)}.dt-rows select{padding:6px 28px 6px 8px;border-radius:var(--radius-sm);border:1px solid var(--light-gray);background:var(--white);font-size:13px;color:var(--black)}.dt-pager{display:flex;align-items:center;gap:4px}.dt-pager-btn,.dt-pager-chip{min-width:28px;height:28px;border-radius:var(--radius-sm);border:1px solid var(--xs-light-gray);background:var(--white);cursor:pointer;font-size:13px;display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0}.dt-pager-btn:hover:not(:disabled),.dt-pager-chip:hover:not(:disabled){border-color:var(--dark-gray);background:var(--gray-white);color:var(--xs-dark-gray)}.dt-pager-chip--active{background:#3361fa;color:var(--white);border-color:var(--blue);font-weight:600}.dt-pager-chip--active:hover:not(:disabled){background:#3361fa;color:var(--white);border-color:var(--blue)}.dt-pager-btn:disabled,.dt-pager-chip:disabled{opacity:1;color:var(--disabled-text);background:var(--soft-white);border-color:var(--disabled);cursor:not-allowed}.dt-pager-ellipsis{padding:0 6px;color:var(--xs-dark-gray)}.dt-hide-xs,.dt-hide-sm,.dt-hide-md{display:inline-flex}.dt-show-xs{display:none}.dt-page-compact{white-space:nowrap;color:var(--xs-dark-gray)}@media(max-width:1200px){.dt-hide-md{display:none!important}}@media(max-width:900px){.dt-hide-sm{display:none!important}.dt-pagination{justify-content:center}}@media(max-width:640px){.dt-hide-xs{display:none!important}.dt-show-xs{display:inline-flex!important}.dt-pagination{gap:10px}.dt-pager{gap:8px}}\n"] }]
-        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCount", required: false }] }], totalCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalCount", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], pagerItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagerItems", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }] } });
-
-class TableToolbarComponent {
-    // Inputs
-    enabled = input(true, ...(ngDevMode ? [{ debugName: "enabled" }] : []));
-    query = input('', ...(ngDevMode ? [{ debugName: "query" }] : []));
-    placeholder = input('Buscar...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    showClear = input(true, ...(ngDevMode ? [{ debugName: "showClear" }] : []));
-    // Outputs
-    queryChange = output();
-    clear = output();
-    onInput(value) {
-        this.queryChange.emit(value);
-    }
-    onClear() {
-        this.clear.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: TableToolbarComponent, isStandalone: true, selector: "table-toolbar", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { queryChange: "queryChange", clear: "clear" }, ngImport: i0, template: "@if (enabled()) {\r\n  <div class=\"dt-toolbar\">\r\n    <input\r\n      class=\"dt-input\"\r\n      type=\"text\"\r\n      [placeholder]=\"placeholder()\"\r\n      [value]=\"query()\"\r\n      (input)=\"onInput($any($event.target).value)\"\r\n    />\r\n\r\n    @if (showClear()) {\r\n      <button type=\"button\" class=\"dt-btn\" (click)=\"onClear()\">\r\n        Limpiar\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".dt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px}.dt-input{width:100%;max-width:360px;padding:8px 10px;border-radius:var(--radius-sm);border:var(--border);outline:none}.dt-input:focus{box-shadow:0 0 0 3px #2563eb26}.dt-btn{padding:8px 10px;border-radius:var(--radius-sm);border:var(--border);background:var(--white);cursor:pointer}.dt-btn:hover{filter:brightness(.98)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableToolbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'table-toolbar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (enabled()) {\r\n  <div class=\"dt-toolbar\">\r\n    <input\r\n      class=\"dt-input\"\r\n      type=\"text\"\r\n      [placeholder]=\"placeholder()\"\r\n      [value]=\"query()\"\r\n      (input)=\"onInput($any($event.target).value)\"\r\n    />\r\n\r\n    @if (showClear()) {\r\n      <button type=\"button\" class=\"dt-btn\" (click)=\"onClear()\">\r\n        Limpiar\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".dt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px}.dt-input{width:100%;max-width:360px;padding:8px 10px;border-radius:var(--radius-sm);border:var(--border);outline:none}.dt-input:focus{box-shadow:0 0 0 3px #2563eb26}.dt-btn{padding:8px 10px;border-radius:var(--radius-sm);border:var(--border);background:var(--white);cursor:pointer}.dt-btn:hover{filter:brightness(.98)}\n"] }]
-        }], propDecorators: { enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "enabled", required: false }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], queryChange: [{ type: i0.Output, args: ["queryChange"] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
-
-class AdvancedTable {
-    // Inputs
-    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
-    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
-    config = input({
-        globalSearch: true,
-        columnFilters: false,
-        selectable: false,
-        selectionMode: 'multiple',
-        pagination: { enabled: false, pageSize: 10, pageSizeOptions: [10, 25, 50] },
-        scroll: { mode: 'none' },
-        emptyText: 'Sin resultados',
-        rowIdKey: 'id',
-        globalSearchVisibleOnly: true,
-    }, ...(ngDevMode ? [{ debugName: "config" }] : []));
-    // Outputs
-    rowClick = output();
-    selectionChange = output();
-    actionClick = output();
-    // Signals
-    globalQuery = signal('', ...(ngDevMode ? [{ debugName: "globalQuery" }] : []));
-    columnQueries = signal({}, ...(ngDevMode ? [{ debugName: "columnQueries" }] : []));
-    sortState = signal(null, ...(ngDevMode ? [{ debugName: "sortState" }] : []));
-    page = signal(1, ...(ngDevMode ? [{ debugName: "page" }] : []));
-    visibleCount = signal(0, ...(ngDevMode ? [{ debugName: "visibleCount" }] : []));
-    modalOpen = signal(false, ...(ngDevMode ? [{ debugName: "modalOpen" }] : []));
-    modalImageSrc = signal('', ...(ngDevMode ? [{ debugName: "modalImageSrc" }] : []));
-    modalImageAlt = signal('', ...(ngDevMode ? [{ debugName: "modalImageAlt" }] : []));
-    selectedIdsSet = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedIdsSet" }] : []));
-    pageSize = signal(this.config().pagination?.pageSize ?? 10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
-    // Computed Data
-    selectedIds = computed(() => Array.from(this.selectedIdsSet()), ...(ngDevMode ? [{ debugName: "selectedIds" }] : []));
-    visibleColumns = computed(() => (this.columns() ?? []).filter((c) => !c.hidden), ...(ngDevMode ? [{ debugName: "visibleColumns" }] : []));
-    showSelectionColumn = computed(() => !!this.config().selectable, ...(ngDevMode ? [{ debugName: "showSelectionColumn" }] : []));
-    gridTemplateColumns = computed(() => {
-        const cols = [];
-        if (this.showSelectionColumn())
-            cols.push('48px'); // selección
-        for (const c of this.visibleColumns()) {
-            cols.push(this.sizeToCss(c.size));
-        }
-        return cols.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "gridTemplateColumns" }] : []));
-    filteredData = computed(() => {
-        const rows = this.data() ?? [];
-        const colsAll = this.columns() ?? [];
-        const colsVisible = this.visibleColumns();
-        const config = this.config();
-        const globalQuery = this.globalQuery().trim().toLowerCase();
-        const columnQueries = this.columnQueries();
-        const colsForGlobal = (config.globalSearchVisibleOnly ?? true) ? colsVisible : colsAll.filter((c) => !c.hidden);
-        return rows.filter((row) => {
-            // column filters (AND)
-            for (const [key, q] of Object.entries(columnQueries)) {
-                const query = (q ?? '').trim().toLowerCase();
-                if (!query)
-                    continue;
-                const col = colsAll.find((c) => c.key === key);
-                if (!col)
-                    continue;
-                const value = this.getCellValue(row, col);
-                const text = this.valueToSearchableText(value, col.type, row).toLowerCase();
-                if (!text.includes(query))
-                    return false;
-            }
-            // global search (OR across columns)
-            if (config.globalSearch && globalQuery) {
-                let any = false;
-                for (const col of colsForGlobal) {
-                    const value = this.getCellValue(row, col);
-                    const text = this.valueToSearchableText(value, col.type, row).toLowerCase();
-                    if (text.includes(globalQuery)) {
-                        any = true;
-                        break;
-                    }
-                }
-                if (!any)
-                    return false;
-            }
-            return true;
-        });
-    }, ...(ngDevMode ? [{ debugName: "filteredData" }] : []));
-    sortedData = computed(() => {
-        const data = [...this.filteredData()];
-        const sort = this.sortState();
-        if (!sort)
-            return data;
-        const col = (this.columns() ?? []).find((c) => c.key === sort.key);
-        if (!col)
-            return data;
-        const dir = sort.dir === 'asc' ? 1 : -1;
-        data.sort((a, b) => {
-            const va = this.getCellValue(a, col);
-            const vb = this.getCellValue(b, col);
-            return dir * this.compareValues(va, vb, col.type);
-        });
-        return data;
-    }, ...(ngDevMode ? [{ debugName: "sortedData" }] : []));
-    pagedData = computed(() => {
-        const config = this.config();
-        const rows = this.sortedData();
-        const fixedN = config.fixedRowCount;
-        const cappedRows = typeof fixedN === 'number' && fixedN > 0 ? rows.slice(0, fixedN) : rows;
-        const mode = config.scroll?.mode ?? 'none';
-        if (mode === 'infinite') {
-            return cappedRows.slice(0, this.visibleCount());
-        }
-        // pagination
-        if (config.pagination?.enabled) {
-            const size = this.pageSize();
-            const page = this.page();
-            const start = (page - 1) * size;
-            return cappedRows.slice(start, start + size);
-        }
-        return cappedRows;
-    }, ...(ngDevMode ? [{ debugName: "pagedData" }] : []));
-    pagerItems = computed(() => {
-        const config = this.config();
-        if (!config.pagination?.enabled)
-            return [];
-        const totalPages = this.pageCount();
-        const current = this.page();
-        if (totalPages <= 1)
-            return [];
-        if (totalPages <= 7) {
-            return Array.from({ length: totalPages }, (_, i) => i + 1);
-        }
-        const items = [];
-        const first = 1;
-        const last = totalPages;
-        const around = 1;
-        const start = Math.max(2, current - around);
-        const end = Math.min(last - 1, current + around);
-        items.push(first);
-        if (start > 2)
-            items.push('…');
-        for (let p = start; p <= end; p++) {
-            items.push(p);
-        }
-        if (end < last - 1)
-            items.push('…');
-        items.push(last);
-        return items;
-    }, ...(ngDevMode ? [{ debugName: "pagerItems" }] : []));
-    totalCount = computed(() => this.sortedData().length, ...(ngDevMode ? [{ debugName: "totalCount" }] : []));
-    pageCount = computed(() => {
-        const config = this.config();
-        if (!config.pagination?.enabled)
-            return 1;
-        return Math.max(1, Math.ceil(this.totalCount() / this.pageSize()));
-    }, ...(ngDevMode ? [{ debugName: "pageCount" }] : []));
-    isAllSelectedOnPage = computed(() => {
-        if (!this.showSelectionColumn())
-            return false;
-        const ids = this.pagedData().map((r) => this.getRowId(r));
-        if (ids.length === 0)
-            return false;
-        const set = this.selectedIdsSet();
-        return ids.every((id) => set.has(id));
-    }, ...(ngDevMode ? [{ debugName: "isAllSelectedOnPage" }] : []));
-    // Effects
-    infiniteScrollEffect = effect(() => {
-        const config = this.config();
-        const mode = config.scroll?.mode ?? 'none';
-        const batch = config.scroll?.batchSize ?? 50;
-        if (mode === 'infinite') {
-            this.visibleCount.set(batch);
-        }
-        else {
-            this.visibleCount.set(Number.MAX_SAFE_INTEGER);
-        }
-    }, ...(ngDevMode ? [{ debugName: "infiniteScrollEffect" }] : []));
-    selectionDataEffect = effect(() => {
-        this.selectionChange.emit(this.selectedIds());
-    }, ...(ngDevMode ? [{ debugName: "selectionDataEffect" }] : []));
-    pagesCountEffect = effect(() => {
-        const totalPages = this.pageCount();
-        if (this.page() > totalPages) {
-            this.page.set(totalPages);
-        }
-    }, ...(ngDevMode ? [{ debugName: "pagesCountEffect" }] : []));
-    // UI Actions
-    onHeaderClickSort(col) {
-        if (!col.sortable)
-            return;
-        const current = this.sortState();
-        if (!current || current.key !== col.key) {
-            this.sortState.set({ key: col.key, dir: 'asc' });
-        }
-        else if (current.dir === 'asc') {
-            this.sortState.set({ key: col.key, dir: 'desc' });
-        }
-        else {
-            this.sortState.set(null);
-        }
-        this.page.set(1);
-    }
-    onBodyScroll(event) {
-        const config = this.config();
-        if ((config.scroll?.mode ?? 'none') !== 'infinite')
-            return;
-        const el = event.target;
-        const thresholdPx = 120;
-        const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - thresholdPx;
-        if (!nearBottom)
-            return;
-        const batch = config.scroll?.batchSize ?? 50;
-        const next = Math.min(this.sortedData().length, this.visibleCount() + batch);
-        this.visibleCount.set(next);
-    }
-    onPageSizeChange(size) {
-        if (!Number.isFinite(size) || size <= 0)
-            return;
-        this.pageSize.set(size);
-        this.page.set(1);
-    }
-    getCellValue(row, col) {
-        try {
-            return col.valueGetter ? col.valueGetter(row) : row?.[col.key];
-        }
-        catch {
-            return undefined;
-        }
-    }
-    getRowId(row) {
-        const config = this.config();
-        if (config.rowIdGetter)
-            return config.rowIdGetter(row);
-        const key = config.rowIdKey ?? 'id';
-        const value = row?.[key];
-        return (value ?? JSON.stringify(row));
-    }
-    setGlobalQuery(query) {
-        this.globalQuery.set(query ?? '');
-        this.page.set(1);
-        this.resetInfiniteIfNeeded();
-    }
-    setColumnQuery(key, query) {
-        const next = { ...this.columnQueries() };
-        next[key] = query ?? '';
-        this.columnQueries.set(next);
-        this.page.set(1);
-        this.resetInfiniteIfNeeded();
-    }
-    clearFilters() {
-        this.globalQuery.set('');
-        this.columnQueries.set({});
-        this.page.set(1);
-        this.resetInfiniteIfNeeded();
-    }
-    onRowClick(row) {
-        this.rowClick.emit(row);
-    }
-    toggleRowSelection(row) {
-        const config = this.config();
-        if (!config.selectable)
-            return;
-        const id = this.getRowId(row);
-        const mode = config.selectionMode ?? 'multiple';
-        const set = new Set(this.selectedIdsSet());
-        if (mode === 'single') {
-            if (set.has(id))
-                set.clear();
-            else {
-                set.clear();
-                set.add(id);
-            }
-        }
-        else {
-            if (set.has(id))
-                set.delete(id);
-            else
-                set.add(id);
-        }
-        this.selectedIdsSet.set(set);
-    }
-    toggleSelectAllOnPage() {
-        const config = this.config();
-        if (!config.selectable)
-            return;
-        if ((config.selectionMode ?? 'multiple') === 'single')
-            return;
-        const ids = this.pagedData().map((r) => this.getRowId(r));
-        const set = new Set(this.selectedIdsSet());
-        const allSelected = ids.every((id) => set.has(id));
-        if (allSelected)
-            ids.forEach((id) => set.delete(id));
-        else
-            ids.forEach((id) => set.add(id));
-        this.selectedIdsSet.set(set);
-    }
-    prevPage() {
-        this.page.set(Math.max(1, this.page() - 1));
-    }
-    nextPage() {
-        this.page.set(Math.min(this.pageCount(), this.page() + 1));
-    }
-    goToPage(p) {
-        const clamped = Math.max(1, Math.min(this.pageCount(), p));
-        this.page.set(clamped);
-    }
-    openImageModal(src, alt) {
-        this.modalImageSrc.set(src);
-        this.modalImageAlt.set(alt);
-        this.modalOpen.set(true);
-    }
-    closeModal() {
-        this.modalOpen.set(false);
-        this.modalImageSrc.set('');
-        this.modalImageAlt.set('');
-    }
-    // Private functions
-    resetInfiniteIfNeeded() {
-        const config = this.config();
-        if ((config.scroll?.mode ?? 'none') !== 'infinite')
-            return;
-        const batch = config.scroll?.batchSize ?? 50;
-        this.visibleCount.set(batch);
-    }
-    sizeToCss(size) {
-        switch (size) {
-            case 'XS':
-                return '80px';
-            case 'SM':
-                return '120px';
-            case 'MD':
-                return '180px';
-            case 'LG':
-                return '260px';
-            case 'XL':
-                return '360px';
-            case 'AUTO':
-            default:
-                return '1fr';
-        }
-    }
-    toNumber(value) {
-        if (typeof value === 'number')
-            return value;
-        if (typeof value === 'string') {
-            return Number(value.replace(/,/g, '').trim());
-        }
-        return Number.NaN;
-    }
-    toDate(value) {
-        if (value instanceof Date && !Number.isNaN(value.getTime()))
-            return value;
-        if (typeof value === 'string' || typeof value === 'number') {
-            const date = new Date(value);
-            return Number.isNaN(date.getTime()) ? null : date;
-        }
-        return null;
-    }
-    compareValues(firstValue, secondValue, type) {
-        const firstNull = firstValue == null || firstValue === '';
-        const secondNull = secondValue == null || secondValue === '';
-        if (firstNull && secondNull)
-            return 0;
-        if (firstNull)
-            return 1;
-        if (secondNull)
-            return -1;
-        let response = null;
-        switch (type) {
-            case 'integer':
-            case 'decimal':
-            case 'currency': {
-                const firstNumber = this.toNumber(firstValue);
-                const secondNumber = this.toNumber(secondValue);
-                if (!Number.isFinite(firstNumber) && !Number.isFinite(secondNumber))
-                    response = 0;
-                else if (!Number.isFinite(firstNumber))
-                    response = 1;
-                else if (!Number.isFinite(secondNumber))
-                    response = -1;
-                else
-                    response = firstNumber === secondNumber ? 0 : firstNumber < secondNumber ? -1 : 1;
-                break;
-            }
-            case 'date':
-            case 'datetime': {
-                const firstDate = this.toDate(firstValue);
-                const toCompareDate = this.toDate(secondValue);
-                if (!firstDate && !toCompareDate)
-                    response = 0;
-                else if (!firstDate)
-                    response = 1;
-                else if (!toCompareDate)
-                    response = -1;
-                else {
-                    const ta = firstDate.getTime();
-                    const tb = toCompareDate.getTime();
-                    response = ta === tb ? 0 : ta < tb ? -1 : 1;
-                }
-                break;
-            }
-            case 'boolean': {
-                const firstBool = firstValue === true ? 1 : 0;
-                const secondBool = secondValue === true ? 1 : 0;
-                response = firstBool - secondBool;
-                break;
-            }
-            default: {
-                const firstString = String(firstValue).toLowerCase();
-                const secondString = String(secondValue).toLowerCase();
-                response = firstString.localeCompare(secondString, 'es');
-                break;
-            }
-        }
-        return response;
-    }
-    valueToSearchableText(value, type, row) {
-        if (value == null)
-            return '';
-        if (type === 'image')
-            return '';
-        if (type === 'boolean')
-            return value === true ? 'si true yes 1' : 'no false 0';
-        return String(value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdvancedTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AdvancedTable, isStandalone: true, selector: "advanced-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", selectionChange: "selectionChange", actionClick: "actionClick" }, ngImport: i0, template: "<div class=\"dt-container\">\r\n  <div class=\"dt-toolbar\">\r\n    <!-- Search and Clean -->\r\n    <table-toolbar\r\n      [enabled]=\"config().globalSearch ?? true\"\r\n      [query]=\"globalQuery()\"\r\n      placeholder=\"Buscar...\"\r\n      [showClear]=\"true\"\r\n      (queryChange)=\"setGlobalQuery($event)\"\r\n      (clear)=\"clearFilters()\"\r\n    />\r\n\r\n    <!-- Pagination -->\r\n    @if (config().pagination?.enabled) {\r\n      <table-pagination\r\n        [page]=\"page()\"\r\n        [pageSize]=\"pageSize()\"\r\n        [pageCount]=\"pageCount()\"\r\n        [totalCount]=\"totalCount()\"\r\n        [pagerItems]=\"pagerItems()\"\r\n        [pageSizeOptions]=\"config().pagination!.pageSizeOptions ?? [10, 25, 50]\"\r\n        (pageChange)=\"goToPage($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  <div class=\"dt-grid\">\r\n    <!-- Data Table -->\r\n    <table-grid\r\n      [config]=\"config()\"\r\n      [columns]=\"visibleColumns()\"\r\n      [rows]=\"pagedData()\"\r\n      [gridTemplateColumns]=\"gridTemplateColumns()\"\r\n      [columnQueries]=\"columnQueries()\"\r\n      [sortState]=\"sortState()\"\r\n      [selectedIdsSet]=\"selectedIdsSet()\"\r\n      (headerSort)=\"onHeaderClickSort($event)\"\r\n      (columnQueryChange)=\"setColumnQuery($event.key, $event.value)\"\r\n      (rowClick)=\"onRowClick($event)\"\r\n      (toggleRow)=\"toggleRowSelection($event)\"\r\n      (toggleAllOnPage)=\"toggleSelectAllOnPage()\"\r\n      (openImage)=\"openImageModal($event.src, $event.alt)\"\r\n      (actionClick)=\"actionClick.emit($event)\"\r\n      (bodyScroll)=\"onBodyScroll($event)\"\r\n    />\r\n  </div>\r\n\r\n  <!-- Image Modal -->\r\n  <table-modal-image\r\n    [open]=\"modalOpen()\"\r\n    [src]=\"modalImageSrc()\"\r\n    [alt]=\"modalImageAlt()\"\r\n    (close)=\"closeModal()\"\r\n  />\r\n</div>\r\n", styles: [":host{display:block;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;--black: #171717;--black-light: #343434;--black-dark: #000000;--black-navy: #191a21;--xs-dark-gray: #5A5A5A;--dark-gray: #9E9E9E;--medium-gray: #D5D5D5;--gray: #F8F8F8;--light-gray: #C6C6C6;--xs-light-gray: #DFDFDF;--gray-white: #F5F4F4;--xxs-light-gray: #F2F2F2;--soft-white: #EEEEEE;--green-success: #208B6A;--blue: #3360fa;--blue-info: #7390EC;--orange: #F77C00;--yellow-warning: #FFBC57;--red: #E60018;--white: #FFFFFF;--disabled: #C6C6C6;--disabled-text: #9E9E9E;--radius-sm: 4px;--radius-md: 6px;--border: 1px solid var(--xs-light-gray);--focus-ring: 0 0 0 3px rgba(51, 96, 250, .18)}.dt-container{border:var(--border);border-radius:var(--radius-md);background:var(--white);overflow:hidden}.dt-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:var(--border);background:var(--xxs-light-gray)}.dt-empty{padding:18px 12px;color:var(--xs-dark-gray)}@media(max-width:900px){.dt-toolbar{flex-wrap:wrap;align-items:flex-start;row-gap:10px;padding:10px 12px}.dt-toolbar>b2b-table-toolbar{flex:1 1 100%}.dt-toolbar>b2b-table-pagination{flex:1 1 100%;display:flex;justify-content:center}}\n"], dependencies: [{ kind: "component", type: TableModalImageComponent, selector: "table-modal-image", inputs: ["open", "src", "alt"], outputs: ["close"] }, { kind: "component", type: TableGridComponent, selector: "table-grid", inputs: ["config", "columns", "rows", "gridTemplateColumns", "columnQueries", "sortState", "selectedIdsSet", "timeZone"], outputs: ["headerSort", "columnQueryChange", "rowClick", "toggleRow", "toggleAllOnPage", "openImage", "actionClick", "bodyScroll"] }, { kind: "component", type: TablePaginationComponent, selector: "table-pagination", inputs: ["page", "pageSize", "pageCount", "totalCount", "pageSizeOptions", "pagerItems"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: TableToolbarComponent, selector: "table-toolbar", inputs: ["enabled", "query", "placeholder", "showClear"], outputs: ["queryChange", "clear"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdvancedTable, decorators: [{
-            type: Component,
-            args: [{ selector: 'advanced-table', imports: [
-                        TableModalImageComponent,
-                        TableGridComponent,
-                        TablePaginationComponent,
-                        TableToolbarComponent,
-                    ], template: "<div class=\"dt-container\">\r\n  <div class=\"dt-toolbar\">\r\n    <!-- Search and Clean -->\r\n    <table-toolbar\r\n      [enabled]=\"config().globalSearch ?? true\"\r\n      [query]=\"globalQuery()\"\r\n      placeholder=\"Buscar...\"\r\n      [showClear]=\"true\"\r\n      (queryChange)=\"setGlobalQuery($event)\"\r\n      (clear)=\"clearFilters()\"\r\n    />\r\n\r\n    <!-- Pagination -->\r\n    @if (config().pagination?.enabled) {\r\n      <table-pagination\r\n        [page]=\"page()\"\r\n        [pageSize]=\"pageSize()\"\r\n        [pageCount]=\"pageCount()\"\r\n        [totalCount]=\"totalCount()\"\r\n        [pagerItems]=\"pagerItems()\"\r\n        [pageSizeOptions]=\"config().pagination!.pageSizeOptions ?? [10, 25, 50]\"\r\n        (pageChange)=\"goToPage($event)\"\r\n        (pageSizeChange)=\"onPageSizeChange($event)\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  <div class=\"dt-grid\">\r\n    <!-- Data Table -->\r\n    <table-grid\r\n      [config]=\"config()\"\r\n      [columns]=\"visibleColumns()\"\r\n      [rows]=\"pagedData()\"\r\n      [gridTemplateColumns]=\"gridTemplateColumns()\"\r\n      [columnQueries]=\"columnQueries()\"\r\n      [sortState]=\"sortState()\"\r\n      [selectedIdsSet]=\"selectedIdsSet()\"\r\n      (headerSort)=\"onHeaderClickSort($event)\"\r\n      (columnQueryChange)=\"setColumnQuery($event.key, $event.value)\"\r\n      (rowClick)=\"onRowClick($event)\"\r\n      (toggleRow)=\"toggleRowSelection($event)\"\r\n      (toggleAllOnPage)=\"toggleSelectAllOnPage()\"\r\n      (openImage)=\"openImageModal($event.src, $event.alt)\"\r\n      (actionClick)=\"actionClick.emit($event)\"\r\n      (bodyScroll)=\"onBodyScroll($event)\"\r\n    />\r\n  </div>\r\n\r\n  <!-- Image Modal -->\r\n  <table-modal-image\r\n    [open]=\"modalOpen()\"\r\n    [src]=\"modalImageSrc()\"\r\n    [alt]=\"modalImageAlt()\"\r\n    (close)=\"closeModal()\"\r\n  />\r\n</div>\r\n", styles: [":host{display:block;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;--black: #171717;--black-light: #343434;--black-dark: #000000;--black-navy: #191a21;--xs-dark-gray: #5A5A5A;--dark-gray: #9E9E9E;--medium-gray: #D5D5D5;--gray: #F8F8F8;--light-gray: #C6C6C6;--xs-light-gray: #DFDFDF;--gray-white: #F5F4F4;--xxs-light-gray: #F2F2F2;--soft-white: #EEEEEE;--green-success: #208B6A;--blue: #3360fa;--blue-info: #7390EC;--orange: #F77C00;--yellow-warning: #FFBC57;--red: #E60018;--white: #FFFFFF;--disabled: #C6C6C6;--disabled-text: #9E9E9E;--radius-sm: 4px;--radius-md: 6px;--border: 1px solid var(--xs-light-gray);--focus-ring: 0 0 0 3px rgba(51, 96, 250, .18)}.dt-container{border:var(--border);border-radius:var(--radius-md);background:var(--white);overflow:hidden}.dt-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:var(--border);background:var(--xxs-light-gray)}.dt-empty{padding:18px 12px;color:var(--xs-dark-gray)}@media(max-width:900px){.dt-toolbar{flex-wrap:wrap;align-items:flex-start;row-gap:10px;padding:10px 12px}.dt-toolbar>b2b-table-toolbar{flex:1 1 100%}.dt-toolbar>b2b-table-pagination{flex:1 1 100%;display:flex;justify-content:center}}\n"] }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
-
-/*
- * Public API Surface of b2b-tools
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AdvancedTable, SVG_ICONS, TIME_ZONES };
-//# sourceMappingURL=b2b-tools.mjs.map