@ajuarezso/sui-design-system 0.18.4 → 0.18.7

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, computed, ChangeDetectionStrategy, Component, inject, TemplateRef, Directive, model, signal, contentChild, viewChild, effect, untracked, output, ElementRef, forwardRef, ViewContainerRef, DestroyRef, ContentChild, ViewChild, ViewEncapsulation, Renderer2, DOCUMENT, HostListener, viewChildren, afterNextRender, ContentChildren, ViewChildren, Injector, Injectable } from '@angular/core';
+import { InjectionToken, input, computed, ChangeDetectionStrategy, Component, inject, TemplateRef, Directive, model, signal, contentChild, viewChild, effect, untracked, output, ElementRef, forwardRef, ViewContainerRef, DestroyRef, ContentChild, ViewChild, ViewEncapsulation, Renderer2, DOCUMENT, HostListener, RendererStyleFlags2, viewChildren, afterNextRender, ContentChildren, ViewChildren, Injector, Injectable } from '@angular/core';
 import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1, NgOptimizedImage } from '@angular/common';
 import { Router, RouterLink, RouterLinkActive } from '@angular/router';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -10059,6 +10059,23 @@ class SuiInput {
             return;
         if (recibeTexto(target))
             return;
+        /* 3. El target no puede ser un ANCESTRO del host. Tocar el `body` no es
+              tocar fuera del campo: el campo está adentro del body.
+    
+              Es el tercer caso que se nos escapó (después de 0.14.3 y 0.15.3), y
+              el que impedía SELECCIONAR TEXTO en iOS. Al mantener el dedo sobre el
+              texto, WebKit levanta la lupa y emite eventos del gesto cuyo `target`
+              es un ancestro —`body` o `html`— y no el campo. Ese evento pasaba los
+              dos guards de arriba, y como el foco SÍ vive en este host, el
+              componente se hacía blur A SÍ MISMO: el teclado se cerraba, el gesto
+              se cancelaba y la selección nunca llegaba a agarrar. */
+        if (target.contains?.(host))
+            return;
+        /* 4. Con una selección viva no se toca el foco: es un gesto en curso, y
+              quitarle el foco al campo la descarta. */
+        const sel = document.getSelection();
+        if (sel && !sel.isCollapsed)
+            return;
         const active = document.activeElement;
         if (active && host.contains(active))
             active.blur();
@@ -10816,6 +10833,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * contenido desde scrollTop 0 (solo por handle). Aquí SÍ soportamos ese
  * handoff (patrón Apple Maps nativo) vía touchmove no-pasivo + takeover.
  *
+ * ── Modelo de movimiento (2026-09) ──────────────────────────────────────────
+ *
+ * Dos capas: `.sui-sheet` es un marco FIJO de alto constante
+ * H = min(contenido, maxBreakpoint·100dvh, viewport − safe-top − 16px), anclado
+ * abajo, que recorta (radius + squircle) y no captura toques; adentro,
+ * `.sui-sheet__panel` (fondo, asa y body) es lo único que se mueve, con la
+ * propiedad `translate` (compositor):
+ *
+ *     y(p) = max(0, H − p·vh)        visible(p) = min(H, p·vh)
+ *
+ * donde vh es el alto del viewport en px. Así al 25% se ven 25dvh del sheet, la
+ * parte que baja queda recortada por el marco (las esquinas inferiores
+ * redondeadas siguen a la vista, como antes) y el área libre del viewport sigue
+ * siendo del contenido de fondo. Misma semántica que la versión anterior, que
+ * animaba `max-height`, pero sin layout por frame: durante el drag no se toca
+ * ningún signal ni binding — el `translate` del panel y la opacidad del
+ * backdrop se escriben directo en el DOM dentro de un requestAnimationFrame
+ * coalescido (una escritura por frame, gana el último pointermove). Los signals
+ * `progress`, `currentBreakpoint` y `dragging` cambian al empezar/terminar el
+ * drag y al snap, no por movimiento.
+ *
+ * Se usa `translate` (propiedad individual) y NO `transform`, y sobre el panel
+ * y no sobre `.sui-sheet`: un consumer puede seguir escribiendo su propio
+ * `transform`/`left`/`width` sobre `.sui-sheet` (ej. centrarlo en desktop) sin
+ * pisar el movimiento.
+ *
  * Uso típico para tracking de pedido con mapa abajo:
  * ```html
  * <sui-modal-sheet
@@ -10831,6 +10874,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  */
 class SuiModalSheet {
     doc = inject(DOCUMENT$1);
+    renderer = inject(Renderer2);
     navbarVisibility = inject(SUI_NAVBAR_VISIBILITY, { optional: true });
     /** ID único por instancia para el counter centralizado del navbar. */
     _sheetId = `sui-modal-sheet-${Math.random().toString(36).slice(2, 11)}`;
@@ -10860,66 +10904,101 @@ class SuiModalSheet {
     closed = output();
     breakpointChange = output();
     // ── Refs ──────────────────────────────────────────────────────────────────
+    /** Marco fijo que recorta; se mide acá (alto H). */
     containerRef;
+    /** Capa que se mueve (`translate`). */
+    panelRef;
+    backdropRef;
     handleRef;
     bodyRef;
     // ── State ─────────────────────────────────────────────────────────────────
     /** Breakpoint actual (0-1). Cambia al snap, no durante el drag. */
     currentBreakpoint = signal(0, ...(ngDevMode ? [{ debugName: "currentBreakpoint" }] : /* istanbul ignore next */ []));
-    /** Progress en vivo durante el drag (0-1). Expuesto como readonly al
-        template (binding `--sheet-progress`) y al public para que el consumer
-        pueda leerlo si quiere reaccionar. */
-    liveProgress = signal(0, ...(ngDevMode ? [{ debugName: "liveProgress" }] : /* istanbul ignore next */ []));
-    progress = this.liveProgress.asReadonly();
-    /** True mientras el usuario está arrastrando. Desactiva CSS transition. */
+    /** Progress EN REPOSO (0-1): el breakpoint al que el sheet está o hacia el
+        que va. Durante el drag NO se actualiza (el movimiento vive en el DOM,
+        ver header): cambia al soltar y al snap. Expuesto al template como
+        `--sheet-progress` y al consumer como `progress`. */
+    restProgress = signal(0, ...(ngDevMode ? [{ debugName: "restProgress" }] : /* istanbul ignore next */ []));
+    progress = this.restProgress.asReadonly();
+    /** True mientras el usuario está arrastrando. Se setea al arrancar y al
+        soltar; la clase CSS que apaga la transición se maneja imperativa en el
+        mismo tick que la escritura del `translate` (ver `beginDrag`/`snapTo`). */
     dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
-    /** Opacity del backdrop calculada según el progress vivo. */
-    backdropOpacity = computed(() => this.computeBackdropOpacity(this.liveProgress()), ...(ngDevMode ? [{ debugName: "backdropOpacity" }] : /* istanbul ignore next */ []));
+    /** Opacity del backdrop para el progress en reposo. La opacidad viva del
+        drag se escribe directo en el DOM; este computed queda como API. */
+    backdropOpacity = computed(() => this.computeBackdropOpacity(this.restProgress()), ...(ngDevMode ? [{ debugName: "backdropOpacity" }] : /* istanbul ignore next */ []));
     /** True si el backdrop debe capturar pointer events (current > backdropBreakpoint). */
-    backdropInteractive = computed(() => this.liveProgress() > this.backdropBreakpoint(), ...(ngDevMode ? [{ debugName: "backdropInteractive" }] : /* istanbul ignore next */ []));
-    /** CAP de altura del sheet — `min(progress·100dvh, viewport - safe-top - 16)`.
-        Se bindea como max-height con `height: max-content` en el scss: el sheet
-        NUNCA mide más que su contenido (sin espacio vacío al final cuando el
-        contenido termina antes del breakpoint), y el breakpoint actúa como techo.
-        Cuando progress=0.25 el sheet ocupa a lo sumo 25dvh y el resto del
-        viewport queda VACÍO → contenido detrás (mapa) interactivo. */
-    heightCss = computed(() => `min(${this.liveProgress() * 100}dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 16px))`, ...(ngDevMode ? [{ debugName: "heightCss" }] : /* istanbul ignore next */ []));
+    backdropInteractive = computed(() => this.restProgress() > this.backdropBreakpoint(), ...(ngDevMode ? [{ debugName: "backdropInteractive" }] : /* istanbul ignore next */ []));
+    /** Breakpoint máximo del array (1 si está vacío). */
+    maxBreakpoint = computed(() => {
+        const bps = this.breakpoints();
+        return bps.length ? Math.max(...bps) : 1;
+    }, ...(ngDevMode ? [{ debugName: "maxBreakpoint" }] : /* istanbul ignore next */ []));
+    /** CAP ESTÁTICO de altura — `min(maxBp·100dvh, viewport − safe-top − 16)`.
+        Con `height: max-content` en el scss el sheet mide su contenido y este
+        techo lo acota. Depende solo de `breakpoints`: no cambia por drag ni por
+        snap, así que no fuerza layout durante el gesto. */
+    maxHeightCss = computed(() => `min(${this.maxBreakpoint() * 100}dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 16px))`, ...(ngDevMode ? [{ debugName: "maxHeightCss" }] : /* istanbul ignore next */ []));
     /** True cuando el sheet está al breakpoint máximo del array. En ese punto
         habilitamos scroll del body (touch-action: pan-y) — el user ya no puede
         expandir más, así que se prioriza ver el contenido sobre el drag. En el
         resto de breakpoints el body actúa como handle gigante (touch-action:
-        none) y solo el drag controla la altura del sheet. */
+        none) y solo el drag controla la posición del sheet. */
     atMaxBreakpoint = computed(() => {
         const bps = this.breakpoints();
         if (bps.length === 0)
             return false;
-        const maxBp = Math.max(...bps);
-        return this.currentBreakpoint() >= maxBp;
+        return this.currentBreakpoint() >= this.maxBreakpoint();
     }, ...(ngDevMode ? [{ debugName: "atMaxBreakpoint" }] : /* istanbul ignore next */ []));
-    // ── Drag state (no signals, se manejan imperativamente) ───────────────────
+    // ── Geometría / drag (imperativo, sin signals) ───────────────────────────
+    /** Alto medido del sheet (px). Se mide al abrir, al empezar un drag y
+        cuando el contenido cambia de tamaño (ResizeObserver). */
+    sheetHeight = 0;
+    /** Alto del viewport (px) = 1 unidad de progress. */
+    viewportHeight = 0;
     dragStartY = 0;
     dragStartProgress = 0;
-    wrapperHeight = 0;
     pointerId = null;
     /** Para calcular velocity al final */
     lastMoveTime = 0;
     lastMoveY = 0;
     velocityY = 0;
+    /** Último progress pedido por el dedo; lo consume el rAF. */
+    pendingProgress = null;
+    frameId = null;
     /** Flag para distinguir drag iniciado en body (scroll-then-drag) vs en handle.
         En body, el drag NO arranca con pointerdown — sólo si pointermove
         excede un threshold y la condición de scroll lo permite. Sirve para no
         robar tap/click a buttons internos. */
     bodyDragArmed = false;
     /** Threshold de movimiento (px) para decidir que un pointermove en body es
-        drag (no tap). Patrón iOS estándar ~6-10px. */
-    /* 5px = más sensible que el iOS canon de 8px. El user pidió "como nativo"
-       pero el threshold default del 8px sentía que tardaba en activar.
-       Trade-off: 5px puede activar drag con micro-movements al hacer tap, pero
-       la heurística shouldIgnoreBodyDrag protege inputs/select/option. */
+        drag (no tap). 5px = más sensible que el iOS canon de 8px: el dueño pidió
+        "como nativo" y el 8 sentía que tardaba en activar. Trade-off: 5px puede
+        activar drag con micro-movements al hacer tap, pero la heurística
+        shouldIgnoreBodyDrag protege inputs/select/option. */
     static BODY_DRAG_THRESHOLD_PX = 5;
+    /** Lookahead de velocidad al soltar (ms): predice dónde estaría el dedo y
+        snapea ahí. Permite que un swipe rápido brinque breakpoints sin saltarse
+        los intermedios. 80ms validado en device: a 150 se saltaba el 0.7 entre
+        0.5 y 1; a 0 el sheet se sentía pesado. */
+    static VELOCITY_LOOKAHEAD_MS = 80;
+    /** Duración del snap: se acota entre estos dos valores según distancia
+        restante / velocidad del dedo (ver `snapDuration`). */
+    static SNAP_MIN_MS = 180;
+    static SNAP_MAX_MS = 350;
+    static CLASS_PANEL_DRAGGING = 'sui-sheet__panel--dragging';
+    static CLASS_BACKDROP_DRAGGING = 'sui-sheet__backdrop--dragging';
+    /** Cerrado = el panel baja todo su alto y el marco lo recorta entero. Se usa
+        `100%` (y no el H medido) para que el cierre quede bien aunque el
+        contenido cambie de tamaño a mitad de camino. */
+    static TRANSLATE_CLOSED = '0 100%';
     // ── Lifecycle ─────────────────────────────────────────────────────────────
     wasOpen = false;
     escapeHandler;
+    closeTimer = null;
+    closeTransitionHandler;
+    resizeObserver;
+    windowResizeHandler;
     constructor() {
         effect(() => {
             const isOpen = this.open();
@@ -10935,6 +11014,9 @@ class SuiModalSheet {
     ngOnDestroy() {
         this.removeEscapeHandler();
         this.detachTouchSuppressor();
+        this.stopObservingSize();
+        this.cancelPendingClose();
+        this.cancelFrame();
         this.unlockBodyScroll();
         if (this.wasOpen) {
             this.navbarVisibility?.release(this._sheetId);
@@ -10958,20 +11040,29 @@ class SuiModalSheet {
         this.lockBodyScroll();
         this.navbarVisibility?.requestHide(this._sheetId);
         this.attachEscapeHandler();
-        /* Setear initial breakpoint en el siguiente tick (después del render para
-           que el container ya tenga clientHeight). */
+        /* Snap al initial breakpoint en el siguiente tick (después del render,
+           cuando el container ya existe y mide). El panel nace en `translate:
+           0 100%` (scss) y la lectura de offsetHeight dentro de `snapTo` fuerza
+           el recálculo de estilo que hace que la escritura del destino
+           transicione: la entrada se ve deslizando desde abajo. */
         setTimeout(() => {
-            const initial = this.initialBreakpoint();
-            this.snapTo(initial, false);
+            this.snapTo(this.initialBreakpoint(), true);
             this.attachTouchSuppressor();
+            this.observeSize();
         }, 0);
     }
     onClose() {
         this.removeEscapeHandler();
         this.detachTouchSuppressor();
+        this.stopObservingSize();
+        this.cancelPendingClose();
+        this.cancelFrame();
         this.unlockBodyScroll();
         this.navbarVisibility?.release(this._sheetId);
-        this.liveProgress.set(0);
+        this.pointerId = null;
+        this.bodyDragArmed = false;
+        this.dragging.set(false);
+        this.restProgress.set(0);
         this.currentBreakpoint.set(0);
         this.closed.emit();
     }
@@ -10988,6 +11079,8 @@ class SuiModalSheet {
     // Con el default prevenido, el scroll nativo nunca arranca y los pointer
     // events siguen fluyendo hacia la lógica de drag existente. Los touch
     // handlers de Angular son pasivos por default — por eso se atachan a mano.
+    // El touchstart sí es pasivo (no previene nada). Los pointer events no son
+    // scroll-blocking, así que `passive` no les aplica.
     touchStartY = 0;
     touchStartHandler;
     touchMoveHandler;
@@ -11030,43 +11123,220 @@ class SuiModalSheet {
         this.touchStartHandler = undefined;
         this.touchMoveHandler = undefined;
     }
-    // ── Drag gesture ──────────────────────────────────────────────────────────
-    onPointerDown(event) {
-        /* Solo eventos primarios (un dedo, click izquierdo). Multi-touch zoom etc.
-           no inicia drag. */
-        if (!event.isPrimary)
+    // ── Medición ──────────────────────────────────────────────────────────────
+    /** Mide alto del sheet y del viewport. Devuelve false si todavía no hay
+        layout (container sin render o entorno sin medidas, ej. jsdom). Es la
+        ÚNICA lectura de layout del gesto: se hace al abrir, al pointerdown y
+        cuando cambia el tamaño — nunca por pointermove. */
+    measure() {
+        const container = this.containerRef?.nativeElement;
+        const win = this.doc.defaultView;
+        if (!container || !win)
+            return false;
+        this.sheetHeight = container.offsetHeight;
+        this.viewportHeight = win.innerHeight || this.doc.documentElement.clientHeight;
+        return this.sheetHeight > 0 && this.viewportHeight > 0;
+    }
+    /** Desplazamiento vertical (px) para un progress: `max(0, H − p·vh)`. */
+    yFor(progress) {
+        if (progress <= 0)
+            return this.sheetHeight;
+        return Math.max(0, this.sheetHeight - progress * this.viewportHeight);
+    }
+    /** Valor de `translate` para un progress. */
+    translateFor(progress) {
+        if (progress <= 0)
+            return SuiModalSheet.TRANSLATE_CLOSED;
+        return `0 ${this.yFor(progress)}px`;
+    }
+    /** Progress EFECTIVO de un breakpoint: el que corresponde al y que el sheet
+        muestra de verdad. Con contenido corto varios breakpoints valen y = 0 y
+        su progress efectivo es H/vh, no el nominal — es el punto de partida
+        correcto para que el dedo mueva 1:1 desde ahí. */
+    effectiveProgress(breakpoint) {
+        if (this.viewportHeight === 0)
+            return breakpoint;
+        const p = (this.sheetHeight - this.yFor(breakpoint)) / this.viewportHeight;
+        return Math.max(0, Math.min(1, p));
+    }
+    /** Progress real del sheet leyendo el `translate` computado del panel —
+        sirve para agarrarlo a mitad de una transición sin que salte al
+        breakpoint de destino. Si no se puede leer (jsdom, valor no numérico,
+        un calc() a mitad de la entrada) cae al progress efectivo del
+        `currentBreakpoint`. */
+    progressFromDom() {
+        const fallback = this.effectiveProgress(this.currentBreakpoint());
+        const panel = this.panelRef?.nativeElement;
+        const win = this.doc.defaultView;
+        if (!panel || !win || this.viewportHeight === 0)
+            return fallback;
+        const raw = win.getComputedStyle(panel).translate;
+        const parts = raw ? raw.trim().split(/\s+/) : [];
+        const yPart = parts[1] ?? parts[0];
+        if (!yPart || !yPart.endsWith('px'))
+            return fallback;
+        const y = parseFloat(yPart);
+        if (!Number.isFinite(y))
+            return fallback;
+        const p = (this.sheetHeight - y) / this.viewportHeight;
+        return Math.max(0, Math.min(1, p));
+    }
+    // ── Escrituras al DOM (sin signals) ───────────────────────────────────────
+    writeTranslate(progress) {
+        const panel = this.panelRef?.nativeElement;
+        if (!panel)
+            return;
+        this.renderer.setStyle(panel, 'translate', this.translateFor(progress), RendererStyleFlags2.DashCase);
+    }
+    writeBackdropOpacity(progress) {
+        const backdrop = this.backdropRef?.nativeElement;
+        if (!backdrop)
+            return;
+        this.renderer.setStyle(backdrop, 'opacity', String(this.computeBackdropOpacity(progress)));
+    }
+    setTransitionDuration(ms) {
+        const value = `${ms}ms`;
+        const panel = this.panelRef?.nativeElement;
+        const backdrop = this.backdropRef?.nativeElement;
+        if (panel)
+            this.renderer.setStyle(panel, 'transition-duration', value, RendererStyleFlags2.DashCase);
+        if (backdrop)
+            this.renderer.setStyle(backdrop, 'transition-duration', value, RendererStyleFlags2.DashCase);
+    }
+    setDraggingClasses(on) {
+        const panel = this.panelRef?.nativeElement;
+        const backdrop = this.backdropRef?.nativeElement;
+        const op = on ? 'addClass' : 'removeClass';
+        if (panel)
+            this.renderer[op](panel, SuiModalSheet.CLASS_PANEL_DRAGGING);
+        if (backdrop)
+            this.renderer[op](backdrop, SuiModalSheet.CLASS_BACKDROP_DRAGGING);
+    }
+    /** Coalesce: guarda el último progress y escribe UNA vez por frame. */
+    scheduleFrame(progress) {
+        this.pendingProgress = progress;
+        if (this.frameId !== null)
+            return;
+        const win = this.doc.defaultView;
+        if (!win || typeof win.requestAnimationFrame !== 'function') {
+            this.flushFrame();
+            return;
+        }
+        this.frameId = win.requestAnimationFrame(() => {
+            this.frameId = null;
+            this.flushFrame();
+        });
+    }
+    flushFrame() {
+        if (this.pendingProgress === null)
+            return;
+        const p = this.pendingProgress;
+        this.pendingProgress = null;
+        this.writeTranslate(p);
+        this.writeBackdropOpacity(p);
+    }
+    cancelFrame() {
+        if (this.frameId !== null) {
+            this.doc.defaultView?.cancelAnimationFrame(this.frameId);
+            this.frameId = null;
+        }
+        this.pendingProgress = null;
+    }
+    // ── Tamaño del contenido / viewport ───────────────────────────────────────
+    //
+    // El alto H entra en la fórmula del translate. Si el contenido crece después
+    // de abrir (datos async, un acordeón que se expande) o el viewport cambia
+    // (rotación, teclado en Android), el y viejo dejaría al sheet mostrando más
+    // o menos de lo que dice su breakpoint. Se re-deriva la posición en reposo
+    // sin transición.
+    observeSize() {
+        const container = this.containerRef?.nativeElement;
+        const win = this.doc.defaultView;
+        if (!container || !win)
+            return;
+        if (typeof ResizeObserver !== 'undefined' && !this.resizeObserver) {
+            this.resizeObserver = new ResizeObserver(() => this.onSizeChange());
+            this.resizeObserver.observe(container);
+        }
+        if (!this.windowResizeHandler) {
+            this.windowResizeHandler = () => this.onSizeChange();
+            win.addEventListener('resize', this.windowResizeHandler, { passive: true });
+        }
+    }
+    stopObservingSize() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+        if (this.windowResizeHandler) {
+            this.doc.defaultView?.removeEventListener('resize', this.windowResizeHandler);
+            this.windowResizeHandler = undefined;
+        }
+    }
+    onSizeChange() {
+        if (this.dragging() || !this.open())
+            return;
+        const prevH = this.sheetHeight;
+        const prevVh = this.viewportHeight;
+        if (!this.measure())
+            return;
+        if (prevH === this.sheetHeight && prevVh === this.viewportHeight)
             return;
-        this.wrapperHeight = this.containerRef?.nativeElement?.clientHeight ?? 0;
-        if (this.wrapperHeight === 0)
+        const p = this.restProgress();
+        if (p <= 0)
             return;
+        this.setTransitionDuration(0);
+        this.writeTranslate(p);
+        this.writeBackdropOpacity(p);
+    }
+    // ── Drag gesture ──────────────────────────────────────────────────────────
+    /** Arranque común del drag (handle o body ya armado): congela la transición
+        en curso, lee la posición real y marca `dragging`. */
+    beginDrag(event) {
+        this.cancelPendingClose();
+        this.cancelFrame();
         this.pointerId = event.pointerId;
         this.dragStartY = event.clientY;
-        this.dragStartProgress = this.currentBreakpoint();
+        this.dragStartProgress = this.progressFromDom();
         this.lastMoveY = event.clientY;
         this.lastMoveTime = performance.now();
         this.velocityY = 0;
+        /* Congelar donde está: la clase apaga la transición y el translate se
+           fija en el valor actual (si se agarró a mitad de un snap). */
+        this.setDraggingClasses(true);
+        this.writeTranslate(this.dragStartProgress);
+        this.writeBackdropOpacity(this.dragStartProgress);
         this.dragging.set(true);
+    }
+    onPointerDown(event) {
+        /* Solo eventos primarios (un dedo, click izquierdo). Multi-touch zoom etc.
+           no inicia drag. */
+        if (!event.isPrimary)
+            return;
+        if (!this.measure())
+            return;
+        this.beginDrag(event);
         /* setPointerCapture en el handle hace que pointermove/pointerup sigan
            llegando aunque el dedo salga del elemento original. Sin esto, swipes
            largos pierden eventos. */
         const handle = this.handleRef?.nativeElement;
-        handle?.setPointerCapture(event.pointerId);
+        try {
+            handle?.setPointerCapture(event.pointerId);
+        }
+        catch { /* noop */ }
         event.preventDefault();
     }
     onPointerMove(event) {
         if (this.pointerId !== event.pointerId || !this.dragging())
             return;
         const deltaY = event.clientY - this.dragStartY;
-        /* Convertir deltaY a delta de progress: arrastrar hacia abajo (deltaY+)
-           reduce el progress (sheet baja). */
-        const deltaProgress = -deltaY / this.wrapperHeight;
-        const next = this.dragStartProgress + deltaProgress;
+        /* 1:1 con el dedo: 1 unidad de progress = el alto del viewport. Arrastrar
+           hacia abajo (deltaY+) reduce el progress (sheet baja). */
+        const next = this.dragStartProgress - deltaY / this.viewportHeight;
         /* Clamp al rango del array de breakpoints. Min = primer breakpoint del
            array — si el array no incluye 0, el sheet NUNCA puede cerrarse por
            gesture (Apple Maps style). Max acotado a 1. */
         const minBp = this.breakpoints()[0] ?? 0;
         const clamped = Math.max(minBp, Math.min(1, next));
-        this.liveProgress.set(clamped);
+        this.scheduleFrame(clamped);
         /* Velocity tracking para boost del snap */
         const now = performance.now();
         const dt = now - this.lastMoveTime;
@@ -11085,7 +11355,6 @@ class SuiModalSheet {
         const wasDragging = this.dragging();
         this.pointerId = null;
         this.bodyDragArmed = false;
-        this.dragging.set(false);
         const handle = this.handleRef?.nativeElement;
         const body = this.bodyRef?.nativeElement;
         try {
@@ -11098,28 +11367,32 @@ class SuiModalSheet {
         catch { /* noop */ }
         if (!wasDragging)
             return;
-        /* Aplicar boost de velocity al progress final antes de snappear. Velocity
-           en px/ms × (1/wrapperHeight) = progress/ms. Multiplicamos por una
-           constante "lookahead" que predice ~80ms en el futuro — esto permite
-           swipes rápidos brincar breakpoints SIN saltarse breakpoints intermedios
-           (ej. 0.7 entre 0.5 y 1.0). 80ms es el sweet spot validado: a 150ms se
-           saltaba el 0.7 con cualquier swipe medio-rápido; a 0ms el sheet se
-           sentía pesado y nunca brincaba breakpoints. */
-        const lookaheadMs = 80;
-        const velocityProgress = -(this.velocityY * lookaheadMs) / this.wrapperHeight;
-        const projected = Math.max(0, Math.min(1, this.liveProgress() + velocityProgress));
-        const snapBp = this.findClosestBreakpoint(projected);
-        this.snapTo(snapBp, true);
+        /* El último move pendiente define dónde quedó el dedo. */
+        const released = this.pendingProgress ?? this.progressFromDom();
+        this.cancelFrame();
+        /* Boost de velocity: predice ~80ms en el futuro (px/ms × ms) y snapea al
+           breakpoint más cercano de ESE punto. Se decide en PÍXELES y no en
+           progress: con contenido corto varios breakpoints comparten y = 0 (el
+           sheet no puede mostrar más que su alto) y medir en progress cerraba el
+           sheet con un arrastre mínimo desde el máximo. */
+        const yReleased = this.yFor(released);
+        const yProjected = Math.max(0, Math.min(this.sheetHeight, yReleased + this.velocityY * SuiModalSheet.VELOCITY_LOOKAHEAD_MS));
+        const snapBp = this.closestBreakpointByY(yProjected);
+        this.dragging.set(false);
+        this.snapTo(snapBp, true, released, Math.abs(this.velocityY));
     }
     onPointerCancel(event) {
         /* Si el browser cancela el pointer (ej. scroll fight, otra app), volvemos
            al currentBreakpoint sin animar agresivo. */
         if (this.pointerId !== event.pointerId)
             return;
+        const wasDragging = this.dragging();
         this.pointerId = null;
         this.bodyDragArmed = false;
+        const released = wasDragging ? (this.pendingProgress ?? this.progressFromDom()) : this.currentBreakpoint();
+        this.cancelFrame();
         this.dragging.set(false);
-        this.snapTo(this.currentBreakpoint(), true);
+        this.snapTo(this.currentBreakpoint(), true, released);
     }
     // ── Body drag (scroll-then-drag canon iOS) ───────────────────────────────
     //
@@ -11134,8 +11407,8 @@ class SuiModalSheet {
     //     hacia arriba: scroll body.
     //
     // Importante: el drag NO arranca en pointerdown — lo armamos pero esperamos
-    // a que pointermove supere un threshold (8px) antes de marcar `dragging`.
-    // Esto evita robarle el click/tap a buttons del body.
+    // a que pointermove supere el threshold antes de marcar `dragging`. Esto
+    // evita robarle el click/tap a buttons del body.
     onBodyPointerDown(event) {
         if (!event.isPrimary)
             return;
@@ -11144,14 +11417,12 @@ class SuiModalSheet {
         const target = event.target;
         if (this.shouldIgnoreBodyDrag(target))
             return;
-        this.wrapperHeight = this.containerRef?.nativeElement?.clientHeight ?? 0;
-        if (this.wrapperHeight === 0)
+        if (!this.measure())
             return;
         /* Solo armamos — el drag real arranca cuando pointermove supere threshold. */
         this.bodyDragArmed = true;
         this.pointerId = event.pointerId;
         this.dragStartY = event.clientY;
-        this.dragStartProgress = this.currentBreakpoint();
         this.lastMoveY = event.clientY;
         this.lastMoveTime = performance.now();
         this.velocityY = 0;
@@ -11171,9 +11442,7 @@ class SuiModalSheet {
         const deltaY = event.clientY - this.dragStartY;
         if (Math.abs(deltaY) < SuiModalSheet.BODY_DRAG_THRESHOLD_PX)
             return;
-        /* Track velocity instantánea para detectar "fling down" — patrón canon
-           iOS / Apple Maps / Twitter X: un swipe rápido hacia abajo colapsa el
-           sheet incluso si el body está scrolleado en medio del contenido. */
+        /* Track velocity instantánea. */
         const now = performance.now();
         const dt = now - this.lastMoveTime;
         if (dt > 0) {
@@ -11207,14 +11476,14 @@ class SuiModalSheet {
             }
         }
         this.bodyDragArmed = false;
-        this.dragging.set(true);
+        /* El drag arranca DESDE la posición actual del dedo (touch slop, como
+           UIKit): los primeros 5px no mueven el sheet en vez de hacerlo saltar. */
+        this.beginDrag(event);
         try {
             body?.setPointerCapture(event.pointerId);
         }
         catch { /* noop */ }
         event.preventDefault();
-        /* Forwardear este move ya en modo drag para no perder el delta. */
-        this.onPointerMove(event);
     }
     /** Heurística: ignorar drag si el target es un input/textarea/select/button
         interactivo. El user está intentando interactuar, no arrastrar. */
@@ -11232,18 +11501,41 @@ class SuiModalSheet {
         return false;
     }
     // ── Snap ──────────────────────────────────────────────────────────────────
-    snapTo(breakpoint, animated) {
-        /* Si el snap es a 0, animamos pero después emitimos close. La animación de
-           cierre la maneja el CSS transition (350ms). */
-        this.liveProgress.set(breakpoint);
+    /** Duración del snap en función de la distancia restante y la velocidad del
+        dedo (px/ms): un fling rápido cierra la distancia en poco tiempo; un
+        release lento o un snap programático usa la duración larga. Acotado a
+        [180, 350] ms. */
+    snapDuration(distancePx, velocityPxMs) {
+        const speed = Math.max(velocityPxMs, 0.5);
+        const raw = distancePx / speed;
+        return Math.round(Math.max(SuiModalSheet.SNAP_MIN_MS, Math.min(SuiModalSheet.SNAP_MAX_MS, raw)));
+    }
+    /**
+     * Lleva el sheet a `breakpoint`.
+     * @param fromProgress progress desde el que sale (default: el de reposo);
+     *        solo influye en la duración.
+     * @param velocityPxMs velocidad del dedo al soltar, para acortar el snap.
+     */
+    snapTo(breakpoint, animated, fromProgress, velocityPxMs = 0) {
+        this.cancelPendingClose();
+        this.cancelFrame();
+        const measured = this.measure();
+        const from = fromProgress ?? this.restProgress();
+        const distance = measured ? Math.abs(this.yFor(breakpoint) - this.yFor(from)) : 0;
+        const duration = animated ? this.snapDuration(distance, velocityPxMs) : 0;
+        /* Todo en el mismo tick: sacar la clase que apaga la transición, fijar la
+           duración y escribir el destino. El recálculo de estilo ve las tres
+           cosas juntas y la transición arranca con la duración nueva. */
+        this.setDraggingClasses(false);
+        this.setTransitionDuration(duration);
+        this.writeTranslate(breakpoint);
+        this.writeBackdropOpacity(breakpoint);
+        this.restProgress.set(breakpoint);
         if (breakpoint === 0) {
-            /* Esperar la transición antes de emit close para que el sheet se vea
+            /* Emitir close cuando termina la transición (transitionend del
+               translate) con fallback por timeout, para que el sheet se vea
                deslizando hacia abajo. Si !animated saltamos directo. */
-            const wait = animated ? 350 : 0;
-            setTimeout(() => {
-                this.currentBreakpoint.set(0);
-                this.open.set(false);
-            }, wait);
+            this.scheduleClose(duration);
             return;
         }
         if (this.currentBreakpoint() !== breakpoint) {
@@ -11251,9 +11543,53 @@ class SuiModalSheet {
             this.breakpointChange.emit(breakpoint);
         }
     }
-    findClosestBreakpoint(progress) {
+    scheduleClose(durationMs) {
+        const finish = () => {
+            this.cancelPendingClose();
+            this.currentBreakpoint.set(0);
+            this.open.set(false);
+        };
+        const panel = this.panelRef?.nativeElement;
+        if (durationMs > 0 && panel) {
+            this.closeTransitionHandler = (e) => {
+                if (e.target === panel && e.propertyName === 'translate')
+                    finish();
+            };
+            panel.addEventListener('transitionend', this.closeTransitionHandler);
+        }
+        this.closeTimer = setTimeout(finish, durationMs > 0 ? durationMs + 80 : 0);
+    }
+    cancelPendingClose() {
+        if (this.closeTimer !== null) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = null;
+        }
+        if (this.closeTransitionHandler) {
+            this.panelRef?.nativeElement.removeEventListener('transitionend', this.closeTransitionHandler);
+            this.closeTransitionHandler = undefined;
+        }
+    }
+    /** Breakpoint cuyo desplazamiento (`yFor`) queda más cerca de `y`. Varios
+        breakpoints pueden compartir el mismo y (todos los que superan el alto
+        del contenido valen 0): en ese empate gana el actual si está entre
+        ellos, si no el mayor — así un toque-arrastre al máximo no cambia de
+        breakpoint ni apaga el scroll del body. */
+    closestBreakpointByY(y) {
         const bps = this.breakpoints();
-        return bps.reduce((closest, bp) => Math.abs(bp - progress) < Math.abs(closest - progress) ? bp : closest);
+        const current = this.currentBreakpoint();
+        let best = bps[0] ?? 0;
+        let bestDist = Infinity;
+        for (const bp of bps) {
+            const d = Math.abs(this.yFor(bp) - y);
+            if (d < bestDist - 0.5) {
+                best = bp;
+                bestDist = d;
+            }
+            else if (Math.abs(d - bestDist) <= 0.5 && (bp === current || (best !== current && bp > best))) {
+                best = bp;
+            }
+        }
+        return best;
     }
     // ── Backdrop ──────────────────────────────────────────────────────────────
     /** Fórmula linear entre (backdropBreakpoint, 0) y (1, 1). Igual que Ionic. */
@@ -11297,16 +11633,22 @@ class SuiModalSheet {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModalSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModalSheet, isStandalone: true, selector: "sui-modal-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: true, isRequired: false, transformFunction: null }, initialBreakpoint: { classPropertyName: "initialBreakpoint", publicName: "initialBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, backdropBreakpoint: { classPropertyName: "backdropBreakpoint", publicName: "backdropBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, showHandle: { classPropertyName: "showHandle", publicName: "showHandle", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, fullBody: { classPropertyName: "fullBody", publicName: "fullBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed", breakpointChange: "breakpointChange" }, host: { properties: { "attr.data-sui-sheet-open": "open() ? \"\" : null" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "handleRef", first: true, predicate: ["handle"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "@if (open()) {\n  <!-- Backdrop con opacity din\u00E1mica.\n       pointer-events: none cuando current \u2264 backdropBreakpoint para dejar\n       interactivo el contenido debajo (ej. mapa). -->\n  <div\n    class=\"sui-sheet__backdrop\"\n    [style.opacity]=\"backdropOpacity()\"\n    [style.pointer-events]=\"backdropInteractive() ? 'auto' : 'none'\"\n    (click)=\"onBackdropClick()\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Sheet container \u2014 anclado al bottom, altura din\u00E1mica.\n       Usar `height` en vez de transform para que el \u00E1rea \"no cubierta\" del\n       viewport (donde se ve el mapa) NO sea parte del DOM del sheet \u2014\n       contenido de fondo autom\u00E1ticamente interactivo, scroll del body\n       respeta la altura visible (no fantasma). -->\n  <div\n    #container\n    class=\"sui-sheet\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [class.sui-sheet--dragging]=\"dragging()\"\n    [style.max-height]=\"heightCss()\"\n    [style.--sheet-progress]=\"liveProgress()\"\n  >\n    @if (showHandle()) {\n      <!-- Drag handle (pill). Solo este elemento captura los pointer events\n           del drag \u2014 el resto del sheet permite scroll/clicks normales. -->\n      <div\n        #handle\n        class=\"sui-sheet__handle\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerCancel($event)\"\n      >\n        <div class=\"sui-sheet__handle-pill\"></div>\n      </div>\n    }\n\n    <!-- Body con scroll interno. Consumer proyecta su contenido aqu\u00ED.\n         Acepta drag con patr\u00F3n scroll-then-drag (iOS canon):\n         - Si el body est\u00E1 scrolleado (scrollTop > 0), el drag se ignora y\n           el touch hace scroll normal.\n         - Si est\u00E1 en top (scrollTop === 0) y el user arrastra hacia abajo,\n           se inicia drag del sheet.\n         - Si est\u00E1 en max breakpoint y user arrastra hacia abajo, se inicia\n           drag (incluso con scrollTop === 0 ya cubre eso).\n         - Drag hacia arriba siempre permite scroll del body (no roba el gesto). -->\n    <div\n      #body\n      class=\"sui-sheet__body\"\n      [class.sui-sheet__body--full]=\"fullBody()\"\n      [class.sui-sheet__body--scrollable]=\"atMaxBreakpoint()\"\n      (pointerdown)=\"onBodyPointerDown($event)\"\n      (pointermove)=\"onBodyPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerCancel($event)\"\n    >\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-sheet__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;transition:opacity .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging~.sui-sheet__backdrop,:host([data-sui-sheet-open]) .sui-sheet--dragging+.sui-sheet__backdrop{transition:none}.sui-sheet{position:fixed;bottom:8px;left:8px;right:8px;z-index:1001;display:flex;flex-direction:column;box-sizing:border-box;height:max-content;background:var(--sui-bg-white-0, #ffffff);border-radius:36px 36px 54px 54px;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-sheet{--sq-t: 45px;--sq-b: 68px;clip-path:shape(from 0 var(--sq-t),curve to var(--sq-t) 0 with 0 0/0 0,hline to calc(100% - var(--sq-t)),curve to 100% var(--sq-t) with 100% 0/100% 0,vline to calc(100% - var(--sq-b)),curve to calc(100% - var(--sq-b)) 100% with 100% 100%/100% 100%,hline to var(--sq-b),curve to 0 calc(100% - var(--sq-b)) with 0 100%/0 100%,close);box-shadow:none!important;filter:none}}.sui-sheet{box-shadow:none;overflow:hidden;overscroll-behavior:contain;will-change:max-height;transition:max-height .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging{transition:none}:host-context(html.platform-android) .sui-sheet{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px}.sui-sheet__handle{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:12px 0 8px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.sui-sheet__handle:active{cursor:grabbing}.sui-sheet__handle-pill{width:36px;height:5px;border-radius:999px;background:var(--sui-bg-soft-200, #d4d4d8)}.sui-sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:none;padding:0 20px 20px}.sui-sheet__body--scrollable{touch-action:pan-y;overscroll-behavior-y:contain}.sui-sheet__body--full{padding:0}@media(max-width:767px){.sui-sheet__body{scrollbar-width:none}.sui-sheet__body::-webkit-scrollbar{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModalSheet, isStandalone: true, selector: "sui-modal-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: true, isRequired: false, transformFunction: null }, initialBreakpoint: { classPropertyName: "initialBreakpoint", publicName: "initialBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, backdropBreakpoint: { classPropertyName: "backdropBreakpoint", publicName: "backdropBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, showHandle: { classPropertyName: "showHandle", publicName: "showHandle", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, fullBody: { classPropertyName: "fullBody", publicName: "fullBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed", breakpointChange: "breakpointChange" }, host: { properties: { "attr.data-sui-sheet-open": "open() ? \"\" : null" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true }, { propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }, { propertyName: "handleRef", first: true, predicate: ["handle"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "@if (open()) {\n  <!-- Backdrop. Su opacidad la escribe el componente directo en el DOM (en\n       reposo y por frame durante el drag), no un binding: as\u00ED el drag no\n       dispara change detection. pointer-events: none cuando current \u2264\n       backdropBreakpoint para dejar interactivo el contenido debajo (ej. mapa). -->\n  <div\n    #backdrop\n    class=\"sui-sheet__backdrop\"\n    [style.pointer-events]=\"backdropInteractive() ? 'auto' : 'none'\"\n    (click)=\"onBackdropClick()\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Marco del sheet \u2014 alto FIJO (contenido acotado por el breakpoint m\u00E1ximo,\n       `max-height` est\u00E1tico) anclado al bottom. No se mueve ni captura\n       toques: recorta (radius/squircle) al panel de adentro, que es el que se\n       traslada. El \u00E1rea del marco que el panel deja libre es transparente y\n       deja pasar los toques al contenido de fondo (mapa interactivo). -->\n  <div\n    #container\n    class=\"sui-sheet\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [style.max-height]=\"maxHeightCss()\"\n    [style.--sheet-progress]=\"progress()\"\n  >\n  <!-- Panel \u2014 lo \u00FAnico que se mueve, con `translate` (compositor) escrito\n       imperativamente por el componente (en reposo y por frame en el drag). -->\n  <div #panel class=\"sui-sheet__panel\">\n    @if (showHandle()) {\n      <!-- Drag handle (pill). Solo este elemento captura los pointer events\n           del drag \u2014 el resto del sheet permite scroll/clicks normales. -->\n      <div\n        #handle\n        class=\"sui-sheet__handle\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerCancel($event)\"\n      >\n        <div class=\"sui-sheet__handle-pill\"></div>\n      </div>\n    }\n\n    <!-- Body con scroll interno. Consumer proyecta su contenido aqu\u00ED.\n         Acepta drag con patr\u00F3n scroll-then-drag (iOS canon):\n         - Si el body est\u00E1 scrolleado (scrollTop > 0), el drag se ignora y\n           el touch hace scroll normal.\n         - Si est\u00E1 en top (scrollTop === 0) y el user arrastra hacia abajo,\n           se inicia drag del sheet.\n         - Si est\u00E1 en max breakpoint y user arrastra hacia abajo, se inicia\n           drag (incluso con scrollTop === 0 ya cubre eso).\n         - Drag hacia arriba siempre permite scroll del body (no roba el gesto). -->\n    <div\n      #body\n      class=\"sui-sheet__body\"\n      [class.sui-sheet__body--full]=\"fullBody()\"\n      [class.sui-sheet__body--scrollable]=\"atMaxBreakpoint()\"\n      (pointerdown)=\"onBodyPointerDown($event)\"\n      (pointermove)=\"onBodyPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerCancel($event)\"\n    >\n      <ng-content />\n    </div>\n  </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-sheet__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;opacity:0;will-change:opacity;transition-property:opacity;transition-duration:.35s;transition-timing-function:cubic-bezier(.32,.72,0,1)}.sui-sheet__backdrop--dragging{transition:none}.sui-sheet{position:fixed;bottom:8px;left:8px;right:8px;z-index:1001;display:flex;flex-direction:column;box-sizing:border-box;height:max-content;pointer-events:none;border-radius:36px 36px 54px 54px;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-sheet{--sq-t: 45px;--sq-b: 68px;clip-path:shape(from 0 var(--sq-t),curve to var(--sq-t) 0 with 0 0/0 0,hline to calc(100% - var(--sq-t)),curve to 100% var(--sq-t) with 100% 0/100% 0,vline to calc(100% - var(--sq-b)),curve to calc(100% - var(--sq-b)) 100% with 100% 100%/100% 100%,hline to var(--sq-b),curve to 0 calc(100% - var(--sq-b)) with 0 100%/0 100%,close);box-shadow:none!important;filter:none}}.sui-sheet{box-shadow:none;overflow:hidden;contain:layout paint}:host-context(html.platform-android) .sui-sheet{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px}.sui-sheet__panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;box-sizing:border-box;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border-radius:36px 36px 0 0;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-sheet__panel{--sq-t: 45px;clip-path:shape(from 0 var(--sq-t),curve to var(--sq-t) 0 with 0 0/0 0,hline to calc(100% - var(--sq-t)),curve to 100% var(--sq-t) with 100% 0/100% 0,vline to 100%,hline to 0,close)}}.sui-sheet__panel{overflow:hidden;overscroll-behavior:contain;translate:0 100%;will-change:transform,translate;transition-property:translate;transition-duration:.35s;transition-timing-function:cubic-bezier(.32,.72,0,1)}.sui-sheet__panel--dragging{transition:none}:host-context(html.platform-android) .sui-sheet__panel{border-radius:var(--sui-radius-20, 20px) var(--sui-radius-20, 20px) 0 0;--sq-t: 25px}.sui-sheet__handle{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:12px 0 8px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.sui-sheet__handle:active{cursor:grabbing}.sui-sheet__handle-pill{width:36px;height:5px;border-radius:999px;background:var(--sui-bg-soft-200, #d4d4d8)}.sui-sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:none;padding:0 20px 20px}.sui-sheet__body--scrollable{touch-action:pan-y;overscroll-behavior-y:contain}.sui-sheet__body--full{padding:0}@media(max-width:767px){.sui-sheet__body{scrollbar-width:none}.sui-sheet__body::-webkit-scrollbar{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModalSheet, decorators: [{
             type: Component,
             args: [{ selector: 'sui-modal-sheet', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                         '[attr.data-sui-sheet-open]': 'open() ? "" : null',
-                    }, template: "@if (open()) {\n  <!-- Backdrop con opacity din\u00E1mica.\n       pointer-events: none cuando current \u2264 backdropBreakpoint para dejar\n       interactivo el contenido debajo (ej. mapa). -->\n  <div\n    class=\"sui-sheet__backdrop\"\n    [style.opacity]=\"backdropOpacity()\"\n    [style.pointer-events]=\"backdropInteractive() ? 'auto' : 'none'\"\n    (click)=\"onBackdropClick()\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Sheet container \u2014 anclado al bottom, altura din\u00E1mica.\n       Usar `height` en vez de transform para que el \u00E1rea \"no cubierta\" del\n       viewport (donde se ve el mapa) NO sea parte del DOM del sheet \u2014\n       contenido de fondo autom\u00E1ticamente interactivo, scroll del body\n       respeta la altura visible (no fantasma). -->\n  <div\n    #container\n    class=\"sui-sheet\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [class.sui-sheet--dragging]=\"dragging()\"\n    [style.max-height]=\"heightCss()\"\n    [style.--sheet-progress]=\"liveProgress()\"\n  >\n    @if (showHandle()) {\n      <!-- Drag handle (pill). Solo este elemento captura los pointer events\n           del drag \u2014 el resto del sheet permite scroll/clicks normales. -->\n      <div\n        #handle\n        class=\"sui-sheet__handle\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerCancel($event)\"\n      >\n        <div class=\"sui-sheet__handle-pill\"></div>\n      </div>\n    }\n\n    <!-- Body con scroll interno. Consumer proyecta su contenido aqu\u00ED.\n         Acepta drag con patr\u00F3n scroll-then-drag (iOS canon):\n         - Si el body est\u00E1 scrolleado (scrollTop > 0), el drag se ignora y\n           el touch hace scroll normal.\n         - Si est\u00E1 en top (scrollTop === 0) y el user arrastra hacia abajo,\n           se inicia drag del sheet.\n         - Si est\u00E1 en max breakpoint y user arrastra hacia abajo, se inicia\n           drag (incluso con scrollTop === 0 ya cubre eso).\n         - Drag hacia arriba siempre permite scroll del body (no roba el gesto). -->\n    <div\n      #body\n      class=\"sui-sheet__body\"\n      [class.sui-sheet__body--full]=\"fullBody()\"\n      [class.sui-sheet__body--scrollable]=\"atMaxBreakpoint()\"\n      (pointerdown)=\"onBodyPointerDown($event)\"\n      (pointermove)=\"onBodyPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerCancel($event)\"\n    >\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-sheet__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;transition:opacity .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging~.sui-sheet__backdrop,:host([data-sui-sheet-open]) .sui-sheet--dragging+.sui-sheet__backdrop{transition:none}.sui-sheet{position:fixed;bottom:8px;left:8px;right:8px;z-index:1001;display:flex;flex-direction:column;box-sizing:border-box;height:max-content;background:var(--sui-bg-white-0, #ffffff);border-radius:36px 36px 54px 54px;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-sheet{--sq-t: 45px;--sq-b: 68px;clip-path:shape(from 0 var(--sq-t),curve to var(--sq-t) 0 with 0 0/0 0,hline to calc(100% - var(--sq-t)),curve to 100% var(--sq-t) with 100% 0/100% 0,vline to calc(100% - var(--sq-b)),curve to calc(100% - var(--sq-b)) 100% with 100% 100%/100% 100%,hline to var(--sq-b),curve to 0 calc(100% - var(--sq-b)) with 0 100%/0 100%,close);box-shadow:none!important;filter:none}}.sui-sheet{box-shadow:none;overflow:hidden;overscroll-behavior:contain;will-change:max-height;transition:max-height .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging{transition:none}:host-context(html.platform-android) .sui-sheet{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px}.sui-sheet__handle{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:12px 0 8px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.sui-sheet__handle:active{cursor:grabbing}.sui-sheet__handle-pill{width:36px;height:5px;border-radius:999px;background:var(--sui-bg-soft-200, #d4d4d8)}.sui-sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:none;padding:0 20px 20px}.sui-sheet__body--scrollable{touch-action:pan-y;overscroll-behavior-y:contain}.sui-sheet__body--full{padding:0}@media(max-width:767px){.sui-sheet__body{scrollbar-width:none}.sui-sheet__body::-webkit-scrollbar{display:none}}\n"] }]
+                    }, template: "@if (open()) {\n  <!-- Backdrop. Su opacidad la escribe el componente directo en el DOM (en\n       reposo y por frame durante el drag), no un binding: as\u00ED el drag no\n       dispara change detection. pointer-events: none cuando current \u2264\n       backdropBreakpoint para dejar interactivo el contenido debajo (ej. mapa). -->\n  <div\n    #backdrop\n    class=\"sui-sheet__backdrop\"\n    [style.pointer-events]=\"backdropInteractive() ? 'auto' : 'none'\"\n    (click)=\"onBackdropClick()\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Marco del sheet \u2014 alto FIJO (contenido acotado por el breakpoint m\u00E1ximo,\n       `max-height` est\u00E1tico) anclado al bottom. No se mueve ni captura\n       toques: recorta (radius/squircle) al panel de adentro, que es el que se\n       traslada. El \u00E1rea del marco que el panel deja libre es transparente y\n       deja pasar los toques al contenido de fondo (mapa interactivo). -->\n  <div\n    #container\n    class=\"sui-sheet\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [style.max-height]=\"maxHeightCss()\"\n    [style.--sheet-progress]=\"progress()\"\n  >\n  <!-- Panel \u2014 lo \u00FAnico que se mueve, con `translate` (compositor) escrito\n       imperativamente por el componente (en reposo y por frame en el drag). -->\n  <div #panel class=\"sui-sheet__panel\">\n    @if (showHandle()) {\n      <!-- Drag handle (pill). Solo este elemento captura los pointer events\n           del drag \u2014 el resto del sheet permite scroll/clicks normales. -->\n      <div\n        #handle\n        class=\"sui-sheet__handle\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerCancel($event)\"\n      >\n        <div class=\"sui-sheet__handle-pill\"></div>\n      </div>\n    }\n\n    <!-- Body con scroll interno. Consumer proyecta su contenido aqu\u00ED.\n         Acepta drag con patr\u00F3n scroll-then-drag (iOS canon):\n         - Si el body est\u00E1 scrolleado (scrollTop > 0), el drag se ignora y\n           el touch hace scroll normal.\n         - Si est\u00E1 en top (scrollTop === 0) y el user arrastra hacia abajo,\n           se inicia drag del sheet.\n         - Si est\u00E1 en max breakpoint y user arrastra hacia abajo, se inicia\n           drag (incluso con scrollTop === 0 ya cubre eso).\n         - Drag hacia arriba siempre permite scroll del body (no roba el gesto). -->\n    <div\n      #body\n      class=\"sui-sheet__body\"\n      [class.sui-sheet__body--full]=\"fullBody()\"\n      [class.sui-sheet__body--scrollable]=\"atMaxBreakpoint()\"\n      (pointerdown)=\"onBodyPointerDown($event)\"\n      (pointermove)=\"onBodyPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerCancel($event)\"\n    >\n      <ng-content />\n    </div>\n  </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-sheet__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;opacity:0;will-change:opacity;transition-property:opacity;transition-duration:.35s;transition-timing-function:cubic-bezier(.32,.72,0,1)}.sui-sheet__backdrop--dragging{transition:none}.sui-sheet{position:fixed;bottom:8px;left:8px;right:8px;z-index:1001;display:flex;flex-direction:column;box-sizing:border-box;height:max-content;pointer-events:none;border-radius:36px 36px 54px 54px;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-sheet{--sq-t: 45px;--sq-b: 68px;clip-path:shape(from 0 var(--sq-t),curve to var(--sq-t) 0 with 0 0/0 0,hline to calc(100% - var(--sq-t)),curve to 100% var(--sq-t) with 100% 0/100% 0,vline to calc(100% - var(--sq-b)),curve to calc(100% - var(--sq-b)) 100% with 100% 100%/100% 100%,hline to var(--sq-b),curve to 0 calc(100% - var(--sq-b)) with 0 100%/0 100%,close);box-shadow:none!important;filter:none}}.sui-sheet{box-shadow:none;overflow:hidden;contain:layout paint}:host-context(html.platform-android) .sui-sheet{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px}.sui-sheet__panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;box-sizing:border-box;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border-radius:36px 36px 0 0;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-sheet__panel{--sq-t: 45px;clip-path:shape(from 0 var(--sq-t),curve to var(--sq-t) 0 with 0 0/0 0,hline to calc(100% - var(--sq-t)),curve to 100% var(--sq-t) with 100% 0/100% 0,vline to 100%,hline to 0,close)}}.sui-sheet__panel{overflow:hidden;overscroll-behavior:contain;translate:0 100%;will-change:transform,translate;transition-property:translate;transition-duration:.35s;transition-timing-function:cubic-bezier(.32,.72,0,1)}.sui-sheet__panel--dragging{transition:none}:host-context(html.platform-android) .sui-sheet__panel{border-radius:var(--sui-radius-20, 20px) var(--sui-radius-20, 20px) 0 0;--sq-t: 25px}.sui-sheet__handle{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:12px 0 8px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.sui-sheet__handle:active{cursor:grabbing}.sui-sheet__handle-pill{width:36px;height:5px;border-radius:999px;background:var(--sui-bg-soft-200, #d4d4d8)}.sui-sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:none;padding:0 20px 20px}.sui-sheet__body--scrollable{touch-action:pan-y;overscroll-behavior-y:contain}.sui-sheet__body--full{padding:0}@media(max-width:767px){.sui-sheet__body{scrollbar-width:none}.sui-sheet__body::-webkit-scrollbar{display:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], breakpoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoints", required: false }] }], initialBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialBreakpoint", required: false }] }], backdropBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropBreakpoint", required: false }] }], showHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHandle", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], fullBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullBody", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], breakpointChange: [{ type: i0.Output, args: ["breakpointChange"] }], containerRef: [{
                 type: ViewChild,
                 args: ['container']
+            }], panelRef: [{
+                type: ViewChild,
+                args: ['panel']
+            }], backdropRef: [{
+                type: ViewChild,
+                args: ['backdrop']
             }], handleRef: [{
                 type: ViewChild,
                 args: ['handle']
@@ -16826,7 +17168,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;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 });
+    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;display:grid;grid-template-columns:max-content}}@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:100%}.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{display:grid;grid-template-columns:max-content}:host([data-sui-sticky]) .sui-table .sui-table__header,:host([data-sui-sticky]) .sui-table .sui-table__body{min-width:100%}: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}@media(hover:hover)and (pointer:fine){.sui-table__row:hover,.sui-table__row:hover .sui-table__cell{background:var(--sui-bg-weak-50)}}.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-25)}.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,
@@ -16836,7 +17178,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;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"] }]
+                    }, 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;display:grid;grid-template-columns:max-content}}@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:100%}.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{display:grid;grid-template-columns:max-content}:host([data-sui-sticky]) .sui-table .sui-table__header,:host([data-sui-sticky]) .sui-table .sui-table__body{min-width:100%}: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}@media(hover:hover)and (pointer:fine){.sui-table__row:hover,.sui-table__row:hover .sui-table__cell{background:var(--sui-bg-weak-50)}}.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-25)}.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]