@elasticias/ui 1.0.43 → 1.0.44

package/fesm2022/elasticias-ui.mjs

@@ -22,7 +22,7 @@ import * as i1$6 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import { SCREEN_REF_DATA_SERVICE, ScreenStateEnum } from '@elasticias/screens';
 import { Permissions } from '@elasticias/types';
-import { EfShortcutService, EfViewportService, EF_PREFERENCE_STORE, formatShortcut, efTablePrefsKey, EfThemeConfigService, EF_BUILD_INFO, EfPermissionService, EfActiveModuleService, EF_SESSION, EF_SIDE_COLLAPSED_KEY, EfToastService } from '@elasticias/core';
+import { EfViewportService, EfShortcutService, EF_PREFERENCE_STORE, formatShortcut, efTablePrefsKey, EfThemeConfigService, EF_BUILD_INFO, EfPermissionService, EfActiveModuleService, EF_SESSION, EF_SIDE_COLLAPSED_KEY, EfToastService } from '@elasticias/core';
 import * as i1$7 from 'primeng/fieldset';
 import { FieldsetModule } from 'primeng/fieldset';
 import * as i2$2 from 'primeng/accordion';
@@ -3895,6 +3895,13 @@ const EF_DATA_CARD_MOBILE_LAYOUT = new InjectionToken('EF_DATA_CARD_MOBILE_LAYOU
  *
  * Renders a windowed page list (first / current ±1 / last with
  * ellipsis) for total > 7 pages. Below 7 pages all buttons show.
+ *
+ * On a phone (`EfViewportService.isMobile`) the window becomes
+ * first · previous · "5 of 20" · next · last. The window is up to nine
+ * 48px touch targets (about 464px) and a 390px phone has about 316px
+ * inside a card, so it ran off the edge. The compact set still reaches
+ * every page the window offered: its numbered neighbours are one step
+ * away, and the first and the last page are one tap.
  */
 class EfPagerComponent {
     pageNumber = input(1, ...(ngDevMode ? [{ debugName: "pageNumber" }] : /* istanbul ignore next */ []));
@@ -3906,10 +3913,14 @@ class EfPagerComponent {
     ofLabelKey = input('common_of', ...(ngDevMode ? [{ debugName: "ofLabelKey" }] : /* istanbul ignore next */ []));
     prevLabelKey = input('common_page_previous', ...(ngDevMode ? [{ debugName: "prevLabelKey" }] : /* istanbul ignore next */ []));
     nextLabelKey = input('common_page_next', ...(ngDevMode ? [{ debugName: "nextLabelKey" }] : /* istanbul ignore next */ []));
+    firstLabelKey = input('common_page_first', ...(ngDevMode ? [{ debugName: "firstLabelKey" }] : /* istanbul ignore next */ []));
+    lastLabelKey = input('common_page_last', ...(ngDevMode ? [{ debugName: "lastLabelKey" }] : /* istanbul ignore next */ []));
     /** Hide the lines-per-page selector + range when only paging is wanted. */
     hideSize = input(false, ...(ngDevMode ? [{ debugName: "hideSize" }] : /* istanbul ignore next */ []));
     pageChange = output();
     pageSizeChange = output();
+    /** Phone layout: first · prev · "n of N" · next · last. */
+    compact = inject(EfViewportService).isMobile;
     /** Falls back to the first configured option if the value ever goes empty. */
     get defaultSize() {
         return this.pageSizeOptions()[0] ?? this.pageSize();
@@ -3975,12 +3986,12 @@ class EfPagerComponent {
         return btn.kind === 'page' ? `p${btn.value}` : `e${index}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfPagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfPagerComponent, isStandalone: true, selector: "ef-pager", inputs: { 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 }, linesPerPageLabelKey: { classPropertyName: "linesPerPageLabelKey", publicName: "linesPerPageLabelKey", isSignal: true, isRequired: false, transformFunction: null }, ofLabelKey: { classPropertyName: "ofLabelKey", publicName: "ofLabelKey", isSignal: true, isRequired: false, transformFunction: null }, prevLabelKey: { classPropertyName: "prevLabelKey", publicName: "prevLabelKey", isSignal: true, isRequired: false, transformFunction: null }, nextLabelKey: { classPropertyName: "nextLabelKey", publicName: "nextLabelKey", isSignal: true, isRequired: false, transformFunction: null }, hideSize: { classPropertyName: "hideSize", publicName: "hideSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"pager\">\n  @if (!hideSize()) {\n    <div class=\"size\">\n      <span>{{ linesPerPageLabelKey() | translate }}</span>\n      <ef-select\n        size=\"small\"\n        appendTo=\"body\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [options]=\"sizeOptions()\"\n        [value]=\"pageSize()\"\n        [ariaLabelKey]=\"linesPerPageLabelKey()\"\n        [showClear]=\"false\"\n        (selectionChangeEvent)=\"onSizeChange($event)\"\n      />\n      @if (totalCount() > 0) {\n        <span>\u00B7 {{ range().start }}\u2013{{ range().end }} {{ ofLabelKey() | translate }} {{ totalCount() }}</span>\n      }\n    </div>\n  } @else {\n    <span></span>\n  }\n\n  <div class=\"pages\">\n    <button\n      class=\"pg\"\n      type=\"button\"\n      [disabled]=\"pageNumber() <= 1\"\n      [attr.aria-label]=\"prevLabelKey() | translate\"\n      (click)=\"goToPage(pageNumber() - 1)\"\n    >\u2039</button>\n\n    @for (btn of pageButtons(); track trackBtn($index, btn)) {\n      @if (btn.kind === 'page') {\n        <button\n          class=\"pg\"\n          type=\"button\"\n          [class.active]=\"btn.value === pageNumber()\"\n          (click)=\"goToPage(btn.value)\"\n        >{{ btn.value }}</button>\n      } @else {\n        <span class=\"pg\" aria-hidden=\"true\" style=\"cursor: default;\">\u2026</span>\n      }\n    }\n\n    <button\n      class=\"pg\"\n      type=\"button\"\n      [disabled]=\"pageNumber() >= totalPages()\"\n      [attr.aria-label]=\"nextLabelKey() | translate\"\n      (click)=\"goToPage(pageNumber() + 1)\"\n    >\u203A</button>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfSelectComponent, selector: "ef-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "group", "optionGroupLabel", "optionGroupChildren", "size", "fluid", "inline", "appendTo", "multiple", "filter", "filterBy", "filterPlaceholder", "filterPlaceholderKey", "autofocusFilter", "autofocus", "editable", "loading", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "multiDisplay", "showToggleAll", "emptyMessage", "emptyMessageKey", "emptyFilterMessage", "emptyFilterMessageKey", "styleClass", "panelStyleClass", "filterByKeys", "variant", "value"], outputs: ["selectionChangeEvent", "filterChangeEvent", "panelShowEvent", "panelHideEvent"] }, { 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: EfPagerComponent, isStandalone: true, selector: "ef-pager", inputs: { 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 }, linesPerPageLabelKey: { classPropertyName: "linesPerPageLabelKey", publicName: "linesPerPageLabelKey", isSignal: true, isRequired: false, transformFunction: null }, ofLabelKey: { classPropertyName: "ofLabelKey", publicName: "ofLabelKey", isSignal: true, isRequired: false, transformFunction: null }, prevLabelKey: { classPropertyName: "prevLabelKey", publicName: "prevLabelKey", isSignal: true, isRequired: false, transformFunction: null }, nextLabelKey: { classPropertyName: "nextLabelKey", publicName: "nextLabelKey", isSignal: true, isRequired: false, transformFunction: null }, firstLabelKey: { classPropertyName: "firstLabelKey", publicName: "firstLabelKey", isSignal: true, isRequired: false, transformFunction: null }, lastLabelKey: { classPropertyName: "lastLabelKey", publicName: "lastLabelKey", isSignal: true, isRequired: false, transformFunction: null }, hideSize: { classPropertyName: "hideSize", publicName: "hideSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"pager\">\n  @if (!hideSize()) {\n    <div class=\"size\">\n      <span>{{ linesPerPageLabelKey() | translate }}</span>\n      <ef-select\n        size=\"small\"\n        appendTo=\"body\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [options]=\"sizeOptions()\"\n        [value]=\"pageSize()\"\n        [ariaLabelKey]=\"linesPerPageLabelKey()\"\n        [showClear]=\"false\"\n        (selectionChangeEvent)=\"onSizeChange($event)\"\n      />\n      @if (totalCount() > 0) {\n        <span>\u00B7 {{ range().start }}\u2013{{ range().end }} {{ ofLabelKey() | translate }} {{ totalCount() }}</span>\n      }\n    </div>\n  } @else {\n    <span></span>\n  }\n\n  <div class=\"pages\">\n    @if (compact()) {\n      <button\n        class=\"pg\"\n        type=\"button\"\n        [disabled]=\"pageNumber() <= 1\"\n        [attr.aria-label]=\"firstLabelKey() | translate\"\n        (click)=\"goToPage(1)\"\n      >\u00AB</button>\n    }\n\n    <button\n      class=\"pg\"\n      type=\"button\"\n      [disabled]=\"pageNumber() <= 1\"\n      [attr.aria-label]=\"prevLabelKey() | translate\"\n      (click)=\"goToPage(pageNumber() - 1)\"\n    >\u2039</button>\n\n    @if (compact()) {\n      <span class=\"pg-status\">{{ pageNumber() }} {{ ofLabelKey() | translate }} {{ totalPages() }}</span>\n    } @else {\n      @for (btn of pageButtons(); track trackBtn($index, btn)) {\n        @if (btn.kind === 'page') {\n          <button\n            class=\"pg\"\n            type=\"button\"\n            [class.active]=\"btn.value === pageNumber()\"\n            (click)=\"goToPage(btn.value)\"\n          >{{ btn.value }}</button>\n        } @else {\n          <span class=\"pg\" aria-hidden=\"true\" style=\"cursor: default;\">\u2026</span>\n        }\n      }\n    }\n\n    <button\n      class=\"pg\"\n      type=\"button\"\n      [disabled]=\"pageNumber() >= totalPages()\"\n      [attr.aria-label]=\"nextLabelKey() | translate\"\n      (click)=\"goToPage(pageNumber() + 1)\"\n    >\u203A</button>\n\n    @if (compact()) {\n      <button\n        class=\"pg\"\n        type=\"button\"\n        [disabled]=\"pageNumber() >= totalPages()\"\n        [attr.aria-label]=\"lastLabelKey() | translate\"\n        (click)=\"goToPage(totalPages())\"\n      >\u00BB</button>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfSelectComponent, selector: "ef-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "group", "optionGroupLabel", "optionGroupChildren", "size", "fluid", "inline", "appendTo", "multiple", "filter", "filterBy", "filterPlaceholder", "filterPlaceholderKey", "autofocusFilter", "autofocus", "editable", "loading", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "multiDisplay", "showToggleAll", "emptyMessage", "emptyMessageKey", "emptyFilterMessage", "emptyFilterMessageKey", "styleClass", "panelStyleClass", "filterByKeys", "variant", "value"], outputs: ["selectionChangeEvent", "filterChangeEvent", "panelShowEvent", "panelHideEvent"] }, { 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: EfPagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-pager', standalone: true, imports: [CommonModule, TranslateModule, EfSelectComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pager\">\n  @if (!hideSize()) {\n    <div class=\"size\">\n      <span>{{ linesPerPageLabelKey() | translate }}</span>\n      <ef-select\n        size=\"small\"\n        appendTo=\"body\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [options]=\"sizeOptions()\"\n        [value]=\"pageSize()\"\n        [ariaLabelKey]=\"linesPerPageLabelKey()\"\n        [showClear]=\"false\"\n        (selectionChangeEvent)=\"onSizeChange($event)\"\n      />\n      @if (totalCount() > 0) {\n        <span>\u00B7 {{ range().start }}\u2013{{ range().end }} {{ ofLabelKey() | translate }} {{ totalCount() }}</span>\n      }\n    </div>\n  } @else {\n    <span></span>\n  }\n\n  <div class=\"pages\">\n    <button\n      class=\"pg\"\n      type=\"button\"\n      [disabled]=\"pageNumber() <= 1\"\n      [attr.aria-label]=\"prevLabelKey() | translate\"\n      (click)=\"goToPage(pageNumber() - 1)\"\n    >\u2039</button>\n\n    @for (btn of pageButtons(); track trackBtn($index, btn)) {\n      @if (btn.kind === 'page') {\n        <button\n          class=\"pg\"\n          type=\"button\"\n          [class.active]=\"btn.value === pageNumber()\"\n          (click)=\"goToPage(btn.value)\"\n        >{{ btn.value }}</button>\n      } @else {\n        <span class=\"pg\" aria-hidden=\"true\" style=\"cursor: default;\">\u2026</span>\n      }\n    }\n\n    <button\n      class=\"pg\"\n      type=\"button\"\n      [disabled]=\"pageNumber() >= totalPages()\"\n      [attr.aria-label]=\"nextLabelKey() | translate\"\n      (click)=\"goToPage(pageNumber() + 1)\"\n    >\u203A</button>\n  </div>\n</div>\n" }]
-        }], propDecorators: { 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 }] }], linesPerPageLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "linesPerPageLabelKey", required: false }] }], ofLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ofLabelKey", required: false }] }], prevLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevLabelKey", required: false }] }], nextLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabelKey", required: false }] }], hideSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSize", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }] } });
+            args: [{ selector: 'ef-pager', standalone: true, imports: [CommonModule, TranslateModule, EfSelectComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"pager\">\n  @if (!hideSize()) {\n    <div class=\"size\">\n      <span>{{ linesPerPageLabelKey() | translate }}</span>\n      <ef-select\n        size=\"small\"\n        appendTo=\"body\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        [options]=\"sizeOptions()\"\n        [value]=\"pageSize()\"\n        [ariaLabelKey]=\"linesPerPageLabelKey()\"\n        [showClear]=\"false\"\n        (selectionChangeEvent)=\"onSizeChange($event)\"\n      />\n      @if (totalCount() > 0) {\n        <span>\u00B7 {{ range().start }}\u2013{{ range().end }} {{ ofLabelKey() | translate }} {{ totalCount() }}</span>\n      }\n    </div>\n  } @else {\n    <span></span>\n  }\n\n  <div class=\"pages\">\n    @if (compact()) {\n      <button\n        class=\"pg\"\n        type=\"button\"\n        [disabled]=\"pageNumber() <= 1\"\n        [attr.aria-label]=\"firstLabelKey() | translate\"\n        (click)=\"goToPage(1)\"\n      >\u00AB</button>\n    }\n\n    <button\n      class=\"pg\"\n      type=\"button\"\n      [disabled]=\"pageNumber() <= 1\"\n      [attr.aria-label]=\"prevLabelKey() | translate\"\n      (click)=\"goToPage(pageNumber() - 1)\"\n    >\u2039</button>\n\n    @if (compact()) {\n      <span class=\"pg-status\">{{ pageNumber() }} {{ ofLabelKey() | translate }} {{ totalPages() }}</span>\n    } @else {\n      @for (btn of pageButtons(); track trackBtn($index, btn)) {\n        @if (btn.kind === 'page') {\n          <button\n            class=\"pg\"\n            type=\"button\"\n            [class.active]=\"btn.value === pageNumber()\"\n            (click)=\"goToPage(btn.value)\"\n          >{{ btn.value }}</button>\n        } @else {\n          <span class=\"pg\" aria-hidden=\"true\" style=\"cursor: default;\">\u2026</span>\n        }\n      }\n    }\n\n    <button\n      class=\"pg\"\n      type=\"button\"\n      [disabled]=\"pageNumber() >= totalPages()\"\n      [attr.aria-label]=\"nextLabelKey() | translate\"\n      (click)=\"goToPage(pageNumber() + 1)\"\n    >\u203A</button>\n\n    @if (compact()) {\n      <button\n        class=\"pg\"\n        type=\"button\"\n        [disabled]=\"pageNumber() >= totalPages()\"\n        [attr.aria-label]=\"lastLabelKey() | translate\"\n        (click)=\"goToPage(totalPages())\"\n      >\u00BB</button>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { 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 }] }], linesPerPageLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "linesPerPageLabelKey", required: false }] }], ofLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ofLabelKey", required: false }] }], prevLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevLabelKey", required: false }] }], nextLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabelKey", required: false }] }], firstLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstLabelKey", required: false }] }], lastLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastLabelKey", required: false }] }], hideSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSize", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }] } });
 
 /** Canonical tone list — used for membership checks by the resolver. */
 const EF_STATUS_COLORS = [
@@ -5536,7 +5547,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 }, 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 }, defaultDensity: { classPropertyName: "defaultDensity", publicName: "defaultDensity", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, fixedLayout: { classPropertyName: "fixedLayout", publicName: "fixedLayout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", rowDoubleClick: "rowDoubleClick", rowAction: "rowAction", exportRequest: "exportRequest", clearSearch: "clearSearch", retry: "retry", rowReorder: "rowReorder" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, 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\" let-index=\"index\">\n  @if (bodyTemplate(col.id); as bodyTpl) {\n    <ng-container *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, col: col, index: index }\"></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<!-- .has-open-menu unclips the shell for the Densit\u00E9 / Colonnes menus,\n     which hang below .tbl-head. Row menus are fixed to the viewport\n     (ef-row-actions) and need no lift; counting them also left the shell\n     unclipped for good when a row went while its menu was open. -->\n<div class=\"tbl-wrap\" [class.has-open-menu]=\"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        <!-- A refresh that failed on top of rows already on screen keeps the\n             rows, so this chip is the only sign anything went wrong \u2014 and the\n             rows it sits above may now be stale. It has to say so, and say it\n             in the product's words: `errorMsg` is `err.message` from the HTTP\n             layer, and \"500 Internal Server Error\" tells an operator nothing\n             they can act on.\n\n             The raw string stays on `data-error`, where devtools can read it\n             and no reader ever meets it. `title` was the obvious place and is\n             the wrong one: it renders the exception in a tooltip, which is\n             precisely what this change exists to stop, and it is unreachable\n             on touch besides.\n\n             role=\"status\", not \"alert\": polite is right for a signal beside\n             rows that are still usable, and when the body is showing the\n             error state it already carries the alert \u2014 one failure must not\n             interrupt a screen-reader twice. -->\n        <span\n          role=\"status\"\n          [attr.data-error]=\"errorMsg()\"\n          style=\"color: var(--st-cancelled-fg); font-weight: 600;\"\n          >\u26A0 {{ 'common_error_refresh_failed' | translate }}</span\n        >\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\n      class=\"mlist\"\n      [attr.data-layout]=\"effectiveMobileLayout()\"\n      [attr.aria-busy]=\"loading() ? 'true' : null\"\n    >\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]=\"headIsControl()\"\n            [attr.role]=\"headIsControl() ? 'button' : null\"\n            [attr.tabindex]=\"headIsControl() ? 0 : null\"\n            [attr.aria-expanded]=\"!rowNavigable() && 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\" efOverflowTooltip efTooltip efTooltipPosition=\"top\">\n                  <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: pc, index: i }\"></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, index: i }\"></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, index: i }\"></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                @if (rowNavigable()) {\n                  <!-- The head opens the record, so expansion needs a control\n                       of its own. Same glyph, promoted from decoration to a\n                       button that carries the state it was already drawing. -->\n                  <button\n                    type=\"button\"\n                    class=\"mrow__disclosure\"\n                    [attr.aria-expanded]=\"isExpanded(row, i)\"\n                    [attr.aria-label]=\"(isExpanded(row, i) ? 'common_view_less' : 'common_view_more') | translate\"\n                    (click)=\"onDisclosureToggle(row, i, $event)\"\n                  >\n                    <i\n                      class=\"pi pi-chevron-down mrow__chevron\"\n                      [class.is-open]=\"isExpanded(row, i)\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </button>\n                } @else {\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              }\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, index: i }\"></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        <!-- No rows has three meanings and they must not share a screen:\n             still loading is a skeleton, the request failed is the error\n             state, finished-and-empty is the empty state. Saying \"nothing\n             here yet\" to someone whose data is still in flight \u2014 or whose\n             request just failed \u2014 is a lie the whole time it shows. -->\n        @if (showSkeleton()) {\n          @for (line of skeletonLines(); track line) {\n            <li class=\"mrow mrow--skeleton\">\n              <ef-skeleton variant=\"text\" [rows]=\"2\" />\n            </li>\n          }\n        } @else if (showError()) {\n          <li class=\"mrow mrow--empty\">\n            <ng-container *ngTemplateOutlet=\"errorStateTpl\"></ng-container>\n          </li>\n        } @else {\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      }\n    </ul>\n  } @else {\n    <!-- The table scrolls sideways inside its own box. Between 768px and\n         the table's natural width (about 900-1100px) the columns past the\n         edge were simply clipped by .tbl-wrap, with no way to reach them.\n         .tbl-wrap stays the clipping shell, so the head and the pager do\n         not scroll with the rows. Row menus are fixed to the viewport\n         (ef-row-actions), so this scroller never clips them. -->\n    <div class=\"tbl-scroll\">\n    <table class=\"tbl\" [class.tbl--fixed]=\"fixedLayout()\">\n      <thead>\n        <tr>\n          @if (reorderable()) {\n            <th class=\"tbl-drag-h\" aria-hidden=\"true\"></th>\n          }\n          @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n            <!-- A sortable header is a real <button> inside the <th>, not a\n                 click handler on the cell. The cell carries aria-sort so the\n                 current order is announced; the arrow stays decorative.\n                 Sorting was previously mouse-only and silent to assistive\n                 technology, on every list screen in the product. -->\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              [attr.aria-sort]=\"ariaSort(col)\"\n            >\n              @if (col.sortable) {\n                <button type=\"button\" class=\"tbl-sort\" (click)=\"onHeaderClick(col)\">\n                  <ng-container *ngTemplateOutlet=\"headerLabelTpl; context: { col: col }\"></ng-container>\n                  @if (sortIndicator(col)) {\n                    <span aria-hidden=\"true\" class=\"tbl-sort__arrow\">{{ sortIndicator(col) }}</span>\n                  }\n                </button>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"headerLabelTpl; context: { col: col }\"></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody [attr.aria-busy]=\"loading() ? 'true' : null\">\n        @for (row of rows(); track trackByRow($index, row); let i = $index) {\n          <tr\n            [class.is-row-clickable]=\"rowDoubleClickable()\"\n            [class.is-dragging]=\"dragFrom() === i\"\n            [class.is-drop-target]=\"dragFrom() !== null && dragFrom() !== i && dragTo() === i\"\n            [attr.tabindex]=\"rowDoubleClickable() ? 0 : null\"\n            [attr.role]=\"rowDoubleClickable() ? 'button' : null\"\n            (click)=\"onRowClick(row, $event)\"\n            (keydown.enter)=\"onRowKeydown(row, $event)\"\n          >\n            @if (reorderable()) {\n              <td class=\"tbl-drag\">\n                <!-- The row is draggable only by this handle, so a drag never\n                     starts from a cell the operator meant to click or select.\n                     Arrow keys move the row for anyone not using a pointer. -->\n                <button\n                  type=\"button\"\n                  class=\"tbl-drag__grip\"\n                  [attr.aria-label]=\"'common_reorder_row' | translate\"\n                  (pointerdown)=\"onDragPointerDown(i, $event)\"\n                  (pointermove)=\"onDragPointerMove($event)\"\n                  (pointerup)=\"onDragPointerUp()\"\n                  (pointercancel)=\"onDragPointerUp()\"\n                  (keydown)=\"onDragKeydown(i, $event)\"\n                >\n                  <i class=\"pi pi-ellipsis-v\" aria-hidden=\"true\"></i>\n                </button>\n              </td>\n            }\n            @for (col of effectiveColumns(); track trackByColumn($index, col); let colIdx = $index) {\n              <td efOverflowTooltip efTooltip efTooltipPosition=\"top\" [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, index: i }\"\n                  ></ng-container>\n                }\n                          </td>\n            }\n          </tr>\n        } @empty {\n          <!-- Placeholder rows keep the real columns, so the table that\n               arrives lands where the shimmer already was instead of\n               reflowing the page under the reader's eyes. -->\n          @if (showSkeleton()) {\n            @for (line of skeletonLines(); track line) {\n              <tr>\n                @if (reorderable()) {\n                  <td class=\"tbl-drag\"></td>\n                }\n                @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n                  <td [class]=\"cellAlignClass(col)\" [attr.data-col]=\"col.id\">\n                    <ef-skeleton variant=\"text\" [rows]=\"1\" />\n                  </td>\n                }\n              </tr>\n            }\n          } @else if (showError()) {\n            <!-- The failure replaces the body, so it spans the full row \u2014\n                 crammed into column one it reads as a value, not a state. -->\n            <tr>\n              <td [attr.colspan]=\"effectiveColumns().length + (reorderable() ? 1 : 0)\">\n                <ng-container *ngTemplateOutlet=\"errorStateTpl\"></ng-container>\n              </td>\n            </tr>\n          } @else {\n            <tr>\n              <td [attr.colspan]=\"effectiveColumns().length + (reorderable() ? 1 : 0)\">\n                <ng-content select=\"[empty-state]\">\n                  <ng-container *ngTemplateOutlet=\"defaultEmptyTpl\"></ng-container>\n                </ng-content>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n    </div>\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\n<!-- \u2500\u2500 ERROR 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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     A request that failed and came back with nothing is not an empty\n     collection, and must never borrow its words: \"nothing here yet\" is\n     a confident false statement about the operator's data, and they may\n     act on it. So this replaces the empty state outright, projected\n     [empty-state] included \u2014 a screen's own \"create your first client\"\n     copy is just as wrong here as the default.\n\n     It says nothing about *what* failed. `errorMsg` is `err.message`\n     from the HTTP layer, and a status line or an exception string tells\n     an operator nothing they can act on; it survives on the head chip's\n     `data-error` attribute, for whoever is reading the DOM. This carries\n     the two things that help: their data is intact, and the way to try\n     again.\n\n     role=\"alert\" goes on this div, never on the <tr> / <td> / <li> that\n     hosts it \u2014 a role on a row or cell takes the table's semantics down\n     with it. It fires on insertion, which is exactly when @if adds it. -->\n<ng-template #errorStateTpl>\n  <div class=\"tbl-empty tbl-empty--error\" role=\"alert\">\n    <i class=\"pi pi-exclamation-triangle tbl-empty__icon\" aria-hidden=\"true\"></i>\n    <p class=\"tbl-empty__title\">{{ 'common_error_load_failed' | translate }}</p>\n    <p class=\"tbl-empty__hint\">{{ 'common_error_load_failed_hint' | translate }}</p>\n    <button class=\"btn btn-sm tbl-empty__action\" type=\"button\" (click)=\"retry.emit()\">\n      <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n      {{ 'common_retry' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<!-- Header label, shared by the sortable and plain header cells so the\n     projection rules stay in one place. -->\n<ng-template #headerLabelTpl let-col=\"col\">\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</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0}.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{--tbl-cell-pad-block: 4px;padding-top:var(--tbl-cell-pad-block);padding-bottom:var(--tbl-cell-pad-block)}.tbl-wrap[data-density=comfortable] .tbl tbody td{--tbl-cell-pad-block: 16px;padding-top:var(--tbl-cell-pad-block);padding-bottom:var(--tbl-cell-pad-block)}.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)}.tbl-empty--error .tbl-empty__icon{color:var(--st-cancelled-fg)}.mrow--empty{padding:0}.mrow--skeleton{padding:12px var(--s-4)}@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}}.tbl th.tbl-drag-h,.tbl td.tbl-drag{width:28px;padding-inline:4px 0;text-align:center}.tbl td.tbl-drag{cursor:default}.tbl .tbl-drag__grip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:26px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-soft);cursor:grab;touch-action:none;transition:background var(--t-fast, .14s) var(--ease-out, ease-out),color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl .tbl-drag__grip:hover{background:var(--paper);color:var(--text)}.tbl .tbl-drag__grip:focus-visible{outline:2px solid var(--tenant, var(--rule));outline-offset:1px}.tbl .tbl-drag__grip:active{cursor:grabbing}.tbl .tbl-drag__grip i{font-size:12px}.tbl tbody tr.is-dragging>td{background:var(--paper);opacity:.55}.tbl tbody tr.is-drop-target>td{box-shadow:inset 0 2px 0 var(--tenant, var(--rule))}.tbl.tbl--fixed{table-layout:fixed}.mrow__disclosure{appearance:none;background:transparent;border:0;padding:0;margin:0;display:inline-grid;place-items:center;color:var(--text-mute);cursor:pointer;position:relative}.mrow__disclosure:after{content:\"\";position:absolute;top:50%;left:50%;width:var(--hit-touch);height:var(--hit-touch);transform:translate(-50%,-50%)}.mrow__disclosure:focus-visible{outline:2px solid color-mix(in srgb,var(--ink-active) 40%,transparent);outline-offset:2px;border-radius:var(--r-pill)}\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: EfSkeletonComponent, selector: "ef-skeleton", inputs: ["variant", "rows", "height"] }, { kind: "component", type: EfRowActionsComponent, selector: "ef-row-actions", inputs: ["items", "context", "triggerIcon", "triggerAriaKey", "disabled", "menuLeft"], outputs: ["opened", "closed"] }, { kind: "directive", type: EfOverflowTooltipDirective, selector: "[efOverflowTooltip]" }, { kind: "directive", type: EfTooltipDirective, selector: "[efTooltip]" }, { 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 }, defaultDensity: { classPropertyName: "defaultDensity", publicName: "defaultDensity", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, fixedLayout: { classPropertyName: "fixedLayout", publicName: "fixedLayout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", rowDoubleClick: "rowDoubleClick", rowAction: "rowAction", exportRequest: "exportRequest", clearSearch: "clearSearch", retry: "retry", rowReorder: "rowReorder" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, 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\" let-index=\"index\">\n  @if (bodyTemplate(col.id); as bodyTpl) {\n    <ng-container *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, col: col, index: index }\"></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<!-- .has-open-menu unclips the shell for the Densit\u00E9 / Colonnes menus,\n     which hang below .tbl-head. Row menus are fixed to the viewport\n     (ef-row-actions) and need no lift; counting them also left the shell\n     unclipped for good when a row went while its menu was open. -->\n<div class=\"tbl-wrap\" [class.has-open-menu]=\"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        <!-- A refresh that failed on top of rows already on screen keeps the\n             rows, so this chip is the only sign anything went wrong \u2014 and the\n             rows it sits above may now be stale. It has to say so, and say it\n             in the product's words: `errorMsg` is `err.message` from the HTTP\n             layer, and \"500 Internal Server Error\" tells an operator nothing\n             they can act on.\n\n             The raw string stays on `data-error`, where devtools can read it\n             and no reader ever meets it. `title` was the obvious place and is\n             the wrong one: it renders the exception in a tooltip, which is\n             precisely what this change exists to stop, and it is unreachable\n             on touch besides.\n\n             role=\"status\", not \"alert\": polite is right for a signal beside\n             rows that are still usable, and when the body is showing the\n             error state it already carries the alert \u2014 one failure must not\n             interrupt a screen-reader twice. -->\n        <span\n          role=\"status\"\n          [attr.data-error]=\"errorMsg()\"\n          style=\"color: var(--st-cancelled-fg); font-weight: 600;\"\n          >\u26A0 {{ 'common_error_refresh_failed' | translate }}</span\n        >\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\n      class=\"mlist\"\n      [attr.data-layout]=\"effectiveMobileLayout()\"\n      [attr.aria-busy]=\"loading() ? 'true' : null\"\n    >\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]=\"headIsControl()\"\n            [attr.role]=\"headIsControl() ? 'button' : null\"\n            [attr.tabindex]=\"headIsControl() ? 0 : null\"\n            [attr.aria-expanded]=\"!rowNavigable() && 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\" efOverflowTooltip efTooltip efTooltipPosition=\"top\">\n                  <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: pc, index: i }\"></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, index: i }\"></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, index: i }\"></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                @if (rowNavigable()) {\n                  <!-- The head opens the record, so expansion needs a control\n                       of its own. Same glyph, promoted from decoration to a\n                       button that carries the state it was already drawing. -->\n                  <button\n                    type=\"button\"\n                    class=\"mrow__disclosure\"\n                    [attr.aria-expanded]=\"isExpanded(row, i)\"\n                    [attr.aria-label]=\"(isExpanded(row, i) ? 'common_view_less' : 'common_view_more') | translate\"\n                    (click)=\"onDisclosureToggle(row, i, $event)\"\n                  >\n                    <i\n                      class=\"pi pi-chevron-down mrow__chevron\"\n                      [class.is-open]=\"isExpanded(row, i)\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </button>\n                } @else {\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              }\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, index: i }\"></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        <!-- No rows has three meanings and they must not share a screen:\n             still loading is a skeleton, the request failed is the error\n             state, finished-and-empty is the empty state. Saying \"nothing\n             here yet\" to someone whose data is still in flight \u2014 or whose\n             request just failed \u2014 is a lie the whole time it shows. -->\n        @if (showSkeleton()) {\n          @for (line of skeletonLines(); track line) {\n            <li class=\"mrow mrow--skeleton\">\n              <ef-skeleton variant=\"text\" [rows]=\"2\" />\n            </li>\n          }\n        } @else if (showError()) {\n          <li class=\"mrow mrow--empty\">\n            <ng-container *ngTemplateOutlet=\"errorStateTpl\"></ng-container>\n          </li>\n        } @else {\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      }\n    </ul>\n  } @else {\n    <!-- The table scrolls sideways inside its own box. Between 768px and\n         the table's natural width (about 900-1100px) the columns past the\n         edge were simply clipped by .tbl-wrap, with no way to reach them.\n         .tbl-wrap stays the clipping shell, so the head and the pager do\n         not scroll with the rows. Row menus are fixed to the viewport\n         (ef-row-actions), so this scroller never clips them. -->\n    <div class=\"tbl-scroll\">\n    <table class=\"tbl\" [class.tbl--fixed]=\"fixedLayout()\">\n      <thead>\n        <tr>\n          @if (reorderable()) {\n            <th class=\"tbl-drag-h\" aria-hidden=\"true\"></th>\n          }\n          @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n            <!-- A sortable header is a real <button> inside the <th>, not a\n                 click handler on the cell. The cell carries aria-sort so the\n                 current order is announced; the arrow stays decorative.\n                 Sorting was previously mouse-only and silent to assistive\n                 technology, on every list screen in the product. -->\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              [attr.aria-sort]=\"ariaSort(col)\"\n            >\n              @if (col.sortable) {\n                <button type=\"button\" class=\"tbl-sort\" (click)=\"onHeaderClick(col)\">\n                  <ng-container *ngTemplateOutlet=\"headerLabelTpl; context: { col: col }\"></ng-container>\n                  @if (sortIndicator(col)) {\n                    <span aria-hidden=\"true\" class=\"tbl-sort__arrow\">{{ sortIndicator(col) }}</span>\n                  }\n                </button>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"headerLabelTpl; context: { col: col }\"></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody [attr.aria-busy]=\"loading() ? 'true' : null\">\n        @for (row of rows(); track trackByRow($index, row); let i = $index) {\n          <tr\n            [class.is-row-clickable]=\"rowDoubleClickable()\"\n            [class.is-dragging]=\"dragFrom() === i\"\n            [class.is-drop-target]=\"dragFrom() !== null && dragFrom() !== i && dragTo() === i\"\n            [attr.tabindex]=\"rowDoubleClickable() ? 0 : null\"\n            [attr.role]=\"rowDoubleClickable() ? 'button' : null\"\n            (click)=\"onRowClick(row, $event)\"\n            (keydown.enter)=\"onRowKeydown(row, $event)\"\n          >\n            @if (reorderable()) {\n              <td class=\"tbl-drag\">\n                <!-- The row is draggable only by this handle, so a drag never\n                     starts from a cell the operator meant to click or select.\n                     Arrow keys move the row for anyone not using a pointer. -->\n                <button\n                  type=\"button\"\n                  class=\"tbl-drag__grip\"\n                  [attr.aria-label]=\"'common_reorder_row' | translate\"\n                  (pointerdown)=\"onDragPointerDown(i, $event)\"\n                  (pointermove)=\"onDragPointerMove($event)\"\n                  (pointerup)=\"onDragPointerUp()\"\n                  (pointercancel)=\"onDragPointerUp()\"\n                  (keydown)=\"onDragKeydown(i, $event)\"\n                >\n                  <i class=\"pi pi-ellipsis-v\" aria-hidden=\"true\"></i>\n                </button>\n              </td>\n            }\n            @for (col of effectiveColumns(); track trackByColumn($index, col); let colIdx = $index) {\n              <td efOverflowTooltip efTooltip efTooltipPosition=\"top\" [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, index: i }\"\n                  ></ng-container>\n                }\n                          </td>\n            }\n          </tr>\n        } @empty {\n          <!-- Placeholder rows keep the real columns, so the table that\n               arrives lands where the shimmer already was instead of\n               reflowing the page under the reader's eyes. -->\n          @if (showSkeleton()) {\n            @for (line of skeletonLines(); track line) {\n              <tr>\n                @if (reorderable()) {\n                  <td class=\"tbl-drag\"></td>\n                }\n                @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n                  <td [class]=\"cellAlignClass(col)\" [attr.data-col]=\"col.id\">\n                    <ef-skeleton variant=\"text\" [rows]=\"1\" />\n                  </td>\n                }\n              </tr>\n            }\n          } @else if (showError()) {\n            <!-- The failure replaces the body, so it spans the full row \u2014\n                 crammed into column one it reads as a value, not a state. -->\n            <tr>\n              <td [attr.colspan]=\"effectiveColumns().length + (reorderable() ? 1 : 0)\">\n                <ng-container *ngTemplateOutlet=\"errorStateTpl\"></ng-container>\n              </td>\n            </tr>\n          } @else {\n            <tr>\n              <td [attr.colspan]=\"effectiveColumns().length + (reorderable() ? 1 : 0)\">\n                <ng-content select=\"[empty-state]\">\n                  <ng-container *ngTemplateOutlet=\"defaultEmptyTpl\"></ng-container>\n                </ng-content>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n    </div>\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\n<!-- \u2500\u2500 ERROR 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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     A request that failed and came back with nothing is not an empty\n     collection, and must never borrow its words: \"nothing here yet\" is\n     a confident false statement about the operator's data, and they may\n     act on it. So this replaces the empty state outright, projected\n     [empty-state] included \u2014 a screen's own \"create your first client\"\n     copy is just as wrong here as the default.\n\n     It says nothing about *what* failed. `errorMsg` is `err.message`\n     from the HTTP layer, and a status line or an exception string tells\n     an operator nothing they can act on; it survives on the head chip's\n     `data-error` attribute, for whoever is reading the DOM. This carries\n     the two things that help: their data is intact, and the way to try\n     again.\n\n     role=\"alert\" goes on this div, never on the <tr> / <td> / <li> that\n     hosts it \u2014 a role on a row or cell takes the table's semantics down\n     with it. It fires on insertion, which is exactly when @if adds it. -->\n<ng-template #errorStateTpl>\n  <div class=\"tbl-empty tbl-empty--error\" role=\"alert\">\n    <i class=\"pi pi-exclamation-triangle tbl-empty__icon\" aria-hidden=\"true\"></i>\n    <p class=\"tbl-empty__title\">{{ 'common_error_load_failed' | translate }}</p>\n    <p class=\"tbl-empty__hint\">{{ 'common_error_load_failed_hint' | translate }}</p>\n    <button class=\"btn btn-sm tbl-empty__action\" type=\"button\" (click)=\"retry.emit()\">\n      <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n      {{ 'common_retry' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<!-- Header label, shared by the sortable and plain header cells so the\n     projection rules stay in one place. -->\n<ng-template #headerLabelTpl let-col=\"col\">\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</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0}.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{--tbl-cell-pad-block: 4px;padding-top:var(--tbl-cell-pad-block);padding-bottom:var(--tbl-cell-pad-block)}.tbl-wrap[data-density=comfortable] .tbl tbody td{--tbl-cell-pad-block: 16px;padding-top:var(--tbl-cell-pad-block);padding-bottom:var(--tbl-cell-pad-block)}.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)}.tbl-empty--error .tbl-empty__icon{color:var(--st-cancelled-fg)}.mrow--empty{padding:0}.mrow--skeleton{padding:12px var(--s-4)}@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}}.tbl th.tbl-drag-h,.tbl td.tbl-drag{width:28px;padding-inline:4px 0;text-align:center}.tbl td.tbl-drag{cursor:default}.tbl .tbl-drag__grip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:26px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-soft);cursor:grab;touch-action:none;transition:background var(--t-fast, .14s) var(--ease-out, ease-out),color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl .tbl-drag__grip:hover{background:var(--paper);color:var(--text)}.tbl .tbl-drag__grip:focus-visible{outline:2px solid var(--tenant, var(--rule));outline-offset:1px}.tbl .tbl-drag__grip:active{cursor:grabbing}.tbl .tbl-drag__grip i{font-size:12px}.tbl tbody tr.is-dragging>td{background:var(--paper);opacity:.55}.tbl tbody tr.is-drop-target>td{box-shadow:inset 0 2px 0 var(--tenant, var(--rule))}.tbl.tbl--fixed{table-layout:fixed}.mrow__disclosure{appearance:none;background:transparent;border:0;padding:0;margin:0;display:inline-grid;place-items:center;color:var(--text-mute);cursor:pointer;position:relative}.mrow__disclosure:after{content:\"\";position:absolute;top:50%;left:50%;width:var(--hit-touch);height:var(--hit-touch);transform:translate(-50%,-50%)}.mrow__disclosure:focus-visible{outline:2px solid color-mix(in srgb,var(--ink-active) 40%,transparent);outline-offset:2px;border-radius:var(--r-pill)}@media(pointer:coarse){.mrow__actions+.mrow__disclosure{margin-inline-start:calc((var(--hit-touch) - 11px) / 2 - var(--s-2))}}\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", "firstLabelKey", "lastLabelKey", "hideSize"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: EfStatusChipComponent, selector: "ef-status-chip", inputs: ["referenceKey", "code", "color", "label", "labelKey", "hideDot", "showCode"] }, { kind: "component", type: EfSkeletonComponent, selector: "ef-skeleton", inputs: ["variant", "rows", "height"] }, { kind: "component", type: EfRowActionsComponent, selector: "ef-row-actions", inputs: ["items", "context", "triggerIcon", "triggerAriaKey", "disabled", "menuLeft"], outputs: ["opened", "closed"] }, { kind: "directive", type: EfOverflowTooltipDirective, selector: "[efOverflowTooltip]" }, { kind: "directive", type: EfTooltipDirective, selector: "[efTooltip]" }, { 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,
@@ -5549,7 +5560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         EfRowActionsComponent,
                         EfOverflowTooltipDirective,
                         EfTooltipDirective,
-                    ], 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\" let-index=\"index\">\n  @if (bodyTemplate(col.id); as bodyTpl) {\n    <ng-container *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, col: col, index: index }\"></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<!-- .has-open-menu unclips the shell for the Densit\u00E9 / Colonnes menus,\n     which hang below .tbl-head. Row menus are fixed to the viewport\n     (ef-row-actions) and need no lift; counting them also left the shell\n     unclipped for good when a row went while its menu was open. -->\n<div class=\"tbl-wrap\" [class.has-open-menu]=\"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        <!-- A refresh that failed on top of rows already on screen keeps the\n             rows, so this chip is the only sign anything went wrong \u2014 and the\n             rows it sits above may now be stale. It has to say so, and say it\n             in the product's words: `errorMsg` is `err.message` from the HTTP\n             layer, and \"500 Internal Server Error\" tells an operator nothing\n             they can act on.\n\n             The raw string stays on `data-error`, where devtools can read it\n             and no reader ever meets it. `title` was the obvious place and is\n             the wrong one: it renders the exception in a tooltip, which is\n             precisely what this change exists to stop, and it is unreachable\n             on touch besides.\n\n             role=\"status\", not \"alert\": polite is right for a signal beside\n             rows that are still usable, and when the body is showing the\n             error state it already carries the alert \u2014 one failure must not\n             interrupt a screen-reader twice. -->\n        <span\n          role=\"status\"\n          [attr.data-error]=\"errorMsg()\"\n          style=\"color: var(--st-cancelled-fg); font-weight: 600;\"\n          >\u26A0 {{ 'common_error_refresh_failed' | translate }}</span\n        >\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\n      class=\"mlist\"\n      [attr.data-layout]=\"effectiveMobileLayout()\"\n      [attr.aria-busy]=\"loading() ? 'true' : null\"\n    >\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]=\"headIsControl()\"\n            [attr.role]=\"headIsControl() ? 'button' : null\"\n            [attr.tabindex]=\"headIsControl() ? 0 : null\"\n            [attr.aria-expanded]=\"!rowNavigable() && 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\" efOverflowTooltip efTooltip efTooltipPosition=\"top\">\n                  <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: pc, index: i }\"></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, index: i }\"></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, index: i }\"></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                @if (rowNavigable()) {\n                  <!-- The head opens the record, so expansion needs a control\n                       of its own. Same glyph, promoted from decoration to a\n                       button that carries the state it was already drawing. -->\n                  <button\n                    type=\"button\"\n                    class=\"mrow__disclosure\"\n                    [attr.aria-expanded]=\"isExpanded(row, i)\"\n                    [attr.aria-label]=\"(isExpanded(row, i) ? 'common_view_less' : 'common_view_more') | translate\"\n                    (click)=\"onDisclosureToggle(row, i, $event)\"\n                  >\n                    <i\n                      class=\"pi pi-chevron-down mrow__chevron\"\n                      [class.is-open]=\"isExpanded(row, i)\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </button>\n                } @else {\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              }\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, index: i }\"></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        <!-- No rows has three meanings and they must not share a screen:\n             still loading is a skeleton, the request failed is the error\n             state, finished-and-empty is the empty state. Saying \"nothing\n             here yet\" to someone whose data is still in flight \u2014 or whose\n             request just failed \u2014 is a lie the whole time it shows. -->\n        @if (showSkeleton()) {\n          @for (line of skeletonLines(); track line) {\n            <li class=\"mrow mrow--skeleton\">\n              <ef-skeleton variant=\"text\" [rows]=\"2\" />\n            </li>\n          }\n        } @else if (showError()) {\n          <li class=\"mrow mrow--empty\">\n            <ng-container *ngTemplateOutlet=\"errorStateTpl\"></ng-container>\n          </li>\n        } @else {\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      }\n    </ul>\n  } @else {\n    <!-- The table scrolls sideways inside its own box. Between 768px and\n         the table's natural width (about 900-1100px) the columns past the\n         edge were simply clipped by .tbl-wrap, with no way to reach them.\n         .tbl-wrap stays the clipping shell, so the head and the pager do\n         not scroll with the rows. Row menus are fixed to the viewport\n         (ef-row-actions), so this scroller never clips them. -->\n    <div class=\"tbl-scroll\">\n    <table class=\"tbl\" [class.tbl--fixed]=\"fixedLayout()\">\n      <thead>\n        <tr>\n          @if (reorderable()) {\n            <th class=\"tbl-drag-h\" aria-hidden=\"true\"></th>\n          }\n          @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n            <!-- A sortable header is a real <button> inside the <th>, not a\n                 click handler on the cell. The cell carries aria-sort so the\n                 current order is announced; the arrow stays decorative.\n                 Sorting was previously mouse-only and silent to assistive\n                 technology, on every list screen in the product. -->\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              [attr.aria-sort]=\"ariaSort(col)\"\n            >\n              @if (col.sortable) {\n                <button type=\"button\" class=\"tbl-sort\" (click)=\"onHeaderClick(col)\">\n                  <ng-container *ngTemplateOutlet=\"headerLabelTpl; context: { col: col }\"></ng-container>\n                  @if (sortIndicator(col)) {\n                    <span aria-hidden=\"true\" class=\"tbl-sort__arrow\">{{ sortIndicator(col) }}</span>\n                  }\n                </button>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"headerLabelTpl; context: { col: col }\"></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody [attr.aria-busy]=\"loading() ? 'true' : null\">\n        @for (row of rows(); track trackByRow($index, row); let i = $index) {\n          <tr\n            [class.is-row-clickable]=\"rowDoubleClickable()\"\n            [class.is-dragging]=\"dragFrom() === i\"\n            [class.is-drop-target]=\"dragFrom() !== null && dragFrom() !== i && dragTo() === i\"\n            [attr.tabindex]=\"rowDoubleClickable() ? 0 : null\"\n            [attr.role]=\"rowDoubleClickable() ? 'button' : null\"\n            (click)=\"onRowClick(row, $event)\"\n            (keydown.enter)=\"onRowKeydown(row, $event)\"\n          >\n            @if (reorderable()) {\n              <td class=\"tbl-drag\">\n                <!-- The row is draggable only by this handle, so a drag never\n                     starts from a cell the operator meant to click or select.\n                     Arrow keys move the row for anyone not using a pointer. -->\n                <button\n                  type=\"button\"\n                  class=\"tbl-drag__grip\"\n                  [attr.aria-label]=\"'common_reorder_row' | translate\"\n                  (pointerdown)=\"onDragPointerDown(i, $event)\"\n                  (pointermove)=\"onDragPointerMove($event)\"\n                  (pointerup)=\"onDragPointerUp()\"\n                  (pointercancel)=\"onDragPointerUp()\"\n                  (keydown)=\"onDragKeydown(i, $event)\"\n                >\n                  <i class=\"pi pi-ellipsis-v\" aria-hidden=\"true\"></i>\n                </button>\n              </td>\n            }\n            @for (col of effectiveColumns(); track trackByColumn($index, col); let colIdx = $index) {\n              <td efOverflowTooltip efTooltip efTooltipPosition=\"top\" [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, index: i }\"\n                  ></ng-container>\n                }\n                          </td>\n            }\n          </tr>\n        } @empty {\n          <!-- Placeholder rows keep the real columns, so the table that\n               arrives lands where the shimmer already was instead of\n               reflowing the page under the reader's eyes. -->\n          @if (showSkeleton()) {\n            @for (line of skeletonLines(); track line) {\n              <tr>\n                @if (reorderable()) {\n                  <td class=\"tbl-drag\"></td>\n                }\n                @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n                  <td [class]=\"cellAlignClass(col)\" [attr.data-col]=\"col.id\">\n                    <ef-skeleton variant=\"text\" [rows]=\"1\" />\n                  </td>\n                }\n              </tr>\n            }\n          } @else if (showError()) {\n            <!-- The failure replaces the body, so it spans the full row \u2014\n                 crammed into column one it reads as a value, not a state. -->\n            <tr>\n              <td [attr.colspan]=\"effectiveColumns().length + (reorderable() ? 1 : 0)\">\n                <ng-container *ngTemplateOutlet=\"errorStateTpl\"></ng-container>\n              </td>\n            </tr>\n          } @else {\n            <tr>\n              <td [attr.colspan]=\"effectiveColumns().length + (reorderable() ? 1 : 0)\">\n                <ng-content select=\"[empty-state]\">\n                  <ng-container *ngTemplateOutlet=\"defaultEmptyTpl\"></ng-container>\n                </ng-content>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n    </div>\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\n<!-- \u2500\u2500 ERROR 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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     A request that failed and came back with nothing is not an empty\n     collection, and must never borrow its words: \"nothing here yet\" is\n     a confident false statement about the operator's data, and they may\n     act on it. So this replaces the empty state outright, projected\n     [empty-state] included \u2014 a screen's own \"create your first client\"\n     copy is just as wrong here as the default.\n\n     It says nothing about *what* failed. `errorMsg` is `err.message`\n     from the HTTP layer, and a status line or an exception string tells\n     an operator nothing they can act on; it survives on the head chip's\n     `data-error` attribute, for whoever is reading the DOM. This carries\n     the two things that help: their data is intact, and the way to try\n     again.\n\n     role=\"alert\" goes on this div, never on the <tr> / <td> / <li> that\n     hosts it \u2014 a role on a row or cell takes the table's semantics down\n     with it. It fires on insertion, which is exactly when @if adds it. -->\n<ng-template #errorStateTpl>\n  <div class=\"tbl-empty tbl-empty--error\" role=\"alert\">\n    <i class=\"pi pi-exclamation-triangle tbl-empty__icon\" aria-hidden=\"true\"></i>\n    <p class=\"tbl-empty__title\">{{ 'common_error_load_failed' | translate }}</p>\n    <p class=\"tbl-empty__hint\">{{ 'common_error_load_failed_hint' | translate }}</p>\n    <button class=\"btn btn-sm tbl-empty__action\" type=\"button\" (click)=\"retry.emit()\">\n      <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n      {{ 'common_retry' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<!-- Header label, shared by the sortable and plain header cells so the\n     projection rules stay in one place. -->\n<ng-template #headerLabelTpl let-col=\"col\">\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</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0}.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{--tbl-cell-pad-block: 4px;padding-top:var(--tbl-cell-pad-block);padding-bottom:var(--tbl-cell-pad-block)}.tbl-wrap[data-density=comfortable] .tbl tbody td{--tbl-cell-pad-block: 16px;padding-top:var(--tbl-cell-pad-block);padding-bottom:var(--tbl-cell-pad-block)}.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)}.tbl-empty--error .tbl-empty__icon{color:var(--st-cancelled-fg)}.mrow--empty{padding:0}.mrow--skeleton{padding:12px var(--s-4)}@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}}.tbl th.tbl-drag-h,.tbl td.tbl-drag{width:28px;padding-inline:4px 0;text-align:center}.tbl td.tbl-drag{cursor:default}.tbl .tbl-drag__grip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:26px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-soft);cursor:grab;touch-action:none;transition:background var(--t-fast, .14s) var(--ease-out, ease-out),color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl .tbl-drag__grip:hover{background:var(--paper);color:var(--text)}.tbl .tbl-drag__grip:focus-visible{outline:2px solid var(--tenant, var(--rule));outline-offset:1px}.tbl .tbl-drag__grip:active{cursor:grabbing}.tbl .tbl-drag__grip i{font-size:12px}.tbl tbody tr.is-dragging>td{background:var(--paper);opacity:.55}.tbl tbody tr.is-drop-target>td{box-shadow:inset 0 2px 0 var(--tenant, var(--rule))}.tbl.tbl--fixed{table-layout:fixed}.mrow__disclosure{appearance:none;background:transparent;border:0;padding:0;margin:0;display:inline-grid;place-items:center;color:var(--text-mute);cursor:pointer;position:relative}.mrow__disclosure:after{content:\"\";position:absolute;top:50%;left:50%;width:var(--hit-touch);height:var(--hit-touch);transform:translate(-50%,-50%)}.mrow__disclosure:focus-visible{outline:2px solid color-mix(in srgb,var(--ink-active) 40%,transparent);outline-offset:2px;border-radius:var(--r-pill)}\n"] }]
+                    ], 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\" let-index=\"index\">\n  @if (bodyTemplate(col.id); as bodyTpl) {\n    <ng-container *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, col: col, index: index }\"></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<!-- .has-open-menu unclips the shell for the Densit\u00E9 / Colonnes menus,\n     which hang below .tbl-head. Row menus are fixed to the viewport\n     (ef-row-actions) and need no lift; counting them also left the shell\n     unclipped for good when a row went while its menu was open. -->\n<div class=\"tbl-wrap\" [class.has-open-menu]=\"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        <!-- A refresh that failed on top of rows already on screen keeps the\n             rows, so this chip is the only sign anything went wrong \u2014 and the\n             rows it sits above may now be stale. It has to say so, and say it\n             in the product's words: `errorMsg` is `err.message` from the HTTP\n             layer, and \"500 Internal Server Error\" tells an operator nothing\n             they can act on.\n\n             The raw string stays on `data-error`, where devtools can read it\n             and no reader ever meets it. `title` was the obvious place and is\n             the wrong one: it renders the exception in a tooltip, which is\n             precisely what this change exists to stop, and it is unreachable\n             on touch besides.\n\n             role=\"status\", not \"alert\": polite is right for a signal beside\n             rows that are still usable, and when the body is showing the\n             error state it already carries the alert \u2014 one failure must not\n             interrupt a screen-reader twice. -->\n        <span\n          role=\"status\"\n          [attr.data-error]=\"errorMsg()\"\n          style=\"color: var(--st-cancelled-fg); font-weight: 600;\"\n          >\u26A0 {{ 'common_error_refresh_failed' | translate }}</span\n        >\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\n      class=\"mlist\"\n      [attr.data-layout]=\"effectiveMobileLayout()\"\n      [attr.aria-busy]=\"loading() ? 'true' : null\"\n    >\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]=\"headIsControl()\"\n            [attr.role]=\"headIsControl() ? 'button' : null\"\n            [attr.tabindex]=\"headIsControl() ? 0 : null\"\n            [attr.aria-expanded]=\"!rowNavigable() && 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\" efOverflowTooltip efTooltip efTooltipPosition=\"top\">\n                  <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: pc, index: i }\"></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, index: i }\"></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, index: i }\"></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                @if (rowNavigable()) {\n                  <!-- The head opens the record, so expansion needs a control\n                       of its own. Same glyph, promoted from decoration to a\n                       button that carries the state it was already drawing. -->\n                  <button\n                    type=\"button\"\n                    class=\"mrow__disclosure\"\n                    [attr.aria-expanded]=\"isExpanded(row, i)\"\n                    [attr.aria-label]=\"(isExpanded(row, i) ? 'common_view_less' : 'common_view_more') | translate\"\n                    (click)=\"onDisclosureToggle(row, i, $event)\"\n                  >\n                    <i\n                      class=\"pi pi-chevron-down mrow__chevron\"\n                      [class.is-open]=\"isExpanded(row, i)\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </button>\n                } @else {\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              }\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, index: i }\"></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        <!-- No rows has three meanings and they must not share a screen:\n             still loading is a skeleton, the request failed is the error\n             state, finished-and-empty is the empty state. Saying \"nothing\n             here yet\" to someone whose data is still in flight \u2014 or whose\n             request just failed \u2014 is a lie the whole time it shows. -->\n        @if (showSkeleton()) {\n          @for (line of skeletonLines(); track line) {\n            <li class=\"mrow mrow--skeleton\">\n              <ef-skeleton variant=\"text\" [rows]=\"2\" />\n            </li>\n          }\n        } @else if (showError()) {\n          <li class=\"mrow mrow--empty\">\n            <ng-container *ngTemplateOutlet=\"errorStateTpl\"></ng-container>\n          </li>\n        } @else {\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      }\n    </ul>\n  } @else {\n    <!-- The table scrolls sideways inside its own box. Between 768px and\n         the table's natural width (about 900-1100px) the columns past the\n         edge were simply clipped by .tbl-wrap, with no way to reach them.\n         .tbl-wrap stays the clipping shell, so the head and the pager do\n         not scroll with the rows. Row menus are fixed to the viewport\n         (ef-row-actions), so this scroller never clips them. -->\n    <div class=\"tbl-scroll\">\n    <table class=\"tbl\" [class.tbl--fixed]=\"fixedLayout()\">\n      <thead>\n        <tr>\n          @if (reorderable()) {\n            <th class=\"tbl-drag-h\" aria-hidden=\"true\"></th>\n          }\n          @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n            <!-- A sortable header is a real <button> inside the <th>, not a\n                 click handler on the cell. The cell carries aria-sort so the\n                 current order is announced; the arrow stays decorative.\n                 Sorting was previously mouse-only and silent to assistive\n                 technology, on every list screen in the product. -->\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              [attr.aria-sort]=\"ariaSort(col)\"\n            >\n              @if (col.sortable) {\n                <button type=\"button\" class=\"tbl-sort\" (click)=\"onHeaderClick(col)\">\n                  <ng-container *ngTemplateOutlet=\"headerLabelTpl; context: { col: col }\"></ng-container>\n                  @if (sortIndicator(col)) {\n                    <span aria-hidden=\"true\" class=\"tbl-sort__arrow\">{{ sortIndicator(col) }}</span>\n                  }\n                </button>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"headerLabelTpl; context: { col: col }\"></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody [attr.aria-busy]=\"loading() ? 'true' : null\">\n        @for (row of rows(); track trackByRow($index, row); let i = $index) {\n          <tr\n            [class.is-row-clickable]=\"rowDoubleClickable()\"\n            [class.is-dragging]=\"dragFrom() === i\"\n            [class.is-drop-target]=\"dragFrom() !== null && dragFrom() !== i && dragTo() === i\"\n            [attr.tabindex]=\"rowDoubleClickable() ? 0 : null\"\n            [attr.role]=\"rowDoubleClickable() ? 'button' : null\"\n            (click)=\"onRowClick(row, $event)\"\n            (keydown.enter)=\"onRowKeydown(row, $event)\"\n          >\n            @if (reorderable()) {\n              <td class=\"tbl-drag\">\n                <!-- The row is draggable only by this handle, so a drag never\n                     starts from a cell the operator meant to click or select.\n                     Arrow keys move the row for anyone not using a pointer. -->\n                <button\n                  type=\"button\"\n                  class=\"tbl-drag__grip\"\n                  [attr.aria-label]=\"'common_reorder_row' | translate\"\n                  (pointerdown)=\"onDragPointerDown(i, $event)\"\n                  (pointermove)=\"onDragPointerMove($event)\"\n                  (pointerup)=\"onDragPointerUp()\"\n                  (pointercancel)=\"onDragPointerUp()\"\n                  (keydown)=\"onDragKeydown(i, $event)\"\n                >\n                  <i class=\"pi pi-ellipsis-v\" aria-hidden=\"true\"></i>\n                </button>\n              </td>\n            }\n            @for (col of effectiveColumns(); track trackByColumn($index, col); let colIdx = $index) {\n              <td efOverflowTooltip efTooltip efTooltipPosition=\"top\" [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, index: i }\"\n                  ></ng-container>\n                }\n                          </td>\n            }\n          </tr>\n        } @empty {\n          <!-- Placeholder rows keep the real columns, so the table that\n               arrives lands where the shimmer already was instead of\n               reflowing the page under the reader's eyes. -->\n          @if (showSkeleton()) {\n            @for (line of skeletonLines(); track line) {\n              <tr>\n                @if (reorderable()) {\n                  <td class=\"tbl-drag\"></td>\n                }\n                @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n                  <td [class]=\"cellAlignClass(col)\" [attr.data-col]=\"col.id\">\n                    <ef-skeleton variant=\"text\" [rows]=\"1\" />\n                  </td>\n                }\n              </tr>\n            }\n          } @else if (showError()) {\n            <!-- The failure replaces the body, so it spans the full row \u2014\n                 crammed into column one it reads as a value, not a state. -->\n            <tr>\n              <td [attr.colspan]=\"effectiveColumns().length + (reorderable() ? 1 : 0)\">\n                <ng-container *ngTemplateOutlet=\"errorStateTpl\"></ng-container>\n              </td>\n            </tr>\n          } @else {\n            <tr>\n              <td [attr.colspan]=\"effectiveColumns().length + (reorderable() ? 1 : 0)\">\n                <ng-content select=\"[empty-state]\">\n                  <ng-container *ngTemplateOutlet=\"defaultEmptyTpl\"></ng-container>\n                </ng-content>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n    </div>\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\n<!-- \u2500\u2500 ERROR 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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     A request that failed and came back with nothing is not an empty\n     collection, and must never borrow its words: \"nothing here yet\" is\n     a confident false statement about the operator's data, and they may\n     act on it. So this replaces the empty state outright, projected\n     [empty-state] included \u2014 a screen's own \"create your first client\"\n     copy is just as wrong here as the default.\n\n     It says nothing about *what* failed. `errorMsg` is `err.message`\n     from the HTTP layer, and a status line or an exception string tells\n     an operator nothing they can act on; it survives on the head chip's\n     `data-error` attribute, for whoever is reading the DOM. This carries\n     the two things that help: their data is intact, and the way to try\n     again.\n\n     role=\"alert\" goes on this div, never on the <tr> / <td> / <li> that\n     hosts it \u2014 a role on a row or cell takes the table's semantics down\n     with it. It fires on insertion, which is exactly when @if adds it. -->\n<ng-template #errorStateTpl>\n  <div class=\"tbl-empty tbl-empty--error\" role=\"alert\">\n    <i class=\"pi pi-exclamation-triangle tbl-empty__icon\" aria-hidden=\"true\"></i>\n    <p class=\"tbl-empty__title\">{{ 'common_error_load_failed' | translate }}</p>\n    <p class=\"tbl-empty__hint\">{{ 'common_error_load_failed_hint' | translate }}</p>\n    <button class=\"btn btn-sm tbl-empty__action\" type=\"button\" (click)=\"retry.emit()\">\n      <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n      {{ 'common_retry' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<!-- Header label, shared by the sortable and plain header cells so the\n     projection rules stay in one place. -->\n<ng-template #headerLabelTpl let-col=\"col\">\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</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0}.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{--tbl-cell-pad-block: 4px;padding-top:var(--tbl-cell-pad-block);padding-bottom:var(--tbl-cell-pad-block)}.tbl-wrap[data-density=comfortable] .tbl tbody td{--tbl-cell-pad-block: 16px;padding-top:var(--tbl-cell-pad-block);padding-bottom:var(--tbl-cell-pad-block)}.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)}.tbl-empty--error .tbl-empty__icon{color:var(--st-cancelled-fg)}.mrow--empty{padding:0}.mrow--skeleton{padding:12px var(--s-4)}@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}}.tbl th.tbl-drag-h,.tbl td.tbl-drag{width:28px;padding-inline:4px 0;text-align:center}.tbl td.tbl-drag{cursor:default}.tbl .tbl-drag__grip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:26px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-soft);cursor:grab;touch-action:none;transition:background var(--t-fast, .14s) var(--ease-out, ease-out),color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl .tbl-drag__grip:hover{background:var(--paper);color:var(--text)}.tbl .tbl-drag__grip:focus-visible{outline:2px solid var(--tenant, var(--rule));outline-offset:1px}.tbl .tbl-drag__grip:active{cursor:grabbing}.tbl .tbl-drag__grip i{font-size:12px}.tbl tbody tr.is-dragging>td{background:var(--paper);opacity:.55}.tbl tbody tr.is-drop-target>td{box-shadow:inset 0 2px 0 var(--tenant, var(--rule))}.tbl.tbl--fixed{table-layout:fixed}.mrow__disclosure{appearance:none;background:transparent;border:0;padding:0;margin:0;display:inline-grid;place-items:center;color:var(--text-mute);cursor:pointer;position:relative}.mrow__disclosure:after{content:\"\";position:absolute;top:50%;left:50%;width:var(--hit-touch);height:var(--hit-touch);transform:translate(-50%,-50%)}.mrow__disclosure:focus-visible{outline:2px solid color-mix(in srgb,var(--ink-active) 40%,transparent);outline-offset:2px;border-radius:var(--r-pill)}@media(pointer:coarse){.mrow__actions+.mrow__disclosure{margin-inline-start:calc((var(--hit-touch) - 11px) / 2 - var(--s-2))}}\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"] }], retry: [{ type: i0.Output, args: ["retry"] }], bodyTemplates: [{
                 type: ContentChildren,
                 args: [EfColumnTemplateDirective]