@esfaenza/es-table 20.3.22 → 20.3.24

package/fesm2022/esfaenza-es-table.mjs

@@ -6135,6 +6135,525 @@ function collapseChildren(rows, ownKey, parentKey, parentK) {
     }
 }
 
+// Motore di coercizione valori — puro e stateless (come row-grouping.ts / hierarchy.ts).
+// Converte una stringa (digitata o incollata) nel tipo della colonna, segnalando la
+// compatibilità. Estratto da EsTable2Component per essere testabile in isolamento.
+/**
+ * Converte `raw` nel tipo di `col`. `ok:false` = incompatibile (es. testo in una
+ * colonna numerica) → il chiamante avvisa e non scrive. Una stringa vuota è sempre
+ * valida e azzera il valore (`null`).
+ */
+function coerceValue(raw, col) {
+    const type = col.type;
+    const v = raw == null ? '' : String(raw).trim();
+    switch (type) {
+        case 'int':
+        case 'number':
+        case 'float':
+        case 'currency': {
+            if (v === '')
+                return { ok: true, value: null };
+            const n = toNumber(v);
+            if (n == null || isNaN(n))
+                return { ok: false, value: null };
+            return { ok: true, value: (type === 'int' || type === 'number') ? Math.round(n) : n };
+        }
+        case 'boolean': {
+            if (v === '')
+                return { ok: true, value: null };
+            if (/^(true|1|✓|s[iì]|si|yes|y)$/i.test(v))
+                return { ok: true, value: true };
+            if (/^(false|0|—|no|n)$/i.test(v))
+                return { ok: true, value: false };
+            return { ok: false, value: null };
+        }
+        case 'enum':
+        case 'autocomplete': {
+            if (!col.source || col.source.length === 0)
+                return { ok: true, value: v };
+            const byId = col.source.find(o => String(o.id) === v);
+            if (byId)
+                return { ok: true, value: byId.id };
+            const byDesc = col.source.find(o => o.description === v);
+            if (byDesc)
+                return { ok: true, value: byDesc.id };
+            return { ok: false, value: null };
+        }
+        case 'date':
+        case 'datetime':
+        case 'time': {
+            if (v === '')
+                return { ok: true, value: null };
+            const d = parseDateLoose(v);
+            return d ? { ok: true, value: d } : { ok: false, value: null };
+        }
+        default:
+            return { ok: true, value: raw };
+    }
+}
+/** Parsing numerico tollerante (separatori di migliaia + virgola/punto decimale). `NaN` = non numerico */
+function toNumber(v) {
+    let s = v.replace(/\s/g, '').replace(/[€$%]/g, '');
+    if (s === '')
+        return NaN;
+    const hasComma = s.includes(','), hasDot = s.includes('.');
+    if (hasComma && hasDot) {
+        // l'ultimo separatore è quello decimale
+        if (s.lastIndexOf(',') > s.lastIndexOf('.'))
+            s = s.replace(/\./g, '').replace(',', '.');
+        else
+            s = s.replace(/,/g, '');
+    }
+    else if (hasComma) {
+        s = s.replace(',', '.');
+    }
+    return /^-?\d*\.?\d+$/.test(s) ? parseFloat(s) : NaN;
+}
+/** Parsing date tollerante: `dd/MM/yyyy [HH:mm[:ss]]` o formati nativi. `null` = non valida */
+function parseDateLoose(v) {
+    const m = v.match(/^(\d{1,2})[\/\-.](\d{1,2})[\/\-.](\d{2,4})(?:[ T](\d{1,2}):(\d{2})(?::(\d{2}))?)?$/);
+    if (m) {
+        const y = m[3].length === 2 ? 2000 + +m[3] : +m[3];
+        const d = new Date(y, +m[2] - 1, +m[1], +(m[4] || 0), +(m[5] || 0), +(m[6] || 0));
+        return isNaN(d.getTime()) ? null : d;
+    }
+    const d = new Date(v);
+    return isNaN(d.getTime()) ? null : d;
+}
+
+// Geometria degli header-group multi-livello — pura e stateless.
+// Deriva le righe di intestazione-gruppo, i confini dei gruppi-colonna e la
+// contiguità dall'insieme (colonne visibili, mappa th, id-gruppo). Estratta da
+// EsTable2Component per poterla testare in isolamento (bottom-alignment, spacer,
+// contiguità sono geometria sottile che merita specifiche dedicate).
+/**
+ * Catena di antenati di una colonna via `thParent`. Default: padre-immediato → root.
+ * `rootFirst=true` la restituisce root → padre-immediato. Guardia a 32 contro cicli.
+ */
+function ancestorChain(id, thById, rootFirst = false) {
+    const chain = [];
+    let p = thById.get(id)?.thParent ?? null;
+    let guard = 0;
+    while (p && guard++ < 32) {
+        chain.push(p);
+        p = thById.get(p)?.thParent ?? null;
+    }
+    return rootFirst ? chain.reverse() : chain;
+}
+/**
+ * Righe di header-group multi-livello, dall'alto (root) verso il basso (padre
+ * immediato). Ogni gruppo si allinea in BASSO: il padre immediato di una colonna
+ * sta sempre nella riga direttamente sopra la colonna; gli antenati più alti
+ * salgono. Le colonne senza gruppo (o con catena più corta) hanno celle-spacer
+ * vuote in alto.
+ */
+function computeHeaderGroupRows(leaves, thById, parentIds) {
+    if (parentIds.size === 0 || leaves.length === 0)
+        return [];
+    const chains = leaves.map(c => ancestorChain(c.id, thById));
+    const maxDepth = chains.reduce((m, ch) => Math.max(m, ch.length), 0);
+    if (maxDepth === 0)
+        return [];
+    const rows = [];
+    for (let r = 0; r < maxDepth; r++) {
+        const row = [];
+        let i = 0;
+        while (i < leaves.length) {
+            // allineamento in basso: alla riga r (0=alto) corrisponde l'antenato a
+            // distanza (maxDepth-1-r) dalla colonna (0 = padre immediato)
+            const anc = chains[i][maxDepth - 1 - r];
+            if (anc == null) {
+                row.push({ id: `_hg_spacer_${r}_${i}`, span: 1, isGroup: false, label: '', template: null });
+                i++;
+            }
+            else {
+                let span = 0;
+                while (i < leaves.length && chains[i][maxDepth - 1 - r] === anc) {
+                    span++;
+                    i++;
+                }
+                const gth = thById.get(anc);
+                row.push({ id: anc, span, isGroup: true, label: gth?.thStaticContent ?? anc, template: gth?.Template ?? null });
+            }
+        }
+        rows.push(row);
+    }
+    return rows;
+}
+/**
+ * Indici (in `cols`) delle colonne che aprono un nuovo gruppo-colonna, cioè dove
+ * il gruppo padre immediato cambia rispetto alla colonna precedente. Serve a
+ * disegnare i confini dei gruppi anche nel corpo della tabella.
+ */
+function computeColumnGroupBoundaries(cols, thById, hasParents) {
+    const set = new Set();
+    if (!hasParents)
+        return set;
+    let prev = undefined;
+    for (let i = 0; i < cols.length; i++) {
+        const parent = thById.get(cols[i].id)?.thParent ?? null;
+        if (i > 0 && parent !== prev)
+            set.add(i);
+        prev = parent;
+    }
+    return set;
+}
+/**
+ * Riordina `orderIds` così che i membri di uno stesso gruppo restino contigui.
+ * Chiave di ordinamento = [prima-apparizione di ogni antenato (root→foglia), poi
+ * indice proprio]. Due colonne dello stesso gruppo non possono più essere
+ * interlacciate con colonne esterne.
+ */
+function enforceGroupContiguity(orderIds, thById, hasParents) {
+    if (!hasParents)
+        return orderIds;
+    const chainOf = (id) => ancestorChain(id, thById, true);
+    const firstIdx = new Map();
+    orderIds.forEach((id, i) => {
+        for (const g of chainOf(id))
+            if (!firstIdx.has(g))
+                firstIdx.set(g, i);
+    });
+    const keyOf = (id, i) => [...chainOf(id).map(g => firstIdx.get(g)), i];
+    return orderIds
+        .map((id, i) => ({ id, key: keyOf(id, i), i }))
+        .sort((a, b) => {
+        const n = Math.max(a.key.length, b.key.length);
+        for (let k = 0; k < n; k++) {
+            const av = a.key[k] ?? -1, bv = b.key[k] ?? -1;
+            if (av !== bv)
+                return av - bv;
+        }
+        return a.i - b.i;
+    })
+        .map(x => x.id);
+}
+
+// Modello di colonna dell'es-table2 — tipo puro, condiviso da componente e motori.
+// Estratto qui per rompere la dipendenza circolare col motore `core/columns.ts`.
+/**
+ * Factory di `Est2Column`: applica i default costanti (visible/orderable/alignment/…)
+ * e sovrascrive col `partial`. I costruttori di colonne (direttive, multi, dinamica,
+ * report) passano solo i campi che differiscono, evitando derive di campo. I default
+ * `false`/`null` sono equivalenti in comportamento agli `undefined` che i literal
+ * omettevano (`pinned` falsy, `pinnedWidth || 120`, `headerBg` falsy).
+ */
+function makeColumn(partial) {
+    return {
+        visible: true, orderable: false, alignment: 'left',
+        property: null, type: null, source: null, format: null,
+        cssClass: '', headerClass: '', wrap: false, isGroup: false, aggSpecs: [],
+        headerText: null, headerBg: null, pinned: false, pinnedWidth: null,
+        ...partial
+    };
+}
+
+// Costruttori di colonne (direttive / multi / dinamica / report) — puri e stateless.
+// Producono solo dati (`Est2Column[]` e, per Multi, le mappe header-group aggiornate);
+// il componente resta responsabile di applicarli allo stato a signal. Estratti da
+// EsTable2Component per isolare ~230 righe della logica più densa e branch-heavy.
+/** Colonne da direttive `*th`/`*td` dirette (esclude gruppi e Multi). */
+function mapDirectiveColumns(ths, tdByCol, parentIds, defAlignment) {
+    const cols = [];
+    for (const th of ths) {
+        if (!th.thIf)
+            continue;
+        if (th.thMulti)
+            continue; // srotolata separatamente
+        if (parentIds.has(th.th))
+            continue; // è un header di gruppo, non una colonna-dato
+        const td = tdByCol.get(th.th);
+        cols.push(makeColumn({
+            id: th.th,
+            header: th,
+            cell: td,
+            visible: th.thVisible,
+            orderable: th.thOrderable,
+            alignment: (td?.tdAlignment || th.thAlignment)?.toLowerCase() || defAlignment,
+            property: th.thProperty,
+            type: th.thType ?? null,
+            source: th.thSource,
+            format: td?.tdFormat || th.thFormat || null,
+            cssClass: td?.tdClass || '', // `*td Class` → solo `<td>`
+            headerClass: th.thClass || '', // `*th Class` → solo `<th>`
+            wrap: th.thWrap,
+            isGroup: th.thGroup,
+            aggSpecs: parseAggregationSpecs(th.th, th.thAggregation),
+            headerText: th.thStaticContent,
+            headerBg: th.thBackgroundColor,
+            routePath: th.thRoutePath,
+            routeParams: th.thRouteParameterProperties,
+            rendererName: th.thRendererName,
+            pinned: !!th.thPinned,
+            pinnedWidth: th.thPinnedWidth ?? null
+        }));
+    }
+    return cols;
+}
+/** Colonne da una `EsTableColumnsDefinition[]` (modalità dinamica). */
+function mapDynamicColumns(defs, tds) {
+    const cols = [];
+    for (let i = 0; i < defs.length; i++) {
+        const d = defs[i];
+        if (!d.Visible)
+            continue;
+        const renderer = tds.find(t => (d.RendererName && t.td === d.RendererName) || t.tdForProperty === d.PropertyName);
+        cols.push(makeColumn({
+            id: d.PropertyName,
+            cell: renderer,
+            orderable: d.Orderable !== false,
+            property: d.PropertyName,
+            type: d.PropertyType ?? null,
+            source: d.PropertySource ?? null,
+            format: d.Format ?? null,
+            cssClass: d.Clss || '', headerClass: d.Clss || '', // dinamica: un'unica classe colonna (no *th/*td separati)
+            wrap: !!d.HeaderWraps,
+            headerText: d.Description,
+            routePath: d.RoutePath,
+            routeParams: d.RouteParameterProperties,
+            rendererName: d.RendererName,
+            colorIndex: i // forecolors/backcolors allineati all'ordine delle colonne
+        }));
+    }
+    return cols;
+}
+/** Colonne da `report_columns` (modalità report): il valore è preso per indice. */
+function mapReportColumns(reportColumns) {
+    const cols = [];
+    for (let i = 0; i < reportColumns.length; i++) {
+        const c = reportColumns[i];
+        cols.push(makeColumn({
+            id: c.id,
+            alignment: c.alignment?.toLowerCase() || 'left',
+            format: c.format ?? null,
+            headerText: c.description,
+            headerBg: c.color || null,
+            propAccessor: String(i),
+            colorIndex: i
+        }));
+    }
+    return cols;
+}
+/**
+ * Srotola le colonne `*th Multi:true` sui dati: ogni entry unica `(header_group,
+ * header)` della proprietà-array diventa una colonna sintetica, e i livelli di
+ * `header_group` (separati da ">") alimentano gli header-group. Puro: restituisce
+ * le colonne e le mappe th/parent aggiornate (il componente le applica allo stato).
+ */
+function buildMultiColumns(multiDefs, baseThById, baseParentIds, items) {
+    const cols = [];
+    const thById = new Map(baseThById);
+    const parentIds = new Set(baseParentIds);
+    const seen = new Set();
+    for (const def of multiDefs) {
+        const prop = def.prop;
+        for (const item of (items || [])) {
+            const arr = item?.[prop];
+            if (!Array.isArray(arr))
+                continue;
+            for (let ii = 0; ii < arr.length; ii++) {
+                const mv = arr[ii] || {};
+                const header = mv.header ?? '';
+                const group = mv.header_group ?? null;
+                const key = `${group}__${header}`;
+                if (seen.has(key))
+                    continue;
+                seen.add(key);
+                const hier = group ? String(group).split('>').map((s) => s.trim()).filter(Boolean) : [];
+                const immediateParent = hier.length ? hier[hier.length - 1] : null;
+                const colId = `${prop}_${ii}`;
+                // th sintetico foglia: fornisce la catena thParent + il template header
+                const leafTh = new EsThDirective(def.th.Template);
+                leafTh.th = colId;
+                leafTh.thStaticContent = header;
+                leafTh.thParent = immediateParent;
+                leafTh.thOrderable = false;
+                thById.set(colId, leafTh);
+                // th sintetici dei gruppi padre (una volta ciascuno)
+                for (let h = 0; h < hier.length; h++) {
+                    const pid = hier[h];
+                    parentIds.add(pid);
+                    if (!thById.has(pid)) {
+                        const pth = new EsThDirective(null);
+                        pth.th = pid;
+                        pth.thStaticContent = pid;
+                        pth.thParent = h > 0 ? hier[h - 1] : null;
+                        thById.set(pid, pth);
+                    }
+                }
+                cols.push(makeColumn({
+                    id: colId,
+                    header: leafTh,
+                    cell: def.td,
+                    alignment: 'right',
+                    cssClass: def.td?.tdClass || '', // `*td Class` → solo `<td>`
+                    headerClass: def.th.thClass || '', // `*th Class` → solo `<th>`
+                    headerText: header,
+                    multiProp: prop, multiIndex: ii
+                }));
+            }
+        }
+    }
+    return { columns: cols, thById, parentIds };
+}
+
+// Controller di esportazione (E4) — signal-native ma costruito con una interfaccia
+// host STRETTA (una manciata di accessor/callback), non con il back-ref `this.est`
+// dell'es-table1. Possiede solo `inProgress` + il lazy `ExportService`. La logica è
+// identica a prima (byte-compatibile con `ExportHandler.tryExport`): estratta dal
+// componente per isolare l'export come feature a sé, con la superficie di scrittura
+// più piccola (legge soltanto).
+class ExportController {
+    constructor(host) {
+        this.host = host;
+        /** Evita esportazioni concorrenti (parità con l'`ExportHandler` originale) */
+        this.inProgress = false;
+        /** `ExportService` risolto pigramente e in modo difensivo (vedi `resolveService`) */
+        this.svc = undefined;
+    }
+    /**
+     * È `providedIn:'root'` ma la sua costruzione dipende da
+     * `LocalizationService`/`DateService`/`UtilityService`; se quella catena non è
+     * presente (test isolati, o consumer che non importa `@esfaenza/extensions`),
+     * `injector.get` lancia → catturo e faccio fallback al percorso self-contained.
+     */
+    resolveService() {
+        if (this.svc === undefined) {
+            try {
+                this.svc = this.host.injector.get(ExportService, null);
+            }
+            catch {
+                this.svc = null;
+            }
+        }
+        return this.svc;
+    }
+    run(format = 'CSV') {
+        const fn = this.host.exportFunction();
+        // Parità con l'originale (`ExportHandler.tryExport`): se il consumer fornisce
+        // una ExportFunction gliela lascio gestire. La callback ha la STESSA firma
+        // dell'es-table1 — `(data, type, cancel?)` — così le funzioni di export dei
+        // componenti legacy funzionano invariate: `cancel === true` annulla l'export
+        // senza scaricare nulla. È l'`ExportService` che, ricreando ogni riga come
+        // `new Type()`, legge i decoratori `@Export` — NON le colonne `*th`.
+        if (fn) {
+            if (this.inProgress) {
+                this.host.flashNotice("Un'esportazione è già in corso, attendere.");
+                return;
+            }
+            this.inProgress = true;
+            try {
+                fn((data, type, cancel = false) => {
+                    this.inProgress = false;
+                    if (cancel)
+                        return;
+                    this.viaService(data, type, format);
+                }, format);
+            }
+            catch (e) {
+                this.inProgress = false; // ExportFunction lanciata in modo sincrono: non blocco il guard
+                throw e;
+            }
+            return;
+        }
+        // Nessuna ExportFunction: percorso self-contained sulle colonne `*th` correnti.
+        const matrix = this.buildMatrix();
+        if (matrix.length <= 1) {
+            this.host.flashNotice('Nessun dato da esportare.');
+            return;
+        }
+        if (format === 'XLSX')
+            this.xlsx(matrix);
+        else
+            this.csv(matrix);
+    }
+    /** Delego all'`ExportService` originale (decorator-driven, byte-compatibile con es-table1). */
+    viaService(data, type, format) {
+        if (!data?.length) {
+            this.host.flashNotice('Nessun dato da esportare.');
+            return;
+        }
+        const svc = this.resolveService();
+        if (!svc) {
+            this.selfContained(data, format);
+            return;
+        } // niente servizio → fallback `*th`
+        const columnsFilter = this.host.exportOnlyVisible() ? this.exportColumns().map(c => c.id) : undefined;
+        const drcd = this.host.dynamicDefs();
+        const genericHeaders = drcd && drcd.length > 0
+            ? drcd.map(t => ({ label: t.Description, key: t.PropertyName, propKey: t.PropertyName, order: t.ColumnOrder, type: 'string' }))
+            : undefined;
+        svc.export(data, format, this.host.exportBaseName(), type, columnsFilter, genericHeaders);
+    }
+    /** Percorso di fallback self-contained (dati forniti dalla callback, senza ExportService). */
+    selfContained(data, format) {
+        if (!data?.length) {
+            this.host.flashNotice('Nessun dato da esportare.');
+            return;
+        }
+        const matrix = this.matrixFrom(data.filter(r => !r._group));
+        if (format === 'XLSX')
+            this.xlsx(matrix);
+        else
+            this.csv(matrix);
+    }
+    /** Colonne da esportare (tutte o solo visibili) e con dato testuale */
+    exportColumns() {
+        const cols = this.host.exportOnlyVisible() ? this.host.visibleColumns() : this.host.columns();
+        return cols.filter(c => !c.isGroup);
+    }
+    buildMatrix() {
+        return this.matrixFrom(this.host.boundSource().filter(r => !r._group));
+    }
+    /** Matrice [header, ...righe] con i valori visualizzati */
+    matrixFrom(rows) {
+        const cols = this.exportColumns();
+        const texts = this.host.renderedHeaderTexts();
+        const header = cols.map(c => texts.get(c.id) || this.host.columnLabel(c));
+        const body = rows.map(item => cols.map(c => this.host.cellDisplayText(item, c)));
+        return [header, ...body];
+    }
+    csv(matrix) {
+        const esc = (v) => {
+            const s = v == null ? '' : String(v);
+            return /[",\n;]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
+        };
+        const csv = matrix.map(row => row.map(esc).join(';')).join('\r\n');
+        // BOM per la corretta apertura in Excel con caratteri accentati
+        this.downloadBlob('' + csv, this.fileName('csv'), 'text/csv;charset=utf-8;');
+    }
+    async xlsx(matrix) {
+        try {
+            const XLSX = await import('xlsx');
+            const ws = XLSX.utils.aoa_to_sheet(matrix);
+            const wb = XLSX.utils.book_new();
+            XLSX.utils.book_append_sheet(wb, ws, 'Export');
+            XLSX.writeFile(wb, this.fileName('xlsx'));
+        }
+        catch {
+            this.host.flashNotice('Export XLSX non disponibile (SheetJS assente): esporto in CSV.');
+            this.csv(matrix);
+        }
+    }
+    fileName(ext) {
+        const name = this.host.exportBaseName() || 'Export';
+        return /\.(csv|xlsx)$/i.test(name) ? name.replace(/\.(csv|xlsx)$/i, '.' + ext) : `${name}.${ext}`;
+    }
+    downloadBlob(content, filename, mime) {
+        if (typeof document === 'undefined')
+            return;
+        const blob = new Blob([content], { type: mime });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        setTimeout(() => URL.revokeObjectURL(url), 0);
+    }
+}
+
 /**
  * Paginatore dell'es-table2.
  *
@@ -6302,6 +6821,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImpo
         }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], pages: [{ type: i0.Input, args: [{ isSignal: true, alias: "pages", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], countLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLabel", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], showPagingOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPagingOptions", required: false }] }], allowAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAll", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], itemsPerPageChange: [{ type: i0.Output, args: ["itemsPerPageChange"] }] } });
 
 // Angular
+// `Est2HeaderGroupCell` è definita nel motore puro `core/header-groups.ts` e
+// re-esportata sopra (retro-compatibile per chi la importa da questo modulo).
 /**
  * es-table2 — riscrittura 2026 dell'es-table.
  *
@@ -6335,15 +6856,15 @@ class EsTable2Component {
         }
     }
     get denseClass() { return this.HighCellDensity(); }
+    /**
+     * Larghezza FISSA (px) di una colonna pinnata. Una colonna sticky è per contratto a
+     * larghezza fissa: la usiamo sia per il calcolo degli offset che per vincolare la
+     * cella (min/max-width) così il contenuto lungo viene troncato invece di sbordare
+     * sulla colonna successiva. Default = `PINNED_DEFAULT_W` (coerente con gli offset).
+     */
+    pinnedWidthPx(col) { return col.pinnedWidth || this.PINNED_DEFAULT_W; }
     /** Offset `left` (px) di una colonna sticky all'indice `ci` in visibleColumns */
-    pinnedLeftPx(ci) {
-        const cols = this.visibleColumns();
-        let left = this.Selection() ? this.SEL_STICKY_W : 0;
-        for (let i = 0; i < ci && i < cols.length; i++)
-            if (cols[i].pinned)
-                left += (cols[i].pinnedWidth || 120);
-        return left;
-    }
+    pinnedLeftPx(ci) { return this.pinnedOffsets()[ci] ?? 0; }
     constructor(ngControl, cdr, hostEl, prefService, injector, defaults, debugMode, exportGlobalAcl) {
         this.ngControl = ngControl;
         this.cdr = cdr;
@@ -6364,6 +6885,7 @@ class EsTable2Component {
         this.SelectionDisabled = input(false, ...(ngDevMode ? [{ debugName: "SelectionDisabled" }] : []));
         this._SelectAll = input(null, ...(ngDevMode ? [{ debugName: "_SelectAll", alias: 'SelectAll' }] : [{ alias: 'SelectAll' }]));
         this.SelectAll = linkedSignal(() => this.io(this._SelectAll(), null, false), ...(ngDevMode ? [{ debugName: "SelectAll" }] : []));
+        /** @deprecated NO-OP di parità v1 (cache selezione cross-pagina): dichiarato per il drop-in, non usato */
         this._UseSelectionCache = input(null, ...(ngDevMode ? [{ debugName: "_UseSelectionCache", alias: 'UseSelectionCache' }] : [{ alias: 'UseSelectionCache' }]));
         this.UseSelectionCache = linkedSignal(() => this.io(this._UseSelectionCache(), this.defaults?.UseSelectionCache, true), ...(ngDevMode ? [{ debugName: "UseSelectionCache" }] : []));
         this._ShiftClick = input(null, ...(ngDevMode ? [{ debugName: "_ShiftClick", alias: 'ShiftClick' }] : [{ alias: 'ShiftClick' }]));
@@ -6405,15 +6927,21 @@ class EsTable2Component {
         this.ContainerClass = linkedSignal(() => this.io(this._ContainerClass(), this.defaults?.ContainerClass, ''), ...(ngDevMode ? [{ debugName: "ContainerClass" }] : []));
         this.EsTableHandledSearch = input(false, ...(ngDevMode ? [{ debugName: "EsTableHandledSearch" }] : []));
         this.SearchThrottle = input(50, ...(ngDevMode ? [{ debugName: "SearchThrottle" }] : []));
-        // --- Superficie dichiarata, wiring nelle fasi successive -------------------
+        /** Abilita il ridimensionamento via handle sul bordo destro dell'header delle colonne PINNATE
+         *  (la nuova larghezza è persistita nelle preferenze). Il resize delle colonne non pinnate
+         *  non è ancora portato. */
         this._ColumnsResizable = input(null, ...(ngDevMode ? [{ debugName: "_ColumnsResizable", alias: 'ColumnsResizable' }] : [{ alias: 'ColumnsResizable' }]));
         this.ColumnsResizable = linkedSignal(() => this.io(this._ColumnsResizable(), this.defaults?.ColumnsResizable, false), ...(ngDevMode ? [{ debugName: "ColumnsResizable" }] : []));
         this._ColumnsPinnable = input(null, ...(ngDevMode ? [{ debugName: "_ColumnsPinnable", alias: 'ColumnsPinnable' }] : [{ alias: 'ColumnsPinnable' }]));
         this.ColumnsPinnable = linkedSignal(() => this.io(this._ColumnsPinnable(), this.defaults?.ColumnsPinnable, true), ...(ngDevMode ? [{ debugName: "ColumnsPinnable" }] : []));
+        // Parità v1: se non valorizzati esplicitamente, `HiddenColumns`/`ColumnsOrdering`
+        // (e la relativa voce di menu per gestire le colonne) sono ATTIVI di default sulle
+        // tabelle a celle custom (direttive `*th`/`*td`). Un valore esplicito (anche `false`)
+        // vince sempre. Vedi `es_table.component.ts` righe 625-626.
         this._HiddenColumns = input(null, ...(ngDevMode ? [{ debugName: "_HiddenColumns", alias: 'HiddenColumns' }] : [{ alias: 'HiddenColumns' }]));
-        this.HiddenColumns = linkedSignal(() => this.io(this._HiddenColumns(), null, false), ...(ngDevMode ? [{ debugName: "HiddenColumns" }] : []));
+        this.HiddenColumns = linkedSignal(() => this.io(this._HiddenColumns(), null, this.directivesBased()), ...(ngDevMode ? [{ debugName: "HiddenColumns" }] : []));
         this._ColumnsOrdering = input(null, ...(ngDevMode ? [{ debugName: "_ColumnsOrdering", alias: 'ColumnsOrdering' }] : [{ alias: 'ColumnsOrdering' }]));
-        this.ColumnsOrdering = linkedSignal(() => this.io(this._ColumnsOrdering(), null, false), ...(ngDevMode ? [{ debugName: "ColumnsOrdering" }] : []));
+        this.ColumnsOrdering = linkedSignal(() => this.io(this._ColumnsOrdering(), null, this.directivesBased()), ...(ngDevMode ? [{ debugName: "ColumnsOrdering" }] : []));
         this._Export = input(null, ...(ngDevMode ? [{ debugName: "_Export", alias: 'Export' }] : [{ alias: 'Export' }]));
         this.Export = linkedSignal(() => this.io(this._Export(), this.defaults?.Export, false), ...(ngDevMode ? [{ debugName: "Export" }] : []));
         this.XLSXExport = input(true, ...(ngDevMode ? [{ debugName: "XLSXExport" }] : []));
@@ -6439,13 +6967,26 @@ class EsTable2Component {
         this.SavePreferences = linkedSignal(() => this.io(this._SavePreferences(), this.defaults?.SavePreferences, false), ...(ngDevMode ? [{ debugName: "SavePreferences" }] : []));
         /** Nome della tabella: chiave per la persistenza delle preferenze colonne (localStorage) */
         this.Name = input('', ...(ngDevMode ? [{ debugName: "Name" }] : []));
+        /** @deprecated NO-OP di parità v1 (stile paginazione gruppi): dichiarato per il drop-in, non risolto/usato */
         this._RowGroupingPagingStyle = input(null, ...(ngDevMode ? [{ debugName: "_RowGroupingPagingStyle", alias: 'RowGroupingPagingStyle' }] : [{ alias: 'RowGroupingPagingStyle' }]));
         this._ShowItemGroupsColumns = input(null, ...(ngDevMode ? [{ debugName: "_ShowItemGroupsColumns", alias: 'ShowItemGroupsColumns' }] : [{ alias: 'ShowItemGroupsColumns' }]));
         this.Editable = input(false, ...(ngDevMode ? [{ debugName: "Editable" }] : []));
         this.RangeSelection = input(false, ...(ngDevMode ? [{ debugName: "RangeSelection" }] : []));
         this.ItemSourceProperty = input('', ...(ngDevMode ? [{ debugName: "ItemSourceProperty" }] : []));
+        // --- Input di sola PARITÀ v1 (dichiarati per il drop-in, NON implementati) ----
+        // Esistono solo perché un template consumer che li bind (`[HasHeaderGroup]`, …)
+        // compili invariato passando da <es-table> a <es-table2>. Sono NO-OP volutamente:
+        //  · HasHeaderGroup/HasSecondaryHeaderGroup — header-group manuali via `#headerGroup`
+        //    (superati dall'approccio automatico `Parent:`/`Multi`).
+        //  · SearchView — drill-down gruppi server-side (intenzionalmente non portato).
+        //  · UseSelectionCache (175), RowGroupingPagingStyle (260) — vedi le rispettive
+        //    dichiarazioni. Rimuoverli romperebbe il drop-in.
+        //  (ColumnsResizable (224) NON è più un no-op: ridimensiona le colonne pinnate.)
+        /** @deprecated NO-OP di parità v1 (header-group manuali, superati da `Parent:`/`Multi`) */
         this.HasHeaderGroup = input(false, ...(ngDevMode ? [{ debugName: "HasHeaderGroup" }] : []));
+        /** @deprecated NO-OP di parità v1 (seconda riga header-group manuale) */
         this.HasSecondaryHeaderGroup = input(false, ...(ngDevMode ? [{ debugName: "HasSecondaryHeaderGroup" }] : []));
+        /** @deprecated NO-OP di parità v1 (drill-down gruppi server-side, non portato) */
         this.SearchView = input(null, ...(ngDevMode ? [{ debugName: "SearchView" }] : []));
         /** Abilita il "patacchino" di auto-aggiornamento (toggle + intervallo) in alto a destra */
         this._AutoUpdate = input(null, ...(ngDevMode ? [{ debugName: "_AutoUpdate", alias: 'AutoUpdate' }] : [{ alias: 'AutoUpdate' }]));
@@ -6526,87 +7067,33 @@ class EsTable2Component {
         this.hasPinned = computed(() => this.pinnedCount() > 0, ...(ngDevMode ? [{ debugName: "hasPinned" }] : []));
         /** Larghezza (px) della colonna di selezione quando sticky */
         this.SEL_STICKY_W = 44;
+        /** Larghezza (px) di default di una colonna pinnata senza `PinnedWidth` esplicito */
+        this.PINNED_DEFAULT_W = 120;
+        /**
+         * Offset `left` (px) cumulativi delle colonne sticky, memoizzati: ricalcolati solo
+         * quando cambiano `visibleColumns`/`Selection`. Prima `pinnedLeftPx` era O(n) per
+         * chiamata e veniva invocato per OGNI cella pinnata del corpo → O(P²·R) per CD.
+         */
+        this.pinnedOffsets = computed(() => {
+            const cols = this.visibleColumns();
+            let left = this.Selection() ? this.SEL_STICKY_W : 0;
+            return cols.map(c => { const at = left; if (c.pinned)
+                left += this.pinnedWidthPx(c); return at; });
+        }, ...(ngDevMode ? [{ debugName: "pinnedOffsets" }] : []));
         /** true se la tabella renderizza colonne strutturate (direttive/dinamica/report), non template semplici */
         this.usesColumns = computed(() => this.columns().length > 0, ...(ngDevMode ? [{ debugName: "usesColumns" }] : []));
         /**
-         * Righe di header-group multi-livello, dall'alto (root) verso il basso (padre
-         * immediato). Ricalcolate automaticamente su riordino/visibilità colonne.
-         *
-         * Ogni gruppo si allinea in BASSO: il padre immediato di una colonna sta sempre
-         * nella riga direttamente sopra la colonna; gli antenati più alti salgono. Le
-         * colonne senza gruppo (o con catena più corta) hanno celle-spacer vuote in alto.
+         * Righe di header-group multi-livello (bottom-aligned). Delega al motore puro
+         * `core/header-groups.ts`; ricalcolate automaticamente su riordino/visibilità.
          */
-        this.headerGroupRows = computed(() => {
-            const parentIds = this.hgParentIds();
-            if (parentIds.size === 0)
-                return [];
-            const thById = this.hgThById();
-            const leaves = this.visibleColumns();
-            if (leaves.length === 0)
-                return [];
-            // catena antenati (padre-immediato → root) per un id, via thParent
-            const chainOf = (id) => {
-                const chain = [];
-                let p = thById.get(id)?.thParent ?? null;
-                let guard = 0;
-                while (p && guard++ < 32) {
-                    chain.push(p);
-                    p = thById.get(p)?.thParent ?? null;
-                }
-                return chain;
-            };
-            const chains = leaves.map(c => chainOf(c.id));
-            const maxDepth = chains.reduce((m, ch) => Math.max(m, ch.length), 0);
-            if (maxDepth === 0)
-                return [];
-            const rows = [];
-            for (let r = 0; r < maxDepth; r++) {
-                const row = [];
-                let i = 0;
-                while (i < leaves.length) {
-                    // allineamento in basso: alla riga r (0=alto) corrisponde l'antenato a
-                    // distanza (maxDepth-1-r) dalla colonna (0 = padre immediato)
-                    const anc = chains[i][maxDepth - 1 - r];
-                    if (anc == null) {
-                        row.push({ id: `_hg_spacer_${r}_${i}`, span: 1, isGroup: false, label: '', template: null });
-                        i++;
-                    }
-                    else {
-                        let span = 0;
-                        while (i < leaves.length && chains[i][maxDepth - 1 - r] === anc) {
-                            span++;
-                            i++;
-                        }
-                        const gth = thById.get(anc);
-                        row.push({ id: anc, span, isGroup: true, label: gth?.thStaticContent ?? anc, template: gth?.Template ?? null });
-                    }
-                }
-                rows.push(row);
-            }
-            return rows;
-        }, ...(ngDevMode ? [{ debugName: "headerGroupRows" }] : []));
+        this.headerGroupRows = computed(() => computeHeaderGroupRows(this.visibleColumns(), this.hgThById(), this.hgParentIds()), ...(ngDevMode ? [{ debugName: "headerGroupRows" }] : []));
         /** true se ci sono header-group da renderizzare */
         this.hasHeaderGroups = computed(() => this.headerGroupRows().length > 0, ...(ngDevMode ? [{ debugName: "hasHeaderGroups" }] : []));
         /**
-         * Indici (in visibleColumns) delle colonne che aprono un nuovo gruppo-colonna,
-         * cioè dove il gruppo padre immediato cambia rispetto alla colonna precedente.
-         * Serve a disegnare i confini dei gruppi anche nel corpo della tabella.
+         * Indici (in visibleColumns) delle colonne che aprono un nuovo gruppo-colonna.
+         * Delega al motore puro; disegna i confini dei gruppi anche nel corpo tabella.
          */
-        this.columnGroupBoundaries = computed(() => {
-            const set = new Set();
-            if (this.hgParentIds().size === 0)
-                return set;
-            const cols = this.visibleColumns();
-            const thById = this.hgThById();
-            let prev = undefined;
-            for (let i = 0; i < cols.length; i++) {
-                const parent = thById.get(cols[i].id)?.thParent ?? null;
-                if (i > 0 && parent !== prev)
-                    set.add(i);
-                prev = parent;
-            }
-            return set;
-        }, ...(ngDevMode ? [{ debugName: "columnGroupBoundaries" }] : []));
+        this.columnGroupBoundaries = computed(() => computeColumnGroupBoundaries(this.visibleColumns(), this.hgThById(), this.hgParentIds().size > 0), ...(ngDevMode ? [{ debugName: "columnGroupBoundaries" }] : []));
         /** Numero di elementi totali (per il pager) */
         this.totalCount = computed(() => {
             const v = this.view();
@@ -6628,7 +7115,6 @@ class EsTable2Component {
             return Math.max(1, Math.ceil(this.totalCount() / ipp));
         }, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
         this.effectiveAllValue = 999999;
-        this.inited = false;
         // ===========================================================================
         //  CVA plumbing
         // ===========================================================================
@@ -6689,7 +7175,7 @@ class EsTable2Component {
         // ===========================================================================
         //  Fase 6 — Colonne (visibilità/ordine), preferenze, export
         // ===========================================================================
-        /** Preferenze colonne in memoria (ordine + nascoste). Persistite se `SavePreferences`. */
+        /** Preferenze colonne in memoria (ordine + nascoste + pin + larghezze). Persistite se `SavePreferences`. */
         this.columnPrefs = null;
         /** true una volta caricate le preferenze dal server (evita retrieve multipli) */
         this.prefsLoaded = false;
@@ -6697,29 +7183,43 @@ class EsTable2Component {
         this.columnsDialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "columnsDialogOpen" }] : []));
         /** Lista di lavoro della dialog (copia, per poter annullare) */
         this.dialogCols = signal([], ...(ngDevMode ? [{ debugName: "dialogCols" }] : []));
+        // --- Riordino via drag-drop (gated da ColumnsOrdering) ---------------------
+        /** Indice della riga trascinata (o null) */
+        this.dragIndex = signal(null, ...(ngDevMode ? [{ debugName: "dragIndex" }] : []));
+        /** Indice della riga sotto il cursore durante il drag (per l'indicatore) */
+        this.dragOverIndex = signal(null, ...(ngDevMode ? [{ debugName: "dragOverIndex" }] : []));
         // --- Export (CSV self-contained / XLSX via SheetJS opzionale) --------------
         this.exportMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "exportMenuOpen" }] : []));
         this.cornerMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "cornerMenuOpen" }] : []));
-        /** @ignore Evita esportazioni concorrenti (parità con l'`ExportHandler` originale) */
-        this.exportInProgress = false;
-        /**
-         * `ExportService` risolto PIGRAMENTE e in modo difensivo: `undefined` = non ancora
-         * risolto, `null` = non disponibile. È `providedIn:'root'` ma la sua costruzione
-         * dipende da `LocalizationService`/`DateService`/`UtilityService`; se quella catena
-         * non è presente (test isolati, o consumer che non importa `@esfaenza/extensions`),
-         * `injector.get` lancia → catturo e faccio fallback al percorso self-contained.
-         */
-        this.exportService = undefined;
-        this.trackByIndex = (i) => i;
+        // --- Ridimensionamento colonne pinnate (gated da [ColumnsResizable]) --------
+        /** Larghezza minima (px) di una colonna pinnata durante il resize */
+        this.PINNED_MIN_W = 48;
+        /** Stato del resize in corso (colonna + coordinate iniziali) */
+        this.resizing = null;
         this.trackRow = (i, item) => item?._hash ?? item?.id ?? item;
         this.trackCol = (_, col) => col.id;
         if (ngControl)
             ngControl.valueAccessor = this;
+        // Controller di export (E4): costruito con una interfaccia host STRETTA (accessor
+        // lazy), non col back-ref completo. `injector` è già assegnato (parameter property).
+        this.exportCtrl = new ExportController({
+            injector: this.injector,
+            visibleColumns: () => this.visibleColumns(),
+            columns: () => this.columns(),
+            boundSource: () => this.boundSource(),
+            exportOnlyVisible: () => this.ExportOnlyVisibleColumns(),
+            exportBaseName: () => this.ExportFileName(),
+            dynamicDefs: () => this.DynamicRowColumnsDefinition(),
+            exportFunction: () => this.ExportFunction,
+            cellDisplayText: (item, col) => this.cellDisplayText(item, col),
+            columnLabel: (col) => this.columnLabel(col),
+            renderedHeaderTexts: () => this.renderedHeaderTexts(),
+            flashNotice: (msg) => this.flashNotice(msg)
+        });
     }
     ngOnInit() {
         // Tutti gli input risolti sono ora `computed()`/`linkedSignal()` reattivi
         // (vedi dichiarazioni): niente più risoluzione one-shot qui.
-        this.inited = true;
         // Click destro: alla apertura del menu seleziono l'elemento (se non già selezionato)
         const menu = this.ContextMenu || this.tableEmptyMenu;
         if (menu)
@@ -6901,171 +7401,29 @@ class EsTable2Component {
         this.hgThById.set(new Map(thById));
         this.hgParentIds.set(new Set(parentIds));
         const def = this.DefaultAlignment().toLowerCase();
-        const cols = [];
-        for (const th of ths) {
-            if (!th.thIf)
-                continue;
-            if (th.thMulti)
-                continue; // srotolata separatamente
-            if (parentIds.has(th.th))
-                continue; // è un header di gruppo, non una colonna-dato
-            const td = tdByCol.get(th.th);
-            cols.push({
-                id: th.th,
-                header: th,
-                cell: td,
-                visible: th.thVisible,
-                orderable: th.thOrderable,
-                alignment: (td?.tdAlignment || th.thAlignment)?.toLowerCase() || def,
-                property: th.thProperty,
-                type: th.thType ?? null,
-                source: th.thSource,
-                format: td?.tdFormat || th.thFormat || null,
-                cssClass: td?.tdClass || th.thClass || '',
-                wrap: th.thWrap,
-                isGroup: th.thGroup,
-                aggSpecs: parseAggregationSpecs(th.th, th.thAggregation),
-                headerText: th.thStaticContent,
-                headerBg: th.thBackgroundColor,
-                routePath: th.thRoutePath,
-                routeParams: th.thRouteParameterProperties,
-                rendererName: th.thRendererName,
-                pinned: !!th.thPinned,
-                pinnedWidth: th.thPinnedWidth ?? null
-            });
-        }
+        // Mapping direttive → colonne delegato al motore puro `core/columns.ts`
+        const cols = mapDirectiveColumns(ths, tdByCol, parentIds, def);
         this.directiveColumns = cols;
         this.setColumns(cols);
     }
     /**
-     * Srotola le colonne `*th Multi:true` sui dati: ogni entry unica
-     * `(header_group, header)` della proprietà-array diventa una colonna sintetica,
-     * e i livelli di `header_group` (separati da ">") alimentano gli header-group.
+     * Srotola le colonne `*th Multi:true` sui dati. Delega al motore puro
+     * `core/columns.ts`; qui applico allo stato le mappe th/parent aggiornate.
      */
     buildMultiColumns(items) {
-        const cols = [];
-        const thById = new Map(this.baseThById);
-        const parentIds = new Set(this.baseParentIds);
-        const seen = new Set();
-        for (const def of this.multiDefs) {
-            const prop = def.prop;
-            for (const item of (items || [])) {
-                const arr = item?.[prop];
-                if (!Array.isArray(arr))
-                    continue;
-                for (let ii = 0; ii < arr.length; ii++) {
-                    const mv = arr[ii] || {};
-                    const header = mv.header ?? '';
-                    const group = mv.header_group ?? null;
-                    const key = `${group}__${header}`;
-                    if (seen.has(key))
-                        continue;
-                    seen.add(key);
-                    const hier = group ? String(group).split('>').map((s) => s.trim()).filter(Boolean) : [];
-                    const immediateParent = hier.length ? hier[hier.length - 1] : null;
-                    const colId = `${prop}_${ii}`;
-                    // th sintetico foglia: fornisce la catena thParent + il template header
-                    const leafTh = new EsThDirective(def.th.Template);
-                    leafTh.th = colId;
-                    leafTh.thStaticContent = header;
-                    leafTh.thParent = immediateParent;
-                    leafTh.thOrderable = false;
-                    thById.set(colId, leafTh);
-                    // th sintetici dei gruppi padre (una volta ciascuno)
-                    for (let h = 0; h < hier.length; h++) {
-                        const pid = hier[h];
-                        parentIds.add(pid);
-                        if (!thById.has(pid)) {
-                            const pth = new EsThDirective(null);
-                            pth.th = pid;
-                            pth.thStaticContent = pid;
-                            pth.thParent = h > 0 ? hier[h - 1] : null;
-                            thById.set(pid, pth);
-                        }
-                    }
-                    cols.push({
-                        id: colId,
-                        header: leafTh,
-                        cell: def.td,
-                        visible: true,
-                        orderable: false,
-                        alignment: 'right',
-                        property: null,
-                        type: null, source: null, format: null,
-                        cssClass: def.td?.tdClass || def.th.thClass || '',
-                        wrap: false, isGroup: false, aggSpecs: [],
-                        headerText: header,
-                        headerBg: null,
-                        multiProp: prop, multiIndex: ii,
-                        pinned: false, pinnedWidth: null
-                    });
-                }
-            }
-        }
+        const { columns, thById, parentIds } = buildMultiColumns(this.multiDefs, this.baseThById, this.baseParentIds, items);
         this.hgThById.set(thById);
         this.hgParentIds.set(parentIds);
         this.multiColumnsBuilt = true;
-        return cols;
+        return columns;
     }
-    /** Costruisce le colonne da una `EsTableColumnsDefinition[]` (modalità dinamica) */
+    /** Colonne dinamiche — delega al motore puro `core/columns.ts` */
     buildDynamicColumns(defs) {
-        // renderer custom forniti dal consumer come `*td tdForProperty="..."`
-        const tds = this.tdDirectives?.toArray() ?? [];
-        const cols = [];
-        for (let i = 0; i < defs.length; i++) {
-            const d = defs[i];
-            if (!d.Visible)
-                continue;
-            const renderer = tds.find(t => (d.RendererName && t.td === d.RendererName) || t.tdForProperty === d.PropertyName);
-            cols.push({
-                id: d.PropertyName,
-                cell: renderer,
-                visible: true,
-                orderable: d.Orderable !== false,
-                alignment: 'left',
-                property: d.PropertyName,
-                type: d.PropertyType ?? null,
-                source: d.PropertySource ?? null,
-                format: d.Format ?? null,
-                cssClass: d.Clss || '',
-                wrap: !!d.HeaderWraps,
-                isGroup: false,
-                aggSpecs: [],
-                headerText: d.Description,
-                routePath: d.RoutePath,
-                routeParams: d.RouteParameterProperties,
-                rendererName: d.RendererName,
-                // colori per-cella opzionali (forecolors/backcolors allineati all'ordine delle colonne)
-                colorIndex: i
-            });
-        }
-        this.setColumns(cols);
+        this.setColumns(mapDynamicColumns(defs, this.tdDirectives?.toArray() ?? []));
     }
-    /** Costruisce le colonne da `report_columns` (modalità report): il valore è preso per indice */
+    /** Colonne report — delega al motore puro `core/columns.ts` */
     buildReportColumns(reportColumns) {
-        const cols = [];
-        for (let i = 0; i < reportColumns.length; i++) {
-            const c = reportColumns[i];
-            cols.push({
-                id: c.id,
-                visible: true,
-                orderable: false,
-                alignment: c.alignment?.toLowerCase() || 'left',
-                property: null,
-                type: null,
-                source: null,
-                format: c.format ?? null,
-                cssClass: '',
-                wrap: false,
-                isGroup: false,
-                aggSpecs: [],
-                headerText: c.description,
-                headerBg: c.color || null,
-                propAccessor: String(i),
-                colorIndex: i
-            });
-        }
-        this.setColumns(cols);
+        this.setColumns(mapReportColumns(reportColumns));
     }
     /** Sceglie la sorgente delle colonne in base al modello: report → dinamica → direttive */
     resolveColumns(items) {
@@ -7555,8 +7913,8 @@ class EsTable2Component {
         const td = target?.closest?.('td[data-r]');
         if (!td)
             return null;
-        const r = parseInt(td.getAttribute('data-r'), 10);
-        const c = parseInt(td.getAttribute('data-c'), 10);
+        const r = parseInt(td.getAttribute('data-r') ?? '', 10);
+        const c = parseInt(td.getAttribute('data-c') ?? '', 10);
         return isNaN(r) || isNaN(c) ? null : { r, c };
     }
     /** mousedown sulla griglia: apre un nuovo range sulla cella-ancora */
@@ -7790,11 +8148,20 @@ class EsTable2Component {
         this.cdr.markForCheck();
     }
     // --- Valori: lettura/scrittura tipizzata + testo di copia ------------------
+    /** Lettura bag-aware di una proprietà (gestisce gli oggetti "generic" con `properties`) */
+    readProp(item, key) {
+        return item?.properties ? item.properties[key] : item?.[key];
+    }
+    /** Scrittura bag-aware di una proprietà */
+    writeProp(item, key, v) {
+        if (item?.properties)
+            item.properties[key] = v;
+        else
+            item[key] = v;
+    }
     /** Valore grezzo su cui operano editing/paste (gestisce gli oggetti `properties`) */
     rawCellValue(item, col) {
-        if (!col.property)
-            return null;
-        return item?.properties ? item.properties[col.property] : item?.[col.property];
+        return col.property ? this.readProp(item, col.property) : null;
     }
     /** Scrive un valore GIÀ convertito e restituisce l'eventuale EsTableModelChange */
     applyCoerced(item, col, niu) {
@@ -7803,94 +8170,12 @@ class EsTable2Component {
         const old = this.rawCellValue(item, col);
         if (old === niu)
             return null;
-        if (item?.properties)
-            item.properties[col.property] = niu;
-        else
-            item[col.property] = niu;
+        this.writeProp(item, col.property, niu);
         return new EsTableModelChange(item, String(col.headerText ?? col.id), col.property, old, niu);
     }
-    /**
-     * Converte una stringa (digitata/incollata) nel tipo della colonna, segnalando
-     * se è compatibile. `ok:false` = valore incompatibile col tipo (es. testo in una
-     * colonna numerica) → chi chiama avvisa e non scrive. Una stringa vuota è sempre
-     * valida e azzera il valore (null).
-     */
+    /** Coercizione valore → delega al motore puro `core/coercion.ts` */
     coerceValue(raw, col) {
-        const type = col.type;
-        const v = raw == null ? '' : String(raw).trim();
-        switch (type) {
-            case 'int':
-            case 'number':
-            case 'float':
-            case 'currency': {
-                if (v === '')
-                    return { ok: true, value: null };
-                const n = this.toNumber(v);
-                if (n == null || isNaN(n))
-                    return { ok: false, value: null };
-                return { ok: true, value: (type === 'int' || type === 'number') ? Math.round(n) : n };
-            }
-            case 'boolean': {
-                if (v === '')
-                    return { ok: true, value: null };
-                if (/^(true|1|✓|s[iì]|si|yes|y)$/i.test(v))
-                    return { ok: true, value: true };
-                if (/^(false|0|—|no|n)$/i.test(v))
-                    return { ok: true, value: false };
-                return { ok: false, value: null };
-            }
-            case 'enum':
-            case 'autocomplete': {
-                if (!col.source || col.source.length === 0)
-                    return { ok: true, value: v };
-                const byId = col.source.find(o => String(o.id) === v);
-                if (byId)
-                    return { ok: true, value: byId.id };
-                const byDesc = col.source.find(o => o.description === v);
-                if (byDesc)
-                    return { ok: true, value: byDesc.id };
-                return { ok: false, value: null };
-            }
-            case 'date':
-            case 'datetime':
-            case 'time': {
-                if (v === '')
-                    return { ok: true, value: null };
-                const d = this.parseDateLoose(v);
-                return d ? { ok: true, value: d } : { ok: false, value: null };
-            }
-            default:
-                return { ok: true, value: raw };
-        }
-    }
-    /** Parsing numerico tollerante (separatori di migliaia + virgola/punto decimale). `NaN` = non numerico */
-    toNumber(v) {
-        let s = v.replace(/\s/g, '').replace(/[€$%]/g, '');
-        if (s === '')
-            return NaN;
-        const hasComma = s.includes(','), hasDot = s.includes('.');
-        if (hasComma && hasDot) {
-            // l'ultimo separatore è quello decimale
-            if (s.lastIndexOf(',') > s.lastIndexOf('.'))
-                s = s.replace(/\./g, '').replace(',', '.');
-            else
-                s = s.replace(/,/g, '');
-        }
-        else if (hasComma) {
-            s = s.replace(',', '.');
-        }
-        return /^-?\d*\.?\d+$/.test(s) ? parseFloat(s) : NaN;
-    }
-    /** Parsing date tollerante: `dd/MM/yyyy [HH:mm[:ss]]` o formati nativi. `null` = non valida */
-    parseDateLoose(v) {
-        const m = v.match(/^(\d{1,2})[\/\-.](\d{1,2})[\/\-.](\d{2,4})(?:[ T](\d{1,2}):(\d{2})(?::(\d{2}))?)?$/);
-        if (m) {
-            const y = m[3].length === 2 ? 2000 + +m[3] : +m[3];
-            const d = new Date(y, +m[2] - 1, +m[1], +(m[4] || 0), +(m[5] || 0), +(m[6] || 0));
-            return isNaN(d.getTime()) ? null : d;
-        }
-        const d = new Date(v);
-        return isNaN(d.getTime()) ? null : d;
+        return coerceValue(raw, col);
     }
     /** Testo visualizzato di una cella (usato dalla copia) */
     cellDisplayText(item, col) {
@@ -8151,7 +8436,7 @@ class EsTable2Component {
     }
     removeItem(item) { this.onRemoval.emit(item); }
     abortRemoval(item) { this.onAbortRemoval.emit(item); }
-    /** Applica ordine + visibilità + pin delle preferenze a una lista di colonne appena costruita */
+    /** Applica ordine + visibilità + pin + larghezze delle preferenze a una lista di colonne appena costruita */
     setColumns(cols) {
         const p = this.columnPrefs;
         if (!p) {
@@ -8176,6 +8461,9 @@ class EsTable2Component {
             // il pin salvato sovrascrive il default della direttiva (solo se presente nelle prefs)
             if (p.pinned)
                 c.pinned = p.pinned.includes(c.id);
+            // larghezza pinnata salvata (resize) → sovrascrive il PinnedWidth della direttiva
+            if (p.widths && p.widths[c.id] != null)
+                c.pinnedWidth = p.widths[c.id];
         }
         this.columns.set(ordered);
         this.ensurePrefsLoaded();
@@ -8185,7 +8473,7 @@ class EsTable2Component {
      * del controllo (ngModel/formControlName). In fallback usa `[Name]`.
      */
     prefsKey() {
-        const key = this.ngControl?.name || this.Name() || null;
+        const key = String(this.ngControl?.name ?? '') || this.Name() || null;
         if (!key && this.SavePreferences())
             console.error("[es-table2] Non posso usare le preferenze senza un 'name' (ngModel) o un [Name] per la tabella");
         return key;
@@ -8245,7 +8533,15 @@ class EsTable2Component {
         // "perdono" le colonne aggiunte a una tabella con preferenze già memorizzate.
         const knownToPrefs = new Set([...order, ...visible]);
         const hidden = [...currentIds].filter(id => knownToPrefs.has(id) && !visible.includes(id));
-        this.columnPrefs = { order, hidden, pinned };
+        // `widths` (resize colonne pinnate): estensione retro-compatibile, filtrata sulle colonne presenti
+        let widths;
+        if (prefs.widths && typeof prefs.widths === 'object') {
+            widths = {};
+            for (const id of Object.keys(prefs.widths))
+                if (currentIds.has(id))
+                    widths[id] = prefs.widths[id];
+        }
+        this.columnPrefs = { order, hidden, pinned, widths };
         this.setColumns(this.columns());
         if (prefs.orders?.length) {
             this.orders.set([...prefs.orders]);
@@ -8267,12 +8563,18 @@ class EsTable2Component {
         // Includo anche le sotto-colonne Multi (id stabili `prop_index`): il
         // caricamento è gated finché non esistono, quindi il guard non le rifiuta.
         const cols = this.columns();
+        // larghezze personalizzate delle colonne pinnate (resize) → { id: px }
+        const widths = {};
+        for (const c of cols)
+            if (c.pinned && c.pinnedWidth)
+                widths[c.id] = c.pinnedWidth;
         const payload = {
             columns: cols.filter(c => c.visible).map(c => c.id),
             column_ordering: cols.map(c => c.id),
             orders: this.orders(),
-            // estensione es-table2 (retro-compatibile: l'originale ignora i campi extra)
-            pinned: cols.filter(c => c.pinned).map(c => c.id)
+            // estensioni es-table2 (retro-compatibili: l'originale ignora i campi extra)
+            pinned: cols.filter(c => c.pinned).map(c => c.id),
+            widths
         };
         // allineo anche i campi wire dell'AppSearch (parità col server-side)
         if (this.viewMode() && this.view()) {
@@ -8325,13 +8627,11 @@ class EsTable2Component {
     }
     openColumnsDialog() {
         // Leggo dal DOM i testi header renderizzati (leaf + gruppi) per etichette esatte.
-        const headerTexts = new Map();
+        const headerTexts = this.renderedHeaderTexts();
         const groupLabels = new Map();
         const host = this.hostEl?.nativeElement;
-        if (host) {
-            host.querySelectorAll('thead th[data-colid]').forEach((el) => headerTexts.set(el.getAttribute('data-colid'), (el.textContent || '').trim()));
-            host.querySelectorAll('thead th[data-groupid]').forEach((el) => groupLabels.set(el.getAttribute('data-groupid'), (el.textContent || '').trim()));
-        }
+        if (host)
+            host.querySelectorAll('thead th[data-groupid]').forEach((el) => groupLabels.set(el.getAttribute('data-groupid') ?? '', (el.textContent || '').trim()));
         // TUTTE le colonne (comprese le Multi), con etichetta gruppo-consapevole.
         this.dialogCols.set(this.columns().map(c => ({
             id: c.id,
@@ -8402,6 +8702,62 @@ class EsTable2Component {
             : [...list.slice(0, bStart), ...list.slice(aStart, aEnd + 1), ...list.slice(bStart, bEnd + 1), ...list.slice(aEnd + 1)];
         this.dialogCols.set(newList);
     }
+    dialogDragStart(i, ev) {
+        this.dragIndex.set(i);
+        if (ev.dataTransfer) {
+            ev.dataTransfer.effectAllowed = 'move';
+            try {
+                ev.dataTransfer.setData('text/plain', String(i));
+            }
+            catch { /* alcuni browser */ }
+        }
+        this.cdr.markForCheck();
+    }
+    dialogDragOver(i, ev) {
+        if (this.dragIndex() == null)
+            return;
+        ev.preventDefault(); // consente il drop
+        if (ev.dataTransfer)
+            ev.dataTransfer.dropEffect = 'move';
+        if (this.dragOverIndex() !== i) {
+            this.dragOverIndex.set(i);
+            this.cdr.markForCheck();
+        }
+    }
+    dialogDrop(i, ev) {
+        ev.preventDefault();
+        const from = this.dragIndex();
+        if (from != null && from !== i)
+            this.dialogReorder(from, i);
+        this.dialogDragEnd();
+    }
+    dialogDragEnd() {
+        this.dragIndex.set(null);
+        this.dragOverIndex.set(null);
+        this.cdr.markForCheck();
+    }
+    /**
+     * Sposta la riga `from` alla posizione `to`, poi RIPARA la contiguità dei gruppi
+     * in tempo reale (come `dialogMove`): un drag che porterebbe una colonna fuori dal
+     * suo gruppo la fa "scattare" nella posizione contigua più vicina, così la dialog
+     * non mostra mai gruppi spezzati durante l'editing.
+     */
+    dialogReorder(from, to) {
+        const list = [...this.dialogCols()];
+        if (from < 0 || to < 0 || from >= list.length || to >= list.length)
+            return;
+        const [moved] = list.splice(from, 1);
+        list.splice(to, 0, moved);
+        if (this.hgParentIds().size > 0) {
+            const orderIds = this.enforceGroupContiguity(list.map(c => c.id));
+            const byId = new Map(list.map(c => [c.id, c]));
+            this.dialogCols.set(orderIds.map(id => byId.get(id)));
+        }
+        else {
+            this.dialogCols.set(list);
+        }
+        this.cdr.markForCheck();
+    }
     applyColumnsDialog() {
         // Riparo l'ordine mantenendo CONTIGUI i membri di ogni gruppo: spostare una
         // colonna fuori dal suo gruppo non deve produrre header-group spezzati.
@@ -8428,41 +8784,14 @@ class EsTable2Component {
      * colonne esterne.
      */
     /** Catena degli antenati-gruppo (root→padre immediato) di una colonna; `[]` se non raggruppata */
-    columnChain(id) {
-        const thById = this.hgThById();
-        const chain = [];
-        let p = thById.get(id)?.thParent ?? null;
-        let guard = 0;
-        while (p && guard++ < 32) {
-            chain.push(p);
-            p = thById.get(p)?.thParent ?? null;
-        }
-        return chain.reverse(); // root-first
+    /** Catena antenati di una colonna — delega al motore `core/header-groups.ts` */
+    ancestorChain(id, rootFirst = false) {
+        return ancestorChain(id, this.hgThById(), rootFirst);
     }
+    columnChain(id) { return this.ancestorChain(id, true); }
+    /** Riordino group-contiguo — delega al motore `core/header-groups.ts` */
     enforceGroupContiguity(orderIds) {
-        if (this.hgParentIds().size === 0)
-            return orderIds;
-        const chainOf = (id) => this.columnChain(id);
-        // prima apparizione di ogni id-gruppo nell'ordine utente
-        const firstIdx = new Map();
-        orderIds.forEach((id, i) => {
-            for (const g of chainOf(id))
-                if (!firstIdx.has(g))
-                    firstIdx.set(g, i);
-        });
-        const keyOf = (id, i) => [...chainOf(id).map(g => firstIdx.get(g)), i];
-        return orderIds
-            .map((id, i) => ({ id, key: keyOf(id, i), i }))
-            .sort((a, b) => {
-            const n = Math.max(a.key.length, b.key.length);
-            for (let k = 0; k < n; k++) {
-                const av = a.key[k] ?? -1, bv = b.key[k] ?? -1;
-                if (av !== bv)
-                    return av - bv;
-            }
-            return a.i - b.i;
-        })
-            .map(x => x.id);
+        return enforceGroupContiguity(orderIds, this.hgThById(), this.hgParentIds().size > 0);
     }
     resetColumnsDialog() {
         this.columnPrefs = null;
@@ -8483,172 +8812,22 @@ class EsTable2Component {
             this.cdr.markForCheck();
         }
     }
-    /** Colonne da esportare (tutte o solo visibili) e con dato testuale */
-    exportColumns() {
-        const cols = this.ExportOnlyVisibleColumns() ? this.visibleColumns() : this.columns();
-        return cols.filter(c => !c.isGroup);
-    }
-    /** Righe-dato correnti (esclude righe-gruppo) */
-    exportRows() {
-        return this.boundSource().filter(r => !r._group);
-    }
-    /** Matrice [header, ...righe] con i valori visualizzati */
-    buildExportMatrix() {
-        const cols = this.exportColumns();
-        const header = cols.map(c => this.headerLabel(c));
-        const rows = this.exportRows().map(item => cols.map(c => this.cellDisplayText(item, c)));
-        return [header, ...rows];
-    }
-    /**
-     * Etichetta di intestazione per l'export self-contained: usa il testo header
-     * RENDERIZZATO letto dal DOM (rispetta il casing del template `*th`, es. "ID"),
-     * con fallback su `columnLabel` (headerText statico / id) se il DOM non è leggibile.
-     */
-    headerLabel(col) {
-        const el = this.hostEl?.nativeElement?.querySelector(`thead th[data-colid="${col.id}"]`);
-        const txt = (el?.textContent || '').trim();
-        return txt || this.columnLabel(col);
-    }
-    resolveExportService() {
-        if (this.exportService === undefined) {
-            try {
-                this.exportService = this.injector.get(ExportService, null);
-            }
-            catch {
-                this.exportService = null;
-            }
-        }
-        return this.exportService;
-    }
+    /** Export delegato al controller `ExportController` (E4); chiude prima il menu chrome. */
     export(format = 'CSV') {
         this.exportMenuOpen.set(false);
-        // Parità con l'originale (`ExportHandler.tryExport`): se il consumer fornisce
-        // una ExportFunction gliela lascio gestire. La callback ha la STESSA firma
-        // dell'es-table1 — `(data, type, cancel?)` — così le funzioni di export dei
-        // componenti legacy funzionano invariate: `cancel === true` annulla l'export
-        // (es. l'utente ha abortito il recupero dati lato server) senza scaricare nulla.
-        //
-        // Il flusso è IDENTICO a es-table1: la callback riceve `(data, Type)` dove
-        // `Type` è la classe DTO decorata con `@Export(...)`. È l'`ExportService` che,
-        // ricreando ogni riga come `new Type()`, legge quei decoratori per determinare
-        // colonne/intestazioni/ordine/formato — NON le colonne `*th` della tabella.
-        // La tabella contribuisce solo il filtro delle colonne visibili (via `tableid`
-        // del decoratore) e, in modalità dinamica, gli header generici.
-        if (this.ExportFunction) {
-            if (this.exportInProgress) {
-                this.flashNotice("Un'esportazione è già in corso, attendere.");
-                return;
-            }
-            this.exportInProgress = true;
-            try {
-                this.ExportFunction((data, type, cancel = false) => {
-                    this.exportInProgress = false;
-                    if (cancel)
-                        return;
-                    this.exportViaService(data, type, format);
-                }, format);
-            }
-            catch (e) {
-                // Se la ExportFunction lancia in modo sincrono, non lascio il guard bloccato
-                this.exportInProgress = false;
-                throw e;
-            }
-            return;
-        }
-        // Nessuna ExportFunction: percorso self-contained (nessuna classe decorata a
-        // disposizione) — esporto le colonne `*th` correnti con le intestazioni renderizzate.
-        const matrix = this.buildExportMatrix();
-        if (matrix.length <= 1) {
-            this.flashNotice('Nessun dato da esportare.');
-            return;
-        }
-        if (format === 'XLSX')
-            this.exportXlsx(matrix);
-        else
-            this.exportCsv(matrix);
+        this.exportCtrl.run(format);
     }
     /**
-     * Delego all'`ExportService` originale replicando esattamente `ExportHandler.tryExport`:
-     * `export(data, format, fileName, type, columnsFilter, genericHeaders)`. Così l'export
-     * è guidato dai decoratori `@Export` della classe `type`, byte-compatibile con es-table1.
-     * Se il servizio non è disponibile (raro: è `providedIn:'root'` nel package), fallback
-     * al percorso self-contained mappando le colonne `*th`.
+     * Mappa id-colonna → testo header RENDERIZZATO letto dal DOM (rispetta il casing
+     * del template `*th`, es. "ID"). Costruita in un'unica passata; usata dall'export
+     * self-contained e dalla dialog colonne (prima due letture DOM separate).
      */
-    exportViaService(data, type, format) {
-        if (!data?.length) {
-            this.flashNotice('Nessun dato da esportare.');
-            return;
-        }
-        const svc = this.resolveExportService();
-        if (!svc) {
-            // Nessun ExportService: non posso leggere i decoratori → mappo le colonne `*th`.
-            this.exportData(data, format);
-            return;
-        }
-        // `columnsFilter`: solo se richiesto esplicitamente. Sono gli id delle colonne
-        // visibili; l'ExportService li confronta col `tableid` del decoratore `@Export`.
-        const columnsFilter = this.ExportOnlyVisibleColumns() ? this.exportColumns().map(c => c.id) : undefined;
-        // `genericHeaders`: in modalità dinamica gli header vengono dalle definizioni colonna.
-        const drcd = this.DynamicRowColumnsDefinition();
-        const genericHeaders = drcd && drcd.length > 0
-            ? drcd.map(t => ({ label: t.Description, key: t.PropertyName, propKey: t.PropertyName, order: t.ColumnOrder, type: 'string' }))
-            : undefined;
-        svc.export(data, format, this.ExportFileName(), type, columnsFilter, genericHeaders);
-    }
-    /** @deprecated Percorso di fallback self-contained (usato solo senza ExportService) */
-    exportData(data, format) {
-        if (!data?.length) {
-            this.flashNotice('Nessun dato da esportare.');
-            return;
-        }
-        const cols = this.exportColumns();
-        const header = cols.map(c => this.headerLabel(c));
-        const rows = data.filter(r => !r._group).map(item => cols.map(c => this.cellDisplayText(item, c)));
-        const matrix = [header, ...rows];
-        if (format === 'XLSX')
-            this.exportXlsx(matrix);
-        else
-            this.exportCsv(matrix);
-    }
-    exportCsv(matrix) {
-        const esc = (v) => {
-            const s = v == null ? '' : String(v);
-            return /[",\n;]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
-        };
-        const csv = matrix.map(row => row.map(esc).join(';')).join('\r\n');
-        // BOM per la corretta apertura in Excel con caratteri accentati
-        this.downloadBlob('' + csv, this.exportFileName('csv'), 'text/csv;charset=utf-8;');
-    }
-    async exportXlsx(matrix) {
-        try {
-            const XLSX = await import('xlsx');
-            const ws = XLSX.utils.aoa_to_sheet(matrix);
-            const wb = XLSX.utils.book_new();
-            XLSX.utils.book_append_sheet(wb, ws, 'Export');
-            XLSX.writeFile(wb, this.exportFileName('xlsx'));
-        }
-        catch {
-            this.flashNotice('Export XLSX non disponibile (SheetJS assente): esporto in CSV.');
-            this.exportCsv(matrix);
-        }
-    }
-    /** Nome file rispettando l'estensione richiesta */
-    exportFileName(ext) {
-        const name = this.ExportFileName() || 'Export';
-        return /\.(csv|xlsx)$/i.test(name) ? name.replace(/\.(csv|xlsx)$/i, '.' + ext) : `${name}.${ext}`;
-    }
-    downloadBlob(content, filename, mime) {
-        if (typeof document === 'undefined')
-            return;
-        const blob = new Blob([content], { type: mime });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        setTimeout(() => URL.revokeObjectURL(url), 0);
+    renderedHeaderTexts() {
+        const m = new Map();
+        const host = this.hostEl?.nativeElement;
+        if (host)
+            host.querySelectorAll('thead th[data-colid]').forEach((el) => m.set(el.getAttribute('data-colid') ?? '', (el.textContent || '').trim()));
+        return m;
     }
     // ===========================================================================
     //  Corner menu / helpers template
@@ -8682,9 +8861,7 @@ class EsTable2Component {
      */
     cellValue(item, col) {
         const key = col.property || col.id;
-        if (!key)
-            return null;
-        return item?.properties ? item.properties[key] : item?.[key];
+        return key ? this.readProp(item, key) : null;
     }
     /** Entry Multi corrispondente a una cella (`item[multiProp][multiIndex]`) */
     multiCell(item, col) {
@@ -8693,12 +8870,73 @@ class EsTable2Component {
         const arr = item?.[col.multiProp];
         return (Array.isArray(arr) ? arr[col.multiIndex] : null) ?? {};
     }
+    /**
+     * Tooltip "smart" al passaggio del mouse: mostra il testo REALMENTE renderizzato
+     * della cella (qualunque sia il `*td`) SOLO se è troncato. Legge `el.textContent`
+     * anziché `cellDisplayText`, che conosce solo `property`/`id` e non il contenuto di
+     * un template custom (era il bug del tooltip che mostrava sempre l'id colonna).
+     */
+    onCellHover(ev) {
+        const el = ev.currentTarget;
+        if (!el)
+            return;
+        if (el.scrollWidth > el.clientWidth + 1) {
+            const txt = (el.textContent || '').trim();
+            if (txt)
+                el.setAttribute('title', txt);
+            else
+                el.removeAttribute('title');
+        }
+        else {
+            el.removeAttribute('title');
+        }
+    }
+    /** mousedown sull'handle: avvia il ridimensionamento della colonna pinnata */
+    startColumnResize(col, ev) {
+        ev.preventDefault();
+        ev.stopPropagation(); // non deve innescare l'ordinamento sull'header
+        this.resizing = { col, startX: ev.clientX, startW: this.pinnedWidthPx(col) };
+        document.body.style.userSelect = 'none';
+        document.body.style.cursor = 'col-resize';
+    }
+    onResizeMove(ev) {
+        if (!this.resizing)
+            return;
+        const w = Math.max(this.PINNED_MIN_W, Math.round(this.resizing.startW + (ev.clientX - this.resizing.startX)));
+        this.resizing.col.pinnedWidth = w;
+        this.columns.set([...this.columns()]); // forza il ricalcolo di pinnedOffsets/visibleColumns
+        this.cdr.markForCheck();
+    }
+    onResizeEnd() {
+        if (!this.resizing)
+            return;
+        this.resizing = null;
+        document.body.style.userSelect = '';
+        document.body.style.cursor = '';
+        // persisto la nuova larghezza nelle preferenze (colonna → px)
+        this.persistColumnWidths();
+    }
+    /** Aggiorna `columnPrefs.widths` dalle larghezze correnti delle colonne pinnate e salva */
+    persistColumnWidths() {
+        const cols = this.columns();
+        const widths = {};
+        for (const c of cols)
+            if (c.pinned && c.pinnedWidth)
+                widths[c.id] = c.pinnedWidth;
+        this.columnPrefs = {
+            order: cols.map(c => c.id),
+            hidden: cols.filter(c => !c.visible).map(c => c.id),
+            pinned: cols.filter(c => c.pinned).map(c => c.id),
+            widths
+        };
+        this.saveColumnPrefs();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsTable2Component, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2$1.PreferencesService, optional: true }, { token: i0.Injector }, { token: EST2_DEFAULTS, optional: true }, { token: EST2_DEBUG, optional: true }, { token: EST2_EXPORT_GLOBAL_ACL, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: EsTable2Component, isStandalone: false, selector: "es-table2", inputs: { ContextMenu: { classPropertyName: "ContextMenu", publicName: "ContextMenu", isSignal: false, isRequired: false, transformFunction: null }, _Selection: { classPropertyName: "_Selection", publicName: "Selection", isSignal: true, isRequired: false, transformFunction: null }, SingleSelection: { classPropertyName: "SingleSelection", publicName: "SingleSelection", isSignal: true, isRequired: false, transformFunction: null }, SelectionDisabled: { classPropertyName: "SelectionDisabled", publicName: "SelectionDisabled", isSignal: true, isRequired: false, transformFunction: null }, _SelectAll: { classPropertyName: "_SelectAll", publicName: "SelectAll", isSignal: true, isRequired: false, transformFunction: null }, _UseSelectionCache: { classPropertyName: "_UseSelectionCache", publicName: "UseSelectionCache", isSignal: true, isRequired: false, transformFunction: null }, _ShiftClick: { classPropertyName: "_ShiftClick", publicName: "ShiftClick", isSignal: true, isRequired: false, transformFunction: null }, _OrderByColumn: { classPropertyName: "_OrderByColumn", publicName: "OrderByColumn", isSignal: true, isRequired: false, transformFunction: null }, MultipleOrderingDirectives: { classPropertyName: "MultipleOrderingDirectives", publicName: "MultipleOrderingDirectives", isSignal: true, isRequired: false, transformFunction: null }, Removal: { classPropertyName: "Removal", publicName: "Removal", isSignal: true, isRequired: false, transformFunction: null }, RemovalCondition: { classPropertyName: "RemovalCondition", publicName: "RemovalCondition", isSignal: true, isRequired: false, transformFunction: null }, RowClassAssigner: { classPropertyName: "RowClassAssigner", publicName: "RowClassAssigner", isSignal: false, isRequired: false, transformFunction: null }, _HidePaging: { classPropertyName: "_HidePaging", publicName: "HidePaging", isSignal: true, isRequired: false, transformFunction: null }, _HidePagingCount: { classPropertyName: "_HidePagingCount", publicName: "HidePagingCount", isSignal: true, isRequired: false, transformFunction: null }, _HidePagingButtons: { classPropertyName: "_HidePagingButtons", publicName: "HidePagingButtons", isSignal: true, isRequired: false, transformFunction: null }, _AllSearch: { classPropertyName: "_AllSearch", publicName: "AllSearch", isSignal: true, isRequired: false, transformFunction: null }, _PagingStyle: { classPropertyName: "_PagingStyle", publicName: "PagingStyle", isSignal: true, isRequired: false, transformFunction: null }, _ArraymodeItemsPerPage: { classPropertyName: "_ArraymodeItemsPerPage", publicName: "ArraymodeItemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, _UseArrayModePaging: { classPropertyName: "_UseArrayModePaging", publicName: "UseArrayModePaging", isSignal: true, isRequired: false, transformFunction: null }, CountLabel: { classPropertyName: "CountLabel", publicName: "CountLabel", isSignal: true, isRequired: false, transformFunction: null }, Height: { classPropertyName: "Height", publicName: "Height", isSignal: true, isRequired: false, transformFunction: null }, MaxHeight: { classPropertyName: "MaxHeight", publicName: "MaxHeight", isSignal: true, isRequired: false, transformFunction: null }, EmptySpaceBackgroundColor: { classPropertyName: "EmptySpaceBackgroundColor", publicName: "EmptySpaceBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, HighCellDensity: { classPropertyName: "HighCellDensity", publicName: "HighCellDensity", isSignal: true, isRequired: false, transformFunction: null }, HeaderHidden: { classPropertyName: "HeaderHidden", publicName: "HeaderHidden", isSignal: true, isRequired: false, transformFunction: null }, BodyHidden: { classPropertyName: "BodyHidden", publicName: "BodyHidden", isSignal: true, isRequired: false, transformFunction: null }, ShowLoadingOnBootstrap: { classPropertyName: "ShowLoadingOnBootstrap", publicName: "ShowLoadingOnBootstrap", isSignal: true, isRequired: false, transformFunction: null }, _DefaultAlignment: { classPropertyName: "_DefaultAlignment", publicName: "DefaultAlignment", isSignal: true, isRequired: false, transformFunction: null }, _TableClass: { classPropertyName: "_TableClass", publicName: "TableClass", isSignal: true, isRequired: false, transformFunction: null }, _ContainerClass: { classPropertyName: "_ContainerClass", publicName: "ContainerClass", isSignal: true, isRequired: false, transformFunction: null }, EsTableHandledSearch: { classPropertyName: "EsTableHandledSearch", publicName: "EsTableHandledSearch", isSignal: true, isRequired: false, transformFunction: null }, SearchThrottle: { classPropertyName: "SearchThrottle", publicName: "SearchThrottle", isSignal: true, isRequired: false, transformFunction: null }, _ColumnsResizable: { classPropertyName: "_ColumnsResizable", publicName: "ColumnsResizable", isSignal: true, isRequired: false, transformFunction: null }, _ColumnsPinnable: { classPropertyName: "_ColumnsPinnable", publicName: "ColumnsPinnable", isSignal: true, isRequired: false, transformFunction: null }, _HiddenColumns: { classPropertyName: "_HiddenColumns", publicName: "HiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, _ColumnsOrdering: { classPropertyName: "_ColumnsOrdering", publicName: "ColumnsOrdering", isSignal: true, isRequired: false, transformFunction: null }, _Export: { classPropertyName: "_Export", publicName: "Export", isSignal: true, isRequired: false, transformFunction: null }, XLSXExport: { classPropertyName: "XLSXExport", publicName: "XLSXExport", isSignal: true, isRequired: false, transformFunction: null }, CSVExport: { classPropertyName: "CSVExport", publicName: "CSVExport", isSignal: true, isRequired: false, transformFunction: null }, ExportFileName: { classPropertyName: "ExportFileName", publicName: "ExportFileName", isSignal: true, isRequired: false, transformFunction: null }, ExportOnlyVisibleColumns: { classPropertyName: "ExportOnlyVisibleColumns", publicName: "ExportOnlyVisibleColumns", isSignal: true, isRequired: false, transformFunction: null }, ExportFunction: { classPropertyName: "ExportFunction", publicName: "ExportFunction", isSignal: false, isRequired: false, transformFunction: null }, CornerMenuOptions: { classPropertyName: "CornerMenuOptions", publicName: "CornerMenuOptions", isSignal: true, isRequired: false, transformFunction: null }, DynamicOperations: { classPropertyName: "DynamicOperations", publicName: "DynamicOperations", isSignal: true, isRequired: false, transformFunction: null }, _DynamicRowColumnsDefinition: { classPropertyName: "_DynamicRowColumnsDefinition", publicName: "DynamicRowColumnsDefinition", isSignal: true, isRequired: false, transformFunction: null }, Hierarchy: { classPropertyName: "Hierarchy", publicName: "Hierarchy", isSignal: true, isRequired: false, transformFunction: null }, _ParentKey: { classPropertyName: "_ParentKey", publicName: "ParentKey", isSignal: true, isRequired: false, transformFunction: null }, _OwnKey: { classPropertyName: "_OwnKey", publicName: "OwnKey", isSignal: true, isRequired: false, transformFunction: null }, _AutoSortHierarchy: { classPropertyName: "_AutoSortHierarchy", publicName: "AutoSortHierarchy", isSignal: true, isRequired: false, transformFunction: null }, StartsExpanded: { classPropertyName: "StartsExpanded", publicName: "StartsExpanded", isSignal: true, isRequired: false, transformFunction: null }, CascadeSelection: { classPropertyName: "CascadeSelection", publicName: "CascadeSelection", isSignal: true, isRequired: false, transformFunction: null }, _SavePreferences: { classPropertyName: "_SavePreferences", publicName: "SavePreferences", isSignal: true, isRequired: false, transformFunction: null }, Name: { classPropertyName: "Name", publicName: "Name", isSignal: true, isRequired: false, transformFunction: null }, _RowGroupingPagingStyle: { classPropertyName: "_RowGroupingPagingStyle", publicName: "RowGroupingPagingStyle", isSignal: true, isRequired: false, transformFunction: null }, _ShowItemGroupsColumns: { classPropertyName: "_ShowItemGroupsColumns", publicName: "ShowItemGroupsColumns", isSignal: true, isRequired: false, transformFunction: null }, Editable: { classPropertyName: "Editable", publicName: "Editable", isSignal: true, isRequired: false, transformFunction: null }, RangeSelection: { classPropertyName: "RangeSelection", publicName: "RangeSelection", isSignal: true, isRequired: false, transformFunction: null }, ItemSourceProperty: { classPropertyName: "ItemSourceProperty", publicName: "ItemSourceProperty", isSignal: true, isRequired: false, transformFunction: null }, HasHeaderGroup: { classPropertyName: "HasHeaderGroup", publicName: "HasHeaderGroup", isSignal: true, isRequired: false, transformFunction: null }, HasSecondaryHeaderGroup: { classPropertyName: "HasSecondaryHeaderGroup", publicName: "HasSecondaryHeaderGroup", isSignal: true, isRequired: false, transformFunction: null }, SearchView: { classPropertyName: "SearchView", publicName: "SearchView", isSignal: true, isRequired: false, transformFunction: null }, _AutoUpdate: { classPropertyName: "_AutoUpdate", publicName: "AutoUpdate", isSignal: true, isRequired: false, transformFunction: null }, EsThTdProvider: { classPropertyName: "EsThTdProvider", publicName: "EsThTdProvider", isSignal: false, isRequired: false, transformFunction: null }, globalCheck: { classPropertyName: "globalCheck", publicName: "globalCheck", isSignal: true, isRequired: false, transformFunction: null }, autoUpdate: { classPropertyName: "autoUpdate", publicName: "autoUpdate", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, researchInProgress: { classPropertyName: "researchInProgress", publicName: "researchInProgress", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onOrderChanged: "onOrderChanged", onSearchRequest: "onSearchRequest", onSelectionChanged: "onSelectionChanged", onRemoval: "onRemoval", onAbortRemoval: "onAbortRemoval", onModelChange: "onModelChange", onOpenContextMenu: "onOpenContextMenu", onCornerAction: "onCornerAction", onDynamicOperation: "onDynamicOperation", globalCheck: "globalCheckChange", autoUpdate: "autoUpdateChange", seconds: "secondsChange", researchInProgress: "researchInProgressChange" }, host: { listeners: { "document:mouseup": "onDocMouseUp()", "document:copy": "onDocCopy($event)", "document:paste": "onDocPaste($event)", "document:click": "onDocClick()" }, properties: { "class.est2": "this.hostClass", "class.est2--dense": "this.denseClass" } }, queries: [{ propertyName: "headerRef", first: true, predicate: ["header"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true }, { propertyName: "thDirectives", predicate: EsThDirective }, { propertyName: "tdDirectives", predicate: EsTdDirective }, { propertyName: "editorDirectives", predicate: EsTdEditorDirective }, { propertyName: "thTdProviders", predicate: ThTdProvider }], viewQueries: [{ propertyName: "tableEmptyMenu", first: true, predicate: ["emptyMenu"], descendants: true, static: true }, { propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true }], ngImport: i0, template: "@if (view()) {\n  <div class=\"est2-wrap {{ ContainerClass() }}\"\n       [style.height]=\"Height()\"\n       [style.background-color]=\"EmptySpaceBackgroundColor() || null\">\n\n    <!-- Auto-aggiornamento: toggle + intervallo (in alto a destra) -->\n    @if (AutoUpdate()) {\n      <div class=\"est2-autoupdate\">\n        <label class=\"est2-autoupdate__label\">\n          Aggiorna ogni\n          <input type=\"text\" maxlength=\"3\" class=\"est2-autoupdate__secs\"\n                 [ngModel]=\"seconds()\" (ngModelChange)=\"seconds.set($event)\"\n                 [ngModelOptions]=\"{ standalone: true }\"\n                 (change)=\"autoUpdateChanged()\" />\n          secondi\n        </label>\n        <label class=\"est2-switch\" title=\"Attiva/disattiva auto-aggiornamento\">\n          <input type=\"checkbox\" [ngModel]=\"autoUpdate()\"\n                 [ngModelOptions]=\"{ standalone: true }\"\n                 (ngModelChange)=\"autoUpdate.set($event); autoUpdateChanged()\" />\n          <span class=\"est2-switch__slider\"></span>\n        </label>\n      </div>\n    }\n\n    <!-- Pager superiore -->\n    @if (PagingStyle() === 'both' || PagingStyle() === 'top') {\n      <ng-container *ngTemplateOutlet=\"pager\"></ng-container>\n    }\n\n    <!-- Barra \"seleziona tutto\" (visibile solo con selezione multipla attiva e righe presenti) -->\n    @if (Selection() && !SingleSelection() && hasSelection) {\n      <div class=\"est2-selectbar\" [style.height.px]=\"selbarHeight() ? selbarHeight() + 1 : null\">\n        @if (allSelected) {\n          <span>Tutti i <strong>{{ selectedCount }}</strong> elementi sono selezionati</span>\n        } @else {\n          <span><strong>{{ selectedCount }}</strong> {{ selectedCount === 1 ? 'elemento selezionato' : 'elementi selezionati' }}</span>\n          @if (canSelectEverything) {\n            <span class=\"est2-link\" (click)=\"selectEverything()\">Seleziona tutti i {{ totalCount() }} elementi</span>\n          }\n        }\n        <span class=\"est2-selectbar__spacer\"></span>\n        <span class=\"est2-link\" (click)=\"clearSelection()\">Azzera selezione</span>\n      </div>\n    }\n\n    <div class=\"est2-scroll\" [style.max-height.px]=\"MaxHeight()\">\n      <table class=\"est2-table {{ TableClass() }}\"\n             [class.est2-table--range]=\"rangeActive()\"\n             [class.est2-table--dragging]=\"rangeDragging()\"\n             (mousedown)=\"onGridMouseDown($event)\"\n             (mouseover)=\"onGridMouseOver($event)\">\n\n        <!-- ================= HEADER ================= -->\n        @if (!HeaderHidden()) {\n          <thead #theadRef>\n            <!-- Righe di header-group multi-livello (dall'alto verso il basso) -->\n            @if (hasHeaderGroups()) {\n              @for (grow of headerGroupRows(); track $index) {\n                <tr class=\"est2-hgroup-row\">\n                  @if (Selection()) { <th class=\"est2-col-min est2-selcol\" [class.est2-pinned]=\"hasPinned()\" [style.left.px]=\"hasPinned() ? 0 : null\"></th> }\n                  @for (op of DynamicOperations(); track op.id) { <th class=\"est2-col-min\"></th> }\n                  @for (cell of grow; track cell.id; let gi = $index) {\n                    <th [attr.colspan]=\"cell.span\"\n                        [attr.data-groupid]=\"cell.isGroup ? cell.id : null\"\n                        [class.est2-hgroup]=\"cell.isGroup\"\n                        [class.est2-pinned]=\"gi < pinnedCount()\"\n                        [style.left.px]=\"gi < pinnedCount() ? pinnedLeftPx(gi) : null\"\n                        class=\"est2-hgroup-cell\">\n                      @if (cell.isGroup) {\n                        @if (cell.template) {\n                          <ng-container *ngTemplateOutlet=\"cell.template\"></ng-container>\n                        } @else {\n                          {{ cell.label }}\n                        }\n                      }\n                    </th>\n                  }\n                  @if (Removal()) { <th class=\"est2-col-min\"></th> }\n                  @if (hasChrome()) { <th class=\"est2-col-min\"></th> }\n                </tr>\n              }\n            }\n            <tr>\n              <!-- Colonna di selezione -->\n              @if (Selection()) {\n                <th class=\"est2-col-min est2-selcol\"\n                    [class.est2-pinned]=\"hasPinned()\"\n                    [style.left.px]=\"hasPinned() ? 0 : null\">\n                  @if (!SingleSelection()) {\n                    <input type=\"checkbox\" class=\"est2-check\"\n                           [checked]=\"globalCheck()\"\n                           [indeterminate]=\"selectionIndeterminate\"\n                           [disabled]=\"SelectionDisabled()\"\n                           (change)=\"toggleAll()\"\n                           aria-label=\"Seleziona tutto\" />\n                  }\n                </th>\n              }\n\n              <!-- Header da colonne (direttive / dinamica / report) -->\n              @if (usesColumns()) {\n                <!-- intestazioni vuote per le operazioni dinamiche -->\n                @for (op of DynamicOperations(); track op.id) {\n                  <th class=\"est2-col-min\"></th>\n                }\n                @for (col of visibleColumns(); track trackCol($index, col); let ci = $index) {\n                  <th [attr.data-colid]=\"col.id\"\n                      [class]=\"col.cssClass\"\n                      [class.est2-th--orderable]=\"OrderByColumn() && col.orderable\"\n                      [class.est2-col-min]=\"col.header?.thShrink\"\n                      [class.est2-col-groupstart]=\"columnGroupBoundaries().has(ci)\"\n                      [class.est2-pinned]=\"col.pinned\"\n                      [style.left.px]=\"col.pinned ? pinnedLeftPx(ci) : null\"\n                      [style.min-width.px]=\"col.pinned && col.pinnedWidth ? col.pinnedWidth : null\"\n                      [style.max-width.px]=\"col.pinned && col.pinnedWidth ? col.pinnedWidth : null\"\n                      [style.text-align]=\"col.alignment\"\n                      [style.background-color]=\"col.headerBg || null\"\n                      (click)=\"toggleSort(col)\">\n                    <span class=\"est2-th__inner\">\n                      @if (col.header?.Template) {\n                        <ng-container *ngTemplateOutlet=\"col.header!.Template!; context: col.multiProp != null ? { $implicit: col.headerText } : null\"></ng-container>\n                      } @else {\n                        {{ col.headerText }}\n                      }\n                      @if (OrderByColumn() && col.orderable && orderOf(col.id)) {\n                        <span class=\"est2-sort est2-sort--active\"\n                              [class.est2-sort--desc]=\"orderOf(col.id) === 'DESC'\">\n                          <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 15l6-6 6 6\"/></svg>\n                        </span>\n                        @if (orderIndex(col.id) > 0 && MultipleOrderingDirectives()) {\n                          <span class=\"est2-sort__badge\">{{ orderIndex(col.id) }}</span>\n                        }\n                      }\n                      <!-- Indicatore/toggle di pin (visibile se pinnata o all'hover) -->\n                      @if (ColumnsPinnable() && col.multiProp == null) {\n                        <button type=\"button\" class=\"est2-pinbtn\"\n                                [class.est2-pinbtn--on]=\"col.pinned\"\n                                [title]=\"col.pinned ? 'Sblocca colonna' : 'Blocca colonna a sinistra'\"\n                                (click)=\"togglePin(col, $event)\">\n                          <svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 17v5\"/><path d=\"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z\"/></svg>\n                        </button>\n                      }\n                    </span>\n                  </th>\n                }\n              }\n              <!-- Header da template semplice -->\n              @else if (headerRef) {\n                <ng-container *ngTemplateOutlet=\"headerRef\"></ng-container>\n              }\n\n              <!-- Colonna rimozione -->\n              @if (Removal()) { <th class=\"est2-col-min\"></th> }\n              <!-- Colonna chrome (export / gestione colonne / menu) -->\n              @if (hasChrome()) {\n                <th class=\"est2-col-min est2-chrome-th\">\n                  <div class=\"est2-chrome\">\n                    @if (Export()) {\n                      <div class=\"est2-chrome-wrap\">\n                        <button type=\"button\" class=\"est2-chrome-btn\" title=\"Esporta\" (click)=\"$event.stopPropagation(); toggleExportMenu()\">\n                          <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><path d=\"M7 10l5 5 5-5\"/><path d=\"M12 15V3\"/></svg>\n                        </button>\n                        @if (exportMenuOpen()) {\n                          <div class=\"est2-menu\" (click)=\"$event.stopPropagation()\">\n                            @if (CSVExport()) { <button type=\"button\" class=\"est2-menu-item\" (click)=\"export('CSV')\">Esporta CSV</button> }\n                            @if (XLSXExport()) { <button type=\"button\" class=\"est2-menu-item\" (click)=\"export('XLSX')\">Esporta Excel (XLSX)</button> }\n                            @if (!CSVExport() && !XLSXExport()) { <button type=\"button\" class=\"est2-menu-item\" (click)=\"export('CSV')\">Esporta CSV</button> }\n                          </div>\n                        }\n                      </div>\n                    }\n                    @if (HiddenColumns() || ColumnsOrdering()) {\n                      <button type=\"button\" class=\"est2-chrome-btn\" title=\"Colonne\" (click)=\"$event.stopPropagation(); openColumnsDialog()\">\n                        <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1\"/><path d=\"M9 3v18\"/><path d=\"M15 3v18\"/></svg>\n                      </button>\n                    }\n                    @if (CornerMenuOptions().length > 0) {\n                      <div class=\"est2-chrome-wrap\">\n                        <button type=\"button\" class=\"est2-chrome-btn\" title=\"Opzioni\" (click)=\"$event.stopPropagation(); toggleCornerMenu()\">\u22EE</button>\n                        @if (cornerMenuOpen()) {\n                          <div class=\"est2-menu\" (click)=\"$event.stopPropagation()\">\n                            @for (opt of CornerMenuOptions(); track opt.id) {\n                              <button type=\"button\" class=\"est2-menu-item\" (click)=\"cornerAction(opt.id); cornerMenuOpen.set(false)\">{{ opt.description }}</button>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </th>\n              }\n            </tr>\n          </thead>\n        }\n\n        <!-- ================= BODY ================= -->\n        @if (!BodyHidden()) {\n          <tbody>\n            @for (item of boundSource(); track trackRow($index, item); let ri = $index) {\n              @if ((!grouped() && !Hierarchy()) || item._visible) {\n              <tr [class]=\"rowClass(item)\"\n                  [class.est2-row--selected]=\"item._selected\"\n                  [class.est2-row--removed]=\"item.removed || item.deleted\"\n                  [class.est2-row--group]=\"item._group\"\n                  [class.est2-row--clickable]=\"Selection() || item._group\"\n                  [contextMenu]=\"ContextMenu || emptyMenu\"\n                  [contextMenuSubject]=\"item\"\n                  (click)=\"handleRowClick(item, $event)\">\n\n                <!-- Cella di selezione -->\n                @if (Selection()) {\n                  <td class=\"est2-col-min est2-selcol\"\n                      [class.est2-pinned]=\"hasPinned()\"\n                      [style.left.px]=\"hasPinned() ? 0 : null\">\n                    @if (item._group) {\n                      @if (!SingleSelection()) {\n                        <input type=\"checkbox\" class=\"est2-check\"\n                               [checked]=\"groupSelectionState(item) === 'all'\"\n                               [indeterminate]=\"groupSelectionState(item) === 'some'\"\n                               [disabled]=\"SelectionDisabled()\"\n                               (click)=\"$event.stopPropagation()\"\n                               (change)=\"toggleGroupSelection(item)\"\n                               aria-label=\"Seleziona gruppo\" />\n                      }\n                    } @else {\n                      <input type=\"checkbox\" class=\"est2-check\"\n                             [checked]=\"item._selected\"\n                             [indeterminate]=\"hierarchyIndeterminate(item)\"\n                             [disabled]=\"SelectionDisabled()\"\n                             (click)=\"$event.stopPropagation()\"\n                             (change)=\"toggleRow(item)\"\n                             aria-label=\"Seleziona riga\" />\n                    }\n                  </td>\n                }\n\n                <!-- Celle da colonne (direttive / dinamica / report) -->\n                @if (usesColumns()) {\n                  <!-- Operazioni dinamiche (icone a sinistra) -->\n                  @for (op of DynamicOperations(); track op.id) {\n                    <td class=\"est2-col-min est2-op-cell\">\n                      @if (!item._group && operationVisible(op, item)) {\n                        <span class=\"est2-op\" [class]=\"op.iconClass || ''\" [title]=\"op.title\"\n                              (click)=\"$event.stopPropagation(); dynamicOperation(item, op.id)\">{{ op.text }}</span>\n                      }\n                    </td>\n                  }\n                  @for (col of visibleColumns(); track trackCol($index, col); let first = $first, ci = $index) {\n                    <td [class]=\"col.cssClass\"\n                        [style.text-align]=\"col.alignment\"\n                        [style.color]=\"cellColor(item, col, 'fore')\"\n                        [style.background-color]=\"cellColor(item, col, 'back')\"\n                        [class.est2-nowrap]=\"!col.wrap\"\n                        [class.est2-col-groupstart]=\"columnGroupBoundaries().has(ci)\"\n                        [class.est2-pinned]=\"col.pinned\"\n                        [style.left.px]=\"col.pinned ? pinnedLeftPx(ci) : null\"\n                        [style.min-width.px]=\"col.pinned && col.pinnedWidth ? col.pinnedWidth : null\"\n                        [style.max-width.px]=\"col.pinned && col.pinnedWidth ? col.pinnedWidth : null\"\n                        [class.est2-td--group-key]=\"item._group && item.column === col.id\"\n                        [attr.data-r]=\"rangeActive() && !item._group ? ri : null\"\n                        [attr.data-c]=\"rangeActive() && !item._group ? ci : null\"\n                        [class.est2-cell-sel]=\"rangeActive() && inRange(ri, ci)\"\n                        [class.est2-cell-sel-t]=\"rangeActive() && inRange(ri, ci) && ri === rangeRect()!.top\"\n                        [class.est2-cell-sel-b]=\"rangeActive() && inRange(ri, ci) && ri === rangeRect()!.bottom\"\n                        [class.est2-cell-sel-l]=\"rangeActive() && inRange(ri, ci) && ci === rangeRect()!.left\"\n                        [class.est2-cell-sel-r]=\"rangeActive() && inRange(ri, ci) && ci === rangeRect()!.right\"\n                        [class.est2-cell-editing]=\"isEditing(ri, ci)\"\n                        (dblclick)=\"onCellDblClick(item, col, ri, ci)\">\n                      @if (isEditing(ri, ci)) {\n                        @if (editorFor(col); as edTpl) {\n                          <ng-container *ngTemplateOutlet=\"edTpl; context: editorContext(item, col)\"></ng-container>\n                        } @else {\n                          <ng-container *ngTemplateOutlet=\"defaultEditor; context: { $implicit: item, col: col }\"></ng-container>\n                        }\n                      } @else if (item._group) {\n                        @if (item.column === col.id) {\n                          <span class=\"est2-group-key\" [style.padding-left.px]=\"groupIndent(item)\">\n                            <span class=\"est2-group-chevron\" [class.est2-group-chevron--open]=\"item._expanded\">\n                              <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 6l6 6-6 6\"/></svg>\n                            </span>\n                            {{ groupCellDisplay(item, col) }}\n                          </span>\n                        } @else {\n                          {{ groupCellDisplay(item, col) }}\n                        }\n                      } @else {\n                        <!-- Navigatore albero nella prima colonna -->\n                        @if (Hierarchy() && first) {\n                          <span class=\"est2-hier-lead\" [style.padding-left.px]=\"hierarchyIndent(item)\">\n                            @if (item.parent) {\n                              <span class=\"est2-group-chevron est2-hier-toggle\" [class.est2-group-chevron--open]=\"item._expanded\"\n                                    (click)=\"$event.stopPropagation(); toggleHierarchyNode(item)\">\n                                <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 6l6 6-6 6\"/></svg>\n                              </span>\n                            } @else {\n                              <span class=\"est2-hier-toggle\"></span>\n                            }\n                          </span>\n                        }\n                        @if (itemCellHidden(col)) {\n                          <!-- colonna di gruppo nascosta sulla riga-oggetto -->\n                        } @else if (col.multiProp != null) {\n                          @if (col.cell?.Template) {\n                            <ng-container *ngTemplateOutlet=\"col.cell!.Template; context: { $implicit: multiCell(item, col) }\"></ng-container>\n                          } @else {\n                            {{ multiCell(item, col)?.value }}\n                          }\n                        } @else if (col.cell?.Template) {\n                          <ng-container *ngTemplateOutlet=\"col.cell!.Template; context: { $implicit: item }\"></ng-container>\n                        } @else if (col.routePath) {\n                          <a class=\"est2-link\" [routerLink]=\"routerLinkFor(item, col)\">{{ cellValue(item, col) }}</a>\n                        } @else if (col.propAccessor != null) {\n                          {{ reportCellDisplay(item, col) }}\n                        } @else if (col.type === 'enum') {\n                          {{ (cellValue(item, col) | est2_lookup : col.source).description }}\n                        } @else {\n                          {{ cellValue(item, col) | est2_format : col.type : col.format : locale }}\n                        }\n                      }\n                    </td>\n                  }\n                }\n                <!-- Celle da template semplice -->\n                @else if (bodyRef) {\n                  <ng-container *ngTemplateOutlet=\"bodyRef; context: { $implicit: item }\"></ng-container>\n                }\n\n                <!-- Rimozione (non sulle righe-gruppo) -->\n                @if (Removal()) {\n                  <td class=\"est2-col-min\">\n                    @if (!item._group && canRemove(item)) {\n                      @if (item.removed || item.deleted) {\n                        <button type=\"button\" class=\"est2-rowaction\" title=\"Ripristina\" (click)=\"abortRemoval(item)\">\u21BA</button>\n                      } @else {\n                        <button type=\"button\" class=\"est2-rowaction est2-rowaction--danger\" title=\"Rimuovi\" (click)=\"removeItem(item)\">\u2715</button>\n                      }\n                    }\n                  </td>\n                }\n                <!-- Chrome -->\n                @if (hasChrome()) { <td class=\"est2-col-min\"></td> }\n              </tr>\n              }\n            } @empty {\n              <tr>\n                <td class=\"est2-empty\" [attr.colspan]=\"totalColspan()\">Nessun elemento da visualizzare</td>\n              </tr>\n            }\n          </tbody>\n        }\n      </table>\n\n      <!-- Overlay di caricamento -->\n      @if (researchInProgress() || (firstBind() && ShowLoadingOnBootstrap())) {\n        <div class=\"est2-loading\">\n          <span class=\"est2-spinner\"></span>\n          <span>Caricamento\u2026</span>\n        </div>\n      }\n    </div>\n\n    <!-- Pager inferiore -->\n    @if (PagingStyle() === 'both' || PagingStyle() === 'bottom') {\n      <ng-container *ngTemplateOutlet=\"pager\"></ng-container>\n    }\n\n    <!-- Avviso transitorio (es. incolla con dimensioni incompatibili) -->\n    @if (notice()) {\n      <div class=\"est2-toast\" role=\"alert\">\n        <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/><path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/></svg>\n        <span>{{ notice() }}</span>\n      </div>\n    }\n\n    <!-- Dialog visibilit\u00E0 / ordine colonne -->\n    @if (columnsDialogOpen()) {\n      <div class=\"est2-dialog-backdrop\" (click)=\"closeColumnsDialog()\">\n        <div class=\"est2-dialog\" (click)=\"$event.stopPropagation()\" role=\"dialog\" aria-modal=\"true\">\n          <div class=\"est2-dialog__head\">\n            <span>\n              @if (HiddenColumns() && ColumnsOrdering()) { Visibilit\u00E0 e ordine colonne }\n              @else if (HiddenColumns()) { Visibilit\u00E0 colonne }\n              @else { Ordine colonne }\n            </span>\n            <button type=\"button\" class=\"est2-dialog__close\" (click)=\"closeColumnsDialog()\" aria-label=\"Chiudi\">\u2715</button>\n          </div>\n\n          @if (HiddenColumns()) {\n            <div class=\"est2-dialog__tools\">\n              <button type=\"button\" class=\"est2-link\" (click)=\"dialogSetAll(true)\">Mostra tutte</button>\n              <span class=\"est2-dialog__sep\">\u00B7</span>\n              <button type=\"button\" class=\"est2-link\" (click)=\"dialogSetAll(false)\">Nascondi tutte</button>\n            </div>\n          }\n\n          <ul class=\"est2-collist\">\n            @for (c of dialogCols(); track c.id; let i = $index) {\n              <li class=\"est2-collist__row\">\n                @if (HiddenColumns()) {\n                  <label class=\"est2-collist__vis\">\n                    <input type=\"checkbox\" class=\"est2-check\" [checked]=\"c.visible\" (change)=\"dialogToggle(i)\" />\n                  </label>\n                }\n                <span class=\"est2-collist__label\">{{ c.label }}</span>\n                @if (ColumnsPinnable()) {\n                  <button type=\"button\" class=\"est2-iconbtn est2-collist__pin\" [class.est2-collist__pin--on]=\"c.pinned\"\n                          [disabled]=\"c.grouped\"\n                          [title]=\"c.grouped ? 'Le colonne di un gruppo non sono bloccabili' : (c.pinned ? 'Sblocca' : 'Blocca a sinistra')\"\n                          (click)=\"dialogTogglePin(i)\">\n                    <svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 17v5\"/><path d=\"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z\"/></svg>\n                  </button>\n                }\n                @if (ColumnsOrdering()) {\n                  <span class=\"est2-collist__ord\">\n                    <button type=\"button\" class=\"est2-iconbtn\" [disabled]=\"i === 0\" title=\"Su\" (click)=\"dialogMove(i, -1)\">\u2191</button>\n                    <button type=\"button\" class=\"est2-iconbtn\" [disabled]=\"i === dialogCols().length - 1\" title=\"Gi\u00F9\" (click)=\"dialogMove(i, 1)\">\u2193</button>\n                  </span>\n                }\n              </li>\n            }\n          </ul>\n\n          <div class=\"est2-dialog__foot\">\n            <button type=\"button\" class=\"est2-btn est2-btn--ghost\" (click)=\"resetColumnsDialog()\">Ripristina</button>\n            <span class=\"est2-dialog__spacer\"></span>\n            <button type=\"button\" class=\"est2-btn est2-btn--ghost\" (click)=\"closeColumnsDialog()\">Annulla</button>\n            <button type=\"button\" class=\"est2-btn est2-btn--primary\" (click)=\"applyColumnsDialog()\">Applica</button>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<!-- Template pager riutilizzabile sopra/sotto -->\n<ng-template #pager>\n  @if (!HidePaging() && !grouped()) {\n    <es-table2-pager\n      [page]=\"currentPage()\"\n      [pages]=\"totalPages()\"\n      [total]=\"totalCount()\"\n      [itemsPerPage]=\"viewMode() ? (view()?.itemsperpageoverride ?? 15) : ArraymodeItemsPerPage()\"\n      [countLabel]=\"CountLabel()\"\n      [showCount]=\"!HidePagingCount()\"\n      [showButtons]=\"!HidePagingButtons()\"\n      [showPagingOptions]=\"!HidePagingButtons()\"\n      [allowAll]=\"AllSearch()\"\n      (pageChange)=\"goToPage($event)\"\n      (itemsPerPageChange)=\"changeItemsPerPage($event)\">\n    </es-table2-pager>\n  }\n</ng-template>\n\n<!-- Editor di cella di default (usato quando il consumer non fornisce un `*editor`) -->\n<ng-template #defaultEditor let-item let-col=\"col\">\n  @switch (col.type) {\n    @case ('enum') {\n      <select class=\"est2-editor-input\"\n              [value]=\"editDraft\"\n              (change)=\"editDraft = $any($event.target).value\"\n              (keydown.enter)=\"commitEdit(item, col)\"\n              (keydown.escape)=\"cancelEdit()\"\n              (blur)=\"commitEdit(item, col)\">\n        @for (o of col.source || []; track o.id) {\n          <option [value]=\"o.id\" [selected]=\"o.id == editDraft\">{{ o.description }}</option>\n        }\n      </select>\n    }\n    @case ('boolean') {\n      <input type=\"checkbox\" class=\"est2-editor-input est2-check\"\n             [checked]=\"editDraft === true || editDraft === 'true'\"\n             (change)=\"editDraft = $any($event.target).checked; commitEdit(item, col)\"\n             (keydown.escape)=\"cancelEdit()\" />\n    }\n    @default {\n      <input class=\"est2-editor-input\"\n             [type]=\"editorInputType(col.type)\"\n             [value]=\"editDraft\"\n             (input)=\"editDraft = $any($event.target).value\"\n             (keydown.enter)=\"commitEdit(item, col)\"\n             (keydown.escape)=\"cancelEdit()\"\n             (blur)=\"commitEdit(item, col)\" />\n    }\n  }\n</ng-template>\n\n<!-- Menu di default (nessuna operazione) usato quando il consumer non passa [ContextMenu] -->\n<context-menu #emptyMenu>\n  <ng-template contextMenuItem [passive]=\"true\"><em>Nessuna operazione disponibile\u2026</em></ng-template>\n</context-menu>\n", styles: [".est2{--est-bg: #ffffff;--est-bg-subtle: #f7f8fa;--est-bg-raised: #ffffff;--est-bg-hover: #f2f4f7;--est-bg-selected: color-mix(in srgb, var(--est-accent) 12%, transparent);--est-fg: #1a1d24;--est-fg-muted: #626b7a;--est-fg-faint: #9aa3b2;--est-border: #e6e9ef;--est-border-strong: #d3d8e0;--est-accent: #4f46e5;--est-accent-fg: #ffffff;--est-accent-weak: color-mix(in srgb, var(--est-accent) 14%, transparent);--est-danger: #dc2626;--est-warning: #d97706;--est-success: #059669;--est-shadow-sticky: 0 1px 0 var(--est-border), 0 4px 12px -8px rgba(16, 24, 40, .24);--est-shadow-pop: 0 8px 24px -6px rgba(16, 24, 40, .18), 0 2px 6px -2px rgba(16, 24, 40, .12);--est-ring: 0 0 0 3px color-mix(in srgb, var(--est-accent) 40%, transparent);--est-radius: 10px;--est-radius-sm: 6px;--est-radius-pill: 999px;--est-gap: 8px;--est-cell-py: 6px;--est-cell-px: 12px;--est-row-h: 33px;--est-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--est-fs: 13px;--est-fs-sm: 12px;--est-fw-head: 700;--est-transition: .14s cubic-bezier(.4, 0, .2, 1);--est-bg-zebra: color-mix(in srgb, var(--est-fg) 3.5%, var(--est-bg));font-family:var(--est-font);font-size:var(--est-fs);color:var(--est-fg);position:relative;display:block}@media(prefers-color-scheme:dark){.est2{--est-bg: #14161c;--est-bg-subtle: #1a1d25;--est-bg-raised: #1e222b;--est-bg-hover: #232733;--est-bg-selected: color-mix(in srgb, var(--est-accent) 26%, transparent);--est-fg: #e7eaf0;--est-fg-muted: #9aa3b2;--est-fg-faint: #6b7484;--est-border: #2a2f3a;--est-border-strong: #39404d;--est-accent: #7c74ff;--est-accent-fg: #ffffff;--est-accent-weak: color-mix(in srgb, var(--est-accent) 22%, transparent);--est-danger: #f87171;--est-warning: #fbbf24;--est-success: #34d399;--est-shadow-sticky: 0 1px 0 var(--est-border), 0 6px 16px -10px rgba(0, 0, 0, .7);--est-shadow-pop: 0 10px 28px -8px rgba(0, 0, 0, .6), 0 2px 6px -2px rgba(0, 0, 0, .5);--est-ring: 0 0 0 3px color-mix(in srgb, var(--est-accent) 55%, transparent)}}.est2.est2--dark{--est-bg: #14161c;--est-bg-subtle: #1a1d25;--est-bg-raised: #1e222b;--est-bg-hover: #232733;--est-bg-selected: color-mix(in srgb, var(--est-accent) 26%, transparent);--est-fg: #e7eaf0;--est-fg-muted: #9aa3b2;--est-fg-faint: #6b7484;--est-border: #2a2f3a;--est-border-strong: #39404d;--est-accent: #7c74ff;--est-accent-fg: #ffffff;--est-accent-weak: color-mix(in srgb, var(--est-accent) 22%, transparent);--est-danger: #f87171;--est-warning: #fbbf24;--est-success: #34d399;--est-shadow-sticky: 0 1px 0 var(--est-border), 0 6px 16px -10px rgba(0, 0, 0, .7);--est-shadow-pop: 0 10px 28px -8px rgba(0, 0, 0, .6), 0 2px 6px -2px rgba(0, 0, 0, .5);--est-ring: 0 0 0 3px color-mix(in srgb, var(--est-accent) 55%, transparent)}.est2.est2--light{--est-bg: #ffffff;--est-bg-subtle: #f7f8fa;--est-bg-raised: #ffffff;--est-bg-hover: #f2f4f7;--est-bg-selected: color-mix(in srgb, var(--est-accent) 12%, transparent);--est-fg: #1a1d24;--est-fg-muted: #626b7a;--est-fg-faint: #9aa3b2;--est-border: #e6e9ef;--est-border-strong: #d3d8e0;--est-accent: #4f46e5;--est-accent-fg: #ffffff;--est-accent-weak: color-mix(in srgb, var(--est-accent) 14%, transparent);--est-danger: #dc2626;--est-warning: #d97706;--est-success: #059669;--est-shadow-sticky: 0 1px 0 var(--est-border), 0 4px 12px -8px rgba(16, 24, 40, .24);--est-shadow-pop: 0 8px 24px -6px rgba(16, 24, 40, .18), 0 2px 6px -2px rgba(16, 24, 40, .12);--est-ring: 0 0 0 3px color-mix(in srgb, var(--est-accent) 40%, transparent)}.est2.est2--dense{--est-cell-py: 3px;--est-cell-px: 9px;--est-row-h: 27px;--est-fs: 12.5px}.est2 *,.est2 *:before,.est2 *:after{box-sizing:border-box}.est2 .est2-scroll{position:relative;width:100%;overflow:auto;border:1px solid var(--est-border);border-radius:var(--est-radius);background:var(--est-bg);-webkit-overflow-scrolling:touch}.est2 table.est2-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--est-bg)}.est2 thead th{position:sticky;top:0;z-index:3;background:var(--est-bg-subtle);color:var(--est-fg);font-weight:var(--est-fw-head);font-size:var(--est-fs);text-align:left;white-space:nowrap;padding:var(--est-cell-py) var(--est-cell-px);border-bottom:1px solid var(--est-border);box-shadow:var(--est-shadow-sticky);-webkit-user-select:none;user-select:none}.est2 thead tr.est2-hgroup-row th{font-size:var(--est-fs-sm);font-weight:700;color:var(--est-fg-muted);text-align:center;white-space:nowrap;padding:var(--est-cell-py) var(--est-cell-px);background:var(--est-bg-subtle);border-bottom:1px solid var(--est-border)}.est2 thead tr.est2-hgroup-row th.est2-hgroup{color:var(--est-fg);border-left:1px solid var(--est-border);border-right:1px solid var(--est-border)}.est2 thead tr.est2-hgroup-row th:not(.est2-hgroup){background:var(--est-bg-subtle);border-bottom-color:transparent}.est2 thead tr:last-child th.est2-col-groupstart,.est2 tbody td.est2-col-groupstart{border-left:1px solid var(--est-border)}.est2 tbody td{padding:var(--est-cell-py) var(--est-cell-px);border-bottom:1px solid var(--est-border);color:var(--est-fg);vertical-align:middle;background:transparent}.est2 tbody tr:nth-child(2n) td{background:var(--est-bg-zebra)}.est2 tbody tr:nth-child(2n) td.est2-pinned{background:var(--est-bg-zebra)}.est2 th.est2-pinned,.est2 td.est2-pinned{position:sticky;background:var(--est-bg);box-shadow:1px 0 0 var(--est-border)}.est2 .est2-selcol{width:44px;min-width:44px;max-width:44px}.est2 td.est2-pinned{z-index:3}.est2 thead th.est2-pinned,.est2 thead tr.est2-hgroup-row th.est2-pinned{z-index:6;background:var(--est-bg-subtle)}.est2 tbody tr:hover td.est2-pinned{background:color-mix(in srgb,var(--est-fg) 5%,var(--est-bg))}.est2 tbody tr.est2-row--selected td.est2-pinned{background:color-mix(in srgb,var(--est-accent) 12%,var(--est-bg))}.est2 tbody tr.est2-row--group td.est2-pinned{background:var(--est-bg-subtle)}.est2 .est2-pinbtn{display:inline-flex;align-items:center;justify-content:center;margin-left:4px;padding:2px;border:none;background:transparent;color:var(--est-fg-faint);border-radius:var(--est-radius-sm);cursor:pointer;opacity:0;transition:opacity var(--est-transition),color var(--est-transition),background var(--est-transition)}.est2 thead th:hover .est2-pinbtn{opacity:.7}.est2 .est2-pinbtn:hover{background:var(--est-bg-hover);color:var(--est-fg);opacity:1}.est2 .est2-pinbtn--on{opacity:1;color:var(--est-accent);transform:rotate(0)}.est2 thead th:hover .est2-pinbtn--on{opacity:1}.est2 .est2-collist__pin.est2-collist__pin--on{color:var(--est-accent);border-color:var(--est-accent)}.est2 tbody tr{height:var(--est-row-h);transition:background var(--est-transition)}.est2 tbody tr:last-child td{border-bottom:none}.est2 tbody tr:hover td{background:var(--est-bg-hover)}.est2 tbody tr.est2-row--selected td{background:var(--est-bg-selected)}.est2 tbody tr.est2-row--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.est2 tbody tr.est2-row--removed td{text-decoration:line-through;color:var(--est-fg-faint)}.est2 .est2-table--range tbody td[data-r]{cursor:cell}.est2 .est2-table--dragging,.est2 .est2-table--dragging tbody td{-webkit-user-select:none;user-select:none}.est2 tbody td.est2-cell-sel{background:color-mix(in srgb,var(--est-accent) 14%,transparent)}.est2 tbody td.est2-cell-sel-t{box-shadow:inset 0 2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-b{box-shadow:inset 0 -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-l{box-shadow:inset 2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-r{box-shadow:inset -2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-l{box-shadow:inset 2px 2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-r{box-shadow:inset -2px 2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-b.est2-cell-sel-l{box-shadow:inset 2px -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-b.est2-cell-sel-r{box-shadow:inset -2px -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-b{box-shadow:inset 0 2px 0 0 var(--est-accent),inset 0 -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-l.est2-cell-sel-r{box-shadow:inset 2px 0 0 0 var(--est-accent),inset -2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-b.est2-cell-sel-l{box-shadow:inset 2px 2px 0 0 var(--est-accent),inset 0 -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-b.est2-cell-sel-r{box-shadow:inset -2px 2px 0 0 var(--est-accent),inset 0 -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-l.est2-cell-sel-r{box-shadow:inset 2px 2px 0 0 var(--est-accent),inset -2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-b.est2-cell-sel-l.est2-cell-sel-r{box-shadow:inset 2px -2px 0 0 var(--est-accent),inset -2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-b.est2-cell-sel-l.est2-cell-sel-r{box-shadow:inset 2px 2px 0 0 var(--est-accent),inset -2px -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-editing{padding:2px 6px}.est2 .est2-editor-input{width:100%;box-sizing:border-box;height:calc(var(--est-row-h) - 8px);padding:2px 6px;font:inherit;color:var(--est-fg);background:var(--est-bg);border:1.5px solid var(--est-accent);border-radius:var(--est-radius-sm);outline:none}.est2 .est2-editor-input:focus-visible{box-shadow:var(--est-ring)}.est2 input.est2-editor-input[type=checkbox]{width:16px;height:16px}.est2 .est2-autoupdate{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:4px 2px 8px;font-size:var(--est-fs-sm);color:var(--est-fg-muted)}.est2 .est2-autoupdate__label{display:inline-flex;align-items:center;gap:6px}.est2 .est2-autoupdate__secs{width:44px;text-align:center;padding:3px 4px;font:inherit;color:var(--est-fg);background:var(--est-bg);border:1px solid var(--est-border);border-radius:var(--est-radius-sm);outline:none}.est2 .est2-autoupdate__secs:focus-visible{box-shadow:var(--est-ring);border-color:var(--est-accent)}.est2 .est2-switch{position:relative;display:inline-flex;width:38px;height:20px;cursor:pointer}.est2 .est2-switch input{position:absolute;opacity:0;width:0;height:0}.est2 .est2-switch__slider{flex:1;border-radius:var(--est-radius-pill);background:var(--est-border-strong);transition:background var(--est-transition)}.est2 .est2-switch__slider:before{content:\"\";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #00000040;transition:transform var(--est-transition)}.est2 .est2-switch input:checked+.est2-switch__slider{background:var(--est-accent)}.est2 .est2-switch input:checked+.est2-switch__slider:before{transform:translate(18px)}.est2 .est2-switch input:focus-visible+.est2-switch__slider{box-shadow:var(--est-ring)}.est2 .est2-toast{position:absolute;left:50%;bottom:14px;transform:translate(-50%);z-index:20;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 24px);padding:8px 14px;font-size:13px;font-weight:500;color:#fff;background:#b91c1c;border-radius:var(--est-radius);box-shadow:0 6px 20px #00000040;animation:est2-toast-in .16s ease-out}.est2 .est2-toast svg{flex:0 0 auto}@keyframes est2-toast-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}@media(prefers-reduced-motion:reduce){.est2 .est2-toast{animation:none}}.est2 tbody tr.est2-row--group{cursor:pointer;-webkit-user-select:none;user-select:none}.est2 tbody tr.est2-row--group td{background:var(--est-bg-subtle);font-weight:600;color:var(--est-fg);border-bottom:1px solid var(--est-border)}.est2 tbody tr.est2-row--group:hover td{background:var(--est-bg-hover)}.est2 .est2-td--group-key{color:var(--est-fg)}.est2 .est2-group-key{display:inline-flex;align-items:center;gap:6px}.est2 .est2-group-chevron{display:inline-flex;color:var(--est-fg-muted);transition:transform var(--est-transition)}.est2 .est2-group-chevron--open{transform:rotate(90deg)}.est2 .est2-hier-lead{display:inline-flex;align-items:center;vertical-align:middle;margin-right:4px}.est2 .est2-hier-toggle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none}.est2 .est2-group-chevron.est2-hier-toggle{cursor:pointer;border-radius:var(--est-radius-sm);transition:transform var(--est-transition),background var(--est-transition),color var(--est-transition)}.est2 .est2-group-chevron.est2-hier-toggle:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 th.est2-th--orderable{cursor:pointer;transition:color var(--est-transition)}.est2 th.est2-th--orderable:hover{color:var(--est-fg)}.est2 .est2-th__inner{display:inline-flex;align-items:center;gap:6px}.est2 .est2-sort{display:inline-flex;width:14px;height:14px;opacity:.35;transition:opacity var(--est-transition),transform var(--est-transition)}.est2 .est2-sort--active{opacity:1;color:var(--est-accent)}.est2 .est2-sort--desc{transform:rotate(180deg)}.est2 .est2-sort__badge{font-size:9px;font-weight:700;color:var(--est-accent);margin-left:2px}.est2 .est2-check{appearance:none;width:16px;height:16px;border:1.5px solid var(--est-border-strong);border-radius:var(--est-radius-sm);background:var(--est-bg);cursor:pointer;position:relative;transition:border-color var(--est-transition),background var(--est-transition);vertical-align:middle;flex:none}.est2 .est2-check:hover{border-color:var(--est-accent)}.est2 .est2-check:checked{background:var(--est-accent);border-color:var(--est-accent)}.est2 .est2-check:checked:after{content:\"\";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid var(--est-accent-fg);border-width:0 2px 2px 0;transform:rotate(45deg)}.est2 .est2-check:focus-visible{outline:none;box-shadow:var(--est-ring)}.est2 .est2-check:indeterminate{background:var(--est-accent);border-color:var(--est-accent)}.est2 .est2-check:indeterminate:after{content:\"\";position:absolute;left:3px;top:6px;width:8px;height:2px;background:var(--est-accent-fg);transform:none;border:none}.est2 th.est2-col-min,.est2 td.est2-col-min{width:1%;white-space:nowrap}.est2 .est2-wrap{position:relative}.est2 .est2-selectbar{position:absolute;top:0;left:0;right:0;z-index:15;display:flex;align-items:center;gap:12px;padding:9px 14px;font-size:var(--est-fs-sm);color:var(--est-fg);background:var(--est-bg-subtle);border:none;border-radius:var(--est-radius) var(--est-radius) 0 0;box-shadow:inset 3px 0 0 var(--est-accent)}.est2 .est2-selectbar strong{color:var(--est-fg);font-weight:700}.est2 .est2-selectbar__spacer{flex:1 1 auto}.est2 .est2-link{color:var(--est-accent);cursor:pointer;font-weight:600}.est2 .est2-link:hover{text-decoration:underline}.est2 .est2-rowaction{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--est-radius-sm);border:none;background:transparent;color:var(--est-fg-faint);cursor:pointer;transition:background var(--est-transition),color var(--est-transition)}.est2 .est2-rowaction:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-rowaction--danger:hover{color:var(--est-danger)}.est2 .est2-op-cell{text-align:center}.est2 .est2-op{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 6px;border-radius:var(--est-radius-sm);color:var(--est-accent);cursor:pointer;font-size:var(--est-fs-sm);transition:background var(--est-transition)}.est2 .est2-op:hover{background:var(--est-accent-weak)}.est2 .est2-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;background:color-mix(in srgb,var(--est-bg) 70%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:5;color:var(--est-fg-muted);font-size:var(--est-fs-sm)}.est2 .est2-spinner{width:16px;height:16px;border:2px solid var(--est-border-strong);border-top-color:var(--est-accent);border-radius:50%;animation:est2-spin .7s linear infinite}@keyframes est2-spin{to{transform:rotate(360deg)}}.est2 .est2-nowrap{white-space:nowrap}.est2 .est2-cornermenu{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--est-radius-sm);cursor:pointer;color:var(--est-fg-muted);transition:background var(--est-transition)}.est2 .est2-cornermenu:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-chrome-th{position:relative}.est2 .est2-chrome{display:inline-flex;align-items:center;gap:2px}.est2 .est2-chrome-wrap{position:relative;display:inline-flex}.est2 .est2-chrome-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;border-radius:var(--est-radius-sm);color:var(--est-fg-muted);cursor:pointer;font-size:16px;line-height:1;transition:background var(--est-transition),color var(--est-transition)}.est2 .est2-chrome-btn:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:30;min-width:180px;padding:4px;background:var(--est-bg);border:1px solid var(--est-border);border-radius:var(--est-radius);box-shadow:0 8px 24px #0000002e;display:flex;flex-direction:column}.est2 .est2-menu-item{display:block;width:100%;padding:8px 10px;border:none;background:transparent;text-align:left;font:inherit;color:var(--est-fg);border-radius:var(--est-radius-sm);cursor:pointer}.est2 .est2-menu-item:hover{background:var(--est-bg-hover)}.est2 .est2-dialog-backdrop{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px;background:color-mix(in srgb,#000 32%,transparent)}.est2 .est2-dialog{width:380px;max-width:100%;max-height:100%;display:flex;flex-direction:column;background:var(--est-bg);color:var(--est-fg);border:1px solid var(--est-border);border-radius:var(--est-radius);box-shadow:0 16px 48px #0000004d;overflow:hidden}.est2 .est2-dialog__head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-weight:700;border-bottom:1px solid var(--est-border)}.est2 .est2-dialog__close{border:none;background:transparent;cursor:pointer;color:var(--est-fg-muted);font-size:15px;line-height:1;padding:4px;border-radius:var(--est-radius-sm)}.est2 .est2-dialog__close:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-dialog__tools{padding:8px 14px;font-size:var(--est-fs-sm);border-bottom:1px solid var(--est-border)}.est2 .est2-dialog__tools .est2-link{border:none;background:none;padding:0;font:inherit;font-weight:600}.est2 .est2-dialog__sep{margin:0 6px;color:var(--est-fg-faint)}.est2 .est2-collist{list-style:none;margin:0;padding:6px;overflow-y:auto}.est2 .est2-collist__row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--est-radius-sm)}.est2 .est2-collist__row:hover{background:var(--est-bg-hover)}.est2 .est2-collist__vis{display:inline-flex}.est2 .est2-collist__label{flex:1 1 auto}.est2 .est2-collist__ord{display:inline-flex;gap:4px}.est2 .est2-iconbtn{width:26px;height:26px;border:1px solid var(--est-border);background:var(--est-bg);border-radius:var(--est-radius-sm);color:var(--est-fg-muted);cursor:pointer}.est2 .est2-iconbtn:hover:not(:disabled){background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-iconbtn:disabled{opacity:.4;cursor:default}.est2 .est2-dialog__foot{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--est-border)}.est2 .est2-dialog__spacer{flex:1 1 auto}.est2 .est2-btn{padding:7px 14px;border-radius:var(--est-radius-sm);font:inherit;font-weight:600;cursor:pointer;border:1px solid transparent}.est2 .est2-btn--ghost{background:transparent;color:var(--est-fg);border-color:var(--est-border)}.est2 .est2-btn--ghost:hover{background:var(--est-bg-hover)}.est2 .est2-btn--primary{background:var(--est-accent);color:var(--est-accent-fg)}.est2 .est2-btn--primary:hover{filter:brightness(1.05)}.est2 .est2-empty{padding:48px 16px;text-align:center;color:var(--est-fg-faint);font-size:var(--est-fs-sm)}.ngx-contextmenu{--ctx-bg: #ffffff;--ctx-fg: #1a1d24;--ctx-muted: #626b7a;--ctx-border: #e6e9ef;--ctx-hover: #f2f4f7;--ctx-accent: #4f46e5;--ctx-shadow: 0 10px 28px -8px rgba(16, 24, 40, .22), 0 2px 8px -3px rgba(16, 24, 40, .14);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.ngx-contextmenu .dropdown-menu{display:block;min-width:200px;margin:0;padding:6px;list-style:none;background:var(--ctx-bg);border:1px solid var(--ctx-border);border-radius:12px;box-shadow:var(--ctx-shadow);animation:est2-ctx-in .12s cubic-bezier(.16,1,.3,1)}.ngx-contextmenu li{list-style:none;margin:0}.ngx-contextmenu li>a{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:7px;color:var(--ctx-fg);font-size:13.5px;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .12s ease,color .12s ease}.ngx-contextmenu li>a:hover,.ngx-contextmenu li>a:focus{background:var(--ctx-hover);color:var(--ctx-fg);text-decoration:none;outline:none}.ngx-contextmenu li.divider,.ngx-contextmenu li[role=separator]{height:1px;margin:6px 8px;padding:0;background:var(--ctx-border)}.ngx-contextmenu li.disabled>a,.ngx-contextmenu li[aria-disabled=true]>a{color:var(--ctx-muted);opacity:.55;pointer-events:none}@media(prefers-color-scheme:dark){.ngx-contextmenu{--ctx-bg: #1e222b;--ctx-fg: #e7eaf0;--ctx-muted: #9aa3b2;--ctx-border: #2a2f3a;--ctx-hover: #232733;--ctx-accent: #7c74ff;--ctx-shadow: 0 12px 30px -8px rgba(0, 0, 0, .6), 0 2px 8px -3px rgba(0, 0, 0, .5)}}@keyframes est2-ctx-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.ngx-contextmenu .dropdown-menu{animation:none}}\n"], dependencies: [{ kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i12.ContextMenuAttachDirective, selector: "[contextMenu]", inputs: ["contextMenuSubject", "contextMenu"] }, { kind: "component", type: i12.ContextMenuComponent, selector: "context-menu", inputs: ["menuClass", "autoFocus", "useBootstrap4", "disabled"], outputs: ["close", "open"] }, { kind: "directive", type: i12.ContextMenuItemDirective, selector: "[contextMenuItem]", inputs: ["subMenu", "divider", "enabled", "passive", "visible"], outputs: ["execute"] }, { kind: "component", type: EsTable2PagerComponent, selector: "es-table2-pager", inputs: ["page", "pages", "total", "itemsPerPage", "countLabel", "showCount", "showButtons", "showPagingOptions", "allowAll"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "pipe", type: Est2FormatPipe, name: "est2_format" }, { kind: "pipe", type: Est2LookupPipe, name: "est2_lookup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: EsTable2Component, isStandalone: false, selector: "es-table2", inputs: { ContextMenu: { classPropertyName: "ContextMenu", publicName: "ContextMenu", isSignal: false, isRequired: false, transformFunction: null }, _Selection: { classPropertyName: "_Selection", publicName: "Selection", isSignal: true, isRequired: false, transformFunction: null }, SingleSelection: { classPropertyName: "SingleSelection", publicName: "SingleSelection", isSignal: true, isRequired: false, transformFunction: null }, SelectionDisabled: { classPropertyName: "SelectionDisabled", publicName: "SelectionDisabled", isSignal: true, isRequired: false, transformFunction: null }, _SelectAll: { classPropertyName: "_SelectAll", publicName: "SelectAll", isSignal: true, isRequired: false, transformFunction: null }, _UseSelectionCache: { classPropertyName: "_UseSelectionCache", publicName: "UseSelectionCache", isSignal: true, isRequired: false, transformFunction: null }, _ShiftClick: { classPropertyName: "_ShiftClick", publicName: "ShiftClick", isSignal: true, isRequired: false, transformFunction: null }, _OrderByColumn: { classPropertyName: "_OrderByColumn", publicName: "OrderByColumn", isSignal: true, isRequired: false, transformFunction: null }, MultipleOrderingDirectives: { classPropertyName: "MultipleOrderingDirectives", publicName: "MultipleOrderingDirectives", isSignal: true, isRequired: false, transformFunction: null }, Removal: { classPropertyName: "Removal", publicName: "Removal", isSignal: true, isRequired: false, transformFunction: null }, RemovalCondition: { classPropertyName: "RemovalCondition", publicName: "RemovalCondition", isSignal: true, isRequired: false, transformFunction: null }, RowClassAssigner: { classPropertyName: "RowClassAssigner", publicName: "RowClassAssigner", isSignal: false, isRequired: false, transformFunction: null }, _HidePaging: { classPropertyName: "_HidePaging", publicName: "HidePaging", isSignal: true, isRequired: false, transformFunction: null }, _HidePagingCount: { classPropertyName: "_HidePagingCount", publicName: "HidePagingCount", isSignal: true, isRequired: false, transformFunction: null }, _HidePagingButtons: { classPropertyName: "_HidePagingButtons", publicName: "HidePagingButtons", isSignal: true, isRequired: false, transformFunction: null }, _AllSearch: { classPropertyName: "_AllSearch", publicName: "AllSearch", isSignal: true, isRequired: false, transformFunction: null }, _PagingStyle: { classPropertyName: "_PagingStyle", publicName: "PagingStyle", isSignal: true, isRequired: false, transformFunction: null }, _ArraymodeItemsPerPage: { classPropertyName: "_ArraymodeItemsPerPage", publicName: "ArraymodeItemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, _UseArrayModePaging: { classPropertyName: "_UseArrayModePaging", publicName: "UseArrayModePaging", isSignal: true, isRequired: false, transformFunction: null }, CountLabel: { classPropertyName: "CountLabel", publicName: "CountLabel", isSignal: true, isRequired: false, transformFunction: null }, Height: { classPropertyName: "Height", publicName: "Height", isSignal: true, isRequired: false, transformFunction: null }, MaxHeight: { classPropertyName: "MaxHeight", publicName: "MaxHeight", isSignal: true, isRequired: false, transformFunction: null }, EmptySpaceBackgroundColor: { classPropertyName: "EmptySpaceBackgroundColor", publicName: "EmptySpaceBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, HighCellDensity: { classPropertyName: "HighCellDensity", publicName: "HighCellDensity", isSignal: true, isRequired: false, transformFunction: null }, HeaderHidden: { classPropertyName: "HeaderHidden", publicName: "HeaderHidden", isSignal: true, isRequired: false, transformFunction: null }, BodyHidden: { classPropertyName: "BodyHidden", publicName: "BodyHidden", isSignal: true, isRequired: false, transformFunction: null }, ShowLoadingOnBootstrap: { classPropertyName: "ShowLoadingOnBootstrap", publicName: "ShowLoadingOnBootstrap", isSignal: true, isRequired: false, transformFunction: null }, _DefaultAlignment: { classPropertyName: "_DefaultAlignment", publicName: "DefaultAlignment", isSignal: true, isRequired: false, transformFunction: null }, _TableClass: { classPropertyName: "_TableClass", publicName: "TableClass", isSignal: true, isRequired: false, transformFunction: null }, _ContainerClass: { classPropertyName: "_ContainerClass", publicName: "ContainerClass", isSignal: true, isRequired: false, transformFunction: null }, EsTableHandledSearch: { classPropertyName: "EsTableHandledSearch", publicName: "EsTableHandledSearch", isSignal: true, isRequired: false, transformFunction: null }, SearchThrottle: { classPropertyName: "SearchThrottle", publicName: "SearchThrottle", isSignal: true, isRequired: false, transformFunction: null }, _ColumnsResizable: { classPropertyName: "_ColumnsResizable", publicName: "ColumnsResizable", isSignal: true, isRequired: false, transformFunction: null }, _ColumnsPinnable: { classPropertyName: "_ColumnsPinnable", publicName: "ColumnsPinnable", isSignal: true, isRequired: false, transformFunction: null }, _HiddenColumns: { classPropertyName: "_HiddenColumns", publicName: "HiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, _ColumnsOrdering: { classPropertyName: "_ColumnsOrdering", publicName: "ColumnsOrdering", isSignal: true, isRequired: false, transformFunction: null }, _Export: { classPropertyName: "_Export", publicName: "Export", isSignal: true, isRequired: false, transformFunction: null }, XLSXExport: { classPropertyName: "XLSXExport", publicName: "XLSXExport", isSignal: true, isRequired: false, transformFunction: null }, CSVExport: { classPropertyName: "CSVExport", publicName: "CSVExport", isSignal: true, isRequired: false, transformFunction: null }, ExportFileName: { classPropertyName: "ExportFileName", publicName: "ExportFileName", isSignal: true, isRequired: false, transformFunction: null }, ExportOnlyVisibleColumns: { classPropertyName: "ExportOnlyVisibleColumns", publicName: "ExportOnlyVisibleColumns", isSignal: true, isRequired: false, transformFunction: null }, ExportFunction: { classPropertyName: "ExportFunction", publicName: "ExportFunction", isSignal: false, isRequired: false, transformFunction: null }, CornerMenuOptions: { classPropertyName: "CornerMenuOptions", publicName: "CornerMenuOptions", isSignal: true, isRequired: false, transformFunction: null }, DynamicOperations: { classPropertyName: "DynamicOperations", publicName: "DynamicOperations", isSignal: true, isRequired: false, transformFunction: null }, _DynamicRowColumnsDefinition: { classPropertyName: "_DynamicRowColumnsDefinition", publicName: "DynamicRowColumnsDefinition", isSignal: true, isRequired: false, transformFunction: null }, Hierarchy: { classPropertyName: "Hierarchy", publicName: "Hierarchy", isSignal: true, isRequired: false, transformFunction: null }, _ParentKey: { classPropertyName: "_ParentKey", publicName: "ParentKey", isSignal: true, isRequired: false, transformFunction: null }, _OwnKey: { classPropertyName: "_OwnKey", publicName: "OwnKey", isSignal: true, isRequired: false, transformFunction: null }, _AutoSortHierarchy: { classPropertyName: "_AutoSortHierarchy", publicName: "AutoSortHierarchy", isSignal: true, isRequired: false, transformFunction: null }, StartsExpanded: { classPropertyName: "StartsExpanded", publicName: "StartsExpanded", isSignal: true, isRequired: false, transformFunction: null }, CascadeSelection: { classPropertyName: "CascadeSelection", publicName: "CascadeSelection", isSignal: true, isRequired: false, transformFunction: null }, _SavePreferences: { classPropertyName: "_SavePreferences", publicName: "SavePreferences", isSignal: true, isRequired: false, transformFunction: null }, Name: { classPropertyName: "Name", publicName: "Name", isSignal: true, isRequired: false, transformFunction: null }, _RowGroupingPagingStyle: { classPropertyName: "_RowGroupingPagingStyle", publicName: "RowGroupingPagingStyle", isSignal: true, isRequired: false, transformFunction: null }, _ShowItemGroupsColumns: { classPropertyName: "_ShowItemGroupsColumns", publicName: "ShowItemGroupsColumns", isSignal: true, isRequired: false, transformFunction: null }, Editable: { classPropertyName: "Editable", publicName: "Editable", isSignal: true, isRequired: false, transformFunction: null }, RangeSelection: { classPropertyName: "RangeSelection", publicName: "RangeSelection", isSignal: true, isRequired: false, transformFunction: null }, ItemSourceProperty: { classPropertyName: "ItemSourceProperty", publicName: "ItemSourceProperty", isSignal: true, isRequired: false, transformFunction: null }, HasHeaderGroup: { classPropertyName: "HasHeaderGroup", publicName: "HasHeaderGroup", isSignal: true, isRequired: false, transformFunction: null }, HasSecondaryHeaderGroup: { classPropertyName: "HasSecondaryHeaderGroup", publicName: "HasSecondaryHeaderGroup", isSignal: true, isRequired: false, transformFunction: null }, SearchView: { classPropertyName: "SearchView", publicName: "SearchView", isSignal: true, isRequired: false, transformFunction: null }, _AutoUpdate: { classPropertyName: "_AutoUpdate", publicName: "AutoUpdate", isSignal: true, isRequired: false, transformFunction: null }, EsThTdProvider: { classPropertyName: "EsThTdProvider", publicName: "EsThTdProvider", isSignal: false, isRequired: false, transformFunction: null }, globalCheck: { classPropertyName: "globalCheck", publicName: "globalCheck", isSignal: true, isRequired: false, transformFunction: null }, autoUpdate: { classPropertyName: "autoUpdate", publicName: "autoUpdate", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, researchInProgress: { classPropertyName: "researchInProgress", publicName: "researchInProgress", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onOrderChanged: "onOrderChanged", onSearchRequest: "onSearchRequest", onSelectionChanged: "onSelectionChanged", onRemoval: "onRemoval", onAbortRemoval: "onAbortRemoval", onModelChange: "onModelChange", onOpenContextMenu: "onOpenContextMenu", onCornerAction: "onCornerAction", onDynamicOperation: "onDynamicOperation", globalCheck: "globalCheckChange", autoUpdate: "autoUpdateChange", seconds: "secondsChange", researchInProgress: "researchInProgressChange" }, host: { listeners: { "document:mouseup": "onResizeEnd()", "document:copy": "onDocCopy($event)", "document:paste": "onDocPaste($event)", "document:click": "onDocClick()", "document:mousemove": "onResizeMove($event)" }, properties: { "class.est2": "this.hostClass", "class.est2--dense": "this.denseClass" } }, queries: [{ propertyName: "headerRef", first: true, predicate: ["header"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true }, { propertyName: "thDirectives", predicate: EsThDirective }, { propertyName: "tdDirectives", predicate: EsTdDirective }, { propertyName: "editorDirectives", predicate: EsTdEditorDirective }, { propertyName: "thTdProviders", predicate: ThTdProvider }], viewQueries: [{ propertyName: "tableEmptyMenu", first: true, predicate: ["emptyMenu"], descendants: true, static: true }, { propertyName: "theadRef", first: true, predicate: ["theadRef"], descendants: true }], ngImport: i0, template: "@if (view()) {\n  <div class=\"est2-wrap {{ ContainerClass() }}\"\n       [style.height]=\"Height()\"\n       [style.background-color]=\"EmptySpaceBackgroundColor() || null\">\n\n    <!-- Auto-aggiornamento: toggle + intervallo (in alto a destra) -->\n    @if (AutoUpdate()) {\n      <div class=\"est2-autoupdate\">\n        <label class=\"est2-autoupdate__label\">\n          Aggiorna ogni\n          <input type=\"text\" maxlength=\"3\" class=\"est2-autoupdate__secs\"\n                 [ngModel]=\"seconds()\" (ngModelChange)=\"seconds.set($event)\"\n                 [ngModelOptions]=\"{ standalone: true }\"\n                 (change)=\"autoUpdateChanged()\" />\n          secondi\n        </label>\n        <label class=\"est2-switch\" title=\"Attiva/disattiva auto-aggiornamento\">\n          <input type=\"checkbox\" [ngModel]=\"autoUpdate()\"\n                 [ngModelOptions]=\"{ standalone: true }\"\n                 (ngModelChange)=\"autoUpdate.set($event); autoUpdateChanged()\" />\n          <span class=\"est2-switch__slider\"></span>\n        </label>\n      </div>\n    }\n\n    <!-- Pager superiore -->\n    @if (PagingStyle() === 'both' || PagingStyle() === 'top') {\n      <ng-container *ngTemplateOutlet=\"pager\"></ng-container>\n    }\n\n    <!-- Barra \"seleziona tutto\" (visibile solo con selezione multipla attiva e righe presenti) -->\n    @if (Selection() && !SingleSelection() && hasSelection) {\n      <div class=\"est2-selectbar\" [style.height.px]=\"selbarHeight() ? selbarHeight() + 1 : null\">\n        @if (allSelected) {\n          <span>Tutti i <strong>{{ selectedCount }}</strong> elementi sono selezionati</span>\n        } @else {\n          <span><strong>{{ selectedCount }}</strong> {{ selectedCount === 1 ? 'elemento selezionato' : 'elementi selezionati' }}</span>\n          @if (canSelectEverything) {\n            <span class=\"est2-link\" (click)=\"selectEverything()\">Seleziona tutti i {{ totalCount() }} elementi</span>\n          }\n        }\n        <span class=\"est2-selectbar__spacer\"></span>\n        <span class=\"est2-link\" (click)=\"clearSelection()\">Azzera selezione</span>\n      </div>\n    }\n\n    <div class=\"est2-scroll\" [style.max-height.px]=\"MaxHeight()\">\n      <table class=\"est2-table {{ TableClass() }}\"\n             [class.est2-table--range]=\"rangeActive()\"\n             [class.est2-table--dragging]=\"rangeDragging()\"\n             (mousedown)=\"onGridMouseDown($event)\"\n             (mouseover)=\"onGridMouseOver($event)\">\n\n        <!-- ================= HEADER ================= -->\n        @if (!HeaderHidden()) {\n          <thead #theadRef>\n            <!-- Righe di header-group multi-livello (dall'alto verso il basso) -->\n            @if (hasHeaderGroups()) {\n              @for (grow of headerGroupRows(); track $index) {\n                <tr class=\"est2-hgroup-row\">\n                  @if (Selection()) { <th class=\"est2-col-min est2-selcol\" [class.est2-pinned]=\"hasPinned()\" [style.left.px]=\"hasPinned() ? 0 : null\"></th> }\n                  @for (op of DynamicOperations(); track op.id) { <th class=\"est2-col-min\"></th> }\n                  @for (cell of grow; track cell.id; let gi = $index) {\n                    <th [attr.colspan]=\"cell.span\"\n                        [attr.data-groupid]=\"cell.isGroup ? cell.id : null\"\n                        [class.est2-hgroup]=\"cell.isGroup\"\n                        [class.est2-pinned]=\"gi < pinnedCount()\"\n                        [style.left.px]=\"gi < pinnedCount() ? pinnedLeftPx(gi) : null\"\n                        class=\"est2-hgroup-cell\">\n                      @if (cell.isGroup) {\n                        @if (cell.template) {\n                          <ng-container *ngTemplateOutlet=\"cell.template\"></ng-container>\n                        } @else {\n                          {{ cell.label }}\n                        }\n                      }\n                    </th>\n                  }\n                  @if (Removal()) { <th class=\"est2-col-min\"></th> }\n                  @if (hasChrome()) { <th class=\"est2-col-min\"></th> }\n                </tr>\n              }\n            }\n            <tr>\n              <!-- Colonna di selezione -->\n              @if (Selection()) {\n                <th class=\"est2-col-min est2-selcol\"\n                    [class.est2-pinned]=\"hasPinned()\"\n                    [style.left.px]=\"hasPinned() ? 0 : null\">\n                  @if (!SingleSelection()) {\n                    <input type=\"checkbox\" class=\"est2-check\"\n                           [checked]=\"globalCheck()\"\n                           [indeterminate]=\"selectionIndeterminate\"\n                           [disabled]=\"SelectionDisabled()\"\n                           (change)=\"toggleAll()\"\n                           aria-label=\"Seleziona tutto\" />\n                  }\n                </th>\n              }\n\n              <!-- Header da colonne (direttive / dinamica / report) -->\n              @if (usesColumns()) {\n                <!-- intestazioni vuote per le operazioni dinamiche -->\n                @for (op of DynamicOperations(); track op.id) {\n                  <th class=\"est2-col-min\"></th>\n                }\n                @for (col of visibleColumns(); track trackCol($index, col); let ci = $index) {\n                  <th [attr.data-colid]=\"col.id\"\n                      [class]=\"col.headerClass\"\n                      [class.est2-th--orderable]=\"OrderByColumn() && col.orderable\"\n                      [class.est2-col-min]=\"col.header?.thShrink\"\n                      [class.est2-col-groupstart]=\"columnGroupBoundaries().has(ci)\"\n                      [class.est2-pinned]=\"col.pinned\"\n                      [style.left.px]=\"col.pinned ? pinnedLeftPx(ci) : null\"\n                      [style.width.px]=\"col.pinned ? pinnedWidthPx(col) : null\"\n                      [style.min-width.px]=\"col.pinned ? pinnedWidthPx(col) : null\"\n                      [style.max-width.px]=\"col.pinned ? pinnedWidthPx(col) : null\"\n                      [style.text-align]=\"col.alignment\"\n                      [style.background-color]=\"col.headerBg || null\"\n                      (click)=\"toggleSort(col)\">\n                    <span class=\"est2-th__inner\">\n                      @if (col.header?.Template) {\n                        <ng-container *ngTemplateOutlet=\"col.header!.Template!; context: col.multiProp != null ? { $implicit: col.headerText } : null\"></ng-container>\n                      } @else {\n                        {{ col.headerText }}\n                      }\n                      @if (OrderByColumn() && col.orderable && orderOf(col.id)) {\n                        <span class=\"est2-sort est2-sort--active\"\n                              [class.est2-sort--desc]=\"orderOf(col.id) === 'DESC'\">\n                          <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 15l6-6 6 6\"/></svg>\n                        </span>\n                        @if (orderIndex(col.id) > 0 && MultipleOrderingDirectives()) {\n                          <span class=\"est2-sort__badge\">{{ orderIndex(col.id) }}</span>\n                        }\n                      }\n                      <!-- Indicatore/toggle di pin (visibile se pinnata o all'hover) -->\n                      @if (ColumnsPinnable() && col.multiProp == null) {\n                        <button type=\"button\" class=\"est2-pinbtn\"\n                                [class.est2-pinbtn--on]=\"col.pinned\"\n                                [title]=\"col.pinned ? 'Sblocca colonna' : 'Blocca colonna a sinistra'\"\n                                (click)=\"togglePin(col, $event)\">\n                          <svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 17v5\"/><path d=\"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z\"/></svg>\n                        </button>\n                      }\n                    </span>\n                    <!-- Handle di ridimensionamento (colonne pinnate, gated da ColumnsResizable) -->\n                    @if (ColumnsResizable() && col.pinned) {\n                      <span class=\"est2-resize-handle\" title=\"Trascina per ridimensionare\"\n                            (mousedown)=\"startColumnResize(col, $event)\"\n                            (click)=\"$event.stopPropagation()\"></span>\n                    }\n                  </th>\n                }\n              }\n              <!-- Header da template semplice -->\n              @else if (headerRef) {\n                <ng-container *ngTemplateOutlet=\"headerRef\"></ng-container>\n              }\n\n              <!-- Colonna rimozione -->\n              @if (Removal()) { <th class=\"est2-col-min\"></th> }\n              <!-- Colonna chrome (export / gestione colonne / menu) -->\n              @if (hasChrome()) {\n                <th class=\"est2-col-min est2-chrome-th\">\n                  <div class=\"est2-chrome\">\n                    @if (Export()) {\n                      <div class=\"est2-chrome-wrap\">\n                        <button type=\"button\" class=\"est2-chrome-btn\" title=\"Esporta\" (click)=\"$event.stopPropagation(); toggleExportMenu()\">\n                          <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><path d=\"M7 10l5 5 5-5\"/><path d=\"M12 15V3\"/></svg>\n                        </button>\n                        @if (exportMenuOpen()) {\n                          <div class=\"est2-menu\" (click)=\"$event.stopPropagation()\">\n                            @if (CSVExport()) { <button type=\"button\" class=\"est2-menu-item\" (click)=\"export('CSV')\">Esporta CSV</button> }\n                            @if (XLSXExport()) { <button type=\"button\" class=\"est2-menu-item\" (click)=\"export('XLSX')\">Esporta Excel (XLSX)</button> }\n                            @if (!CSVExport() && !XLSXExport()) { <button type=\"button\" class=\"est2-menu-item\" (click)=\"export('CSV')\">Esporta CSV</button> }\n                          </div>\n                        }\n                      </div>\n                    }\n                    @if (HiddenColumns() || ColumnsOrdering()) {\n                      <button type=\"button\" class=\"est2-chrome-btn\" title=\"Colonne\" (click)=\"$event.stopPropagation(); openColumnsDialog()\">\n                        <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1\"/><path d=\"M9 3v18\"/><path d=\"M15 3v18\"/></svg>\n                      </button>\n                    }\n                    @if (CornerMenuOptions().length > 0) {\n                      <div class=\"est2-chrome-wrap\">\n                        <button type=\"button\" class=\"est2-chrome-btn\" title=\"Opzioni\" (click)=\"$event.stopPropagation(); toggleCornerMenu()\">\u22EE</button>\n                        @if (cornerMenuOpen()) {\n                          <div class=\"est2-menu\" (click)=\"$event.stopPropagation()\">\n                            @for (opt of CornerMenuOptions(); track opt.id) {\n                              <button type=\"button\" class=\"est2-menu-item\" (click)=\"cornerAction(opt.id); cornerMenuOpen.set(false)\">{{ opt.description }}</button>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </th>\n              }\n            </tr>\n          </thead>\n        }\n\n        <!-- ================= BODY ================= -->\n        @if (!BodyHidden()) {\n          <tbody>\n            @for (item of boundSource(); track trackRow($index, item); let ri = $index) {\n              @if ((!grouped() && !Hierarchy()) || item._visible) {\n              <tr [class]=\"rowClass(item)\"\n                  [class.est2-row--selected]=\"item._selected\"\n                  [class.est2-row--removed]=\"item.removed || item.deleted\"\n                  [class.est2-row--group]=\"item._group\"\n                  [class.est2-row--clickable]=\"Selection() || item._group\"\n                  [contextMenu]=\"ContextMenu || emptyMenu\"\n                  [contextMenuSubject]=\"item\"\n                  (click)=\"handleRowClick(item, $event)\">\n\n                <!-- Cella di selezione -->\n                @if (Selection()) {\n                  <td class=\"est2-col-min est2-selcol\"\n                      [class.est2-pinned]=\"hasPinned()\"\n                      [style.left.px]=\"hasPinned() ? 0 : null\">\n                    @if (item._group) {\n                      @if (!SingleSelection()) {\n                        <input type=\"checkbox\" class=\"est2-check\"\n                               [checked]=\"groupSelectionState(item) === 'all'\"\n                               [indeterminate]=\"groupSelectionState(item) === 'some'\"\n                               [disabled]=\"SelectionDisabled()\"\n                               (click)=\"$event.stopPropagation()\"\n                               (change)=\"toggleGroupSelection(item)\"\n                               aria-label=\"Seleziona gruppo\" />\n                      }\n                    } @else {\n                      <input type=\"checkbox\" class=\"est2-check\"\n                             [checked]=\"item._selected\"\n                             [indeterminate]=\"hierarchyIndeterminate(item)\"\n                             [disabled]=\"SelectionDisabled()\"\n                             (click)=\"$event.stopPropagation()\"\n                             (change)=\"toggleRow(item)\"\n                             aria-label=\"Seleziona riga\" />\n                    }\n                  </td>\n                }\n\n                <!-- Celle da colonne (direttive / dinamica / report) -->\n                @if (usesColumns()) {\n                  <!-- Operazioni dinamiche (icone a sinistra) -->\n                  @for (op of DynamicOperations(); track op.id) {\n                    <td class=\"est2-col-min est2-op-cell\">\n                      @if (!item._group && operationVisible(op, item)) {\n                        <span class=\"est2-op\" [class]=\"op.iconClass || ''\" [title]=\"op.title\"\n                              (click)=\"$event.stopPropagation(); dynamicOperation(item, op.id)\">{{ op.text }}</span>\n                      }\n                    </td>\n                  }\n                  @for (col of visibleColumns(); track trackCol($index, col); let first = $first, ci = $index) {\n                    <td [class]=\"col.cssClass\"\n                        [style.text-align]=\"col.alignment\"\n                        [style.color]=\"cellColor(item, col, 'fore')\"\n                        [style.background-color]=\"cellColor(item, col, 'back')\"\n                        [class.est2-nowrap]=\"!col.wrap\"\n                        [class.est2-col-groupstart]=\"columnGroupBoundaries().has(ci)\"\n                        [class.est2-pinned]=\"col.pinned\"\n                        [style.left.px]=\"col.pinned ? pinnedLeftPx(ci) : null\"\n                        [style.width.px]=\"col.pinned ? pinnedWidthPx(col) : null\"\n                        [style.min-width.px]=\"col.pinned ? pinnedWidthPx(col) : null\"\n                        [style.max-width.px]=\"col.pinned ? pinnedWidthPx(col) : null\"\n                        (mouseenter)=\"onCellHover($event)\"\n                        [class.est2-td--group-key]=\"item._group && item.column === col.id\"\n                        [attr.data-r]=\"rangeActive() && !item._group ? ri : null\"\n                        [attr.data-c]=\"rangeActive() && !item._group ? ci : null\"\n                        [class.est2-cell-sel]=\"rangeActive() && inRange(ri, ci)\"\n                        [class.est2-cell-sel-t]=\"rangeActive() && inRange(ri, ci) && ri === rangeRect()!.top\"\n                        [class.est2-cell-sel-b]=\"rangeActive() && inRange(ri, ci) && ri === rangeRect()!.bottom\"\n                        [class.est2-cell-sel-l]=\"rangeActive() && inRange(ri, ci) && ci === rangeRect()!.left\"\n                        [class.est2-cell-sel-r]=\"rangeActive() && inRange(ri, ci) && ci === rangeRect()!.right\"\n                        [class.est2-cell-editing]=\"isEditing(ri, ci)\"\n                        (dblclick)=\"onCellDblClick(item, col, ri, ci)\">\n                      @if (isEditing(ri, ci)) {\n                        @if (editorFor(col); as edTpl) {\n                          <ng-container *ngTemplateOutlet=\"edTpl; context: editorContext(item, col)\"></ng-container>\n                        } @else {\n                          <ng-container *ngTemplateOutlet=\"defaultEditor; context: { $implicit: item, col: col }\"></ng-container>\n                        }\n                      } @else if (item._group) {\n                        @if (item.column === col.id) {\n                          <span class=\"est2-group-key\" [style.padding-left.px]=\"groupIndent(item)\">\n                            <span class=\"est2-group-chevron\" [class.est2-group-chevron--open]=\"item._expanded\">\n                              <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 6l6 6-6 6\"/></svg>\n                            </span>\n                            {{ groupCellDisplay(item, col) }}\n                          </span>\n                        } @else {\n                          {{ groupCellDisplay(item, col) }}\n                        }\n                      } @else {\n                        <!-- Navigatore albero nella prima colonna -->\n                        @if (Hierarchy() && first) {\n                          <span class=\"est2-hier-lead\" [style.padding-left.px]=\"hierarchyIndent(item)\">\n                            @if (item.parent) {\n                              <span class=\"est2-group-chevron est2-hier-toggle\" [class.est2-group-chevron--open]=\"item._expanded\"\n                                    (click)=\"$event.stopPropagation(); toggleHierarchyNode(item)\">\n                                <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 6l6 6-6 6\"/></svg>\n                              </span>\n                            } @else {\n                              <span class=\"est2-hier-toggle\"></span>\n                            }\n                          </span>\n                        }\n                        @if (itemCellHidden(col)) {\n                          <!-- colonna di gruppo nascosta sulla riga-oggetto -->\n                        } @else if (col.multiProp != null) {\n                          @if (col.cell?.Template) {\n                            <ng-container *ngTemplateOutlet=\"col.cell!.Template; context: { $implicit: multiCell(item, col) }\"></ng-container>\n                          } @else {\n                            {{ multiCell(item, col)?.value }}\n                          }\n                        } @else if (col.cell?.Template) {\n                          <ng-container *ngTemplateOutlet=\"col.cell!.Template; context: { $implicit: item }\"></ng-container>\n                        } @else if (col.routePath) {\n                          <a class=\"est2-link\" [routerLink]=\"routerLinkFor(item, col)\">{{ cellValue(item, col) }}</a>\n                        } @else if (col.propAccessor != null) {\n                          {{ reportCellDisplay(item, col) }}\n                        } @else if (col.type === 'enum') {\n                          {{ (cellValue(item, col) | est2_lookup : col.source).description }}\n                        } @else {\n                          {{ cellValue(item, col) | est2_format : col.type : col.format : locale }}\n                        }\n                      }\n                    </td>\n                  }\n                }\n                <!-- Celle da template semplice -->\n                @else if (bodyRef) {\n                  <ng-container *ngTemplateOutlet=\"bodyRef; context: { $implicit: item }\"></ng-container>\n                }\n\n                <!-- Rimozione (non sulle righe-gruppo) -->\n                @if (Removal()) {\n                  <td class=\"est2-col-min\">\n                    @if (!item._group && canRemove(item)) {\n                      @if (item.removed || item.deleted) {\n                        <button type=\"button\" class=\"est2-rowaction\" title=\"Ripristina\" (click)=\"abortRemoval(item)\">\u21BA</button>\n                      } @else {\n                        <button type=\"button\" class=\"est2-rowaction est2-rowaction--danger\" title=\"Rimuovi\" (click)=\"removeItem(item)\">\u2715</button>\n                      }\n                    }\n                  </td>\n                }\n                <!-- Chrome -->\n                @if (hasChrome()) { <td class=\"est2-col-min\"></td> }\n              </tr>\n              }\n            } @empty {\n              <tr>\n                <td class=\"est2-empty\" [attr.colspan]=\"totalColspan()\">Nessun elemento da visualizzare</td>\n              </tr>\n            }\n          </tbody>\n        }\n      </table>\n\n      <!-- Overlay di caricamento -->\n      @if (researchInProgress() || (firstBind() && ShowLoadingOnBootstrap())) {\n        <div class=\"est2-loading\">\n          <span class=\"est2-spinner\"></span>\n          <span>Caricamento\u2026</span>\n        </div>\n      }\n    </div>\n\n    <!-- Pager inferiore -->\n    @if (PagingStyle() === 'both' || PagingStyle() === 'bottom') {\n      <ng-container *ngTemplateOutlet=\"pager\"></ng-container>\n    }\n\n    <!-- Avviso transitorio (es. incolla con dimensioni incompatibili) -->\n    @if (notice()) {\n      <div class=\"est2-toast\" role=\"alert\">\n        <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/><path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/></svg>\n        <span>{{ notice() }}</span>\n      </div>\n    }\n\n    <!-- Dialog visibilit\u00E0 / ordine colonne -->\n    @if (columnsDialogOpen()) {\n      <div class=\"est2-dialog-backdrop\" (click)=\"closeColumnsDialog()\">\n        <div class=\"est2-dialog\" (click)=\"$event.stopPropagation()\" role=\"dialog\" aria-modal=\"true\">\n          <div class=\"est2-dialog__head\">\n            <span>\n              @if (HiddenColumns() && ColumnsOrdering()) { Visibilit\u00E0 e ordine colonne }\n              @else if (HiddenColumns()) { Visibilit\u00E0 colonne }\n              @else { Ordine colonne }\n            </span>\n            <button type=\"button\" class=\"est2-dialog__close\" (click)=\"closeColumnsDialog()\" aria-label=\"Chiudi\">\u2715</button>\n          </div>\n\n          @if (HiddenColumns()) {\n            <div class=\"est2-dialog__tools\">\n              <button type=\"button\" class=\"est2-link\" (click)=\"dialogSetAll(true)\">Mostra tutte</button>\n              <span class=\"est2-dialog__sep\">\u00B7</span>\n              <button type=\"button\" class=\"est2-link\" (click)=\"dialogSetAll(false)\">Nascondi tutte</button>\n            </div>\n          }\n\n          <ul class=\"est2-collist\">\n            @for (c of dialogCols(); track c.id; let i = $index) {\n              <li class=\"est2-collist__row\"\n                  [attr.draggable]=\"ColumnsOrdering() ? true : null\"\n                  [class.est2-collist__row--drag]=\"ColumnsOrdering()\"\n                  [class.est2-collist__row--dragging]=\"dragIndex() === i\"\n                  [class.est2-collist__row--drop-above]=\"dragOverIndex() === i && dragIndex() !== null && dragIndex()! > i\"\n                  [class.est2-collist__row--drop-below]=\"dragOverIndex() === i && dragIndex() !== null && dragIndex()! < i\"\n                  (dragstart)=\"dialogDragStart(i, $event)\"\n                  (dragover)=\"dialogDragOver(i, $event)\"\n                  (drop)=\"dialogDrop(i, $event)\"\n                  (dragend)=\"dialogDragEnd()\">\n                @if (ColumnsOrdering()) {\n                  <span class=\"est2-collist__grip\" title=\"Trascina per riordinare\" aria-hidden=\"true\">\n                    <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"currentColor\"><circle cx=\"9\" cy=\"6\" r=\"1.6\"/><circle cx=\"15\" cy=\"6\" r=\"1.6\"/><circle cx=\"9\" cy=\"12\" r=\"1.6\"/><circle cx=\"15\" cy=\"12\" r=\"1.6\"/><circle cx=\"9\" cy=\"18\" r=\"1.6\"/><circle cx=\"15\" cy=\"18\" r=\"1.6\"/></svg>\n                  </span>\n                }\n                @if (HiddenColumns()) {\n                  <label class=\"est2-collist__vis\">\n                    <input type=\"checkbox\" class=\"est2-check\" [checked]=\"c.visible\" (change)=\"dialogToggle(i)\" />\n                  </label>\n                }\n                <span class=\"est2-collist__label\">{{ c.label }}</span>\n                @if (ColumnsPinnable()) {\n                  <button type=\"button\" class=\"est2-iconbtn est2-collist__pin\" [class.est2-collist__pin--on]=\"c.pinned\"\n                          [disabled]=\"c.grouped\"\n                          [title]=\"c.grouped ? 'Le colonne di un gruppo non sono bloccabili' : (c.pinned ? 'Sblocca' : 'Blocca a sinistra')\"\n                          (click)=\"dialogTogglePin(i)\">\n                    <svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 17v5\"/><path d=\"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z\"/></svg>\n                  </button>\n                }\n                @if (ColumnsOrdering()) {\n                  <span class=\"est2-collist__ord\">\n                    <button type=\"button\" class=\"est2-iconbtn\" [disabled]=\"i === 0\" title=\"Su\" (click)=\"dialogMove(i, -1)\">\u2191</button>\n                    <button type=\"button\" class=\"est2-iconbtn\" [disabled]=\"i === dialogCols().length - 1\" title=\"Gi\u00F9\" (click)=\"dialogMove(i, 1)\">\u2193</button>\n                  </span>\n                }\n              </li>\n            }\n          </ul>\n\n          <div class=\"est2-dialog__foot\">\n            <button type=\"button\" class=\"est2-btn est2-btn--ghost\" (click)=\"resetColumnsDialog()\">Ripristina</button>\n            <span class=\"est2-dialog__spacer\"></span>\n            <button type=\"button\" class=\"est2-btn est2-btn--ghost\" (click)=\"closeColumnsDialog()\">Annulla</button>\n            <button type=\"button\" class=\"est2-btn est2-btn--primary\" (click)=\"applyColumnsDialog()\">Applica</button>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<!-- Template pager riutilizzabile sopra/sotto -->\n<ng-template #pager>\n  @if (!HidePaging() && !grouped()) {\n    <es-table2-pager\n      [page]=\"currentPage()\"\n      [pages]=\"totalPages()\"\n      [total]=\"totalCount()\"\n      [itemsPerPage]=\"viewMode() ? (view()?.itemsperpageoverride ?? 15) : ArraymodeItemsPerPage()\"\n      [countLabel]=\"CountLabel()\"\n      [showCount]=\"!HidePagingCount()\"\n      [showButtons]=\"!HidePagingButtons()\"\n      [showPagingOptions]=\"!HidePagingButtons()\"\n      [allowAll]=\"AllSearch()\"\n      (pageChange)=\"goToPage($event)\"\n      (itemsPerPageChange)=\"changeItemsPerPage($event)\">\n    </es-table2-pager>\n  }\n</ng-template>\n\n<!-- Editor di cella di default (usato quando il consumer non fornisce un `*editor`) -->\n<ng-template #defaultEditor let-item let-col=\"col\">\n  @switch (col.type) {\n    @case ('enum') {\n      <select class=\"est2-editor-input\"\n              [value]=\"editDraft\"\n              (change)=\"editDraft = $any($event.target).value\"\n              (keydown.enter)=\"commitEdit(item, col)\"\n              (keydown.escape)=\"cancelEdit()\"\n              (blur)=\"commitEdit(item, col)\">\n        @for (o of col.source || []; track o.id) {\n          <option [value]=\"o.id\" [selected]=\"o.id == editDraft\">{{ o.description }}</option>\n        }\n      </select>\n    }\n    @case ('boolean') {\n      <input type=\"checkbox\" class=\"est2-editor-input est2-check\"\n             [checked]=\"editDraft === true || editDraft === 'true'\"\n             (change)=\"editDraft = $any($event.target).checked; commitEdit(item, col)\"\n             (keydown.escape)=\"cancelEdit()\" />\n    }\n    @default {\n      <input class=\"est2-editor-input\"\n             [type]=\"editorInputType(col.type)\"\n             [value]=\"editDraft\"\n             (input)=\"editDraft = $any($event.target).value\"\n             (keydown.enter)=\"commitEdit(item, col)\"\n             (keydown.escape)=\"cancelEdit()\"\n             (blur)=\"commitEdit(item, col)\" />\n    }\n  }\n</ng-template>\n\n<!-- Menu di default (nessuna operazione) usato quando il consumer non passa [ContextMenu] -->\n<context-menu #emptyMenu>\n  <ng-template contextMenuItem [passive]=\"true\"><em>Nessuna operazione disponibile\u2026</em></ng-template>\n</context-menu>\n", styles: [".est2{--est-bg: #ffffff;--est-bg-subtle: #f7f8fa;--est-bg-raised: #ffffff;--est-bg-hover: #f2f4f7;--est-bg-selected: color-mix(in srgb, var(--est-accent) 12%, transparent);--est-fg: #1a1d24;--est-fg-muted: #626b7a;--est-fg-faint: #9aa3b2;--est-border: #e6e9ef;--est-border-strong: #d3d8e0;--est-accent: #4f46e5;--est-accent-fg: #ffffff;--est-accent-weak: color-mix(in srgb, var(--est-accent) 14%, transparent);--est-danger: #dc2626;--est-warning: #d97706;--est-success: #059669;--est-shadow-sticky: 0 1px 0 var(--est-border), 0 4px 12px -8px rgba(16, 24, 40, .24);--est-shadow-pop: 0 8px 24px -6px rgba(16, 24, 40, .18), 0 2px 6px -2px rgba(16, 24, 40, .12);--est-ring: 0 0 0 3px color-mix(in srgb, var(--est-accent) 40%, transparent);--est-radius: 10px;--est-radius-sm: 6px;--est-radius-pill: 999px;--est-gap: 8px;--est-cell-py: 6px;--est-cell-px: 12px;--est-row-h: 33px;--est-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--est-fs: 13px;--est-fs-sm: 12px;--est-fw-head: 700;--est-transition: .14s cubic-bezier(.4, 0, .2, 1);--est-bg-zebra: color-mix(in srgb, var(--est-fg) 3.5%, var(--est-bg));font-family:var(--est-font);font-size:var(--est-fs);color:var(--est-fg);position:relative;display:block}@media(prefers-color-scheme:dark){.est2{--est-bg: #14161c;--est-bg-subtle: #1a1d25;--est-bg-raised: #1e222b;--est-bg-hover: #232733;--est-bg-selected: color-mix(in srgb, var(--est-accent) 26%, transparent);--est-fg: #e7eaf0;--est-fg-muted: #9aa3b2;--est-fg-faint: #6b7484;--est-border: #2a2f3a;--est-border-strong: #39404d;--est-accent: #7c74ff;--est-accent-fg: #ffffff;--est-accent-weak: color-mix(in srgb, var(--est-accent) 22%, transparent);--est-danger: #f87171;--est-warning: #fbbf24;--est-success: #34d399;--est-shadow-sticky: 0 1px 0 var(--est-border), 0 6px 16px -10px rgba(0, 0, 0, .7);--est-shadow-pop: 0 10px 28px -8px rgba(0, 0, 0, .6), 0 2px 6px -2px rgba(0, 0, 0, .5);--est-ring: 0 0 0 3px color-mix(in srgb, var(--est-accent) 55%, transparent)}}.est2.est2--dark{--est-bg: #14161c;--est-bg-subtle: #1a1d25;--est-bg-raised: #1e222b;--est-bg-hover: #232733;--est-bg-selected: color-mix(in srgb, var(--est-accent) 26%, transparent);--est-fg: #e7eaf0;--est-fg-muted: #9aa3b2;--est-fg-faint: #6b7484;--est-border: #2a2f3a;--est-border-strong: #39404d;--est-accent: #7c74ff;--est-accent-fg: #ffffff;--est-accent-weak: color-mix(in srgb, var(--est-accent) 22%, transparent);--est-danger: #f87171;--est-warning: #fbbf24;--est-success: #34d399;--est-shadow-sticky: 0 1px 0 var(--est-border), 0 6px 16px -10px rgba(0, 0, 0, .7);--est-shadow-pop: 0 10px 28px -8px rgba(0, 0, 0, .6), 0 2px 6px -2px rgba(0, 0, 0, .5);--est-ring: 0 0 0 3px color-mix(in srgb, var(--est-accent) 55%, transparent)}.est2.est2--light{--est-bg: #ffffff;--est-bg-subtle: #f7f8fa;--est-bg-raised: #ffffff;--est-bg-hover: #f2f4f7;--est-bg-selected: color-mix(in srgb, var(--est-accent) 12%, transparent);--est-fg: #1a1d24;--est-fg-muted: #626b7a;--est-fg-faint: #9aa3b2;--est-border: #e6e9ef;--est-border-strong: #d3d8e0;--est-accent: #4f46e5;--est-accent-fg: #ffffff;--est-accent-weak: color-mix(in srgb, var(--est-accent) 14%, transparent);--est-danger: #dc2626;--est-warning: #d97706;--est-success: #059669;--est-shadow-sticky: 0 1px 0 var(--est-border), 0 4px 12px -8px rgba(16, 24, 40, .24);--est-shadow-pop: 0 8px 24px -6px rgba(16, 24, 40, .18), 0 2px 6px -2px rgba(16, 24, 40, .12);--est-ring: 0 0 0 3px color-mix(in srgb, var(--est-accent) 40%, transparent)}.est2.est2--dense{--est-cell-py: 3px;--est-cell-px: 9px;--est-row-h: 27px;--est-fs: 12.5px}.est2 *,.est2 *:before,.est2 *:after{box-sizing:border-box}.est2 .est2-scroll{position:relative;width:100%;overflow:auto;border:1px solid var(--est-border);border-radius:var(--est-radius);background:var(--est-bg);-webkit-overflow-scrolling:touch}.est2 table.est2-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--est-bg)}.est2 thead th{position:sticky;top:0;z-index:3;background:var(--est-bg-subtle);color:var(--est-fg);font-weight:var(--est-fw-head);font-size:var(--est-fs);text-align:left;white-space:nowrap;padding:var(--est-cell-py) var(--est-cell-px);border-bottom:1px solid var(--est-border);box-shadow:var(--est-shadow-sticky);-webkit-user-select:none;user-select:none}.est2 thead tr.est2-hgroup-row th{font-size:var(--est-fs-sm);font-weight:700;color:var(--est-fg-muted);text-align:center;white-space:nowrap;padding:var(--est-cell-py) var(--est-cell-px);background:var(--est-bg-subtle);border-bottom:1px solid var(--est-border)}.est2 thead tr.est2-hgroup-row th.est2-hgroup{color:var(--est-fg);border-left:1px solid var(--est-border);border-right:1px solid var(--est-border)}.est2 thead tr.est2-hgroup-row th:not(.est2-hgroup){background:var(--est-bg-subtle);border-bottom-color:transparent}.est2 thead tr:last-child th.est2-col-groupstart,.est2 tbody td.est2-col-groupstart{border-left:1px solid var(--est-border)}.est2 tbody td{padding:var(--est-cell-py) var(--est-cell-px);border-bottom:1px solid var(--est-border);color:var(--est-fg);vertical-align:middle;background:transparent}.est2 tbody tr:nth-child(2n) td{background:var(--est-bg-zebra)}.est2 tbody tr:nth-child(2n) td.est2-pinned{background:var(--est-bg-zebra)}.est2 th.est2-pinned,.est2 td.est2-pinned{position:sticky;background:var(--est-bg);box-shadow:1px 0 0 var(--est-border)}.est2 thead th.est2-pinned{position:sticky}.est2 .est2-resize-handle{position:absolute;top:0;right:-3px;width:10px;height:100%;cursor:col-resize;z-index:2;touch-action:none;-webkit-user-select:none;user-select:none}.est2 .est2-resize-handle:after{content:\"\";position:absolute;top:28%;bottom:28%;right:3px;width:2px;border-radius:2px;background:color-mix(in srgb,var(--est-fg) 30%,transparent);transition:background var(--est-transition),top var(--est-transition),bottom var(--est-transition)}.est2 .est2-resize-handle:hover:after{background:var(--est-accent);top:15%;bottom:15%}.est2 thead th.est2-pinned .est2-resize-handle:active:after{background:var(--est-accent);top:6%;bottom:6%}.est2 td.est2-pinned{overflow:hidden;text-overflow:ellipsis}.est2 .est2-selcol{width:44px;min-width:44px;max-width:44px}.est2 td.est2-pinned{z-index:3}.est2 thead th.est2-pinned,.est2 thead tr.est2-hgroup-row th.est2-pinned{z-index:6;background:var(--est-bg-subtle)}.est2 tbody tr:hover td.est2-pinned{background:color-mix(in srgb,var(--est-fg) 5%,var(--est-bg))}.est2 tbody tr.est2-row--selected td.est2-pinned{background:color-mix(in srgb,var(--est-accent) 12%,var(--est-bg))}.est2 tbody tr.est2-row--group td.est2-pinned{background:var(--est-bg-subtle)}.est2 .est2-pinbtn{display:inline-flex;align-items:center;justify-content:center;margin-left:4px;padding:2px;border:none;background:transparent;color:var(--est-fg-faint);border-radius:var(--est-radius-sm);cursor:pointer;opacity:0;transition:opacity var(--est-transition),color var(--est-transition),background var(--est-transition)}.est2 thead th:hover .est2-pinbtn{opacity:.7}.est2 .est2-pinbtn:hover{background:var(--est-bg-hover);color:var(--est-fg);opacity:1}.est2 .est2-pinbtn--on{opacity:1;color:var(--est-accent);transform:rotate(0)}.est2 thead th:hover .est2-pinbtn--on{opacity:1}.est2 .est2-collist__pin.est2-collist__pin--on{color:var(--est-accent);border-color:var(--est-accent)}.est2 tbody tr{height:var(--est-row-h);transition:background var(--est-transition)}.est2 tbody tr:last-child td{border-bottom:none}.est2 tbody tr:hover td{background:var(--est-bg-hover)}.est2 tbody tr.est2-row--selected td{background:var(--est-bg-selected)}.est2 tbody tr.est2-row--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.est2 tbody tr.est2-row--removed td{text-decoration:line-through;color:var(--est-fg-faint)}.est2 .est2-table--range tbody td[data-r]{cursor:cell}.est2 .est2-table--dragging,.est2 .est2-table--dragging tbody td{-webkit-user-select:none;user-select:none}.est2 tbody td.est2-cell-sel{background:color-mix(in srgb,var(--est-accent) 14%,transparent)}.est2 tbody td.est2-cell-sel-t{box-shadow:inset 0 2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-b{box-shadow:inset 0 -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-l{box-shadow:inset 2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-r{box-shadow:inset -2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-l{box-shadow:inset 2px 2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-r{box-shadow:inset -2px 2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-b.est2-cell-sel-l{box-shadow:inset 2px -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-b.est2-cell-sel-r{box-shadow:inset -2px -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-b{box-shadow:inset 0 2px 0 0 var(--est-accent),inset 0 -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-l.est2-cell-sel-r{box-shadow:inset 2px 0 0 0 var(--est-accent),inset -2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-b.est2-cell-sel-l{box-shadow:inset 2px 2px 0 0 var(--est-accent),inset 0 -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-b.est2-cell-sel-r{box-shadow:inset -2px 2px 0 0 var(--est-accent),inset 0 -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-l.est2-cell-sel-r{box-shadow:inset 2px 2px 0 0 var(--est-accent),inset -2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-b.est2-cell-sel-l.est2-cell-sel-r{box-shadow:inset 2px -2px 0 0 var(--est-accent),inset -2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-b.est2-cell-sel-l.est2-cell-sel-r{box-shadow:inset 2px 2px 0 0 var(--est-accent),inset -2px -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-editing{padding:2px 6px}.est2 .est2-editor-input{width:100%;box-sizing:border-box;height:calc(var(--est-row-h) - 8px);padding:2px 6px;font:inherit;color:var(--est-fg);background:var(--est-bg);border:1.5px solid var(--est-accent);border-radius:var(--est-radius-sm);outline:none}.est2 .est2-editor-input:focus-visible{box-shadow:var(--est-ring)}.est2 input.est2-editor-input[type=checkbox]{width:16px;height:16px}.est2 .est2-autoupdate{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:4px 2px 8px;font-size:var(--est-fs-sm);color:var(--est-fg-muted)}.est2 .est2-autoupdate__label{display:inline-flex;align-items:center;gap:6px}.est2 .est2-autoupdate__secs{width:44px;text-align:center;padding:3px 4px;font:inherit;color:var(--est-fg);background:var(--est-bg);border:1px solid var(--est-border);border-radius:var(--est-radius-sm);outline:none}.est2 .est2-autoupdate__secs:focus-visible{box-shadow:var(--est-ring);border-color:var(--est-accent)}.est2 .est2-switch{position:relative;display:inline-flex;width:38px;height:20px;cursor:pointer}.est2 .est2-switch input{position:absolute;opacity:0;width:0;height:0}.est2 .est2-switch__slider{flex:1;border-radius:var(--est-radius-pill);background:var(--est-border-strong);transition:background var(--est-transition)}.est2 .est2-switch__slider:before{content:\"\";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #00000040;transition:transform var(--est-transition)}.est2 .est2-switch input:checked+.est2-switch__slider{background:var(--est-accent)}.est2 .est2-switch input:checked+.est2-switch__slider:before{transform:translate(18px)}.est2 .est2-switch input:focus-visible+.est2-switch__slider{box-shadow:var(--est-ring)}.est2 .est2-toast{position:absolute;left:50%;bottom:14px;transform:translate(-50%);z-index:20;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 24px);padding:8px 14px;font-size:13px;font-weight:500;color:#fff;background:#b91c1c;border-radius:var(--est-radius);box-shadow:0 6px 20px #00000040;animation:est2-toast-in .16s ease-out}.est2 .est2-toast svg{flex:0 0 auto}@keyframes est2-toast-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}@media(prefers-reduced-motion:reduce){.est2 .est2-toast{animation:none}}.est2 tbody tr.est2-row--group{cursor:pointer;-webkit-user-select:none;user-select:none}.est2 tbody tr.est2-row--group td{background:var(--est-bg-subtle);font-weight:600;color:var(--est-fg);border-bottom:1px solid var(--est-border)}.est2 tbody tr.est2-row--group:hover td{background:var(--est-bg-hover)}.est2 .est2-td--group-key{color:var(--est-fg)}.est2 .est2-group-key{display:inline-flex;align-items:center;gap:6px}.est2 .est2-group-chevron{display:inline-flex;color:var(--est-fg-muted);transition:transform var(--est-transition)}.est2 .est2-group-chevron--open{transform:rotate(90deg)}.est2 .est2-hier-lead{display:inline-flex;align-items:center;vertical-align:middle;margin-right:4px}.est2 .est2-hier-toggle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none}.est2 .est2-group-chevron.est2-hier-toggle{cursor:pointer;border-radius:var(--est-radius-sm);transition:transform var(--est-transition),background var(--est-transition),color var(--est-transition)}.est2 .est2-group-chevron.est2-hier-toggle:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 th.est2-th--orderable{cursor:pointer;transition:color var(--est-transition)}.est2 th.est2-th--orderable:hover{color:var(--est-fg)}.est2 .est2-th__inner{display:inline-flex;align-items:center;gap:6px}.est2 .est2-sort{display:inline-flex;width:14px;height:14px;opacity:.35;transition:opacity var(--est-transition),transform var(--est-transition)}.est2 .est2-sort--active{opacity:1;color:var(--est-accent)}.est2 .est2-sort--desc{transform:rotate(180deg)}.est2 .est2-sort__badge{font-size:9px;font-weight:700;color:var(--est-accent);margin-left:2px}.est2 .est2-check{appearance:none;width:16px;height:16px;border:1.5px solid var(--est-border-strong);border-radius:var(--est-radius-sm);background:var(--est-bg);cursor:pointer;position:relative;transition:border-color var(--est-transition),background var(--est-transition);vertical-align:middle;flex:none}.est2 .est2-check:hover{border-color:var(--est-accent)}.est2 .est2-check:checked{background:var(--est-accent);border-color:var(--est-accent)}.est2 .est2-check:checked:after{content:\"\";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid var(--est-accent-fg);border-width:0 2px 2px 0;transform:rotate(45deg)}.est2 .est2-check:focus-visible{outline:none;box-shadow:var(--est-ring)}.est2 .est2-check:indeterminate{background:var(--est-accent);border-color:var(--est-accent)}.est2 .est2-check:indeterminate:after{content:\"\";position:absolute;left:3px;top:6px;width:8px;height:2px;background:var(--est-accent-fg);transform:none;border:none}.est2 th.est2-col-min,.est2 td.est2-col-min{width:1%;white-space:nowrap}.est2 .est2-wrap{position:relative}.est2 .est2-selectbar{position:absolute;top:0;left:0;right:0;z-index:15;display:flex;align-items:center;gap:12px;padding:9px 14px;font-size:var(--est-fs-sm);color:var(--est-fg);background:var(--est-bg-subtle);border:none;border-radius:var(--est-radius) var(--est-radius) 0 0;box-shadow:inset 3px 0 0 var(--est-accent)}.est2 .est2-selectbar strong{color:var(--est-fg);font-weight:700}.est2 .est2-selectbar__spacer{flex:1 1 auto}.est2 .est2-link{color:var(--est-accent);cursor:pointer;font-weight:600}.est2 .est2-link:hover{text-decoration:underline}.est2 .est2-rowaction{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--est-radius-sm);border:none;background:transparent;color:var(--est-fg-faint);cursor:pointer;transition:background var(--est-transition),color var(--est-transition)}.est2 .est2-rowaction:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-rowaction--danger:hover{color:var(--est-danger)}.est2 .est2-op-cell{text-align:center}.est2 .est2-op{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 6px;border-radius:var(--est-radius-sm);color:var(--est-accent);cursor:pointer;font-size:var(--est-fs-sm);transition:background var(--est-transition)}.est2 .est2-op:hover{background:var(--est-accent-weak)}.est2 .est2-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;background:color-mix(in srgb,var(--est-bg) 70%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:5;color:var(--est-fg-muted);font-size:var(--est-fs-sm)}.est2 .est2-spinner{width:16px;height:16px;border:2px solid var(--est-border-strong);border-top-color:var(--est-accent);border-radius:50%;animation:est2-spin .7s linear infinite}@keyframes est2-spin{to{transform:rotate(360deg)}}.est2 .est2-nowrap{white-space:nowrap}.est2 .est2-cornermenu{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--est-radius-sm);cursor:pointer;color:var(--est-fg-muted);transition:background var(--est-transition)}.est2 .est2-cornermenu:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-chrome-th{position:relative}.est2 .est2-chrome{display:inline-flex;align-items:center;gap:2px}.est2 .est2-chrome-wrap{position:relative;display:inline-flex}.est2 .est2-chrome-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;border-radius:var(--est-radius-sm);color:var(--est-fg-muted);cursor:pointer;font-size:16px;line-height:1;transition:background var(--est-transition),color var(--est-transition)}.est2 .est2-chrome-btn:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:30;min-width:180px;padding:4px;background:var(--est-bg);border:1px solid var(--est-border);border-radius:var(--est-radius);box-shadow:0 8px 24px #0000002e;display:flex;flex-direction:column}.est2 .est2-menu-item{display:block;width:100%;padding:8px 10px;border:none;background:transparent;text-align:left;font:inherit;color:var(--est-fg);border-radius:var(--est-radius-sm);cursor:pointer}.est2 .est2-menu-item:hover{background:var(--est-bg-hover)}.est2 .est2-dialog-backdrop{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px;background:color-mix(in srgb,#000 32%,transparent)}.est2 .est2-dialog{width:520px;max-width:calc(100vw - 32px);max-height:100%;display:flex;flex-direction:column;background:var(--est-bg);color:var(--est-fg);border:1px solid var(--est-border);border-radius:var(--est-radius);box-shadow:0 16px 48px #0000004d;overflow:hidden}.est2 .est2-dialog__head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-weight:700;border-bottom:1px solid var(--est-border)}.est2 .est2-dialog__close{border:none;background:transparent;cursor:pointer;color:var(--est-fg-muted);font-size:15px;line-height:1;padding:4px;border-radius:var(--est-radius-sm)}.est2 .est2-dialog__close:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-dialog__tools{padding:8px 14px;font-size:var(--est-fs-sm);border-bottom:1px solid var(--est-border)}.est2 .est2-dialog__tools .est2-link{border:none;background:none;padding:0;font:inherit;font-weight:600}.est2 .est2-dialog__sep{margin:0 6px;color:var(--est-fg-faint)}.est2 .est2-collist{list-style:none;margin:0;padding:6px;overflow-y:auto}.est2 .est2-collist__row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--est-radius-sm)}.est2 .est2-collist__row:hover{background:var(--est-bg-hover)}.est2 .est2-collist__row--drag{cursor:grab}.est2 .est2-collist__row--drag:active{cursor:grabbing}.est2 .est2-collist__row--dragging{opacity:.45;background:var(--est-bg-hover)}.est2 .est2-collist__row--drop-above{box-shadow:inset 0 2px 0 0 var(--est-accent)}.est2 .est2-collist__row--drop-below{box-shadow:inset 0 -2px 0 0 var(--est-accent)}.est2 .est2-collist__grip{display:inline-flex;align-items:center;justify-content:center;color:var(--est-fg-faint);cursor:grab;flex:0 0 auto}.est2 .est2-collist__grip:active{cursor:grabbing}.est2 .est2-collist__row--drag:hover .est2-collist__grip{color:var(--est-fg-muted)}.est2 .est2-collist__vis{display:inline-flex}.est2 .est2-collist__label{flex:1 1 auto}.est2 .est2-collist__ord{display:inline-flex;gap:4px}.est2 .est2-iconbtn{width:26px;height:26px;border:1px solid var(--est-border);background:var(--est-bg);border-radius:var(--est-radius-sm);color:var(--est-fg-muted);cursor:pointer}.est2 .est2-iconbtn:hover:not(:disabled){background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-iconbtn:disabled{opacity:.4;cursor:default}.est2 .est2-dialog__foot{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--est-border)}.est2 .est2-dialog__spacer{flex:1 1 auto}.est2 .est2-btn{padding:7px 14px;border-radius:var(--est-radius-sm);font:inherit;font-weight:600;cursor:pointer;border:1px solid transparent}.est2 .est2-btn--ghost{background:transparent;color:var(--est-fg);border-color:var(--est-border)}.est2 .est2-btn--ghost:hover{background:var(--est-bg-hover)}.est2 .est2-btn--primary{background:var(--est-accent);color:var(--est-accent-fg)}.est2 .est2-btn--primary:hover{filter:brightness(1.05)}.est2 .est2-empty{padding:48px 16px;text-align:center;color:var(--est-fg-faint);font-size:var(--est-fs-sm)}.ngx-contextmenu{--ctx-bg: #ffffff;--ctx-fg: #1a1d24;--ctx-muted: #626b7a;--ctx-border: #e6e9ef;--ctx-hover: #f2f4f7;--ctx-accent: #4f46e5;--ctx-shadow: 0 10px 28px -8px rgba(16, 24, 40, .22), 0 2px 8px -3px rgba(16, 24, 40, .14);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.ngx-contextmenu .dropdown-menu{display:block;min-width:200px;margin:0;padding:6px;list-style:none;background:var(--ctx-bg);border:1px solid var(--ctx-border);border-radius:12px;box-shadow:var(--ctx-shadow);animation:est2-ctx-in .12s cubic-bezier(.16,1,.3,1)}.ngx-contextmenu li{list-style:none;margin:0}.ngx-contextmenu li>a{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:7px;color:var(--ctx-fg);font-size:13.5px;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .12s ease,color .12s ease}.ngx-contextmenu li>a:hover,.ngx-contextmenu li>a:focus{background:var(--ctx-hover);color:var(--ctx-fg);text-decoration:none;outline:none}.ngx-contextmenu li.divider,.ngx-contextmenu li[role=separator]{height:1px;margin:6px 8px;padding:0;background:var(--ctx-border)}.ngx-contextmenu li.disabled>a,.ngx-contextmenu li[aria-disabled=true]>a{color:var(--ctx-muted);opacity:.55;pointer-events:none}@media(prefers-color-scheme:dark){.ngx-contextmenu{--ctx-bg: #1e222b;--ctx-fg: #e7eaf0;--ctx-muted: #9aa3b2;--ctx-border: #2a2f3a;--ctx-hover: #232733;--ctx-accent: #7c74ff;--ctx-shadow: 0 12px 30px -8px rgba(0, 0, 0, .6), 0 2px 8px -3px rgba(0, 0, 0, .5)}}@keyframes est2-ctx-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.ngx-contextmenu .dropdown-menu{animation:none}}\n"], dependencies: [{ kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i12.ContextMenuAttachDirective, selector: "[contextMenu]", inputs: ["contextMenuSubject", "contextMenu"] }, { kind: "component", type: i12.ContextMenuComponent, selector: "context-menu", inputs: ["menuClass", "autoFocus", "useBootstrap4", "disabled"], outputs: ["close", "open"] }, { kind: "directive", type: i12.ContextMenuItemDirective, selector: "[contextMenuItem]", inputs: ["subMenu", "divider", "enabled", "passive", "visible"], outputs: ["execute"] }, { kind: "component", type: EsTable2PagerComponent, selector: "es-table2-pager", inputs: ["page", "pages", "total", "itemsPerPage", "countLabel", "showCount", "showButtons", "showPagingOptions", "allowAll"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "pipe", type: Est2FormatPipe, name: "est2_format" }, { kind: "pipe", type: Est2LookupPipe, name: "est2_lookup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsTable2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'es-table2', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (view()) {\n  <div class=\"est2-wrap {{ ContainerClass() }}\"\n       [style.height]=\"Height()\"\n       [style.background-color]=\"EmptySpaceBackgroundColor() || null\">\n\n    <!-- Auto-aggiornamento: toggle + intervallo (in alto a destra) -->\n    @if (AutoUpdate()) {\n      <div class=\"est2-autoupdate\">\n        <label class=\"est2-autoupdate__label\">\n          Aggiorna ogni\n          <input type=\"text\" maxlength=\"3\" class=\"est2-autoupdate__secs\"\n                 [ngModel]=\"seconds()\" (ngModelChange)=\"seconds.set($event)\"\n                 [ngModelOptions]=\"{ standalone: true }\"\n                 (change)=\"autoUpdateChanged()\" />\n          secondi\n        </label>\n        <label class=\"est2-switch\" title=\"Attiva/disattiva auto-aggiornamento\">\n          <input type=\"checkbox\" [ngModel]=\"autoUpdate()\"\n                 [ngModelOptions]=\"{ standalone: true }\"\n                 (ngModelChange)=\"autoUpdate.set($event); autoUpdateChanged()\" />\n          <span class=\"est2-switch__slider\"></span>\n        </label>\n      </div>\n    }\n\n    <!-- Pager superiore -->\n    @if (PagingStyle() === 'both' || PagingStyle() === 'top') {\n      <ng-container *ngTemplateOutlet=\"pager\"></ng-container>\n    }\n\n    <!-- Barra \"seleziona tutto\" (visibile solo con selezione multipla attiva e righe presenti) -->\n    @if (Selection() && !SingleSelection() && hasSelection) {\n      <div class=\"est2-selectbar\" [style.height.px]=\"selbarHeight() ? selbarHeight() + 1 : null\">\n        @if (allSelected) {\n          <span>Tutti i <strong>{{ selectedCount }}</strong> elementi sono selezionati</span>\n        } @else {\n          <span><strong>{{ selectedCount }}</strong> {{ selectedCount === 1 ? 'elemento selezionato' : 'elementi selezionati' }}</span>\n          @if (canSelectEverything) {\n            <span class=\"est2-link\" (click)=\"selectEverything()\">Seleziona tutti i {{ totalCount() }} elementi</span>\n          }\n        }\n        <span class=\"est2-selectbar__spacer\"></span>\n        <span class=\"est2-link\" (click)=\"clearSelection()\">Azzera selezione</span>\n      </div>\n    }\n\n    <div class=\"est2-scroll\" [style.max-height.px]=\"MaxHeight()\">\n      <table class=\"est2-table {{ TableClass() }}\"\n             [class.est2-table--range]=\"rangeActive()\"\n             [class.est2-table--dragging]=\"rangeDragging()\"\n             (mousedown)=\"onGridMouseDown($event)\"\n             (mouseover)=\"onGridMouseOver($event)\">\n\n        <!-- ================= HEADER ================= -->\n        @if (!HeaderHidden()) {\n          <thead #theadRef>\n            <!-- Righe di header-group multi-livello (dall'alto verso il basso) -->\n            @if (hasHeaderGroups()) {\n              @for (grow of headerGroupRows(); track $index) {\n                <tr class=\"est2-hgroup-row\">\n                  @if (Selection()) { <th class=\"est2-col-min est2-selcol\" [class.est2-pinned]=\"hasPinned()\" [style.left.px]=\"hasPinned() ? 0 : null\"></th> }\n                  @for (op of DynamicOperations(); track op.id) { <th class=\"est2-col-min\"></th> }\n                  @for (cell of grow; track cell.id; let gi = $index) {\n                    <th [attr.colspan]=\"cell.span\"\n                        [attr.data-groupid]=\"cell.isGroup ? cell.id : null\"\n                        [class.est2-hgroup]=\"cell.isGroup\"\n                        [class.est2-pinned]=\"gi < pinnedCount()\"\n                        [style.left.px]=\"gi < pinnedCount() ? pinnedLeftPx(gi) : null\"\n                        class=\"est2-hgroup-cell\">\n                      @if (cell.isGroup) {\n                        @if (cell.template) {\n                          <ng-container *ngTemplateOutlet=\"cell.template\"></ng-container>\n                        } @else {\n                          {{ cell.label }}\n                        }\n                      }\n                    </th>\n                  }\n                  @if (Removal()) { <th class=\"est2-col-min\"></th> }\n                  @if (hasChrome()) { <th class=\"est2-col-min\"></th> }\n                </tr>\n              }\n            }\n            <tr>\n              <!-- Colonna di selezione -->\n              @if (Selection()) {\n                <th class=\"est2-col-min est2-selcol\"\n                    [class.est2-pinned]=\"hasPinned()\"\n                    [style.left.px]=\"hasPinned() ? 0 : null\">\n                  @if (!SingleSelection()) {\n                    <input type=\"checkbox\" class=\"est2-check\"\n                           [checked]=\"globalCheck()\"\n                           [indeterminate]=\"selectionIndeterminate\"\n                           [disabled]=\"SelectionDisabled()\"\n                           (change)=\"toggleAll()\"\n                           aria-label=\"Seleziona tutto\" />\n                  }\n                </th>\n              }\n\n              <!-- Header da colonne (direttive / dinamica / report) -->\n              @if (usesColumns()) {\n                <!-- intestazioni vuote per le operazioni dinamiche -->\n                @for (op of DynamicOperations(); track op.id) {\n                  <th class=\"est2-col-min\"></th>\n                }\n                @for (col of visibleColumns(); track trackCol($index, col); let ci = $index) {\n                  <th [attr.data-colid]=\"col.id\"\n                      [class]=\"col.cssClass\"\n                      [class.est2-th--orderable]=\"OrderByColumn() && col.orderable\"\n                      [class.est2-col-min]=\"col.header?.thShrink\"\n                      [class.est2-col-groupstart]=\"columnGroupBoundaries().has(ci)\"\n                      [class.est2-pinned]=\"col.pinned\"\n                      [style.left.px]=\"col.pinned ? pinnedLeftPx(ci) : null\"\n                      [style.min-width.px]=\"col.pinned && col.pinnedWidth ? col.pinnedWidth : null\"\n                      [style.max-width.px]=\"col.pinned && col.pinnedWidth ? col.pinnedWidth : null\"\n                      [style.text-align]=\"col.alignment\"\n                      [style.background-color]=\"col.headerBg || null\"\n                      (click)=\"toggleSort(col)\">\n                    <span class=\"est2-th__inner\">\n                      @if (col.header?.Template) {\n                        <ng-container *ngTemplateOutlet=\"col.header!.Template!; context: col.multiProp != null ? { $implicit: col.headerText } : null\"></ng-container>\n                      } @else {\n                        {{ col.headerText }}\n                      }\n                      @if (OrderByColumn() && col.orderable && orderOf(col.id)) {\n                        <span class=\"est2-sort est2-sort--active\"\n                              [class.est2-sort--desc]=\"orderOf(col.id) === 'DESC'\">\n                          <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 15l6-6 6 6\"/></svg>\n                        </span>\n                        @if (orderIndex(col.id) > 0 && MultipleOrderingDirectives()) {\n                          <span class=\"est2-sort__badge\">{{ orderIndex(col.id) }}</span>\n                        }\n                      }\n                      <!-- Indicatore/toggle di pin (visibile se pinnata o all'hover) -->\n                      @if (ColumnsPinnable() && col.multiProp == null) {\n                        <button type=\"button\" class=\"est2-pinbtn\"\n                                [class.est2-pinbtn--on]=\"col.pinned\"\n                                [title]=\"col.pinned ? 'Sblocca colonna' : 'Blocca colonna a sinistra'\"\n                                (click)=\"togglePin(col, $event)\">\n                          <svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 17v5\"/><path d=\"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z\"/></svg>\n                        </button>\n                      }\n                    </span>\n                  </th>\n                }\n              }\n              <!-- Header da template semplice -->\n              @else if (headerRef) {\n                <ng-container *ngTemplateOutlet=\"headerRef\"></ng-container>\n              }\n\n              <!-- Colonna rimozione -->\n              @if (Removal()) { <th class=\"est2-col-min\"></th> }\n              <!-- Colonna chrome (export / gestione colonne / menu) -->\n              @if (hasChrome()) {\n                <th class=\"est2-col-min est2-chrome-th\">\n                  <div class=\"est2-chrome\">\n                    @if (Export()) {\n                      <div class=\"est2-chrome-wrap\">\n                        <button type=\"button\" class=\"est2-chrome-btn\" title=\"Esporta\" (click)=\"$event.stopPropagation(); toggleExportMenu()\">\n                          <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><path d=\"M7 10l5 5 5-5\"/><path d=\"M12 15V3\"/></svg>\n                        </button>\n                        @if (exportMenuOpen()) {\n                          <div class=\"est2-menu\" (click)=\"$event.stopPropagation()\">\n                            @if (CSVExport()) { <button type=\"button\" class=\"est2-menu-item\" (click)=\"export('CSV')\">Esporta CSV</button> }\n                            @if (XLSXExport()) { <button type=\"button\" class=\"est2-menu-item\" (click)=\"export('XLSX')\">Esporta Excel (XLSX)</button> }\n                            @if (!CSVExport() && !XLSXExport()) { <button type=\"button\" class=\"est2-menu-item\" (click)=\"export('CSV')\">Esporta CSV</button> }\n                          </div>\n                        }\n                      </div>\n                    }\n                    @if (HiddenColumns() || ColumnsOrdering()) {\n                      <button type=\"button\" class=\"est2-chrome-btn\" title=\"Colonne\" (click)=\"$event.stopPropagation(); openColumnsDialog()\">\n                        <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1\"/><path d=\"M9 3v18\"/><path d=\"M15 3v18\"/></svg>\n                      </button>\n                    }\n                    @if (CornerMenuOptions().length > 0) {\n                      <div class=\"est2-chrome-wrap\">\n                        <button type=\"button\" class=\"est2-chrome-btn\" title=\"Opzioni\" (click)=\"$event.stopPropagation(); toggleCornerMenu()\">\u22EE</button>\n                        @if (cornerMenuOpen()) {\n                          <div class=\"est2-menu\" (click)=\"$event.stopPropagation()\">\n                            @for (opt of CornerMenuOptions(); track opt.id) {\n                              <button type=\"button\" class=\"est2-menu-item\" (click)=\"cornerAction(opt.id); cornerMenuOpen.set(false)\">{{ opt.description }}</button>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </th>\n              }\n            </tr>\n          </thead>\n        }\n\n        <!-- ================= BODY ================= -->\n        @if (!BodyHidden()) {\n          <tbody>\n            @for (item of boundSource(); track trackRow($index, item); let ri = $index) {\n              @if ((!grouped() && !Hierarchy()) || item._visible) {\n              <tr [class]=\"rowClass(item)\"\n                  [class.est2-row--selected]=\"item._selected\"\n                  [class.est2-row--removed]=\"item.removed || item.deleted\"\n                  [class.est2-row--group]=\"item._group\"\n                  [class.est2-row--clickable]=\"Selection() || item._group\"\n                  [contextMenu]=\"ContextMenu || emptyMenu\"\n                  [contextMenuSubject]=\"item\"\n                  (click)=\"handleRowClick(item, $event)\">\n\n                <!-- Cella di selezione -->\n                @if (Selection()) {\n                  <td class=\"est2-col-min est2-selcol\"\n                      [class.est2-pinned]=\"hasPinned()\"\n                      [style.left.px]=\"hasPinned() ? 0 : null\">\n                    @if (item._group) {\n                      @if (!SingleSelection()) {\n                        <input type=\"checkbox\" class=\"est2-check\"\n                               [checked]=\"groupSelectionState(item) === 'all'\"\n                               [indeterminate]=\"groupSelectionState(item) === 'some'\"\n                               [disabled]=\"SelectionDisabled()\"\n                               (click)=\"$event.stopPropagation()\"\n                               (change)=\"toggleGroupSelection(item)\"\n                               aria-label=\"Seleziona gruppo\" />\n                      }\n                    } @else {\n                      <input type=\"checkbox\" class=\"est2-check\"\n                             [checked]=\"item._selected\"\n                             [indeterminate]=\"hierarchyIndeterminate(item)\"\n                             [disabled]=\"SelectionDisabled()\"\n                             (click)=\"$event.stopPropagation()\"\n                             (change)=\"toggleRow(item)\"\n                             aria-label=\"Seleziona riga\" />\n                    }\n                  </td>\n                }\n\n                <!-- Celle da colonne (direttive / dinamica / report) -->\n                @if (usesColumns()) {\n                  <!-- Operazioni dinamiche (icone a sinistra) -->\n                  @for (op of DynamicOperations(); track op.id) {\n                    <td class=\"est2-col-min est2-op-cell\">\n                      @if (!item._group && operationVisible(op, item)) {\n                        <span class=\"est2-op\" [class]=\"op.iconClass || ''\" [title]=\"op.title\"\n                              (click)=\"$event.stopPropagation(); dynamicOperation(item, op.id)\">{{ op.text }}</span>\n                      }\n                    </td>\n                  }\n                  @for (col of visibleColumns(); track trackCol($index, col); let first = $first, ci = $index) {\n                    <td [class]=\"col.cssClass\"\n                        [style.text-align]=\"col.alignment\"\n                        [style.color]=\"cellColor(item, col, 'fore')\"\n                        [style.background-color]=\"cellColor(item, col, 'back')\"\n                        [class.est2-nowrap]=\"!col.wrap\"\n                        [class.est2-col-groupstart]=\"columnGroupBoundaries().has(ci)\"\n                        [class.est2-pinned]=\"col.pinned\"\n                        [style.left.px]=\"col.pinned ? pinnedLeftPx(ci) : null\"\n                        [style.min-width.px]=\"col.pinned && col.pinnedWidth ? col.pinnedWidth : null\"\n                        [style.max-width.px]=\"col.pinned && col.pinnedWidth ? col.pinnedWidth : null\"\n                        [class.est2-td--group-key]=\"item._group && item.column === col.id\"\n                        [attr.data-r]=\"rangeActive() && !item._group ? ri : null\"\n                        [attr.data-c]=\"rangeActive() && !item._group ? ci : null\"\n                        [class.est2-cell-sel]=\"rangeActive() && inRange(ri, ci)\"\n                        [class.est2-cell-sel-t]=\"rangeActive() && inRange(ri, ci) && ri === rangeRect()!.top\"\n                        [class.est2-cell-sel-b]=\"rangeActive() && inRange(ri, ci) && ri === rangeRect()!.bottom\"\n                        [class.est2-cell-sel-l]=\"rangeActive() && inRange(ri, ci) && ci === rangeRect()!.left\"\n                        [class.est2-cell-sel-r]=\"rangeActive() && inRange(ri, ci) && ci === rangeRect()!.right\"\n                        [class.est2-cell-editing]=\"isEditing(ri, ci)\"\n                        (dblclick)=\"onCellDblClick(item, col, ri, ci)\">\n                      @if (isEditing(ri, ci)) {\n                        @if (editorFor(col); as edTpl) {\n                          <ng-container *ngTemplateOutlet=\"edTpl; context: editorContext(item, col)\"></ng-container>\n                        } @else {\n                          <ng-container *ngTemplateOutlet=\"defaultEditor; context: { $implicit: item, col: col }\"></ng-container>\n                        }\n                      } @else if (item._group) {\n                        @if (item.column === col.id) {\n                          <span class=\"est2-group-key\" [style.padding-left.px]=\"groupIndent(item)\">\n                            <span class=\"est2-group-chevron\" [class.est2-group-chevron--open]=\"item._expanded\">\n                              <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 6l6 6-6 6\"/></svg>\n                            </span>\n                            {{ groupCellDisplay(item, col) }}\n                          </span>\n                        } @else {\n                          {{ groupCellDisplay(item, col) }}\n                        }\n                      } @else {\n                        <!-- Navigatore albero nella prima colonna -->\n                        @if (Hierarchy() && first) {\n                          <span class=\"est2-hier-lead\" [style.padding-left.px]=\"hierarchyIndent(item)\">\n                            @if (item.parent) {\n                              <span class=\"est2-group-chevron est2-hier-toggle\" [class.est2-group-chevron--open]=\"item._expanded\"\n                                    (click)=\"$event.stopPropagation(); toggleHierarchyNode(item)\">\n                                <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 6l6 6-6 6\"/></svg>\n                              </span>\n                            } @else {\n                              <span class=\"est2-hier-toggle\"></span>\n                            }\n                          </span>\n                        }\n                        @if (itemCellHidden(col)) {\n                          <!-- colonna di gruppo nascosta sulla riga-oggetto -->\n                        } @else if (col.multiProp != null) {\n                          @if (col.cell?.Template) {\n                            <ng-container *ngTemplateOutlet=\"col.cell!.Template; context: { $implicit: multiCell(item, col) }\"></ng-container>\n                          } @else {\n                            {{ multiCell(item, col)?.value }}\n                          }\n                        } @else if (col.cell?.Template) {\n                          <ng-container *ngTemplateOutlet=\"col.cell!.Template; context: { $implicit: item }\"></ng-container>\n                        } @else if (col.routePath) {\n                          <a class=\"est2-link\" [routerLink]=\"routerLinkFor(item, col)\">{{ cellValue(item, col) }}</a>\n                        } @else if (col.propAccessor != null) {\n                          {{ reportCellDisplay(item, col) }}\n                        } @else if (col.type === 'enum') {\n                          {{ (cellValue(item, col) | est2_lookup : col.source).description }}\n                        } @else {\n                          {{ cellValue(item, col) | est2_format : col.type : col.format : locale }}\n                        }\n                      }\n                    </td>\n                  }\n                }\n                <!-- Celle da template semplice -->\n                @else if (bodyRef) {\n                  <ng-container *ngTemplateOutlet=\"bodyRef; context: { $implicit: item }\"></ng-container>\n                }\n\n                <!-- Rimozione (non sulle righe-gruppo) -->\n                @if (Removal()) {\n                  <td class=\"est2-col-min\">\n                    @if (!item._group && canRemove(item)) {\n                      @if (item.removed || item.deleted) {\n                        <button type=\"button\" class=\"est2-rowaction\" title=\"Ripristina\" (click)=\"abortRemoval(item)\">\u21BA</button>\n                      } @else {\n                        <button type=\"button\" class=\"est2-rowaction est2-rowaction--danger\" title=\"Rimuovi\" (click)=\"removeItem(item)\">\u2715</button>\n                      }\n                    }\n                  </td>\n                }\n                <!-- Chrome -->\n                @if (hasChrome()) { <td class=\"est2-col-min\"></td> }\n              </tr>\n              }\n            } @empty {\n              <tr>\n                <td class=\"est2-empty\" [attr.colspan]=\"totalColspan()\">Nessun elemento da visualizzare</td>\n              </tr>\n            }\n          </tbody>\n        }\n      </table>\n\n      <!-- Overlay di caricamento -->\n      @if (researchInProgress() || (firstBind() && ShowLoadingOnBootstrap())) {\n        <div class=\"est2-loading\">\n          <span class=\"est2-spinner\"></span>\n          <span>Caricamento\u2026</span>\n        </div>\n      }\n    </div>\n\n    <!-- Pager inferiore -->\n    @if (PagingStyle() === 'both' || PagingStyle() === 'bottom') {\n      <ng-container *ngTemplateOutlet=\"pager\"></ng-container>\n    }\n\n    <!-- Avviso transitorio (es. incolla con dimensioni incompatibili) -->\n    @if (notice()) {\n      <div class=\"est2-toast\" role=\"alert\">\n        <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/><path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/></svg>\n        <span>{{ notice() }}</span>\n      </div>\n    }\n\n    <!-- Dialog visibilit\u00E0 / ordine colonne -->\n    @if (columnsDialogOpen()) {\n      <div class=\"est2-dialog-backdrop\" (click)=\"closeColumnsDialog()\">\n        <div class=\"est2-dialog\" (click)=\"$event.stopPropagation()\" role=\"dialog\" aria-modal=\"true\">\n          <div class=\"est2-dialog__head\">\n            <span>\n              @if (HiddenColumns() && ColumnsOrdering()) { Visibilit\u00E0 e ordine colonne }\n              @else if (HiddenColumns()) { Visibilit\u00E0 colonne }\n              @else { Ordine colonne }\n            </span>\n            <button type=\"button\" class=\"est2-dialog__close\" (click)=\"closeColumnsDialog()\" aria-label=\"Chiudi\">\u2715</button>\n          </div>\n\n          @if (HiddenColumns()) {\n            <div class=\"est2-dialog__tools\">\n              <button type=\"button\" class=\"est2-link\" (click)=\"dialogSetAll(true)\">Mostra tutte</button>\n              <span class=\"est2-dialog__sep\">\u00B7</span>\n              <button type=\"button\" class=\"est2-link\" (click)=\"dialogSetAll(false)\">Nascondi tutte</button>\n            </div>\n          }\n\n          <ul class=\"est2-collist\">\n            @for (c of dialogCols(); track c.id; let i = $index) {\n              <li class=\"est2-collist__row\">\n                @if (HiddenColumns()) {\n                  <label class=\"est2-collist__vis\">\n                    <input type=\"checkbox\" class=\"est2-check\" [checked]=\"c.visible\" (change)=\"dialogToggle(i)\" />\n                  </label>\n                }\n                <span class=\"est2-collist__label\">{{ c.label }}</span>\n                @if (ColumnsPinnable()) {\n                  <button type=\"button\" class=\"est2-iconbtn est2-collist__pin\" [class.est2-collist__pin--on]=\"c.pinned\"\n                          [disabled]=\"c.grouped\"\n                          [title]=\"c.grouped ? 'Le colonne di un gruppo non sono bloccabili' : (c.pinned ? 'Sblocca' : 'Blocca a sinistra')\"\n                          (click)=\"dialogTogglePin(i)\">\n                    <svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 17v5\"/><path d=\"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z\"/></svg>\n                  </button>\n                }\n                @if (ColumnsOrdering()) {\n                  <span class=\"est2-collist__ord\">\n                    <button type=\"button\" class=\"est2-iconbtn\" [disabled]=\"i === 0\" title=\"Su\" (click)=\"dialogMove(i, -1)\">\u2191</button>\n                    <button type=\"button\" class=\"est2-iconbtn\" [disabled]=\"i === dialogCols().length - 1\" title=\"Gi\u00F9\" (click)=\"dialogMove(i, 1)\">\u2193</button>\n                  </span>\n                }\n              </li>\n            }\n          </ul>\n\n          <div class=\"est2-dialog__foot\">\n            <button type=\"button\" class=\"est2-btn est2-btn--ghost\" (click)=\"resetColumnsDialog()\">Ripristina</button>\n            <span class=\"est2-dialog__spacer\"></span>\n            <button type=\"button\" class=\"est2-btn est2-btn--ghost\" (click)=\"closeColumnsDialog()\">Annulla</button>\n            <button type=\"button\" class=\"est2-btn est2-btn--primary\" (click)=\"applyColumnsDialog()\">Applica</button>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<!-- Template pager riutilizzabile sopra/sotto -->\n<ng-template #pager>\n  @if (!HidePaging() && !grouped()) {\n    <es-table2-pager\n      [page]=\"currentPage()\"\n      [pages]=\"totalPages()\"\n      [total]=\"totalCount()\"\n      [itemsPerPage]=\"viewMode() ? (view()?.itemsperpageoverride ?? 15) : ArraymodeItemsPerPage()\"\n      [countLabel]=\"CountLabel()\"\n      [showCount]=\"!HidePagingCount()\"\n      [showButtons]=\"!HidePagingButtons()\"\n      [showPagingOptions]=\"!HidePagingButtons()\"\n      [allowAll]=\"AllSearch()\"\n      (pageChange)=\"goToPage($event)\"\n      (itemsPerPageChange)=\"changeItemsPerPage($event)\">\n    </es-table2-pager>\n  }\n</ng-template>\n\n<!-- Editor di cella di default (usato quando il consumer non fornisce un `*editor`) -->\n<ng-template #defaultEditor let-item let-col=\"col\">\n  @switch (col.type) {\n    @case ('enum') {\n      <select class=\"est2-editor-input\"\n              [value]=\"editDraft\"\n              (change)=\"editDraft = $any($event.target).value\"\n              (keydown.enter)=\"commitEdit(item, col)\"\n              (keydown.escape)=\"cancelEdit()\"\n              (blur)=\"commitEdit(item, col)\">\n        @for (o of col.source || []; track o.id) {\n          <option [value]=\"o.id\" [selected]=\"o.id == editDraft\">{{ o.description }}</option>\n        }\n      </select>\n    }\n    @case ('boolean') {\n      <input type=\"checkbox\" class=\"est2-editor-input est2-check\"\n             [checked]=\"editDraft === true || editDraft === 'true'\"\n             (change)=\"editDraft = $any($event.target).checked; commitEdit(item, col)\"\n             (keydown.escape)=\"cancelEdit()\" />\n    }\n    @default {\n      <input class=\"est2-editor-input\"\n             [type]=\"editorInputType(col.type)\"\n             [value]=\"editDraft\"\n             (input)=\"editDraft = $any($event.target).value\"\n             (keydown.enter)=\"commitEdit(item, col)\"\n             (keydown.escape)=\"cancelEdit()\"\n             (blur)=\"commitEdit(item, col)\" />\n    }\n  }\n</ng-template>\n\n<!-- Menu di default (nessuna operazione) usato quando il consumer non passa [ContextMenu] -->\n<context-menu #emptyMenu>\n  <ng-template contextMenuItem [passive]=\"true\"><em>Nessuna operazione disponibile\u2026</em></ng-template>\n</context-menu>\n", styles: [".est2{--est-bg: #ffffff;--est-bg-subtle: #f7f8fa;--est-bg-raised: #ffffff;--est-bg-hover: #f2f4f7;--est-bg-selected: color-mix(in srgb, var(--est-accent) 12%, transparent);--est-fg: #1a1d24;--est-fg-muted: #626b7a;--est-fg-faint: #9aa3b2;--est-border: #e6e9ef;--est-border-strong: #d3d8e0;--est-accent: #4f46e5;--est-accent-fg: #ffffff;--est-accent-weak: color-mix(in srgb, var(--est-accent) 14%, transparent);--est-danger: #dc2626;--est-warning: #d97706;--est-success: #059669;--est-shadow-sticky: 0 1px 0 var(--est-border), 0 4px 12px -8px rgba(16, 24, 40, .24);--est-shadow-pop: 0 8px 24px -6px rgba(16, 24, 40, .18), 0 2px 6px -2px rgba(16, 24, 40, .12);--est-ring: 0 0 0 3px color-mix(in srgb, var(--est-accent) 40%, transparent);--est-radius: 10px;--est-radius-sm: 6px;--est-radius-pill: 999px;--est-gap: 8px;--est-cell-py: 6px;--est-cell-px: 12px;--est-row-h: 33px;--est-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--est-fs: 13px;--est-fs-sm: 12px;--est-fw-head: 700;--est-transition: .14s cubic-bezier(.4, 0, .2, 1);--est-bg-zebra: color-mix(in srgb, var(--est-fg) 3.5%, var(--est-bg));font-family:var(--est-font);font-size:var(--est-fs);color:var(--est-fg);position:relative;display:block}@media(prefers-color-scheme:dark){.est2{--est-bg: #14161c;--est-bg-subtle: #1a1d25;--est-bg-raised: #1e222b;--est-bg-hover: #232733;--est-bg-selected: color-mix(in srgb, var(--est-accent) 26%, transparent);--est-fg: #e7eaf0;--est-fg-muted: #9aa3b2;--est-fg-faint: #6b7484;--est-border: #2a2f3a;--est-border-strong: #39404d;--est-accent: #7c74ff;--est-accent-fg: #ffffff;--est-accent-weak: color-mix(in srgb, var(--est-accent) 22%, transparent);--est-danger: #f87171;--est-warning: #fbbf24;--est-success: #34d399;--est-shadow-sticky: 0 1px 0 var(--est-border), 0 6px 16px -10px rgba(0, 0, 0, .7);--est-shadow-pop: 0 10px 28px -8px rgba(0, 0, 0, .6), 0 2px 6px -2px rgba(0, 0, 0, .5);--est-ring: 0 0 0 3px color-mix(in srgb, var(--est-accent) 55%, transparent)}}.est2.est2--dark{--est-bg: #14161c;--est-bg-subtle: #1a1d25;--est-bg-raised: #1e222b;--est-bg-hover: #232733;--est-bg-selected: color-mix(in srgb, var(--est-accent) 26%, transparent);--est-fg: #e7eaf0;--est-fg-muted: #9aa3b2;--est-fg-faint: #6b7484;--est-border: #2a2f3a;--est-border-strong: #39404d;--est-accent: #7c74ff;--est-accent-fg: #ffffff;--est-accent-weak: color-mix(in srgb, var(--est-accent) 22%, transparent);--est-danger: #f87171;--est-warning: #fbbf24;--est-success: #34d399;--est-shadow-sticky: 0 1px 0 var(--est-border), 0 6px 16px -10px rgba(0, 0, 0, .7);--est-shadow-pop: 0 10px 28px -8px rgba(0, 0, 0, .6), 0 2px 6px -2px rgba(0, 0, 0, .5);--est-ring: 0 0 0 3px color-mix(in srgb, var(--est-accent) 55%, transparent)}.est2.est2--light{--est-bg: #ffffff;--est-bg-subtle: #f7f8fa;--est-bg-raised: #ffffff;--est-bg-hover: #f2f4f7;--est-bg-selected: color-mix(in srgb, var(--est-accent) 12%, transparent);--est-fg: #1a1d24;--est-fg-muted: #626b7a;--est-fg-faint: #9aa3b2;--est-border: #e6e9ef;--est-border-strong: #d3d8e0;--est-accent: #4f46e5;--est-accent-fg: #ffffff;--est-accent-weak: color-mix(in srgb, var(--est-accent) 14%, transparent);--est-danger: #dc2626;--est-warning: #d97706;--est-success: #059669;--est-shadow-sticky: 0 1px 0 var(--est-border), 0 4px 12px -8px rgba(16, 24, 40, .24);--est-shadow-pop: 0 8px 24px -6px rgba(16, 24, 40, .18), 0 2px 6px -2px rgba(16, 24, 40, .12);--est-ring: 0 0 0 3px color-mix(in srgb, var(--est-accent) 40%, transparent)}.est2.est2--dense{--est-cell-py: 3px;--est-cell-px: 9px;--est-row-h: 27px;--est-fs: 12.5px}.est2 *,.est2 *:before,.est2 *:after{box-sizing:border-box}.est2 .est2-scroll{position:relative;width:100%;overflow:auto;border:1px solid var(--est-border);border-radius:var(--est-radius);background:var(--est-bg);-webkit-overflow-scrolling:touch}.est2 table.est2-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--est-bg)}.est2 thead th{position:sticky;top:0;z-index:3;background:var(--est-bg-subtle);color:var(--est-fg);font-weight:var(--est-fw-head);font-size:var(--est-fs);text-align:left;white-space:nowrap;padding:var(--est-cell-py) var(--est-cell-px);border-bottom:1px solid var(--est-border);box-shadow:var(--est-shadow-sticky);-webkit-user-select:none;user-select:none}.est2 thead tr.est2-hgroup-row th{font-size:var(--est-fs-sm);font-weight:700;color:var(--est-fg-muted);text-align:center;white-space:nowrap;padding:var(--est-cell-py) var(--est-cell-px);background:var(--est-bg-subtle);border-bottom:1px solid var(--est-border)}.est2 thead tr.est2-hgroup-row th.est2-hgroup{color:var(--est-fg);border-left:1px solid var(--est-border);border-right:1px solid var(--est-border)}.est2 thead tr.est2-hgroup-row th:not(.est2-hgroup){background:var(--est-bg-subtle);border-bottom-color:transparent}.est2 thead tr:last-child th.est2-col-groupstart,.est2 tbody td.est2-col-groupstart{border-left:1px solid var(--est-border)}.est2 tbody td{padding:var(--est-cell-py) var(--est-cell-px);border-bottom:1px solid var(--est-border);color:var(--est-fg);vertical-align:middle;background:transparent}.est2 tbody tr:nth-child(2n) td{background:var(--est-bg-zebra)}.est2 tbody tr:nth-child(2n) td.est2-pinned{background:var(--est-bg-zebra)}.est2 th.est2-pinned,.est2 td.est2-pinned{position:sticky;background:var(--est-bg);box-shadow:1px 0 0 var(--est-border)}.est2 .est2-selcol{width:44px;min-width:44px;max-width:44px}.est2 td.est2-pinned{z-index:3}.est2 thead th.est2-pinned,.est2 thead tr.est2-hgroup-row th.est2-pinned{z-index:6;background:var(--est-bg-subtle)}.est2 tbody tr:hover td.est2-pinned{background:color-mix(in srgb,var(--est-fg) 5%,var(--est-bg))}.est2 tbody tr.est2-row--selected td.est2-pinned{background:color-mix(in srgb,var(--est-accent) 12%,var(--est-bg))}.est2 tbody tr.est2-row--group td.est2-pinned{background:var(--est-bg-subtle)}.est2 .est2-pinbtn{display:inline-flex;align-items:center;justify-content:center;margin-left:4px;padding:2px;border:none;background:transparent;color:var(--est-fg-faint);border-radius:var(--est-radius-sm);cursor:pointer;opacity:0;transition:opacity var(--est-transition),color var(--est-transition),background var(--est-transition)}.est2 thead th:hover .est2-pinbtn{opacity:.7}.est2 .est2-pinbtn:hover{background:var(--est-bg-hover);color:var(--est-fg);opacity:1}.est2 .est2-pinbtn--on{opacity:1;color:var(--est-accent);transform:rotate(0)}.est2 thead th:hover .est2-pinbtn--on{opacity:1}.est2 .est2-collist__pin.est2-collist__pin--on{color:var(--est-accent);border-color:var(--est-accent)}.est2 tbody tr{height:var(--est-row-h);transition:background var(--est-transition)}.est2 tbody tr:last-child td{border-bottom:none}.est2 tbody tr:hover td{background:var(--est-bg-hover)}.est2 tbody tr.est2-row--selected td{background:var(--est-bg-selected)}.est2 tbody tr.est2-row--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.est2 tbody tr.est2-row--removed td{text-decoration:line-through;color:var(--est-fg-faint)}.est2 .est2-table--range tbody td[data-r]{cursor:cell}.est2 .est2-table--dragging,.est2 .est2-table--dragging tbody td{-webkit-user-select:none;user-select:none}.est2 tbody td.est2-cell-sel{background:color-mix(in srgb,var(--est-accent) 14%,transparent)}.est2 tbody td.est2-cell-sel-t{box-shadow:inset 0 2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-b{box-shadow:inset 0 -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-l{box-shadow:inset 2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-r{box-shadow:inset -2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-l{box-shadow:inset 2px 2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-r{box-shadow:inset -2px 2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-b.est2-cell-sel-l{box-shadow:inset 2px -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-b.est2-cell-sel-r{box-shadow:inset -2px -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-b{box-shadow:inset 0 2px 0 0 var(--est-accent),inset 0 -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-l.est2-cell-sel-r{box-shadow:inset 2px 0 0 0 var(--est-accent),inset -2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-b.est2-cell-sel-l{box-shadow:inset 2px 2px 0 0 var(--est-accent),inset 0 -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-b.est2-cell-sel-r{box-shadow:inset -2px 2px 0 0 var(--est-accent),inset 0 -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-l.est2-cell-sel-r{box-shadow:inset 2px 2px 0 0 var(--est-accent),inset -2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-b.est2-cell-sel-l.est2-cell-sel-r{box-shadow:inset 2px -2px 0 0 var(--est-accent),inset -2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-b.est2-cell-sel-l.est2-cell-sel-r{box-shadow:inset 2px 2px 0 0 var(--est-accent),inset -2px -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-editing{padding:2px 6px}.est2 .est2-editor-input{width:100%;box-sizing:border-box;height:calc(var(--est-row-h) - 8px);padding:2px 6px;font:inherit;color:var(--est-fg);background:var(--est-bg);border:1.5px solid var(--est-accent);border-radius:var(--est-radius-sm);outline:none}.est2 .est2-editor-input:focus-visible{box-shadow:var(--est-ring)}.est2 input.est2-editor-input[type=checkbox]{width:16px;height:16px}.est2 .est2-autoupdate{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:4px 2px 8px;font-size:var(--est-fs-sm);color:var(--est-fg-muted)}.est2 .est2-autoupdate__label{display:inline-flex;align-items:center;gap:6px}.est2 .est2-autoupdate__secs{width:44px;text-align:center;padding:3px 4px;font:inherit;color:var(--est-fg);background:var(--est-bg);border:1px solid var(--est-border);border-radius:var(--est-radius-sm);outline:none}.est2 .est2-autoupdate__secs:focus-visible{box-shadow:var(--est-ring);border-color:var(--est-accent)}.est2 .est2-switch{position:relative;display:inline-flex;width:38px;height:20px;cursor:pointer}.est2 .est2-switch input{position:absolute;opacity:0;width:0;height:0}.est2 .est2-switch__slider{flex:1;border-radius:var(--est-radius-pill);background:var(--est-border-strong);transition:background var(--est-transition)}.est2 .est2-switch__slider:before{content:\"\";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #00000040;transition:transform var(--est-transition)}.est2 .est2-switch input:checked+.est2-switch__slider{background:var(--est-accent)}.est2 .est2-switch input:checked+.est2-switch__slider:before{transform:translate(18px)}.est2 .est2-switch input:focus-visible+.est2-switch__slider{box-shadow:var(--est-ring)}.est2 .est2-toast{position:absolute;left:50%;bottom:14px;transform:translate(-50%);z-index:20;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 24px);padding:8px 14px;font-size:13px;font-weight:500;color:#fff;background:#b91c1c;border-radius:var(--est-radius);box-shadow:0 6px 20px #00000040;animation:est2-toast-in .16s ease-out}.est2 .est2-toast svg{flex:0 0 auto}@keyframes est2-toast-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}@media(prefers-reduced-motion:reduce){.est2 .est2-toast{animation:none}}.est2 tbody tr.est2-row--group{cursor:pointer;-webkit-user-select:none;user-select:none}.est2 tbody tr.est2-row--group td{background:var(--est-bg-subtle);font-weight:600;color:var(--est-fg);border-bottom:1px solid var(--est-border)}.est2 tbody tr.est2-row--group:hover td{background:var(--est-bg-hover)}.est2 .est2-td--group-key{color:var(--est-fg)}.est2 .est2-group-key{display:inline-flex;align-items:center;gap:6px}.est2 .est2-group-chevron{display:inline-flex;color:var(--est-fg-muted);transition:transform var(--est-transition)}.est2 .est2-group-chevron--open{transform:rotate(90deg)}.est2 .est2-hier-lead{display:inline-flex;align-items:center;vertical-align:middle;margin-right:4px}.est2 .est2-hier-toggle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none}.est2 .est2-group-chevron.est2-hier-toggle{cursor:pointer;border-radius:var(--est-radius-sm);transition:transform var(--est-transition),background var(--est-transition),color var(--est-transition)}.est2 .est2-group-chevron.est2-hier-toggle:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 th.est2-th--orderable{cursor:pointer;transition:color var(--est-transition)}.est2 th.est2-th--orderable:hover{color:var(--est-fg)}.est2 .est2-th__inner{display:inline-flex;align-items:center;gap:6px}.est2 .est2-sort{display:inline-flex;width:14px;height:14px;opacity:.35;transition:opacity var(--est-transition),transform var(--est-transition)}.est2 .est2-sort--active{opacity:1;color:var(--est-accent)}.est2 .est2-sort--desc{transform:rotate(180deg)}.est2 .est2-sort__badge{font-size:9px;font-weight:700;color:var(--est-accent);margin-left:2px}.est2 .est2-check{appearance:none;width:16px;height:16px;border:1.5px solid var(--est-border-strong);border-radius:var(--est-radius-sm);background:var(--est-bg);cursor:pointer;position:relative;transition:border-color var(--est-transition),background var(--est-transition);vertical-align:middle;flex:none}.est2 .est2-check:hover{border-color:var(--est-accent)}.est2 .est2-check:checked{background:var(--est-accent);border-color:var(--est-accent)}.est2 .est2-check:checked:after{content:\"\";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid var(--est-accent-fg);border-width:0 2px 2px 0;transform:rotate(45deg)}.est2 .est2-check:focus-visible{outline:none;box-shadow:var(--est-ring)}.est2 .est2-check:indeterminate{background:var(--est-accent);border-color:var(--est-accent)}.est2 .est2-check:indeterminate:after{content:\"\";position:absolute;left:3px;top:6px;width:8px;height:2px;background:var(--est-accent-fg);transform:none;border:none}.est2 th.est2-col-min,.est2 td.est2-col-min{width:1%;white-space:nowrap}.est2 .est2-wrap{position:relative}.est2 .est2-selectbar{position:absolute;top:0;left:0;right:0;z-index:15;display:flex;align-items:center;gap:12px;padding:9px 14px;font-size:var(--est-fs-sm);color:var(--est-fg);background:var(--est-bg-subtle);border:none;border-radius:var(--est-radius) var(--est-radius) 0 0;box-shadow:inset 3px 0 0 var(--est-accent)}.est2 .est2-selectbar strong{color:var(--est-fg);font-weight:700}.est2 .est2-selectbar__spacer{flex:1 1 auto}.est2 .est2-link{color:var(--est-accent);cursor:pointer;font-weight:600}.est2 .est2-link:hover{text-decoration:underline}.est2 .est2-rowaction{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--est-radius-sm);border:none;background:transparent;color:var(--est-fg-faint);cursor:pointer;transition:background var(--est-transition),color var(--est-transition)}.est2 .est2-rowaction:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-rowaction--danger:hover{color:var(--est-danger)}.est2 .est2-op-cell{text-align:center}.est2 .est2-op{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 6px;border-radius:var(--est-radius-sm);color:var(--est-accent);cursor:pointer;font-size:var(--est-fs-sm);transition:background var(--est-transition)}.est2 .est2-op:hover{background:var(--est-accent-weak)}.est2 .est2-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;background:color-mix(in srgb,var(--est-bg) 70%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:5;color:var(--est-fg-muted);font-size:var(--est-fs-sm)}.est2 .est2-spinner{width:16px;height:16px;border:2px solid var(--est-border-strong);border-top-color:var(--est-accent);border-radius:50%;animation:est2-spin .7s linear infinite}@keyframes est2-spin{to{transform:rotate(360deg)}}.est2 .est2-nowrap{white-space:nowrap}.est2 .est2-cornermenu{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--est-radius-sm);cursor:pointer;color:var(--est-fg-muted);transition:background var(--est-transition)}.est2 .est2-cornermenu:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-chrome-th{position:relative}.est2 .est2-chrome{display:inline-flex;align-items:center;gap:2px}.est2 .est2-chrome-wrap{position:relative;display:inline-flex}.est2 .est2-chrome-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;border-radius:var(--est-radius-sm);color:var(--est-fg-muted);cursor:pointer;font-size:16px;line-height:1;transition:background var(--est-transition),color var(--est-transition)}.est2 .est2-chrome-btn:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:30;min-width:180px;padding:4px;background:var(--est-bg);border:1px solid var(--est-border);border-radius:var(--est-radius);box-shadow:0 8px 24px #0000002e;display:flex;flex-direction:column}.est2 .est2-menu-item{display:block;width:100%;padding:8px 10px;border:none;background:transparent;text-align:left;font:inherit;color:var(--est-fg);border-radius:var(--est-radius-sm);cursor:pointer}.est2 .est2-menu-item:hover{background:var(--est-bg-hover)}.est2 .est2-dialog-backdrop{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px;background:color-mix(in srgb,#000 32%,transparent)}.est2 .est2-dialog{width:380px;max-width:100%;max-height:100%;display:flex;flex-direction:column;background:var(--est-bg);color:var(--est-fg);border:1px solid var(--est-border);border-radius:var(--est-radius);box-shadow:0 16px 48px #0000004d;overflow:hidden}.est2 .est2-dialog__head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-weight:700;border-bottom:1px solid var(--est-border)}.est2 .est2-dialog__close{border:none;background:transparent;cursor:pointer;color:var(--est-fg-muted);font-size:15px;line-height:1;padding:4px;border-radius:var(--est-radius-sm)}.est2 .est2-dialog__close:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-dialog__tools{padding:8px 14px;font-size:var(--est-fs-sm);border-bottom:1px solid var(--est-border)}.est2 .est2-dialog__tools .est2-link{border:none;background:none;padding:0;font:inherit;font-weight:600}.est2 .est2-dialog__sep{margin:0 6px;color:var(--est-fg-faint)}.est2 .est2-collist{list-style:none;margin:0;padding:6px;overflow-y:auto}.est2 .est2-collist__row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--est-radius-sm)}.est2 .est2-collist__row:hover{background:var(--est-bg-hover)}.est2 .est2-collist__vis{display:inline-flex}.est2 .est2-collist__label{flex:1 1 auto}.est2 .est2-collist__ord{display:inline-flex;gap:4px}.est2 .est2-iconbtn{width:26px;height:26px;border:1px solid var(--est-border);background:var(--est-bg);border-radius:var(--est-radius-sm);color:var(--est-fg-muted);cursor:pointer}.est2 .est2-iconbtn:hover:not(:disabled){background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-iconbtn:disabled{opacity:.4;cursor:default}.est2 .est2-dialog__foot{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--est-border)}.est2 .est2-dialog__spacer{flex:1 1 auto}.est2 .est2-btn{padding:7px 14px;border-radius:var(--est-radius-sm);font:inherit;font-weight:600;cursor:pointer;border:1px solid transparent}.est2 .est2-btn--ghost{background:transparent;color:var(--est-fg);border-color:var(--est-border)}.est2 .est2-btn--ghost:hover{background:var(--est-bg-hover)}.est2 .est2-btn--primary{background:var(--est-accent);color:var(--est-accent-fg)}.est2 .est2-btn--primary:hover{filter:brightness(1.05)}.est2 .est2-empty{padding:48px 16px;text-align:center;color:var(--est-fg-faint);font-size:var(--est-fs-sm)}.ngx-contextmenu{--ctx-bg: #ffffff;--ctx-fg: #1a1d24;--ctx-muted: #626b7a;--ctx-border: #e6e9ef;--ctx-hover: #f2f4f7;--ctx-accent: #4f46e5;--ctx-shadow: 0 10px 28px -8px rgba(16, 24, 40, .22), 0 2px 8px -3px rgba(16, 24, 40, .14);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.ngx-contextmenu .dropdown-menu{display:block;min-width:200px;margin:0;padding:6px;list-style:none;background:var(--ctx-bg);border:1px solid var(--ctx-border);border-radius:12px;box-shadow:var(--ctx-shadow);animation:est2-ctx-in .12s cubic-bezier(.16,1,.3,1)}.ngx-contextmenu li{list-style:none;margin:0}.ngx-contextmenu li>a{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:7px;color:var(--ctx-fg);font-size:13.5px;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .12s ease,color .12s ease}.ngx-contextmenu li>a:hover,.ngx-contextmenu li>a:focus{background:var(--ctx-hover);color:var(--ctx-fg);text-decoration:none;outline:none}.ngx-contextmenu li.divider,.ngx-contextmenu li[role=separator]{height:1px;margin:6px 8px;padding:0;background:var(--ctx-border)}.ngx-contextmenu li.disabled>a,.ngx-contextmenu li[aria-disabled=true]>a{color:var(--ctx-muted);opacity:.55;pointer-events:none}@media(prefers-color-scheme:dark){.ngx-contextmenu{--ctx-bg: #1e222b;--ctx-fg: #e7eaf0;--ctx-muted: #9aa3b2;--ctx-border: #2a2f3a;--ctx-hover: #232733;--ctx-accent: #7c74ff;--ctx-shadow: 0 12px 30px -8px rgba(0, 0, 0, .6), 0 2px 8px -3px rgba(0, 0, 0, .5)}}@keyframes est2-ctx-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.ngx-contextmenu .dropdown-menu{animation:none}}\n"] }]
+            args: [{ selector: 'es-table2', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (view()) {\n  <div class=\"est2-wrap {{ ContainerClass() }}\"\n       [style.height]=\"Height()\"\n       [style.background-color]=\"EmptySpaceBackgroundColor() || null\">\n\n    <!-- Auto-aggiornamento: toggle + intervallo (in alto a destra) -->\n    @if (AutoUpdate()) {\n      <div class=\"est2-autoupdate\">\n        <label class=\"est2-autoupdate__label\">\n          Aggiorna ogni\n          <input type=\"text\" maxlength=\"3\" class=\"est2-autoupdate__secs\"\n                 [ngModel]=\"seconds()\" (ngModelChange)=\"seconds.set($event)\"\n                 [ngModelOptions]=\"{ standalone: true }\"\n                 (change)=\"autoUpdateChanged()\" />\n          secondi\n        </label>\n        <label class=\"est2-switch\" title=\"Attiva/disattiva auto-aggiornamento\">\n          <input type=\"checkbox\" [ngModel]=\"autoUpdate()\"\n                 [ngModelOptions]=\"{ standalone: true }\"\n                 (ngModelChange)=\"autoUpdate.set($event); autoUpdateChanged()\" />\n          <span class=\"est2-switch__slider\"></span>\n        </label>\n      </div>\n    }\n\n    <!-- Pager superiore -->\n    @if (PagingStyle() === 'both' || PagingStyle() === 'top') {\n      <ng-container *ngTemplateOutlet=\"pager\"></ng-container>\n    }\n\n    <!-- Barra \"seleziona tutto\" (visibile solo con selezione multipla attiva e righe presenti) -->\n    @if (Selection() && !SingleSelection() && hasSelection) {\n      <div class=\"est2-selectbar\" [style.height.px]=\"selbarHeight() ? selbarHeight() + 1 : null\">\n        @if (allSelected) {\n          <span>Tutti i <strong>{{ selectedCount }}</strong> elementi sono selezionati</span>\n        } @else {\n          <span><strong>{{ selectedCount }}</strong> {{ selectedCount === 1 ? 'elemento selezionato' : 'elementi selezionati' }}</span>\n          @if (canSelectEverything) {\n            <span class=\"est2-link\" (click)=\"selectEverything()\">Seleziona tutti i {{ totalCount() }} elementi</span>\n          }\n        }\n        <span class=\"est2-selectbar__spacer\"></span>\n        <span class=\"est2-link\" (click)=\"clearSelection()\">Azzera selezione</span>\n      </div>\n    }\n\n    <div class=\"est2-scroll\" [style.max-height.px]=\"MaxHeight()\">\n      <table class=\"est2-table {{ TableClass() }}\"\n             [class.est2-table--range]=\"rangeActive()\"\n             [class.est2-table--dragging]=\"rangeDragging()\"\n             (mousedown)=\"onGridMouseDown($event)\"\n             (mouseover)=\"onGridMouseOver($event)\">\n\n        <!-- ================= HEADER ================= -->\n        @if (!HeaderHidden()) {\n          <thead #theadRef>\n            <!-- Righe di header-group multi-livello (dall'alto verso il basso) -->\n            @if (hasHeaderGroups()) {\n              @for (grow of headerGroupRows(); track $index) {\n                <tr class=\"est2-hgroup-row\">\n                  @if (Selection()) { <th class=\"est2-col-min est2-selcol\" [class.est2-pinned]=\"hasPinned()\" [style.left.px]=\"hasPinned() ? 0 : null\"></th> }\n                  @for (op of DynamicOperations(); track op.id) { <th class=\"est2-col-min\"></th> }\n                  @for (cell of grow; track cell.id; let gi = $index) {\n                    <th [attr.colspan]=\"cell.span\"\n                        [attr.data-groupid]=\"cell.isGroup ? cell.id : null\"\n                        [class.est2-hgroup]=\"cell.isGroup\"\n                        [class.est2-pinned]=\"gi < pinnedCount()\"\n                        [style.left.px]=\"gi < pinnedCount() ? pinnedLeftPx(gi) : null\"\n                        class=\"est2-hgroup-cell\">\n                      @if (cell.isGroup) {\n                        @if (cell.template) {\n                          <ng-container *ngTemplateOutlet=\"cell.template\"></ng-container>\n                        } @else {\n                          {{ cell.label }}\n                        }\n                      }\n                    </th>\n                  }\n                  @if (Removal()) { <th class=\"est2-col-min\"></th> }\n                  @if (hasChrome()) { <th class=\"est2-col-min\"></th> }\n                </tr>\n              }\n            }\n            <tr>\n              <!-- Colonna di selezione -->\n              @if (Selection()) {\n                <th class=\"est2-col-min est2-selcol\"\n                    [class.est2-pinned]=\"hasPinned()\"\n                    [style.left.px]=\"hasPinned() ? 0 : null\">\n                  @if (!SingleSelection()) {\n                    <input type=\"checkbox\" class=\"est2-check\"\n                           [checked]=\"globalCheck()\"\n                           [indeterminate]=\"selectionIndeterminate\"\n                           [disabled]=\"SelectionDisabled()\"\n                           (change)=\"toggleAll()\"\n                           aria-label=\"Seleziona tutto\" />\n                  }\n                </th>\n              }\n\n              <!-- Header da colonne (direttive / dinamica / report) -->\n              @if (usesColumns()) {\n                <!-- intestazioni vuote per le operazioni dinamiche -->\n                @for (op of DynamicOperations(); track op.id) {\n                  <th class=\"est2-col-min\"></th>\n                }\n                @for (col of visibleColumns(); track trackCol($index, col); let ci = $index) {\n                  <th [attr.data-colid]=\"col.id\"\n                      [class]=\"col.headerClass\"\n                      [class.est2-th--orderable]=\"OrderByColumn() && col.orderable\"\n                      [class.est2-col-min]=\"col.header?.thShrink\"\n                      [class.est2-col-groupstart]=\"columnGroupBoundaries().has(ci)\"\n                      [class.est2-pinned]=\"col.pinned\"\n                      [style.left.px]=\"col.pinned ? pinnedLeftPx(ci) : null\"\n                      [style.width.px]=\"col.pinned ? pinnedWidthPx(col) : null\"\n                      [style.min-width.px]=\"col.pinned ? pinnedWidthPx(col) : null\"\n                      [style.max-width.px]=\"col.pinned ? pinnedWidthPx(col) : null\"\n                      [style.text-align]=\"col.alignment\"\n                      [style.background-color]=\"col.headerBg || null\"\n                      (click)=\"toggleSort(col)\">\n                    <span class=\"est2-th__inner\">\n                      @if (col.header?.Template) {\n                        <ng-container *ngTemplateOutlet=\"col.header!.Template!; context: col.multiProp != null ? { $implicit: col.headerText } : null\"></ng-container>\n                      } @else {\n                        {{ col.headerText }}\n                      }\n                      @if (OrderByColumn() && col.orderable && orderOf(col.id)) {\n                        <span class=\"est2-sort est2-sort--active\"\n                              [class.est2-sort--desc]=\"orderOf(col.id) === 'DESC'\">\n                          <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 15l6-6 6 6\"/></svg>\n                        </span>\n                        @if (orderIndex(col.id) > 0 && MultipleOrderingDirectives()) {\n                          <span class=\"est2-sort__badge\">{{ orderIndex(col.id) }}</span>\n                        }\n                      }\n                      <!-- Indicatore/toggle di pin (visibile se pinnata o all'hover) -->\n                      @if (ColumnsPinnable() && col.multiProp == null) {\n                        <button type=\"button\" class=\"est2-pinbtn\"\n                                [class.est2-pinbtn--on]=\"col.pinned\"\n                                [title]=\"col.pinned ? 'Sblocca colonna' : 'Blocca colonna a sinistra'\"\n                                (click)=\"togglePin(col, $event)\">\n                          <svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 17v5\"/><path d=\"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z\"/></svg>\n                        </button>\n                      }\n                    </span>\n                    <!-- Handle di ridimensionamento (colonne pinnate, gated da ColumnsResizable) -->\n                    @if (ColumnsResizable() && col.pinned) {\n                      <span class=\"est2-resize-handle\" title=\"Trascina per ridimensionare\"\n                            (mousedown)=\"startColumnResize(col, $event)\"\n                            (click)=\"$event.stopPropagation()\"></span>\n                    }\n                  </th>\n                }\n              }\n              <!-- Header da template semplice -->\n              @else if (headerRef) {\n                <ng-container *ngTemplateOutlet=\"headerRef\"></ng-container>\n              }\n\n              <!-- Colonna rimozione -->\n              @if (Removal()) { <th class=\"est2-col-min\"></th> }\n              <!-- Colonna chrome (export / gestione colonne / menu) -->\n              @if (hasChrome()) {\n                <th class=\"est2-col-min est2-chrome-th\">\n                  <div class=\"est2-chrome\">\n                    @if (Export()) {\n                      <div class=\"est2-chrome-wrap\">\n                        <button type=\"button\" class=\"est2-chrome-btn\" title=\"Esporta\" (click)=\"$event.stopPropagation(); toggleExportMenu()\">\n                          <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><path d=\"M7 10l5 5 5-5\"/><path d=\"M12 15V3\"/></svg>\n                        </button>\n                        @if (exportMenuOpen()) {\n                          <div class=\"est2-menu\" (click)=\"$event.stopPropagation()\">\n                            @if (CSVExport()) { <button type=\"button\" class=\"est2-menu-item\" (click)=\"export('CSV')\">Esporta CSV</button> }\n                            @if (XLSXExport()) { <button type=\"button\" class=\"est2-menu-item\" (click)=\"export('XLSX')\">Esporta Excel (XLSX)</button> }\n                            @if (!CSVExport() && !XLSXExport()) { <button type=\"button\" class=\"est2-menu-item\" (click)=\"export('CSV')\">Esporta CSV</button> }\n                          </div>\n                        }\n                      </div>\n                    }\n                    @if (HiddenColumns() || ColumnsOrdering()) {\n                      <button type=\"button\" class=\"est2-chrome-btn\" title=\"Colonne\" (click)=\"$event.stopPropagation(); openColumnsDialog()\">\n                        <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1\"/><path d=\"M9 3v18\"/><path d=\"M15 3v18\"/></svg>\n                      </button>\n                    }\n                    @if (CornerMenuOptions().length > 0) {\n                      <div class=\"est2-chrome-wrap\">\n                        <button type=\"button\" class=\"est2-chrome-btn\" title=\"Opzioni\" (click)=\"$event.stopPropagation(); toggleCornerMenu()\">\u22EE</button>\n                        @if (cornerMenuOpen()) {\n                          <div class=\"est2-menu\" (click)=\"$event.stopPropagation()\">\n                            @for (opt of CornerMenuOptions(); track opt.id) {\n                              <button type=\"button\" class=\"est2-menu-item\" (click)=\"cornerAction(opt.id); cornerMenuOpen.set(false)\">{{ opt.description }}</button>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </th>\n              }\n            </tr>\n          </thead>\n        }\n\n        <!-- ================= BODY ================= -->\n        @if (!BodyHidden()) {\n          <tbody>\n            @for (item of boundSource(); track trackRow($index, item); let ri = $index) {\n              @if ((!grouped() && !Hierarchy()) || item._visible) {\n              <tr [class]=\"rowClass(item)\"\n                  [class.est2-row--selected]=\"item._selected\"\n                  [class.est2-row--removed]=\"item.removed || item.deleted\"\n                  [class.est2-row--group]=\"item._group\"\n                  [class.est2-row--clickable]=\"Selection() || item._group\"\n                  [contextMenu]=\"ContextMenu || emptyMenu\"\n                  [contextMenuSubject]=\"item\"\n                  (click)=\"handleRowClick(item, $event)\">\n\n                <!-- Cella di selezione -->\n                @if (Selection()) {\n                  <td class=\"est2-col-min est2-selcol\"\n                      [class.est2-pinned]=\"hasPinned()\"\n                      [style.left.px]=\"hasPinned() ? 0 : null\">\n                    @if (item._group) {\n                      @if (!SingleSelection()) {\n                        <input type=\"checkbox\" class=\"est2-check\"\n                               [checked]=\"groupSelectionState(item) === 'all'\"\n                               [indeterminate]=\"groupSelectionState(item) === 'some'\"\n                               [disabled]=\"SelectionDisabled()\"\n                               (click)=\"$event.stopPropagation()\"\n                               (change)=\"toggleGroupSelection(item)\"\n                               aria-label=\"Seleziona gruppo\" />\n                      }\n                    } @else {\n                      <input type=\"checkbox\" class=\"est2-check\"\n                             [checked]=\"item._selected\"\n                             [indeterminate]=\"hierarchyIndeterminate(item)\"\n                             [disabled]=\"SelectionDisabled()\"\n                             (click)=\"$event.stopPropagation()\"\n                             (change)=\"toggleRow(item)\"\n                             aria-label=\"Seleziona riga\" />\n                    }\n                  </td>\n                }\n\n                <!-- Celle da colonne (direttive / dinamica / report) -->\n                @if (usesColumns()) {\n                  <!-- Operazioni dinamiche (icone a sinistra) -->\n                  @for (op of DynamicOperations(); track op.id) {\n                    <td class=\"est2-col-min est2-op-cell\">\n                      @if (!item._group && operationVisible(op, item)) {\n                        <span class=\"est2-op\" [class]=\"op.iconClass || ''\" [title]=\"op.title\"\n                              (click)=\"$event.stopPropagation(); dynamicOperation(item, op.id)\">{{ op.text }}</span>\n                      }\n                    </td>\n                  }\n                  @for (col of visibleColumns(); track trackCol($index, col); let first = $first, ci = $index) {\n                    <td [class]=\"col.cssClass\"\n                        [style.text-align]=\"col.alignment\"\n                        [style.color]=\"cellColor(item, col, 'fore')\"\n                        [style.background-color]=\"cellColor(item, col, 'back')\"\n                        [class.est2-nowrap]=\"!col.wrap\"\n                        [class.est2-col-groupstart]=\"columnGroupBoundaries().has(ci)\"\n                        [class.est2-pinned]=\"col.pinned\"\n                        [style.left.px]=\"col.pinned ? pinnedLeftPx(ci) : null\"\n                        [style.width.px]=\"col.pinned ? pinnedWidthPx(col) : null\"\n                        [style.min-width.px]=\"col.pinned ? pinnedWidthPx(col) : null\"\n                        [style.max-width.px]=\"col.pinned ? pinnedWidthPx(col) : null\"\n                        (mouseenter)=\"onCellHover($event)\"\n                        [class.est2-td--group-key]=\"item._group && item.column === col.id\"\n                        [attr.data-r]=\"rangeActive() && !item._group ? ri : null\"\n                        [attr.data-c]=\"rangeActive() && !item._group ? ci : null\"\n                        [class.est2-cell-sel]=\"rangeActive() && inRange(ri, ci)\"\n                        [class.est2-cell-sel-t]=\"rangeActive() && inRange(ri, ci) && ri === rangeRect()!.top\"\n                        [class.est2-cell-sel-b]=\"rangeActive() && inRange(ri, ci) && ri === rangeRect()!.bottom\"\n                        [class.est2-cell-sel-l]=\"rangeActive() && inRange(ri, ci) && ci === rangeRect()!.left\"\n                        [class.est2-cell-sel-r]=\"rangeActive() && inRange(ri, ci) && ci === rangeRect()!.right\"\n                        [class.est2-cell-editing]=\"isEditing(ri, ci)\"\n                        (dblclick)=\"onCellDblClick(item, col, ri, ci)\">\n                      @if (isEditing(ri, ci)) {\n                        @if (editorFor(col); as edTpl) {\n                          <ng-container *ngTemplateOutlet=\"edTpl; context: editorContext(item, col)\"></ng-container>\n                        } @else {\n                          <ng-container *ngTemplateOutlet=\"defaultEditor; context: { $implicit: item, col: col }\"></ng-container>\n                        }\n                      } @else if (item._group) {\n                        @if (item.column === col.id) {\n                          <span class=\"est2-group-key\" [style.padding-left.px]=\"groupIndent(item)\">\n                            <span class=\"est2-group-chevron\" [class.est2-group-chevron--open]=\"item._expanded\">\n                              <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 6l6 6-6 6\"/></svg>\n                            </span>\n                            {{ groupCellDisplay(item, col) }}\n                          </span>\n                        } @else {\n                          {{ groupCellDisplay(item, col) }}\n                        }\n                      } @else {\n                        <!-- Navigatore albero nella prima colonna -->\n                        @if (Hierarchy() && first) {\n                          <span class=\"est2-hier-lead\" [style.padding-left.px]=\"hierarchyIndent(item)\">\n                            @if (item.parent) {\n                              <span class=\"est2-group-chevron est2-hier-toggle\" [class.est2-group-chevron--open]=\"item._expanded\"\n                                    (click)=\"$event.stopPropagation(); toggleHierarchyNode(item)\">\n                                <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 6l6 6-6 6\"/></svg>\n                              </span>\n                            } @else {\n                              <span class=\"est2-hier-toggle\"></span>\n                            }\n                          </span>\n                        }\n                        @if (itemCellHidden(col)) {\n                          <!-- colonna di gruppo nascosta sulla riga-oggetto -->\n                        } @else if (col.multiProp != null) {\n                          @if (col.cell?.Template) {\n                            <ng-container *ngTemplateOutlet=\"col.cell!.Template; context: { $implicit: multiCell(item, col) }\"></ng-container>\n                          } @else {\n                            {{ multiCell(item, col)?.value }}\n                          }\n                        } @else if (col.cell?.Template) {\n                          <ng-container *ngTemplateOutlet=\"col.cell!.Template; context: { $implicit: item }\"></ng-container>\n                        } @else if (col.routePath) {\n                          <a class=\"est2-link\" [routerLink]=\"routerLinkFor(item, col)\">{{ cellValue(item, col) }}</a>\n                        } @else if (col.propAccessor != null) {\n                          {{ reportCellDisplay(item, col) }}\n                        } @else if (col.type === 'enum') {\n                          {{ (cellValue(item, col) | est2_lookup : col.source).description }}\n                        } @else {\n                          {{ cellValue(item, col) | est2_format : col.type : col.format : locale }}\n                        }\n                      }\n                    </td>\n                  }\n                }\n                <!-- Celle da template semplice -->\n                @else if (bodyRef) {\n                  <ng-container *ngTemplateOutlet=\"bodyRef; context: { $implicit: item }\"></ng-container>\n                }\n\n                <!-- Rimozione (non sulle righe-gruppo) -->\n                @if (Removal()) {\n                  <td class=\"est2-col-min\">\n                    @if (!item._group && canRemove(item)) {\n                      @if (item.removed || item.deleted) {\n                        <button type=\"button\" class=\"est2-rowaction\" title=\"Ripristina\" (click)=\"abortRemoval(item)\">\u21BA</button>\n                      } @else {\n                        <button type=\"button\" class=\"est2-rowaction est2-rowaction--danger\" title=\"Rimuovi\" (click)=\"removeItem(item)\">\u2715</button>\n                      }\n                    }\n                  </td>\n                }\n                <!-- Chrome -->\n                @if (hasChrome()) { <td class=\"est2-col-min\"></td> }\n              </tr>\n              }\n            } @empty {\n              <tr>\n                <td class=\"est2-empty\" [attr.colspan]=\"totalColspan()\">Nessun elemento da visualizzare</td>\n              </tr>\n            }\n          </tbody>\n        }\n      </table>\n\n      <!-- Overlay di caricamento -->\n      @if (researchInProgress() || (firstBind() && ShowLoadingOnBootstrap())) {\n        <div class=\"est2-loading\">\n          <span class=\"est2-spinner\"></span>\n          <span>Caricamento\u2026</span>\n        </div>\n      }\n    </div>\n\n    <!-- Pager inferiore -->\n    @if (PagingStyle() === 'both' || PagingStyle() === 'bottom') {\n      <ng-container *ngTemplateOutlet=\"pager\"></ng-container>\n    }\n\n    <!-- Avviso transitorio (es. incolla con dimensioni incompatibili) -->\n    @if (notice()) {\n      <div class=\"est2-toast\" role=\"alert\">\n        <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/><path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/></svg>\n        <span>{{ notice() }}</span>\n      </div>\n    }\n\n    <!-- Dialog visibilit\u00E0 / ordine colonne -->\n    @if (columnsDialogOpen()) {\n      <div class=\"est2-dialog-backdrop\" (click)=\"closeColumnsDialog()\">\n        <div class=\"est2-dialog\" (click)=\"$event.stopPropagation()\" role=\"dialog\" aria-modal=\"true\">\n          <div class=\"est2-dialog__head\">\n            <span>\n              @if (HiddenColumns() && ColumnsOrdering()) { Visibilit\u00E0 e ordine colonne }\n              @else if (HiddenColumns()) { Visibilit\u00E0 colonne }\n              @else { Ordine colonne }\n            </span>\n            <button type=\"button\" class=\"est2-dialog__close\" (click)=\"closeColumnsDialog()\" aria-label=\"Chiudi\">\u2715</button>\n          </div>\n\n          @if (HiddenColumns()) {\n            <div class=\"est2-dialog__tools\">\n              <button type=\"button\" class=\"est2-link\" (click)=\"dialogSetAll(true)\">Mostra tutte</button>\n              <span class=\"est2-dialog__sep\">\u00B7</span>\n              <button type=\"button\" class=\"est2-link\" (click)=\"dialogSetAll(false)\">Nascondi tutte</button>\n            </div>\n          }\n\n          <ul class=\"est2-collist\">\n            @for (c of dialogCols(); track c.id; let i = $index) {\n              <li class=\"est2-collist__row\"\n                  [attr.draggable]=\"ColumnsOrdering() ? true : null\"\n                  [class.est2-collist__row--drag]=\"ColumnsOrdering()\"\n                  [class.est2-collist__row--dragging]=\"dragIndex() === i\"\n                  [class.est2-collist__row--drop-above]=\"dragOverIndex() === i && dragIndex() !== null && dragIndex()! > i\"\n                  [class.est2-collist__row--drop-below]=\"dragOverIndex() === i && dragIndex() !== null && dragIndex()! < i\"\n                  (dragstart)=\"dialogDragStart(i, $event)\"\n                  (dragover)=\"dialogDragOver(i, $event)\"\n                  (drop)=\"dialogDrop(i, $event)\"\n                  (dragend)=\"dialogDragEnd()\">\n                @if (ColumnsOrdering()) {\n                  <span class=\"est2-collist__grip\" title=\"Trascina per riordinare\" aria-hidden=\"true\">\n                    <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"currentColor\"><circle cx=\"9\" cy=\"6\" r=\"1.6\"/><circle cx=\"15\" cy=\"6\" r=\"1.6\"/><circle cx=\"9\" cy=\"12\" r=\"1.6\"/><circle cx=\"15\" cy=\"12\" r=\"1.6\"/><circle cx=\"9\" cy=\"18\" r=\"1.6\"/><circle cx=\"15\" cy=\"18\" r=\"1.6\"/></svg>\n                  </span>\n                }\n                @if (HiddenColumns()) {\n                  <label class=\"est2-collist__vis\">\n                    <input type=\"checkbox\" class=\"est2-check\" [checked]=\"c.visible\" (change)=\"dialogToggle(i)\" />\n                  </label>\n                }\n                <span class=\"est2-collist__label\">{{ c.label }}</span>\n                @if (ColumnsPinnable()) {\n                  <button type=\"button\" class=\"est2-iconbtn est2-collist__pin\" [class.est2-collist__pin--on]=\"c.pinned\"\n                          [disabled]=\"c.grouped\"\n                          [title]=\"c.grouped ? 'Le colonne di un gruppo non sono bloccabili' : (c.pinned ? 'Sblocca' : 'Blocca a sinistra')\"\n                          (click)=\"dialogTogglePin(i)\">\n                    <svg viewBox=\"0 0 24 24\" width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 17v5\"/><path d=\"M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z\"/></svg>\n                  </button>\n                }\n                @if (ColumnsOrdering()) {\n                  <span class=\"est2-collist__ord\">\n                    <button type=\"button\" class=\"est2-iconbtn\" [disabled]=\"i === 0\" title=\"Su\" (click)=\"dialogMove(i, -1)\">\u2191</button>\n                    <button type=\"button\" class=\"est2-iconbtn\" [disabled]=\"i === dialogCols().length - 1\" title=\"Gi\u00F9\" (click)=\"dialogMove(i, 1)\">\u2193</button>\n                  </span>\n                }\n              </li>\n            }\n          </ul>\n\n          <div class=\"est2-dialog__foot\">\n            <button type=\"button\" class=\"est2-btn est2-btn--ghost\" (click)=\"resetColumnsDialog()\">Ripristina</button>\n            <span class=\"est2-dialog__spacer\"></span>\n            <button type=\"button\" class=\"est2-btn est2-btn--ghost\" (click)=\"closeColumnsDialog()\">Annulla</button>\n            <button type=\"button\" class=\"est2-btn est2-btn--primary\" (click)=\"applyColumnsDialog()\">Applica</button>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<!-- Template pager riutilizzabile sopra/sotto -->\n<ng-template #pager>\n  @if (!HidePaging() && !grouped()) {\n    <es-table2-pager\n      [page]=\"currentPage()\"\n      [pages]=\"totalPages()\"\n      [total]=\"totalCount()\"\n      [itemsPerPage]=\"viewMode() ? (view()?.itemsperpageoverride ?? 15) : ArraymodeItemsPerPage()\"\n      [countLabel]=\"CountLabel()\"\n      [showCount]=\"!HidePagingCount()\"\n      [showButtons]=\"!HidePagingButtons()\"\n      [showPagingOptions]=\"!HidePagingButtons()\"\n      [allowAll]=\"AllSearch()\"\n      (pageChange)=\"goToPage($event)\"\n      (itemsPerPageChange)=\"changeItemsPerPage($event)\">\n    </es-table2-pager>\n  }\n</ng-template>\n\n<!-- Editor di cella di default (usato quando il consumer non fornisce un `*editor`) -->\n<ng-template #defaultEditor let-item let-col=\"col\">\n  @switch (col.type) {\n    @case ('enum') {\n      <select class=\"est2-editor-input\"\n              [value]=\"editDraft\"\n              (change)=\"editDraft = $any($event.target).value\"\n              (keydown.enter)=\"commitEdit(item, col)\"\n              (keydown.escape)=\"cancelEdit()\"\n              (blur)=\"commitEdit(item, col)\">\n        @for (o of col.source || []; track o.id) {\n          <option [value]=\"o.id\" [selected]=\"o.id == editDraft\">{{ o.description }}</option>\n        }\n      </select>\n    }\n    @case ('boolean') {\n      <input type=\"checkbox\" class=\"est2-editor-input est2-check\"\n             [checked]=\"editDraft === true || editDraft === 'true'\"\n             (change)=\"editDraft = $any($event.target).checked; commitEdit(item, col)\"\n             (keydown.escape)=\"cancelEdit()\" />\n    }\n    @default {\n      <input class=\"est2-editor-input\"\n             [type]=\"editorInputType(col.type)\"\n             [value]=\"editDraft\"\n             (input)=\"editDraft = $any($event.target).value\"\n             (keydown.enter)=\"commitEdit(item, col)\"\n             (keydown.escape)=\"cancelEdit()\"\n             (blur)=\"commitEdit(item, col)\" />\n    }\n  }\n</ng-template>\n\n<!-- Menu di default (nessuna operazione) usato quando il consumer non passa [ContextMenu] -->\n<context-menu #emptyMenu>\n  <ng-template contextMenuItem [passive]=\"true\"><em>Nessuna operazione disponibile\u2026</em></ng-template>\n</context-menu>\n", styles: [".est2{--est-bg: #ffffff;--est-bg-subtle: #f7f8fa;--est-bg-raised: #ffffff;--est-bg-hover: #f2f4f7;--est-bg-selected: color-mix(in srgb, var(--est-accent) 12%, transparent);--est-fg: #1a1d24;--est-fg-muted: #626b7a;--est-fg-faint: #9aa3b2;--est-border: #e6e9ef;--est-border-strong: #d3d8e0;--est-accent: #4f46e5;--est-accent-fg: #ffffff;--est-accent-weak: color-mix(in srgb, var(--est-accent) 14%, transparent);--est-danger: #dc2626;--est-warning: #d97706;--est-success: #059669;--est-shadow-sticky: 0 1px 0 var(--est-border), 0 4px 12px -8px rgba(16, 24, 40, .24);--est-shadow-pop: 0 8px 24px -6px rgba(16, 24, 40, .18), 0 2px 6px -2px rgba(16, 24, 40, .12);--est-ring: 0 0 0 3px color-mix(in srgb, var(--est-accent) 40%, transparent);--est-radius: 10px;--est-radius-sm: 6px;--est-radius-pill: 999px;--est-gap: 8px;--est-cell-py: 6px;--est-cell-px: 12px;--est-row-h: 33px;--est-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--est-fs: 13px;--est-fs-sm: 12px;--est-fw-head: 700;--est-transition: .14s cubic-bezier(.4, 0, .2, 1);--est-bg-zebra: color-mix(in srgb, var(--est-fg) 3.5%, var(--est-bg));font-family:var(--est-font);font-size:var(--est-fs);color:var(--est-fg);position:relative;display:block}@media(prefers-color-scheme:dark){.est2{--est-bg: #14161c;--est-bg-subtle: #1a1d25;--est-bg-raised: #1e222b;--est-bg-hover: #232733;--est-bg-selected: color-mix(in srgb, var(--est-accent) 26%, transparent);--est-fg: #e7eaf0;--est-fg-muted: #9aa3b2;--est-fg-faint: #6b7484;--est-border: #2a2f3a;--est-border-strong: #39404d;--est-accent: #7c74ff;--est-accent-fg: #ffffff;--est-accent-weak: color-mix(in srgb, var(--est-accent) 22%, transparent);--est-danger: #f87171;--est-warning: #fbbf24;--est-success: #34d399;--est-shadow-sticky: 0 1px 0 var(--est-border), 0 6px 16px -10px rgba(0, 0, 0, .7);--est-shadow-pop: 0 10px 28px -8px rgba(0, 0, 0, .6), 0 2px 6px -2px rgba(0, 0, 0, .5);--est-ring: 0 0 0 3px color-mix(in srgb, var(--est-accent) 55%, transparent)}}.est2.est2--dark{--est-bg: #14161c;--est-bg-subtle: #1a1d25;--est-bg-raised: #1e222b;--est-bg-hover: #232733;--est-bg-selected: color-mix(in srgb, var(--est-accent) 26%, transparent);--est-fg: #e7eaf0;--est-fg-muted: #9aa3b2;--est-fg-faint: #6b7484;--est-border: #2a2f3a;--est-border-strong: #39404d;--est-accent: #7c74ff;--est-accent-fg: #ffffff;--est-accent-weak: color-mix(in srgb, var(--est-accent) 22%, transparent);--est-danger: #f87171;--est-warning: #fbbf24;--est-success: #34d399;--est-shadow-sticky: 0 1px 0 var(--est-border), 0 6px 16px -10px rgba(0, 0, 0, .7);--est-shadow-pop: 0 10px 28px -8px rgba(0, 0, 0, .6), 0 2px 6px -2px rgba(0, 0, 0, .5);--est-ring: 0 0 0 3px color-mix(in srgb, var(--est-accent) 55%, transparent)}.est2.est2--light{--est-bg: #ffffff;--est-bg-subtle: #f7f8fa;--est-bg-raised: #ffffff;--est-bg-hover: #f2f4f7;--est-bg-selected: color-mix(in srgb, var(--est-accent) 12%, transparent);--est-fg: #1a1d24;--est-fg-muted: #626b7a;--est-fg-faint: #9aa3b2;--est-border: #e6e9ef;--est-border-strong: #d3d8e0;--est-accent: #4f46e5;--est-accent-fg: #ffffff;--est-accent-weak: color-mix(in srgb, var(--est-accent) 14%, transparent);--est-danger: #dc2626;--est-warning: #d97706;--est-success: #059669;--est-shadow-sticky: 0 1px 0 var(--est-border), 0 4px 12px -8px rgba(16, 24, 40, .24);--est-shadow-pop: 0 8px 24px -6px rgba(16, 24, 40, .18), 0 2px 6px -2px rgba(16, 24, 40, .12);--est-ring: 0 0 0 3px color-mix(in srgb, var(--est-accent) 40%, transparent)}.est2.est2--dense{--est-cell-py: 3px;--est-cell-px: 9px;--est-row-h: 27px;--est-fs: 12.5px}.est2 *,.est2 *:before,.est2 *:after{box-sizing:border-box}.est2 .est2-scroll{position:relative;width:100%;overflow:auto;border:1px solid var(--est-border);border-radius:var(--est-radius);background:var(--est-bg);-webkit-overflow-scrolling:touch}.est2 table.est2-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--est-bg)}.est2 thead th{position:sticky;top:0;z-index:3;background:var(--est-bg-subtle);color:var(--est-fg);font-weight:var(--est-fw-head);font-size:var(--est-fs);text-align:left;white-space:nowrap;padding:var(--est-cell-py) var(--est-cell-px);border-bottom:1px solid var(--est-border);box-shadow:var(--est-shadow-sticky);-webkit-user-select:none;user-select:none}.est2 thead tr.est2-hgroup-row th{font-size:var(--est-fs-sm);font-weight:700;color:var(--est-fg-muted);text-align:center;white-space:nowrap;padding:var(--est-cell-py) var(--est-cell-px);background:var(--est-bg-subtle);border-bottom:1px solid var(--est-border)}.est2 thead tr.est2-hgroup-row th.est2-hgroup{color:var(--est-fg);border-left:1px solid var(--est-border);border-right:1px solid var(--est-border)}.est2 thead tr.est2-hgroup-row th:not(.est2-hgroup){background:var(--est-bg-subtle);border-bottom-color:transparent}.est2 thead tr:last-child th.est2-col-groupstart,.est2 tbody td.est2-col-groupstart{border-left:1px solid var(--est-border)}.est2 tbody td{padding:var(--est-cell-py) var(--est-cell-px);border-bottom:1px solid var(--est-border);color:var(--est-fg);vertical-align:middle;background:transparent}.est2 tbody tr:nth-child(2n) td{background:var(--est-bg-zebra)}.est2 tbody tr:nth-child(2n) td.est2-pinned{background:var(--est-bg-zebra)}.est2 th.est2-pinned,.est2 td.est2-pinned{position:sticky;background:var(--est-bg);box-shadow:1px 0 0 var(--est-border)}.est2 thead th.est2-pinned{position:sticky}.est2 .est2-resize-handle{position:absolute;top:0;right:-3px;width:10px;height:100%;cursor:col-resize;z-index:2;touch-action:none;-webkit-user-select:none;user-select:none}.est2 .est2-resize-handle:after{content:\"\";position:absolute;top:28%;bottom:28%;right:3px;width:2px;border-radius:2px;background:color-mix(in srgb,var(--est-fg) 30%,transparent);transition:background var(--est-transition),top var(--est-transition),bottom var(--est-transition)}.est2 .est2-resize-handle:hover:after{background:var(--est-accent);top:15%;bottom:15%}.est2 thead th.est2-pinned .est2-resize-handle:active:after{background:var(--est-accent);top:6%;bottom:6%}.est2 td.est2-pinned{overflow:hidden;text-overflow:ellipsis}.est2 .est2-selcol{width:44px;min-width:44px;max-width:44px}.est2 td.est2-pinned{z-index:3}.est2 thead th.est2-pinned,.est2 thead tr.est2-hgroup-row th.est2-pinned{z-index:6;background:var(--est-bg-subtle)}.est2 tbody tr:hover td.est2-pinned{background:color-mix(in srgb,var(--est-fg) 5%,var(--est-bg))}.est2 tbody tr.est2-row--selected td.est2-pinned{background:color-mix(in srgb,var(--est-accent) 12%,var(--est-bg))}.est2 tbody tr.est2-row--group td.est2-pinned{background:var(--est-bg-subtle)}.est2 .est2-pinbtn{display:inline-flex;align-items:center;justify-content:center;margin-left:4px;padding:2px;border:none;background:transparent;color:var(--est-fg-faint);border-radius:var(--est-radius-sm);cursor:pointer;opacity:0;transition:opacity var(--est-transition),color var(--est-transition),background var(--est-transition)}.est2 thead th:hover .est2-pinbtn{opacity:.7}.est2 .est2-pinbtn:hover{background:var(--est-bg-hover);color:var(--est-fg);opacity:1}.est2 .est2-pinbtn--on{opacity:1;color:var(--est-accent);transform:rotate(0)}.est2 thead th:hover .est2-pinbtn--on{opacity:1}.est2 .est2-collist__pin.est2-collist__pin--on{color:var(--est-accent);border-color:var(--est-accent)}.est2 tbody tr{height:var(--est-row-h);transition:background var(--est-transition)}.est2 tbody tr:last-child td{border-bottom:none}.est2 tbody tr:hover td{background:var(--est-bg-hover)}.est2 tbody tr.est2-row--selected td{background:var(--est-bg-selected)}.est2 tbody tr.est2-row--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.est2 tbody tr.est2-row--removed td{text-decoration:line-through;color:var(--est-fg-faint)}.est2 .est2-table--range tbody td[data-r]{cursor:cell}.est2 .est2-table--dragging,.est2 .est2-table--dragging tbody td{-webkit-user-select:none;user-select:none}.est2 tbody td.est2-cell-sel{background:color-mix(in srgb,var(--est-accent) 14%,transparent)}.est2 tbody td.est2-cell-sel-t{box-shadow:inset 0 2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-b{box-shadow:inset 0 -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-l{box-shadow:inset 2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-r{box-shadow:inset -2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-l{box-shadow:inset 2px 2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-r{box-shadow:inset -2px 2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-b.est2-cell-sel-l{box-shadow:inset 2px -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-b.est2-cell-sel-r{box-shadow:inset -2px -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-b{box-shadow:inset 0 2px 0 0 var(--est-accent),inset 0 -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-l.est2-cell-sel-r{box-shadow:inset 2px 0 0 0 var(--est-accent),inset -2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-b.est2-cell-sel-l{box-shadow:inset 2px 2px 0 0 var(--est-accent),inset 0 -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-b.est2-cell-sel-r{box-shadow:inset -2px 2px 0 0 var(--est-accent),inset 0 -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-l.est2-cell-sel-r{box-shadow:inset 2px 2px 0 0 var(--est-accent),inset -2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-b.est2-cell-sel-l.est2-cell-sel-r{box-shadow:inset 2px -2px 0 0 var(--est-accent),inset -2px 0 0 0 var(--est-accent)}.est2 tbody td.est2-cell-sel-t.est2-cell-sel-b.est2-cell-sel-l.est2-cell-sel-r{box-shadow:inset 2px 2px 0 0 var(--est-accent),inset -2px -2px 0 0 var(--est-accent)}.est2 tbody td.est2-cell-editing{padding:2px 6px}.est2 .est2-editor-input{width:100%;box-sizing:border-box;height:calc(var(--est-row-h) - 8px);padding:2px 6px;font:inherit;color:var(--est-fg);background:var(--est-bg);border:1.5px solid var(--est-accent);border-radius:var(--est-radius-sm);outline:none}.est2 .est2-editor-input:focus-visible{box-shadow:var(--est-ring)}.est2 input.est2-editor-input[type=checkbox]{width:16px;height:16px}.est2 .est2-autoupdate{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:4px 2px 8px;font-size:var(--est-fs-sm);color:var(--est-fg-muted)}.est2 .est2-autoupdate__label{display:inline-flex;align-items:center;gap:6px}.est2 .est2-autoupdate__secs{width:44px;text-align:center;padding:3px 4px;font:inherit;color:var(--est-fg);background:var(--est-bg);border:1px solid var(--est-border);border-radius:var(--est-radius-sm);outline:none}.est2 .est2-autoupdate__secs:focus-visible{box-shadow:var(--est-ring);border-color:var(--est-accent)}.est2 .est2-switch{position:relative;display:inline-flex;width:38px;height:20px;cursor:pointer}.est2 .est2-switch input{position:absolute;opacity:0;width:0;height:0}.est2 .est2-switch__slider{flex:1;border-radius:var(--est-radius-pill);background:var(--est-border-strong);transition:background var(--est-transition)}.est2 .est2-switch__slider:before{content:\"\";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #00000040;transition:transform var(--est-transition)}.est2 .est2-switch input:checked+.est2-switch__slider{background:var(--est-accent)}.est2 .est2-switch input:checked+.est2-switch__slider:before{transform:translate(18px)}.est2 .est2-switch input:focus-visible+.est2-switch__slider{box-shadow:var(--est-ring)}.est2 .est2-toast{position:absolute;left:50%;bottom:14px;transform:translate(-50%);z-index:20;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 24px);padding:8px 14px;font-size:13px;font-weight:500;color:#fff;background:#b91c1c;border-radius:var(--est-radius);box-shadow:0 6px 20px #00000040;animation:est2-toast-in .16s ease-out}.est2 .est2-toast svg{flex:0 0 auto}@keyframes est2-toast-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}@media(prefers-reduced-motion:reduce){.est2 .est2-toast{animation:none}}.est2 tbody tr.est2-row--group{cursor:pointer;-webkit-user-select:none;user-select:none}.est2 tbody tr.est2-row--group td{background:var(--est-bg-subtle);font-weight:600;color:var(--est-fg);border-bottom:1px solid var(--est-border)}.est2 tbody tr.est2-row--group:hover td{background:var(--est-bg-hover)}.est2 .est2-td--group-key{color:var(--est-fg)}.est2 .est2-group-key{display:inline-flex;align-items:center;gap:6px}.est2 .est2-group-chevron{display:inline-flex;color:var(--est-fg-muted);transition:transform var(--est-transition)}.est2 .est2-group-chevron--open{transform:rotate(90deg)}.est2 .est2-hier-lead{display:inline-flex;align-items:center;vertical-align:middle;margin-right:4px}.est2 .est2-hier-toggle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none}.est2 .est2-group-chevron.est2-hier-toggle{cursor:pointer;border-radius:var(--est-radius-sm);transition:transform var(--est-transition),background var(--est-transition),color var(--est-transition)}.est2 .est2-group-chevron.est2-hier-toggle:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 th.est2-th--orderable{cursor:pointer;transition:color var(--est-transition)}.est2 th.est2-th--orderable:hover{color:var(--est-fg)}.est2 .est2-th__inner{display:inline-flex;align-items:center;gap:6px}.est2 .est2-sort{display:inline-flex;width:14px;height:14px;opacity:.35;transition:opacity var(--est-transition),transform var(--est-transition)}.est2 .est2-sort--active{opacity:1;color:var(--est-accent)}.est2 .est2-sort--desc{transform:rotate(180deg)}.est2 .est2-sort__badge{font-size:9px;font-weight:700;color:var(--est-accent);margin-left:2px}.est2 .est2-check{appearance:none;width:16px;height:16px;border:1.5px solid var(--est-border-strong);border-radius:var(--est-radius-sm);background:var(--est-bg);cursor:pointer;position:relative;transition:border-color var(--est-transition),background var(--est-transition);vertical-align:middle;flex:none}.est2 .est2-check:hover{border-color:var(--est-accent)}.est2 .est2-check:checked{background:var(--est-accent);border-color:var(--est-accent)}.est2 .est2-check:checked:after{content:\"\";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid var(--est-accent-fg);border-width:0 2px 2px 0;transform:rotate(45deg)}.est2 .est2-check:focus-visible{outline:none;box-shadow:var(--est-ring)}.est2 .est2-check:indeterminate{background:var(--est-accent);border-color:var(--est-accent)}.est2 .est2-check:indeterminate:after{content:\"\";position:absolute;left:3px;top:6px;width:8px;height:2px;background:var(--est-accent-fg);transform:none;border:none}.est2 th.est2-col-min,.est2 td.est2-col-min{width:1%;white-space:nowrap}.est2 .est2-wrap{position:relative}.est2 .est2-selectbar{position:absolute;top:0;left:0;right:0;z-index:15;display:flex;align-items:center;gap:12px;padding:9px 14px;font-size:var(--est-fs-sm);color:var(--est-fg);background:var(--est-bg-subtle);border:none;border-radius:var(--est-radius) var(--est-radius) 0 0;box-shadow:inset 3px 0 0 var(--est-accent)}.est2 .est2-selectbar strong{color:var(--est-fg);font-weight:700}.est2 .est2-selectbar__spacer{flex:1 1 auto}.est2 .est2-link{color:var(--est-accent);cursor:pointer;font-weight:600}.est2 .est2-link:hover{text-decoration:underline}.est2 .est2-rowaction{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--est-radius-sm);border:none;background:transparent;color:var(--est-fg-faint);cursor:pointer;transition:background var(--est-transition),color var(--est-transition)}.est2 .est2-rowaction:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-rowaction--danger:hover{color:var(--est-danger)}.est2 .est2-op-cell{text-align:center}.est2 .est2-op{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 6px;border-radius:var(--est-radius-sm);color:var(--est-accent);cursor:pointer;font-size:var(--est-fs-sm);transition:background var(--est-transition)}.est2 .est2-op:hover{background:var(--est-accent-weak)}.est2 .est2-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;background:color-mix(in srgb,var(--est-bg) 70%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:5;color:var(--est-fg-muted);font-size:var(--est-fs-sm)}.est2 .est2-spinner{width:16px;height:16px;border:2px solid var(--est-border-strong);border-top-color:var(--est-accent);border-radius:50%;animation:est2-spin .7s linear infinite}@keyframes est2-spin{to{transform:rotate(360deg)}}.est2 .est2-nowrap{white-space:nowrap}.est2 .est2-cornermenu{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--est-radius-sm);cursor:pointer;color:var(--est-fg-muted);transition:background var(--est-transition)}.est2 .est2-cornermenu:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-chrome-th{position:relative}.est2 .est2-chrome{display:inline-flex;align-items:center;gap:2px}.est2 .est2-chrome-wrap{position:relative;display:inline-flex}.est2 .est2-chrome-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;border-radius:var(--est-radius-sm);color:var(--est-fg-muted);cursor:pointer;font-size:16px;line-height:1;transition:background var(--est-transition),color var(--est-transition)}.est2 .est2-chrome-btn:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:30;min-width:180px;padding:4px;background:var(--est-bg);border:1px solid var(--est-border);border-radius:var(--est-radius);box-shadow:0 8px 24px #0000002e;display:flex;flex-direction:column}.est2 .est2-menu-item{display:block;width:100%;padding:8px 10px;border:none;background:transparent;text-align:left;font:inherit;color:var(--est-fg);border-radius:var(--est-radius-sm);cursor:pointer}.est2 .est2-menu-item:hover{background:var(--est-bg-hover)}.est2 .est2-dialog-backdrop{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px;background:color-mix(in srgb,#000 32%,transparent)}.est2 .est2-dialog{width:520px;max-width:calc(100vw - 32px);max-height:100%;display:flex;flex-direction:column;background:var(--est-bg);color:var(--est-fg);border:1px solid var(--est-border);border-radius:var(--est-radius);box-shadow:0 16px 48px #0000004d;overflow:hidden}.est2 .est2-dialog__head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-weight:700;border-bottom:1px solid var(--est-border)}.est2 .est2-dialog__close{border:none;background:transparent;cursor:pointer;color:var(--est-fg-muted);font-size:15px;line-height:1;padding:4px;border-radius:var(--est-radius-sm)}.est2 .est2-dialog__close:hover{background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-dialog__tools{padding:8px 14px;font-size:var(--est-fs-sm);border-bottom:1px solid var(--est-border)}.est2 .est2-dialog__tools .est2-link{border:none;background:none;padding:0;font:inherit;font-weight:600}.est2 .est2-dialog__sep{margin:0 6px;color:var(--est-fg-faint)}.est2 .est2-collist{list-style:none;margin:0;padding:6px;overflow-y:auto}.est2 .est2-collist__row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--est-radius-sm)}.est2 .est2-collist__row:hover{background:var(--est-bg-hover)}.est2 .est2-collist__row--drag{cursor:grab}.est2 .est2-collist__row--drag:active{cursor:grabbing}.est2 .est2-collist__row--dragging{opacity:.45;background:var(--est-bg-hover)}.est2 .est2-collist__row--drop-above{box-shadow:inset 0 2px 0 0 var(--est-accent)}.est2 .est2-collist__row--drop-below{box-shadow:inset 0 -2px 0 0 var(--est-accent)}.est2 .est2-collist__grip{display:inline-flex;align-items:center;justify-content:center;color:var(--est-fg-faint);cursor:grab;flex:0 0 auto}.est2 .est2-collist__grip:active{cursor:grabbing}.est2 .est2-collist__row--drag:hover .est2-collist__grip{color:var(--est-fg-muted)}.est2 .est2-collist__vis{display:inline-flex}.est2 .est2-collist__label{flex:1 1 auto}.est2 .est2-collist__ord{display:inline-flex;gap:4px}.est2 .est2-iconbtn{width:26px;height:26px;border:1px solid var(--est-border);background:var(--est-bg);border-radius:var(--est-radius-sm);color:var(--est-fg-muted);cursor:pointer}.est2 .est2-iconbtn:hover:not(:disabled){background:var(--est-bg-hover);color:var(--est-fg)}.est2 .est2-iconbtn:disabled{opacity:.4;cursor:default}.est2 .est2-dialog__foot{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--est-border)}.est2 .est2-dialog__spacer{flex:1 1 auto}.est2 .est2-btn{padding:7px 14px;border-radius:var(--est-radius-sm);font:inherit;font-weight:600;cursor:pointer;border:1px solid transparent}.est2 .est2-btn--ghost{background:transparent;color:var(--est-fg);border-color:var(--est-border)}.est2 .est2-btn--ghost:hover{background:var(--est-bg-hover)}.est2 .est2-btn--primary{background:var(--est-accent);color:var(--est-accent-fg)}.est2 .est2-btn--primary:hover{filter:brightness(1.05)}.est2 .est2-empty{padding:48px 16px;text-align:center;color:var(--est-fg-faint);font-size:var(--est-fs-sm)}.ngx-contextmenu{--ctx-bg: #ffffff;--ctx-fg: #1a1d24;--ctx-muted: #626b7a;--ctx-border: #e6e9ef;--ctx-hover: #f2f4f7;--ctx-accent: #4f46e5;--ctx-shadow: 0 10px 28px -8px rgba(16, 24, 40, .22), 0 2px 8px -3px rgba(16, 24, 40, .14);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.ngx-contextmenu .dropdown-menu{display:block;min-width:200px;margin:0;padding:6px;list-style:none;background:var(--ctx-bg);border:1px solid var(--ctx-border);border-radius:12px;box-shadow:var(--ctx-shadow);animation:est2-ctx-in .12s cubic-bezier(.16,1,.3,1)}.ngx-contextmenu li{list-style:none;margin:0}.ngx-contextmenu li>a{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:7px;color:var(--ctx-fg);font-size:13.5px;line-height:1.2;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .12s ease,color .12s ease}.ngx-contextmenu li>a:hover,.ngx-contextmenu li>a:focus{background:var(--ctx-hover);color:var(--ctx-fg);text-decoration:none;outline:none}.ngx-contextmenu li.divider,.ngx-contextmenu li[role=separator]{height:1px;margin:6px 8px;padding:0;background:var(--ctx-border)}.ngx-contextmenu li.disabled>a,.ngx-contextmenu li[aria-disabled=true]>a{color:var(--ctx-muted);opacity:.55;pointer-events:none}@media(prefers-color-scheme:dark){.ngx-contextmenu{--ctx-bg: #1e222b;--ctx-fg: #e7eaf0;--ctx-muted: #9aa3b2;--ctx-border: #2a2f3a;--ctx-hover: #232733;--ctx-accent: #7c74ff;--ctx-shadow: 0 12px 30px -8px rgba(0, 0, 0, .6), 0 2px 8px -3px rgba(0, 0, 0, .5)}}@keyframes est2-ctx-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.ngx-contextmenu .dropdown-menu{animation:none}}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -8790,6 +9028,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImpo
             }], onDocClick: [{
                 type: HostListener,
                 args: ['document:click']
+            }], onResizeMove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }], onResizeEnd: [{
+                type: HostListener,
+                args: ['document:mouseup']
             }] } });
 
 const MODULES = [