@esfaenza/es-table 20.3.13 → 20.3.15

package/fesm2022/esfaenza-es-table.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, input, EventEmitter, signal, computed, effect, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, Input, Self, Directive, Optional, ContentChildren, InjectionToken, Inject, HostListener, Pipe, model, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { Injectable, input, EventEmitter, signal, computed, effect, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, Input, Self, Directive, Optional, ContentChildren, InjectionToken, Inject, HostListener, Pipe, model, ViewChild, ContentChild, output, linkedSignal, HostBinding, NgModule } from '@angular/core';
 import * as i2 from '@esfaenza/localizations';
 import { LocalizationService, LocalizationModule } from '@esfaenza/localizations';
 import * as i5 from '@esfaenza/extensions';
@@ -1263,8 +1263,15 @@ class ColumnMetadataHandler {
         let newHeaders = [];
         // Se devo finalizzare aggancio tutte le variabili di bind
         if (finalize) {
+            // Mappa ID -> header costruita una sola volta (evita il .filter() lineare per ogni OrderDirective)
+            let headersById = new Map();
+            for (let h = 0; h < this.est.TMPRowTHs.length; h++) {
+                let header = this.est.TMPRowTHs[h];
+                if (!headersById.has(header.ID))
+                    headersById.set(header.ID, header);
+            }
             this.est.OrderDirectives.forEach(o => {
-                let heaedrItem = this.est.TMPRowTHs.filter(t => t.ID == o)[0];
+                let heaedrItem = headersById.get(o);
                 if (heaedrItem)
                     newHeaders.push(heaedrItem);
             });
@@ -1273,8 +1280,16 @@ class ColumnMetadataHandler {
             for (let i = 0; i < this.est.RowContexts.length; i++) {
                 let context = this.est.TMPRowTDs[this.est.RowContexts[i]];
                 let newContext = [];
+                // Mappa ID -> signal costruita una sola volta per riga: il getter del signal viene invocato
+                // una volta per cella invece di una volta per ogni (colonna × OrderDirective)
+                let contextById = new Map();
+                for (let c = 0; c < context.length; c++) {
+                    let id = context[c]().ID;
+                    if (!contextById.has(id))
+                        contextById.set(id, context[c]);
+                }
                 this.est.OrderDirectives.forEach(o => {
-                    let contextItem = context.filter(t => t().ID == o)[0];
+                    let contextItem = contextById.get(o);
                     // potrebbe esser undefined nel caso ci fossero colonne sotto thIf
                     if (contextItem)
                         newContext.push(contextItem);
@@ -1669,7 +1684,6 @@ class HierarchyModeHandler {
             this.orderItemsInPlace(objs);
     }
     orderItemsInPlace(items) {
-        debugger;
         let ownKey = this.est.OwnKey();
         let parentKey = this.est.ParentKey();
         const childrenMap = new Map();
@@ -3529,9 +3543,15 @@ class Logger {
     constructor(debugMode) {
         this.debugMode = debugMode;
     }
+    /**
+     * Emette un log a console solo se la modalità debug è attiva.
+     *
+     * Il testo può essere passato come funzione (**lazy**): in tal caso viene valutato solo quando il debug è attivo,
+     * evitando di costruire stringhe costose (es. interpolazioni per-cella) quando i log sono disabilitati.
+     */
     log(text) {
         if (this.debugMode)
-            console.log("[@esfaenza/es-table @ " + (new Date()).toISOString() + "] " + text);
+            console.log("[@esfaenza/es-table @ " + (new Date()).toISOString() + "] " + (typeof text === 'function' ? text() : text));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: Logger, deps: [{ token: EST_DEBUG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: Logger, providedIn: "root" }); }
@@ -3861,7 +3881,7 @@ class EstRendererPipe {
             this.logger.log(`Renderer retrieved in a non performant way`);
             EsTd = params.src.find((item) => item.tdForProperty === propName);
         }
-        this.logger.log(`Renderer ${EsTd ? 'found' : 'NOT found'} for '${propName}${params.name ? '/' + params.name : ''}'${!EsTd ? '. Using fallback renderer' : ''}`);
+        this.logger.log(() => `Renderer ${EsTd ? 'found' : 'NOT found'} for '${propName}${params.name ? '/' + params.name : ''}'${!EsTd ? '. Using fallback renderer' : ''}`);
         var ret = EsTd ? EsTd.Template : params.fallback;
         return ret;
     }
@@ -3898,7 +3918,7 @@ class EstEditorPipe {
             this.logger.log(`Editor retrieved in a non performant way`);
             Editor = params.src.find((item) => item.editorForProperty === propName);
         }
-        this.logger.log(`Editor ${Editor ? 'found' : 'NOT found'} for '${propName}${params.name ? '/' + params.name : ''}'${!Editor ? '. Using fallback editor' : ''}`);
+        this.logger.log(() => `Editor ${Editor ? 'found' : 'NOT found'} for '${propName}${params.name ? '/' + params.name : ''}'${!Editor ? '. Using fallback editor' : ''}`);
         var ret = Editor ? Editor.Template : params.fallback;
         return ret;
     }
@@ -4957,69 +4977,77 @@ class EsTableComponent {
         let contextFixeds = {};
         for (let i = 0; i < tds.length; i++) {
             let td = tds[i];
+            // Valori costanti per colonna: calcolati una sola volta invece che per ogni riga
+            let key = td.td;
+            let th = this.thsCache[td.td];
+            if (!!th)
+                th._referenced = true;
+            // Skippare senza th (casistica tabella dinamica)
+            if (!(th && th.thIf && (td.tdIf || th.thGroup)))
+                continue;
+            let thCasted = th;
+            let colDef = columnsCache[td.td];
+            let isFixed = th.thFixed || th.thGroup || th.thPinned;
+            let multiProp = td._multi ? td.td.split('_')[0] : null;
+            let multiIndex = td._multi ? td.td.split('_')[1] : null;
+            let alignment = (td.tdAlignment || th.thAlignment || defaultAlignment).toLowerCase();
+            let format = td.tdFormat || th.thFormat;
+            let template = thCasted.thGroup && !this.ShowItemGroupsColumns ? null : td.Template;
+            let groupClass = thCasted.thGroupClass || '';
             for (let i = 0; i < bs.length; i++) {
                 let item = bs[i];
                 let ctx = item._hash;
-                let key = td.td;
-                let th = this.thsCache[td.td];
-                if (!!th)
-                    th._referenced = true;
-                // Skippare senza th (casistica tabella dinamica)
-                if (th && th.thIf && (td.tdIf || th.thGroup)) {
-                    let thCasted = th;
-                    let isFixed = th.thFixed || th.thGroup || th.thPinned;
-                    let itemToAdd = item._item ?
-                        {
-                            LeftBorder: thCasted._lbord,
-                            RightBorder: thCasted._rbord,
-                            ID: key,
-                            Pinned: columnsCache[td.td].pinned,
-                            PinnedWidth: thCasted.thPinnedWidth,
-                            GroupHeader: false,
-                            GroupAggregation: false,
-                            Visible: columnsCache[td.td].visible,
-                            Wraps: false,
-                            Class: td.tdClass,
-                            IconClass: td.tdIconClass,
-                            ConditionField: td.tdConditionField,
-                            ConditionValue: td.tdConditionValue,
-                            Title: td.tdTitle,
-                            Content: td.tdContent,
-                            Template: thCasted.thGroup && !this.ShowItemGroupsColumns ? null : td.Template,
-                            Multi: td._multi,
-                            MultiProp: td._multi ? td.td.split('_')[0] : null,
-                            MultiIndex: td._multi ? td.td.split('_')[1] : null,
-                            Alignment: (td.tdAlignment || th.thAlignment || defaultAlignment).toLowerCase(),
-                            Format: td.tdFormat || th.thFormat,
-                            PropertyName: th.thProperty,
-                            PropertyType: th.thType,
-                            PropertySource: th.thSource,
-                            EditorOptions: th.thEditorOptions,
-                            PropAccessor: td.tdPropertyAccessor,
-                            RoutePath: thCasted.thRoutePath,
-                            RouteParameterProperties: thCasted.thRouteParameterProperties
-                        } :
-                        {
-                            LeftBorder: thCasted._lbord,
-                            RightBorder: thCasted._rbord,
-                            ID: key,
-                            Pinned: columnsCache[td.td].pinned,
-                            PinnedWidth: thCasted.thPinnedWidth,
-                            GroupHeader: thCasted.thGroup,
-                            GroupAggregation: !!thCasted.thAggregation,
-                            Visible: columnsCache[td.td].visible,
-                            Wraps: false,
-                            Class: thCasted.thGroupClass || '',
-                            Content: this.rowGrouping_H.getGroupCellDisplay(item, key, th)
-                        };
-                    if (this.TMPRowTDs[ctx]) {
-                        this.TMPRowTDs[ctx].push(signal(itemToAdd));
-                    }
-                    else {
-                        this.RowContexts.push(ctx);
-                        this.TMPRowTDs[ctx] = [signal(itemToAdd)];
-                        contextFixeds[ctx] = isFixed ? 1 : 0;
-                    }
+                let itemToAdd = item._item ?
+                    {
+                        LeftBorder: thCasted._lbord,
+                        RightBorder: thCasted._rbord,
+                        ID: key,
+                        Pinned: colDef.pinned,
+                        PinnedWidth: thCasted.thPinnedWidth,
+                        GroupHeader: false,
+                        GroupAggregation: false,
+                        Visible: colDef.visible,
+                        Wraps: false,
+                        Class: td.tdClass,
+                        IconClass: td.tdIconClass,
+                        ConditionField: td.tdConditionField,
+                        ConditionValue: td.tdConditionValue,
+                        Title: td.tdTitle,
+                        Content: td.tdContent,
+                        Template: template,
+                        Multi: td._multi,
+                        MultiProp: multiProp,
+                        MultiIndex: multiIndex,
+                        Alignment: alignment,
+                        Format: format,
+                        PropertyName: th.thProperty,
+                        PropertyType: th.thType,
+                        PropertySource: th.thSource,
+                        EditorOptions: th.thEditorOptions,
+                        PropAccessor: td.tdPropertyAccessor,
+                        RoutePath: thCasted.thRoutePath,
+                        RouteParameterProperties: thCasted.thRouteParameterProperties
+                    } :
+                    {
+                        LeftBorder: thCasted._lbord,
+                        RightBorder: thCasted._rbord,
+                        ID: key,
+                        Pinned: colDef.pinned,
+                        PinnedWidth: thCasted.thPinnedWidth,
+                        GroupHeader: thCasted.thGroup,
+                        GroupAggregation: !!thCasted.thAggregation,
+                        Visible: colDef.visible,
+                        Wraps: false,
+                        Class: groupClass,
+                        Content: this.rowGrouping_H.getGroupCellDisplay(item, key, th)
+                    };
+                if (this.TMPRowTDs[ctx]) {
+                    this.TMPRowTDs[ctx].push(signal(itemToAdd));
+                }
+                else {
+                    this.RowContexts.push(ctx);
+                    this.TMPRowTDs[ctx] = [signal(itemToAdd)];
+                    contextFixeds[ctx] = isFixed ? 1 : 0;
                 }
             }
         }
@@ -5196,7 +5224,6 @@ class EsTableComponent {
      * @returns {boolean} **true** se l'operaizone è andata a buon fine, **false** altrimenti
      */
     handleClick(event, item) {
-        debugger;
         this.selection_H.clearSelectionStatusExcluding(undefined);
         let selecteditems = [];
         if (event.shiftKey && this.ShiftClick() && !this.SingleSelection()) {
@@ -5636,7 +5663,6 @@ class EsTableComponent {
     //* Piango ancora
     // Gestione Embedding
     showDialog(dlg, elementRef) {
-        debugger;
         dlg.show();
         this.retries = 0;
         if (this.emb.Embedded)
@@ -5768,6 +5794,2591 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImpo
 class EsTableModuleConfig {
 }
 
+/**
+ * Formattazione di presentazione per il renderer di default (celle senza template).
+ * Self-contained (Intl / Date nativi) per non trascinare dipendenze esterne.
+ *
+ * `format` opzionale sovrascrive il default per tipo:
+ *  - numerici  → "F2" = 2 decimali fissi
+ *  - date      → pattern accettato da Intl (fallback a locale corto)
+ */
+class Est2FormatPipe {
+    transform(value, type, format, locale) {
+        if (value == null || value === '')
+            return '';
+        switch (type) {
+            case 'int':
+            case 'number':
+                return this.num(value, format, locale, 0);
+            case 'float':
+                return this.num(value, format, locale, undefined);
+            case 'currency':
+                return this.num(value, format, locale, 2);
+            case 'date':
+                return this.date(value, locale, false);
+            case 'datetime':
+                return this.date(value, locale, true);
+            case 'boolean':
+                return value === true || value === 'true' ? '✓' : value === false || value === 'false' ? '—' : String(value);
+            default:
+                return String(value);
+        }
+    }
+    num(value, format, locale, defDigits) {
+        const n = typeof value === 'number' ? value : parseFloat(String(value).replace(',', '.'));
+        if (isNaN(n))
+            return String(value);
+        let digits = defDigits;
+        if (format && /^F\d+$/.test(format))
+            digits = parseInt(format.slice(1), 10);
+        return n.toLocaleString(locale || undefined, digits != null ? { minimumFractionDigits: digits, maximumFractionDigits: digits } : undefined);
+    }
+    date(value, locale, withTime) {
+        const d = value instanceof Date ? value : new Date(value);
+        if (isNaN(d.getTime()))
+            return String(value);
+        return d.toLocaleString(locale || undefined, withTime
+            ? { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }
+            : { year: 'numeric', month: '2-digit', day: '2-digit' });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: Est2FormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.28", ngImport: i0, type: Est2FormatPipe, isStandalone: false, name: "est2_format" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: Est2FormatPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'est2_format', standalone: false }]
+        }] });
+
+/**
+ * Risolve un valore verso il suo `{ id, description }` in una sorgente enum.
+ * Pura: ricalcola solo quando cambiano `value` o `source`.
+ */
+class Est2LookupPipe {
+    transform(value, source) {
+        if (source)
+            for (const entry of source)
+                if (entry.id == value)
+                    return entry;
+        return { id: '', description: value == null ? '' : String(value) };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: Est2LookupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.28", ngImport: i0, type: Est2LookupPipe, isStandalone: false, name: "est2_lookup" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: Est2LookupPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'est2_lookup', standalone: false }]
+        }] });
+
+/** Abilita il logging a console */
+const EST2_DEBUG = new InjectionToken('EST2_DEBUG');
+/** Espressione ACL globale che abilita/disabilita l'export */
+const EST2_EXPORT_GLOBAL_ACL = new InjectionToken('EST2_EXPORT_GLOBAL_ACL');
+/** Valori di default per-progetto degli Input */
+const EST2_DEFAULTS = new InjectionToken('EST2_DEFAULTS');
+
+// =============================================================================
+//  es-table2 — motore di raggruppamento/aggregazione lato client (array mode)
+// -----------------------------------------------------------------------------
+//  Funzioni pure: dato un array piatto, le colonne di raggruppamento (in ordine)
+//  e le specifiche di aggregazione, produce una lista piatta di righe-gruppo e
+//  righe-oggetto già ordinate per la visualizzazione ad albero.
+// =============================================================================
+/**
+ * Estrae le specifiche di aggregazione da un template come `'{min:long} - {max:long}'`.
+ * Token senza `:` vengono trattati come formato assente (datatype string).
+ */
+function parseAggregationSpecs(column, template) {
+    if (!template)
+        return [];
+    const tokens = template.match(/\{[a-zA-Z0-9/:]*\}/g);
+    if (!tokens)
+        return [];
+    const specs = [];
+    for (const token of tokens) {
+        const inner = token.substring(1, token.length - 1);
+        const [func, format = ''] = inner.split(':');
+        if (func !== 'min' && func !== 'max' && func !== 'sum')
+            continue;
+        let datatype = 'string';
+        if (format === 'small' || format === 'long' || format === 'verylong')
+            datatype = 'date';
+        else if (/^F\d$/.test(format))
+            datatype = 'number';
+        specs.push({ column, func, format, match: token, datatype });
+    }
+    return specs;
+}
+/** Calcola il valore grezzo (stringa) di una aggregazione sugli item di un gruppo */
+function computeAggValue(items, spec) {
+    const raw = items.map(i => i?.[spec.column]);
+    if (spec.datatype === 'number') {
+        const nums = raw.map(v => parseFloat(v)).filter(n => !isNaN(n));
+        if (nums.length === 0)
+            return '';
+        if (spec.func === 'sum')
+            return nums.reduce((a, b) => a + b, 0).toString();
+        return (spec.func === 'max' ? Math.max(...nums) : Math.min(...nums)).toString();
+    }
+    if (spec.datatype === 'date') {
+        if (spec.func === 'sum')
+            return '';
+        const times = raw.map(v => new Date(v).getTime()).filter(t => !isNaN(t));
+        if (times.length === 0)
+            return '';
+        return new Date(spec.func === 'max' ? Math.max(...times) : Math.min(...times)).toISOString();
+    }
+    const strs = raw.map(v => (v == null ? '' : String(v)));
+    if (spec.func === 'sum')
+        return strs.join(', ');
+    const sorted = [...strs].sort();
+    return spec.func === 'max' ? sorted[sorted.length - 1] : sorted[0];
+}
+/** Formatta il valore grezzo di un'aggregazione secondo il formato richiesto */
+function formatAggValue(value, format, locale) {
+    if (value == null || value === '' || !format)
+        return value ?? '';
+    if (/^F\d$/.test(format)) {
+        const n = parseFloat(value);
+        return isNaN(n) ? value : n.toFixed(parseInt(format[1], 10));
+    }
+    if (format === 'small' || format === 'long' || format === 'verylong') {
+        const d = new Date(value);
+        if (isNaN(d.getTime()))
+            return value;
+        const opts = format === 'small'
+            ? { year: 'numeric', month: '2-digit', day: '2-digit' }
+            : format === 'long'
+                ? { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }
+                : { weekday: 'short', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
+        return d.toLocaleString(locale || undefined, opts);
+    }
+    return value;
+}
+/** Raggruppa un array per il valore di una proprietà, preservando l'ordine di prima apparizione */
+function groupBy(items, key) {
+    const out = new Map();
+    for (const it of items) {
+        const k = String(it?.[key] ?? '');
+        const bucket = out.get(k);
+        if (bucket)
+            bucket.push(it);
+        else
+            out.set(k, [it]);
+    }
+    return out;
+}
+function computeAggMap(items, specs) {
+    const byCol = new Map();
+    for (const s of specs) {
+        let m = byCol.get(s.column);
+        if (!m) {
+            m = new Map();
+            byCol.set(s.column, m);
+        }
+        if (!m.has(s.func))
+            m.set(s.func, computeAggValue(items, s));
+    }
+    return byCol;
+}
+function buildLevel(items, groupCols, specs, level, parent) {
+    const col = groupCols[level];
+    const last = level + 1 === groupCols.length;
+    const buckets = groupBy(items, col);
+    const ret = [];
+    for (const [value, groupItems] of buckets) {
+        const key = (parent ? parent._thisKey : '') + '¦' + col + '=' + value;
+        const g = {
+            _group: true,
+            _expanded: false,
+            column: col,
+            value,
+            count: groupItems.length,
+            _grouplevel: parent ? parent._grouplevel + 1 : 0,
+            _thisKey: key,
+            _parent: parent ? parent._thisKey : null,
+            _visible: level === 0,
+            _agg: computeAggMap(groupItems, specs)
+        };
+        ret.push(g);
+        if (!last) {
+            const sub = buildLevel(groupItems, groupCols, specs, level + 1, g);
+            g._groupscount = sub.filter(r => r._group && r._parent === key).length;
+            ret.push(...sub);
+        }
+        else {
+            for (const it of groupItems) {
+                it._thisKey = key;
+                it._visible = false;
+            }
+            ret.push(...groupItems);
+        }
+    }
+    return ret;
+}
+/**
+ * Costruisce la lista piatta di righe (gruppi + oggetti) per la visualizzazione.
+ * Gli oggetti vengono marcati `_item`, i gruppi `_group`; solo i gruppi di primo
+ * livello partono `_visible`.
+ */
+function buildGroupedRows(items, groupCols, specs) {
+    for (const i of items) {
+        i._item = true;
+        i._visible = false;
+    }
+    return buildLevel(items, groupCols, specs, 0, null);
+}
+
+// =============================================================================
+//  es-table2 — modalità gerarchica (albero padre/figlio)
+// -----------------------------------------------------------------------------
+//  Dato un array piatto in cui ogni oggetto conosce la propria chiave (ownKey) e
+//  quella del padre (parentKey), assegna livello/visibilità/espansione e riordina
+//  gli elementi in ordine depth-first (padre seguito dal proprio sottoalbero).
+//
+//  Algoritmo O(n) basato su mappe (l'originale era O(n²)). Gli orfani (padre non
+//  presente nel set) sono trattati come radici, così nessuna riga sparisce.
+// =============================================================================
+/** Confronto per l'ordinamento dei fratelli: numerico se possibile, altrimenti stringa */
+function compareKeys(a, b) {
+    const na = parseFloat(a), nb = parseFloat(b);
+    if (!isNaN(na) && !isNaN(nb) && String(na) === String(a) && String(nb) === String(b))
+        return na - nb;
+    return String(a ?? '').localeCompare(String(b ?? ''));
+}
+/**
+ * Assegna i metadati gerarchici (`_level`, `_visible`, `_expanded`, `parent`) e
+ * restituisce gli elementi in ordine depth-first pronti per la visualizzazione.
+ *
+ * @param items         array piatto di oggetti
+ * @param ownKey        proprietà con l'id dell'oggetto
+ * @param parentKey     proprietà con l'id del padre
+ * @param startsExpanded se true l'albero parte tutto espanso
+ * @param autoSort      se true ordina i fratelli per `ownKey`
+ */
+function assignHierarchyLevels(items, ownKey, parentKey, startsExpanded, autoSort) {
+    if (!items || items.length === 0)
+        return [];
+    const byOwn = new Map();
+    for (const it of items)
+        byOwn.set(String(it[ownKey]), it);
+    const childrenOf = new Map();
+    const roots = [];
+    for (const it of items) {
+        it.parent = false; // reset flag "ha figli"
+        const pv = it[parentKey];
+        const pKey = (pv === null || pv === undefined || pv === '') ? null : String(pv);
+        const hasParent = pKey !== null && byOwn.has(pKey) && byOwn.get(pKey) !== it;
+        if (hasParent) {
+            let arr = childrenOf.get(pKey);
+            if (!arr) {
+                arr = [];
+                childrenOf.set(pKey, arr);
+            }
+            arr.push(it);
+        }
+        else {
+            roots.push(it);
+        }
+    }
+    if (autoSort) {
+        roots.sort((a, b) => compareKeys(a[ownKey], b[ownKey]));
+        for (const arr of childrenOf.values())
+            arr.sort((a, b) => compareKeys(a[ownKey], b[ownKey]));
+    }
+    const ordered = [];
+    const visit = (node, level, ancestorsOpen) => {
+        const kids = childrenOf.get(String(node[ownKey]));
+        node._level = level;
+        node._visible = level === 1 ? true : ancestorsOpen;
+        node.parent = !!(kids && kids.length);
+        node._expanded = node.parent ? startsExpanded : false;
+        ordered.push(node);
+        if (kids)
+            for (const k of kids)
+                visit(k, level + 1, node._visible && node._expanded);
+    };
+    for (const r of roots)
+        visit(r, 1, true);
+    return ordered;
+}
+/** Espande un nodo: rende visibili i suoi figli diretti (i nipoti restano nascosti) */
+function expandNode(rows, ownKey, parentKey, key) {
+    const k = String(key);
+    for (const r of rows)
+        if (String(r[ownKey]) === k) {
+            r._expanded = true;
+            break;
+        }
+    for (const r of rows)
+        if (String(r[parentKey]) === k)
+            r._visible = true;
+}
+/** Collassa un nodo: nasconde ricorsivamente tutto il sottoalbero */
+function collapseNode(rows, ownKey, parentKey, key) {
+    const k = String(key);
+    for (const r of rows)
+        if (String(r[ownKey]) === k) {
+            r._expanded = false;
+            break;
+        }
+    collapseChildren(rows, ownKey, parentKey, k);
+}
+function collapseChildren(rows, ownKey, parentKey, parentK) {
+    for (const child of rows) {
+        if (String(child[parentKey]) !== parentK)
+            continue;
+        child._visible = false;
+        if (child.parent) {
+            child._expanded = false;
+            collapseChildren(rows, ownKey, parentKey, String(child[ownKey]));
+        }
+    }
+}
+
+/**
+ * Paginatore dell'es-table2.
+ *
+ * Componente di sola presentazione: riceve lo stato di paginazione via input e
+ * notifica le intenzioni dell'utente via output. Non conosce il concetto di
+ * viewMode/arrayMode — la logica di applicazione vive nel componente padre.
+ */
+class EsTable2PagerComponent {
+    constructor() {
+        /** Valore convenzionale di items-per-page che rappresenta "Tutti" */
+        this.allValue = 999999;
+        this.page = input(1, ...(ngDevMode ? [{ debugName: "page" }] : []));
+        this.pages = input(1, ...(ngDevMode ? [{ debugName: "pages" }] : []));
+        this.total = input(0, ...(ngDevMode ? [{ debugName: "total" }] : []));
+        this.itemsPerPage = input(15, ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : []));
+        this.countLabel = input('', ...(ngDevMode ? [{ debugName: "countLabel" }] : []));
+        this.showCount = input(true, ...(ngDevMode ? [{ debugName: "showCount" }] : []));
+        this.showButtons = input(true, ...(ngDevMode ? [{ debugName: "showButtons" }] : []));
+        this.showPagingOptions = input(true, ...(ngDevMode ? [{ debugName: "showPagingOptions" }] : []));
+        this.allowAll = input(true, ...(ngDevMode ? [{ debugName: "allowAll" }] : []));
+        this.pageChange = output();
+        this.itemsPerPageChange = output();
+        /** Opzioni della select di items-per-page (con eventuale "Tutti") */
+        this.ippOptions = computed(() => {
+            const base = [15, 25, 50, 100];
+            if (!base.includes(this.itemsPerPage()) && this.itemsPerPage() !== this.allValue)
+                base.push(this.itemsPerPage());
+            base.sort((a, b) => a - b);
+            return this.allowAll() ? [...base, this.allValue] : base;
+        }, ...(ngDevMode ? [{ debugName: "ippOptions" }] : []));
+        /** Finestra di pagine visibili con ellissi (1 … n-1 n n+1 … tot) */
+        this.visiblePages = computed(() => {
+            const current = this.page() ?? 1;
+            const total = this.pages();
+            const out = [];
+            const add = (p) => out.push({ key: 'p' + p, page: p });
+            const gap = (id) => out.push({ key: id, page: -1 });
+            const window = new Set([1, total, current - 1, current, current + 1]);
+            let last = 0;
+            for (let p = 1; p <= total; p++) {
+                if (!window.has(p))
+                    continue;
+                if (p - last > 1)
+                    gap('g' + p);
+                add(p);
+                last = p;
+            }
+            return out;
+        }, ...(ngDevMode ? [{ debugName: "visiblePages" }] : []));
+    }
+    goto(p) {
+        if (p < 1 || p > this.pages() || p === this.page())
+            return;
+        this.pageChange.emit(p);
+    }
+    onIppChange(ev) {
+        this.itemsPerPageChange.emit(+ev.target.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsTable2PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: EsTable2PagerComponent, isStandalone: false, selector: "es-table2-pager", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pages: { classPropertyName: "pages", publicName: "pages", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, countLabel: { classPropertyName: "countLabel", publicName: "countLabel", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, showPagingOptions: { classPropertyName: "showPagingOptions", publicName: "showPagingOptions", isSignal: true, isRequired: false, transformFunction: null }, allowAll: { classPropertyName: "allowAll", publicName: "allowAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange" }, ngImport: i0, template: `
+    <div class="est2-pager" *ngIf="page() != null">
+      <div class="est2-pager__count" *ngIf="showCount()">
+        {{ countLabel() || 'Elementi' }}: <strong>{{ total() }}</strong>
+      </div>
+
+      <div class="est2-pager__spacer"></div>
+
+      <label class="est2-pager__ipp" *ngIf="showPagingOptions()">
+        <span>Per pagina</span>
+        <select class="est2-pager__select"
+                [value]="itemsPerPage()"
+                (change)="onIppChange($event)">
+          @for (opt of ippOptions(); track opt) {
+            <option [value]="opt">{{ opt === allValue ? 'Tutti' : opt }}</option>
+          }
+        </select>
+      </label>
+
+      <div class="est2-pager__nav" *ngIf="showButtons() && pages() > 1">
+        <button type="button" class="est2-pager__btn"
+                [disabled]="page()! <= 1"
+                (click)="goto(page()! - 1)"
+                aria-label="Pagina precedente">‹</button>
+
+        @for (p of visiblePages(); track p.key) {
+          @if (p.page === -1) {
+            <span class="est2-pager__ellipsis">…</span>
+          } @else {
+            <button type="button"
+                    class="est2-pager__btn"
+                    [class.est2-pager__btn--active]="p.page === page()"
+                    (click)="goto(p.page)">{{ p.page }}</button>
+          }
+        }
+
+        <button type="button" class="est2-pager__btn"
+                [disabled]="page()! >= pages()"
+                (click)="goto(page()! + 1)"
+                aria-label="Pagina successiva">›</button>
+      </div>
+    </div>
+  `, isInline: true, styles: [".est2-pager{--est-ctrl-h: 30px;display:flex;align-items:center;gap:12px;padding:10px 4px 2px;font-size:var(--est-fs-sm);color:var(--est-fg-muted);flex-wrap:wrap;line-height:1}.est2-pager__spacer{flex:1 1 auto}.est2-pager__count{display:inline-flex;align-items:center;height:var(--est-ctrl-h)}.est2-pager__count strong{color:var(--est-fg);font-weight:600}.est2-pager__ipp{display:inline-flex;align-items:center;height:var(--est-ctrl-h);margin:0;gap:6px}.est2-pager__select{font:inherit;height:var(--est-ctrl-h);color:var(--est-fg);background:var(--est-bg);border:1px solid var(--est-border);border-radius:var(--est-radius-sm);padding:0 8px;cursor:pointer;transition:border-color var(--est-transition)}.est2-pager__select:hover{border-color:var(--est-border-strong)}.est2-pager__select:focus-visible{outline:none;box-shadow:var(--est-ring);border-color:var(--est-accent)}.est2-pager__nav{display:inline-flex;align-items:center;gap:4px}.est2-pager__btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--est-ctrl-h);height:var(--est-ctrl-h);padding:0 8px;border:1px solid var(--est-border);border-radius:var(--est-radius-sm);background:var(--est-bg);color:var(--est-fg);font:inherit;cursor:pointer;transition:background var(--est-transition),border-color var(--est-transition),color var(--est-transition)}.est2-pager__btn:hover:not(:disabled){background:var(--est-bg-hover);border-color:var(--est-border-strong)}.est2-pager__btn:disabled{opacity:.4;cursor:default}.est2-pager__btn:focus-visible{outline:none;box-shadow:var(--est-ring)}.est2-pager__btn--active{background:var(--est-accent);border-color:var(--est-accent);color:var(--est-accent-fg);font-weight:600}.est2-pager__btn--active:hover:not(:disabled){background:var(--est-accent)}.est2-pager__ellipsis{color:var(--est-fg-faint);padding:0 2px}\n"], dependencies: [{ kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsTable2PagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'es-table2-pager', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    <div class="est2-pager" *ngIf="page() != null">
+      <div class="est2-pager__count" *ngIf="showCount()">
+        {{ countLabel() || 'Elementi' }}: <strong>{{ total() }}</strong>
+      </div>
+
+      <div class="est2-pager__spacer"></div>
+
+      <label class="est2-pager__ipp" *ngIf="showPagingOptions()">
+        <span>Per pagina</span>
+        <select class="est2-pager__select"
+                [value]="itemsPerPage()"
+                (change)="onIppChange($event)">
+          @for (opt of ippOptions(); track opt) {
+            <option [value]="opt">{{ opt === allValue ? 'Tutti' : opt }}</option>
+          }
+        </select>
+      </label>
+
+      <div class="est2-pager__nav" *ngIf="showButtons() && pages() > 1">
+        <button type="button" class="est2-pager__btn"
+                [disabled]="page()! <= 1"
+                (click)="goto(page()! - 1)"
+                aria-label="Pagina precedente">‹</button>
+
+        @for (p of visiblePages(); track p.key) {
+          @if (p.page === -1) {
+            <span class="est2-pager__ellipsis">…</span>
+          } @else {
+            <button type="button"
+                    class="est2-pager__btn"
+                    [class.est2-pager__btn--active]="p.page === page()"
+                    (click)="goto(p.page)">{{ p.page }}</button>
+          }
+        }
+
+        <button type="button" class="est2-pager__btn"
+                [disabled]="page()! >= pages()"
+                (click)="goto(page()! + 1)"
+                aria-label="Pagina successiva">›</button>
+      </div>
+    </div>
+  `, styles: [".est2-pager{--est-ctrl-h: 30px;display:flex;align-items:center;gap:12px;padding:10px 4px 2px;font-size:var(--est-fs-sm);color:var(--est-fg-muted);flex-wrap:wrap;line-height:1}.est2-pager__spacer{flex:1 1 auto}.est2-pager__count{display:inline-flex;align-items:center;height:var(--est-ctrl-h)}.est2-pager__count strong{color:var(--est-fg);font-weight:600}.est2-pager__ipp{display:inline-flex;align-items:center;height:var(--est-ctrl-h);margin:0;gap:6px}.est2-pager__select{font:inherit;height:var(--est-ctrl-h);color:var(--est-fg);background:var(--est-bg);border:1px solid var(--est-border);border-radius:var(--est-radius-sm);padding:0 8px;cursor:pointer;transition:border-color var(--est-transition)}.est2-pager__select:hover{border-color:var(--est-border-strong)}.est2-pager__select:focus-visible{outline:none;box-shadow:var(--est-ring);border-color:var(--est-accent)}.est2-pager__nav{display:inline-flex;align-items:center;gap:4px}.est2-pager__btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--est-ctrl-h);height:var(--est-ctrl-h);padding:0 8px;border:1px solid var(--est-border);border-radius:var(--est-radius-sm);background:var(--est-bg);color:var(--est-fg);font:inherit;cursor:pointer;transition:background var(--est-transition),border-color var(--est-transition),color var(--est-transition)}.est2-pager__btn:hover:not(:disabled){background:var(--est-bg-hover);border-color:var(--est-border-strong)}.est2-pager__btn:disabled{opacity:.4;cursor:default}.est2-pager__btn:focus-visible{outline:none;box-shadow:var(--est-ring)}.est2-pager__btn--active{background:var(--est-accent);border-color:var(--est-accent);color:var(--est-accent-fg);font-weight:600}.est2-pager__btn--active:hover:not(:disabled){background:var(--est-accent)}.est2-pager__ellipsis{color:var(--est-fg-faint);padding:0 2px}\n"] }]
+        }], 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
+/**
+ * es-table2 — riscrittura 2026 dell'es-table.
+ *
+ * Mantiene la superficie pubblica (Input/Output/direttive `*th`/`*td`) dell'es-table
+ * originale ma con implementazione basata su signal, control-flow moderno e un design
+ * system a token (tema chiaro/scuro).
+ *
+ * FASE 1: modalità view/array, celle template + direttive, ordinamento, paginazione,
+ * selezione singola/multipla. Le modalità avanzate (grouping, hierarchy, dynamic,
+ * report, range-paste, export) sono dichiarate nella superficie ma verranno collegate
+ * nelle fasi successive.
+ */
+class EsTable2Component {
+    /** ViewChild-setter: (ri)osserva l'header appena compare/cambia, mantenendo `selbarHeight` allineata */
+    set theadRef(ref) {
+        const el = ref?.nativeElement;
+        if (el === this.headerEl)
+            return;
+        this.headerEl = el;
+        this.headerRO?.disconnect();
+        if (el && typeof ResizeObserver !== 'undefined') {
+            this.headerRO = new ResizeObserver(() => {
+                const h = el.offsetHeight;
+                if (h && h !== this.selbarHeight()) {
+                    this.selbarHeight.set(h);
+                    this.cdr.markForCheck();
+                }
+            });
+            this.headerRO.observe(el);
+            this.selbarHeight.set(el.offsetHeight);
+        }
+    }
+    get denseClass() { return this.HighCellDensity(); }
+    /** 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;
+    }
+    constructor(ngControl, cdr, hostEl, prefService, defaults, debugMode, exportGlobalAcl) {
+        this.ngControl = ngControl;
+        this.cdr = cdr;
+        this.hostEl = hostEl;
+        this.prefService = prefService;
+        this.defaults = defaults;
+        this.debugMode = debugMode;
+        this.exportGlobalAcl = exportGlobalAcl;
+        /** Altezza dell'header (misurata): la barra di selezione la usa per coprirlo esattamente */
+        this.selbarHeight = signal(0, ...(ngDevMode ? [{ debugName: "selbarHeight" }] : []));
+        // ===========================================================================
+        //  Superficie pubblica — Input risolti (pattern _alias -> signal risolto)
+        // ===========================================================================
+        this._Selection = input(null, ...(ngDevMode ? [{ debugName: "_Selection", alias: 'Selection' }] : [{ alias: 'Selection' }]));
+        this.Selection = linkedSignal(() => this.io(this._Selection(), this.defaults?.Selection, false), ...(ngDevMode ? [{ debugName: "Selection" }] : []));
+        this.SingleSelection = input(false, ...(ngDevMode ? [{ debugName: "SingleSelection" }] : []));
+        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" }] : []));
+        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' }]));
+        this.ShiftClick = linkedSignal(() => this.io(this._ShiftClick(), null, false), ...(ngDevMode ? [{ debugName: "ShiftClick" }] : []));
+        this._OrderByColumn = input(null, ...(ngDevMode ? [{ debugName: "_OrderByColumn", alias: 'OrderByColumn' }] : [{ alias: 'OrderByColumn' }]));
+        this.OrderByColumn = linkedSignal(() => this.io(this._OrderByColumn(), null, true), ...(ngDevMode ? [{ debugName: "OrderByColumn" }] : []));
+        this.MultipleOrderingDirectives = input(true, ...(ngDevMode ? [{ debugName: "MultipleOrderingDirectives" }] : []));
+        this.Removal = input(false, ...(ngDevMode ? [{ debugName: "Removal" }] : []));
+        this.RemovalCondition = input('', ...(ngDevMode ? [{ debugName: "RemovalCondition" }] : []));
+        this._HidePaging = input(null, ...(ngDevMode ? [{ debugName: "_HidePaging", alias: 'HidePaging' }] : [{ alias: 'HidePaging' }]));
+        this.HidePaging = linkedSignal(() => this.io(this._HidePaging(), this.defaults?.HidePaging, false), ...(ngDevMode ? [{ debugName: "HidePaging" }] : []));
+        this._HidePagingCount = input(null, ...(ngDevMode ? [{ debugName: "_HidePagingCount", alias: 'HidePagingCount' }] : [{ alias: 'HidePagingCount' }]));
+        this.HidePagingCount = linkedSignal(() => this.io(this._HidePagingCount(), this.defaults?.HidePagingCount, false), ...(ngDevMode ? [{ debugName: "HidePagingCount" }] : []));
+        this._HidePagingButtons = input(null, ...(ngDevMode ? [{ debugName: "_HidePagingButtons", alias: 'HidePagingButtons' }] : [{ alias: 'HidePagingButtons' }]));
+        this.HidePagingButtons = linkedSignal(() => this.io(this._HidePagingButtons(), this.defaults?.HidePagingButtons, false), ...(ngDevMode ? [{ debugName: "HidePagingButtons" }] : []));
+        this._AllSearch = input(null, ...(ngDevMode ? [{ debugName: "_AllSearch", alias: 'AllSearch' }] : [{ alias: 'AllSearch' }]));
+        this.AllSearch = linkedSignal(() => this.io(this._AllSearch(), this.defaults?.AllSearch, true), ...(ngDevMode ? [{ debugName: "AllSearch" }] : []));
+        this._PagingStyle = input(null, ...(ngDevMode ? [{ debugName: "_PagingStyle", alias: 'PagingStyle' }] : [{ alias: 'PagingStyle' }]));
+        this.PagingStyle = linkedSignal(() => this.io(this._PagingStyle(), this.defaults?.PagingStyle, 'bottom'), ...(ngDevMode ? [{ debugName: "PagingStyle" }] : []));
+        // Read-write: `linkedSignal` risolve dall'input (reattivo) MA resta scrivibile
+        // dal pager. L'override interno sopravvive finché l'input non cambia davvero.
+        this._ArraymodeItemsPerPage = input(null, ...(ngDevMode ? [{ debugName: "_ArraymodeItemsPerPage", alias: 'ArraymodeItemsPerPage' }] : [{ alias: 'ArraymodeItemsPerPage' }]));
+        this.ArraymodeItemsPerPage = linkedSignal(() => this.io(this._ArraymodeItemsPerPage(), this.defaults?.ArraymodeItemsPerPage, 15), ...(ngDevMode ? [{ debugName: "ArraymodeItemsPerPage" }] : []));
+        this._UseArrayModePaging = input(true, ...(ngDevMode ? [{ debugName: "_UseArrayModePaging", alias: 'UseArrayModePaging' }] : [{ alias: 'UseArrayModePaging' }]));
+        this.UseArrayModePaging = linkedSignal(() => this.io(this._UseArrayModePaging(), null, true), ...(ngDevMode ? [{ debugName: "UseArrayModePaging" }] : []));
+        this.CountLabel = input('', ...(ngDevMode ? [{ debugName: "CountLabel" }] : []));
+        this.Height = input(undefined, ...(ngDevMode ? [{ debugName: "Height" }] : []));
+        this.MaxHeight = input(undefined, ...(ngDevMode ? [{ debugName: "MaxHeight" }] : []));
+        this.EmptySpaceBackgroundColor = input('', ...(ngDevMode ? [{ debugName: "EmptySpaceBackgroundColor" }] : []));
+        this.HighCellDensity = input(false, ...(ngDevMode ? [{ debugName: "HighCellDensity" }] : []));
+        this.HeaderHidden = input(false, ...(ngDevMode ? [{ debugName: "HeaderHidden" }] : []));
+        this.BodyHidden = input(false, ...(ngDevMode ? [{ debugName: "BodyHidden" }] : []));
+        this.ShowLoadingOnBootstrap = input(false, ...(ngDevMode ? [{ debugName: "ShowLoadingOnBootstrap" }] : []));
+        this._DefaultAlignment = input(null, ...(ngDevMode ? [{ debugName: "_DefaultAlignment", alias: 'DefaultAlignment' }] : [{ alias: 'DefaultAlignment' }]));
+        this.DefaultAlignment = linkedSignal(() => this.io(this._DefaultAlignment(), this.defaults?.DefaultAlignment, 'Left'), ...(ngDevMode ? [{ debugName: "DefaultAlignment" }] : []));
+        this._TableClass = input(null, ...(ngDevMode ? [{ debugName: "_TableClass", alias: 'TableClass' }] : [{ alias: 'TableClass' }]));
+        this.TableClass = linkedSignal(() => this.io(this._TableClass(), this.defaults?.TableClass, ''), ...(ngDevMode ? [{ debugName: "TableClass" }] : []));
+        this._ContainerClass = input(null, ...(ngDevMode ? [{ debugName: "_ContainerClass", alias: 'ContainerClass' }] : [{ alias: 'ContainerClass' }]));
+        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 -------------------
+        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" }] : []));
+        this._HiddenColumns = input(null, ...(ngDevMode ? [{ debugName: "_HiddenColumns", alias: 'HiddenColumns' }] : [{ alias: 'HiddenColumns' }]));
+        this.HiddenColumns = linkedSignal(() => this.io(this._HiddenColumns(), null, false), ...(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._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(false, ...(ngDevMode ? [{ debugName: "XLSXExport" }] : []));
+        this.CSVExport = input(true, ...(ngDevMode ? [{ debugName: "CSVExport" }] : []));
+        this.ExportFileName = input('Export.csv', ...(ngDevMode ? [{ debugName: "ExportFileName" }] : []));
+        this.ExportOnlyVisibleColumns = input(false, ...(ngDevMode ? [{ debugName: "ExportOnlyVisibleColumns" }] : []));
+        this.CornerMenuOptions = input([], ...(ngDevMode ? [{ debugName: "CornerMenuOptions" }] : []));
+        this.DynamicOperations = input([], ...(ngDevMode ? [{ debugName: "DynamicOperations" }] : []));
+        this._DynamicRowColumnsDefinition = input(null, ...(ngDevMode ? [{ debugName: "_DynamicRowColumnsDefinition", alias: 'DynamicRowColumnsDefinition' }] : [{ alias: 'DynamicRowColumnsDefinition' }]));
+        this.Hierarchy = input(false, ...(ngDevMode ? [{ debugName: "Hierarchy" }] : []));
+        // Read-write: risolti dall'input ma scrivibili dall'auto-detect gerarchia
+        this._ParentKey = input('', ...(ngDevMode ? [{ debugName: "_ParentKey", alias: 'ParentKey' }] : [{ alias: 'ParentKey' }]));
+        this.ParentKey = linkedSignal(() => this.io(this._ParentKey(), null, '') || '', ...(ngDevMode ? [{ debugName: "ParentKey" }] : []));
+        this._OwnKey = input('', ...(ngDevMode ? [{ debugName: "_OwnKey", alias: 'OwnKey' }] : [{ alias: 'OwnKey' }]));
+        this.OwnKey = linkedSignal(() => this.io(this._OwnKey(), null, '') || '', ...(ngDevMode ? [{ debugName: "OwnKey" }] : []));
+        this._AutoSortHierarchy = input(null, ...(ngDevMode ? [{ debugName: "_AutoSortHierarchy", alias: 'AutoSortHierarchy' }] : [{ alias: 'AutoSortHierarchy' }]));
+        this.AutoSortHierarchy = linkedSignal(() => this.io(this._AutoSortHierarchy(), null, false), ...(ngDevMode ? [{ debugName: "AutoSortHierarchy" }] : []));
+        this.StartsExpanded = input(true, ...(ngDevMode ? [{ debugName: "StartsExpanded" }] : []));
+        /** In modalità gerarchica: selezionando un nodo si selezionano tutti i discendenti, e un padre
+         *  risulta selezionato quando tutti i figli lo sono (indeterminato se solo alcuni). */
+        this.CascadeSelection = input(false, ...(ngDevMode ? [{ debugName: "CascadeSelection" }] : []));
+        this._SavePreferences = input(null, ...(ngDevMode ? [{ debugName: "_SavePreferences", alias: 'SavePreferences' }] : [{ alias: 'SavePreferences' }]));
+        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" }] : []));
+        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" }] : []));
+        this.HasHeaderGroup = input(false, ...(ngDevMode ? [{ debugName: "HasHeaderGroup" }] : []));
+        this.HasSecondaryHeaderGroup = input(false, ...(ngDevMode ? [{ debugName: "HasSecondaryHeaderGroup" }] : []));
+        this.SearchView = input(null, ...(ngDevMode ? [{ debugName: "SearchView" }] : []));
+        this._AutoUpdate = input(null, ...(ngDevMode ? [{ debugName: "_AutoUpdate", alias: 'AutoUpdate' }] : [{ alias: 'AutoUpdate' }]));
+        // ===========================================================================
+        //  Superficie pubblica — Output
+        // ===========================================================================
+        this.onOrderChanged = new EventEmitter();
+        this.onSearchRequest = new EventEmitter();
+        this.onSelectionChanged = new EventEmitter();
+        this.onRemoval = new EventEmitter();
+        this.onAbortRemoval = new EventEmitter();
+        this.onModelChange = new EventEmitter();
+        this.onOpenContextMenu = new EventEmitter();
+        this.onCornerAction = new EventEmitter();
+        this.onDynamicOperation = new EventEmitter();
+        // --- Models (superficie parità) --------------------------------------------
+        this.globalCheck = model(false, ...(ngDevMode ? [{ debugName: "globalCheck" }] : []));
+        this.autoUpdate = model(false, ...(ngDevMode ? [{ debugName: "autoUpdate" }] : []));
+        this.seconds = model('10', ...(ngDevMode ? [{ debugName: "seconds" }] : []));
+        this.researchInProgress = model(false, ...(ngDevMode ? [{ debugName: "researchInProgress" }] : []));
+        /** Modello bindato: AppSearch (viewMode) oppure any[] (arrayMode) */
+        this.view = signal(null, ...(ngDevMode ? [{ debugName: "view" }] : []));
+        this.viewMode = signal(false, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+        this.arrayMode = signal(false, ...(ngDevMode ? [{ debugName: "arrayMode" }] : []));
+        this.firstBind = signal(true, ...(ngDevMode ? [{ debugName: "firstBind" }] : []));
+        /** Righe attualmente visualizzate (già paginate/ordinate) */
+        this.boundSource = signal([], ...(ngDevMode ? [{ debugName: "boundSource" }] : []));
+        /** Colonne derivate dalle direttive `*th`/`*td` */
+        this.columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+        /** true se la tabella è pilotata dalle direttive (`*th`), false se template semplice */
+        this.directivesBased = signal(false, ...(ngDevMode ? [{ debugName: "directivesBased" }] : []));
+        /** true se è attivo il raggruppamento client-side (array mode con colonne `thGroup`) */
+        this.grouped = signal(false, ...(ngDevMode ? [{ debugName: "grouped" }] : []));
+        /** true se le colonne provengono da `DynamicRowColumnsDefinition` */
+        this.dynamicMode = signal(false, ...(ngDevMode ? [{ debugName: "dynamicMode" }] : []));
+        /** true se il modello è una view report (`report_columns`) */
+        this.reportMode = signal(false, ...(ngDevMode ? [{ debugName: "reportMode" }] : []));
+        /** Definizione colonne dinamica: risolta dall'input, ma scrivibile (auto-derivata dagli item generici) */
+        this.DynamicRowColumnsDefinition = linkedSignal(() => this._DynamicRowColumnsDefinition(), ...(ngDevMode ? [{ debugName: "DynamicRowColumnsDefinition" }] : []));
+        /** Se true mostra i valori delle colonne di gruppo anche nelle righe-oggetto */
+        this.ShowItemGroupsColumns = linkedSignal(() => this.io(this._ShowItemGroupsColumns(), this.defaults?.ShowItemGroupsColumns, false), ...(ngDevMode ? [{ debugName: "ShowItemGroupsColumns" }] : []));
+        /** Mappa ownKey(string) -> figli diretti, per la modalità gerarchica */
+        this.hierChildren = new Map();
+        /** Paginazione arrayMode */
+        this.arrayPage = signal(1, ...(ngDevMode ? [{ debugName: "arrayPage" }] : []));
+        /** Ordinamenti attivi (id -> 'ASC'|'DESC') */
+        this.orders = signal([], ...(ngDevMode ? [{ debugName: "orders" }] : []));
+        /** Header-group: mappa id→direttiva th (inclusi i gruppi) e insieme degli id-gruppo */
+        this.hgThById = signal(new Map(), ...(ngDevMode ? [{ debugName: "hgThById" }] : []));
+        this.hgParentIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "hgParentIds" }] : []));
+        /** Base (solo direttive) di hgThById/hgParentIds, per ri-espandere i Multi a ogni refresh */
+        this.baseThById = new Map();
+        this.baseParentIds = new Set();
+        /** Colonne derivate dalle direttive (senza le Multi, che dipendono dai dati) */
+        this.directiveColumns = [];
+        /** Definizioni Multi da srotolare sui dati (`*th Multi:true`) */
+        this.multiDefs = [];
+        // ===========================================================================
+        //  Theme host bindings
+        // ===========================================================================
+        this.hostClass = true;
+        // ===========================================================================
+        //  Derived
+        // ===========================================================================
+        /** Colonne visibili, con le colonne pinnate spostate in testa (stabile) */
+        this.visibleColumns = computed(() => {
+            const vis = this.columns().filter(c => c.visible);
+            if (!vis.some(c => c.pinned))
+                return vis;
+            return [...vis.filter(c => c.pinned), ...vis.filter(c => !c.pinned)];
+        }, ...(ngDevMode ? [{ debugName: "visibleColumns" }] : []));
+        /** Numero di colonne pinnate visibili */
+        this.pinnedCount = computed(() => this.visibleColumns().filter(c => c.pinned).length, ...(ngDevMode ? [{ debugName: "pinnedCount" }] : []));
+        /** true se c'è almeno una colonna pinnata */
+        this.hasPinned = computed(() => this.pinnedCount() > 0, ...(ngDevMode ? [{ debugName: "hasPinned" }] : []));
+        /** Larghezza (px) della colonna di selezione quando sticky */
+        this.SEL_STICKY_W = 44;
+        /** 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.
+         */
+        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" }] : []));
+        /** true se ci sono header-group da renderizzare */
+        this.hasHeaderGroups = computed(() => this.headerGroupRows().length > 0, ...(ngDevMode ? [{ debugName: "hasHeaderGroups" }] : []));
+        /** Numero di elementi totali (per il pager) */
+        this.totalCount = computed(() => {
+            const v = this.view();
+            if (this.viewMode() && v)
+                return v.objectcount ?? v.items?.length ?? 0;
+            if (this.arrayMode() && Array.isArray(v))
+                return v.length;
+            return 0;
+        }, ...(ngDevMode ? [{ debugName: "totalCount" }] : []));
+        /** Pagina corrente per il pager */
+        this.currentPage = computed(() => this.viewMode() ? (this.view()?.page ?? 1) : this.arrayPage(), ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+        /** Numero totale di pagine per il pager */
+        this.totalPages = computed(() => {
+            if (this.viewMode())
+                return this.view()?.pages ?? 1;
+            const ipp = this.ArraymodeItemsPerPage();
+            if (!ipp || ipp >= this.effectiveAllValue)
+                return 1;
+            return Math.max(1, Math.ceil(this.totalCount() / ipp));
+        }, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+        this.effectiveAllValue = 999999;
+        this.inited = false;
+        // ===========================================================================
+        //  CVA plumbing
+        // ===========================================================================
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        /** Ancora per la selezione a range stile Windows (Shift+click) */
+        this.selectionAnchor = null;
+        // ===========================================================================
+        //  Fase 5 — Selezione a range (drag cella-per-cella), copia/incolla, editing
+        //
+        //  Rispetto all'es-table originale (matrice `selectionStatus` con 8 flag di
+        //  bordo per cella, ricalcolata a ogni mousemove + subscription per-cella e
+        //  debounce anti-doppio-evento) qui il range è descritto da DUE sole
+        //  coordinate (ancora + fuoco); "selezionata"/bordi sono DERIVATI dal
+        //  rettangolo normalizzato. Gli eventi sono in delega sulla `<table>`
+        //  (un solo mousedown/mouseover/mouseup) e leggono `data-r`/`data-c` dal
+        //  `<td>`. Il "debounce" sparisce: `mouseover` aggiorna il fuoco solo se la
+        //  cella cambia davvero, quindi non ci sono doppie operazioni da smorzare.
+        // ===========================================================================
+        /** Pipe riusate per il testo di copia (dependency-free) */
+        this.fmt = new Est2FormatPipe();
+        this.lk = new Est2LookupPipe();
+        /** Range di celle: ancora (a) + fuoco (f), indici in boundSource() / visibleColumns() */
+        this.rangeSel = signal(null, ...(ngDevMode ? [{ debugName: "rangeSel" }] : []));
+        /** true durante il trascinamento (per disabilitare la selezione testo via CSS) */
+        this.rangeDragging = signal(false, ...(ngDevMode ? [{ debugName: "rangeDragging" }] : []));
+        /** Cella attualmente in editing (indici r/c) */
+        this.editing = signal(null, ...(ngDevMode ? [{ debugName: "editing" }] : []));
+        /** Bozza del valore in editing */
+        this.editDraft = '';
+        /** true se la modalità range è realmente utilizzabile (colonne strutturate, no gruppi/gerarchia) */
+        this.rangeActive = computed(() => this.RangeSelection() && this.usesColumns() && !this.grouped() && !this.Hierarchy(), ...(ngDevMode ? [{ debugName: "rangeActive" }] : []));
+        /** Rettangolo normalizzato del range corrente (o null) */
+        this.rangeRect = computed(() => {
+            const s = this.rangeSel();
+            if (!s)
+                return null;
+            return {
+                top: Math.min(s.a.r, s.f.r), bottom: Math.max(s.a.r, s.f.r),
+                left: Math.min(s.a.c, s.f.c), right: Math.max(s.a.c, s.f.c)
+            };
+        }, ...(ngDevMode ? [{ debugName: "rangeRect" }] : []));
+        /** Avviso transitorio mostrato in un piccolo toast (es. incolla incompatibile) */
+        this.notice = signal(null, ...(ngDevMode ? [{ debugName: "notice" }] : []));
+        this.noticeTimer = null;
+        // ===========================================================================
+        //  Fase 6 — Colonne (visibilità/ordine), preferenze, export
+        // ===========================================================================
+        /** Preferenze colonne in memoria (ordine + nascoste). Persistite se `SavePreferences`. */
+        this.columnPrefs = null;
+        /** true una volta caricate le preferenze dal server (evita retrieve multipli) */
+        this.prefsLoaded = false;
+        // --- Dialog visibilità/ordine/pin colonne ----------------------------------
+        this.columnsDialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "columnsDialogOpen" }] : []));
+        /** Lista di lavoro della dialog (copia, per poter annullare) */
+        this.dialogCols = signal([], ...(ngDevMode ? [{ debugName: "dialogCols" }] : []));
+        // --- Export (CSV self-contained / XLSX via SheetJS opzionale) --------------
+        this.exportMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "exportMenuOpen" }] : []));
+        this.cornerMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "cornerMenuOpen" }] : []));
+        this.trackByIndex = (i) => i;
+        this.trackRow = (i, item) => item?._hash ?? item?.id ?? item;
+        this.trackCol = (_, col) => col.id;
+        if (ngControl)
+            ngControl.valueAccessor = this;
+    }
+    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)
+            this.ctxMenuSub = menu.open.subscribe((e) => this.onContextMenuOpen(e?.item));
+    }
+    ngOnDestroy() {
+        this.ctxMenuSub?.unsubscribe();
+        this.headerRO?.disconnect();
+        if (this.noticeTimer)
+            clearTimeout(this.noticeTimer);
+    }
+    /** Risoluzione input: valore esplicito || default di progetto || hard default */
+    io(v, d, hard) {
+        return (v !== null && v !== undefined) ? v : (d !== null && d !== undefined) ? d : hard;
+    }
+    ngAfterContentInit() {
+        this.buildColumns();
+        this.thDirectives?.changes.subscribe(() => { this.buildColumns(); this.refresh(); });
+        this.tdDirectives?.changes.subscribe(() => { this.buildColumns(); this.refresh(); });
+    }
+    // ===========================================================================
+    //  ControlValueAccessor
+    // ===========================================================================
+    writeValue(obj) {
+        this.view.set(obj ?? null);
+        this.detectMode(obj);
+        this.syncOrdersFromView();
+        this.refresh();
+        if (obj)
+            this.firstBind.set(false);
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState() { }
+    changed() { this.onChange(this.view()); }
+    // ===========================================================================
+    //  Mode & column model
+    // ===========================================================================
+    detectMode(obj) {
+        const isSearch = obj instanceof AppSearch ||
+            (obj && typeof obj === 'object' && typeof obj.itemsperpageoverride !== 'undefined' && !Array.isArray(obj));
+        this.viewMode.set(!!isSearch);
+        this.arrayMode.set(!isSearch && Array.isArray(obj));
+    }
+    buildColumns() {
+        const ths = this.thDirectives?.toArray() ?? [];
+        this.directivesBased.set(ths.length > 0);
+        if (ths.length === 0) {
+            this.columns.set([]);
+            this.directiveColumns = [];
+            this.multiDefs = [];
+            this.hgThById.set(new Map());
+            this.hgParentIds.set(new Set());
+            this.baseThById = new Map();
+            this.baseParentIds = new Set();
+            return;
+        }
+        const tdByCol = new Map();
+        for (const td of this.tdDirectives?.toArray() ?? [])
+            if (!tdByCol.has(td.td))
+                tdByCol.set(td.td, td);
+        // Colonne Multi (`*th Multi:true`): srotolate sui dati in resolveColumns()
+        this.multiDefs = ths.filter(t => t.thMulti && t.thIf).map(t => ({ prop: t.th, th: t, td: tdByCol.get(t.th) }));
+        // Header groups multi-livello: un `*th` è un GRUPPO (non una colonna-dato) se
+        // il suo id è referenziato da un altro `*th` come `Parent` (`thParent`).
+        const parentIds = new Set();
+        for (const th of ths)
+            if (th.thParent)
+                parentIds.add(th.thParent);
+        const thById = new Map();
+        for (const th of ths)
+            thById.set(th.th, th);
+        this.baseThById = thById;
+        this.baseParentIds = parentIds;
+        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
+            });
+        }
+        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.
+     */
+    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
+                    });
+                }
+            }
+        }
+        this.hgThById.set(thById);
+        this.hgParentIds.set(parentIds);
+        return cols;
+    }
+    /** Costruisce le colonne da una `EsTableColumnsDefinition[]` (modalità dinamica) */
+    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);
+    }
+    /** Costruisce le colonne da `report_columns` (modalità report): il valore è preso per indice */
+    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);
+    }
+    /** Sceglie la sorgente delle colonne in base al modello: report → dinamica → direttive */
+    resolveColumns(items) {
+        const v = this.view();
+        if (this.viewMode() && v?.report_columns?.length) {
+            this.reportMode.set(true);
+            this.dynamicMode.set(false);
+            this.buildReportColumns(v.report_columns);
+            return;
+        }
+        this.reportMode.set(false);
+        let defs = this.DynamicRowColumnsDefinition();
+        const hasTh = (this.thDirectives?.length || 0) > 0;
+        // Auto-derivazione da "generic items" (oggetti con bag `.properties`) se non ci sono direttive né definizioni
+        if ((!defs || defs.length === 0) && !hasTh && items.length && items[0]?.properties) {
+            defs = Object.keys(items[0].properties).map(k => new EsTableColumnsDefinition(k, k));
+            this.DynamicRowColumnsDefinition.set(defs);
+        }
+        if (defs && defs.length > 0) {
+            this.dynamicMode.set(true);
+            this.buildDynamicColumns(defs);
+            return;
+        }
+        this.dynamicMode.set(false);
+        // Colonne da direttive (costruite in ngAfterContentInit). Se ci sono `*th Multi`
+        // le srotolo sui dati correnti e le accodo alle colonne-direttiva.
+        if (this.multiDefs.length && this.directiveColumns.length) {
+            const multiCols = this.buildMultiColumns(items);
+            this.setColumns([...this.directiveColumns, ...multiCols]);
+        }
+    }
+    // ===========================================================================
+    //  Operazioni dinamiche (colonne-icona a sinistra)
+    // ===========================================================================
+    /** Visibilità di un'operazione su una riga (gate conditionField/conditionValue, case-insensitive) */
+    operationVisible(op, item) {
+        if (!op.conditionField)
+            return true;
+        const src = item?.properties ?? item;
+        const key = Object.keys(src ?? {}).find(k => k.toLowerCase() === op.conditionField.toLowerCase());
+        return key != null && String(src[key]) === String(op.conditionValue);
+    }
+    dynamicOperation(item, id) {
+        this.onDynamicOperation.emit({ id, item });
+    }
+    // ===========================================================================
+    //  Valore/renderer di cella per modalità dinamica/report
+    // ===========================================================================
+    /** Valore di una cella report: `values[indice]` (fallback su accesso diretto) */
+    reportCellValue(item, col) {
+        const idx = col.propAccessor;
+        return item?.values ? item.values[idx] : item?.[idx];
+    }
+    /** Colore per-cella (fore/back) da `forecolors[i]`/`backcolors[i]`; vale sia report che dinamica */
+    cellColor(item, col, kind) {
+        if (col.colorIndex == null)
+            return null;
+        const arr = kind === 'fore' ? item?.forecolors : item?.backcolors;
+        return arr ? (arr[col.colorIndex] || null) : null;
+    }
+    /** Valore report formattato (usa il formatter delle aggregazioni: F0-9 / small-long-verylong) */
+    reportCellDisplay(item, col) {
+        const raw = this.reportCellValue(item, col);
+        return formatAggValue(raw == null ? '' : String(raw), col.format || '', this.locale);
+    }
+    /** Costruisce il routerLink di una cella dinamica da `RoutePath` + `RouteParameterProperties` */
+    routerLinkFor(item, col) {
+        let path = col.routePath || '';
+        const pars = col.routeParams || [];
+        const src = item?.properties ?? item;
+        for (let i = 0; i < pars.length; i++)
+            path = path.replace('{' + i + '}', src?.[pars[i]]);
+        path = path.replace(/'/g, '"').replace(/ /g, '');
+        try {
+            return JSON.parse(path);
+        }
+        catch {
+            return path;
+        }
+    }
+    // ===========================================================================
+    //  Refresh: ricostruisce boundSource in base a modalità/ordinamento/paginazione
+    // ===========================================================================
+    refresh() {
+        const v = this.view();
+        if (!v) {
+            this.boundSource.set([]);
+            return;
+        }
+        // Determina la sorgente delle colonne (report / dinamica / direttive)
+        const rawItems = this.viewMode()
+            ? ((this.ItemSourceProperty() ? v[this.ItemSourceProperty()] : v.items) ?? [])
+            : (Array.isArray(v) ? v : []);
+        this.resolveColumns(rawItems);
+        if (this.viewMode()) {
+            // Il backend (consumer) fornisce già la pagina ordinata in v.items
+            const items = rawItems;
+            if (this.Hierarchy()) {
+                this.grouped.set(false);
+                this.boundSource.set(this.applyHierarchy(items, v.selection));
+                return;
+            }
+            this.applySelectionFlags(items, v.selection);
+            this.boundSource.set(items);
+            return;
+        }
+        if (this.arrayMode()) {
+            let items = [...this.view()];
+            // Modalità gerarchica: albero padre/figlio (ignora paginazione)
+            if (this.Hierarchy()) {
+                this.grouped.set(false);
+                this.boundSource.set(this.applyHierarchy(items, this.arraySelection));
+                return;
+            }
+            // Raggruppamento client-side: se ci sono colonne `thGroup`, ignora la paginazione
+            const groupCols = this.groupColumns();
+            if (groupCols.length > 0) {
+                this.grouped.set(true);
+                const rows = buildGroupedRows(this.clientSort(items), groupCols, this.aggregationSpecs());
+                this.applySelectionFlags(rows.filter(r => r._item), this.arraySelection);
+                this.boundSource.set(rows);
+                return;
+            }
+            this.grouped.set(false);
+            items = this.clientSort(items);
+            const ipp = this.ArraymodeItemsPerPage();
+            if (this.UseArrayModePaging() && ipp && ipp < this.effectiveAllValue) {
+                const page = Math.min(this.arrayPage(), Math.max(1, Math.ceil(items.length / ipp)));
+                this.arrayPage.set(page);
+                items = items.slice((page - 1) * ipp, page * ipp);
+            }
+            this.applySelectionFlags(items, this.arraySelection);
+            this.boundSource.set(items);
+            return;
+        }
+        this.boundSource.set([]);
+    }
+    /** Colonne chiave di raggruppamento, nell'ordine di dichiarazione */
+    groupColumns() {
+        return this.columns().filter(c => c.isGroup).map(c => c.id);
+    }
+    /** Tutte le specifiche di aggregazione, appiattite su tutte le colonne */
+    aggregationSpecs() {
+        const specs = [];
+        for (const c of this.columns())
+            specs.push(...c.aggSpecs);
+        return specs;
+    }
+    clientSort(items) {
+        const ord = this.orders();
+        if (ord.length === 0)
+            return items;
+        return items.sort((a, b) => {
+            for (const o of ord) {
+                const dir = o.order === 'DESC' ? -1 : 1;
+                const av = a?.[o.id], bv = b?.[o.id];
+                if (av == null && bv == null)
+                    continue;
+                if (av == null)
+                    return -dir;
+                if (bv == null)
+                    return dir;
+                if (av < bv)
+                    return -dir;
+                if (av > bv)
+                    return dir;
+            }
+            return 0;
+        });
+    }
+    // ===========================================================================
+    //  Ordinamento
+    // ===========================================================================
+    orderOf(id) {
+        return this.orders().find(o => o.id === id)?.order ?? null;
+    }
+    orderIndex(id) {
+        const idx = this.orders().findIndex(o => o.id === id);
+        return idx < 0 ? -1 : idx + 1;
+    }
+    toggleSort(col) {
+        if (!this.OrderByColumn() || !col.orderable)
+            return;
+        const current = this.orderOf(col.id);
+        const next = current === 'ASC' ? 'DESC' : current === 'DESC' ? null : 'ASC';
+        let list = this.MultipleOrderingDirectives()
+            ? this.orders().filter(o => o.id !== col.id)
+            : [];
+        if (next)
+            list = [...list, new AppOrdering(col.id, next)];
+        this.orders.set(list);
+        if (this.viewMode()) {
+            const v = this.view();
+            v.orders = list;
+            v.internalsearchrequest = true;
+            this.onOrderChanged.emit(new AppOrdering(col.id, next ?? undefined));
+            this.onSearchRequest.emit(false);
+        }
+        else {
+            this.refresh();
+        }
+        if (this.SavePreferences())
+            this.saveColumnPrefs();
+        this.cdr.markForCheck();
+    }
+    syncOrdersFromView() {
+        if (this.viewMode() && this.view()?.orders)
+            this.orders.set([...this.view().orders]);
+    }
+    // ===========================================================================
+    //  Paginazione
+    // ===========================================================================
+    goToPage(p) {
+        if (this.viewMode()) {
+            const v = this.view();
+            v.page = p;
+            v.internalsearchrequest = true;
+            this.onSearchRequest.emit(false);
+        }
+        else {
+            this.arrayPage.set(p);
+            this.refresh();
+        }
+        this.cdr.markForCheck();
+    }
+    changeItemsPerPage(n) {
+        if (this.viewMode()) {
+            const v = this.view();
+            v.itemsperpageoverride = n;
+            v.page = 1;
+            v.internalsearchrequest = true;
+            this.onSearchRequest.emit(false);
+        }
+        else {
+            this.ArraymodeItemsPerPage.set(n);
+            this.arrayPage.set(1);
+            this.refresh();
+        }
+        this.cdr.markForCheck();
+    }
+    currentSelection() {
+        if (this.viewMode()) {
+            const v = this.view();
+            if (!v.selection)
+                v.selection = new ItemsSelection([]);
+            return v.selection;
+        }
+        if (!this.arraySelection)
+            this.arraySelection = new ItemsSelection([]);
+        return this.arraySelection;
+    }
+    /** Righe realmente selezionabili: esclude le righe-gruppo quando il raggruppamento è attivo */
+    selectableRows() {
+        const rows = this.boundSource();
+        return this.grouped() ? rows.filter(r => r._item) : rows;
+    }
+    /**
+     * Applica il flag _selected alle righe correnti in base allo stato di selezione.
+     * In modalità **all** una riga è selezionata se NON è tra le esclusioni (vale anche
+     * per le pagine non ancora visitate, dove tutte le righe risultano selezionate).
+     */
+    applySelectionFlags(items, sel) {
+        if (!sel) {
+            for (const it of items)
+                it._selected = false;
+            return;
+        }
+        for (const it of items)
+            it._selected = sel.all ? !sel.exclusions.includes(it) : sel.items.includes(it);
+    }
+    /** Ricalcola il conteggio: in modalità **all** è (totale - esclusioni) */
+    refreshSelectionCount(sel) {
+        sel.count = sel.all ? Math.max(0, this.totalCount() - sel.exclusions.length) : sel.items.length;
+    }
+    /** Toggle della selezione di una singola riga (checkbox, click su riga o click destro) */
+    toggleRow(item) {
+        if (this.SelectionDisabled() || item?._sep)
+            return;
+        const sel = this.currentSelection();
+        // Selezione in cascata (albero): propaga a discendenti e antenati
+        if (this.Hierarchy() && this.CascadeSelection() && !this.SingleSelection()) {
+            this.cascadeSelection(item, !item._selected);
+            this.rebuildSelectionFromFlags(sel);
+            this.syncGlobalCheck();
+            this.emitSelection(sel);
+            return;
+        }
+        if (this.SingleSelection()) {
+            const wasSelected = item._selected;
+            for (const it of this.selectableRows())
+                it._selected = false;
+            sel.all = false;
+            sel.exclusions = [];
+            sel.items = wasSelected ? [] : [item];
+            item._selected = !wasSelected;
+        }
+        else if (sel.all) {
+            // "Tutto selezionato": deselezionare = aggiungere alle esclusioni
+            item._selected = !item._selected;
+            if (item._selected)
+                sel.exclusions = sel.exclusions.filter(i => i !== item);
+            else if (!sel.exclusions.includes(item))
+                sel.exclusions.push(item);
+        }
+        else {
+            item._selected = !item._selected;
+            if (item._selected) {
+                if (!sel.items.includes(item))
+                    sel.items.push(item);
+            }
+            else
+                sel.items = sel.items.filter(i => i !== item);
+            this.selectionAnchor = item;
+        }
+        this.refreshSelectionCount(sel);
+        this.syncGlobalCheck();
+        this.emitSelection(sel);
+    }
+    /**
+     * Checkbox globale in testata: seleziona/azzera la **pagina corrente**.
+     * Per estendere la selezione a tutte le pagine si usa `selectEverything()`
+     * (link mostrato nella barra di selezione).
+     */
+    toggleAll() {
+        if (this.SelectionDisabled() || this.SingleSelection())
+            return;
+        const sel = this.currentSelection();
+        const rows = this.selectableRows();
+        const pageFully = !sel.all && rows.length > 0 && rows.every(r => r._selected);
+        if (sel.all || pageFully) {
+            this.clearSelectionState(sel);
+        }
+        else {
+            sel.all = false;
+            sel.exclusions = [];
+            sel.items = [...rows];
+            for (const r of rows)
+                r._selected = true;
+        }
+        this.refreshSelectionCount(sel);
+        this.syncGlobalCheck();
+        this.emitSelection(sel);
+    }
+    /** Estende la selezione a TUTTI gli elementi, anche quelli delle altre pagine (`selection.all`) */
+    selectEverything() {
+        if (this.SelectionDisabled() || this.SingleSelection())
+            return;
+        const sel = this.currentSelection();
+        sel.all = true;
+        sel.items = [];
+        sel.exclusions = [];
+        for (const r of this.selectableRows())
+            r._selected = true;
+        this.refreshSelectionCount(sel);
+        this.globalCheck.set(true);
+        this.emitSelection(sel);
+    }
+    /** Azzera completamente la selezione */
+    clearSelection() {
+        const sel = this.currentSelection();
+        this.clearSelectionState(sel);
+        this.refreshSelectionCount(sel);
+        this.globalCheck.set(false);
+        this.emitSelection(sel);
+    }
+    clearSelectionState(sel) {
+        sel.all = false;
+        sel.items = [];
+        sel.exclusions = [];
+        for (const r of this.selectableRows())
+            r._selected = false;
+    }
+    syncGlobalCheck() {
+        const sel = this.currentSelection();
+        const rows = this.selectableRows();
+        this.globalCheck.set(sel.all ? sel.exclusions.length === 0 : (rows.length > 0 && rows.every(r => r._selected)));
+    }
+    emitSelection(sel) {
+        // Una sola selezione alla volta: qualunque selezione di riga azzera il range di celle
+        if (this.rangeSel())
+            this.rangeSel.set(null);
+        this.onSelectionChanged.emit(sel);
+        this.changed();
+        this.cdr.markForCheck();
+    }
+    /** Click su una riga: espande/collassa un gruppo, oppure gestisce la selezione. */
+    handleRowClick(item, event) {
+        if (item?._group) {
+            this.toggleGroup(item);
+            return;
+        }
+        // In modalità range la selezione di riga avviene solo tramite le checkbox
+        // (il click sulla cella pilota il range), così i due meccanismi non collidono.
+        if (this.rangeActive())
+            return;
+        if (!this.Selection())
+            return;
+        if (this.SingleSelection()) {
+            this.toggleRow(item);
+            return;
+        }
+        // Selezione stile Windows (plain / Ctrl / Shift) quando ShiftClick è attivo
+        if (this.ShiftClick() && !this.Hierarchy()) {
+            this.windowsSelect(item, event);
+            return;
+        }
+        // Comportamento classico: Ctrl+click lascia il default del browser (link, ecc.)
+        if (event?.ctrlKey || event?.metaKey)
+            return;
+        this.toggleRow(item);
+    }
+    /** Selezione a click stile Esplora risorse: plain=solo questo, Ctrl=toggle, Shift=range dall'ancora */
+    windowsSelect(item, event) {
+        if (this.SelectionDisabled() || item?._sep)
+            return;
+        const rows = this.selectableRows();
+        const sel = this.currentSelection();
+        const shift = !!event?.shiftKey;
+        const ctrl = !!(event?.ctrlKey || event?.metaKey);
+        if (shift && this.selectionAnchor != null && rows.indexOf(this.selectionAnchor) >= 0) {
+            const a = rows.indexOf(this.selectionAnchor);
+            const b = rows.indexOf(item);
+            if (b >= 0) {
+                const [lo, hi] = a <= b ? [a, b] : [b, a];
+                if (!ctrl) {
+                    for (const r of rows)
+                        r._selected = false;
+                    sel.items = [];
+                }
+                for (let i = lo; i <= hi; i++) {
+                    rows[i]._selected = true;
+                    if (!sel.items.includes(rows[i]))
+                        sel.items.push(rows[i]);
+                }
+                // l'ancora resta invariata per estensioni successive
+            }
+        }
+        else if (ctrl) {
+            item._selected = !item._selected;
+            if (item._selected) {
+                if (!sel.items.includes(item))
+                    sel.items.push(item);
+            }
+            else
+                sel.items = sel.items.filter(i => i !== item);
+            this.selectionAnchor = item;
+        }
+        else {
+            // Re-click sull'unica riga selezionata => deseleziona; altrimenti seleziona solo questa
+            const onlyThisSelected = item._selected && !sel.all && sel.items.length === 1 && sel.items[0] === item;
+            for (const r of rows)
+                r._selected = false;
+            if (onlyThisSelected) {
+                sel.items = [];
+                this.selectionAnchor = null;
+            }
+            else {
+                sel.items = [item];
+                item._selected = true;
+                this.selectionAnchor = item;
+            }
+        }
+        sel.all = false;
+        sel.exclusions = [];
+        this.refreshSelectionCount(sel);
+        this.syncGlobalCheck();
+        this.emitSelection(sel);
+    }
+    /** Owner globale del range attivo: solo la tabella "attiva" reagisce a Ctrl+C/V */
+    static { this.activeRangeOwner = null; }
+    /** true se la cella (r,c) è dentro il range */
+    inRange(r, c) {
+        const rr = this.rangeRect();
+        return !!rr && r >= rr.top && r <= rr.bottom && c >= rr.left && c <= rr.right;
+    }
+    /** Estrae gli indici r/c dal `<td data-r data-c>` più vicino al target */
+    cellCoords(target) {
+        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);
+        return isNaN(r) || isNaN(c) ? null : { r, c };
+    }
+    /** mousedown sulla griglia: apre un nuovo range sulla cella-ancora */
+    onGridMouseDown(event) {
+        if (!this.rangeActive() || event.button !== 0 || this.editing())
+            return;
+        const co = this.cellCoords(event.target);
+        if (!co)
+            return;
+        EsTable2Component.activeRangeOwner = this;
+        // Una sola selezione alla volta: avviare un range azzera l'eventuale selezione di riga
+        if (this.hasSelection)
+            this.clearSelection();
+        this.rangeDragging.set(true);
+        this.rangeSel.set({ a: co, f: co });
+        this.clearTextSelection();
+        this.cdr.markForCheck();
+    }
+    /** mouseover durante il drag: estende il range (solo se la cella cambia davvero) */
+    onGridMouseOver(event) {
+        if (!this.rangeDragging() || !this.rangeActive())
+            return;
+        if ((event.buttons & 1) === 0) {
+            this.rangeDragging.set(false);
+            return;
+        } // tasto già rilasciato
+        const s = this.rangeSel();
+        const co = this.cellCoords(event.target);
+        if (!s || !co)
+            return;
+        if (s.f.r === co.r && s.f.c === co.c)
+            return; // nessun cambiamento → niente ricalcolo (no debounce necessario)
+        this.rangeSel.set({ a: s.a, f: co });
+        this.clearTextSelection();
+        this.cdr.markForCheck();
+    }
+    onDocMouseUp() { if (this.rangeDragging())
+        this.rangeDragging.set(false); }
+    flashNotice(msg) {
+        this.notice.set(msg);
+        this.cdr.markForCheck();
+        if (this.noticeTimer)
+            clearTimeout(this.noticeTimer);
+        this.noticeTimer = setTimeout(() => { this.notice.set(null); this.cdr.markForCheck(); }, 4500);
+    }
+    clearTextSelection() {
+        const sel = typeof window !== 'undefined' ? window.getSelection?.() : null;
+        if (sel && !sel.isCollapsed)
+            sel.removeAllRanges();
+    }
+    // --- Copia / Incolla -------------------------------------------------------
+    // Uso gli eventi nativi `copy`/`paste` (sincroni, dentro il gesto utente):
+    // niente prompt di permessi né rifiuti silenziosi come con
+    // navigator.clipboard.readText(), che in molti browser è bloccata.
+    onDocCopy(event) {
+        if (EsTable2Component.activeRangeOwner !== this || this.editing())
+            return;
+        if (this.isFieldTarget(event.target))
+            return; // lascio la copia nativa nei campi
+        const cells = this.rangeCells();
+        if (!cells.length)
+            return;
+        const tsv = cells.map(row => row.map(({ item, col }) => this.cellDisplayText(item, col)).join('\t')).join('\n');
+        event.clipboardData?.setData('text/plain', tsv);
+        event.preventDefault();
+    }
+    onDocPaste(event) {
+        if (EsTable2Component.activeRangeOwner !== this || this.editing() || !this.Editable())
+            return;
+        if (this.isFieldTarget(event.target))
+            return; // lascio l'incolla nativo nei campi
+        if (!this.rangeRect())
+            return;
+        const text = event.clipboardData?.getData('text/plain') ?? '';
+        event.preventDefault();
+        this.applyPaste(text);
+    }
+    /** true se il target dell'evento è un campo di input (copia/incolla nativi) */
+    isFieldTarget(t) {
+        const tag = t?.tagName;
+        return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';
+    }
+    /** Celle (item+colonna) comprese nel rettangolo di selezione */
+    rangeCells() {
+        const rr = this.rangeRect();
+        if (!rr)
+            return [];
+        const rows = this.boundSource();
+        const cols = this.visibleColumns();
+        const out = [];
+        for (let r = rr.top; r <= rr.bottom; r++) {
+            const item = rows[r];
+            if (!item)
+                continue;
+            const line = [];
+            for (let c = rr.left; c <= rr.right; c++)
+                if (cols[c])
+                    line.push({ item, col: cols[c] });
+            if (line.length)
+                out.push(line);
+        }
+        return out;
+    }
+    applyPaste(text) {
+        if (text == null)
+            return;
+        const matrix = text.replace(/\r/g, '').replace(/\n$/, '').split('\n').map(l => l.split('\t'));
+        const cells = this.rangeCells();
+        if (!cells.length || !matrix.length)
+            return;
+        // Un singolo valore si applica all'intera selezione; altrimenti le dimensioni devono coincidere
+        const single = matrix.length === 1 && matrix[0].length === 1;
+        if (!single && (matrix.length !== cells.length || matrix[0].length !== cells[0].length)) {
+            this.flashNotice(`Impossibile incollare: i dati (${matrix.length}×${matrix[0].length}) non corrispondono alla selezione (${cells.length}×${cells[0].length}).`);
+            return;
+        }
+        // Pass 1 — convalido TUTTE le celle per tipo di colonna. Se anche una sola
+        // è incompatibile, avviso e non applico NULLA (operazione atomica): meglio
+        // un avviso chiaro che svuotare silenziosamente le celle.
+        const coerced = [];
+        for (let r = 0; r < cells.length; r++) {
+            coerced[r] = [];
+            for (let c = 0; c < cells[r].length; c++) {
+                const { col } = cells[r][c];
+                const raw = single ? matrix[0][0] : matrix[r][c];
+                const res = this.coerceValue(raw, col);
+                if (!res.ok) {
+                    this.flashNotice(`Impossibile incollare: «${raw}» non è compatibile con la colonna «${col.headerText ?? col.id}» (tipo ${col.type ?? 'testo'}).`);
+                    return;
+                }
+                coerced[r][c] = res.value;
+            }
+        }
+        // Pass 2 — applico i valori già convertiti
+        const changes = [];
+        for (let r = 0; r < cells.length; r++)
+            for (let c = 0; c < cells[r].length; c++) {
+                const { item, col } = cells[r][c];
+                const change = this.applyCoerced(item, col, coerced[r][c]);
+                if (change)
+                    changes.push(change);
+            }
+        if (changes.length) {
+            this.onModelChange.emit(changes);
+            this.changed();
+        }
+        this.cdr.markForCheck();
+    }
+    // --- Editing in cella ------------------------------------------------------
+    /** Template di editor custom (`*editor`) per una colonna, se fornito dal consumer */
+    editorFor(col) {
+        const eds = this.editorDirectives?.toArray() ?? [];
+        const e = eds.find(x => (x.editor && x.editor === col.id) || (!!col.property && x.editorForProperty === col.property));
+        return e?.Template ?? null;
+    }
+    /** Contesto passato ai template `*editor` custom */
+    editorContext(item, col) {
+        return {
+            $implicit: item,
+            item, column: col,
+            value: this.editDraft,
+            setValue: (v) => { this.editDraft = v; },
+            commit: () => this.commitEdit(item, col),
+            cancel: () => this.cancelEdit()
+        };
+    }
+    isEditing(r, c) {
+        const e = this.editing();
+        return !!e && e.r === r && e.c === c;
+    }
+    /** Tipo dell'`<input>` di default in base al tipo di colonna */
+    editorInputType(type) {
+        switch (type) {
+            case 'number':
+            case 'int':
+            case 'float':
+            case 'currency': return 'number';
+            default: return 'text';
+        }
+    }
+    onCellDblClick(item, col, r, c) {
+        if (!this.Editable() || !col.property || item?._group)
+            return;
+        this.rangeSel.set(null);
+        this.editDraft = this.rawCellValue(item, col) ?? '';
+        this.editing.set({ r, c });
+        this.cdr.markForCheck();
+        requestAnimationFrame(() => {
+            const el = this.hostEl?.nativeElement?.querySelector('.est2-editor-input');
+            el?.focus();
+            el?.select?.();
+        });
+    }
+    commitEdit(item, col) {
+        if (!this.editing())
+            return; // già chiusa (es. blur dopo Enter/Escape)
+        const res = this.coerceValue(this.editDraft, col);
+        this.editing.set(null);
+        if (!res.ok) {
+            // valore incompatibile col tipo: avviso e NON modifico (nessun svuotamento)
+            this.flashNotice(`Valore «${this.editDraft}» non valido per «${col.headerText ?? col.id}» (tipo ${col.type ?? 'testo'}).`);
+            this.cdr.markForCheck();
+            return;
+        }
+        const change = this.applyCoerced(item, col, res.value);
+        if (change) {
+            this.onModelChange.emit([change]);
+            this.changed();
+        }
+        this.cdr.markForCheck();
+    }
+    cancelEdit() {
+        if (!this.editing())
+            return;
+        this.editing.set(null);
+        this.cdr.markForCheck();
+    }
+    // --- Valori: lettura/scrittura tipizzata + testo di copia ------------------
+    /** 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];
+    }
+    /** Scrive un valore GIÀ convertito e restituisce l'eventuale EsTableModelChange */
+    applyCoerced(item, col, niu) {
+        if (!col.property)
+            return null;
+        const old = this.rawCellValue(item, col);
+        if (old === niu)
+            return null;
+        if (item?.properties)
+            item.properties[col.property] = niu;
+        else
+            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).
+     */
+    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;
+    }
+    /** Testo visualizzato di una cella (usato dalla copia) */
+    cellDisplayText(item, col) {
+        if (col.propAccessor != null)
+            return this.reportCellDisplay(item, col);
+        const val = this.cellValue(item, col);
+        if (col.type === 'enum')
+            return this.lk.transform(val, col.source).description;
+        return this.fmt.transform(val, col.type, col.format, this.locale);
+    }
+    // ===========================================================================
+    //  Raggruppamento (array mode) — espansione/collasso e resa delle celle
+    // ===========================================================================
+    /** true se `childKey` è `ancestorKey` stesso o un suo discendente (senza collisioni di prefisso) */
+    isDescendantKey(childKey, ancestorKey) {
+        return !!childKey && (childKey === ancestorKey || childKey.startsWith(ancestorKey + '¦'));
+    }
+    /** Espande/collassa un gruppo agendo solo sui flag `_visible` (nessuna ricostruzione) */
+    toggleGroup(group) {
+        group._expanded = !group._expanded;
+        const open = group._expanded;
+        const key = group._thisKey;
+        for (const r of this.boundSource()) {
+            if (r === group)
+                continue;
+            // espandi: solo i figli immediati; collassa: l'intero sottoalbero
+            const childGroup = r._group && (open ? r._parent === key : this.isDescendantKey(r._parent, key));
+            const childItem = r._item && (open ? r._thisKey === key : this.isDescendantKey(r._thisKey, key));
+            if (childGroup || childItem) {
+                r._visible = open;
+                if (r._group && !open)
+                    r._expanded = false; // ri-collassa i discendenti
+            }
+        }
+        this.cdr.markForCheck();
+    }
+    /** Item (foglia) appartenenti a un gruppo, a qualsiasi profondità */
+    groupItems(group) {
+        return this.boundSource().filter(r => r._item && this.isDescendantKey(r._thisKey, group._thisKey));
+    }
+    /** Stato di selezione aggregato di un gruppo, per la sua checkbox */
+    groupSelectionState(group) {
+        const items = this.groupItems(group);
+        if (items.length === 0)
+            return 'none';
+        const n = items.filter(it => it._selected).length;
+        return n === 0 ? 'none' : n === items.length ? 'all' : 'some';
+    }
+    /** Seleziona/deseleziona tutti gli item di un gruppo */
+    toggleGroupSelection(group) {
+        if (this.SelectionDisabled() || this.SingleSelection())
+            return;
+        const items = this.groupItems(group);
+        const select = this.groupSelectionState(group) !== 'all';
+        const sel = this.currentSelection();
+        for (const it of items) {
+            it._selected = select;
+            if (sel.all) {
+                if (select)
+                    sel.exclusions = sel.exclusions.filter(i => i !== it);
+                else if (!sel.exclusions.includes(it))
+                    sel.exclusions.push(it);
+            }
+            else {
+                if (select) {
+                    if (!sel.items.includes(it))
+                        sel.items.push(it);
+                }
+                else
+                    sel.items = sel.items.filter(i => i !== it);
+            }
+        }
+        this.refreshSelectionCount(sel);
+        this.syncGlobalCheck();
+        this.emitSelection(sel);
+    }
+    /** Testo da mostrare nella cella `col` per una riga-gruppo */
+    groupCellDisplay(group, col) {
+        if (group.column === col.id) {
+            const gp = group._groupscount
+                ? ` - ${group._groupscount} ${group._groupscount === 1 ? 'gruppo' : 'gruppi'}`
+                : '';
+            return `${group.value} (${group.count}${gp})`;
+        }
+        const colMap = group._agg?.get(col.id);
+        if (!colMap || !col.header?.thAggregation)
+            return '';
+        let display = col.header.thAggregation;
+        for (const spec of col.aggSpecs)
+            display = display.replace(spec.match, formatAggValue(colMap.get(spec.func), spec.format, this.locale));
+        return display;
+    }
+    /** true se la cella di una riga-oggetto va lasciata vuota (colonna di gruppo nascosta) */
+    itemCellHidden(col) {
+        return this.grouped() && col.isGroup && !this.ShowItemGroupsColumns();
+    }
+    /** Indentazione (px) della cella-chiave in base al livello di gruppo */
+    groupIndent(group) {
+        return (group?._grouplevel || 0) * 18;
+    }
+    // ===========================================================================
+    //  Modalità gerarchica (albero padre/figlio)
+    // ===========================================================================
+    /** Auto-rileva ownKey/parentKey ('id'/'parentid') se non specificati */
+    autoDetectHierarchyKeys(items) {
+        if (!this.ParentKey() && !this.OwnKey() && items.length > 0) {
+            if (items[0]['parentid'] !== undefined)
+                this.ParentKey.set('parentid');
+            if (items[0]['id'] !== undefined)
+                this.OwnKey.set('id');
+        }
+        if (!this.OwnKey() || !this.ParentKey())
+            console.error("[es-table2] La modalità gerarchica richiede sia OwnKey che ParentKey. Fallback a lista piatta.");
+    }
+    /** Costruisce l'albero e applica la selezione; se mancano le chiavi torna la lista invariata */
+    applyHierarchy(items, sel) {
+        this.autoDetectHierarchyKeys(items);
+        if (!this.OwnKey() || !this.ParentKey()) {
+            this.applySelectionFlags(items, sel);
+            return items;
+        }
+        const ordered = assignHierarchyLevels(items, this.OwnKey(), this.ParentKey(), this.StartsExpanded(), this.AutoSortHierarchy());
+        // mappa padre -> figli per lookup O(1) (cascade selection, indeterminate)
+        this.hierChildren.clear();
+        const pk = this.ParentKey();
+        for (const r of ordered) {
+            const pv = r[pk];
+            if (pv === null || pv === undefined || pv === '')
+                continue;
+            const k = String(pv);
+            const arr = this.hierChildren.get(k);
+            if (arr)
+                arr.push(r);
+            else
+                this.hierChildren.set(k, [r]);
+        }
+        this.applySelectionFlags(ordered, sel);
+        return ordered;
+    }
+    directChildren(item) {
+        return this.hierChildren.get(String(item[this.OwnKey()])) ?? [];
+    }
+    hierDescendants(item) {
+        const out = [];
+        const stack = [...this.directChildren(item)];
+        while (stack.length) {
+            const n = stack.pop();
+            out.push(n);
+            const kids = this.directChildren(n);
+            if (kids.length)
+                stack.push(...kids);
+        }
+        return out;
+    }
+    /** Selezione in cascata: propaga lo stato al sottoalbero e ricalcola gli antenati */
+    cascadeSelection(item, selected) {
+        item._selected = selected;
+        for (const d of this.hierDescendants(item))
+            d._selected = selected;
+        // risali: un padre è selezionato sse tutti i figli lo sono
+        const pk = this.ParentKey();
+        let current = item;
+        while (true) {
+            const pv = current[pk];
+            if (pv === null || pv === undefined || pv === '')
+                break;
+            const parent = this.boundSource().find(r => String(r[this.OwnKey()]) === String(pv));
+            if (!parent)
+                break;
+            const kids = this.directChildren(parent);
+            parent._selected = kids.length > 0 && kids.every(k => k._selected);
+            current = parent;
+        }
+    }
+    /** Ricostruisce ItemsSelection dai flag `_selected` correnti (usato dalla cascade) */
+    rebuildSelectionFromFlags(sel) {
+        sel.all = false;
+        sel.exclusions = [];
+        sel.items = this.boundSource().filter(r => r._selected);
+        sel.count = sel.items.length;
+    }
+    /** Stato indeterminato di una riga-padre in cascade (alcuni discendenti selezionati) */
+    hierarchyIndeterminate(item) {
+        if (!this.CascadeSelection() || !item?.parent || item._selected)
+            return false;
+        return this.hierDescendants(item).some(d => d._selected);
+    }
+    /** Espande/collassa un nodo dell'albero */
+    toggleHierarchyNode(item) {
+        if (!item?.parent)
+            return;
+        const rows = this.boundSource();
+        if (item._expanded)
+            collapseNode(rows, this.OwnKey(), this.ParentKey(), item[this.OwnKey()]);
+        else
+            expandNode(rows, this.OwnKey(), this.ParentKey(), item[this.OwnKey()]);
+        this.cdr.markForCheck();
+    }
+    /** Indentazione (px) di una riga dell'albero in base al livello */
+    hierarchyIndent(item) {
+        return ((item?._level || 1) - 1) * 20;
+    }
+    /** Apertura context menu: se la riga non è selezionata la seleziona (solo lei), poi notifica */
+    onContextMenuOpen(item) {
+        // Il click destro apre il menu sulla riga: azzero l'eventuale range di celle
+        // (la selezione a range e quella di riga sono meccanismi distinti)
+        if (this.rangeSel()) {
+            this.rangeSel.set(null);
+            this.cdr.markForCheck();
+        }
+        if (item && !item._sep && !item._group && !item._selected) {
+            const sel = this.currentSelection();
+            for (const r of this.selectableRows())
+                r._selected = false;
+            sel.all = false;
+            sel.exclusions = [];
+            sel.items = [item];
+            item._selected = true;
+            this.refreshSelectionCount(sel);
+            this.syncGlobalCheck();
+            this.emitSelection(sel);
+        }
+        this.onOpenContextMenu.emit();
+    }
+    /** Indeterminato: alcune ma non tutte le righe selezionate (per la checkbox globale) */
+    get selectionIndeterminate() {
+        const sel = this.currentSelection();
+        if (sel.all)
+            return sel.exclusions.length > 0;
+        const rows = this.selectableRows();
+        const n = rows.filter(r => r._selected).length;
+        return n > 0 && n < rows.length;
+    }
+    /** Numero di elementi selezionati (per la barra) */
+    get selectedCount() { return this.currentSelection().count || 0; }
+    /** true se c'è almeno un elemento selezionato (mostra la barra) */
+    get hasSelection() {
+        const sel = this.currentSelection();
+        return sel.all || sel.items.length > 0;
+    }
+    /** true se sono selezionati TUTTI gli elementi (all senza esclusioni) */
+    get allSelected() {
+        const sel = this.currentSelection();
+        return sel.all && sel.exclusions.length === 0;
+    }
+    /** true se ha senso proporre "seleziona tutti": pagina piena, non in all, e ci sono altre pagine */
+    get canSelectEverything() {
+        const sel = this.currentSelection();
+        const rows = this.selectableRows();
+        return !sel.all && rows.length > 0 && rows.every(r => r._selected) && this.totalCount() > rows.length;
+    }
+    // ===========================================================================
+    //  Rimozione
+    // ===========================================================================
+    canRemove(item) {
+        const cond = this.RemovalCondition();
+        return cond ? !!item[cond] : true;
+    }
+    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 */
+    setColumns(cols) {
+        const p = this.columnPrefs;
+        if (!p) {
+            this.columns.set(cols);
+            this.ensurePrefsLoaded();
+            return;
+        }
+        const byId = new Map(cols.map(c => [c.id, c]));
+        const ordered = [];
+        for (const id of p.order) {
+            const c = byId.get(id);
+            if (c) {
+                ordered.push(c);
+                byId.delete(id);
+            }
+        }
+        for (const c of cols)
+            if (byId.has(c.id))
+                ordered.push(c); // colonne nuove (non in prefs) in coda
+        for (const c of ordered) {
+            c.visible = !p.hidden.includes(c.id);
+            // il pin salvato sovrascrive il default della direttiva (solo se presente nelle prefs)
+            if (p.pinned)
+                c.pinned = p.pinned.includes(c.id);
+        }
+        this.columns.set(ordered);
+        this.ensurePrefsLoaded();
+    }
+    /**
+     * Chiave di persistenza delle preferenze. Identica all'originale: il `name`
+     * del controllo (ngModel/formControlName). In fallback usa `[Name]`.
+     */
+    prefsKey() {
+        const key = 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;
+    }
+    /**
+     * Carica le preferenze dal `PreferencesService` (stesso formato dell'es-table
+     * originale: `{ columns, column_ordering, orders }`). Chiamata una volta sola,
+     * quando esistono già le colonne correnti per poter validare la coerenza.
+     */
+    ensurePrefsLoaded() {
+        if (this.prefsLoaded || !this.SavePreferences())
+            return;
+        if (this.columns().length === 0)
+            return; // attendo che le colonne esistano
+        const key = this.prefsKey();
+        if (!key) {
+            this.prefsLoaded = true;
+            return;
+        }
+        if (!this.prefService) {
+            console.error('[es-table2] SavePreferences attivo ma @esfaenza/preferences non è disponibile');
+            this.prefsLoaded = true;
+            return;
+        }
+        this.prefsLoaded = true;
+        this.prefService.getItem(key, true)
+            .subscribe(prefs => this.applyLoadedPrefs(prefs));
+    }
+    applyLoadedPrefs(prefs) {
+        if (!prefs)
+            return;
+        const currentIds = new Set(this.columns().map(c => c.id));
+        const order = (prefs.column_ordering?.length ? prefs.column_ordering : prefs.columns) || [];
+        const visible = prefs.columns || [];
+        // Coerenza: se le preferenze citano colonne non più presenti, l'es-table è
+        // cambiata → ignoro (come l'originale) per non nascondere/riordinare a vuoto.
+        for (const id of order)
+            if (id && !currentIds.has(id))
+                return;
+        for (const id of visible)
+            if (id && !currentIds.has(id))
+                return;
+        if (order.length === 0 && visible.length === 0)
+            return;
+        // `pinned` è un'estensione retro-compatibile: se assente (prefs vecchie/originali)
+        // resta il pin di default delle direttive.
+        const pinned = Array.isArray(prefs.pinned) ? prefs.pinned.filter(id => currentIds.has(id)) : undefined;
+        this.columnPrefs = { order, hidden: [...currentIds].filter(id => !visible.includes(id)), pinned };
+        this.setColumns(this.columns());
+        if (prefs.orders?.length) {
+            this.orders.set([...prefs.orders]);
+            if (this.viewMode() && this.view())
+                this.view().orders = [...prefs.orders];
+        }
+        this.cdr.markForCheck();
+    }
+    /**
+     * Persiste le preferenze correnti nel formato originale
+     * `{ columns (visibili), column_ordering (ordine), orders (ordinamenti) }`.
+     */
+    saveColumnPrefs() {
+        if (!this.SavePreferences() || !this.prefService)
+            return;
+        const key = this.prefsKey();
+        if (!key)
+            return;
+        // Escludo le sotto-colonne Multi: sono auto-generate dai dati, non vanno
+        // persistite (altrimenti il guard di coerenza le rifiuterebbe al reload,
+        // quando ancora non esistono).
+        const cols = this.columns().filter(c => c.multiProp == null);
+        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)
+        };
+        // allineo anche i campi wire dell'AppSearch (parità col server-side)
+        if (this.viewMode() && this.view()) {
+            this.view().columns = payload.columns;
+            this.view().column_ordering = payload.column_ordering;
+        }
+        this.prefService.setItem(key, payload).subscribe();
+    }
+    // --- Pin/unpin dall'header --------------------------------------------------
+    /** Attiva/disattiva il pin di una colonna e persiste (dall'indicatore in testata) */
+    togglePin(col, ev) {
+        ev?.stopPropagation();
+        col.pinned = !col.pinned;
+        // aggiorno le prefs correnti (ordine/visibilità invariati) — escludo le Multi
+        const nonMulti = this.columns().filter(c => c.multiProp == null);
+        this.columnPrefs = {
+            order: nonMulti.map(c => c.id),
+            hidden: nonMulti.filter(c => !c.visible).map(c => c.id),
+            pinned: nonMulti.filter(c => c.pinned).map(c => c.id)
+        };
+        this.columns.set([...this.columns()]); // forza il ricalcolo di visibleColumns/headerGroupRows
+        this.saveColumnPrefs();
+        this.cdr.markForCheck();
+    }
+    /** Etichetta leggibile di una colonna (header statico o id) */
+    columnLabel(col) {
+        return (col.headerText && String(col.headerText).trim()) || col.id;
+    }
+    openColumnsDialog() {
+        // Le sotto-colonne Multi sono auto-generate: non le espongo nella dialog
+        // (riordinarle/pinnarle singolarmente romperebbe il raggruppamento).
+        this.dialogCols.set(this.columns().filter(c => c.multiProp == null)
+            .map(c => ({ id: c.id, label: this.columnLabel(c), visible: c.visible, pinned: !!c.pinned })));
+        this.columnsDialogOpen.set(true);
+        this.cdr.markForCheck();
+    }
+    closeColumnsDialog() { this.columnsDialogOpen.set(false); this.cdr.markForCheck(); }
+    dialogToggle(i) {
+        const list = [...this.dialogCols()];
+        list[i] = { ...list[i], visible: !list[i].visible };
+        this.dialogCols.set(list);
+    }
+    dialogTogglePin(i) {
+        const list = [...this.dialogCols()];
+        list[i] = { ...list[i], pinned: !list[i].pinned };
+        this.dialogCols.set(list);
+    }
+    dialogSetAll(visible) {
+        this.dialogCols.set(this.dialogCols().map(c => ({ ...c, visible })));
+    }
+    dialogMove(i, dir) {
+        const list = [...this.dialogCols()];
+        const j = i + dir;
+        if (j < 0 || j >= list.length)
+            return;
+        [list[i], list[j]] = [list[j], list[i]];
+        this.dialogCols.set(list);
+    }
+    applyColumnsDialog() {
+        const list = this.dialogCols();
+        this.columnPrefs = {
+            order: list.map(c => c.id),
+            hidden: list.filter(c => !c.visible).map(c => c.id),
+            pinned: list.filter(c => c.pinned).map(c => c.id)
+        };
+        // riapplico alla lista corrente conservando gli oggetti-colonna...
+        this.setColumns(this.columns());
+        // ...e SOLO DOPO persisto (saveColumnPrefs deriva il payload da columns())
+        this.saveColumnPrefs();
+        this.columnsDialogOpen.set(false);
+        this.cdr.markForCheck();
+    }
+    resetColumnsDialog() {
+        this.columnPrefs = null;
+        this.buildColumns(); // ricostruisce dalle direttive nell'ordine originale
+        if (this.viewMode() || this.arrayMode())
+            this.refresh();
+        this.saveColumnPrefs(); // persisto lo stato di default (dopo la ricostruzione)
+        this.columnsDialogOpen.set(false);
+        this.cdr.markForCheck();
+    }
+    toggleExportMenu() { this.cornerMenuOpen.set(false); this.exportMenuOpen.set(!this.exportMenuOpen()); this.cdr.markForCheck(); }
+    toggleCornerMenu() { this.exportMenuOpen.set(false); this.cornerMenuOpen.set(!this.cornerMenuOpen()); this.cdr.markForCheck(); }
+    /** Chiude i menu a tendina del chrome quando si clicca fuori */
+    onDocClick() {
+        if (this.exportMenuOpen() || this.cornerMenuOpen()) {
+            this.exportMenuOpen.set(false);
+            this.cornerMenuOpen.set(false);
+            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.columnLabel(c));
+        const rows = this.exportRows().map(item => cols.map(c => this.cellDisplayText(item, c)));
+        return [header, ...rows];
+    }
+    export(format = 'CSV') {
+        this.exportMenuOpen.set(false);
+        // Parità con l'originale: se il consumer fornisce ExportFunction gliela lascio gestire
+        if (this.ExportFunction) {
+            this.ExportFunction((data, _type) => this.exportData(data, format), format);
+            return;
+        }
+        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);
+    }
+    /** Esporta dati forniti dal consumer (via ExportFunction): li mappa sulle colonne correnti */
+    exportData(data, format) {
+        if (!data?.length) {
+            this.flashNotice('Nessun dato da esportare.');
+            return;
+        }
+        const cols = this.exportColumns();
+        const header = cols.map(c => this.columnLabel(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);
+    }
+    // ===========================================================================
+    //  Corner menu / helpers template
+    // ===========================================================================
+    cornerAction(id) { this.onCornerAction.emit({ id, estable: this }); }
+    rowClass(item) {
+        return this.RowClassAssigner ? (this.RowClassAssigner(item) || '') : '';
+    }
+    hasChrome() {
+        return this.Export() || this.HiddenColumns() || this.ColumnsOrdering() || this.CornerMenuOptions().length > 0;
+    }
+    /** Colspan totale per righe a piena larghezza (stato vuoto) */
+    totalColspan() {
+        let n = this.usesColumns() ? this.visibleColumns().length : 1;
+        n += this.DynamicOperations().length;
+        if (this.Selection())
+            n++;
+        if (this.Removal())
+            n++;
+        if (this.hasChrome())
+            n++;
+        return Math.max(1, n);
+    }
+    /** Valore grezzo di una proprietà, gestendo gli oggetti "generic" con `properties` */
+    cellValue(item, col) {
+        if (!col.property)
+            return null;
+        return item?.properties ? item.properties[col.property] : item?.[col.property];
+    }
+    /** Entry Multi corrispondente a una cella (`item[multiProp][multiIndex]`) */
+    multiCell(item, col) {
+        if (col.multiProp == null || col.multiIndex == null)
+            return {};
+        const arr = item?.[col.multiProp];
+        return (Array.isArray(arr) ? arr[col.multiIndex] : null) ?? {};
+    }
+    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: 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 }, 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 }], 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    <!-- 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\" [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                        [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\"\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 [class]=\"col.cssClass\"\n                      [class.est2-th--orderable]=\"OrderByColumn() && col.orderable\"\n                      [class.est2-col-min]=\"col.header?.thShrink\"\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\"\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-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                          [title]=\"c.pinned ? 'Sblocca' : 'Blocca a sinistra'\" (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: 10px;--est-cell-px: 14px;--est-row-h: 44px;--est-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--est-fs: 13.5px;--est-fs-sm: 12px;--est-fw-head: 600;--est-transition: .14s cubic-bezier(.4, 0, .2, 1);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: 5px;--est-cell-px: 10px;--est-row-h: 32px;--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-muted);font-weight:var(--est-fw-head);font-size:var(--est-fs-sm);letter-spacing:.02em;text-transform:uppercase;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:600;letter-spacing:.02em;text-transform:uppercase;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);border-bottom-color:transparent}.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 th.est2-pinned,.est2 td.est2-pinned{position:sticky;background:var(--est-bg);box-shadow:1px 0 0 var(--est-border)}.est2 td.est2-pinned{z-index:3}.est2 thead th.est2-pinned{z-index:6;background:var(--est-bg-subtle)}.est2 thead tr.est2-hgroup-row th.est2-pinned{z-index:6;background:var(--est-bg)}.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-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: 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    <!-- 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\" [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                        [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\"\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 [class]=\"col.cssClass\"\n                      [class.est2-th--orderable]=\"OrderByColumn() && col.orderable\"\n                      [class.est2-col-min]=\"col.header?.thShrink\"\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\"\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-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                          [title]=\"c.pinned ? 'Sblocca' : 'Blocca a sinistra'\" (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: 10px;--est-cell-px: 14px;--est-row-h: 44px;--est-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--est-fs: 13.5px;--est-fs-sm: 12px;--est-fw-head: 600;--est-transition: .14s cubic-bezier(.4, 0, .2, 1);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: 5px;--est-cell-px: 10px;--est-row-h: 32px;--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-muted);font-weight:var(--est-fw-head);font-size:var(--est-fs-sm);letter-spacing:.02em;text-transform:uppercase;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:600;letter-spacing:.02em;text-transform:uppercase;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);border-bottom-color:transparent}.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 th.est2-pinned,.est2 td.est2-pinned{position:sticky;background:var(--est-bg);box-shadow:1px 0 0 var(--est-border)}.est2 td.est2-pinned{z-index:3}.est2 thead th.est2-pinned{z-index:6;background:var(--est-bg-subtle)}.est2 thead tr.est2-hgroup-row th.est2-pinned{z-index:6;background:var(--est-bg)}.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-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"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i2$1.PreferencesService, decorators: [{
+                    type: Optional
+                }] }, { type: EsTableDefaultable, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [EST2_DEFAULTS]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [EST2_DEBUG]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [EST2_EXPORT_GLOBAL_ACL]
+                }] }], propDecorators: { headerRef: [{
+                type: ContentChild,
+                args: ['header', { static: false }]
+            }], bodyRef: [{
+                type: ContentChild,
+                args: ['body', { static: false }]
+            }], thDirectives: [{
+                type: ContentChildren,
+                args: [EsThDirective]
+            }], tdDirectives: [{
+                type: ContentChildren,
+                args: [EsTdDirective]
+            }], editorDirectives: [{
+                type: ContentChildren,
+                args: [EsTdEditorDirective]
+            }], ContextMenu: [{
+                type: Input
+            }], tableEmptyMenu: [{
+                type: ViewChild,
+                args: ['emptyMenu', { static: true }]
+            }], theadRef: [{
+                type: ViewChild,
+                args: ['theadRef']
+            }], _Selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "Selection", required: false }] }], SingleSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "SingleSelection", required: false }] }], SelectionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "SelectionDisabled", required: false }] }], _SelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "SelectAll", required: false }] }], _UseSelectionCache: [{ type: i0.Input, args: [{ isSignal: true, alias: "UseSelectionCache", required: false }] }], _ShiftClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "ShiftClick", required: false }] }], _OrderByColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "OrderByColumn", required: false }] }], MultipleOrderingDirectives: [{ type: i0.Input, args: [{ isSignal: true, alias: "MultipleOrderingDirectives", required: false }] }], Removal: [{ type: i0.Input, args: [{ isSignal: true, alias: "Removal", required: false }] }], RemovalCondition: [{ type: i0.Input, args: [{ isSignal: true, alias: "RemovalCondition", required: false }] }], RowClassAssigner: [{
+                type: Input
+            }], _HidePaging: [{ type: i0.Input, args: [{ isSignal: true, alias: "HidePaging", required: false }] }], _HidePagingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "HidePagingCount", required: false }] }], _HidePagingButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "HidePagingButtons", required: false }] }], _AllSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "AllSearch", required: false }] }], _PagingStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "PagingStyle", required: false }] }], _ArraymodeItemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ArraymodeItemsPerPage", required: false }] }], _UseArrayModePaging: [{ type: i0.Input, args: [{ isSignal: true, alias: "UseArrayModePaging", required: false }] }], CountLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "CountLabel", required: false }] }], Height: [{ type: i0.Input, args: [{ isSignal: true, alias: "Height", required: false }] }], MaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "MaxHeight", required: false }] }], EmptySpaceBackgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "EmptySpaceBackgroundColor", required: false }] }], HighCellDensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "HighCellDensity", required: false }] }], HeaderHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "HeaderHidden", required: false }] }], BodyHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "BodyHidden", required: false }] }], ShowLoadingOnBootstrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "ShowLoadingOnBootstrap", required: false }] }], _DefaultAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "DefaultAlignment", required: false }] }], _TableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "TableClass", required: false }] }], _ContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "ContainerClass", required: false }] }], EsTableHandledSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "EsTableHandledSearch", required: false }] }], SearchThrottle: [{ type: i0.Input, args: [{ isSignal: true, alias: "SearchThrottle", required: false }] }], _ColumnsResizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "ColumnsResizable", required: false }] }], _ColumnsPinnable: [{ type: i0.Input, args: [{ isSignal: true, alias: "ColumnsPinnable", required: false }] }], _HiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "HiddenColumns", required: false }] }], _ColumnsOrdering: [{ type: i0.Input, args: [{ isSignal: true, alias: "ColumnsOrdering", required: false }] }], _Export: [{ type: i0.Input, args: [{ isSignal: true, alias: "Export", required: false }] }], XLSXExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "XLSXExport", required: false }] }], CSVExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "CSVExport", required: false }] }], ExportFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "ExportFileName", required: false }] }], ExportOnlyVisibleColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "ExportOnlyVisibleColumns", required: false }] }], ExportFunction: [{
+                type: Input
+            }], CornerMenuOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "CornerMenuOptions", required: false }] }], DynamicOperations: [{ type: i0.Input, args: [{ isSignal: true, alias: "DynamicOperations", required: false }] }], _DynamicRowColumnsDefinition: [{ type: i0.Input, args: [{ isSignal: true, alias: "DynamicRowColumnsDefinition", required: false }] }], Hierarchy: [{ type: i0.Input, args: [{ isSignal: true, alias: "Hierarchy", required: false }] }], _ParentKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ParentKey", required: false }] }], _OwnKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "OwnKey", required: false }] }], _AutoSortHierarchy: [{ type: i0.Input, args: [{ isSignal: true, alias: "AutoSortHierarchy", required: false }] }], StartsExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "StartsExpanded", required: false }] }], CascadeSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "CascadeSelection", required: false }] }], _SavePreferences: [{ type: i0.Input, args: [{ isSignal: true, alias: "SavePreferences", required: false }] }], Name: [{ type: i0.Input, args: [{ isSignal: true, alias: "Name", required: false }] }], _RowGroupingPagingStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "RowGroupingPagingStyle", required: false }] }], _ShowItemGroupsColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "ShowItemGroupsColumns", required: false }] }], Editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "Editable", required: false }] }], RangeSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "RangeSelection", required: false }] }], ItemSourceProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "ItemSourceProperty", required: false }] }], HasHeaderGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "HasHeaderGroup", required: false }] }], HasSecondaryHeaderGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "HasSecondaryHeaderGroup", required: false }] }], SearchView: [{ type: i0.Input, args: [{ isSignal: true, alias: "SearchView", required: false }] }], _AutoUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "AutoUpdate", required: false }] }], onOrderChanged: [{
+                type: Output
+            }], onSearchRequest: [{
+                type: Output
+            }], onSelectionChanged: [{
+                type: Output
+            }], onRemoval: [{
+                type: Output
+            }], onAbortRemoval: [{
+                type: Output
+            }], onModelChange: [{
+                type: Output
+            }], onOpenContextMenu: [{
+                type: Output
+            }], onCornerAction: [{
+                type: Output
+            }], onDynamicOperation: [{
+                type: Output
+            }], globalCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalCheck", required: false }] }, { type: i0.Output, args: ["globalCheckChange"] }], autoUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpdate", required: false }] }, { type: i0.Output, args: ["autoUpdateChange"] }], seconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "seconds", required: false }] }, { type: i0.Output, args: ["secondsChange"] }], researchInProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "researchInProgress", required: false }] }, { type: i0.Output, args: ["researchInProgressChange"] }], locale: [{
+                type: Input
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.est2']
+            }], denseClass: [{
+                type: HostBinding,
+                args: ['class.est2--dense']
+            }], onDocMouseUp: [{
+                type: HostListener,
+                args: ['document:mouseup']
+            }], onDocCopy: [{
+                type: HostListener,
+                args: ['document:copy', ['$event']]
+            }], onDocPaste: [{
+                type: HostListener,
+                args: ['document:paste', ['$event']]
+            }], onDocClick: [{
+                type: HostListener,
+                args: ['document:click']
+            }] } });
+
 const MODULES = [
     CommonModule,
     FormsModule,
@@ -5783,14 +8394,16 @@ const MODULES = [
     AccessControlModule
 ];
 const PUBLIC_ELEMENTS = [
-    // Direttive
+    // Direttive (condivise da <es-table> e <es-table2>)
     EsTdDirective,
     EsThDirective,
     EsTdEditorDirective,
     // Componenti
     EsTableComponent,
     EsTablePagerComponent,
-    ThTdProvider
+    ThTdProvider,
+    // es-table2
+    EsTable2Component
 ];
 const PRIVATE_ELEMENTS = [
     // Componenti
@@ -5802,7 +8415,11 @@ const PRIVATE_ELEMENTS = [
     EstRouterLinkPipe,
     EstRendererPipe,
     EstEditorPipe,
-    EstPropInsensitivePipe
+    EstPropInsensitivePipe,
+    // es-table2
+    EsTable2PagerComponent,
+    Est2FormatPipe,
+    Est2LookupPipe
 ];
 class EsTableModule {
     static forRoot(config) {
@@ -5812,19 +8429,25 @@ class EsTableModule {
                 { provide: EST_DEBUG, useValue: config?.debugMode || false },
                 { provide: EST_DEFAULTS, useValue: config?.defaults || null },
                 { provide: EST_EXPORT_GLOBAL_ACL, useValue: config?.globalExportAclExpression || 'true' },
+                // es-table2 condivide la stessa configurazione
+                { provide: EST2_DEBUG, useValue: config?.debugMode || false },
+                { provide: EST2_DEFAULTS, useValue: config?.defaults || null },
+                { provide: EST2_EXPORT_GLOBAL_ACL, useValue: config?.globalExportAclExpression || 'true' },
             ]
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.28", ngImport: i0, type: EsTableModule, declarations: [
-            // Direttive
+            // Direttive (condivise da <es-table> e <es-table2>)
             EsTdDirective,
             EsThDirective,
             EsTdEditorDirective,
             // Componenti
             EsTableComponent,
             EsTablePagerComponent,
-            ThTdProvider, 
+            ThTdProvider,
+            // es-table2
+            EsTable2Component, 
             // Componenti
             EsTh,
             EsTd,
@@ -5834,7 +8457,11 @@ class EsTableModule {
             EstRouterLinkPipe,
             EstRendererPipe,
             EstEditorPipe,
-            EstPropInsensitivePipe], imports: [CommonModule,
+            EstPropInsensitivePipe,
+            // es-table2
+            EsTable2PagerComponent,
+            Est2FormatPipe,
+            Est2LookupPipe], imports: [CommonModule,
             FormsModule,
             RouterModule,
             LocalizationModule,
@@ -5846,14 +8473,16 @@ class EsTableModule {
             FormsAndValidationsModule,
             TooltipModule,
             AccessControlModule, SelectModule], exports: [
-            // Direttive
+            // Direttive (condivise da <es-table> e <es-table2>)
             EsTdDirective,
             EsThDirective,
             EsTdEditorDirective,
             // Componenti
             EsTableComponent,
             EsTablePagerComponent,
-            ThTdProvider] }); }
+            ThTdProvider,
+            // es-table2
+            EsTable2Component] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsTableModule, imports: [MODULES, SelectModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: EsTableModule, decorators: [{
@@ -5947,5 +8576,5 @@ class ItemPropEditableReference {
  * Generated bundle index. Do not edit.
  */
 
-export { AppOrdering, AppSearch, CornerMenuOption, EST_DEBUG, EST_DEFAULTS, EST_EXPORT_GLOBAL_ACL, EsTableColumnsDefinition, EsTableComponent, EsTableDefaultable, EsTableModelChange, EsTableModule, EsTableModuleConfig, EsTableMultiValue, EsTableOperationDefinition, EsTablePagerComponent, EsTdDirective, EsTdEditorDirective, EsThDirective, GenericItem, Group, GroupAggregation, GroupFilter, GroupOrAggregation, ItemPropEditableReference, ItemsSelection, ReportColumn, ReportParam, ReportRow, ThTdProvider };
+export { AppOrdering, AppSearch, CornerMenuOption, EST2_DEBUG, EST2_DEFAULTS, EST2_EXPORT_GLOBAL_ACL, EST_DEBUG, EST_DEFAULTS, EST_EXPORT_GLOBAL_ACL, EsTable2Component, EsTableColumnsDefinition, EsTableComponent, EsTableDefaultable, EsTableModelChange, EsTableModule, EsTableModuleConfig, EsTableMultiValue, EsTableOperationDefinition, EsTablePagerComponent, EsTdDirective, EsTdEditorDirective, EsThDirective, GenericItem, Group, GroupAggregation, GroupFilter, GroupOrAggregation, ItemPropEditableReference, ItemsSelection, ReportColumn, ReportParam, ReportRow, ThTdProvider };
 //# sourceMappingURL=esfaenza-es-table.mjs.map