ng-components-tsi 0.0.77 → 0.0.78

package/fesm2022/ng-components-tsi.mjs

@@ -4161,6 +4161,539 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 args: ['window:resize', ['$event']]
             }] } });
 
+class TableUltimatePinnedComponent {
+    scrollContainer = viewChild('scrollContainer');
+    customActions = contentChild('customActions');
+    columnDefs = contentChildren(TsiColumnDefDirective);
+    columnDefMap = computed(() => new Map(this.columnDefs().map(d => [d.fieldname(), d.template])));
+    formateador = inject(FormateadorService);
+    // ── Inputs ──────────────────────────────────────────────────────────────────
+    rows = input([]);
+    columns = input([]);
+    footerRows = input([]);
+    rowHeight = input(0);
+    buffer = input(10);
+    altoContainer = input(0);
+    altoContenedor = input(400);
+    minAlto = input(200);
+    identifier = input([]);
+    withFiltro = input(false);
+    withDetails = input(false);
+    withCheckbox = input(false);
+    withTotal = input(false);
+    withHeight = input(false);
+    withAttachment = input(false);
+    variante = input('standard');
+    rendered = input([]);
+    dragOverRowId = signal(null); // dropzone para adjuntos
+    titleTabla = input('Contrato');
+    activeMobileMode = input(true);
+    isLoadingResponsive = signal(false);
+    isMobile = signal(window.innerWidth <= 768);
+    contentFilter = contentChild('header'); // inyect content in filter
+    // ── Output ──────────────────────────────────────────────────────────────────
+    rowEvent = output();
+    // ── ROW ACTIONS ──────────────────────────────────────────────────────────────────
+    selectedRow = model(null);
+    rowClassFn = input(null);
+    rowDisabledFn = input(null);
+    selectItems = model([]);
+    rowFormat = computed(() => this.formateador.procesarLista(this.rows(), this.columns()));
+    // ── Estado interno ───────────────────────────────────────────────────────────
+    busqueda = model('');
+    scrollTop = signal(0);
+    containerHeight = signal(0); // altura real medida del DOM
+    // ── Sort ─────────────────────────────────────────────────────────────────────
+    sortField = signal(null);
+    sortDir = signal('none');
+    //-- EXPANDED ROWS
+    expandedRows = signal(null);
+    classTotales = input('');
+    // ── CSS height del contenedor ─────────────────────────────────────────────────
+    /** Valor aplicado como [style.height] en el template */
+    heightStyle = computed(() => {
+        if (this.altoContainer() > 0) {
+            return `clamp(${this.minAlto()}px, calc(100vh - ${this.altoContainer()}px), 100vh)`;
+        }
+        return `${this.altoContenedor()}px`;
+    });
+    // ── Filtrado + Ordenamiento ───────────────────────────────────────────────────
+    rowFilter = computed(() => {
+        const term = this.busqueda().toLowerCase().trim();
+        const filtered = term
+            ? this.rowFormat().filter(item => this.filtraItem(item, term))
+            : this.rowFormat();
+        const field = this.sortField();
+        const dir = this.sortDir();
+        if (!field || dir === 'none')
+            return filtered;
+        return [...filtered].sort((a, b) => {
+            const valueA = a[field] ?? '';
+            const valueB = b[field] ?? '';
+            if (typeof valueA === 'number' && typeof valueB === 'number') {
+                return dir === 'asc' ? valueA - valueB : valueB - valueA;
+            }
+            const numA = Number(valueA);
+            const numB = Number(valueB);
+            if (!isNaN(numA) && !isNaN(numB)) {
+                return dir === 'asc' ? numA - numB : numB - numA;
+            }
+            const va = String(valueA).toLowerCase();
+            const vb = String(valueB).toLowerCase();
+            const cmp = va.localeCompare(vb, undefined, { numeric: true });
+            return dir === 'asc' ? cmp : -cmp;
+        });
+    });
+    // ── Virtual scroll ────────────────────────────────────────────────────────────
+    // Alto efectivo de fila: si no se pasa rowHeight (0), se resuelve por variante.
+    // DEBE coincidir con el height del td en el SCSS (42px modern / 30px standard) o el scroll se desalinea.
+    rowH = computed(() => this.rowHeight() || (this.variante() === 'modern' ? 40 : 30));
+    totalHeight = computed(() => this.rowFilter().length * this.rowH());
+    startIndex = computed(() => {
+        const idx = Math.floor(this.scrollTop() / this.rowH()) - this.buffer();
+        return Math.max(0, idx);
+    });
+    endIndex = computed(() => {
+        const visible = Math.ceil(this.containerHeight() / this.rowH());
+        const idx = this.startIndex() + visible + this.buffer() * 2;
+        return Math.min(this.rowFilter().length - 1, idx);
+    });
+    visibleRows = computed(() => this.rowFilter().slice(this.startIndex(), this.endIndex() + 1));
+    /** Espacio en blanco antes de las filas renderizadas */
+    paddingTop = computed(() => this.startIndex() * this.rowH());
+    /** Espacio en blanco después de las filas renderizadas */
+    paddingBottom = computed(() => {
+        const remaining = this.rowFilter().length - this.endIndex() - 1;
+        return Math.max(0, remaining * this.rowH());
+    });
+    // ── Scroll hacia fila seleccionada al cargar datos ───────────────────────────
+    scrollEffect = effect(() => {
+        const rows = this.rowFilter();
+        const selected = untracked(() => this.selectedRow());
+        if (rows.length > 0 && selected != null) {
+            queueMicrotask(() => this.scrollToSelected(selected));
+        }
+    });
+    // ── ResizeObserver ────────────────────────────────────────────────────────────
+    resizeObserver;
+    resizeEffect = effect(() => {
+        if (!this.scrollContainer())
+            return;
+        const el = this.scrollContainer().nativeElement;
+        this.containerHeight.set(el.clientHeight);
+        this.syncScrollX(el);
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.containerHeight.set(el.clientHeight);
+                this.scrollTop.set(el.scrollTop);
+                this.syncScrollX(el);
+            });
+            this.resizeObserver.observe(el);
+            // Observa también la tabla: si cambian columnas/datos cambia el ancho scrolleable
+            const table = el.querySelector('table');
+            if (table)
+                this.resizeObserver.observe(table);
+        }
+    });
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+    }
+    // ── Manejadores ──────────────────────────────────────────────────────────────
+    onScroll(event) {
+        const el = event.target;
+        this.scrollTop.set(el.scrollTop);
+        this.syncScrollX(el);
+    }
+    selectRow(row, idList) {
+        this.rowEvent.emit({ usecase: TABLE_EVENTS.CLICK, data: row });
+        if (this.identifier().length < 1) {
+            this.selectedRow.set(idList);
+        }
+        else {
+            this.selectedRow.set(this.concatenarValue(row, this.identifier()));
+        }
+    }
+    isSelected(row, idList) {
+        if (this.identifier().length < 1) {
+            return this.selectedRow() == idList;
+        }
+        return this.selectedRow() == this.concatenarValue(row, this.identifier());
+    }
+    textoDigitado() {
+        this.scrollTop.set(0);
+        if (this.scrollContainer()?.nativeElement) {
+            this.scrollContainer().nativeElement.scrollTop = 0;
+        }
+    }
+    toggleSort(field) {
+        if (this.sortField() !== field) {
+            this.sortField.set(field);
+            this.sortDir.set('asc');
+        }
+        else {
+            if (this.sortDir() === 'asc') {
+                this.sortDir.set('desc');
+            }
+            else if (this.sortDir() === 'desc') {
+                this.sortDir.set('none');
+                this.sortField.set(null);
+            }
+            else {
+                this.sortDir.set('asc');
+            }
+        }
+    }
+    // ── COLUMNAS FIJADAS (PINNED) ─────────────────────────────────────────────────
+    /** Ancho por defecto de una columna fijada que no define width (el offset necesita ancho fijo) */
+    PINNED_DEFAULT_WIDTH = 120;
+    /** Anchos fijos de las columnas utilitarias cuando participan del pinning izquierdo */
+    UTIL_W = { details: 36, checkbox: 36, actions: 44 };
+    /** Posición horizontal del scroll (para las sombras de las columnas fijadas) */
+    scrollLeft = signal(0);
+    maxScrollLeft = signal(0);
+    syncScrollX(el) {
+        this.scrollLeft.set(el.scrollLeft);
+        this.maxScrollLeft.set(el.scrollWidth - el.clientWidth);
+    }
+    /** Lado al que se fija una columna. `pinned: true` = derecha (default) */
+    pinnedSide(col) {
+        if (!col?.pinned)
+            return null;
+        return col.pinned === 'left' ? 'left' : 'right';
+    }
+    pinnedWidth(col) {
+        return col.width || this.PINNED_DEFAULT_WIDTH;
+    }
+    hasLeftPinned = computed(() => this.columnasRenderizadas().some(c => this.pinnedSide(c) === 'left'));
+    hasRightPinned = computed(() => this.columnasRenderizadas().some(c => this.pinnedSide(c) === 'right'));
+    /** Ancho total de las columnas utilitarias fijadas (base del offset de las pinned left) */
+    utilCheckboxLeft = computed(() => this.withDetails() ? this.UTIL_W.details : 0);
+    utilActionsLeft = computed(() => this.utilCheckboxLeft() + (this.withCheckbox() ? this.UTIL_W.checkbox : 0));
+    utilTotalWidth = computed(() => this.utilActionsLeft() + (this.customActions() ? this.UTIL_W.actions : 0));
+    /** Mapa fieldname → PinInfo con los offsets acumulados de cada columna fijada */
+    pinInfo = computed(() => {
+        const map = new Map();
+        const cols = this.columnasRenderizadas();
+        const lefts = cols.filter(c => this.pinnedSide(c) === 'left');
+        const rights = cols.filter(c => this.pinnedSide(c) === 'right');
+        let accLeft = lefts.length > 0 ? this.utilTotalWidth() : 0;
+        lefts.forEach((col, i) => {
+            map.set(col.fieldname, {
+                side: 'left',
+                left: accLeft,
+                right: null,
+                edge: i === lefts.length - 1,
+                width: this.pinnedWidth(col)
+            });
+            accLeft += this.pinnedWidth(col);
+        });
+        let accRight = 0;
+        [...rights].reverse().forEach((col, i) => {
+            map.set(col.fieldname, {
+                side: 'right',
+                left: null,
+                right: accRight,
+                edge: i === rights.length - 1, // la última iterada es la primera visualmente (borde interno)
+                width: this.pinnedWidth(col)
+            });
+            accRight += this.pinnedWidth(col);
+        });
+        return map;
+    });
+    /** PinInfo de una columna, o undefined si no está fijada */
+    pin(col) {
+        return this.pinInfo().get(col.fieldname);
+    }
+    /** Ancho a forzar en la celda: el declarado, o el default si está fijada */
+    colWidth(col) {
+        const p = this.pin(col);
+        if (p)
+            return p.width;
+        return col.width || null;
+    }
+    /** Sombra izquierda: hay columnas fijadas left y se scrolleó */
+    hasShadowLeft = computed(() => this.hasLeftPinned() && this.scrollLeft() > 0);
+    /** Sombra derecha: hay columnas fijadas right y queda contenido oculto a la derecha */
+    hasShadowRight = computed(() => this.hasRightPinned() && this.scrollLeft() < this.maxScrollLeft() - 1);
+    // ── Helpers ──────────────────────────────────────────────────────────────────
+    concatenarValue(obj, fields) {
+        return fields.reduce((acc, f) => acc + (obj[f] ?? ''), '');
+    }
+    getHighlight(text, fieldname) {
+        if (text == null)
+            text = '';
+        if (!this.filtrarColumnas()[fieldname] || !this.busqueda())
+            return text;
+        if (typeof text !== 'string') {
+            text = text.toString();
+        }
+        const regex = new RegExp(`(${this.busqueda()})`, 'gi');
+        return text?.replace(regex, '<mark>$1</mark>');
+    }
+    filtraItem(item, term) {
+        const columnasActivas = Object.entries(this.filtrarColumnas())
+            .filter(([_campo, activo]) => activo);
+        return columnasActivas.some(([campo]) => {
+            const raw = item[campo];
+            const formatted = item._format?.[campo];
+            const valor = (formatted ?? raw ?? '').toString().toLowerCase();
+            return valor.includes(term);
+        });
+    }
+    scrollToSelected(selected) {
+        const rows = this.rowFilter();
+        const idx = this.identifier().length < 1
+            ? (typeof selected === 'number' ? selected : -1)
+            : rows.findIndex(r => this.concatenarValue(r, this.identifier()) === selected);
+        if (idx < 0 || !this.scrollContainer()?.nativeElement)
+            return;
+        const targetTop = idx * this.rowH();
+        const container = this.scrollContainer().nativeElement;
+        const containerH = this.containerHeight();
+        if (targetTop < container.scrollTop || targetTop + this.rowH() > container.scrollTop + containerH) {
+            container.scrollTop = targetTop - containerH / 2;
+        }
+    }
+    /** Índice real en rowFilter de una fila visible (para isSelected) */
+    realIndex(visibleIdx) {
+        return this.startIndex() + visibleIdx;
+    }
+    /** Mostrar columnas para realizar el filtro */
+    filtrarColumnas = computed(() => {
+        const columns = this.columns();
+        const filtro = {};
+        columns.forEach((col) => {
+            if (col.fieldname) {
+                filtro[col.fieldname] = true;
+            }
+        });
+        return filtro;
+    });
+    toggleFiltros(event) {
+        const checked = event.target.checked;
+        const filtros = this.filtrarColumnas();
+        Object.keys(filtros).forEach(key => {
+            filtros[key] = checked;
+        });
+    }
+    /** MOSTRAR/ORDENAR COLUMNAS DE LA TABLA (engranaje del header) */
+    /** orden y visibilidad elegidos por el usuario, por fieldname — sembrado siempre desde columns() */
+    columnState = signal(new Map());
+    /** Reconstruye el estado cada vez que cambia columns() (columns() es la única fuente de verdad) */
+    columnStateEffect = effect(() => {
+        const cols = this.columns();
+        untracked(() => this.columnState.set(this.buildColumnState(cols)));
+    });
+    buildColumnState(cols) {
+        const map = new Map();
+        cols.forEach((col, i) => {
+            map.set(col.fieldname, {
+                visible: this.validaVisibilidad(col.visible),
+                order: col.order ?? i
+            });
+        });
+        return map;
+    }
+    /** Columnas configurables (permitidas por diseño), en el orden elegido por el usuario.
+     *  El caption es solo presentación: sin caption la columna igual se configura y renderiza (identidad = fieldname). */
+    columnasConfigurables = computed(() => {
+        const state = this.columnState();
+        return this.columns()
+            .filter(col => this.validaVisibilidad(col.visible))
+            .slice()
+            .sort((a, b) => (state.get(a.fieldname)?.order ?? 0) - (state.get(b.fieldname)?.order ?? 0));
+    });
+    /** Columnas que realmente se pintan: configurables y marcadas como visibles.
+     *  Las fijadas se reordenan: left al inicio, right al final (una pinned en medio no tiene sentido visual). */
+    columnasRenderizadas = computed(() => {
+        const state = this.columnState();
+        const visibles = this.columnasConfigurables().filter(col => state.get(col.fieldname)?.visible !== false);
+        const left = visibles.filter(c => this.pinnedSide(c) === 'left');
+        const middle = visibles.filter(c => this.pinnedSide(c) === null);
+        const right = visibles.filter(c => this.pinnedSide(c) === 'right');
+        return [...left, ...middle, ...right];
+    });
+    isColumnVisible(fieldname) {
+        return this.columnState().get(fieldname)?.visible !== false;
+    }
+    toggleColumnVisible(fieldname, event) {
+        const checked = event.target.checked;
+        this.columnState.update(map => {
+            const next = new Map(map);
+            const prev = next.get(fieldname);
+            next.set(fieldname, { visible: checked, order: prev?.order ?? 0 });
+            return next;
+        });
+    }
+    onColumnDrop(event) {
+        const list = [...this.columnasConfigurables()];
+        moveItemInArray(list, event.previousIndex, event.currentIndex);
+        this.columnState.update(map => {
+            const next = new Map(map);
+            list.forEach((col, i) => {
+                const prev = next.get(col.fieldname);
+                next.set(col.fieldname, { visible: prev?.visible ?? true, order: i });
+            });
+            return next;
+        });
+    }
+    guardarConfiguracionColumnas() {
+        const state = this.columnState();
+        const config = this.columnasConfigurables().map(col => ({
+            fieldname: col.fieldname,
+            visible: state.get(col.fieldname)?.visible !== false,
+            order: state.get(col.fieldname)?.order ?? 0
+        }));
+        this.rowEvent.emit({ usecase: TABLE_EVENTS.SAVE_COLUMN_CONFIG, data: config });
+    }
+    /** Descarta los cambios sin guardar (drags/toggles) y vuelve al orden/visibilidad de columns() */
+    restablecerConfiguracionColumnas() {
+        this.columnState.set(this.buildColumnState(this.columns()));
+    }
+    validaVisibilidad(value) {
+        return validarBoolean(value);
+    }
+    /** CELL RENDER */
+    resolveCell(col, row) {
+        const value = row[col];
+        const r = this.rendered().find(r => r.matches(col, value, row));
+        return r ? r.render(value, row) : null;
+    }
+    getRowClass(row) {
+        return {
+            'text-error': row.situac == 'J',
+            'text-alerta': row.situac == 'L'
+        };
+    }
+    getPosition(col) {
+        if (col.position)
+            return `text-${col.position}`;
+        if (['decimal', 'number'].includes(col.tipo))
+            return `text-end`;
+        if (['fecha', 'date'].includes(col.tipo))
+            return `text-center`;
+        return 'text-start';
+    }
+    //** WITH DETAILS - EXPANDED ROW */
+    toggleExpandRow(idRow) {
+        const value = this.expandedRows() == idRow ? null : idRow;
+        this.expandedRows.set(value);
+    }
+    //** WITH TOTAL - FOOTER DE TOTALES */
+    getTotals(fieldname) {
+        const itemsSelected = this.withCheckbox() ? this.selectItems().map(item => item.data) : this.rowFormat();
+        const final = itemsSelected.reduce((acc, row) => {
+            const val = row[fieldname];
+            return acc + (typeof val == 'number' ? val : 0);
+        }, 0);
+        return formatDecimal(final);
+    }
+    getColspanBeforeTotals() {
+        const columns = this.columnasRenderizadas();
+        const firstTotalizableIndex = columns.findIndex(c => c.totalizable);
+        const result = firstTotalizableIndex >= 0 ? firstTotalizableIndex : columns.length;
+        const addColumns = (this.withDetails() ? 1 : 0) + (this.withCheckbox() ? 1 : 0) + (this.customActions() ? 1 : 0);
+        return result + addColumns;
+    }
+    //** WITHCHECKBOX LOGICA */
+    allCheck(event) {
+        const input = event.target;
+        const checked = input.checked;
+        this.rowEvent.emit({ usecase: TABLE_EVENTS.CHECK_ALL, data: checked });
+        this.checkAll(checked);
+    }
+    isCheckboxDisabled(row) {
+        return this.rowDisabledFn?.()?.(row) ?? false;
+    }
+    checkAll(checked) {
+        if (checked) {
+            const total = this.rowFilter()
+                .filter(r => !this.isCheckboxDisabled(r))
+                .map(r => ({ id: r.idListTsi, data: r }));
+            this.selectItems.set(total);
+        }
+        else {
+            this.selectItems.set([]);
+        }
+    }
+    validaAllCheck() {
+        const selectable = this.rowFilter().filter(r => !this.isCheckboxDisabled(r));
+        const selectedIds = new Set(this.selectItems().map(s => s.id));
+        return selectable.length > 0 && selectable.every(row => selectedIds.has(row.idListTsi));
+    }
+    isItemSelected(id) {
+        return this.selectItems().some(item => item.id == id);
+    }
+    toogleItem(idList, event) {
+        const row = this.rowFormat().find(r => r.idListTsi == idList);
+        if (!row || this.isCheckboxDisabled(row)) {
+            return;
+        }
+        const input = event.target;
+        const checked = input.checked;
+        this.rowEvent.emit({ usecase: TABLE_EVENTS.CHECK_ROW, data: { row, checked } });
+        if (checked) {
+            const item = { id: idList, data: row };
+            this.selectItems.update(sel => [...sel, item]);
+            return;
+        }
+        this.selectItems.update(sel => sel.filter(s => s.id != idList));
+    }
+    /* EVENTOS DE LA FILA */
+    onDoubleClick(row) {
+        if (window.getSelection()?.type === 'Range')
+            return;
+        this.rowEvent.emit({ usecase: TABLE_EVENTS.DOUBLE_CLICK, data: row });
+    }
+    onRightClick(event, row) {
+        event.preventDefault();
+        this.rowEvent.emit({ usecase: TABLE_EVENTS.RIGHT_CLICK, data: row });
+    }
+    /* MOBILE MODE */
+    onResize(event) {
+        if (!this.activeMobileMode())
+            return;
+        this.isMobile.set(event.target.innerWidth <= 768);
+    }
+    mobileEffect = effect(() => {
+        if (!this.activeMobileMode())
+            return;
+        this.isMobile();
+        this.isLoadingResponsive.set(true);
+        setTimeout(() => this.isLoadingResponsive.set(false), 200);
+    });
+    // DRAG AND DROP ADJUNTOS
+    onDragOver(event, idList) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragOverRowId.set(idList);
+    }
+    onDragLeave() {
+        this.dragOverRowId.set(null);
+    }
+    onDrop(event, row) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragOverRowId.set(null);
+        const file = event.dataTransfer?.files?.[0];
+        if (file) {
+            this.rowEvent.emit({ usecase: TABLE_EVENTS.DRAG_DROP, data: { file, row } });
+        }
+    }
+    getRows = () => this.rowFormat().map(({ idListTsi, format, ...rest }) => rest);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableUltimatePinnedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TableUltimatePinnedComponent, isStandalone: true, selector: "app-table-ultimate-pinned", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, footerRows: { classPropertyName: "footerRows", publicName: "footerRows", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, buffer: { classPropertyName: "buffer", publicName: "buffer", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, altoContenedor: { classPropertyName: "altoContenedor", publicName: "altoContenedor", isSignal: true, isRequired: false, transformFunction: null }, minAlto: { classPropertyName: "minAlto", publicName: "minAlto", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, withAttachment: { classPropertyName: "withAttachment", publicName: "withAttachment", isSignal: true, isRequired: false, transformFunction: null }, variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, activeMobileMode: { classPropertyName: "activeMobileMode", publicName: "activeMobileMode", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", isSignal: true, isRequired: false, transformFunction: null }, rowDisabledFn: { classPropertyName: "rowDisabledFn", publicName: "rowDisabledFn", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, busqueda: { classPropertyName: "busqueda", publicName: "busqueda", isSignal: true, isRequired: false, transformFunction: null }, classTotales: { classPropertyName: "classTotales", publicName: "classTotales", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowEvent: "rowEvent", selectedRow: "selectedRowChange", selectItems: "selectItemsChange", busqueda: "busquedaChange" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class.ll-variant--modern": "variante() === \"modern\"" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }, { propertyName: "columnDefs", predicate: TsiColumnDefDirective, isSignal: true }, { propertyName: "contentFilter", first: true, predicate: ["header"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (withFiltro()) {\n<div class=\"ll-search-bar\">\n\n    <div class=\"ll-search-bar__left\">\n        <ng-container *ngTemplateOutlet=\"contentFilter();\"></ng-container>\n    </div>\n\n    <div class=\"ll-search-bar__right\">\n\n        <div class=\"ll-search-group\">\n\n            <label class=\"form-label mb-0 ll-search-label\">Buscar:</label>\n            <div class=\"ll-search-input-wrap\">\n\n                <input type=\"text\" class=\"form-control cw-250\" placeholder=\"Buscar...\" [(ngModel)]=\"busqueda\" (input)=\"textoDigitado()\" />\n                <app-dropdown-cdk [altoContainer]=\"300\">\n                    <ng-template #trigger>\n                        <button class=\"btn btn-dark boton-buscar fs-7\">\n                            <i class=\"fas fa-cog\"></i>\n                        </button>\n                    </ng-template>\n\n                    <ng-template #content>\n                        <div class=\"popover-menu-filter bg-white shadow my-2\" @fadeInOut>\n                            <div class=\"popover-title fs-7 bg-white\">\n                                Filtros\n                            </div>\n\n                            <div class=\"form-check form-switch text-start d-flex align-items-center\">\n                                <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\n                                    (change)=\"toggleFiltros($event)\" id=\"filter_table_pinned_todos\" />\n                                <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\"\n                                    for=\"filter_table_pinned_todos\">\n                                    Todos\n                                </label>\n                            </div>\n\n                            @for (col of columns(); track col.fieldname) {\n                            <div class=\"form-check form-switch text-start d-flex align-items-center\">\n                                <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\n                                    id=\"{{ 'filter_pinned_' + col.fieldname }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\n                                <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\"\n                                    for=\"{{ 'filter_pinned_' + col.fieldname }}\">\n                                    {{ col.caption || col.fieldname }}\n                                </label>\n                            </div>\n                            }\n                        </div>\n                    </ng-template>\n                </app-dropdown-cdk>\n\n            </div>\n\n        </div>\n\n\n    </div>\n\n\n</div>\n}\n\n@if (activeMobileMode()) {\n@if (isLoadingResponsive()) {\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\n    <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\n    <span class=\"ms-2 fs-6\">Cargando...</span>\n</div>\n}\n\n@if (!isLoadingResponsive()) {\n@if (isMobile()) {\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\n    [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\n}\n@if (!isMobile()) {\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\n}\n}\n}\n@else {\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\n}\n\n<ng-template #table>\n    <!-- Contenedor scrolleable \u2014 solo el BODY hace scroll; header y footer son sticky.\n         Las clases ll-scrolled-* activan las sombras de las columnas fijadas. -->\n    <div #scrollContainer class=\"ll-scroll-container\"\n        [class.ll-scrolled-start]=\"hasShadowLeft()\"\n        [class.ll-scrolled-end]=\"hasShadowRight()\"\n        [style.height]=\"withHeight() ? heightStyle() : ''\"\n        [style.max-height]=\"heightStyle()\" (scroll)=\"onScroll($event)\">\n        <table class=\"ll-table\">\n\n            <!-- \u2500\u2500 HEADER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n            <thead class=\"ll-thead\">\n                <tr>\n                    @if (withDetails()) {\n                    <th class=\"cw-25\"\n                        [class.ll-col-pinned]=\"hasLeftPinned()\"\n                        [style.left.px]=\"hasLeftPinned() ? 0 : null\"\n                        [style.width.px]=\"hasLeftPinned() ? UTIL_W.details : null\"\n                        [style.min-width.px]=\"hasLeftPinned() ? UTIL_W.details : null\"\n                        [style.max-width.px]=\"hasLeftPinned() ? UTIL_W.details : null\"></th>\n                    }\n\n                    @if (withCheckbox()) {\n                    <th class=\"cw-20\"\n                        [class.ll-col-pinned]=\"hasLeftPinned()\"\n                        [style.left.px]=\"hasLeftPinned() ? utilCheckboxLeft() : null\"\n                        [style.width.px]=\"hasLeftPinned() ? UTIL_W.checkbox : null\"\n                        [style.min-width.px]=\"hasLeftPinned() ? UTIL_W.checkbox : null\"\n                        [style.max-width.px]=\"hasLeftPinned() ? UTIL_W.checkbox : null\">\n                        <label>\n                            <input type=\"checkbox\" name=\"check_box_select_table_pinned_main\" id=\"check_box_select_table_pinned_main\"\n                                animatedCheckbox [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\n                        </label>\n                    </th>\n                    }\n\n                    @if (customActions()) {\n                    <th class=\"cw-40\"\n                        [class.ll-col-pinned]=\"hasLeftPinned()\"\n                        [style.left.px]=\"hasLeftPinned() ? utilActionsLeft() : null\"\n                        [style.width.px]=\"hasLeftPinned() ? UTIL_W.actions : null\"\n                        [style.min-width.px]=\"hasLeftPinned() ? UTIL_W.actions : null\"\n                        [style.max-width.px]=\"hasLeftPinned() ? UTIL_W.actions : null\">\n                        <app-dropdown-cdk [altoContainer]=\"500\">\n                            <ng-template #trigger>\n                                <button class=\"btn p-0 text-dark d-flex mx-auto border-0 icon-table\">\n                                    <i class=\"fas fa-cog\"></i>\n                                </button>\n                            </ng-template>\n                            <ng-template #content>\n                                <div class=\"popover-menu-column bg-white shadow my-2\" @fadeInOut>\n                                    <div class=\"popover-title fs-7 bg-white d-flex align-items-baseline justify-content-between\">\n                                        <span>Columnas</span>\n                                        <span class=\"column-config-hint\">arrastra para ordenar</span>\n                                    </div>\n\n                                    <div cdkDropList class=\"column-config-list\" (cdkDropListDropped)=\"onColumnDrop($event)\">\n                                        @for (col of columnasConfigurables(); track col.fieldname) {\n                                        <div class=\"column-config-row\" cdkDrag>\n                                            <i class=\"fas fa-grip-vertical column-config-grip\" cdkDragHandle></i>\n                                            <div class=\"form-check form-switch text-start d-flex align-items-center mb-0 flex-grow-1\">\n                                                <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\n                                                    id=\"{{ 'switch_pinned_' + col.fieldname }}\"\n                                                    [checked]=\"isColumnVisible(col.fieldname)\"\n                                                    (change)=\"toggleColumnVisible(col.fieldname, $event)\" />\n                                                <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\n                                                    for=\"{{ 'switch_pinned_' + col.fieldname }}\">\n                                                    {{ col.caption || col.fieldname }}\n                                                </label>\n                                            </div>\n                                            @if (pinnedSide(col)) {\n                                            <i class=\"fas fa-thumbtack column-config-pin\" title=\"Columna fijada\"></i>\n                                            }\n                                        </div>\n                                        }\n                                    </div>\n\n                                    <div class=\"column-config-footer\">\n                                        <button type=\"button\" class=\"btn btn-sm fs-7 column-config-save\"\n                                            (click)=\"guardarConfiguracionColumnas()\">\n                                            Guardar configuraci\u00F3n\n                                        </button>\n                                    </div>\n                                </div>\n                            </ng-template>\n                        </app-dropdown-cdk>\n                    </th>\n                    }\n\n                    @for (col of columnasRenderizadas(); track col.fieldname) {\n                    <th [title]=\"col.caption\" [style.width.px]=\"colWidth(col)\"\n                        [style.min-width.px]=\"colWidth(col)\" [style.max-width.px]=\"colWidth(col)\"\n                        [class.ll-th-sortable]=\"col.caption\"\n                        [class.ll-col-pinned]=\"!!pin(col)\"\n                        [class.ll-col-pinned--shadow-left]=\"pin(col)?.side === 'left' && pin(col)?.edge\"\n                        [class.ll-col-pinned--shadow-right]=\"pin(col)?.side === 'right' && pin(col)?.edge\"\n                        [style.left.px]=\"pin(col)?.left\"\n                        [style.right.px]=\"pin(col)?.right\"\n                        (click)=\"col.caption && toggleSort(col.fieldname)\">\n                        <span class=\"ll-th-content\">\n                            <span class=\"ll-th-caption\">{{ col.caption }}</span>\n                            @if (col.caption) {\n                            @if (sortField() === col.fieldname) {\n                            <i class=\"ms-1\"\n                                [ngClass]=\"sortDir() === 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\n                            } @else {\n                            <i class=\"fas fa-sort ms-1 ll-sort-idle\"></i>\n                            }\n                            }\n                        </span>\n                    </th>\n                    }\n                </tr>\n            </thead>\n\n            <!-- \u2500\u2500 BODY virtual \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n            <tbody>\n                <!-- Spacer superior: ocupa el espacio de las filas NO renderizadas arriba -->\n                @if (paddingTop() > 0) {\n                <tr class=\"ll-spacer\" [style.height.px]=\"paddingTop()\">\n                    <td [attr.colspan]=\"columnasRenderizadas().length\"></td>\n                </tr>\n                }\n\n                <!-- Filas visibles -->\n                @for (row of visibleRows(); track row.idListTsi) {\n                @let idList = row.idListTsi;\n                <tr class=\"ll-row\" [class.ll-row--selected]=\"isSelected(row, idList)\"\n                    [class.ll-row--drag-over]=\"withAttachment() && dragOverRowId() === idList\"\n                    (click)=\"selectRow(row, idList)\" (dblclick)=\"onDoubleClick(row)\"\n                    (contextmenu)=\"onRightClick($event,row)\"\n                    (dragover)=\"withAttachment() && onDragOver($event, idList)\"\n                    (dragleave)=\"withAttachment() && onDragLeave()\" (drop)=\"withAttachment() && onDrop($event, row)\">\n\n                    @if (withDetails()) {\n                    <td class=\"b-table text-center mwp-25\"\n                        [class.ll-col-pinned]=\"hasLeftPinned()\"\n                        [style.left.px]=\"hasLeftPinned() ? 0 : null\">\n                        <a (click)=\"toggleExpandRow(idList)\" class=\"text-dark cursor-pointer fs-6\">\n                            <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows() != idList\"\n                                [class.fa-chevron-down]=\"expandedRows() == idList\"></i>\n                        </a>\n                    </td>\n                    }\n\n                    @if (withCheckbox()) {\n                    <td scope=\"col\" class=\"text-center b-table\"\n                        [class.ll-col-pinned]=\"hasLeftPinned()\"\n                        [style.left.px]=\"hasLeftPinned() ? utilCheckboxLeft() : null\">\n                        <label>\n                            <input type=\"checkbox\" [name]=\"'check_box_select_table_pinned_' + idList\"\n                                [id]=\"'check_box_select_table_pinned_' + idList\" animatedCheckbox\n                                [checked]=\"isItemSelected(idList)\" (click)=\"$event.stopPropagation()\"\n                                (change)=\"toogleItem(idList , $event)\" [disabled]=\"isCheckboxDisabled(row)\">\n                        </label>\n                    </td>\n                    }\n\n                    @if (customActions()) {\n                    <td class=\"text-center\"\n                        [class.ll-col-pinned]=\"hasLeftPinned()\"\n                        [style.left.px]=\"hasLeftPinned() ? utilActionsLeft() : null\">\n                        <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\n                    </td>\n                    }\n\n                    @for (col of columnasRenderizadas(); track col.fieldname) {\n                    @if (columnDefMap().has(col.fieldname)) {\n                    <td [class.ll-col-pinned]=\"!!pin(col)\"\n                        [class.ll-col-pinned--shadow-left]=\"pin(col)?.side === 'left' && pin(col)?.edge\"\n                        [class.ll-col-pinned--shadow-right]=\"pin(col)?.side === 'right' && pin(col)?.edge\"\n                        [style.left.px]=\"pin(col)?.left\"\n                        [style.right.px]=\"pin(col)?.right\"\n                        [style.min-width.px]=\"pin(col) ? colWidth(col) : null\"\n                        [style.max-width.px]=\"pin(col) ? colWidth(col) : null\">\n                        <ng-container *ngTemplateOutlet=\"columnDefMap().get(col.fieldname)!; context: { $implicit: row, column: col }\">\n                        </ng-container>\n                    </td>\n                    } @else if (col.template) {\n                    <td [class.ll-col-pinned]=\"!!pin(col)\"\n                        [class.ll-col-pinned--shadow-left]=\"pin(col)?.side === 'left' && pin(col)?.edge\"\n                        [class.ll-col-pinned--shadow-right]=\"pin(col)?.side === 'right' && pin(col)?.edge\"\n                        [style.left.px]=\"pin(col)?.left\"\n                        [style.right.px]=\"pin(col)?.right\"\n                        [style.min-width.px]=\"pin(col) ? colWidth(col) : null\"\n                        [style.max-width.px]=\"pin(col) ? colWidth(col) : null\">\n                        <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row, column: col }\">\n                        </ng-container>\n                    </td>\n                    } @else {\n                    @switch (col.tipo) {\n\n                    @case ('cell-render') {\n                    @let resolverItem = resolveCell(col.fieldname, row);\n                    @if (resolverItem) {\n                    <td [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\"\n                        [class.ll-col-pinned]=\"!!pin(col)\"\n                        [class.ll-col-pinned--shadow-left]=\"pin(col)?.side === 'left' && pin(col)?.edge\"\n                        [class.ll-col-pinned--shadow-right]=\"pin(col)?.side === 'right' && pin(col)?.edge\"\n                        [style.left.px]=\"pin(col)?.left\"\n                        [style.right.px]=\"pin(col)?.right\"\n                        [style.min-width.px]=\"pin(col) ? colWidth(col) : null\"\n                        [style.max-width.px]=\"pin(col) ? colWidth(col) : null\">\n                        @if (resolverItem.icon) {\n                        <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\n                        } @else if (resolverItem.class) {\n                        <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\n                            {{ resolverItem.text }}\n                        </span>\n                        } @else {\n                        {{ resolverItem.text }}\n                        }\n                    </td>\n                    }\n                    }\n\n                    @default {\n                    <td [innerHTML]=\"getHighlight(row._format?.[col.fieldname] ?? row[col.fieldname], col.fieldname)\"\n                        [style.width.px]=\"colWidth(col)\"\n                        [style.min-width.px]=\"pin(col) ? colWidth(col) : null\"\n                        [style.max-width.px]=\"colWidth(col)\"\n                        [attr.title]=\"row[col.fieldname] || null\"\n                        [class.ll-col-pinned]=\"!!pin(col)\"\n                        [class.ll-col-pinned--shadow-left]=\"pin(col)?.side === 'left' && pin(col)?.edge\"\n                        [class.ll-col-pinned--shadow-right]=\"pin(col)?.side === 'right' && pin(col)?.edge\"\n                        [style.left.px]=\"pin(col)?.left\"\n                        [style.right.px]=\"pin(col)?.right\"\n                        [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"{{getPosition(col)}}\">\n                    </td>\n                    }\n\n                    }\n                    }\n                    }\n                </tr>\n\n                @if (idList == expandedRows()) {\n                <tr @fadeInOut>\n                    <td [attr.colspan]=\"columnasRenderizadas().length + (withDetails() ? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\n                        class=\"table-blank\">\n                        <div class=\"d-flex flex-column auditoria\">\n                            <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\n                            <span class=\"fs-6 text-dark fw-bold\">\n                                Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\n                                row.hcreac }}\n                            </span>\n                            <span class=\"fs-6 text-dark fw-bold\">\n                                Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\n                                {{\n                                row.hactua }}\n                            </span>\n                        </div>\n                    </td>\n                </tr>\n                }\n\n                }\n\n                <!-- Fila vac\u00EDa si no hay datos -->\n                @if (rowFilter().length === 0) {\n                <tr>\n                    <td [attr.colspan]=\"columnasRenderizadas().length\" class=\"ll-empty\">\n                        Sin datos\n                    </td>\n                </tr>\n                }\n\n                <!-- Spacer inferior: ocupa el espacio de las filas NO renderizadas abajo -->\n                @if (paddingBottom() > 0) {\n                <tr class=\"ll-spacer\" [style.height.px]=\"paddingBottom()\">\n                    <td [attr.colspan]=\"columnasRenderizadas().length\"></td>\n                </tr>\n                }\n            </tbody>\n\n            <!-- \u2500\u2500 FOOTER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n            @if (withTotal() && rowFilter().length > 0) {\n            <tfoot class=\"ll-tfoot\">\n\n                <tr>\n                    <td [attr.colspan]=\"getColspanBeforeTotals()\" class=\"{{classTotales()}} fw-5 fs-6 ps-2 py-2\">Totales:</td>\n                    @for (col of columnasRenderizadas() ; track col.fieldname) {\n                    @if (col.totalizable) {\n                    <td class=\"{{classTotales()}} ll-footer-cell fw-5 text-end fs-6\"\n                        [class.ll-col-pinned]=\"!!pin(col)\"\n                        [class.ll-col-pinned--shadow-left]=\"pin(col)?.side === 'left' && pin(col)?.edge\"\n                        [class.ll-col-pinned--shadow-right]=\"pin(col)?.side === 'right' && pin(col)?.edge\"\n                        [style.left.px]=\"pin(col)?.left\"\n                        [style.right.px]=\"pin(col)?.right\">\n                        {{ getTotals(col.fieldname)}}\n                    </td>\n                    }\n                    }\n                </tr>\n            </tfoot>\n            }\n\n        </table>\n    </div>\n</ng-template>\n", styles: [":host(.ll-variant--modern) .ll-search-bar .ll-search-label{display:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control{width:250px!important;min-width:250px!important;border-radius:5px!important;border:1px solid rgba(0,0,0,.12);background-color:#fff;font-size:12px;padding-left:34px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:10px center;background-size:14px 14px;transition:border-color .15s ease,box-shadow .15s ease;height:30px!important;font-weight:400}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control::placeholder{color:#9ca3af}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b14;outline:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar{border-radius:5px;height:30px!important;width:30px!important;min-width:30px!important;background-color:#fff!important;border:1px solid rgba(0,0,0,.12)!important;color:#546074!important}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar:hover{background-color:#f3f4f6!important;border-color:#0003!important}:host(.ll-variant--modern) .ll-scroll-container{border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px #0000000f,0 4px 16px #0000000a;background:#fff}:host(.ll-variant--modern) .ll-table{border-collapse:separate;border-spacing:0;background:#fff}:host(.ll-variant--modern) .ll-thead tr th{background:#f1f1f1;color:#333!important;border:none;border-bottom:1px solid rgba(0,0,0,.1);border-top:1px solid rgba(0,0,0,.1);padding:12px 14px;box-shadow:none}:host(.ll-variant--modern) .ll-thead tr th.ll-col-pinned{background:#f1f1f1}:host(.ll-variant--modern) .ll-th-sortable:hover{background-color:#fff!important}:host(.ll-variant--modern) .ll-sort-idle{opacity:.4;color:#1e293b}:host(.ll-variant--modern) .icon-table{color:#5e5959!important;font-size:12px!important}:host(.ll-variant--modern) .ll-row{--row-bg: #ffffff;background-color:var(--row-bg);transition:background-color .1s ease}:host(.ll-variant--modern) .ll-row:nth-child(odd){--row-bg: #ffffff}:host(.ll-variant--modern) .ll-row:nth-child(2n){--row-bg: #f0f0f0}:host(.ll-variant--modern) .ll-row:hover:not(.ll-row--selected){--row-bg: #ebebeb;background-color:var(--row-bg)!important}:host(.ll-variant--modern) .ll-row--selected{--row-bg: var(--table-active-bg);background:var(--table-active-bg)!important;color:var(--table-active-color)!important;box-shadow:inset 4px 0 #334155}:host(.ll-variant--modern) .ll-row--drag-over{--row-bg: color-mix(in srgb, #5b8dee 8%, #ffffff);background-color:var(--row-bg)!important;outline:2px dashed rgba(91,141,238,.5);outline-offset:-2px}:host(.ll-variant--modern) .ll-row td{border-left:none;border-right:none;border-top:none;border-bottom:1px solid rgba(0,0,0,.1);height:40px}:host(.ll-variant--modern) .ll-tfoot tr td:first-child{border-bottom-left-radius:10px}:host(.ll-variant--modern) .ll-tfoot tr td:last-child{border-bottom-right-radius:10px}:host(.ll-variant--modern) .ll-tfoot .ll-footer-cell{background-color:var(--background-card);color:var(--text-color);border:none;border-top:1px solid rgba(0,0,0,.08);padding:10px 14px;box-shadow:none}:host(.ll-variant--modern) .ll-empty{padding:28px;color:#9ca3af;font-size:13px}.ll-search-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.ll-search-bar__left{display:flex;align-items:center;gap:6px;flex:1;flex-wrap:wrap}.ll-search-bar__right{display:flex;align-items:center;gap:4px;flex-shrink:0}.ll-search-bar__right .ll-search-group{display:flex;align-items:center;gap:4px}.ll-search-bar__right .ll-search-group .ll-search-label{white-space:nowrap}.ll-search-bar__right .ll-search-group .ll-search-input-wrap{display:flex;align-items:center}@media(max-width:576px){.ll-search-bar__right{width:100%;justify-content:space-between}.ll-search-bar__right .ll-search-group{flex-direction:column;align-items:flex-start;width:100%}.ll-search-bar__right .ll-search-group .ll-search-input-wrap{width:100%}.ll-search-bar__right .ll-search-group .ll-search-input-wrap input{flex:1}}.ll-scroll-container{width:100%;overflow-y:auto;overflow-x:auto;display:block;position:relative;border:var(--border-table-header);border-radius:4px;overflow-anchor:none}.ll-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:auto;white-space:nowrap}.ll-thead{position:sticky;top:0;z-index:3;background-color:var(--background-header-table)}.ll-thead tr th{font-size:11px;font-weight:700;color:var(--text-color);text-align:start;padding:6px 8px;border:none;border-right:var(--border-table-header);border-bottom:var(--border-table-header);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:var(--background-header-table);box-shadow:0 2px 2px -1px #0000001a}.ll-th-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.ll-th-sortable:hover{background-color:var(--bs-table-header-hover-bg)!important}.ll-th-content{display:flex;align-items:center;gap:2px}.ll-th-caption{overflow:hidden;text-overflow:ellipsis}.ll-sort-idle{opacity:.25}.ll-tfoot{position:sticky;bottom:0;z-index:3;background-color:var(--background-card)}.ll-tfoot .ll-footer-cell{font-size:11px;color:var(--text-color);padding:10px 8px;border:none;border-right:var(--border-table-header);border-top:var(--border-table-header);background-color:var(--background-card);box-shadow:0 -2px 2px -1px #0000001a}.ll-row{--row-bg: var(--background-card, #ffffff);height:30px;cursor:pointer;background-color:var(--row-bg)}.ll-row:nth-child(odd){--row-bg: color-mix(in srgb, var(--background-card, #ffffff) 94%, #000000)}.ll-row:hover:not(.ll-row--selected){--row-bg: color-mix(in srgb, var(--background-card, #ffffff) 92%, #000000)}.ll-row--selected{--row-bg: var(--table-active-bg);background:var(--table-active-bg)!important;color:var(--table-active-color)!important}.ll-row--drag-over{--row-bg: color-mix(in srgb, #5b8dee 12%, var(--background-card, #ffffff));background-color:var(--row-bg)!important;outline:2px dashed #5b8dee;outline-offset:-2px;cursor:copy}.ll-row--drag-over td{color:#5b8dee!important}.ll-row td{font-size:11px;font-weight:500;color:var(--text-color);vertical-align:middle;padding:0 8px;border:none;border-right:var(--border-table-header);border-bottom:var(--border-table-header);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ll-col-pinned{position:sticky;z-index:2;background-color:var(--row-bg, var(--background-card, #ffffff));background-clip:padding-box}.ll-thead tr th.ll-col-pinned{z-index:2;background-color:var(--background-header-table)}.ll-tfoot tr td.ll-col-pinned{z-index:2;background-color:var(--background-card)}.ll-scrolled-start .ll-col-pinned--shadow-left{box-shadow:6px 0 8px -4px #00000040}.ll-scrolled-end .ll-col-pinned--shadow-right{box-shadow:-6px 0 8px -4px #00000040}.ll-scrolled-start .ll-thead tr th.ll-col-pinned--shadow-left{box-shadow:6px 0 8px -4px #00000040,0 2px 2px -1px #0000001a}.ll-scrolled-end .ll-thead tr th.ll-col-pinned--shadow-right{box-shadow:-6px 0 8px -4px #00000040,0 2px 2px -1px #0000001a}.ll-spacer td{padding:0;border:none}.ll-empty{text-align:center;padding:16px;color:#6c757d;font-size:12px}@media(max-width:1600px){.ll-thead tr th,.ll-row td,.ll-tfoot .ll-footer-cell{font-size:9px}}.popover-menu-column{border-radius:.375rem;padding:0rem .75rem;display:block;max-height:min(500px,80vh);width:min(400px,100vw - 2rem);max-width:calc(80vw - 2rem);overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.6rem .75rem;border-bottom:1px solid #c4c4c4;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.column-config-hint{font-size:10px;font-weight:400;text-transform:none;color:#9aa3ac}.column-config-list{display:flex;flex-direction:column;gap:3px;padding:4px 0 2px}.column-config-row{display:flex;align-items:center;gap:8px;padding:4px 6px;background:#fff;border:1px solid transparent;border-radius:6px;transition:background-color .15s ease,border-color .15s ease}.column-config-row:hover{background:#f6f7f8}.column-config-grip{cursor:grab;color:#adb5bd;font-size:13px;flex:none}.column-config-grip:active{cursor:grabbing}.column-config-pin{color:#64748b;font-size:11px;flex:none;transform:rotate(35deg)}.column-config-row.cdk-drag-preview{box-shadow:0 10px 24px -8px #00000059;border:1px solid #e5e5e5;border-radius:6px;background:#fff;transform:rotate(-1.5deg)}.column-config-row.cdk-drag-placeholder{border:1.5px dashed #6c757d;border-radius:6px;background:#f1f3f5;opacity:.7}.column-config-row.cdk-drag-placeholder *{visibility:hidden}.column-config-list.cdk-drop-list-dragging .column-config-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.column-config-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;bottom:0;background:#fff;border-top:1px solid #e5e5e5;margin:6px -.75rem 0;padding:8px .75rem}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.column-config-save{border-radius:6px;border:1px solid rgba(0,0,0,.12);background-color:#fff;color:#272727;padding:4px 12px;box-shadow:0 1px 2px #0000000f;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.column-config-save:hover{background-color:#334155;border-color:#0003;color:#fff;box-shadow:0 2px 6px #00000026}.popover-menu-filter{background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.table-blank{background:var(--background-card)}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.cw-25{min-width:40px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { kind: "directive", type: AnimatedCheckboxDirective, selector: "input[type=checkbox][animatedCheckbox]", inputs: ["cbClass"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], animations: [fadeInOut, dropdownAnimation] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableUltimatePinnedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table-ultimate-pinned', imports: [FormsModule, CommonModule, DropdownCdkComponent, AnimatedCheckboxDirective, CardMobileComponent, NgTemplateOutlet, CdkDropList, CdkDrag, CdkDragHandle], animations: [fadeInOut, dropdownAnimation], host: {
+                        '[class.ll-variant--modern]': 'variante() === "modern"'
+                    }, template: "@if (withFiltro()) {\n<div class=\"ll-search-bar\">\n\n    <div class=\"ll-search-bar__left\">\n        <ng-container *ngTemplateOutlet=\"contentFilter();\"></ng-container>\n    </div>\n\n    <div class=\"ll-search-bar__right\">\n\n        <div class=\"ll-search-group\">\n\n            <label class=\"form-label mb-0 ll-search-label\">Buscar:</label>\n            <div class=\"ll-search-input-wrap\">\n\n                <input type=\"text\" class=\"form-control cw-250\" placeholder=\"Buscar...\" [(ngModel)]=\"busqueda\" (input)=\"textoDigitado()\" />\n                <app-dropdown-cdk [altoContainer]=\"300\">\n                    <ng-template #trigger>\n                        <button class=\"btn btn-dark boton-buscar fs-7\">\n                            <i class=\"fas fa-cog\"></i>\n                        </button>\n                    </ng-template>\n\n                    <ng-template #content>\n                        <div class=\"popover-menu-filter bg-white shadow my-2\" @fadeInOut>\n                            <div class=\"popover-title fs-7 bg-white\">\n                                Filtros\n                            </div>\n\n                            <div class=\"form-check form-switch text-start d-flex align-items-center\">\n                                <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\n                                    (change)=\"toggleFiltros($event)\" id=\"filter_table_pinned_todos\" />\n                                <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\"\n                                    for=\"filter_table_pinned_todos\">\n                                    Todos\n                                </label>\n                            </div>\n\n                            @for (col of columns(); track col.fieldname) {\n                            <div class=\"form-check form-switch text-start d-flex align-items-center\">\n                                <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\n                                    id=\"{{ 'filter_pinned_' + col.fieldname }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\n                                <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\"\n                                    for=\"{{ 'filter_pinned_' + col.fieldname }}\">\n                                    {{ col.caption || col.fieldname }}\n                                </label>\n                            </div>\n                            }\n                        </div>\n                    </ng-template>\n                </app-dropdown-cdk>\n\n            </div>\n\n        </div>\n\n\n    </div>\n\n\n</div>\n}\n\n@if (activeMobileMode()) {\n@if (isLoadingResponsive()) {\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\n    <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\n    <span class=\"ms-2 fs-6\">Cargando...</span>\n</div>\n}\n\n@if (!isLoadingResponsive()) {\n@if (isMobile()) {\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\n    [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\n}\n@if (!isMobile()) {\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\n}\n}\n}\n@else {\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\n}\n\n<ng-template #table>\n    <!-- Contenedor scrolleable \u2014 solo el BODY hace scroll; header y footer son sticky.\n         Las clases ll-scrolled-* activan las sombras de las columnas fijadas. -->\n    <div #scrollContainer class=\"ll-scroll-container\"\n        [class.ll-scrolled-start]=\"hasShadowLeft()\"\n        [class.ll-scrolled-end]=\"hasShadowRight()\"\n        [style.height]=\"withHeight() ? heightStyle() : ''\"\n        [style.max-height]=\"heightStyle()\" (scroll)=\"onScroll($event)\">\n        <table class=\"ll-table\">\n\n            <!-- \u2500\u2500 HEADER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n            <thead class=\"ll-thead\">\n                <tr>\n                    @if (withDetails()) {\n                    <th class=\"cw-25\"\n                        [class.ll-col-pinned]=\"hasLeftPinned()\"\n                        [style.left.px]=\"hasLeftPinned() ? 0 : null\"\n                        [style.width.px]=\"hasLeftPinned() ? UTIL_W.details : null\"\n                        [style.min-width.px]=\"hasLeftPinned() ? UTIL_W.details : null\"\n                        [style.max-width.px]=\"hasLeftPinned() ? UTIL_W.details : null\"></th>\n                    }\n\n                    @if (withCheckbox()) {\n                    <th class=\"cw-20\"\n                        [class.ll-col-pinned]=\"hasLeftPinned()\"\n                        [style.left.px]=\"hasLeftPinned() ? utilCheckboxLeft() : null\"\n                        [style.width.px]=\"hasLeftPinned() ? UTIL_W.checkbox : null\"\n                        [style.min-width.px]=\"hasLeftPinned() ? UTIL_W.checkbox : null\"\n                        [style.max-width.px]=\"hasLeftPinned() ? UTIL_W.checkbox : null\">\n                        <label>\n                            <input type=\"checkbox\" name=\"check_box_select_table_pinned_main\" id=\"check_box_select_table_pinned_main\"\n                                animatedCheckbox [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\n                        </label>\n                    </th>\n                    }\n\n                    @if (customActions()) {\n                    <th class=\"cw-40\"\n                        [class.ll-col-pinned]=\"hasLeftPinned()\"\n                        [style.left.px]=\"hasLeftPinned() ? utilActionsLeft() : null\"\n                        [style.width.px]=\"hasLeftPinned() ? UTIL_W.actions : null\"\n                        [style.min-width.px]=\"hasLeftPinned() ? UTIL_W.actions : null\"\n                        [style.max-width.px]=\"hasLeftPinned() ? UTIL_W.actions : null\">\n                        <app-dropdown-cdk [altoContainer]=\"500\">\n                            <ng-template #trigger>\n                                <button class=\"btn p-0 text-dark d-flex mx-auto border-0 icon-table\">\n                                    <i class=\"fas fa-cog\"></i>\n                                </button>\n                            </ng-template>\n                            <ng-template #content>\n                                <div class=\"popover-menu-column bg-white shadow my-2\" @fadeInOut>\n                                    <div class=\"popover-title fs-7 bg-white d-flex align-items-baseline justify-content-between\">\n                                        <span>Columnas</span>\n                                        <span class=\"column-config-hint\">arrastra para ordenar</span>\n                                    </div>\n\n                                    <div cdkDropList class=\"column-config-list\" (cdkDropListDropped)=\"onColumnDrop($event)\">\n                                        @for (col of columnasConfigurables(); track col.fieldname) {\n                                        <div class=\"column-config-row\" cdkDrag>\n                                            <i class=\"fas fa-grip-vertical column-config-grip\" cdkDragHandle></i>\n                                            <div class=\"form-check form-switch text-start d-flex align-items-center mb-0 flex-grow-1\">\n                                                <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\n                                                    id=\"{{ 'switch_pinned_' + col.fieldname }}\"\n                                                    [checked]=\"isColumnVisible(col.fieldname)\"\n                                                    (change)=\"toggleColumnVisible(col.fieldname, $event)\" />\n                                                <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\n                                                    for=\"{{ 'switch_pinned_' + col.fieldname }}\">\n                                                    {{ col.caption || col.fieldname }}\n                                                </label>\n                                            </div>\n                                            @if (pinnedSide(col)) {\n                                            <i class=\"fas fa-thumbtack column-config-pin\" title=\"Columna fijada\"></i>\n                                            }\n                                        </div>\n                                        }\n                                    </div>\n\n                                    <div class=\"column-config-footer\">\n                                        <button type=\"button\" class=\"btn btn-sm fs-7 column-config-save\"\n                                            (click)=\"guardarConfiguracionColumnas()\">\n                                            Guardar configuraci\u00F3n\n                                        </button>\n                                    </div>\n                                </div>\n                            </ng-template>\n                        </app-dropdown-cdk>\n                    </th>\n                    }\n\n                    @for (col of columnasRenderizadas(); track col.fieldname) {\n                    <th [title]=\"col.caption\" [style.width.px]=\"colWidth(col)\"\n                        [style.min-width.px]=\"colWidth(col)\" [style.max-width.px]=\"colWidth(col)\"\n                        [class.ll-th-sortable]=\"col.caption\"\n                        [class.ll-col-pinned]=\"!!pin(col)\"\n                        [class.ll-col-pinned--shadow-left]=\"pin(col)?.side === 'left' && pin(col)?.edge\"\n                        [class.ll-col-pinned--shadow-right]=\"pin(col)?.side === 'right' && pin(col)?.edge\"\n                        [style.left.px]=\"pin(col)?.left\"\n                        [style.right.px]=\"pin(col)?.right\"\n                        (click)=\"col.caption && toggleSort(col.fieldname)\">\n                        <span class=\"ll-th-content\">\n                            <span class=\"ll-th-caption\">{{ col.caption }}</span>\n                            @if (col.caption) {\n                            @if (sortField() === col.fieldname) {\n                            <i class=\"ms-1\"\n                                [ngClass]=\"sortDir() === 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\n                            } @else {\n                            <i class=\"fas fa-sort ms-1 ll-sort-idle\"></i>\n                            }\n                            }\n                        </span>\n                    </th>\n                    }\n                </tr>\n            </thead>\n\n            <!-- \u2500\u2500 BODY virtual \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n            <tbody>\n                <!-- Spacer superior: ocupa el espacio de las filas NO renderizadas arriba -->\n                @if (paddingTop() > 0) {\n                <tr class=\"ll-spacer\" [style.height.px]=\"paddingTop()\">\n                    <td [attr.colspan]=\"columnasRenderizadas().length\"></td>\n                </tr>\n                }\n\n                <!-- Filas visibles -->\n                @for (row of visibleRows(); track row.idListTsi) {\n                @let idList = row.idListTsi;\n                <tr class=\"ll-row\" [class.ll-row--selected]=\"isSelected(row, idList)\"\n                    [class.ll-row--drag-over]=\"withAttachment() && dragOverRowId() === idList\"\n                    (click)=\"selectRow(row, idList)\" (dblclick)=\"onDoubleClick(row)\"\n                    (contextmenu)=\"onRightClick($event,row)\"\n                    (dragover)=\"withAttachment() && onDragOver($event, idList)\"\n                    (dragleave)=\"withAttachment() && onDragLeave()\" (drop)=\"withAttachment() && onDrop($event, row)\">\n\n                    @if (withDetails()) {\n                    <td class=\"b-table text-center mwp-25\"\n                        [class.ll-col-pinned]=\"hasLeftPinned()\"\n                        [style.left.px]=\"hasLeftPinned() ? 0 : null\">\n                        <a (click)=\"toggleExpandRow(idList)\" class=\"text-dark cursor-pointer fs-6\">\n                            <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows() != idList\"\n                                [class.fa-chevron-down]=\"expandedRows() == idList\"></i>\n                        </a>\n                    </td>\n                    }\n\n                    @if (withCheckbox()) {\n                    <td scope=\"col\" class=\"text-center b-table\"\n                        [class.ll-col-pinned]=\"hasLeftPinned()\"\n                        [style.left.px]=\"hasLeftPinned() ? utilCheckboxLeft() : null\">\n                        <label>\n                            <input type=\"checkbox\" [name]=\"'check_box_select_table_pinned_' + idList\"\n                                [id]=\"'check_box_select_table_pinned_' + idList\" animatedCheckbox\n                                [checked]=\"isItemSelected(idList)\" (click)=\"$event.stopPropagation()\"\n                                (change)=\"toogleItem(idList , $event)\" [disabled]=\"isCheckboxDisabled(row)\">\n                        </label>\n                    </td>\n                    }\n\n                    @if (customActions()) {\n                    <td class=\"text-center\"\n                        [class.ll-col-pinned]=\"hasLeftPinned()\"\n                        [style.left.px]=\"hasLeftPinned() ? utilActionsLeft() : null\">\n                        <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\n                    </td>\n                    }\n\n                    @for (col of columnasRenderizadas(); track col.fieldname) {\n                    @if (columnDefMap().has(col.fieldname)) {\n                    <td [class.ll-col-pinned]=\"!!pin(col)\"\n                        [class.ll-col-pinned--shadow-left]=\"pin(col)?.side === 'left' && pin(col)?.edge\"\n                        [class.ll-col-pinned--shadow-right]=\"pin(col)?.side === 'right' && pin(col)?.edge\"\n                        [style.left.px]=\"pin(col)?.left\"\n                        [style.right.px]=\"pin(col)?.right\"\n                        [style.min-width.px]=\"pin(col) ? colWidth(col) : null\"\n                        [style.max-width.px]=\"pin(col) ? colWidth(col) : null\">\n                        <ng-container *ngTemplateOutlet=\"columnDefMap().get(col.fieldname)!; context: { $implicit: row, column: col }\">\n                        </ng-container>\n                    </td>\n                    } @else if (col.template) {\n                    <td [class.ll-col-pinned]=\"!!pin(col)\"\n                        [class.ll-col-pinned--shadow-left]=\"pin(col)?.side === 'left' && pin(col)?.edge\"\n                        [class.ll-col-pinned--shadow-right]=\"pin(col)?.side === 'right' && pin(col)?.edge\"\n                        [style.left.px]=\"pin(col)?.left\"\n                        [style.right.px]=\"pin(col)?.right\"\n                        [style.min-width.px]=\"pin(col) ? colWidth(col) : null\"\n                        [style.max-width.px]=\"pin(col) ? colWidth(col) : null\">\n                        <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row, column: col }\">\n                        </ng-container>\n                    </td>\n                    } @else {\n                    @switch (col.tipo) {\n\n                    @case ('cell-render') {\n                    @let resolverItem = resolveCell(col.fieldname, row);\n                    @if (resolverItem) {\n                    <td [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\"\n                        [class.ll-col-pinned]=\"!!pin(col)\"\n                        [class.ll-col-pinned--shadow-left]=\"pin(col)?.side === 'left' && pin(col)?.edge\"\n                        [class.ll-col-pinned--shadow-right]=\"pin(col)?.side === 'right' && pin(col)?.edge\"\n                        [style.left.px]=\"pin(col)?.left\"\n                        [style.right.px]=\"pin(col)?.right\"\n                        [style.min-width.px]=\"pin(col) ? colWidth(col) : null\"\n                        [style.max-width.px]=\"pin(col) ? colWidth(col) : null\">\n                        @if (resolverItem.icon) {\n                        <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\n                        } @else if (resolverItem.class) {\n                        <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\n                            {{ resolverItem.text }}\n                        </span>\n                        } @else {\n                        {{ resolverItem.text }}\n                        }\n                    </td>\n                    }\n                    }\n\n                    @default {\n                    <td [innerHTML]=\"getHighlight(row._format?.[col.fieldname] ?? row[col.fieldname], col.fieldname)\"\n                        [style.width.px]=\"colWidth(col)\"\n                        [style.min-width.px]=\"pin(col) ? colWidth(col) : null\"\n                        [style.max-width.px]=\"colWidth(col)\"\n                        [attr.title]=\"row[col.fieldname] || null\"\n                        [class.ll-col-pinned]=\"!!pin(col)\"\n                        [class.ll-col-pinned--shadow-left]=\"pin(col)?.side === 'left' && pin(col)?.edge\"\n                        [class.ll-col-pinned--shadow-right]=\"pin(col)?.side === 'right' && pin(col)?.edge\"\n                        [style.left.px]=\"pin(col)?.left\"\n                        [style.right.px]=\"pin(col)?.right\"\n                        [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"{{getPosition(col)}}\">\n                    </td>\n                    }\n\n                    }\n                    }\n                    }\n                </tr>\n\n                @if (idList == expandedRows()) {\n                <tr @fadeInOut>\n                    <td [attr.colspan]=\"columnasRenderizadas().length + (withDetails() ? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\n                        class=\"table-blank\">\n                        <div class=\"d-flex flex-column auditoria\">\n                            <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\n                            <span class=\"fs-6 text-dark fw-bold\">\n                                Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\n                                row.hcreac }}\n                            </span>\n                            <span class=\"fs-6 text-dark fw-bold\">\n                                Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\n                                {{\n                                row.hactua }}\n                            </span>\n                        </div>\n                    </td>\n                </tr>\n                }\n\n                }\n\n                <!-- Fila vac\u00EDa si no hay datos -->\n                @if (rowFilter().length === 0) {\n                <tr>\n                    <td [attr.colspan]=\"columnasRenderizadas().length\" class=\"ll-empty\">\n                        Sin datos\n                    </td>\n                </tr>\n                }\n\n                <!-- Spacer inferior: ocupa el espacio de las filas NO renderizadas abajo -->\n                @if (paddingBottom() > 0) {\n                <tr class=\"ll-spacer\" [style.height.px]=\"paddingBottom()\">\n                    <td [attr.colspan]=\"columnasRenderizadas().length\"></td>\n                </tr>\n                }\n            </tbody>\n\n            <!-- \u2500\u2500 FOOTER sticky \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n            @if (withTotal() && rowFilter().length > 0) {\n            <tfoot class=\"ll-tfoot\">\n\n                <tr>\n                    <td [attr.colspan]=\"getColspanBeforeTotals()\" class=\"{{classTotales()}} fw-5 fs-6 ps-2 py-2\">Totales:</td>\n                    @for (col of columnasRenderizadas() ; track col.fieldname) {\n                    @if (col.totalizable) {\n                    <td class=\"{{classTotales()}} ll-footer-cell fw-5 text-end fs-6\"\n                        [class.ll-col-pinned]=\"!!pin(col)\"\n                        [class.ll-col-pinned--shadow-left]=\"pin(col)?.side === 'left' && pin(col)?.edge\"\n                        [class.ll-col-pinned--shadow-right]=\"pin(col)?.side === 'right' && pin(col)?.edge\"\n                        [style.left.px]=\"pin(col)?.left\"\n                        [style.right.px]=\"pin(col)?.right\">\n                        {{ getTotals(col.fieldname)}}\n                    </td>\n                    }\n                    }\n                </tr>\n            </tfoot>\n            }\n\n        </table>\n    </div>\n</ng-template>\n", styles: [":host(.ll-variant--modern) .ll-search-bar .ll-search-label{display:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control{width:250px!important;min-width:250px!important;border-radius:5px!important;border:1px solid rgba(0,0,0,.12);background-color:#fff;font-size:12px;padding-left:34px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:10px center;background-size:14px 14px;transition:border-color .15s ease,box-shadow .15s ease;height:30px!important;font-weight:400}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control::placeholder{color:#9ca3af}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b14;outline:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar{border-radius:5px;height:30px!important;width:30px!important;min-width:30px!important;background-color:#fff!important;border:1px solid rgba(0,0,0,.12)!important;color:#546074!important}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar:hover{background-color:#f3f4f6!important;border-color:#0003!important}:host(.ll-variant--modern) .ll-scroll-container{border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px #0000000f,0 4px 16px #0000000a;background:#fff}:host(.ll-variant--modern) .ll-table{border-collapse:separate;border-spacing:0;background:#fff}:host(.ll-variant--modern) .ll-thead tr th{background:#f1f1f1;color:#333!important;border:none;border-bottom:1px solid rgba(0,0,0,.1);border-top:1px solid rgba(0,0,0,.1);padding:12px 14px;box-shadow:none}:host(.ll-variant--modern) .ll-thead tr th.ll-col-pinned{background:#f1f1f1}:host(.ll-variant--modern) .ll-th-sortable:hover{background-color:#fff!important}:host(.ll-variant--modern) .ll-sort-idle{opacity:.4;color:#1e293b}:host(.ll-variant--modern) .icon-table{color:#5e5959!important;font-size:12px!important}:host(.ll-variant--modern) .ll-row{--row-bg: #ffffff;background-color:var(--row-bg);transition:background-color .1s ease}:host(.ll-variant--modern) .ll-row:nth-child(odd){--row-bg: #ffffff}:host(.ll-variant--modern) .ll-row:nth-child(2n){--row-bg: #f0f0f0}:host(.ll-variant--modern) .ll-row:hover:not(.ll-row--selected){--row-bg: #ebebeb;background-color:var(--row-bg)!important}:host(.ll-variant--modern) .ll-row--selected{--row-bg: var(--table-active-bg);background:var(--table-active-bg)!important;color:var(--table-active-color)!important;box-shadow:inset 4px 0 #334155}:host(.ll-variant--modern) .ll-row--drag-over{--row-bg: color-mix(in srgb, #5b8dee 8%, #ffffff);background-color:var(--row-bg)!important;outline:2px dashed rgba(91,141,238,.5);outline-offset:-2px}:host(.ll-variant--modern) .ll-row td{border-left:none;border-right:none;border-top:none;border-bottom:1px solid rgba(0,0,0,.1);height:40px}:host(.ll-variant--modern) .ll-tfoot tr td:first-child{border-bottom-left-radius:10px}:host(.ll-variant--modern) .ll-tfoot tr td:last-child{border-bottom-right-radius:10px}:host(.ll-variant--modern) .ll-tfoot .ll-footer-cell{background-color:var(--background-card);color:var(--text-color);border:none;border-top:1px solid rgba(0,0,0,.08);padding:10px 14px;box-shadow:none}:host(.ll-variant--modern) .ll-empty{padding:28px;color:#9ca3af;font-size:13px}.ll-search-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.ll-search-bar__left{display:flex;align-items:center;gap:6px;flex:1;flex-wrap:wrap}.ll-search-bar__right{display:flex;align-items:center;gap:4px;flex-shrink:0}.ll-search-bar__right .ll-search-group{display:flex;align-items:center;gap:4px}.ll-search-bar__right .ll-search-group .ll-search-label{white-space:nowrap}.ll-search-bar__right .ll-search-group .ll-search-input-wrap{display:flex;align-items:center}@media(max-width:576px){.ll-search-bar__right{width:100%;justify-content:space-between}.ll-search-bar__right .ll-search-group{flex-direction:column;align-items:flex-start;width:100%}.ll-search-bar__right .ll-search-group .ll-search-input-wrap{width:100%}.ll-search-bar__right .ll-search-group .ll-search-input-wrap input{flex:1}}.ll-scroll-container{width:100%;overflow-y:auto;overflow-x:auto;display:block;position:relative;border:var(--border-table-header);border-radius:4px;overflow-anchor:none}.ll-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:auto;white-space:nowrap}.ll-thead{position:sticky;top:0;z-index:3;background-color:var(--background-header-table)}.ll-thead tr th{font-size:11px;font-weight:700;color:var(--text-color);text-align:start;padding:6px 8px;border:none;border-right:var(--border-table-header);border-bottom:var(--border-table-header);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:var(--background-header-table);box-shadow:0 2px 2px -1px #0000001a}.ll-th-sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.ll-th-sortable:hover{background-color:var(--bs-table-header-hover-bg)!important}.ll-th-content{display:flex;align-items:center;gap:2px}.ll-th-caption{overflow:hidden;text-overflow:ellipsis}.ll-sort-idle{opacity:.25}.ll-tfoot{position:sticky;bottom:0;z-index:3;background-color:var(--background-card)}.ll-tfoot .ll-footer-cell{font-size:11px;color:var(--text-color);padding:10px 8px;border:none;border-right:var(--border-table-header);border-top:var(--border-table-header);background-color:var(--background-card);box-shadow:0 -2px 2px -1px #0000001a}.ll-row{--row-bg: var(--background-card, #ffffff);height:30px;cursor:pointer;background-color:var(--row-bg)}.ll-row:nth-child(odd){--row-bg: color-mix(in srgb, var(--background-card, #ffffff) 94%, #000000)}.ll-row:hover:not(.ll-row--selected){--row-bg: color-mix(in srgb, var(--background-card, #ffffff) 92%, #000000)}.ll-row--selected{--row-bg: var(--table-active-bg);background:var(--table-active-bg)!important;color:var(--table-active-color)!important}.ll-row--drag-over{--row-bg: color-mix(in srgb, #5b8dee 12%, var(--background-card, #ffffff));background-color:var(--row-bg)!important;outline:2px dashed #5b8dee;outline-offset:-2px;cursor:copy}.ll-row--drag-over td{color:#5b8dee!important}.ll-row td{font-size:11px;font-weight:500;color:var(--text-color);vertical-align:middle;padding:0 8px;border:none;border-right:var(--border-table-header);border-bottom:var(--border-table-header);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ll-col-pinned{position:sticky;z-index:2;background-color:var(--row-bg, var(--background-card, #ffffff));background-clip:padding-box}.ll-thead tr th.ll-col-pinned{z-index:2;background-color:var(--background-header-table)}.ll-tfoot tr td.ll-col-pinned{z-index:2;background-color:var(--background-card)}.ll-scrolled-start .ll-col-pinned--shadow-left{box-shadow:6px 0 8px -4px #00000040}.ll-scrolled-end .ll-col-pinned--shadow-right{box-shadow:-6px 0 8px -4px #00000040}.ll-scrolled-start .ll-thead tr th.ll-col-pinned--shadow-left{box-shadow:6px 0 8px -4px #00000040,0 2px 2px -1px #0000001a}.ll-scrolled-end .ll-thead tr th.ll-col-pinned--shadow-right{box-shadow:-6px 0 8px -4px #00000040,0 2px 2px -1px #0000001a}.ll-spacer td{padding:0;border:none}.ll-empty{text-align:center;padding:16px;color:#6c757d;font-size:12px}@media(max-width:1600px){.ll-thead tr th,.ll-row td,.ll-tfoot .ll-footer-cell{font-size:9px}}.popover-menu-column{border-radius:.375rem;padding:0rem .75rem;display:block;max-height:min(500px,80vh);width:min(400px,100vw - 2rem);max-width:calc(80vw - 2rem);overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.6rem .75rem;border-bottom:1px solid #c4c4c4;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.column-config-hint{font-size:10px;font-weight:400;text-transform:none;color:#9aa3ac}.column-config-list{display:flex;flex-direction:column;gap:3px;padding:4px 0 2px}.column-config-row{display:flex;align-items:center;gap:8px;padding:4px 6px;background:#fff;border:1px solid transparent;border-radius:6px;transition:background-color .15s ease,border-color .15s ease}.column-config-row:hover{background:#f6f7f8}.column-config-grip{cursor:grab;color:#adb5bd;font-size:13px;flex:none}.column-config-grip:active{cursor:grabbing}.column-config-pin{color:#64748b;font-size:11px;flex:none;transform:rotate(35deg)}.column-config-row.cdk-drag-preview{box-shadow:0 10px 24px -8px #00000059;border:1px solid #e5e5e5;border-radius:6px;background:#fff;transform:rotate(-1.5deg)}.column-config-row.cdk-drag-placeholder{border:1.5px dashed #6c757d;border-radius:6px;background:#f1f3f5;opacity:.7}.column-config-row.cdk-drag-placeholder *{visibility:hidden}.column-config-list.cdk-drop-list-dragging .column-config-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.column-config-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;bottom:0;background:#fff;border-top:1px solid #e5e5e5;margin:6px -.75rem 0;padding:8px .75rem}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.column-config-save{border-radius:6px;border:1px solid rgba(0,0,0,.12);background-color:#fff;color:#272727;padding:4px 12px;box-shadow:0 1px 2px #0000000f;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.column-config-save:hover{background-color:#334155;border-color:#0003;color:#fff;box-shadow:0 2px 6px #00000026}.popover-menu-filter{background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.table-blank{background:var(--background-card)}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.cw-25{min-width:40px}\n"] }]
+        }], propDecorators: { onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
 /**
  * Tabla pivot con expansión multi-nivel y virtual scroll nativo.
  * Cada fila puede expandirse para mostrar sub-filas, que a su vez pueden
@@ -5457,6 +5990,8 @@ class TableData {
     condition;
     template;
     totalizable;
+    /** Fija la columna al hacer scroll horizontal (table-ultimate-pinned). true = 'right' */
+    pinned;
     promedioSimple;
     promedioPonderado;
     cantidadPonderado;
@@ -5896,5 +6431,5 @@ function handleResourceV2(fn, signal) {
  * Generated bundle index. Do not edit.
  */
 
-export { AlertConfirmationComponent, AlertConfirmationConfig, AlertConfirmationService, AlertErrorComponent, AlertErrorService, AlertService, AlertaComponent, Almacenes, AnimatedCheckboxDirective, AtajosDirective, AutocompleteComponent, AutocompleteV2Component, BadgeComponent, ButtonComponent, ButtonProperties, CaracteresCodigoDirective, CardMobileComponent, CheckBoxComponent, Cobradores, DecimalDirective, DetalleCreditoComponent, Direcciones, DobleInputComponent, DropdownCdkComponent, DropdownComponent, DropdownMenuComponent, DropdownOption, FilterToggleComponent, FormateadorService, HeaderComponent, InputClaseComponent, InputComponent, InputDinamicoComponent, InputRadioComponent, ListOptionComponent, ListSituacionesComponent, MdGenericoComponent, Monedas, MontosCalcularComponent, Motivos, MultiSelectDropdownComponent, MultiselectedComponent, NavTabsComponent, OnlyNumberDirective, OnlyNumberFlexDirective, PaginadorComponent, RadioComponent, Recursos, Series, SidebarComponent, SpinnerComponent, SwitchActivoComponent, SwitchComponent, TABLE_EVENTS, TBanco, TabItemComponent, TableAdvanceComponent, TableAdvanceOptimizadaComponent, TableAgrupadaComponent, TableBusquedaComponent, TableData, TableDetalleComponent, TableSimpleComponent, TableUltimateComponent, TableUltimatePivotComponent, TipoDocumento, ToastService, ToasterComponent, Transportista, TsiColumnDefDirective, Vendedor, configModal, getInputsObligatorios, handleEmptyResult, handleErrorsApi, handleModal, handleModalReturn, handleReset, handleResetNoSignal, handleResource, handleResourceV2, handleSuccessApi, handleSuccessResult, showError, throwIfEmptyArray, validaFecha, validaLista, validaMes, validaPeriodo, validaPeriodoSimple, validaPosicion, validaTipo, validarObligatorio, validarSituacion };
+export { AlertConfirmationComponent, AlertConfirmationConfig, AlertConfirmationService, AlertErrorComponent, AlertErrorService, AlertService, AlertaComponent, Almacenes, AnimatedCheckboxDirective, AtajosDirective, AutocompleteComponent, AutocompleteV2Component, BadgeComponent, ButtonComponent, ButtonProperties, CaracteresCodigoDirective, CardMobileComponent, CheckBoxComponent, Cobradores, DecimalDirective, DetalleCreditoComponent, Direcciones, DobleInputComponent, DropdownCdkComponent, DropdownComponent, DropdownMenuComponent, DropdownOption, FilterToggleComponent, FormateadorService, HeaderComponent, InputClaseComponent, InputComponent, InputDinamicoComponent, InputRadioComponent, ListOptionComponent, ListSituacionesComponent, MdGenericoComponent, Monedas, MontosCalcularComponent, Motivos, MultiSelectDropdownComponent, MultiselectedComponent, NavTabsComponent, OnlyNumberDirective, OnlyNumberFlexDirective, PaginadorComponent, RadioComponent, Recursos, Series, SidebarComponent, SpinnerComponent, SwitchActivoComponent, SwitchComponent, TABLE_EVENTS, TBanco, TabItemComponent, TableAdvanceComponent, TableAdvanceOptimizadaComponent, TableAgrupadaComponent, TableBusquedaComponent, TableData, TableDetalleComponent, TableSimpleComponent, TableUltimateComponent, TableUltimatePinnedComponent, TableUltimatePivotComponent, TipoDocumento, ToastService, ToasterComponent, Transportista, TsiColumnDefDirective, Vendedor, configModal, getInputsObligatorios, handleEmptyResult, handleErrorsApi, handleModal, handleModalReturn, handleReset, handleResetNoSignal, handleResource, handleResourceV2, handleSuccessApi, handleSuccessResult, showError, throwIfEmptyArray, validaFecha, validaLista, validaMes, validaPeriodo, validaPeriodoSimple, validaPosicion, validaTipo, validarObligatorio, validarSituacion };
 //# sourceMappingURL=ng-components-tsi.mjs.map