@elasticias/ui 1.0.15 → 1.0.16

package/fesm2022/elasticias-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Pipe, input, Component, output, booleanAttribute, Input, Directive, signal, computed, inject, EventEmitter, Injector, forwardRef, Output, ContentChild, HostBinding, ChangeDetectionStrategy, ElementRef, LOCALE_ID, ViewContainerRef, DestroyRef, ChangeDetectorRef, effect, HostListener, ViewChild, model, viewChild, contentChild, ViewEncapsulation, TemplateRef, ContentChildren, ViewChildren, untracked, InjectionToken, PLATFORM_ID } from '@angular/core';
+import { Pipe, input, Component, output, booleanAttribute, Input, Directive, signal, computed, inject, EventEmitter, Injector, forwardRef, Output, ContentChild, HostBinding, ChangeDetectionStrategy, ElementRef, LOCALE_ID, ViewContainerRef, DestroyRef, ChangeDetectorRef, effect, HostListener, ViewChild, model, viewChild, contentChild, ViewEncapsulation, afterNextRender, TemplateRef, ContentChildren, ViewChildren, untracked, InjectionToken, PLATFORM_ID } from '@angular/core';
 import { NumberUtils, UuidUtils, StorageUtils } from '@elasticias/utils';
 import * as i1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
@@ -5940,55 +5940,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             }] } });
 
 /**
- * Segmented pill filter. Used for tab-like selectors over a small
- * set of options — "Toutes · 87 / À approuver · 14 / En retard · 3".
+ * Segmented pill filter — "Toutes · 87 / À approuver · 14 / En retard · 3".
  *
  * ```html
  * <ef-pill-group
- *   [items]="filters"
- *   [(value)]="activeFilter"
- *   (valueChange)="onFilterChange($event)"
+ *   [items]="statusBuckets()"
+ *   [(value)]="statusFilter"
+ *   ariaLabelKey="sales_orders_status_aria"
  * />
  * ```
  *
- * The active pill picks up a contrast fill (`--ink-active`); inactive
- * pills sit on transparent ground with muted text. Heights map to
- * `--hit` (32px) so it stacks naturally next to compact action buttons.
+ * The active pill takes a contrast fill (`--ink-active`); inactive pills
+ * sit on transparent ground with muted text.
+ *
+ * **It scrolls rather than clipping.** Nine status filters with French
+ * labels are roughly 676px wide, and the hand-rolled `.pill-group` this
+ * replaces was `inline-flex` with no wrap and no scroller — so on a
+ * 390px phone the last five filters could not be reached at all. The row
+ * now scrolls inside itself, fades at whichever edge has more content,
+ * and keeps the selected pill in view. Pills never squeeze: a pill
+ * radius on a box that has wrapped to two lines is not a pill.
  */
 class EfPillGroupComponent {
-    items = [];
-    value = null;
-    ariaLabel = 'filters';
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Two-way bound selection. */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Translation key for the group's accessible name. */
+    ariaLabelKey = input('common_filters', ...(ngDevMode ? [{ debugName: "ariaLabelKey" }] : /* istanbul ignore next */ []));
     /** Hide counts even when items provide them. */
-    hideCounts = false;
-    valueChange = new EventEmitter();
+    hideCounts = input(false, { ...(ngDevMode ? { debugName: "hideCounts" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    scroller = viewChild('scroller', ...(ngDevMode ? [{ debugName: "scroller" }] : /* istanbul ignore next */ []));
+    /** Whether content is hidden past each edge, which drives the fades. */
+    overflowStart = signal(false, ...(ngDevMode ? [{ debugName: "overflowStart" }] : /* istanbul ignore next */ []));
+    overflowEnd = signal(false, ...(ngDevMode ? [{ debugName: "overflowEnd" }] : /* istanbul ignore next */ []));
+    fadeClass = computed(() => ({
+        'has-fade-start': this.overflowStart(),
+        'has-fade-end': this.overflowEnd(),
+    }), ...(ngDevMode ? [{ debugName: "fadeClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Landing on a screen whose active filter sits off-screen should not
+        // look like nothing is selected.
+        afterNextRender(() => {
+            this.measure();
+            this.scrollActiveIntoView('auto');
+        });
+        effect(() => {
+            this.value();
+            this.items();
+            queueMicrotask(() => {
+                this.measure();
+                this.scrollActiveIntoView('smooth');
+            });
+        });
+    }
     select(item) {
-        if (this.value !== item.value) {
-            this.value = item.value;
-            this.valueChange.emit(item.value);
-        }
+        if (this.value() !== item.value)
+            this.value.set(item.value);
     }
-    trackValue(_, item) {
-        return item.value;
+    onScroll() {
+        this.measure();
+    }
+    trackValue = (_, item) => item.value;
+    measure() {
+        const el = this.scroller()?.nativeElement;
+        if (!el)
+            return;
+        // `scrollLeft` runs negative in RTL, so compare on magnitude.
+        const left = Math.abs(el.scrollLeft);
+        const max = el.scrollWidth - el.clientWidth;
+        this.overflowStart.set(left > 1);
+        this.overflowEnd.set(max > 1 && left < max - 1);
+    }
+    scrollActiveIntoView(behavior) {
+        const el = this.scroller()?.nativeElement;
+        const active = el?.querySelector('.ef-pill.is-active');
+        if (!el || !active)
+            return;
+        // Only correct when it is actually out of view — an unprompted scroll
+        // on every render is noise.
+        const pill = active.getBoundingClientRect();
+        const box = el.getBoundingClientRect();
+        if (pill.left >= box.left && pill.right <= box.right)
+            return;
+        active.scrollIntoView({ behavior, inline: 'center', block: 'nearest' });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfPillGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfPillGroupComponent, isStandalone: true, selector: "ef-pill-group", inputs: { items: "items", value: "value", ariaLabel: "ariaLabel", hideCounts: "hideCounts" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"ef-pill-group\" role=\"tablist\" [attr.aria-label]=\"ariaLabel\">\n  @for (item of items; track trackValue($index, item)) {\n    <button\n      type=\"button\"\n      class=\"ef-pill\"\n      role=\"tab\"\n      [class.is-active]=\"item.value === value\"\n      [attr.aria-selected]=\"item.value === value\"\n      (click)=\"select(item)\"\n    >\n      <span class=\"ef-pill__label\">\n        @if (item.labelKey) {\n          {{ item.labelKey | translate }}\n        } @else {\n          {{ item.label }}\n        }\n      </span>\n      @if (!hideCounts && item.count !== undefined) {\n        <span class=\"ef-pill__sep\" aria-hidden=\"true\">\u00B7</span>\n        <span class=\"ef-pill__count\">{{ item.count }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: [".ef-pill-group{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:var(--r-pill);background:transparent}.ef-pill{display:inline-flex;align-items:center;gap:6px;height:var(--hit);padding:0 14px;border:none;border-radius:var(--r-pill);background:transparent;color:var(--text-mute);font-family:inherit;font-size:12.5px;font-weight:500;letter-spacing:.01em;line-height:1;cursor:pointer;transition:background var(--t-fast, .14s) var(--ease-out, ease-out),color var(--t-fast, .14s) var(--ease-out, ease-out)}.ef-pill:hover:not(.is-active){background:color-mix(in srgb,var(--ink-active, #0f1115) 6%,transparent);color:var(--text)}.ef-pill:focus-visible{outline:2px solid color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent);outline-offset:1px}.ef-pill.is-active{background:var(--ink-active, #0f1115);color:var(--paper)}.ef-pill.is-active .ef-pill__sep,.ef-pill.is-active .ef-pill__count{color:color-mix(in srgb,var(--paper) 70%,transparent)}.ef-pill__sep{color:var(--text-soft)}.ef-pill__count{font-variant-numeric:tabular-nums;color:var(--text-mute)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfPillGroupComponent, isStandalone: true, selector: "ef-pill-group", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, hideCounts: { classPropertyName: "hideCounts", publicName: "hideCounts", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ef-pill-group\" [ngClass]=\"fadeClass()\">\n  <div\n    #scroller\n    class=\"ef-pill-group__track\"\n    role=\"tablist\"\n    [attr.aria-label]=\"ariaLabelKey() | translate\"\n    (scroll)=\"onScroll()\"\n  >\n    @for (item of items(); track trackValue($index, item)) {\n      <button\n        type=\"button\"\n        class=\"ef-pill\"\n        role=\"tab\"\n        [class.is-active]=\"item.value === value()\"\n        [attr.aria-selected]=\"item.value === value()\"\n        (click)=\"select(item)\"\n      >\n        <span class=\"ef-pill__label\">{{ item.labelKey | translate }}</span>\n        @if (!hideCounts() && item.count !== undefined) {\n          <span class=\"ef-pill__sep\" aria-hidden=\"true\">\u00B7</span>\n          <span class=\"ef-pill__count\">{{ item.count }}</span>\n        }\n      </button>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;min-width:0;max-width:100%;flex:1 1 auto}@media(max-width:767px){:host{flex-basis:100%}}.ef-pill-group{position:relative;display:flex;min-width:0;max-width:100%;inline-size:100%;border-radius:var(--r-pill)}.ef-pill-group__track{display:flex;align-items:center;gap:4px;padding:4px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;border-radius:inherit;scrollbar-width:none;-ms-overflow-style:none}.ef-pill-group__track::-webkit-scrollbar{display:none}.ef-pill-group:before,.ef-pill-group:after{content:\"\";position:absolute;inset-block:0;inline-size:28px;pointer-events:none;opacity:0;transition:opacity var(--t-fast, .14s) var(--ease-out, ease-out);z-index:1}.ef-pill-group:before{inset-inline-start:0;background:linear-gradient(to right,var(--paper-alt) 20%,transparent)}.ef-pill-group:after{inset-inline-end:0;background:linear-gradient(to left,var(--paper-alt) 20%,transparent)}[dir=rtl] .ef-pill-group:before{background:linear-gradient(to left,var(--paper-alt) 20%,transparent)}[dir=rtl] .ef-pill-group:after{background:linear-gradient(to right,var(--paper-alt) 20%,transparent)}.ef-pill-group.has-fade-start:before,.ef-pill-group.has-fade-end:after{opacity:1}.ef-pill{flex:0 0 auto;scroll-snap-align:center;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;block-size:var(--hit);padding-inline:14px;border:none;border-radius:var(--r-pill);background:transparent;color:var(--text-mute);font-family:inherit;font-size:12.5px;font-weight:500;letter-spacing:.01em;line-height:1;cursor:pointer;transition:background var(--t-fast, .14s) var(--ease-out, ease-out),color var(--t-fast, .14s) var(--ease-out, ease-out)}.ef-pill:hover:not(.is-active){background:color-mix(in srgb,var(--ink-active, #0f1115) 6%,transparent);color:var(--text)}.ef-pill:focus-visible{outline:2px solid color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent);outline-offset:1px}.ef-pill.is-active{background:var(--ink-active, #0f1115);color:var(--paper)}.ef-pill.is-active .ef-pill__sep,.ef-pill.is-active .ef-pill__count{color:color-mix(in srgb,var(--paper) 70%,transparent)}.ef-pill__sep{color:var(--text-soft)}.ef-pill__count{font-variant-numeric:tabular-nums;color:var(--text-mute)}@media(pointer:coarse){.ef-pill{block-size:var(--hit-touch);padding-inline:16px;font-size:13px}}@media(max-width:767px){.ef-pill-group__track{scroll-padding-inline:var(--s-2)}}@media(prefers-reduced-motion:reduce){.ef-pill-group:before,.ef-pill-group:after,.ef-pill{transition:none}.ef-pill-group__track{scroll-behavior:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfPillGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-pill-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TranslateModule], template: "<div class=\"ef-pill-group\" role=\"tablist\" [attr.aria-label]=\"ariaLabel\">\n  @for (item of items; track trackValue($index, item)) {\n    <button\n      type=\"button\"\n      class=\"ef-pill\"\n      role=\"tab\"\n      [class.is-active]=\"item.value === value\"\n      [attr.aria-selected]=\"item.value === value\"\n      (click)=\"select(item)\"\n    >\n      <span class=\"ef-pill__label\">\n        @if (item.labelKey) {\n          {{ item.labelKey | translate }}\n        } @else {\n          {{ item.label }}\n        }\n      </span>\n      @if (!hideCounts && item.count !== undefined) {\n        <span class=\"ef-pill__sep\" aria-hidden=\"true\">\u00B7</span>\n        <span class=\"ef-pill__count\">{{ item.count }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: [".ef-pill-group{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:var(--r-pill);background:transparent}.ef-pill{display:inline-flex;align-items:center;gap:6px;height:var(--hit);padding:0 14px;border:none;border-radius:var(--r-pill);background:transparent;color:var(--text-mute);font-family:inherit;font-size:12.5px;font-weight:500;letter-spacing:.01em;line-height:1;cursor:pointer;transition:background var(--t-fast, .14s) var(--ease-out, ease-out),color var(--t-fast, .14s) var(--ease-out, ease-out)}.ef-pill:hover:not(.is-active){background:color-mix(in srgb,var(--ink-active, #0f1115) 6%,transparent);color:var(--text)}.ef-pill:focus-visible{outline:2px solid color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent);outline-offset:1px}.ef-pill.is-active{background:var(--ink-active, #0f1115);color:var(--paper)}.ef-pill.is-active .ef-pill__sep,.ef-pill.is-active .ef-pill__count{color:color-mix(in srgb,var(--paper) 70%,transparent)}.ef-pill__sep{color:var(--text-soft)}.ef-pill__count{font-variant-numeric:tabular-nums;color:var(--text-mute)}\n"] }]
-        }], propDecorators: { items: [{
-                type: Input,
-                args: [{ required: true }]
-            }], value: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], hideCounts: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'ef-pill-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TranslateModule], template: "<div class=\"ef-pill-group\" [ngClass]=\"fadeClass()\">\n  <div\n    #scroller\n    class=\"ef-pill-group__track\"\n    role=\"tablist\"\n    [attr.aria-label]=\"ariaLabelKey() | translate\"\n    (scroll)=\"onScroll()\"\n  >\n    @for (item of items(); track trackValue($index, item)) {\n      <button\n        type=\"button\"\n        class=\"ef-pill\"\n        role=\"tab\"\n        [class.is-active]=\"item.value === value()\"\n        [attr.aria-selected]=\"item.value === value()\"\n        (click)=\"select(item)\"\n      >\n        <span class=\"ef-pill__label\">{{ item.labelKey | translate }}</span>\n        @if (!hideCounts() && item.count !== undefined) {\n          <span class=\"ef-pill__sep\" aria-hidden=\"true\">\u00B7</span>\n          <span class=\"ef-pill__count\">{{ item.count }}</span>\n        }\n      </button>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;min-width:0;max-width:100%;flex:1 1 auto}@media(max-width:767px){:host{flex-basis:100%}}.ef-pill-group{position:relative;display:flex;min-width:0;max-width:100%;inline-size:100%;border-radius:var(--r-pill)}.ef-pill-group__track{display:flex;align-items:center;gap:4px;padding:4px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;border-radius:inherit;scrollbar-width:none;-ms-overflow-style:none}.ef-pill-group__track::-webkit-scrollbar{display:none}.ef-pill-group:before,.ef-pill-group:after{content:\"\";position:absolute;inset-block:0;inline-size:28px;pointer-events:none;opacity:0;transition:opacity var(--t-fast, .14s) var(--ease-out, ease-out);z-index:1}.ef-pill-group:before{inset-inline-start:0;background:linear-gradient(to right,var(--paper-alt) 20%,transparent)}.ef-pill-group:after{inset-inline-end:0;background:linear-gradient(to left,var(--paper-alt) 20%,transparent)}[dir=rtl] .ef-pill-group:before{background:linear-gradient(to left,var(--paper-alt) 20%,transparent)}[dir=rtl] .ef-pill-group:after{background:linear-gradient(to right,var(--paper-alt) 20%,transparent)}.ef-pill-group.has-fade-start:before,.ef-pill-group.has-fade-end:after{opacity:1}.ef-pill{flex:0 0 auto;scroll-snap-align:center;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;block-size:var(--hit);padding-inline:14px;border:none;border-radius:var(--r-pill);background:transparent;color:var(--text-mute);font-family:inherit;font-size:12.5px;font-weight:500;letter-spacing:.01em;line-height:1;cursor:pointer;transition:background var(--t-fast, .14s) var(--ease-out, ease-out),color var(--t-fast, .14s) var(--ease-out, ease-out)}.ef-pill:hover:not(.is-active){background:color-mix(in srgb,var(--ink-active, #0f1115) 6%,transparent);color:var(--text)}.ef-pill:focus-visible{outline:2px solid color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent);outline-offset:1px}.ef-pill.is-active{background:var(--ink-active, #0f1115);color:var(--paper)}.ef-pill.is-active .ef-pill__sep,.ef-pill.is-active .ef-pill__count{color:color-mix(in srgb,var(--paper) 70%,transparent)}.ef-pill__sep{color:var(--text-soft)}.ef-pill__count{font-variant-numeric:tabular-nums;color:var(--text-mute)}@media(pointer:coarse){.ef-pill{block-size:var(--hit-touch);padding-inline:16px;font-size:13px}}@media(max-width:767px){.ef-pill-group__track{scroll-padding-inline:var(--s-2)}}@media(prefers-reduced-motion:reduce){.ef-pill-group:before,.ef-pill-group:after,.ef-pill{transition:none}.ef-pill-group__track{scroll-behavior:auto}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], hideCounts: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCounts", required: false }] }], scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }] } });
 
 /**
  * Marks an `<ng-template>` as the panel renderer for a tab value on
@@ -8415,7 +8457,8 @@ const EF_DATATABLE_DEFAULTS = {
     size: 'small',
     styleClass: 'text-sm',
     tableStyle: { 'min-width': '50rem' },
-    emptyMessage: 'Aucune entree trouvee',
+    emptyMessageKey: 'common_empty_none_yet',
+    emptyMessage: '',
     currentPageReportTemplate: '{currentPage} de {totalPages}',
 };
 /**
@@ -8826,7 +8869,7 @@ class EfDatatableComponent {
         return this.pTable?.filters;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfDatatableComponent, isStandalone: true, selector: "ef-datatable", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, searchEntity: { classPropertyName: "searchEntity", publicName: "searchEntity", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, pt: { classPropertyName: "pt", publicName: "pt", isSignal: true, isRequired: false, transformFunction: null }, screenStateKey: { classPropertyName: "screenStateKey", publicName: "screenStateKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editRow: "editRow", deleteRow: "deleteRow", duplicateRow: "duplicateRow", lazyLoad: "lazyLoad", rowSelect: "rowSelect" }, viewQueries: [{ propertyName: "pTable", first: true, predicate: ["pTable"], descendants: true }], ngImport: i0, template: "<p-table #pTable\n  [value]=\"searchEntity()?.items || []\"\n  [columns]=\"processedColumns()\"\n  [dataKey]=\"mergedConfig.dataKey\"\n\n  [lazy]=\"mergedConfig.lazy\"\n  (onLazyLoad)=\"handleLazyLoad($event)\"\n\n  [paginator]=\"mergedConfig.paginator\"\n  [rows]=\"searchEntity()?.pagination?.pageSize || mergedConfig.rows\"\n  [rowsPerPageOptions]=\"mergedConfig.rowsPerPageOptions\"\n  [totalRecords]=\"searchEntity()?.totalCount || 0\"\n  [first]=\"searchEntity()?.pagination ? (searchEntity()!.pagination!.pageNumber - 1) * searchEntity()!.pagination!.pageSize : 0\"\n\n  [scrollable]=\"mergedConfig.scrollable\"\n  [scrollHeight]=\"mergedConfig.scrollHeight\"\n\n  [resizableColumns]=\"mergedConfig.resizableColumns\"\n  [columnResizeMode]=\"mergedConfig.columnResizeMode\"\n\n  [stateStorage]=\"mergedConfig.stateStorage\"\n  [stateKey]=\"mergedConfig.stateKey\"\n\n  [size]=\"mergedConfig.size\"\n  [class]=\"mergedConfig.styleClass\"\n  [tableStyle]=\"mergedConfig.tableStyle\"\n\n  [currentPageReportTemplate]=\"searchEntity()?.totalCount ? 'Affichage de {first} a {last} sur {totalRecords} entrees' : mergedConfig.emptyMessage\"\n  [showCurrentPageReport]=\"true\"\n  [sortField]=\"sortField()\"\n  [sortOrder]=\"sortOrder()\"\n  [loading]=\"loading()\"\n\n  [pt]=\"pt()\"\n\n  selectionMode=\"single\" [(selection)]=\"selectedItem\">\n\n  <!-- Header Template -->\n  <ng-template #header>\n    <tr>\n      <!-- Action column at start if configured -->\n      @if (mergedActions.show && mergedActions.position === 'start') {\n        <th [class]=\"mergedActions.width\"></th>\n      }\n\n      <!-- Data columns -->\n      @for (column of processedColumns(); track column.field) {\n        @if (column.sortable && column.resizable) {\n          <th\n            [pSortableColumn]=\"column.field\"\n            pResizableColumn\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n              <p-sortIcon [field]=\"column.field\" />\n            }\n          </th>\n        } @else if (column.sortable) {\n          <th\n            [pSortableColumn]=\"column.field\"\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n              <p-sortIcon [field]=\"column.field\" />\n            }\n          </th>\n        } @else if (column.resizable) {\n          <th\n            pResizableColumn\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n            }\n          </th>\n        } @else {\n          <th\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n            }\n          </th>\n        }\n      }\n\n      <!-- Action column at end if configured -->\n      @if (mergedActions.show && mergedActions.position === 'end') {\n        <th [class]=\"mergedActions.width\"></th>\n      }\n    </tr>\n  </ng-template>\n\n  <!-- Body Template -->\n  <ng-template #body let-rowData let-rowIndex=\"rowIndex\">\n    <tr (dblclick)=\"handleEdit(rowData)\" style=\"cursor: pointer\"\n      [pSelectableRow]=\"rowData\" [pSelectableRowIndex]=\"rowIndex\">\n      <!-- Action column at start if configured -->\n      @if (mergedActions.show && mergedActions.position === 'start') {\n        <td>\n          <ef-datatable-actionbar\n            [context]=\"context()\"\n            (edit)=\"handleEdit(rowData)\"\n            (delete)=\"handleDelete(rowData)\"\n            (duplicate)=\"handleDuplicate(rowData)\">\n          </ef-datatable-actionbar>\n        </td>\n      }\n\n      <!-- Data columns -->\n      @for (column of processedColumns(); track column.field) {\n        <td [ngClass]=\"getAlignmentClass(column.align)\">\n          @if (column.template) {\n            <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: rowData, column: column }\"></ng-container>\n          } @else {\n            {{ formatCellValue(rowData, column) }}\n          }\n        </td>\n      }\n\n      <!-- Action column at end if configured -->\n      @if (mergedActions.show && mergedActions.position === 'end') {\n        <td>\n          <ef-datatable-actionbar\n            [context]=\"context()\"\n            (edit)=\"handleEdit(rowData)\"\n            (delete)=\"handleDelete(rowData)\"\n            (duplicate)=\"handleDuplicate(rowData)\">\n          </ef-datatable-actionbar>\n        </td>\n      }\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host{display:block}:host ::ng-deep .text-end{text-align:right!important}:host ::ng-deep .text-center{text-align:center!important}:host ::ng-deep .text-start{text-align:left!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$5.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i2$5.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfDatatableActionBarComponent, selector: "ef-datatable-actionbar", inputs: ["context", "state", "duplicateButton", "editButton", "deleteButton"], outputs: ["duplicate", "edit", "delete"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfDatatableComponent, isStandalone: true, selector: "ef-datatable", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, searchEntity: { classPropertyName: "searchEntity", publicName: "searchEntity", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, pt: { classPropertyName: "pt", publicName: "pt", isSignal: true, isRequired: false, transformFunction: null }, screenStateKey: { classPropertyName: "screenStateKey", publicName: "screenStateKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editRow: "editRow", deleteRow: "deleteRow", duplicateRow: "duplicateRow", lazyLoad: "lazyLoad", rowSelect: "rowSelect" }, viewQueries: [{ propertyName: "pTable", first: true, predicate: ["pTable"], descendants: true }], ngImport: i0, template: "<!-- The pager's report slot reports; it is not where an empty state belongs.\n     It used to carry both, which is why a table with no rows printed\n     untranslated French inside the pager instead of saying it was empty. -->\n<p-table #pTable\n  [value]=\"searchEntity()?.items || []\"\n  [columns]=\"processedColumns()\"\n  [dataKey]=\"mergedConfig.dataKey\"\n\n  [lazy]=\"mergedConfig.lazy\"\n  (onLazyLoad)=\"handleLazyLoad($event)\"\n\n  [paginator]=\"mergedConfig.paginator\"\n  [rows]=\"searchEntity()?.pagination?.pageSize || mergedConfig.rows\"\n  [rowsPerPageOptions]=\"mergedConfig.rowsPerPageOptions\"\n  [totalRecords]=\"searchEntity()?.totalCount || 0\"\n  [first]=\"searchEntity()?.pagination ? (searchEntity()!.pagination!.pageNumber - 1) * searchEntity()!.pagination!.pageSize : 0\"\n\n  [scrollable]=\"mergedConfig.scrollable\"\n  [scrollHeight]=\"mergedConfig.scrollHeight\"\n\n  [resizableColumns]=\"mergedConfig.resizableColumns\"\n  [columnResizeMode]=\"mergedConfig.columnResizeMode\"\n\n  [stateStorage]=\"mergedConfig.stateStorage\"\n  [stateKey]=\"mergedConfig.stateKey\"\n\n  [size]=\"mergedConfig.size\"\n  [class]=\"mergedConfig.styleClass\"\n  [tableStyle]=\"mergedConfig.tableStyle\"\n\n  [currentPageReportTemplate]=\"'common_pager_report' | translate\"\n  [showCurrentPageReport]=\"true\"\n  [sortField]=\"sortField()\"\n  [sortOrder]=\"sortOrder()\"\n  [loading]=\"loading()\"\n\n  [pt]=\"pt()\"\n\n  selectionMode=\"single\" [(selection)]=\"selectedItem\">\n\n  <!-- Header Template -->\n  <ng-template #header>\n    <tr>\n      <!-- Action column at start if configured -->\n      @if (mergedActions.show && mergedActions.position === 'start') {\n        <th [class]=\"mergedActions.width\"></th>\n      }\n\n      <!-- Data columns -->\n      @for (column of processedColumns(); track column.field) {\n        @if (column.sortable && column.resizable) {\n          <th\n            [pSortableColumn]=\"column.field\"\n            pResizableColumn\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n              <p-sortIcon [field]=\"column.field\" />\n            }\n          </th>\n        } @else if (column.sortable) {\n          <th\n            [pSortableColumn]=\"column.field\"\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n              <p-sortIcon [field]=\"column.field\" />\n            }\n          </th>\n        } @else if (column.resizable) {\n          <th\n            pResizableColumn\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n            }\n          </th>\n        } @else {\n          <th\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n            }\n          </th>\n        }\n      }\n\n      <!-- Action column at end if configured -->\n      @if (mergedActions.show && mergedActions.position === 'end') {\n        <th [class]=\"mergedActions.width\"></th>\n      }\n    </tr>\n  </ng-template>\n\n  <!-- Body Template -->\n  <ng-template #body let-rowData let-rowIndex=\"rowIndex\">\n    <tr (dblclick)=\"handleEdit(rowData)\" style=\"cursor: pointer\"\n      [pSelectableRow]=\"rowData\" [pSelectableRowIndex]=\"rowIndex\">\n      <!-- Action column at start if configured -->\n      @if (mergedActions.show && mergedActions.position === 'start') {\n        <td>\n          <ef-datatable-actionbar\n            [context]=\"context()\"\n            (edit)=\"handleEdit(rowData)\"\n            (delete)=\"handleDelete(rowData)\"\n            (duplicate)=\"handleDuplicate(rowData)\">\n          </ef-datatable-actionbar>\n        </td>\n      }\n\n      <!-- Data columns -->\n      @for (column of processedColumns(); track column.field) {\n        <td [ngClass]=\"getAlignmentClass(column.align)\">\n          @if (column.template) {\n            <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: rowData, column: column }\"></ng-container>\n          } @else {\n            {{ formatCellValue(rowData, column) }}\n          }\n        </td>\n      }\n\n      <!-- Action column at end if configured -->\n      @if (mergedActions.show && mergedActions.position === 'end') {\n        <td>\n          <ef-datatable-actionbar\n            [context]=\"context()\"\n            (edit)=\"handleEdit(rowData)\"\n            (delete)=\"handleDelete(rowData)\"\n            (duplicate)=\"handleDuplicate(rowData)\">\n          </ef-datatable-actionbar>\n        </td>\n      }\n    </tr>\n  </ng-template>\n\n  <!-- A table with no rows says so in the table, in the viewer's language. -->\n  <ng-template #emptymessage>\n    <tr>\n      <td [attr.colspan]=\"columns().length + 1\">\n        <div class=\"tbl-empty\">\n          <i class=\"pi pi-inbox tbl-empty__icon\" aria-hidden=\"true\"></i>\n          <p class=\"tbl-empty__title\">\n            {{ mergedConfig.emptyMessageKey ?? 'common_empty_none_yet' | translate }}\n          </p>\n        </div>\n      </td>\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host{display:block}:host ::ng-deep .text-end{text-align:right!important}:host ::ng-deep .text-center{text-align:center!important}:host ::ng-deep .text-start{text-align:left!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$5.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i2$5.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfDatatableActionBarComponent, selector: "ef-datatable-actionbar", inputs: ["context", "state", "duplicateButton", "editButton", "deleteButton"], outputs: ["duplicate", "edit", "delete"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDatatableComponent, decorators: [{
             type: Component,
@@ -8835,7 +8878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         TableModule,
                         TranslateModule,
                         EfDatatableActionBarComponent,
-                    ], template: "<p-table #pTable\n  [value]=\"searchEntity()?.items || []\"\n  [columns]=\"processedColumns()\"\n  [dataKey]=\"mergedConfig.dataKey\"\n\n  [lazy]=\"mergedConfig.lazy\"\n  (onLazyLoad)=\"handleLazyLoad($event)\"\n\n  [paginator]=\"mergedConfig.paginator\"\n  [rows]=\"searchEntity()?.pagination?.pageSize || mergedConfig.rows\"\n  [rowsPerPageOptions]=\"mergedConfig.rowsPerPageOptions\"\n  [totalRecords]=\"searchEntity()?.totalCount || 0\"\n  [first]=\"searchEntity()?.pagination ? (searchEntity()!.pagination!.pageNumber - 1) * searchEntity()!.pagination!.pageSize : 0\"\n\n  [scrollable]=\"mergedConfig.scrollable\"\n  [scrollHeight]=\"mergedConfig.scrollHeight\"\n\n  [resizableColumns]=\"mergedConfig.resizableColumns\"\n  [columnResizeMode]=\"mergedConfig.columnResizeMode\"\n\n  [stateStorage]=\"mergedConfig.stateStorage\"\n  [stateKey]=\"mergedConfig.stateKey\"\n\n  [size]=\"mergedConfig.size\"\n  [class]=\"mergedConfig.styleClass\"\n  [tableStyle]=\"mergedConfig.tableStyle\"\n\n  [currentPageReportTemplate]=\"searchEntity()?.totalCount ? 'Affichage de {first} a {last} sur {totalRecords} entrees' : mergedConfig.emptyMessage\"\n  [showCurrentPageReport]=\"true\"\n  [sortField]=\"sortField()\"\n  [sortOrder]=\"sortOrder()\"\n  [loading]=\"loading()\"\n\n  [pt]=\"pt()\"\n\n  selectionMode=\"single\" [(selection)]=\"selectedItem\">\n\n  <!-- Header Template -->\n  <ng-template #header>\n    <tr>\n      <!-- Action column at start if configured -->\n      @if (mergedActions.show && mergedActions.position === 'start') {\n        <th [class]=\"mergedActions.width\"></th>\n      }\n\n      <!-- Data columns -->\n      @for (column of processedColumns(); track column.field) {\n        @if (column.sortable && column.resizable) {\n          <th\n            [pSortableColumn]=\"column.field\"\n            pResizableColumn\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n              <p-sortIcon [field]=\"column.field\" />\n            }\n          </th>\n        } @else if (column.sortable) {\n          <th\n            [pSortableColumn]=\"column.field\"\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n              <p-sortIcon [field]=\"column.field\" />\n            }\n          </th>\n        } @else if (column.resizable) {\n          <th\n            pResizableColumn\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n            }\n          </th>\n        } @else {\n          <th\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n            }\n          </th>\n        }\n      }\n\n      <!-- Action column at end if configured -->\n      @if (mergedActions.show && mergedActions.position === 'end') {\n        <th [class]=\"mergedActions.width\"></th>\n      }\n    </tr>\n  </ng-template>\n\n  <!-- Body Template -->\n  <ng-template #body let-rowData let-rowIndex=\"rowIndex\">\n    <tr (dblclick)=\"handleEdit(rowData)\" style=\"cursor: pointer\"\n      [pSelectableRow]=\"rowData\" [pSelectableRowIndex]=\"rowIndex\">\n      <!-- Action column at start if configured -->\n      @if (mergedActions.show && mergedActions.position === 'start') {\n        <td>\n          <ef-datatable-actionbar\n            [context]=\"context()\"\n            (edit)=\"handleEdit(rowData)\"\n            (delete)=\"handleDelete(rowData)\"\n            (duplicate)=\"handleDuplicate(rowData)\">\n          </ef-datatable-actionbar>\n        </td>\n      }\n\n      <!-- Data columns -->\n      @for (column of processedColumns(); track column.field) {\n        <td [ngClass]=\"getAlignmentClass(column.align)\">\n          @if (column.template) {\n            <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: rowData, column: column }\"></ng-container>\n          } @else {\n            {{ formatCellValue(rowData, column) }}\n          }\n        </td>\n      }\n\n      <!-- Action column at end if configured -->\n      @if (mergedActions.show && mergedActions.position === 'end') {\n        <td>\n          <ef-datatable-actionbar\n            [context]=\"context()\"\n            (edit)=\"handleEdit(rowData)\"\n            (delete)=\"handleDelete(rowData)\"\n            (duplicate)=\"handleDuplicate(rowData)\">\n          </ef-datatable-actionbar>\n        </td>\n      }\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host{display:block}:host ::ng-deep .text-end{text-align:right!important}:host ::ng-deep .text-center{text-align:center!important}:host ::ng-deep .text-start{text-align:left!important}\n"] }]
+                    ], template: "<!-- The pager's report slot reports; it is not where an empty state belongs.\n     It used to carry both, which is why a table with no rows printed\n     untranslated French inside the pager instead of saying it was empty. -->\n<p-table #pTable\n  [value]=\"searchEntity()?.items || []\"\n  [columns]=\"processedColumns()\"\n  [dataKey]=\"mergedConfig.dataKey\"\n\n  [lazy]=\"mergedConfig.lazy\"\n  (onLazyLoad)=\"handleLazyLoad($event)\"\n\n  [paginator]=\"mergedConfig.paginator\"\n  [rows]=\"searchEntity()?.pagination?.pageSize || mergedConfig.rows\"\n  [rowsPerPageOptions]=\"mergedConfig.rowsPerPageOptions\"\n  [totalRecords]=\"searchEntity()?.totalCount || 0\"\n  [first]=\"searchEntity()?.pagination ? (searchEntity()!.pagination!.pageNumber - 1) * searchEntity()!.pagination!.pageSize : 0\"\n\n  [scrollable]=\"mergedConfig.scrollable\"\n  [scrollHeight]=\"mergedConfig.scrollHeight\"\n\n  [resizableColumns]=\"mergedConfig.resizableColumns\"\n  [columnResizeMode]=\"mergedConfig.columnResizeMode\"\n\n  [stateStorage]=\"mergedConfig.stateStorage\"\n  [stateKey]=\"mergedConfig.stateKey\"\n\n  [size]=\"mergedConfig.size\"\n  [class]=\"mergedConfig.styleClass\"\n  [tableStyle]=\"mergedConfig.tableStyle\"\n\n  [currentPageReportTemplate]=\"'common_pager_report' | translate\"\n  [showCurrentPageReport]=\"true\"\n  [sortField]=\"sortField()\"\n  [sortOrder]=\"sortOrder()\"\n  [loading]=\"loading()\"\n\n  [pt]=\"pt()\"\n\n  selectionMode=\"single\" [(selection)]=\"selectedItem\">\n\n  <!-- Header Template -->\n  <ng-template #header>\n    <tr>\n      <!-- Action column at start if configured -->\n      @if (mergedActions.show && mergedActions.position === 'start') {\n        <th [class]=\"mergedActions.width\"></th>\n      }\n\n      <!-- Data columns -->\n      @for (column of processedColumns(); track column.field) {\n        @if (column.sortable && column.resizable) {\n          <th\n            [pSortableColumn]=\"column.field\"\n            pResizableColumn\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n              <p-sortIcon [field]=\"column.field\" />\n            }\n          </th>\n        } @else if (column.sortable) {\n          <th\n            [pSortableColumn]=\"column.field\"\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n              <p-sortIcon [field]=\"column.field\" />\n            }\n          </th>\n        } @else if (column.resizable) {\n          <th\n            pResizableColumn\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n            }\n          </th>\n        } @else {\n          <th\n            [class]=\"column.width || ''\"\n            [ngClass]=\"column.styleClass\">\n\n            @if (column.headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"column.headerTemplate; context: { $implicit: column }\"></ng-container>\n            } @else {\n              {{ column.header | translate }}\n            }\n          </th>\n        }\n      }\n\n      <!-- Action column at end if configured -->\n      @if (mergedActions.show && mergedActions.position === 'end') {\n        <th [class]=\"mergedActions.width\"></th>\n      }\n    </tr>\n  </ng-template>\n\n  <!-- Body Template -->\n  <ng-template #body let-rowData let-rowIndex=\"rowIndex\">\n    <tr (dblclick)=\"handleEdit(rowData)\" style=\"cursor: pointer\"\n      [pSelectableRow]=\"rowData\" [pSelectableRowIndex]=\"rowIndex\">\n      <!-- Action column at start if configured -->\n      @if (mergedActions.show && mergedActions.position === 'start') {\n        <td>\n          <ef-datatable-actionbar\n            [context]=\"context()\"\n            (edit)=\"handleEdit(rowData)\"\n            (delete)=\"handleDelete(rowData)\"\n            (duplicate)=\"handleDuplicate(rowData)\">\n          </ef-datatable-actionbar>\n        </td>\n      }\n\n      <!-- Data columns -->\n      @for (column of processedColumns(); track column.field) {\n        <td [ngClass]=\"getAlignmentClass(column.align)\">\n          @if (column.template) {\n            <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: rowData, column: column }\"></ng-container>\n          } @else {\n            {{ formatCellValue(rowData, column) }}\n          }\n        </td>\n      }\n\n      <!-- Action column at end if configured -->\n      @if (mergedActions.show && mergedActions.position === 'end') {\n        <td>\n          <ef-datatable-actionbar\n            [context]=\"context()\"\n            (edit)=\"handleEdit(rowData)\"\n            (delete)=\"handleDelete(rowData)\"\n            (duplicate)=\"handleDuplicate(rowData)\">\n          </ef-datatable-actionbar>\n        </td>\n      }\n    </tr>\n  </ng-template>\n\n  <!-- A table with no rows says so in the table, in the viewer's language. -->\n  <ng-template #emptymessage>\n    <tr>\n      <td [attr.colspan]=\"columns().length + 1\">\n        <div class=\"tbl-empty\">\n          <i class=\"pi pi-inbox tbl-empty__icon\" aria-hidden=\"true\"></i>\n          <p class=\"tbl-empty__title\">\n            {{ mergedConfig.emptyMessageKey ?? 'common_empty_none_yet' | translate }}\n          </p>\n        </div>\n      </td>\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host{display:block}:host ::ng-deep .text-end{text-align:right!important}:host ::ng-deep .text-center{text-align:center!important}:host ::ng-deep .text-start{text-align:left!important}\n"] }]
         }], propDecorators: { pTable: [{
                 type: ViewChild,
                 args: ['pTable']
@@ -9462,6 +9505,44 @@ class EfDataCardComponent {
     showDensityControl = input(false, { ...(ngDevMode ? { debugName: "showDensityControl" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Render the Columns picker in the head row. */
     showColumnPicker = input(false, { ...(ngDevMode ? { debugName: "showColumnPicker" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Render the Export control beside Density and Columns. It sits here
+     * rather than in the page toolbar because it acts on the result set,
+     * the way density and the column picker do -- the toolbar is for
+     * page-level actions like creating a record.
+     */
+    showExportControl = input(false, { ...(ngDevMode ? { debugName: "showExportControl" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * True while the host is assembling the file. A full export pages the
+     * server and can run for seconds, so the control has to say it is
+     * working rather than look idle and ignore further clicks.
+     */
+    exporting = input(false, { ...(ngDevMode ? { debugName: "exporting" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Screen context used to gate Export. Falls back to
+     * `rowActionsContext`, which every list screen already supplies, so
+     * moving Export out of `ef-search-toolbar` does not quietly drop the
+     * permission check that lived there.
+     */
+    screenContext = input(undefined, ...(ngDevMode ? [{ debugName: "screenContext" }] : /* istanbul ignore next */ []));
+    /**
+     * Mirrors `ef-search-toolbar`'s rule exactly: hidden unless asked for,
+     * and with a context present it obeys `hasExportPermission`. No
+     * context means no permission model is in play, so it renders.
+     */
+    canExport = computed(() => {
+        if (!this.showExportControl())
+            return false;
+        const ctx = this.screenContext() ?? this.rowActionsContext();
+        return ctx ? ctx.hasExportPermission : true;
+    }, ...(ngDevMode ? [{ debugName: "canExport" }] : /* istanbul ignore next */ []));
+    /**
+     * The active free-text query, used only to word the empty state. When
+     * this is set, zero rows means "nothing matched what you typed" and the
+     * user is offered a way back; when it is empty, zero rows means the
+     * collection itself is empty, which is a different message.
+     */
+    searchTerm = input('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
     /**
      * Stable key used to remember density and hidden columns for this
      * table. Preferences are a per-viewer convenience, so they live in
@@ -9476,6 +9557,13 @@ class EfDataCardComponent {
     rowDoubleClick = output();
     /** Emitted by the auto row-actions cell — `{ action, row }`. */
     rowAction = output();
+    /**
+     * Export the current result set. The card holds the columns but not the
+     * query, so the host screen fetches the rows and writes the file.
+     */
+    exportRequest = output();
+    /** Raised by the empty state's "clear search" action. */
+    clearSearch = output();
     /* ── Content children ──────────────────────────────────────── */
     bodyTemplates;
     headerTemplates;
@@ -9651,6 +9739,44 @@ class EfDataCardComponent {
     toggleTool(tool) {
         this.openTool.update(cur => (cur === tool ? null : tool));
     }
+    /**
+     * Hand the host screen everything it needs to write the file: the
+     * columns the viewer can actually see, in the order they see them, and
+     * the rows already on screen as a fallback for hosts that do not fetch.
+     * `select` and `actions` are chrome, never data, so they are dropped.
+     */
+    requestExport() {
+        this.exportRequest.emit({
+            columns: this.effectiveColumns().filter(c => c.id !== 'select' && c.id !== 'actions'),
+            visibleRows: [...this.rows()],
+            resolveCell: (row, col) => this.exportCellValue(row, col),
+        });
+    }
+    /**
+     * Cell value as it belongs in a file rather than on screen.
+     *
+     * Numbers and dates stay raw, because a spreadsheet wants a number it
+     * can total and a date it can sort. Reference and status columns do
+     * not: their stored value is an id or a code, and a column of
+     * `71d4431cd16141338ffcf635` tells the reader nothing. Those resolve
+     * through the same lookup the table renders with, so the file says
+     * what the screen said.
+     */
+    exportCellValue(row, col) {
+        const raw = this.cellValue(row, col);
+        if (raw === null || raw === undefined)
+            return '';
+        if (col.type === 'reference' || col.type === 'status') {
+            return this.resolveReference(raw, col);
+        }
+        // `Date.toString()` would write "Sat Sep 05 2026 08:02:57 GMT-0400
+        // (Eastern Daylight Time)" into the cell, which no spreadsheet parses
+        // and no reader wants. ISO 8601 sorts correctly and is unambiguous
+        // about the zone.
+        if (raw instanceof Date)
+            return raw.toISOString();
+        return raw;
+    }
     setDensity(value) {
         this.density.set(value);
         this.openTool.set(null);
@@ -9748,7 +9874,7 @@ class EfDataCardComponent {
     };
     trackByColumn = (_, col) => col.id;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDataCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfDataCardComponent, isStandalone: true, selector: "ef-data-card", inputs: { mobileLayout: { classPropertyName: "mobileLayout", publicName: "mobileLayout", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, trackByField: { classPropertyName: "trackByField", publicName: "trackByField", isSignal: true, isRequired: false, transformFunction: null }, pageNumber: { classPropertyName: "pageNumber", publicName: "pageNumber", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, hidePager: { classPropertyName: "hidePager", publicName: "hidePager", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, loadingKey: { classPropertyName: "loadingKey", publicName: "loadingKey", isSignal: true, isRequired: false, transformFunction: null }, rowDoubleClickable: { classPropertyName: "rowDoubleClickable", publicName: "rowDoubleClickable", isSignal: true, isRequired: false, transformFunction: null }, hasActionsColumn: { classPropertyName: "hasActionsColumn", publicName: "hasActionsColumn", isSignal: true, isRequired: false, transformFunction: null }, rowActionsContext: { classPropertyName: "rowActionsContext", publicName: "rowActionsContext", isSignal: true, isRequired: false, transformFunction: null }, showViewAction: { classPropertyName: "showViewAction", publicName: "showViewAction", isSignal: true, isRequired: false, transformFunction: null }, showEditAction: { classPropertyName: "showEditAction", publicName: "showEditAction", isSignal: true, isRequired: false, transformFunction: null }, showDuplicateAction: { classPropertyName: "showDuplicateAction", publicName: "showDuplicateAction", isSignal: true, isRequired: false, transformFunction: null }, showDeleteAction: { classPropertyName: "showDeleteAction", publicName: "showDeleteAction", isSignal: true, isRequired: false, transformFunction: null }, showDensityControl: { classPropertyName: "showDensityControl", publicName: "showDensityControl", isSignal: true, isRequired: false, transformFunction: null }, showColumnPicker: { classPropertyName: "showColumnPicker", publicName: "showColumnPicker", isSignal: true, isRequired: false, transformFunction: null }, tableKey: { classPropertyName: "tableKey", publicName: "tableKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", rowDoubleClick: "rowDoubleClick", rowAction: "rowAction" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "ef-row-actions-toggle": "onRowActionsToggle($event)" } }, queries: [{ propertyName: "bodyTemplates", predicate: EfColumnTemplateDirective }, { propertyName: "headerTemplates", predicate: EfColumnHeaderTemplateDirective }], ngImport: i0, template: "<!-- One cell renderer, shared by the table, the mobile row and the mobile\n     detail. A new column type is added here once, not three times. -->\n<ng-template #cellTpl let-row let-col=\"col\">\n  @if (bodyTemplate(col.id); as bodyTpl) {\n    <ng-container *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, col: col }\"></ng-container>\n  } @else {\n              @switch (col.type) {\n                @case ('number') {\n                  {{ $any(cellValue(row, col)) | number:numberFormat(col):col.locale }}\n                }\n                @case ('money') {\n                  {{ $any(cellValue(row, col)) | currency:(col.currencyCode || 'EUR'):(col.currencyDisplay || 'symbol'):numberFormat(col):col.locale }}\n                }\n                @case ('date') {\n                  {{ $any(cellValue(row, col)) | date:(col.dateFormat || 'dd/MM/yyyy'):undefined:col.locale }}\n                }\n                @case ('datetime') {\n                  {{ $any(cellValue(row, col)) | date:(col.dateFormat || 'dd/MM/yyyy HH:mm'):undefined:col.locale }}\n                }\n                @case ('boolean') {\n                  @if (cellValue(row, col)) {\n                    <span class=\"bool yes\"><span class=\"dot\"></span> \u2713</span>\n                  } @else {\n                    <span class=\"bool no\"><span class=\"dot\"></span> \u2014</span>\n                  }\n                }\n                @case ('mono') {\n                  <span class=\"ref\">{{ cellValue(row, col) }}</span>\n                }\n                @case ('chip') {\n                  <span [class]=\"'chip ' + (col.chipPrefix || 'chip-') + cellValue(row, col)\">\n                    \u25CF {{ cellValue(row, col) }}\n                  </span>\n                }\n                @case ('status') {\n                  <ef-status-chip\n                    [referenceKey]=\"col.referenceKey || ''\"\n                    [code]=\"$any(cellValue(row, col))\"\n                  />\n                }\n                @case ('reference') {\n                  {{ resolveReference(cellValue(row, col), col) }}\n                }\n                @default {\n                  {{ cellValue(row, col) }}\n                }\n              }\n  }\n</ng-template>\n\n<div class=\"tbl-wrap\" [class.has-open-menu]=\"openMenuCount() > 0 || openTool() !== null\" [attr.data-density]=\"density()\">\n  <!-- \u2500\u2500 HEAD ROW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"tbl-head\">\n    <div class=\"count small\">\n      @if (loading()) {\n        <span>{{ loadingKey() | translate }}</span>\n      } @else if (errorMsg()) {\n        <span style=\"color: var(--st-cancelled-fg); font-weight: 600;\">\u26A0 {{ errorMsg() }}</span>\n      } @else {\n        <ng-content select=\"[tbl-head-info]\"></ng-content>\n      }\n    </div>\n    <div class=\"tbl-tools\">\n      <ng-content select=\"[tbl-head-actions]\"></ng-content>\n\n      @if (showDensityControl()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'density'\"\n            [attr.aria-expanded]=\"openTool() === 'density'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('density')\"\n          >\n            <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n            {{ 'common_density' | translate }}\n          </button>\n          @if (openTool() === 'density') {\n            <div class=\"tbl-tool__menu\" role=\"menu\">\n              @for (opt of densityOptions; track opt.value) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemradio\"\n                  [attr.aria-checked]=\"density() === opt.value\"\n                  [class.is-active]=\"density() === opt.value\"\n                  (click)=\"setDensity(opt.value)\"\n                >\n                  <i class=\"pi\" [ngClass]=\"opt.icon\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{ opt.labelKey | translate }}</span>\n                  @if (density() === opt.value) {\n                    <i class=\"pi pi-check tbl-tool__check\" aria-hidden=\"true\"></i>\n                  }\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @if (showColumnPicker()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'columns'\"\n            [attr.aria-expanded]=\"openTool() === 'columns'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('columns')\"\n          >\n            <i class=\"pi pi-th-large\" aria-hidden=\"true\"></i>\n            {{ 'common_columns' | translate }}\n          </button>\n          @if (openTool() === 'columns') {\n            <div class=\"tbl-tool__menu tbl-tool__menu--wide\" role=\"menu\">\n              @for (col of hideableColumns(); track col.id) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemcheckbox\"\n                  [attr.aria-checked]=\"!isColumnHidden(col.id)\"\n                  [class.is-active]=\"!isColumnHidden(col.id)\"\n                  (click)=\"toggleColumn(col.id)\"\n                >\n                  <i class=\"pi\" [class.pi-check]=\"!isColumnHidden(col.id)\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{\n                    col.headerKey ? (col.headerKey | translate) : (col.header || col.id)\n                  }}</span>\n                </button>\n              }\n              <div class=\"tbl-tool__sep\"></div>\n              <button type=\"button\" role=\"menuitem\" (click)=\"resetColumns()\">\n                <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n                <span class=\"tbl-tool__label\">{{ 'common_columns_reset' | translate }}</span>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 TABLE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (isMobile()) {\n    <!-- \u2500\u2500 MOBILE LIST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         A six-column table on a 390px screen either overflows or\n         squeezes every column to nothing, so the rows become a list.\n         Same columns, same cell renderers; each column just declares\n         (or is given) a role. Both shapes expand to the same detail \u2014\n         they differ only in how much they show collapsed. -->\n    <ul class=\"mlist\" [attr.data-layout]=\"effectiveMobileLayout()\">\n      @for (row of rows(); track trackByRow($index, row); let i = $index) {\n        <li class=\"mrow\" [class.is-open]=\"isExpanded(row, i)\">\n          <div\n            class=\"mrow__head\"\n            [class.is-tappable]=\"hasDetail()\"\n            [attr.role]=\"hasDetail() ? 'button' : null\"\n            [attr.tabindex]=\"hasDetail() ? 0 : null\"\n            [attr.aria-expanded]=\"hasDetail() ? isExpanded(row, i) : null\"\n            (click)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.enter)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.space)=\"onRowHeadActivate(row, i, $event)\"\n          >\n            <div class=\"mrow__lead\">\n              @if (primaryColumn(); as pc) {\n                <span class=\"mrow__primary\">\n                  <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: pc }\"></ng-container>\n                </span>\n              }\n              @if (effectiveMobileLayout() === 'row' && secondaryColumns().length) {\n                <span class=\"mrow__secondary\">\n                  @for (sc of secondaryColumns(); track sc.id) {\n                    <span class=\"mrow__sec-part\">\n                      <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: sc }\"></ng-container>\n                    </span>\n                  }\n                </span>\n              }\n            </div>\n\n            <div class=\"mrow__trail\">\n              @if (statusColumn(); as st) {\n                <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: st }\"></ng-container>\n              }\n              @if (hasActionsColumn()) {\n                <span class=\"mrow__actions\">\n                  <ef-row-actions [items]=\"defaultRowActions(row)\" [context]=\"rowActionsContext()\" />\n                </span>\n              }\n              @if (hasDetail() && effectiveMobileLayout() === 'row') {\n                <!-- Says the row opens, and which way it is now. Decorative:\n                     the whole head is the control, and it carries the state. -->\n                <i\n                  class=\"pi pi-chevron-down mrow__chevron\"\n                  [class.is-open]=\"isExpanded(row, i)\"\n                  aria-hidden=\"true\"\n                ></i>\n              }\n            </div>\n          </div>\n\n          @if (visibleDetail(row, i).length) {\n            <dl class=\"mrow__detail\">\n              @for (col of visibleDetail(row, i); track col.id) {\n                <div class=\"mrow__field\">\n                  <dt>{{ $any(col).headerKey ? ($any(col).headerKey | translate) : $any(col).header }}</dt>\n                  <dd [class]=\"cellAlignClass($any(col))\">\n                    <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col }\"></ng-container>\n                  </dd>\n                </div>\n              }\n            </dl>\n          }\n\n          @if (hasMoreThanPreview() && effectiveMobileLayout() === 'card') {\n            <button class=\"mrow__more\" type=\"button\" (click)=\"toggleExpanded(row, i)\">\n              <span>{{ (isExpanded(row, i) ? 'common_view_less' : 'common_view_more') | translate }}</span>\n              <i class=\"pi pi-chevron-down mrow__chevron\" [class.is-open]=\"isExpanded(row, i)\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </li>\n      } @empty {\n        <li class=\"mrow mrow--empty\">\n          <ng-content select=\"[empty-state-mobile]\"></ng-content>\n        </li>\n      }\n    </ul>\n  } @else {\n    <table class=\"tbl\">\n      <thead>\n        <tr>\n          @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n            <th\n              [class]=\"headerAlignClass(col)\"\n              [class.is-sortable]=\"col.sortable\"\n              [style.width]=\"col.width || null\"\n              [attr.data-col]=\"col.id\"\n              (click)=\"onHeaderClick(col)\"\n              [style.cursor]=\"col.sortable ? 'pointer' : null\"\n            >\n              @if (headerTemplate(col.id); as headerTpl) {\n                <ng-container *ngTemplateOutlet=\"headerTpl; context: { $implicit: col, col: col }\"></ng-container>\n              } @else if (col.headerKey) {\n                <span>{{ col.headerKey | translate }}</span>\n              } @else if (col.header) {\n                <span>{{ col.header }}</span>\n              }\n              @if (col.sortable && sortIndicator(col)) {\n                <span aria-hidden=\"true\" style=\"margin-inline-start: 4px; opacity: 0.7;\">{{ sortIndicator(col) }}</span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody>\n        @for (row of rows(); track trackByRow($index, row)) {\n          <tr\n            [class.is-row-clickable]=\"rowDoubleClickable()\"\n            (dblclick)=\"onRowDoubleClick(row, $event)\"\n          >\n            @for (col of effectiveColumns(); track trackByColumn($index, col); let colIdx = $index) {\n              <td [class]=\"cellAlignClass(col)\" [attr.data-col]=\"col.id\">\n                @if (col.id === 'actions' && hasActionsColumn()) {\n                  <!-- Auto row-actions cell: View / Edit / Duplicate / Delete,\n                       gated by [show*Action] flags + ScreenContext perms. -->\n                  <ef-row-actions\n                    [items]=\"defaultRowActions(row)\"\n                    [context]=\"rowActionsContext()\"\n                  />\n                } @else {\n                  <ng-container\n                    *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col }\"\n                  ></ng-container>\n                }\n                          </td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td [attr.colspan]=\"effectiveColumns().length\">\n              <ng-content select=\"[empty-state]\"></ng-content>\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n\n  <!-- \u2500\u2500 PAGER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (!hidePager()) {\n    <ef-pager\n      [pageNumber]=\"pageNumber()\"\n      [pageSize]=\"pageSize()\"\n      [totalCount]=\"totalCount()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      (pageChange)=\"pageChange.emit($event)\"\n      (pageSizeChange)=\"pageSizeChange.emit($event)\"\n    />\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.tbl thead th.is-sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl thead th.is-sortable:hover{color:var(--text)}.tbl tbody tr.is-row-clickable{cursor:pointer}.tbl-tools{display:flex;gap:6px;align-items:center}.tbl-tool{position:relative}.tbl-tool>.btn.open{color:var(--text);background:var(--paper)}.tbl-tool__menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:40;min-width:212px;max-height:340px;overflow-y:auto;padding:6px;display:grid;gap:1px;background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--shadow-3);animation:row-actions-menu-in var(--t-base) var(--ease-spring)}.tbl-tool__menu--wide{min-width:248px}.tbl-tool__menu button{appearance:none;background:transparent;border:0;width:100%;text-align:start;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out)}.tbl-tool__menu button:hover,.tbl-tool__menu button:focus-visible{background:var(--paper);outline:0}.tbl-tool__menu button>.pi{width:16px;flex:none;font-size:14px;color:var(--muted)}.tbl-tool__menu button.is-active>.pi{color:var(--module, var(--text))}.tbl-tool__label{flex:1 1 auto;min-width:0}.tbl-tool__check{color:var(--module, var(--text))}.tbl-tool__sep{margin:5px 2px;border-top:1px solid var(--rule)}.tbl-wrap[data-density=compact] .tbl tbody td{padding-top:4px;padding-bottom:4px}.tbl-wrap[data-density=comfortable] .tbl tbody td{padding-top:16px;padding-bottom:16px}.mlist{list-style:none;margin:0;padding:0;display:grid}.mrow{border-top:1px solid var(--rule)}.mrow:first-child{border-top:0}.mrow__head{display:flex;align-items:flex-start;gap:var(--s-3);padding:12px var(--s-4);min-height:var(--hit-touch)}.mrow__head.is-tappable{cursor:pointer}.mrow__head.is-tappable:active{background:var(--paper)}.mrow__lead{flex:1;min-width:0;display:grid;gap:2px}.mrow__primary{font-weight:700;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrow__secondary{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:12.5px;color:var(--text-mute);min-width:0}.mrow__secondary .mrow__sec-part+.mrow__sec-part:before{content:\"\\b7\";margin-inline-end:6px;color:var(--text-soft)}.mrow__trail{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);flex-shrink:0;min-height:20px}.mrow__actions{display:inline-flex}.mrow__detail{margin:0;padding:0 var(--s-4) 12px;display:grid;gap:1px}.mrow__field{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding:7px 0;border-top:1px solid var(--rule-soft)}.mrow__field dt{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute);flex-shrink:0}.mrow__field dd{margin:0;font-size:13.5px;color:var(--text);text-align:end;min-width:0;overflow-wrap:anywhere}.mrow__more{appearance:none;width:100%;background:transparent;border:0;border-top:1px solid var(--rule-soft);padding:10px;font:inherit;font-size:13px;font-weight:600;color:var(--tenant-500);cursor:pointer}.mlist[data-layout=card]{gap:var(--s-3);padding:var(--s-3) var(--s-3) 0}.mlist[data-layout=card] .mrow{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper-alt);overflow:hidden}.mlist[data-layout=card] .mrow__head{border-bottom:1px solid var(--rule)}.mrow__chevron{font-size:11px;color:var(--text-soft);transition:transform var(--t-fast) var(--ease-out);flex-shrink:0}.mrow__chevron.is-open{transform:rotate(180deg);color:var(--text-mute)}.mrow__head.is-tappable:focus-visible{outline:2px solid var(--tenant-400);outline-offset:-2px}.mrow__more{display:flex;align-items:center;justify-content:center;gap:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfPagerComponent, selector: "ef-pager", inputs: ["pageNumber", "pageSize", "totalCount", "pageSizeOptions", "linesPerPageLabelKey", "ofLabelKey", "prevLabelKey", "nextLabelKey", "hideSize"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: EfStatusChipComponent, selector: "ef-status-chip", inputs: ["referenceKey", "code", "color", "label", "labelKey", "hideDot", "showCode"] }, { kind: "component", type: EfRowActionsComponent, selector: "ef-row-actions", inputs: ["items", "context", "triggerIcon", "triggerAriaKey", "disabled", "menuLeft"], outputs: ["opened", "closed"] }, { kind: "pipe", type: i1$3.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$3.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfDataCardComponent, isStandalone: true, selector: "ef-data-card", inputs: { mobileLayout: { classPropertyName: "mobileLayout", publicName: "mobileLayout", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, trackByField: { classPropertyName: "trackByField", publicName: "trackByField", isSignal: true, isRequired: false, transformFunction: null }, pageNumber: { classPropertyName: "pageNumber", publicName: "pageNumber", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, hidePager: { classPropertyName: "hidePager", publicName: "hidePager", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, loadingKey: { classPropertyName: "loadingKey", publicName: "loadingKey", isSignal: true, isRequired: false, transformFunction: null }, rowDoubleClickable: { classPropertyName: "rowDoubleClickable", publicName: "rowDoubleClickable", isSignal: true, isRequired: false, transformFunction: null }, hasActionsColumn: { classPropertyName: "hasActionsColumn", publicName: "hasActionsColumn", isSignal: true, isRequired: false, transformFunction: null }, rowActionsContext: { classPropertyName: "rowActionsContext", publicName: "rowActionsContext", isSignal: true, isRequired: false, transformFunction: null }, showViewAction: { classPropertyName: "showViewAction", publicName: "showViewAction", isSignal: true, isRequired: false, transformFunction: null }, showEditAction: { classPropertyName: "showEditAction", publicName: "showEditAction", isSignal: true, isRequired: false, transformFunction: null }, showDuplicateAction: { classPropertyName: "showDuplicateAction", publicName: "showDuplicateAction", isSignal: true, isRequired: false, transformFunction: null }, showDeleteAction: { classPropertyName: "showDeleteAction", publicName: "showDeleteAction", isSignal: true, isRequired: false, transformFunction: null }, showDensityControl: { classPropertyName: "showDensityControl", publicName: "showDensityControl", isSignal: true, isRequired: false, transformFunction: null }, showColumnPicker: { classPropertyName: "showColumnPicker", publicName: "showColumnPicker", isSignal: true, isRequired: false, transformFunction: null }, showExportControl: { classPropertyName: "showExportControl", publicName: "showExportControl", isSignal: true, isRequired: false, transformFunction: null }, exporting: { classPropertyName: "exporting", publicName: "exporting", isSignal: true, isRequired: false, transformFunction: null }, screenContext: { classPropertyName: "screenContext", publicName: "screenContext", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, tableKey: { classPropertyName: "tableKey", publicName: "tableKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", rowDoubleClick: "rowDoubleClick", rowAction: "rowAction", exportRequest: "exportRequest", clearSearch: "clearSearch" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "ef-row-actions-toggle": "onRowActionsToggle($event)" } }, queries: [{ propertyName: "bodyTemplates", predicate: EfColumnTemplateDirective }, { propertyName: "headerTemplates", predicate: EfColumnHeaderTemplateDirective }], ngImport: i0, template: "<!-- One cell renderer, shared by the table, the mobile row and the mobile\n     detail. A new column type is added here once, not three times. -->\n<ng-template #cellTpl let-row let-col=\"col\">\n  @if (bodyTemplate(col.id); as bodyTpl) {\n    <ng-container *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, col: col }\"></ng-container>\n  } @else {\n              @switch (col.type) {\n                @case ('number') {\n                  {{ $any(cellValue(row, col)) | number:numberFormat(col):col.locale }}\n                }\n                @case ('money') {\n                  {{ $any(cellValue(row, col)) | currency:(col.currencyCode || 'EUR'):(col.currencyDisplay || 'symbol'):numberFormat(col):col.locale }}\n                }\n                @case ('date') {\n                  {{ $any(cellValue(row, col)) | date:(col.dateFormat || 'dd/MM/yyyy'):undefined:col.locale }}\n                }\n                @case ('datetime') {\n                  {{ $any(cellValue(row, col)) | date:(col.dateFormat || 'dd/MM/yyyy HH:mm'):undefined:col.locale }}\n                }\n                @case ('boolean') {\n                  @if (cellValue(row, col)) {\n                    <span class=\"bool yes\"><span class=\"dot\"></span> \u2713</span>\n                  } @else {\n                    <span class=\"bool no\"><span class=\"dot\"></span> \u2014</span>\n                  }\n                }\n                @case ('mono') {\n                  <span class=\"ref\">{{ cellValue(row, col) }}</span>\n                }\n                @case ('chip') {\n                  <span [class]=\"'chip ' + (col.chipPrefix || 'chip-') + cellValue(row, col)\">\n                    \u25CF {{ cellValue(row, col) }}\n                  </span>\n                }\n                @case ('status') {\n                  <ef-status-chip\n                    [referenceKey]=\"col.referenceKey || ''\"\n                    [code]=\"$any(cellValue(row, col))\"\n                  />\n                }\n                @case ('reference') {\n                  {{ resolveReference(cellValue(row, col), col) }}\n                }\n                @default {\n                  {{ cellValue(row, col) }}\n                }\n              }\n  }\n</ng-template>\n\n<div class=\"tbl-wrap\" [class.has-open-menu]=\"openMenuCount() > 0 || openTool() !== null\" [attr.data-density]=\"density()\">\n  <!-- \u2500\u2500 HEAD ROW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"tbl-head\">\n    <div class=\"count small\">\n      @if (loading()) {\n        <span>{{ loadingKey() | translate }}</span>\n      } @else if (errorMsg()) {\n        <span style=\"color: var(--st-cancelled-fg); font-weight: 600;\">\u26A0 {{ errorMsg() }}</span>\n      } @else {\n        <ng-content select=\"[tbl-head-info]\"></ng-content>\n      }\n    </div>\n    <div class=\"tbl-tools\">\n      <ng-content select=\"[tbl-head-actions]\"></ng-content>\n\n      @if (canExport()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [disabled]=\"exporting()\"\n            [attr.aria-busy]=\"exporting()\"\n            (click)=\"requestExport()\"\n          >\n            <i\n              class=\"pi\"\n              [class.pi-download]=\"!exporting()\"\n              [class.pi-spinner]=\"exporting()\"\n              [class.is-spinning]=\"exporting()\"\n              aria-hidden=\"true\"\n            ></i>\n            {{ (exporting() ? 'common_export_running' : 'common_export') | translate }}\n          </button>\n        </div>\n      }\n\n      @if (showDensityControl()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'density'\"\n            [attr.aria-expanded]=\"openTool() === 'density'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('density')\"\n          >\n            <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n            {{ 'common_density' | translate }}\n          </button>\n          @if (openTool() === 'density') {\n            <div class=\"tbl-tool__menu\" role=\"menu\">\n              @for (opt of densityOptions; track opt.value) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemradio\"\n                  [attr.aria-checked]=\"density() === opt.value\"\n                  [class.is-active]=\"density() === opt.value\"\n                  (click)=\"setDensity(opt.value)\"\n                >\n                  <i class=\"pi\" [ngClass]=\"opt.icon\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{ opt.labelKey | translate }}</span>\n                  @if (density() === opt.value) {\n                    <i class=\"pi pi-check tbl-tool__check\" aria-hidden=\"true\"></i>\n                  }\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @if (showColumnPicker()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'columns'\"\n            [attr.aria-expanded]=\"openTool() === 'columns'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('columns')\"\n          >\n            <i class=\"pi pi-th-large\" aria-hidden=\"true\"></i>\n            {{ 'common_columns' | translate }}\n          </button>\n          @if (openTool() === 'columns') {\n            <div class=\"tbl-tool__menu tbl-tool__menu--wide\" role=\"menu\">\n              @for (col of hideableColumns(); track col.id) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemcheckbox\"\n                  [attr.aria-checked]=\"!isColumnHidden(col.id)\"\n                  [class.is-active]=\"!isColumnHidden(col.id)\"\n                  (click)=\"toggleColumn(col.id)\"\n                >\n                  <i class=\"pi\" [class.pi-check]=\"!isColumnHidden(col.id)\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{\n                    col.headerKey ? (col.headerKey | translate) : (col.header || col.id)\n                  }}</span>\n                </button>\n              }\n              <div class=\"tbl-tool__sep\"></div>\n              <button type=\"button\" role=\"menuitem\" (click)=\"resetColumns()\">\n                <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n                <span class=\"tbl-tool__label\">{{ 'common_columns_reset' | translate }}</span>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 TABLE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (isMobile()) {\n    <!-- \u2500\u2500 MOBILE LIST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         A six-column table on a 390px screen either overflows or\n         squeezes every column to nothing, so the rows become a list.\n         Same columns, same cell renderers; each column just declares\n         (or is given) a role. Both shapes expand to the same detail \u2014\n         they differ only in how much they show collapsed. -->\n    <ul class=\"mlist\" [attr.data-layout]=\"effectiveMobileLayout()\">\n      @for (row of rows(); track trackByRow($index, row); let i = $index) {\n        <li class=\"mrow\" [class.is-open]=\"isExpanded(row, i)\">\n          <div\n            class=\"mrow__head\"\n            [class.is-tappable]=\"hasDetail()\"\n            [attr.role]=\"hasDetail() ? 'button' : null\"\n            [attr.tabindex]=\"hasDetail() ? 0 : null\"\n            [attr.aria-expanded]=\"hasDetail() ? isExpanded(row, i) : null\"\n            (click)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.enter)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.space)=\"onRowHeadActivate(row, i, $event)\"\n          >\n            <div class=\"mrow__lead\">\n              @if (primaryColumn(); as pc) {\n                <span class=\"mrow__primary\">\n                  <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: pc }\"></ng-container>\n                </span>\n              }\n              @if (effectiveMobileLayout() === 'row' && secondaryColumns().length) {\n                <span class=\"mrow__secondary\">\n                  @for (sc of secondaryColumns(); track sc.id) {\n                    <span class=\"mrow__sec-part\">\n                      <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: sc }\"></ng-container>\n                    </span>\n                  }\n                </span>\n              }\n            </div>\n\n            <div class=\"mrow__trail\">\n              @if (statusColumn(); as st) {\n                <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: st }\"></ng-container>\n              }\n              @if (hasActionsColumn()) {\n                <span class=\"mrow__actions\">\n                  <ef-row-actions [items]=\"defaultRowActions(row)\" [context]=\"rowActionsContext()\" />\n                </span>\n              }\n              @if (hasDetail() && effectiveMobileLayout() === 'row') {\n                <!-- Says the row opens, and which way it is now. Decorative:\n                     the whole head is the control, and it carries the state. -->\n                <i\n                  class=\"pi pi-chevron-down mrow__chevron\"\n                  [class.is-open]=\"isExpanded(row, i)\"\n                  aria-hidden=\"true\"\n                ></i>\n              }\n            </div>\n          </div>\n\n          @if (visibleDetail(row, i).length) {\n            <dl class=\"mrow__detail\">\n              @for (col of visibleDetail(row, i); track col.id) {\n                <div class=\"mrow__field\">\n                  <dt>{{ $any(col).headerKey ? ($any(col).headerKey | translate) : $any(col).header }}</dt>\n                  <dd [class]=\"cellAlignClass($any(col))\">\n                    <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col }\"></ng-container>\n                  </dd>\n                </div>\n              }\n            </dl>\n          }\n\n          @if (hasMoreThanPreview() && effectiveMobileLayout() === 'card') {\n            <button class=\"mrow__more\" type=\"button\" (click)=\"toggleExpanded(row, i)\">\n              <span>{{ (isExpanded(row, i) ? 'common_view_less' : 'common_view_more') | translate }}</span>\n              <i class=\"pi pi-chevron-down mrow__chevron\" [class.is-open]=\"isExpanded(row, i)\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </li>\n      } @empty {\n        <li class=\"mrow mrow--empty\">\n          <ng-content select=\"[empty-state-mobile]\">\n            <ng-container *ngTemplateOutlet=\"defaultEmptyTpl\"></ng-container>\n          </ng-content>\n        </li>\n      }\n    </ul>\n  } @else {\n    <table class=\"tbl\">\n      <thead>\n        <tr>\n          @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n            <th\n              [class]=\"headerAlignClass(col)\"\n              [class.is-sortable]=\"col.sortable\"\n              [style.width]=\"col.width || null\"\n              [attr.data-col]=\"col.id\"\n              (click)=\"onHeaderClick(col)\"\n              [style.cursor]=\"col.sortable ? 'pointer' : null\"\n            >\n              @if (headerTemplate(col.id); as headerTpl) {\n                <ng-container *ngTemplateOutlet=\"headerTpl; context: { $implicit: col, col: col }\"></ng-container>\n              } @else if (col.headerKey) {\n                <span>{{ col.headerKey | translate }}</span>\n              } @else if (col.header) {\n                <span>{{ col.header }}</span>\n              }\n              @if (col.sortable && sortIndicator(col)) {\n                <span aria-hidden=\"true\" style=\"margin-inline-start: 4px; opacity: 0.7;\">{{ sortIndicator(col) }}</span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody>\n        @for (row of rows(); track trackByRow($index, row)) {\n          <tr\n            [class.is-row-clickable]=\"rowDoubleClickable()\"\n            (dblclick)=\"onRowDoubleClick(row, $event)\"\n          >\n            @for (col of effectiveColumns(); track trackByColumn($index, col); let colIdx = $index) {\n              <td [class]=\"cellAlignClass(col)\" [attr.data-col]=\"col.id\">\n                @if (col.id === 'actions' && hasActionsColumn()) {\n                  <!-- Auto row-actions cell: View / Edit / Duplicate / Delete,\n                       gated by [show*Action] flags + ScreenContext perms. -->\n                  <ef-row-actions\n                    [items]=\"defaultRowActions(row)\"\n                    [context]=\"rowActionsContext()\"\n                  />\n                } @else {\n                  <ng-container\n                    *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col }\"\n                  ></ng-container>\n                }\n                          </td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td [attr.colspan]=\"effectiveColumns().length\">\n              <ng-content select=\"[empty-state]\">\n                <ng-container *ngTemplateOutlet=\"defaultEmptyTpl\"></ng-container>\n              </ng-content>\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n\n  <!-- \u2500\u2500 PAGER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <!-- Paging controls for an empty result set are chrome with nothing to\n       page, so they stay out of the way until there is something to move\n       through. -->\n  @if (!hidePager() && rows().length > 0) {\n    <ef-pager\n      [pageNumber]=\"pageNumber()\"\n      [pageSize]=\"pageSize()\"\n      [totalCount]=\"totalCount()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      (pageChange)=\"pageChange.emit($event)\"\n      (pageSizeChange)=\"pageSizeChange.emit($event)\"\n    />\n  }\n</div>\n\n<!-- \u2500\u2500 DEFAULT EMPTY STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Rendered when a screen projects nothing into [empty-state] /\n     [empty-state-mobile]. It words itself from `searchTerm`, because\n     \"nothing matched what you typed\" and \"there is nothing here yet\"\n     are different situations needing different ways out. -->\n<ng-template #defaultEmptyTpl>\n  <div class=\"tbl-empty\">\n    <i\n      class=\"pi tbl-empty__icon\"\n      [class.pi-search]=\"!!searchTerm()\"\n      [class.pi-inbox]=\"!searchTerm()\"\n      aria-hidden=\"true\"\n    ></i>\n\n    @if (searchTerm()) {\n      <p class=\"tbl-empty__title\">\n        {{ 'common_empty_no_results' | translate: { term: searchTerm() } }}\n      </p>\n      <p class=\"tbl-empty__hint\">{{ 'common_empty_no_results_hint' | translate }}</p>\n      <button class=\"btn btn-sm tbl-empty__action\" type=\"button\" (click)=\"clearSearch.emit()\">\n        <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n        {{ 'common_empty_clear_filters' | translate }}\n      </button>\n    } @else {\n      <p class=\"tbl-empty__title\">{{ 'common_empty_none_yet' | translate }}</p>\n      <p class=\"tbl-empty__hint\">{{ 'common_empty_none_yet_hint' | translate }}</p>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.tbl thead th.is-sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl thead th.is-sortable:hover{color:var(--text)}.tbl tbody tr.is-row-clickable{cursor:pointer}.tbl-tools{display:flex;gap:6px;align-items:center}.tbl-tool{position:relative}.tbl-tool>.btn.open{color:var(--text);background:var(--paper)}.tbl-tool__menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:40;min-width:212px;max-height:340px;overflow-y:auto;padding:6px;display:grid;gap:1px;background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--shadow-3);animation:row-actions-menu-in var(--t-base) var(--ease-spring)}.tbl-tool__menu--wide{min-width:248px}.tbl-tool__menu button{appearance:none;background:transparent;border:0;width:100%;text-align:start;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out)}.tbl-tool__menu button:hover,.tbl-tool__menu button:focus-visible{background:var(--paper);outline:0}.tbl-tool__menu button>.pi{width:16px;flex:none;font-size:14px;color:var(--muted)}.tbl-tool__menu button.is-active>.pi{color:var(--module, var(--text))}.tbl-tool__label{flex:1 1 auto;min-width:0}.tbl-tool__check{color:var(--module, var(--text))}.tbl-tool__sep{margin:5px 2px;border-top:1px solid var(--rule)}.tbl-wrap[data-density=compact] .tbl tbody td{padding-top:4px;padding-bottom:4px}.tbl-wrap[data-density=comfortable] .tbl tbody td{padding-top:16px;padding-bottom:16px}.mlist{list-style:none;margin:0;padding:0;display:grid}.mrow{border-top:1px solid var(--rule)}.mrow:first-child{border-top:0}.mrow__head{display:flex;align-items:flex-start;gap:var(--s-3);padding:12px var(--s-4);min-height:var(--hit-touch)}.mrow__head.is-tappable{cursor:pointer}.mrow__head.is-tappable:active{background:var(--paper)}.mrow__lead{flex:1;min-width:0;display:grid;gap:2px}.mrow__primary{font-weight:700;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrow__secondary{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:12.5px;color:var(--text-mute);min-width:0}.mrow__secondary .mrow__sec-part+.mrow__sec-part:before{content:\"\\b7\";margin-inline-end:6px;color:var(--text-soft)}.mrow__trail{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);flex-shrink:0;min-height:20px}.mrow__actions{display:inline-flex}.mrow__detail{margin:0;padding:0 var(--s-4) 12px;display:grid;gap:1px}.mrow__field{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding:7px 0;border-top:1px solid var(--rule-soft)}.mrow__field dt{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute);flex-shrink:0}.mrow__field dd{margin:0;font-size:13.5px;color:var(--text);text-align:end;min-width:0;overflow-wrap:anywhere}.mrow__more{appearance:none;width:100%;background:transparent;border:0;border-top:1px solid var(--rule-soft);padding:10px;font:inherit;font-size:13px;font-weight:600;color:var(--tenant-500);cursor:pointer}.mlist[data-layout=card]{gap:var(--s-3);padding:var(--s-3) var(--s-3) 0}.mlist[data-layout=card] .mrow{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper-alt);overflow:hidden}.mlist[data-layout=card] .mrow__head{border-bottom:1px solid var(--rule)}.mrow__chevron{font-size:11px;color:var(--text-soft);transition:transform var(--t-fast) var(--ease-out);flex-shrink:0}.mrow__chevron.is-open{transform:rotate(180deg);color:var(--text-mute)}.mrow__head.is-tappable:focus-visible{outline:2px solid var(--tenant-400);outline-offset:-2px}.mrow__more{display:flex;align-items:center;justify-content:center;gap:6px}.tbl-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);padding:var(--s-9) var(--s-4);text-align:center}.tbl-empty__icon{font-size:28px;line-height:1;color:var(--ink-400);margin-block-end:var(--s-1)}.tbl-empty__title{margin:0;font-size:15px;font-weight:600;color:var(--text);max-inline-size:46ch;overflow-wrap:break-word}.tbl-empty__hint{margin:0;font-size:13px;color:var(--ink-600);max-inline-size:52ch;text-wrap:pretty}.tbl-empty__action{margin-block-start:var(--s-3);min-block-size:var(--hit-base)}.mrow--empty{padding:0}@media(max-width:767px){.tbl-empty{padding:var(--s-7) var(--s-4)}.tbl-empty__action{min-block-size:var(--hit-touch)}}.pi.is-spinning{animation:ef-export-spin .9s linear infinite}@keyframes ef-export-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.pi.is-spinning{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfPagerComponent, selector: "ef-pager", inputs: ["pageNumber", "pageSize", "totalCount", "pageSizeOptions", "linesPerPageLabelKey", "ofLabelKey", "prevLabelKey", "nextLabelKey", "hideSize"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: EfStatusChipComponent, selector: "ef-status-chip", inputs: ["referenceKey", "code", "color", "label", "labelKey", "hideDot", "showCode"] }, { kind: "component", type: EfRowActionsComponent, selector: "ef-row-actions", inputs: ["items", "context", "triggerIcon", "triggerAriaKey", "disabled", "menuLeft"], outputs: ["opened", "closed"] }, { kind: "pipe", type: i1$3.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$3.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDataCardComponent, decorators: [{
             type: Component,
@@ -9758,8 +9884,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         EfPagerComponent,
                         EfStatusChipComponent,
                         EfRowActionsComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- One cell renderer, shared by the table, the mobile row and the mobile\n     detail. A new column type is added here once, not three times. -->\n<ng-template #cellTpl let-row let-col=\"col\">\n  @if (bodyTemplate(col.id); as bodyTpl) {\n    <ng-container *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, col: col }\"></ng-container>\n  } @else {\n              @switch (col.type) {\n                @case ('number') {\n                  {{ $any(cellValue(row, col)) | number:numberFormat(col):col.locale }}\n                }\n                @case ('money') {\n                  {{ $any(cellValue(row, col)) | currency:(col.currencyCode || 'EUR'):(col.currencyDisplay || 'symbol'):numberFormat(col):col.locale }}\n                }\n                @case ('date') {\n                  {{ $any(cellValue(row, col)) | date:(col.dateFormat || 'dd/MM/yyyy'):undefined:col.locale }}\n                }\n                @case ('datetime') {\n                  {{ $any(cellValue(row, col)) | date:(col.dateFormat || 'dd/MM/yyyy HH:mm'):undefined:col.locale }}\n                }\n                @case ('boolean') {\n                  @if (cellValue(row, col)) {\n                    <span class=\"bool yes\"><span class=\"dot\"></span> \u2713</span>\n                  } @else {\n                    <span class=\"bool no\"><span class=\"dot\"></span> \u2014</span>\n                  }\n                }\n                @case ('mono') {\n                  <span class=\"ref\">{{ cellValue(row, col) }}</span>\n                }\n                @case ('chip') {\n                  <span [class]=\"'chip ' + (col.chipPrefix || 'chip-') + cellValue(row, col)\">\n                    \u25CF {{ cellValue(row, col) }}\n                  </span>\n                }\n                @case ('status') {\n                  <ef-status-chip\n                    [referenceKey]=\"col.referenceKey || ''\"\n                    [code]=\"$any(cellValue(row, col))\"\n                  />\n                }\n                @case ('reference') {\n                  {{ resolveReference(cellValue(row, col), col) }}\n                }\n                @default {\n                  {{ cellValue(row, col) }}\n                }\n              }\n  }\n</ng-template>\n\n<div class=\"tbl-wrap\" [class.has-open-menu]=\"openMenuCount() > 0 || openTool() !== null\" [attr.data-density]=\"density()\">\n  <!-- \u2500\u2500 HEAD ROW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"tbl-head\">\n    <div class=\"count small\">\n      @if (loading()) {\n        <span>{{ loadingKey() | translate }}</span>\n      } @else if (errorMsg()) {\n        <span style=\"color: var(--st-cancelled-fg); font-weight: 600;\">\u26A0 {{ errorMsg() }}</span>\n      } @else {\n        <ng-content select=\"[tbl-head-info]\"></ng-content>\n      }\n    </div>\n    <div class=\"tbl-tools\">\n      <ng-content select=\"[tbl-head-actions]\"></ng-content>\n\n      @if (showDensityControl()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'density'\"\n            [attr.aria-expanded]=\"openTool() === 'density'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('density')\"\n          >\n            <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n            {{ 'common_density' | translate }}\n          </button>\n          @if (openTool() === 'density') {\n            <div class=\"tbl-tool__menu\" role=\"menu\">\n              @for (opt of densityOptions; track opt.value) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemradio\"\n                  [attr.aria-checked]=\"density() === opt.value\"\n                  [class.is-active]=\"density() === opt.value\"\n                  (click)=\"setDensity(opt.value)\"\n                >\n                  <i class=\"pi\" [ngClass]=\"opt.icon\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{ opt.labelKey | translate }}</span>\n                  @if (density() === opt.value) {\n                    <i class=\"pi pi-check tbl-tool__check\" aria-hidden=\"true\"></i>\n                  }\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @if (showColumnPicker()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'columns'\"\n            [attr.aria-expanded]=\"openTool() === 'columns'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('columns')\"\n          >\n            <i class=\"pi pi-th-large\" aria-hidden=\"true\"></i>\n            {{ 'common_columns' | translate }}\n          </button>\n          @if (openTool() === 'columns') {\n            <div class=\"tbl-tool__menu tbl-tool__menu--wide\" role=\"menu\">\n              @for (col of hideableColumns(); track col.id) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemcheckbox\"\n                  [attr.aria-checked]=\"!isColumnHidden(col.id)\"\n                  [class.is-active]=\"!isColumnHidden(col.id)\"\n                  (click)=\"toggleColumn(col.id)\"\n                >\n                  <i class=\"pi\" [class.pi-check]=\"!isColumnHidden(col.id)\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{\n                    col.headerKey ? (col.headerKey | translate) : (col.header || col.id)\n                  }}</span>\n                </button>\n              }\n              <div class=\"tbl-tool__sep\"></div>\n              <button type=\"button\" role=\"menuitem\" (click)=\"resetColumns()\">\n                <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n                <span class=\"tbl-tool__label\">{{ 'common_columns_reset' | translate }}</span>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 TABLE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (isMobile()) {\n    <!-- \u2500\u2500 MOBILE LIST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         A six-column table on a 390px screen either overflows or\n         squeezes every column to nothing, so the rows become a list.\n         Same columns, same cell renderers; each column just declares\n         (or is given) a role. Both shapes expand to the same detail \u2014\n         they differ only in how much they show collapsed. -->\n    <ul class=\"mlist\" [attr.data-layout]=\"effectiveMobileLayout()\">\n      @for (row of rows(); track trackByRow($index, row); let i = $index) {\n        <li class=\"mrow\" [class.is-open]=\"isExpanded(row, i)\">\n          <div\n            class=\"mrow__head\"\n            [class.is-tappable]=\"hasDetail()\"\n            [attr.role]=\"hasDetail() ? 'button' : null\"\n            [attr.tabindex]=\"hasDetail() ? 0 : null\"\n            [attr.aria-expanded]=\"hasDetail() ? isExpanded(row, i) : null\"\n            (click)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.enter)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.space)=\"onRowHeadActivate(row, i, $event)\"\n          >\n            <div class=\"mrow__lead\">\n              @if (primaryColumn(); as pc) {\n                <span class=\"mrow__primary\">\n                  <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: pc }\"></ng-container>\n                </span>\n              }\n              @if (effectiveMobileLayout() === 'row' && secondaryColumns().length) {\n                <span class=\"mrow__secondary\">\n                  @for (sc of secondaryColumns(); track sc.id) {\n                    <span class=\"mrow__sec-part\">\n                      <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: sc }\"></ng-container>\n                    </span>\n                  }\n                </span>\n              }\n            </div>\n\n            <div class=\"mrow__trail\">\n              @if (statusColumn(); as st) {\n                <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: st }\"></ng-container>\n              }\n              @if (hasActionsColumn()) {\n                <span class=\"mrow__actions\">\n                  <ef-row-actions [items]=\"defaultRowActions(row)\" [context]=\"rowActionsContext()\" />\n                </span>\n              }\n              @if (hasDetail() && effectiveMobileLayout() === 'row') {\n                <!-- Says the row opens, and which way it is now. Decorative:\n                     the whole head is the control, and it carries the state. -->\n                <i\n                  class=\"pi pi-chevron-down mrow__chevron\"\n                  [class.is-open]=\"isExpanded(row, i)\"\n                  aria-hidden=\"true\"\n                ></i>\n              }\n            </div>\n          </div>\n\n          @if (visibleDetail(row, i).length) {\n            <dl class=\"mrow__detail\">\n              @for (col of visibleDetail(row, i); track col.id) {\n                <div class=\"mrow__field\">\n                  <dt>{{ $any(col).headerKey ? ($any(col).headerKey | translate) : $any(col).header }}</dt>\n                  <dd [class]=\"cellAlignClass($any(col))\">\n                    <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col }\"></ng-container>\n                  </dd>\n                </div>\n              }\n            </dl>\n          }\n\n          @if (hasMoreThanPreview() && effectiveMobileLayout() === 'card') {\n            <button class=\"mrow__more\" type=\"button\" (click)=\"toggleExpanded(row, i)\">\n              <span>{{ (isExpanded(row, i) ? 'common_view_less' : 'common_view_more') | translate }}</span>\n              <i class=\"pi pi-chevron-down mrow__chevron\" [class.is-open]=\"isExpanded(row, i)\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </li>\n      } @empty {\n        <li class=\"mrow mrow--empty\">\n          <ng-content select=\"[empty-state-mobile]\"></ng-content>\n        </li>\n      }\n    </ul>\n  } @else {\n    <table class=\"tbl\">\n      <thead>\n        <tr>\n          @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n            <th\n              [class]=\"headerAlignClass(col)\"\n              [class.is-sortable]=\"col.sortable\"\n              [style.width]=\"col.width || null\"\n              [attr.data-col]=\"col.id\"\n              (click)=\"onHeaderClick(col)\"\n              [style.cursor]=\"col.sortable ? 'pointer' : null\"\n            >\n              @if (headerTemplate(col.id); as headerTpl) {\n                <ng-container *ngTemplateOutlet=\"headerTpl; context: { $implicit: col, col: col }\"></ng-container>\n              } @else if (col.headerKey) {\n                <span>{{ col.headerKey | translate }}</span>\n              } @else if (col.header) {\n                <span>{{ col.header }}</span>\n              }\n              @if (col.sortable && sortIndicator(col)) {\n                <span aria-hidden=\"true\" style=\"margin-inline-start: 4px; opacity: 0.7;\">{{ sortIndicator(col) }}</span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody>\n        @for (row of rows(); track trackByRow($index, row)) {\n          <tr\n            [class.is-row-clickable]=\"rowDoubleClickable()\"\n            (dblclick)=\"onRowDoubleClick(row, $event)\"\n          >\n            @for (col of effectiveColumns(); track trackByColumn($index, col); let colIdx = $index) {\n              <td [class]=\"cellAlignClass(col)\" [attr.data-col]=\"col.id\">\n                @if (col.id === 'actions' && hasActionsColumn()) {\n                  <!-- Auto row-actions cell: View / Edit / Duplicate / Delete,\n                       gated by [show*Action] flags + ScreenContext perms. -->\n                  <ef-row-actions\n                    [items]=\"defaultRowActions(row)\"\n                    [context]=\"rowActionsContext()\"\n                  />\n                } @else {\n                  <ng-container\n                    *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col }\"\n                  ></ng-container>\n                }\n                          </td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td [attr.colspan]=\"effectiveColumns().length\">\n              <ng-content select=\"[empty-state]\"></ng-content>\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n\n  <!-- \u2500\u2500 PAGER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (!hidePager()) {\n    <ef-pager\n      [pageNumber]=\"pageNumber()\"\n      [pageSize]=\"pageSize()\"\n      [totalCount]=\"totalCount()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      (pageChange)=\"pageChange.emit($event)\"\n      (pageSizeChange)=\"pageSizeChange.emit($event)\"\n    />\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.tbl thead th.is-sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl thead th.is-sortable:hover{color:var(--text)}.tbl tbody tr.is-row-clickable{cursor:pointer}.tbl-tools{display:flex;gap:6px;align-items:center}.tbl-tool{position:relative}.tbl-tool>.btn.open{color:var(--text);background:var(--paper)}.tbl-tool__menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:40;min-width:212px;max-height:340px;overflow-y:auto;padding:6px;display:grid;gap:1px;background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--shadow-3);animation:row-actions-menu-in var(--t-base) var(--ease-spring)}.tbl-tool__menu--wide{min-width:248px}.tbl-tool__menu button{appearance:none;background:transparent;border:0;width:100%;text-align:start;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out)}.tbl-tool__menu button:hover,.tbl-tool__menu button:focus-visible{background:var(--paper);outline:0}.tbl-tool__menu button>.pi{width:16px;flex:none;font-size:14px;color:var(--muted)}.tbl-tool__menu button.is-active>.pi{color:var(--module, var(--text))}.tbl-tool__label{flex:1 1 auto;min-width:0}.tbl-tool__check{color:var(--module, var(--text))}.tbl-tool__sep{margin:5px 2px;border-top:1px solid var(--rule)}.tbl-wrap[data-density=compact] .tbl tbody td{padding-top:4px;padding-bottom:4px}.tbl-wrap[data-density=comfortable] .tbl tbody td{padding-top:16px;padding-bottom:16px}.mlist{list-style:none;margin:0;padding:0;display:grid}.mrow{border-top:1px solid var(--rule)}.mrow:first-child{border-top:0}.mrow__head{display:flex;align-items:flex-start;gap:var(--s-3);padding:12px var(--s-4);min-height:var(--hit-touch)}.mrow__head.is-tappable{cursor:pointer}.mrow__head.is-tappable:active{background:var(--paper)}.mrow__lead{flex:1;min-width:0;display:grid;gap:2px}.mrow__primary{font-weight:700;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrow__secondary{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:12.5px;color:var(--text-mute);min-width:0}.mrow__secondary .mrow__sec-part+.mrow__sec-part:before{content:\"\\b7\";margin-inline-end:6px;color:var(--text-soft)}.mrow__trail{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);flex-shrink:0;min-height:20px}.mrow__actions{display:inline-flex}.mrow__detail{margin:0;padding:0 var(--s-4) 12px;display:grid;gap:1px}.mrow__field{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding:7px 0;border-top:1px solid var(--rule-soft)}.mrow__field dt{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute);flex-shrink:0}.mrow__field dd{margin:0;font-size:13.5px;color:var(--text);text-align:end;min-width:0;overflow-wrap:anywhere}.mrow__more{appearance:none;width:100%;background:transparent;border:0;border-top:1px solid var(--rule-soft);padding:10px;font:inherit;font-size:13px;font-weight:600;color:var(--tenant-500);cursor:pointer}.mlist[data-layout=card]{gap:var(--s-3);padding:var(--s-3) var(--s-3) 0}.mlist[data-layout=card] .mrow{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper-alt);overflow:hidden}.mlist[data-layout=card] .mrow__head{border-bottom:1px solid var(--rule)}.mrow__chevron{font-size:11px;color:var(--text-soft);transition:transform var(--t-fast) var(--ease-out);flex-shrink:0}.mrow__chevron.is-open{transform:rotate(180deg);color:var(--text-mute)}.mrow__head.is-tappable:focus-visible{outline:2px solid var(--tenant-400);outline-offset:-2px}.mrow__more{display:flex;align-items:center;justify-content:center;gap:6px}\n"] }]
-        }], propDecorators: { mobileLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileLayout", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], trackByField: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByField", required: false }] }], pageNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageNumber", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], totalCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalCount", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], hidePager: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePager", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], loadingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingKey", required: false }] }], rowDoubleClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDoubleClickable", required: false }] }], hasActionsColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActionsColumn", required: false }] }], rowActionsContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActionsContext", required: false }] }], showViewAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showViewAction", required: false }] }], showEditAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEditAction", required: false }] }], showDuplicateAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDuplicateAction", required: false }] }], showDeleteAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDeleteAction", required: false }] }], showDensityControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDensityControl", required: false }] }], showColumnPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnPicker", required: false }] }], tableKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableKey", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], rowAction: [{ type: i0.Output, args: ["rowAction"] }], bodyTemplates: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- One cell renderer, shared by the table, the mobile row and the mobile\n     detail. A new column type is added here once, not three times. -->\n<ng-template #cellTpl let-row let-col=\"col\">\n  @if (bodyTemplate(col.id); as bodyTpl) {\n    <ng-container *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, col: col }\"></ng-container>\n  } @else {\n              @switch (col.type) {\n                @case ('number') {\n                  {{ $any(cellValue(row, col)) | number:numberFormat(col):col.locale }}\n                }\n                @case ('money') {\n                  {{ $any(cellValue(row, col)) | currency:(col.currencyCode || 'EUR'):(col.currencyDisplay || 'symbol'):numberFormat(col):col.locale }}\n                }\n                @case ('date') {\n                  {{ $any(cellValue(row, col)) | date:(col.dateFormat || 'dd/MM/yyyy'):undefined:col.locale }}\n                }\n                @case ('datetime') {\n                  {{ $any(cellValue(row, col)) | date:(col.dateFormat || 'dd/MM/yyyy HH:mm'):undefined:col.locale }}\n                }\n                @case ('boolean') {\n                  @if (cellValue(row, col)) {\n                    <span class=\"bool yes\"><span class=\"dot\"></span> \u2713</span>\n                  } @else {\n                    <span class=\"bool no\"><span class=\"dot\"></span> \u2014</span>\n                  }\n                }\n                @case ('mono') {\n                  <span class=\"ref\">{{ cellValue(row, col) }}</span>\n                }\n                @case ('chip') {\n                  <span [class]=\"'chip ' + (col.chipPrefix || 'chip-') + cellValue(row, col)\">\n                    \u25CF {{ cellValue(row, col) }}\n                  </span>\n                }\n                @case ('status') {\n                  <ef-status-chip\n                    [referenceKey]=\"col.referenceKey || ''\"\n                    [code]=\"$any(cellValue(row, col))\"\n                  />\n                }\n                @case ('reference') {\n                  {{ resolveReference(cellValue(row, col), col) }}\n                }\n                @default {\n                  {{ cellValue(row, col) }}\n                }\n              }\n  }\n</ng-template>\n\n<div class=\"tbl-wrap\" [class.has-open-menu]=\"openMenuCount() > 0 || openTool() !== null\" [attr.data-density]=\"density()\">\n  <!-- \u2500\u2500 HEAD ROW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"tbl-head\">\n    <div class=\"count small\">\n      @if (loading()) {\n        <span>{{ loadingKey() | translate }}</span>\n      } @else if (errorMsg()) {\n        <span style=\"color: var(--st-cancelled-fg); font-weight: 600;\">\u26A0 {{ errorMsg() }}</span>\n      } @else {\n        <ng-content select=\"[tbl-head-info]\"></ng-content>\n      }\n    </div>\n    <div class=\"tbl-tools\">\n      <ng-content select=\"[tbl-head-actions]\"></ng-content>\n\n      @if (canExport()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [disabled]=\"exporting()\"\n            [attr.aria-busy]=\"exporting()\"\n            (click)=\"requestExport()\"\n          >\n            <i\n              class=\"pi\"\n              [class.pi-download]=\"!exporting()\"\n              [class.pi-spinner]=\"exporting()\"\n              [class.is-spinning]=\"exporting()\"\n              aria-hidden=\"true\"\n            ></i>\n            {{ (exporting() ? 'common_export_running' : 'common_export') | translate }}\n          </button>\n        </div>\n      }\n\n      @if (showDensityControl()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'density'\"\n            [attr.aria-expanded]=\"openTool() === 'density'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('density')\"\n          >\n            <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n            {{ 'common_density' | translate }}\n          </button>\n          @if (openTool() === 'density') {\n            <div class=\"tbl-tool__menu\" role=\"menu\">\n              @for (opt of densityOptions; track opt.value) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemradio\"\n                  [attr.aria-checked]=\"density() === opt.value\"\n                  [class.is-active]=\"density() === opt.value\"\n                  (click)=\"setDensity(opt.value)\"\n                >\n                  <i class=\"pi\" [ngClass]=\"opt.icon\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{ opt.labelKey | translate }}</span>\n                  @if (density() === opt.value) {\n                    <i class=\"pi pi-check tbl-tool__check\" aria-hidden=\"true\"></i>\n                  }\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @if (showColumnPicker()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'columns'\"\n            [attr.aria-expanded]=\"openTool() === 'columns'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('columns')\"\n          >\n            <i class=\"pi pi-th-large\" aria-hidden=\"true\"></i>\n            {{ 'common_columns' | translate }}\n          </button>\n          @if (openTool() === 'columns') {\n            <div class=\"tbl-tool__menu tbl-tool__menu--wide\" role=\"menu\">\n              @for (col of hideableColumns(); track col.id) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemcheckbox\"\n                  [attr.aria-checked]=\"!isColumnHidden(col.id)\"\n                  [class.is-active]=\"!isColumnHidden(col.id)\"\n                  (click)=\"toggleColumn(col.id)\"\n                >\n                  <i class=\"pi\" [class.pi-check]=\"!isColumnHidden(col.id)\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{\n                    col.headerKey ? (col.headerKey | translate) : (col.header || col.id)\n                  }}</span>\n                </button>\n              }\n              <div class=\"tbl-tool__sep\"></div>\n              <button type=\"button\" role=\"menuitem\" (click)=\"resetColumns()\">\n                <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n                <span class=\"tbl-tool__label\">{{ 'common_columns_reset' | translate }}</span>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 TABLE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (isMobile()) {\n    <!-- \u2500\u2500 MOBILE LIST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         A six-column table on a 390px screen either overflows or\n         squeezes every column to nothing, so the rows become a list.\n         Same columns, same cell renderers; each column just declares\n         (or is given) a role. Both shapes expand to the same detail \u2014\n         they differ only in how much they show collapsed. -->\n    <ul class=\"mlist\" [attr.data-layout]=\"effectiveMobileLayout()\">\n      @for (row of rows(); track trackByRow($index, row); let i = $index) {\n        <li class=\"mrow\" [class.is-open]=\"isExpanded(row, i)\">\n          <div\n            class=\"mrow__head\"\n            [class.is-tappable]=\"hasDetail()\"\n            [attr.role]=\"hasDetail() ? 'button' : null\"\n            [attr.tabindex]=\"hasDetail() ? 0 : null\"\n            [attr.aria-expanded]=\"hasDetail() ? isExpanded(row, i) : null\"\n            (click)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.enter)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.space)=\"onRowHeadActivate(row, i, $event)\"\n          >\n            <div class=\"mrow__lead\">\n              @if (primaryColumn(); as pc) {\n                <span class=\"mrow__primary\">\n                  <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: pc }\"></ng-container>\n                </span>\n              }\n              @if (effectiveMobileLayout() === 'row' && secondaryColumns().length) {\n                <span class=\"mrow__secondary\">\n                  @for (sc of secondaryColumns(); track sc.id) {\n                    <span class=\"mrow__sec-part\">\n                      <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: sc }\"></ng-container>\n                    </span>\n                  }\n                </span>\n              }\n            </div>\n\n            <div class=\"mrow__trail\">\n              @if (statusColumn(); as st) {\n                <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: st }\"></ng-container>\n              }\n              @if (hasActionsColumn()) {\n                <span class=\"mrow__actions\">\n                  <ef-row-actions [items]=\"defaultRowActions(row)\" [context]=\"rowActionsContext()\" />\n                </span>\n              }\n              @if (hasDetail() && effectiveMobileLayout() === 'row') {\n                <!-- Says the row opens, and which way it is now. Decorative:\n                     the whole head is the control, and it carries the state. -->\n                <i\n                  class=\"pi pi-chevron-down mrow__chevron\"\n                  [class.is-open]=\"isExpanded(row, i)\"\n                  aria-hidden=\"true\"\n                ></i>\n              }\n            </div>\n          </div>\n\n          @if (visibleDetail(row, i).length) {\n            <dl class=\"mrow__detail\">\n              @for (col of visibleDetail(row, i); track col.id) {\n                <div class=\"mrow__field\">\n                  <dt>{{ $any(col).headerKey ? ($any(col).headerKey | translate) : $any(col).header }}</dt>\n                  <dd [class]=\"cellAlignClass($any(col))\">\n                    <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col }\"></ng-container>\n                  </dd>\n                </div>\n              }\n            </dl>\n          }\n\n          @if (hasMoreThanPreview() && effectiveMobileLayout() === 'card') {\n            <button class=\"mrow__more\" type=\"button\" (click)=\"toggleExpanded(row, i)\">\n              <span>{{ (isExpanded(row, i) ? 'common_view_less' : 'common_view_more') | translate }}</span>\n              <i class=\"pi pi-chevron-down mrow__chevron\" [class.is-open]=\"isExpanded(row, i)\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </li>\n      } @empty {\n        <li class=\"mrow mrow--empty\">\n          <ng-content select=\"[empty-state-mobile]\">\n            <ng-container *ngTemplateOutlet=\"defaultEmptyTpl\"></ng-container>\n          </ng-content>\n        </li>\n      }\n    </ul>\n  } @else {\n    <table class=\"tbl\">\n      <thead>\n        <tr>\n          @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n            <th\n              [class]=\"headerAlignClass(col)\"\n              [class.is-sortable]=\"col.sortable\"\n              [style.width]=\"col.width || null\"\n              [attr.data-col]=\"col.id\"\n              (click)=\"onHeaderClick(col)\"\n              [style.cursor]=\"col.sortable ? 'pointer' : null\"\n            >\n              @if (headerTemplate(col.id); as headerTpl) {\n                <ng-container *ngTemplateOutlet=\"headerTpl; context: { $implicit: col, col: col }\"></ng-container>\n              } @else if (col.headerKey) {\n                <span>{{ col.headerKey | translate }}</span>\n              } @else if (col.header) {\n                <span>{{ col.header }}</span>\n              }\n              @if (col.sortable && sortIndicator(col)) {\n                <span aria-hidden=\"true\" style=\"margin-inline-start: 4px; opacity: 0.7;\">{{ sortIndicator(col) }}</span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody>\n        @for (row of rows(); track trackByRow($index, row)) {\n          <tr\n            [class.is-row-clickable]=\"rowDoubleClickable()\"\n            (dblclick)=\"onRowDoubleClick(row, $event)\"\n          >\n            @for (col of effectiveColumns(); track trackByColumn($index, col); let colIdx = $index) {\n              <td [class]=\"cellAlignClass(col)\" [attr.data-col]=\"col.id\">\n                @if (col.id === 'actions' && hasActionsColumn()) {\n                  <!-- Auto row-actions cell: View / Edit / Duplicate / Delete,\n                       gated by [show*Action] flags + ScreenContext perms. -->\n                  <ef-row-actions\n                    [items]=\"defaultRowActions(row)\"\n                    [context]=\"rowActionsContext()\"\n                  />\n                } @else {\n                  <ng-container\n                    *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col }\"\n                  ></ng-container>\n                }\n                          </td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td [attr.colspan]=\"effectiveColumns().length\">\n              <ng-content select=\"[empty-state]\">\n                <ng-container *ngTemplateOutlet=\"defaultEmptyTpl\"></ng-container>\n              </ng-content>\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n\n  <!-- \u2500\u2500 PAGER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <!-- Paging controls for an empty result set are chrome with nothing to\n       page, so they stay out of the way until there is something to move\n       through. -->\n  @if (!hidePager() && rows().length > 0) {\n    <ef-pager\n      [pageNumber]=\"pageNumber()\"\n      [pageSize]=\"pageSize()\"\n      [totalCount]=\"totalCount()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      (pageChange)=\"pageChange.emit($event)\"\n      (pageSizeChange)=\"pageSizeChange.emit($event)\"\n    />\n  }\n</div>\n\n<!-- \u2500\u2500 DEFAULT EMPTY STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Rendered when a screen projects nothing into [empty-state] /\n     [empty-state-mobile]. It words itself from `searchTerm`, because\n     \"nothing matched what you typed\" and \"there is nothing here yet\"\n     are different situations needing different ways out. -->\n<ng-template #defaultEmptyTpl>\n  <div class=\"tbl-empty\">\n    <i\n      class=\"pi tbl-empty__icon\"\n      [class.pi-search]=\"!!searchTerm()\"\n      [class.pi-inbox]=\"!searchTerm()\"\n      aria-hidden=\"true\"\n    ></i>\n\n    @if (searchTerm()) {\n      <p class=\"tbl-empty__title\">\n        {{ 'common_empty_no_results' | translate: { term: searchTerm() } }}\n      </p>\n      <p class=\"tbl-empty__hint\">{{ 'common_empty_no_results_hint' | translate }}</p>\n      <button class=\"btn btn-sm tbl-empty__action\" type=\"button\" (click)=\"clearSearch.emit()\">\n        <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n        {{ 'common_empty_clear_filters' | translate }}\n      </button>\n    } @else {\n      <p class=\"tbl-empty__title\">{{ 'common_empty_none_yet' | translate }}</p>\n      <p class=\"tbl-empty__hint\">{{ 'common_empty_none_yet_hint' | translate }}</p>\n    }\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.tbl thead th.is-sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl thead th.is-sortable:hover{color:var(--text)}.tbl tbody tr.is-row-clickable{cursor:pointer}.tbl-tools{display:flex;gap:6px;align-items:center}.tbl-tool{position:relative}.tbl-tool>.btn.open{color:var(--text);background:var(--paper)}.tbl-tool__menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:40;min-width:212px;max-height:340px;overflow-y:auto;padding:6px;display:grid;gap:1px;background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--shadow-3);animation:row-actions-menu-in var(--t-base) var(--ease-spring)}.tbl-tool__menu--wide{min-width:248px}.tbl-tool__menu button{appearance:none;background:transparent;border:0;width:100%;text-align:start;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out)}.tbl-tool__menu button:hover,.tbl-tool__menu button:focus-visible{background:var(--paper);outline:0}.tbl-tool__menu button>.pi{width:16px;flex:none;font-size:14px;color:var(--muted)}.tbl-tool__menu button.is-active>.pi{color:var(--module, var(--text))}.tbl-tool__label{flex:1 1 auto;min-width:0}.tbl-tool__check{color:var(--module, var(--text))}.tbl-tool__sep{margin:5px 2px;border-top:1px solid var(--rule)}.tbl-wrap[data-density=compact] .tbl tbody td{padding-top:4px;padding-bottom:4px}.tbl-wrap[data-density=comfortable] .tbl tbody td{padding-top:16px;padding-bottom:16px}.mlist{list-style:none;margin:0;padding:0;display:grid}.mrow{border-top:1px solid var(--rule)}.mrow:first-child{border-top:0}.mrow__head{display:flex;align-items:flex-start;gap:var(--s-3);padding:12px var(--s-4);min-height:var(--hit-touch)}.mrow__head.is-tappable{cursor:pointer}.mrow__head.is-tappable:active{background:var(--paper)}.mrow__lead{flex:1;min-width:0;display:grid;gap:2px}.mrow__primary{font-weight:700;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrow__secondary{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:12.5px;color:var(--text-mute);min-width:0}.mrow__secondary .mrow__sec-part+.mrow__sec-part:before{content:\"\\b7\";margin-inline-end:6px;color:var(--text-soft)}.mrow__trail{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);flex-shrink:0;min-height:20px}.mrow__actions{display:inline-flex}.mrow__detail{margin:0;padding:0 var(--s-4) 12px;display:grid;gap:1px}.mrow__field{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding:7px 0;border-top:1px solid var(--rule-soft)}.mrow__field dt{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute);flex-shrink:0}.mrow__field dd{margin:0;font-size:13.5px;color:var(--text);text-align:end;min-width:0;overflow-wrap:anywhere}.mrow__more{appearance:none;width:100%;background:transparent;border:0;border-top:1px solid var(--rule-soft);padding:10px;font:inherit;font-size:13px;font-weight:600;color:var(--tenant-500);cursor:pointer}.mlist[data-layout=card]{gap:var(--s-3);padding:var(--s-3) var(--s-3) 0}.mlist[data-layout=card] .mrow{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper-alt);overflow:hidden}.mlist[data-layout=card] .mrow__head{border-bottom:1px solid var(--rule)}.mrow__chevron{font-size:11px;color:var(--text-soft);transition:transform var(--t-fast) var(--ease-out);flex-shrink:0}.mrow__chevron.is-open{transform:rotate(180deg);color:var(--text-mute)}.mrow__head.is-tappable:focus-visible{outline:2px solid var(--tenant-400);outline-offset:-2px}.mrow__more{display:flex;align-items:center;justify-content:center;gap:6px}.tbl-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);padding:var(--s-9) var(--s-4);text-align:center}.tbl-empty__icon{font-size:28px;line-height:1;color:var(--ink-400);margin-block-end:var(--s-1)}.tbl-empty__title{margin:0;font-size:15px;font-weight:600;color:var(--text);max-inline-size:46ch;overflow-wrap:break-word}.tbl-empty__hint{margin:0;font-size:13px;color:var(--ink-600);max-inline-size:52ch;text-wrap:pretty}.tbl-empty__action{margin-block-start:var(--s-3);min-block-size:var(--hit-base)}.mrow--empty{padding:0}@media(max-width:767px){.tbl-empty{padding:var(--s-7) var(--s-4)}.tbl-empty__action{min-block-size:var(--hit-touch)}}.pi.is-spinning{animation:ef-export-spin .9s linear infinite}@keyframes ef-export-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.pi.is-spinning{animation:none}}\n"] }]
+        }], propDecorators: { mobileLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileLayout", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], trackByField: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByField", required: false }] }], pageNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageNumber", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], totalCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalCount", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], hidePager: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePager", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], loadingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingKey", required: false }] }], rowDoubleClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDoubleClickable", required: false }] }], hasActionsColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActionsColumn", required: false }] }], rowActionsContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActionsContext", required: false }] }], showViewAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showViewAction", required: false }] }], showEditAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEditAction", required: false }] }], showDuplicateAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDuplicateAction", required: false }] }], showDeleteAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDeleteAction", required: false }] }], showDensityControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDensityControl", required: false }] }], showColumnPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnPicker", required: false }] }], showExportControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportControl", required: false }] }], exporting: [{ type: i0.Input, args: [{ isSignal: true, alias: "exporting", required: false }] }], screenContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "screenContext", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], tableKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableKey", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], rowAction: [{ type: i0.Output, args: ["rowAction"] }], exportRequest: [{ type: i0.Output, args: ["exportRequest"] }], clearSearch: [{ type: i0.Output, args: ["clearSearch"] }], bodyTemplates: [{
                 type: ContentChildren,
                 args: [EfColumnTemplateDirective]
             }], headerTemplates: [{