@ajuarezso/sui-design-system 0.2.5 → 0.2.7

package/fesm2022/ajuarezso-sui-design-system.mjs

@@ -14619,6 +14619,11 @@ class SuiTable {
         });
     }
     bindTouchScroll(el) {
+        /* X NATIVO también en Android: el bug de Chromium es solo con el gesto
+           VERTICAL (no delega al scroll de la página). `touch-action: pan-x` deja
+           que el browser haga el pan/fling horizontal nativo (fluido de verdad) y
+           nos entrega los gestos verticales para manejarlos por JS. */
+        el.style.touchAction = 'pan-x';
         let sx = 0, sy = 0, lx = 0, ly = 0;
         let axis = null;
         let pageScroller = null;
@@ -14626,7 +14631,7 @@ class SuiTable {
            ventana de samples (~100ms) tipo VelocityTracker de Android — NO con el
            último move suelto: el dedo siempre desacelera antes de soltar, así que
            la velocidad instantánea final es ~0 y el fling moría → scroll "lento". */
-        let vy = 0, vx = 0, momentumRaf = 0, momentumTs = 0;
+        let vy = 0, momentumRaf = 0, momentumTs = 0;
         const samples = [];
         const VELOCITY_WINDOW_MS = 100;
         const findPageScroller = () => {
@@ -14679,9 +14684,13 @@ class SuiTable {
                 axis = canScrollX && dx > dy ? 'x' : 'y';
             }
             if (axis === 'x') {
-                el.scrollLeft -= t.clientX - lx;
+                /* Horizontal: NO interceptar — con touch-action:pan-x el browser hace el
+                   scroll X nativo (momentum incluido). Solo actualizamos refs. */
+                lx = t.clientX;
+                ly = t.clientY;
+                return;
             }
-            else if (pageScroller) {
+            if (pageScroller) {
                 pageScroller.scrollTop -= t.clientY - ly;
             }
             samples.push({ x: t.clientX, y: t.clientY, t: e.timeStamp });
@@ -14701,23 +14710,6 @@ class SuiTable {
             const first = samples[0];
             const last = samples[samples.length - 1];
             const win = last && first ? last.t - first.t : 0;
-            if (axis === 'x') {
-                vx = win > 0 ? (last.x - first.x) / win : 0;
-                if (Math.abs(vx) < 0.05)
-                    return;
-                momentumTs = 0;
-                const stepX = (ts) => {
-                    if (!momentumTs)
-                        momentumTs = ts;
-                    const dt = Math.min(ts - momentumTs, 32);
-                    momentumTs = ts;
-                    el.scrollLeft -= vx * dt;
-                    vx *= Math.pow(0.95, dt / 16);
-                    momentumRaf = Math.abs(vx) > 0.02 ? requestAnimationFrame(stepX) : 0;
-                };
-                momentumRaf = requestAnimationFrame(stepX);
-                return;
-            }
             if (!pageScroller)
                 return;
             vy = win > 0 ? (last.y - first.y) / win : 0;
@@ -14873,7 +14865,7 @@ class SuiTable {
         return this.columns().map((_, i) => i);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTable, isStandalone: true, selector: "sui-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRows: "selectedRowsChange", sortKey: "sortKeyChange", sortDir: "sortDirChange", rowClicked: "rowClicked", sortChanged: "sortChanged" }, host: { properties: { "attr.data-sui-size": "size()", "attr.data-sui-striped": "striped() ? \"\" : null", "attr.data-sui-selectable": "selectable() ? \"\" : null", "attr.data-sui-loading": "loading() ? \"\" : null", "attr.data-sui-sticky": "hasStickyColumn() ? \"\" : null" } }, queries: [{ propertyName: "cellTemplates", predicate: SuiTableCellDirective }], viewQueries: [{ propertyName: "scrollEl", first: true, predicate: ["scrollEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550 SUI Table \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-table\" #scrollEl>\n\n  <!-- Header -->\n  <div class=\"sui-table__header\">\n    <!-- Checkbox header (selectable mode) \u2014 compone sui-checkbox (canon) -->\n    @if (selectable()) {\n      <div class=\"sui-table__header-cell sui-table__header-cell--checkbox\">\n        <sui-checkbox\n          [checked]=\"allSelected\"\n          [indeterminate]=\"partialSelected\"\n          (checkedChange)=\"toggleAll()\"\n          (click)=\"$event.stopPropagation()\"\n          aria-label=\"Seleccionar todas las filas\"\n        />\n      </div>\n    }\n\n    @for (col of columns(); track col.key) {\n      <div\n        class=\"sui-table__header-cell\"\n        [class.sui-table__header-cell--sortable]=\"col.sortable && !col.disabled\"\n        [class.sui-table__header-cell--sorted]=\"isSortActive(col.key)\"\n        [class.sui-table__header-cell--disabled]=\"col.disabled\"\n        [class.sui-table__header-cell--center]=\"col.align === 'center'\"\n        [class.sui-table__header-cell--right]=\"col.align === 'right'\"\n        [class.sui-table__header-cell--empty]=\"!col.label\"\n        [class.sui-table__header-cell--sticky]=\"col.sticky\"\n        [style.width]=\"col.width ?? null\"\n        [style.min-width]=\"colMinWidth(col)\"\n        [style.max-width]=\"col.maxWidth ?? null\"\n        [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n        (click)=\"!col.disabled && onSort(col)\"\n        [attr.tabindex]=\"col.sortable && !col.disabled ? '0' : null\"\n        [attr.role]=\"col.sortable ? 'columnheader' : null\"\n        [attr.aria-disabled]=\"col.disabled ? 'true' : null\"\n        [attr.aria-sort]=\"col.sortable ? (isSortActive(col.key) ? (sortDir() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n        (keydown.enter)=\"!col.disabled && onSort(col)\"\n        (keydown.space)=\"$event.preventDefault(); !col.disabled && onSort(col)\"\n      >\n        @if (col.label) {\n          <span class=\"sui-table__header-label\">{{ col.label }}</span>\n        }\n        @if (col.sortable) {\n          <span class=\"sui-table__sort-icon\" [class.sui-table__sort-icon--active]=\"isSortActive(col.key)\">\n            @if (!isSortActive(col.key)) {\n              <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n            } @else if (sortDir() === 'asc') {\n              <sui-icon name=\"arrow-up-s-fill\" [size]=\"20\" />\n            } @else {\n              <sui-icon name=\"arrow-down-s-fill\" [size]=\"20\" />\n            }\n          </span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Body: Loading skeleton -->\n  @if (loading()) {\n    <div class=\"sui-table__body\">\n      @for (sk of skeletonRows; track sk) {\n        <div class=\"sui-table__row sui-table__row--skeleton\">\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\">\n              <span class=\"sui-table__skeleton-box sui-table__skeleton-box--sm\"></span>\n            </div>\n          }\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <span class=\"sui-table__skeleton-box\"></span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Body: Empty state -->\n  @else if (rows().length === 0) {\n    <div class=\"sui-table__empty\">\n      <sui-icon name=\"inbox-line\" [size]=\"40\" class=\"sui-table__empty-icon\" />\n      <p class=\"sui-table__empty-msg\">{{ emptyMessage() }}</p>\n    </div>\n  }\n\n  <!-- Body: Data rows -->\n  @else {\n    <div class=\"sui-table__body\">\n      @for (row of rows(); track getRowKey(row, $index); let i = $index) {\n        <div\n          class=\"sui-table__row\"\n          [class.sui-table__row--selected]=\"selectedRows().has(getRowKey(row, i))\"\n          [class.sui-table__row--striped]=\"striped() && i % 2 === 1\"\n          (click)=\"rowClicked.emit(row)\"\n        >\n          <!-- Checkbox column \u2014 compone sui-checkbox (canon) -->\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\" (click)=\"$event.stopPropagation()\">\n              <sui-checkbox\n                [checked]=\"selectedRows().has(getRowKey(row, i))\"\n                (checkedChange)=\"toggleRow(row, i)\"\n                aria-label=\"Seleccionar fila\"\n              />\n            </div>\n          }\n\n          <!-- Data columns -->\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--center]=\"col.align === 'center'\"\n              [class.sui-table__cell--right]=\"col.align === 'right'\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [class.sui-table__cell--leading]=\"cellPriority(col) === 'leading'\"\n              [class.sui-table__cell--passive]=\"cellPriority(col) === 'passive'\"\n              [class.sui-table__cell--none]=\"cellPriority(col) === 'none'\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <!-- Custom template via SuiTableCellDirective -->\n              @if (getTemplate(col.key); as tmpl) {\n                <ng-container *ngTemplateOutlet=\"tmpl.templateRef; context: { $implicit: row }\"></ng-container>\n              } @else if (getCellDescription(row, col); as desc) {\n                <!-- Texto + sub-texto (Figma Priority=Leading, 2da l\u00EDnea XSmall) -->\n                <span class=\"sui-table__cell-block\">\n                  <span\n                    class=\"sui-table__cell-text\"\n                    [class.sui-table__cell-text--truncate]=\"col.truncate\"\n                    [suiTooltip]=\"getCellTooltip(row, col)\"\n                  >{{ getCellValue(row, col.key) }}</span>\n                  <span class=\"sui-table__cell-desc\">{{ desc }}</span>\n                </span>\n              } @else if (col.truncate) {\n                <!-- Texto truncado + tooltip con el valor completo -->\n                <span\n                  class=\"sui-table__cell-text sui-table__cell-text--truncate\"\n                  [suiTooltip]=\"getCellTooltip(row, col)\"\n                >{{ getCellValue(row, col.key) }}</span>\n              } @else {\n                <!-- Default text rendering -->\n                <span class=\"sui-table__cell-text\">{{ getCellValue(row, col.key) }}</span>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- Row divider (not after last row) -->\n        @if (i < rows().length - 1) {\n          <div class=\"sui-table__divider\"></div>\n        }\n      }\n    </div>\n  }\n\n</div>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block;width:100%}.sui-table{display:flex;flex-direction:column;width:100%;overflow:hidden;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}:host([data-sui-sticky]) .sui-table__header,:host([data-sui-sticky]) .sui-table__row{overflow:visible}@media(max-width:767px){.sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}}@media(max-width:767px)and (max-width:767px){.sui-table{scrollbar-width:none}.sui-table::-webkit-scrollbar{display:none;width:0;height:0}}@media(max-width:767px){.sui-table .sui-table__header,.sui-table .sui-table__body{min-width:max-content}.sui-table .sui-table__cell,.sui-table .sui-table__header-cell{min-width:120px}.sui-table .sui-table__cell--checkbox,.sui-table .sui-table__header-cell--checkbox{min-width:44px}.sui-table .sui-table__header-cell--empty{min-width:0}}:host([data-sui-sticky]) .sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}@media(max-width:767px){:host([data-sui-sticky]) .sui-table{scrollbar-width:none}:host([data-sui-sticky]) .sui-table::-webkit-scrollbar{display:none;width:0;height:0}}:host([data-sui-sticky]) .sui-table .sui-table__header,:host([data-sui-sticky]) .sui-table .sui-table__body{min-width:max-content}:host([data-sui-sticky]) .sui-table .sui-table__cell,:host([data-sui-sticky]) .sui-table .sui-table__header-cell{min-width:120px}:host([data-sui-sticky]) .sui-table .sui-table__cell--checkbox,:host([data-sui-sticky]) .sui-table .sui-table__header-cell--checkbox{min-width:44px}:host([data-sui-sticky]) .sui-table .sui-table__header-cell--empty{min-width:0}.sui-table__header{display:flex;align-items:flex-start;background:var(--sui-bg-weak-50);border-radius:var(--sui-radius-8);overflow:hidden;min-height:36px;flex-shrink:0}.sui-table__header-cell{display:flex;align-items:center;gap:2px;padding:8px 12px;min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600)}.sui-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sui-table__header-cell--sortable:hover{color:var(--sui-text-strong-950)}.sui-table__header-cell--sortable:hover .sui-table__sort-icon{opacity:1}.sui-table__header-cell--sortable:focus-visible{outline:2px solid var(--sui-primary-alpha-10);outline-offset:-2px;border-radius:var(--sui-radius-4)}.sui-table__header-cell--sorted{color:var(--sui-text-strong-950)}.sui-table__header-cell--disabled{cursor:default;pointer-events:none;color:var(--sui-text-disabled-300)}.sui-table__header-cell--disabled .sui-table__sort-icon{color:var(--sui-text-disabled-300);opacity:1}.sui-table__header-cell--empty{flex-shrink:0;padding:0}.sui-table__header-cell--center{justify-content:center}.sui-table__header-cell--right{justify-content:flex-end}.sui-table__header-cell--checkbox{flex:0 0 44px;justify-content:center}.sui-table__header-cell--sticky{position:sticky;left:0;z-index:2;background:var(--sui-bg-weak-50)}.sui-table__header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.sui-table__sort-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--sui-text-soft-400);opacity:.6;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-table__sort-icon--active{color:var(--sui-text-strong-950);opacity:1}.sui-table__body{display:flex;flex-direction:column;width:100%}.sui-table__row{display:flex;align-items:center;width:100%;border-radius:var(--sui-radius-12);overflow:hidden;cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);box-sizing:border-box}.sui-table__row:hover,.sui-table__row:hover .sui-table__cell,.sui-table__row:active,.sui-table__row:active .sui-table__cell{background:var(--sui-bg-weak-50)}.sui-table__row--selected{background:var(--sui-primary-alpha-10)}.sui-table__row--selected:hover{background:var(--sui-primary-alpha-16)}.sui-table__row--striped{background:var(--sui-bg-weak-50)}.sui-table__row--skeleton{pointer-events:none;cursor:default}.sui-table__row--skeleton:hover{background:transparent}.sui-table__row--skeleton:hover .sui-table__cell{background:var(--sui-bg-white-0)}:host([data-sui-size=medium]) .sui-table__cell{min-height:64px;padding:12px 20px 12px 12px}:host([data-sui-size=small]) .sui-table__cell{min-height:48px;padding:8px 16px 8px 12px}:host([data-sui-size=large]) .sui-table__cell{min-height:80px;padding:16px 20px 16px 12px}:host([data-sui-size=xlarge]) .sui-table__cell{min-height:96px;padding:20px 20px 20px 12px}.sui-table__cell{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;box-sizing:border-box;background:var(--sui-bg-white-0);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}.sui-table__cell--center{justify-content:center}.sui-table__cell--right{justify-content:flex-end}.sui-table__cell--checkbox{flex:0 0 44px;justify-content:center;padding:0 12px}.sui-table__cell--leading{font-weight:var(--sui-type-label-sm-weight);color:var(--sui-text-strong-950)}.sui-table__cell--passive{color:var(--sui-text-sub-600);font-weight:var(--sui-type-paragraph-sm-weight)}.sui-table__cell--sticky{position:sticky;left:0;z-index:1;background:var(--sui-bg-white-0)}.sui-table__row--selected .sui-table__cell{background:transparent}.sui-table__row--selected .sui-table__cell.sui-table__cell--sticky{background:var(--sui-primary-alpha-10)}.sui-table__cell-text{min-width:0}.sui-table__cell-text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;display:block}.sui-table__cell-block{display:flex;flex-direction:column;min-width:0}.sui-table__cell-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-table__cell--leading .sui-table__cell-text{font-weight:var(--sui-type-label-sm-weight)}.sui-table__cell--passive .sui-table__cell-text{font-weight:inherit;color:inherit}:host ::ng-deep .sui-table__leading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:10px;box-sizing:border-box;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-text-sub-600)}:host([data-sui-size=small]) ::ng-deep .sui-table__leading-icon{width:32px;height:32px;padding:6px}.sui-table__divider{width:100%;padding:1.5px 0;flex-shrink:0;background:var(--sui-bg-white-0)}.sui-table__divider:after{content:\"\";display:block;height:1px;background:var(--sui-stroke-soft-200)}.sui-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center}.sui-table__empty-icon{color:var(--sui-text-disabled-300)}.sui-table__empty-msg{margin:0;font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);color:var(--sui-text-sub-600)}.sui-table__skeleton-box{display:block;height:14px;width:100%;max-width:180px;border-radius:var(--sui-radius-4);background:linear-gradient(90deg,var(--sui-bg-soft-200) 25%,var(--sui-bg-weak-50) 50%,var(--sui-bg-soft-200) 75%);background-size:400% 100%;animation:sui-skeleton-pulse 1.4s ease-in-out infinite}.sui-table__skeleton-box--sm{width:20px;max-width:20px;height:20px;border-radius:var(--sui-radius-4)}@keyframes sui-skeleton-pulse{0%{background-position:100% 50%}to{background-position:0% 50%}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuiCheckbox, selector: "sui-checkbox", inputs: ["size", "checked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: SuiTooltip, selector: "[suiTooltip], [suiTooltipLarge]", inputs: ["suiTooltip", "suiTooltipLarge", "position", "suiTooltipSize", "theme", "delay", "disabled", "showArrow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTable, isStandalone: true, selector: "sui-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRows: "selectedRowsChange", sortKey: "sortKeyChange", sortDir: "sortDirChange", rowClicked: "rowClicked", sortChanged: "sortChanged" }, host: { properties: { "attr.data-sui-size": "size()", "attr.data-sui-striped": "striped() ? \"\" : null", "attr.data-sui-selectable": "selectable() ? \"\" : null", "attr.data-sui-loading": "loading() ? \"\" : null", "attr.data-sui-sticky": "hasStickyColumn() ? \"\" : null" } }, queries: [{ propertyName: "cellTemplates", predicate: SuiTableCellDirective }], viewQueries: [{ propertyName: "scrollEl", first: true, predicate: ["scrollEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550 SUI Table \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-table\" #scrollEl>\n\n  <!-- Header -->\n  <div class=\"sui-table__header\">\n    <!-- Checkbox header (selectable mode) \u2014 compone sui-checkbox (canon) -->\n    @if (selectable()) {\n      <div class=\"sui-table__header-cell sui-table__header-cell--checkbox\">\n        <sui-checkbox\n          [checked]=\"allSelected\"\n          [indeterminate]=\"partialSelected\"\n          (checkedChange)=\"toggleAll()\"\n          (click)=\"$event.stopPropagation()\"\n          aria-label=\"Seleccionar todas las filas\"\n        />\n      </div>\n    }\n\n    @for (col of columns(); track col.key) {\n      <div\n        class=\"sui-table__header-cell\"\n        [class.sui-table__header-cell--sortable]=\"col.sortable && !col.disabled\"\n        [class.sui-table__header-cell--sorted]=\"isSortActive(col.key)\"\n        [class.sui-table__header-cell--disabled]=\"col.disabled\"\n        [class.sui-table__header-cell--center]=\"col.align === 'center'\"\n        [class.sui-table__header-cell--right]=\"col.align === 'right'\"\n        [class.sui-table__header-cell--empty]=\"!col.label\"\n        [class.sui-table__header-cell--sticky]=\"col.sticky\"\n        [style.width]=\"col.width ?? null\"\n        [style.min-width]=\"colMinWidth(col)\"\n        [style.max-width]=\"col.maxWidth ?? null\"\n        [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n        (click)=\"!col.disabled && onSort(col)\"\n        [attr.tabindex]=\"col.sortable && !col.disabled ? '0' : null\"\n        [attr.role]=\"col.sortable ? 'columnheader' : null\"\n        [attr.aria-disabled]=\"col.disabled ? 'true' : null\"\n        [attr.aria-sort]=\"col.sortable ? (isSortActive(col.key) ? (sortDir() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n        (keydown.enter)=\"!col.disabled && onSort(col)\"\n        (keydown.space)=\"$event.preventDefault(); !col.disabled && onSort(col)\"\n      >\n        @if (col.label) {\n          <span class=\"sui-table__header-label\">{{ col.label }}</span>\n        }\n        @if (col.sortable) {\n          <span class=\"sui-table__sort-icon\" [class.sui-table__sort-icon--active]=\"isSortActive(col.key)\">\n            @if (!isSortActive(col.key)) {\n              <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n            } @else if (sortDir() === 'asc') {\n              <sui-icon name=\"arrow-up-s-fill\" [size]=\"20\" />\n            } @else {\n              <sui-icon name=\"arrow-down-s-fill\" [size]=\"20\" />\n            }\n          </span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Body: Loading skeleton -->\n  @if (loading()) {\n    <div class=\"sui-table__body\">\n      @for (sk of skeletonRows; track sk) {\n        <div class=\"sui-table__row sui-table__row--skeleton\">\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\">\n              <span class=\"sui-table__skeleton-box sui-table__skeleton-box--sm\"></span>\n            </div>\n          }\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <span class=\"sui-table__skeleton-box\"></span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Body: Empty state -->\n  @else if (rows().length === 0) {\n    <div class=\"sui-table__empty\">\n      <sui-icon name=\"inbox-line\" [size]=\"40\" class=\"sui-table__empty-icon\" />\n      <p class=\"sui-table__empty-msg\">{{ emptyMessage() }}</p>\n    </div>\n  }\n\n  <!-- Body: Data rows -->\n  @else {\n    <div class=\"sui-table__body\">\n      @for (row of rows(); track getRowKey(row, $index); let i = $index) {\n        <div\n          class=\"sui-table__row\"\n          [class.sui-table__row--selected]=\"selectedRows().has(getRowKey(row, i))\"\n          [class.sui-table__row--striped]=\"striped() && i % 2 === 1\"\n          (click)=\"rowClicked.emit(row)\"\n        >\n          <!-- Checkbox column \u2014 compone sui-checkbox (canon) -->\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\" (click)=\"$event.stopPropagation()\">\n              <sui-checkbox\n                [checked]=\"selectedRows().has(getRowKey(row, i))\"\n                (checkedChange)=\"toggleRow(row, i)\"\n                aria-label=\"Seleccionar fila\"\n              />\n            </div>\n          }\n\n          <!-- Data columns -->\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--center]=\"col.align === 'center'\"\n              [class.sui-table__cell--right]=\"col.align === 'right'\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [class.sui-table__cell--leading]=\"cellPriority(col) === 'leading'\"\n              [class.sui-table__cell--passive]=\"cellPriority(col) === 'passive'\"\n              [class.sui-table__cell--none]=\"cellPriority(col) === 'none'\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <!-- Custom template via SuiTableCellDirective -->\n              @if (getTemplate(col.key); as tmpl) {\n                <ng-container *ngTemplateOutlet=\"tmpl.templateRef; context: { $implicit: row }\"></ng-container>\n              } @else if (getCellDescription(row, col); as desc) {\n                <!-- Texto + sub-texto (Figma Priority=Leading, 2da l\u00EDnea XSmall) -->\n                <span class=\"sui-table__cell-block\">\n                  <span\n                    class=\"sui-table__cell-text\"\n                    [class.sui-table__cell-text--truncate]=\"col.truncate\"\n                    [suiTooltip]=\"getCellTooltip(row, col)\"\n                  >{{ getCellValue(row, col.key) }}</span>\n                  <span class=\"sui-table__cell-desc\">{{ desc }}</span>\n                </span>\n              } @else if (col.truncate) {\n                <!-- Texto truncado + tooltip con el valor completo -->\n                <span\n                  class=\"sui-table__cell-text sui-table__cell-text--truncate\"\n                  [suiTooltip]=\"getCellTooltip(row, col)\"\n                >{{ getCellValue(row, col.key) }}</span>\n              } @else {\n                <!-- Default text rendering -->\n                <span class=\"sui-table__cell-text\">{{ getCellValue(row, col.key) }}</span>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- Row divider (not after last row) -->\n        @if (i < rows().length - 1) {\n          <div class=\"sui-table__divider\"></div>\n        }\n      }\n    </div>\n  }\n\n</div>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block;width:100%}.sui-table{display:flex;flex-direction:column;width:100%;overflow:hidden;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}:host([data-sui-sticky]) .sui-table__header,:host([data-sui-sticky]) .sui-table__row{overflow:visible}@media(max-width:767px){.sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;background:var(--sui-bg-white-0);overscroll-behavior-y:none}}@media(max-width:767px)and (max-width:767px){.sui-table{scrollbar-width:none}.sui-table::-webkit-scrollbar{display:none;width:0;height:0}}@media(max-width:767px){.sui-table .sui-table__header,.sui-table .sui-table__body{min-width:max-content}.sui-table .sui-table__cell,.sui-table .sui-table__header-cell{min-width:120px}.sui-table .sui-table__cell--checkbox,.sui-table .sui-table__header-cell--checkbox{min-width:44px}.sui-table .sui-table__header-cell--empty{min-width:0}}:host([data-sui-sticky]) .sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;background:var(--sui-bg-white-0);overscroll-behavior-y:none}@media(max-width:767px){:host([data-sui-sticky]) .sui-table{scrollbar-width:none}:host([data-sui-sticky]) .sui-table::-webkit-scrollbar{display:none;width:0;height:0}}:host([data-sui-sticky]) .sui-table .sui-table__header,:host([data-sui-sticky]) .sui-table .sui-table__body{min-width:max-content}:host([data-sui-sticky]) .sui-table .sui-table__cell,:host([data-sui-sticky]) .sui-table .sui-table__header-cell{min-width:120px}:host([data-sui-sticky]) .sui-table .sui-table__cell--checkbox,:host([data-sui-sticky]) .sui-table .sui-table__header-cell--checkbox{min-width:44px}:host([data-sui-sticky]) .sui-table .sui-table__header-cell--empty{min-width:0}.sui-table__header{display:flex;align-items:flex-start;background:var(--sui-bg-weak-50);border-radius:var(--sui-radius-8);overflow:hidden;min-height:36px;flex-shrink:0}.sui-table__header-cell{display:flex;align-items:center;gap:2px;padding:8px 12px;min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600)}.sui-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sui-table__header-cell--sortable:hover{color:var(--sui-text-strong-950)}.sui-table__header-cell--sortable:hover .sui-table__sort-icon{opacity:1}.sui-table__header-cell--sortable:focus-visible{outline:2px solid var(--sui-primary-alpha-10);outline-offset:-2px;border-radius:var(--sui-radius-4)}.sui-table__header-cell--sorted{color:var(--sui-text-strong-950)}.sui-table__header-cell--disabled{cursor:default;pointer-events:none;color:var(--sui-text-disabled-300)}.sui-table__header-cell--disabled .sui-table__sort-icon{color:var(--sui-text-disabled-300);opacity:1}.sui-table__header-cell--empty{flex-shrink:0;padding:0}.sui-table__header-cell--center{justify-content:center}.sui-table__header-cell--right{justify-content:flex-end}.sui-table__header-cell--checkbox{flex:0 0 44px;justify-content:center}.sui-table__header-cell--sticky{position:sticky;left:0;z-index:2;background:var(--sui-bg-weak-50)}.sui-table__header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.sui-table__sort-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--sui-text-soft-400);opacity:.6;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-table__sort-icon--active{color:var(--sui-text-strong-950);opacity:1}.sui-table__body{display:flex;flex-direction:column;width:100%}.sui-table__row{display:flex;align-items:center;width:100%;border-radius:var(--sui-radius-12);overflow:hidden;cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);box-sizing:border-box}.sui-table__row:hover,.sui-table__row:hover .sui-table__cell,.sui-table__row:active,.sui-table__row:active .sui-table__cell{background:var(--sui-bg-weak-50)}.sui-table__row--selected{background:var(--sui-primary-alpha-10)}.sui-table__row--selected:hover{background:var(--sui-primary-alpha-16)}.sui-table__row--striped{background:var(--sui-bg-weak-50)}.sui-table__row--skeleton{pointer-events:none;cursor:default}.sui-table__row--skeleton:hover{background:transparent}.sui-table__row--skeleton:hover .sui-table__cell{background:var(--sui-bg-white-0)}:host([data-sui-size=medium]) .sui-table__cell{min-height:64px;padding:12px 20px 12px 12px}:host([data-sui-size=small]) .sui-table__cell{min-height:48px;padding:8px 16px 8px 12px}:host([data-sui-size=large]) .sui-table__cell{min-height:80px;padding:16px 20px 16px 12px}:host([data-sui-size=xlarge]) .sui-table__cell{min-height:96px;padding:20px 20px 20px 12px}.sui-table__cell{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;box-sizing:border-box;background:var(--sui-bg-white-0);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}.sui-table__cell--center{justify-content:center}.sui-table__cell--right{justify-content:flex-end}.sui-table__cell--checkbox{flex:0 0 44px;justify-content:center;padding:0 12px}.sui-table__cell--leading{font-weight:var(--sui-type-label-sm-weight);color:var(--sui-text-strong-950)}.sui-table__cell--passive{color:var(--sui-text-sub-600);font-weight:var(--sui-type-paragraph-sm-weight)}.sui-table__cell--sticky{position:sticky;left:0;z-index:1;background:var(--sui-bg-white-0)}.sui-table__row--selected .sui-table__cell{background:transparent}.sui-table__row--selected .sui-table__cell.sui-table__cell--sticky{background:var(--sui-primary-alpha-10)}.sui-table__cell-text{min-width:0}.sui-table__cell-text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;display:block}.sui-table__cell-block{display:flex;flex-direction:column;min-width:0}.sui-table__cell-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-table__cell--leading .sui-table__cell-text{font-weight:var(--sui-type-label-sm-weight)}.sui-table__cell--passive .sui-table__cell-text{font-weight:inherit;color:inherit}:host ::ng-deep .sui-table__leading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:10px;box-sizing:border-box;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-text-sub-600)}:host([data-sui-size=small]) ::ng-deep .sui-table__leading-icon{width:32px;height:32px;padding:6px}.sui-table__divider{width:100%;padding:1.5px 0;flex-shrink:0;background:var(--sui-bg-white-0)}.sui-table__divider:after{content:\"\";display:block;height:1px;background:var(--sui-stroke-soft-200)}.sui-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center}.sui-table__empty-icon{color:var(--sui-text-disabled-300)}.sui-table__empty-msg{margin:0;font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);color:var(--sui-text-sub-600)}.sui-table__skeleton-box{display:block;height:14px;width:100%;max-width:180px;border-radius:var(--sui-radius-4);background:linear-gradient(90deg,var(--sui-bg-soft-200) 25%,var(--sui-bg-weak-50) 50%,var(--sui-bg-soft-200) 75%);background-size:400% 100%;animation:sui-skeleton-pulse 1.4s ease-in-out infinite}.sui-table__skeleton-box--sm{width:20px;max-width:20px;height:20px;border-radius:var(--sui-radius-4)}@keyframes sui-skeleton-pulse{0%{background-position:100% 50%}to{background-position:0% 50%}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuiCheckbox, selector: "sui-checkbox", inputs: ["size", "checked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: SuiTooltip, selector: "[suiTooltip], [suiTooltipLarge]", inputs: ["suiTooltip", "suiTooltipLarge", "position", "suiTooltipSize", "theme", "delay", "disabled", "showArrow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTable, decorators: [{
             type: Component,
@@ -14883,7 +14875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-sui-selectable]': 'selectable() ? "" : null',
                         '[attr.data-sui-loading]': 'loading() ? "" : null',
                         '[attr.data-sui-sticky]': 'hasStickyColumn() ? "" : null',
-                    }, template: "<!-- \u2550\u2550 SUI Table \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-table\" #scrollEl>\n\n  <!-- Header -->\n  <div class=\"sui-table__header\">\n    <!-- Checkbox header (selectable mode) \u2014 compone sui-checkbox (canon) -->\n    @if (selectable()) {\n      <div class=\"sui-table__header-cell sui-table__header-cell--checkbox\">\n        <sui-checkbox\n          [checked]=\"allSelected\"\n          [indeterminate]=\"partialSelected\"\n          (checkedChange)=\"toggleAll()\"\n          (click)=\"$event.stopPropagation()\"\n          aria-label=\"Seleccionar todas las filas\"\n        />\n      </div>\n    }\n\n    @for (col of columns(); track col.key) {\n      <div\n        class=\"sui-table__header-cell\"\n        [class.sui-table__header-cell--sortable]=\"col.sortable && !col.disabled\"\n        [class.sui-table__header-cell--sorted]=\"isSortActive(col.key)\"\n        [class.sui-table__header-cell--disabled]=\"col.disabled\"\n        [class.sui-table__header-cell--center]=\"col.align === 'center'\"\n        [class.sui-table__header-cell--right]=\"col.align === 'right'\"\n        [class.sui-table__header-cell--empty]=\"!col.label\"\n        [class.sui-table__header-cell--sticky]=\"col.sticky\"\n        [style.width]=\"col.width ?? null\"\n        [style.min-width]=\"colMinWidth(col)\"\n        [style.max-width]=\"col.maxWidth ?? null\"\n        [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n        (click)=\"!col.disabled && onSort(col)\"\n        [attr.tabindex]=\"col.sortable && !col.disabled ? '0' : null\"\n        [attr.role]=\"col.sortable ? 'columnheader' : null\"\n        [attr.aria-disabled]=\"col.disabled ? 'true' : null\"\n        [attr.aria-sort]=\"col.sortable ? (isSortActive(col.key) ? (sortDir() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n        (keydown.enter)=\"!col.disabled && onSort(col)\"\n        (keydown.space)=\"$event.preventDefault(); !col.disabled && onSort(col)\"\n      >\n        @if (col.label) {\n          <span class=\"sui-table__header-label\">{{ col.label }}</span>\n        }\n        @if (col.sortable) {\n          <span class=\"sui-table__sort-icon\" [class.sui-table__sort-icon--active]=\"isSortActive(col.key)\">\n            @if (!isSortActive(col.key)) {\n              <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n            } @else if (sortDir() === 'asc') {\n              <sui-icon name=\"arrow-up-s-fill\" [size]=\"20\" />\n            } @else {\n              <sui-icon name=\"arrow-down-s-fill\" [size]=\"20\" />\n            }\n          </span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Body: Loading skeleton -->\n  @if (loading()) {\n    <div class=\"sui-table__body\">\n      @for (sk of skeletonRows; track sk) {\n        <div class=\"sui-table__row sui-table__row--skeleton\">\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\">\n              <span class=\"sui-table__skeleton-box sui-table__skeleton-box--sm\"></span>\n            </div>\n          }\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <span class=\"sui-table__skeleton-box\"></span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Body: Empty state -->\n  @else if (rows().length === 0) {\n    <div class=\"sui-table__empty\">\n      <sui-icon name=\"inbox-line\" [size]=\"40\" class=\"sui-table__empty-icon\" />\n      <p class=\"sui-table__empty-msg\">{{ emptyMessage() }}</p>\n    </div>\n  }\n\n  <!-- Body: Data rows -->\n  @else {\n    <div class=\"sui-table__body\">\n      @for (row of rows(); track getRowKey(row, $index); let i = $index) {\n        <div\n          class=\"sui-table__row\"\n          [class.sui-table__row--selected]=\"selectedRows().has(getRowKey(row, i))\"\n          [class.sui-table__row--striped]=\"striped() && i % 2 === 1\"\n          (click)=\"rowClicked.emit(row)\"\n        >\n          <!-- Checkbox column \u2014 compone sui-checkbox (canon) -->\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\" (click)=\"$event.stopPropagation()\">\n              <sui-checkbox\n                [checked]=\"selectedRows().has(getRowKey(row, i))\"\n                (checkedChange)=\"toggleRow(row, i)\"\n                aria-label=\"Seleccionar fila\"\n              />\n            </div>\n          }\n\n          <!-- Data columns -->\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--center]=\"col.align === 'center'\"\n              [class.sui-table__cell--right]=\"col.align === 'right'\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [class.sui-table__cell--leading]=\"cellPriority(col) === 'leading'\"\n              [class.sui-table__cell--passive]=\"cellPriority(col) === 'passive'\"\n              [class.sui-table__cell--none]=\"cellPriority(col) === 'none'\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <!-- Custom template via SuiTableCellDirective -->\n              @if (getTemplate(col.key); as tmpl) {\n                <ng-container *ngTemplateOutlet=\"tmpl.templateRef; context: { $implicit: row }\"></ng-container>\n              } @else if (getCellDescription(row, col); as desc) {\n                <!-- Texto + sub-texto (Figma Priority=Leading, 2da l\u00EDnea XSmall) -->\n                <span class=\"sui-table__cell-block\">\n                  <span\n                    class=\"sui-table__cell-text\"\n                    [class.sui-table__cell-text--truncate]=\"col.truncate\"\n                    [suiTooltip]=\"getCellTooltip(row, col)\"\n                  >{{ getCellValue(row, col.key) }}</span>\n                  <span class=\"sui-table__cell-desc\">{{ desc }}</span>\n                </span>\n              } @else if (col.truncate) {\n                <!-- Texto truncado + tooltip con el valor completo -->\n                <span\n                  class=\"sui-table__cell-text sui-table__cell-text--truncate\"\n                  [suiTooltip]=\"getCellTooltip(row, col)\"\n                >{{ getCellValue(row, col.key) }}</span>\n              } @else {\n                <!-- Default text rendering -->\n                <span class=\"sui-table__cell-text\">{{ getCellValue(row, col.key) }}</span>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- Row divider (not after last row) -->\n        @if (i < rows().length - 1) {\n          <div class=\"sui-table__divider\"></div>\n        }\n      }\n    </div>\n  }\n\n</div>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block;width:100%}.sui-table{display:flex;flex-direction:column;width:100%;overflow:hidden;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}:host([data-sui-sticky]) .sui-table__header,:host([data-sui-sticky]) .sui-table__row{overflow:visible}@media(max-width:767px){.sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}}@media(max-width:767px)and (max-width:767px){.sui-table{scrollbar-width:none}.sui-table::-webkit-scrollbar{display:none;width:0;height:0}}@media(max-width:767px){.sui-table .sui-table__header,.sui-table .sui-table__body{min-width:max-content}.sui-table .sui-table__cell,.sui-table .sui-table__header-cell{min-width:120px}.sui-table .sui-table__cell--checkbox,.sui-table .sui-table__header-cell--checkbox{min-width:44px}.sui-table .sui-table__header-cell--empty{min-width:0}}:host([data-sui-sticky]) .sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}@media(max-width:767px){:host([data-sui-sticky]) .sui-table{scrollbar-width:none}:host([data-sui-sticky]) .sui-table::-webkit-scrollbar{display:none;width:0;height:0}}:host([data-sui-sticky]) .sui-table .sui-table__header,:host([data-sui-sticky]) .sui-table .sui-table__body{min-width:max-content}:host([data-sui-sticky]) .sui-table .sui-table__cell,:host([data-sui-sticky]) .sui-table .sui-table__header-cell{min-width:120px}:host([data-sui-sticky]) .sui-table .sui-table__cell--checkbox,:host([data-sui-sticky]) .sui-table .sui-table__header-cell--checkbox{min-width:44px}:host([data-sui-sticky]) .sui-table .sui-table__header-cell--empty{min-width:0}.sui-table__header{display:flex;align-items:flex-start;background:var(--sui-bg-weak-50);border-radius:var(--sui-radius-8);overflow:hidden;min-height:36px;flex-shrink:0}.sui-table__header-cell{display:flex;align-items:center;gap:2px;padding:8px 12px;min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600)}.sui-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sui-table__header-cell--sortable:hover{color:var(--sui-text-strong-950)}.sui-table__header-cell--sortable:hover .sui-table__sort-icon{opacity:1}.sui-table__header-cell--sortable:focus-visible{outline:2px solid var(--sui-primary-alpha-10);outline-offset:-2px;border-radius:var(--sui-radius-4)}.sui-table__header-cell--sorted{color:var(--sui-text-strong-950)}.sui-table__header-cell--disabled{cursor:default;pointer-events:none;color:var(--sui-text-disabled-300)}.sui-table__header-cell--disabled .sui-table__sort-icon{color:var(--sui-text-disabled-300);opacity:1}.sui-table__header-cell--empty{flex-shrink:0;padding:0}.sui-table__header-cell--center{justify-content:center}.sui-table__header-cell--right{justify-content:flex-end}.sui-table__header-cell--checkbox{flex:0 0 44px;justify-content:center}.sui-table__header-cell--sticky{position:sticky;left:0;z-index:2;background:var(--sui-bg-weak-50)}.sui-table__header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.sui-table__sort-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--sui-text-soft-400);opacity:.6;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-table__sort-icon--active{color:var(--sui-text-strong-950);opacity:1}.sui-table__body{display:flex;flex-direction:column;width:100%}.sui-table__row{display:flex;align-items:center;width:100%;border-radius:var(--sui-radius-12);overflow:hidden;cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);box-sizing:border-box}.sui-table__row:hover,.sui-table__row:hover .sui-table__cell,.sui-table__row:active,.sui-table__row:active .sui-table__cell{background:var(--sui-bg-weak-50)}.sui-table__row--selected{background:var(--sui-primary-alpha-10)}.sui-table__row--selected:hover{background:var(--sui-primary-alpha-16)}.sui-table__row--striped{background:var(--sui-bg-weak-50)}.sui-table__row--skeleton{pointer-events:none;cursor:default}.sui-table__row--skeleton:hover{background:transparent}.sui-table__row--skeleton:hover .sui-table__cell{background:var(--sui-bg-white-0)}:host([data-sui-size=medium]) .sui-table__cell{min-height:64px;padding:12px 20px 12px 12px}:host([data-sui-size=small]) .sui-table__cell{min-height:48px;padding:8px 16px 8px 12px}:host([data-sui-size=large]) .sui-table__cell{min-height:80px;padding:16px 20px 16px 12px}:host([data-sui-size=xlarge]) .sui-table__cell{min-height:96px;padding:20px 20px 20px 12px}.sui-table__cell{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;box-sizing:border-box;background:var(--sui-bg-white-0);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}.sui-table__cell--center{justify-content:center}.sui-table__cell--right{justify-content:flex-end}.sui-table__cell--checkbox{flex:0 0 44px;justify-content:center;padding:0 12px}.sui-table__cell--leading{font-weight:var(--sui-type-label-sm-weight);color:var(--sui-text-strong-950)}.sui-table__cell--passive{color:var(--sui-text-sub-600);font-weight:var(--sui-type-paragraph-sm-weight)}.sui-table__cell--sticky{position:sticky;left:0;z-index:1;background:var(--sui-bg-white-0)}.sui-table__row--selected .sui-table__cell{background:transparent}.sui-table__row--selected .sui-table__cell.sui-table__cell--sticky{background:var(--sui-primary-alpha-10)}.sui-table__cell-text{min-width:0}.sui-table__cell-text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;display:block}.sui-table__cell-block{display:flex;flex-direction:column;min-width:0}.sui-table__cell-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-table__cell--leading .sui-table__cell-text{font-weight:var(--sui-type-label-sm-weight)}.sui-table__cell--passive .sui-table__cell-text{font-weight:inherit;color:inherit}:host ::ng-deep .sui-table__leading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:10px;box-sizing:border-box;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-text-sub-600)}:host([data-sui-size=small]) ::ng-deep .sui-table__leading-icon{width:32px;height:32px;padding:6px}.sui-table__divider{width:100%;padding:1.5px 0;flex-shrink:0;background:var(--sui-bg-white-0)}.sui-table__divider:after{content:\"\";display:block;height:1px;background:var(--sui-stroke-soft-200)}.sui-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center}.sui-table__empty-icon{color:var(--sui-text-disabled-300)}.sui-table__empty-msg{margin:0;font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);color:var(--sui-text-sub-600)}.sui-table__skeleton-box{display:block;height:14px;width:100%;max-width:180px;border-radius:var(--sui-radius-4);background:linear-gradient(90deg,var(--sui-bg-soft-200) 25%,var(--sui-bg-weak-50) 50%,var(--sui-bg-soft-200) 75%);background-size:400% 100%;animation:sui-skeleton-pulse 1.4s ease-in-out infinite}.sui-table__skeleton-box--sm{width:20px;max-width:20px;height:20px;border-radius:var(--sui-radius-4)}@keyframes sui-skeleton-pulse{0%{background-position:100% 50%}to{background-position:0% 50%}}\n"] }]
+                    }, template: "<!-- \u2550\u2550 SUI Table \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-table\" #scrollEl>\n\n  <!-- Header -->\n  <div class=\"sui-table__header\">\n    <!-- Checkbox header (selectable mode) \u2014 compone sui-checkbox (canon) -->\n    @if (selectable()) {\n      <div class=\"sui-table__header-cell sui-table__header-cell--checkbox\">\n        <sui-checkbox\n          [checked]=\"allSelected\"\n          [indeterminate]=\"partialSelected\"\n          (checkedChange)=\"toggleAll()\"\n          (click)=\"$event.stopPropagation()\"\n          aria-label=\"Seleccionar todas las filas\"\n        />\n      </div>\n    }\n\n    @for (col of columns(); track col.key) {\n      <div\n        class=\"sui-table__header-cell\"\n        [class.sui-table__header-cell--sortable]=\"col.sortable && !col.disabled\"\n        [class.sui-table__header-cell--sorted]=\"isSortActive(col.key)\"\n        [class.sui-table__header-cell--disabled]=\"col.disabled\"\n        [class.sui-table__header-cell--center]=\"col.align === 'center'\"\n        [class.sui-table__header-cell--right]=\"col.align === 'right'\"\n        [class.sui-table__header-cell--empty]=\"!col.label\"\n        [class.sui-table__header-cell--sticky]=\"col.sticky\"\n        [style.width]=\"col.width ?? null\"\n        [style.min-width]=\"colMinWidth(col)\"\n        [style.max-width]=\"col.maxWidth ?? null\"\n        [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n        (click)=\"!col.disabled && onSort(col)\"\n        [attr.tabindex]=\"col.sortable && !col.disabled ? '0' : null\"\n        [attr.role]=\"col.sortable ? 'columnheader' : null\"\n        [attr.aria-disabled]=\"col.disabled ? 'true' : null\"\n        [attr.aria-sort]=\"col.sortable ? (isSortActive(col.key) ? (sortDir() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n        (keydown.enter)=\"!col.disabled && onSort(col)\"\n        (keydown.space)=\"$event.preventDefault(); !col.disabled && onSort(col)\"\n      >\n        @if (col.label) {\n          <span class=\"sui-table__header-label\">{{ col.label }}</span>\n        }\n        @if (col.sortable) {\n          <span class=\"sui-table__sort-icon\" [class.sui-table__sort-icon--active]=\"isSortActive(col.key)\">\n            @if (!isSortActive(col.key)) {\n              <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n            } @else if (sortDir() === 'asc') {\n              <sui-icon name=\"arrow-up-s-fill\" [size]=\"20\" />\n            } @else {\n              <sui-icon name=\"arrow-down-s-fill\" [size]=\"20\" />\n            }\n          </span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Body: Loading skeleton -->\n  @if (loading()) {\n    <div class=\"sui-table__body\">\n      @for (sk of skeletonRows; track sk) {\n        <div class=\"sui-table__row sui-table__row--skeleton\">\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\">\n              <span class=\"sui-table__skeleton-box sui-table__skeleton-box--sm\"></span>\n            </div>\n          }\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <span class=\"sui-table__skeleton-box\"></span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Body: Empty state -->\n  @else if (rows().length === 0) {\n    <div class=\"sui-table__empty\">\n      <sui-icon name=\"inbox-line\" [size]=\"40\" class=\"sui-table__empty-icon\" />\n      <p class=\"sui-table__empty-msg\">{{ emptyMessage() }}</p>\n    </div>\n  }\n\n  <!-- Body: Data rows -->\n  @else {\n    <div class=\"sui-table__body\">\n      @for (row of rows(); track getRowKey(row, $index); let i = $index) {\n        <div\n          class=\"sui-table__row\"\n          [class.sui-table__row--selected]=\"selectedRows().has(getRowKey(row, i))\"\n          [class.sui-table__row--striped]=\"striped() && i % 2 === 1\"\n          (click)=\"rowClicked.emit(row)\"\n        >\n          <!-- Checkbox column \u2014 compone sui-checkbox (canon) -->\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\" (click)=\"$event.stopPropagation()\">\n              <sui-checkbox\n                [checked]=\"selectedRows().has(getRowKey(row, i))\"\n                (checkedChange)=\"toggleRow(row, i)\"\n                aria-label=\"Seleccionar fila\"\n              />\n            </div>\n          }\n\n          <!-- Data columns -->\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--center]=\"col.align === 'center'\"\n              [class.sui-table__cell--right]=\"col.align === 'right'\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [class.sui-table__cell--leading]=\"cellPriority(col) === 'leading'\"\n              [class.sui-table__cell--passive]=\"cellPriority(col) === 'passive'\"\n              [class.sui-table__cell--none]=\"cellPriority(col) === 'none'\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <!-- Custom template via SuiTableCellDirective -->\n              @if (getTemplate(col.key); as tmpl) {\n                <ng-container *ngTemplateOutlet=\"tmpl.templateRef; context: { $implicit: row }\"></ng-container>\n              } @else if (getCellDescription(row, col); as desc) {\n                <!-- Texto + sub-texto (Figma Priority=Leading, 2da l\u00EDnea XSmall) -->\n                <span class=\"sui-table__cell-block\">\n                  <span\n                    class=\"sui-table__cell-text\"\n                    [class.sui-table__cell-text--truncate]=\"col.truncate\"\n                    [suiTooltip]=\"getCellTooltip(row, col)\"\n                  >{{ getCellValue(row, col.key) }}</span>\n                  <span class=\"sui-table__cell-desc\">{{ desc }}</span>\n                </span>\n              } @else if (col.truncate) {\n                <!-- Texto truncado + tooltip con el valor completo -->\n                <span\n                  class=\"sui-table__cell-text sui-table__cell-text--truncate\"\n                  [suiTooltip]=\"getCellTooltip(row, col)\"\n                >{{ getCellValue(row, col.key) }}</span>\n              } @else {\n                <!-- Default text rendering -->\n                <span class=\"sui-table__cell-text\">{{ getCellValue(row, col.key) }}</span>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- Row divider (not after last row) -->\n        @if (i < rows().length - 1) {\n          <div class=\"sui-table__divider\"></div>\n        }\n      }\n    </div>\n  }\n\n</div>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block;width:100%}.sui-table{display:flex;flex-direction:column;width:100%;overflow:hidden;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}:host([data-sui-sticky]) .sui-table__header,:host([data-sui-sticky]) .sui-table__row{overflow:visible}@media(max-width:767px){.sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;background:var(--sui-bg-white-0);overscroll-behavior-y:none}}@media(max-width:767px)and (max-width:767px){.sui-table{scrollbar-width:none}.sui-table::-webkit-scrollbar{display:none;width:0;height:0}}@media(max-width:767px){.sui-table .sui-table__header,.sui-table .sui-table__body{min-width:max-content}.sui-table .sui-table__cell,.sui-table .sui-table__header-cell{min-width:120px}.sui-table .sui-table__cell--checkbox,.sui-table .sui-table__header-cell--checkbox{min-width:44px}.sui-table .sui-table__header-cell--empty{min-width:0}}:host([data-sui-sticky]) .sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;background:var(--sui-bg-white-0);overscroll-behavior-y:none}@media(max-width:767px){:host([data-sui-sticky]) .sui-table{scrollbar-width:none}:host([data-sui-sticky]) .sui-table::-webkit-scrollbar{display:none;width:0;height:0}}:host([data-sui-sticky]) .sui-table .sui-table__header,:host([data-sui-sticky]) .sui-table .sui-table__body{min-width:max-content}:host([data-sui-sticky]) .sui-table .sui-table__cell,:host([data-sui-sticky]) .sui-table .sui-table__header-cell{min-width:120px}:host([data-sui-sticky]) .sui-table .sui-table__cell--checkbox,:host([data-sui-sticky]) .sui-table .sui-table__header-cell--checkbox{min-width:44px}:host([data-sui-sticky]) .sui-table .sui-table__header-cell--empty{min-width:0}.sui-table__header{display:flex;align-items:flex-start;background:var(--sui-bg-weak-50);border-radius:var(--sui-radius-8);overflow:hidden;min-height:36px;flex-shrink:0}.sui-table__header-cell{display:flex;align-items:center;gap:2px;padding:8px 12px;min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600)}.sui-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sui-table__header-cell--sortable:hover{color:var(--sui-text-strong-950)}.sui-table__header-cell--sortable:hover .sui-table__sort-icon{opacity:1}.sui-table__header-cell--sortable:focus-visible{outline:2px solid var(--sui-primary-alpha-10);outline-offset:-2px;border-radius:var(--sui-radius-4)}.sui-table__header-cell--sorted{color:var(--sui-text-strong-950)}.sui-table__header-cell--disabled{cursor:default;pointer-events:none;color:var(--sui-text-disabled-300)}.sui-table__header-cell--disabled .sui-table__sort-icon{color:var(--sui-text-disabled-300);opacity:1}.sui-table__header-cell--empty{flex-shrink:0;padding:0}.sui-table__header-cell--center{justify-content:center}.sui-table__header-cell--right{justify-content:flex-end}.sui-table__header-cell--checkbox{flex:0 0 44px;justify-content:center}.sui-table__header-cell--sticky{position:sticky;left:0;z-index:2;background:var(--sui-bg-weak-50)}.sui-table__header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.sui-table__sort-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--sui-text-soft-400);opacity:.6;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-table__sort-icon--active{color:var(--sui-text-strong-950);opacity:1}.sui-table__body{display:flex;flex-direction:column;width:100%}.sui-table__row{display:flex;align-items:center;width:100%;border-radius:var(--sui-radius-12);overflow:hidden;cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);box-sizing:border-box}.sui-table__row:hover,.sui-table__row:hover .sui-table__cell,.sui-table__row:active,.sui-table__row:active .sui-table__cell{background:var(--sui-bg-weak-50)}.sui-table__row--selected{background:var(--sui-primary-alpha-10)}.sui-table__row--selected:hover{background:var(--sui-primary-alpha-16)}.sui-table__row--striped{background:var(--sui-bg-weak-50)}.sui-table__row--skeleton{pointer-events:none;cursor:default}.sui-table__row--skeleton:hover{background:transparent}.sui-table__row--skeleton:hover .sui-table__cell{background:var(--sui-bg-white-0)}:host([data-sui-size=medium]) .sui-table__cell{min-height:64px;padding:12px 20px 12px 12px}:host([data-sui-size=small]) .sui-table__cell{min-height:48px;padding:8px 16px 8px 12px}:host([data-sui-size=large]) .sui-table__cell{min-height:80px;padding:16px 20px 16px 12px}:host([data-sui-size=xlarge]) .sui-table__cell{min-height:96px;padding:20px 20px 20px 12px}.sui-table__cell{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;box-sizing:border-box;background:var(--sui-bg-white-0);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}.sui-table__cell--center{justify-content:center}.sui-table__cell--right{justify-content:flex-end}.sui-table__cell--checkbox{flex:0 0 44px;justify-content:center;padding:0 12px}.sui-table__cell--leading{font-weight:var(--sui-type-label-sm-weight);color:var(--sui-text-strong-950)}.sui-table__cell--passive{color:var(--sui-text-sub-600);font-weight:var(--sui-type-paragraph-sm-weight)}.sui-table__cell--sticky{position:sticky;left:0;z-index:1;background:var(--sui-bg-white-0)}.sui-table__row--selected .sui-table__cell{background:transparent}.sui-table__row--selected .sui-table__cell.sui-table__cell--sticky{background:var(--sui-primary-alpha-10)}.sui-table__cell-text{min-width:0}.sui-table__cell-text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;display:block}.sui-table__cell-block{display:flex;flex-direction:column;min-width:0}.sui-table__cell-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-table__cell--leading .sui-table__cell-text{font-weight:var(--sui-type-label-sm-weight)}.sui-table__cell--passive .sui-table__cell-text{font-weight:inherit;color:inherit}:host ::ng-deep .sui-table__leading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:10px;box-sizing:border-box;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-text-sub-600)}:host([data-sui-size=small]) ::ng-deep .sui-table__leading-icon{width:32px;height:32px;padding:6px}.sui-table__divider{width:100%;padding:1.5px 0;flex-shrink:0;background:var(--sui-bg-white-0)}.sui-table__divider:after{content:\"\";display:block;height:1px;background:var(--sui-stroke-soft-200)}.sui-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center}.sui-table__empty-icon{color:var(--sui-text-disabled-300)}.sui-table__empty-msg{margin:0;font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);color:var(--sui-text-sub-600)}.sui-table__skeleton-box{display:block;height:14px;width:100%;max-width:180px;border-radius:var(--sui-radius-4);background:linear-gradient(90deg,var(--sui-bg-soft-200) 25%,var(--sui-bg-weak-50) 50%,var(--sui-bg-soft-200) 75%);background-size:400% 100%;animation:sui-skeleton-pulse 1.4s ease-in-out infinite}.sui-table__skeleton-box--sm{width:20px;max-width:20px;height:20px;border-radius:var(--sui-radius-4)}@keyframes sui-skeleton-pulse{0%{background-position:100% 50%}to{background-position:0% 50%}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], selectedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRows", required: false }] }, { type: i0.Output, args: ["selectedRowsChange"] }], sortKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortKey", required: false }] }, { type: i0.Output, args: ["sortKeyChange"] }], sortDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDir", required: false }] }, { type: i0.Output, args: ["sortDirChange"] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], sortChanged: [{ type: i0.Output, args: ["sortChanged"] }], scrollEl: [{ type: i0.ViewChild, args: ['scrollEl', { isSignal: true }] }], cellTemplates: [{
                 type: ContentChildren,
                 args: [SuiTableCellDirective]