@elasticias/ui 1.0.27 → 1.0.29

package/fesm2022/elasticias-ui.mjs

@@ -4488,6 +4488,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * 2. **`tbl-head-info` / `tbl-head-actions` slots**: still projected
  *    so the consumer can render the count text + density / columns /
  *    view-toggle buttons next to the table header.
+ * 3. **`[loading]` is not optional.** Bind the screen's own loading
+ *    signal: without it the card can't tell "still fetching" from
+ *    "nothing to fetch" and greets a waiting user with the empty
+ *    state. While loading with no rows yet it shimmers `ef-skeleton`
+ *    rows (table and mobile list alike) and flags `aria-busy`.
+ * 4. **Bind `(retry)` wherever you bind `[errorMsg]`.** An empty result
+ *    set that came from a failed request renders the error state, not
+ *    the empty one, and its "try again" button is the way out. The card
+ *    doesn't know the query, so the screen re-runs it.
  *
  * ```html
  * <ef-data-card
@@ -4631,10 +4640,51 @@ class EfDataCardComponent {
     /** Currently active sort. Header click toggles asc / desc. */
     sort = input(undefined, ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
     /* ── State ──────────────────────────────────────────────────── */
+    /**
+     * First load and every refresh. While true with no rows yet, the body
+     * shimmers `ef-skeleton` placeholders instead of the empty state — a
+     * list that is still loading must never say "nothing here yet". A
+     * refresh that already has rows (paging, sorting, filtering) keeps
+     * them on screen rather than blanking the table; either way the row
+     * container is flagged `aria-busy`, as `ef-card` does.
+     */
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /** Empty string = no error. Non-empty triggers an error chip in tbl-head. */
+    /**
+     * Empty string = no error. Non-empty triggers the error chip in
+     * `tbl-head` and, when the request came back with nothing, the error
+     * state in the body.
+     *
+     * It is the *trigger*, not the copy: screens set it from
+     * `err?.message`, which is whatever the HTTP layer threw. The body
+     * state words itself from translated keys instead, so a failed list
+     * never shows an operator a status line or an exception string.
+     */
     errorMsg = input('', ...(ngDevMode ? [{ debugName: "errorMsg" }] : /* istanbul ignore next */ []));
     loadingKey = input('common_loading_msg', ...(ngDevMode ? [{ debugName: "loadingKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Placeholder rows drawn while the first load is in flight. The page
+     * size is what the operator is about to get, so it sets the height —
+     * clamped so a 100-per-page list doesn't shimmer a full screen of
+     * bars, and a 5-per-page one still reads as a list.
+     */
+    skeletonLines = computed(() => {
+        const count = Math.min(Math.max(this.pageSize() || 0, 3), 10);
+        return Array.from({ length: count }, (_, i) => i);
+    }, ...(ngDevMode ? [{ debugName: "skeletonLines" }] : /* istanbul ignore next */ []));
+    /** First load: nothing to show yet, so the rows are placeholders. */
+    showSkeleton = computed(() => this.loading() && this.rows().length === 0, ...(ngDevMode ? [{ debugName: "showSkeleton" }] : /* istanbul ignore next */ []));
+    /**
+     * The request failed and brought nothing back. Without this the body
+     * falls through to the empty state and tells the operator, calmly and
+     * in the product's own voice, that they have no clients — a false
+     * statement about their data that they may go on to act on.
+     *
+     * Third in the chain, after the skeleton and before the empty state:
+     * a retry that is already in flight shows progress, not the error it
+     * is busy clearing. Rows already on screen stay there and keep the
+     * head chip as the failure signal, the way a failed refresh should.
+     */
+    showError = computed(() => !this.loading() && !!this.errorMsg() && this.rows().length === 0, ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
     /* ── Row interactions ──────────────────────────────────────── */
     /**
      * When `true`, double-clicking anywhere on a `<tr>` emits the row
@@ -4729,6 +4779,13 @@ class EfDataCardComponent {
     exportRequest = output();
     /** Raised by the empty state's "clear search" action. */
     clearSearch = output();
+    /**
+     * Raised by the error state's "try again" button. The card knows the
+     * request failed but not what the request was, so the screen re-runs
+     * it — typically `(retry)="search()"` on a list screen. Unbound, the
+     * button is a dead control, so bind it wherever `[errorMsg]` is bound.
+     */
+    retry = output();
     /* ── Content children ──────────────────────────────────────── */
     bodyTemplates;
     headerTemplates;
@@ -5157,7 +5214,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", rowReorder: "rowReorder" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "ef-row-actions-toggle": "onRowActionsToggle($event)" } }, queries: [{ propertyName: "bodyTemplates", predicate: EfColumnTemplateDirective }, { propertyName: "headerTemplates", predicate: EfColumnHeaderTemplateDirective }], ngImport: i0, template: "<!-- One cell renderer, shared by the table, the mobile row and the mobile\n     detail. A new column type is added here once, not three times. -->\n<ng-template #cellTpl let-row let-col=\"col\" 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<div class=\"tbl-wrap\" [class.has-open-menu]=\"openMenuCount() > 0 || openTool() !== null\" [attr.data-density]=\"density()\">\n  <!-- \u2500\u2500 HEAD ROW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"tbl-head\">\n    <div class=\"count small\">\n      @if (loading()) {\n        <span>{{ loadingKey() | translate }}</span>\n      } @else if (errorMsg()) {\n        <span style=\"color: var(--st-cancelled-fg); font-weight: 600;\">\u26A0 {{ errorMsg() }}</span>\n      } @else {\n        <ng-content select=\"[tbl-head-info]\"></ng-content>\n      }\n    </div>\n    <div class=\"tbl-tools\">\n      <ng-content select=\"[tbl-head-actions]\"></ng-content>\n\n      @if (canExport()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [disabled]=\"exporting()\"\n            [attr.aria-busy]=\"exporting()\"\n            (click)=\"requestExport()\"\n          >\n            <i\n              class=\"pi\"\n              [class.pi-download]=\"!exporting()\"\n              [class.pi-spinner]=\"exporting()\"\n              [class.is-spinning]=\"exporting()\"\n              aria-hidden=\"true\"\n            ></i>\n            {{ (exporting() ? 'common_export_running' : 'common_export') | translate }}\n          </button>\n        </div>\n      }\n\n      @if (showDensityControl()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'density'\"\n            [attr.aria-expanded]=\"openTool() === 'density'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('density')\"\n          >\n            <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n            {{ 'common_density' | translate }}\n          </button>\n          @if (openTool() === 'density') {\n            <div class=\"tbl-tool__menu\" role=\"menu\">\n              @for (opt of densityOptions; track opt.value) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemradio\"\n                  [attr.aria-checked]=\"density() === opt.value\"\n                  [class.is-active]=\"density() === opt.value\"\n                  (click)=\"setDensity(opt.value)\"\n                >\n                  <i class=\"pi\" [ngClass]=\"opt.icon\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{ opt.labelKey | translate }}</span>\n                  @if (density() === opt.value) {\n                    <i class=\"pi pi-check tbl-tool__check\" aria-hidden=\"true\"></i>\n                  }\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @if (showColumnPicker()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'columns'\"\n            [attr.aria-expanded]=\"openTool() === 'columns'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('columns')\"\n          >\n            <i class=\"pi pi-th-large\" aria-hidden=\"true\"></i>\n            {{ 'common_columns' | translate }}\n          </button>\n          @if (openTool() === 'columns') {\n            <div class=\"tbl-tool__menu tbl-tool__menu--wide\" role=\"menu\">\n              @for (col of hideableColumns(); track col.id) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemcheckbox\"\n                  [attr.aria-checked]=\"!isColumnHidden(col.id)\"\n                  [class.is-active]=\"!isColumnHidden(col.id)\"\n                  (click)=\"toggleColumn(col.id)\"\n                >\n                  <i class=\"pi\" [class.pi-check]=\"!isColumnHidden(col.id)\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{\n                    col.headerKey ? (col.headerKey | translate) : (col.header || col.id)\n                  }}</span>\n                </button>\n              }\n              <div class=\"tbl-tool__sep\"></div>\n              <button type=\"button\" role=\"menuitem\" (click)=\"resetColumns()\">\n                <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n                <span class=\"tbl-tool__label\">{{ 'common_columns_reset' | translate }}</span>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 TABLE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (isMobile()) {\n    <!-- \u2500\u2500 MOBILE LIST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         A six-column table on a 390px screen either overflows or\n         squeezes every column to nothing, so the rows become a list.\n         Same columns, same cell renderers; each column just declares\n         (or is given) a role. Both shapes expand to the same detail \u2014\n         they differ only in how much they show collapsed. -->\n    <ul class=\"mlist\" [attr.data-layout]=\"effectiveMobileLayout()\">\n      @for (row of rows(); track trackByRow($index, row); let i = $index) {\n        <li class=\"mrow\" [class.is-open]=\"isExpanded(row, i)\">\n          <div\n            class=\"mrow__head\"\n            [class.is-tappable]=\"hasDetail()\"\n            [attr.role]=\"hasDetail() ? 'button' : null\"\n            [attr.tabindex]=\"hasDetail() ? 0 : null\"\n            [attr.aria-expanded]=\"hasDetail() ? isExpanded(row, i) : null\"\n            (click)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.enter)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.space)=\"onRowHeadActivate(row, i, $event)\"\n          >\n            <div class=\"mrow__lead\">\n              @if (primaryColumn(); as pc) {\n                <span class=\"mrow__primary\" 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                <!-- Says the row opens, and which way it is now. Decorative:\n                     the whole head is the control, and it carries the state. -->\n                <i\n                  class=\"pi pi-chevron-down mrow__chevron\"\n                  [class.is-open]=\"isExpanded(row, i)\"\n                  aria-hidden=\"true\"\n                ></i>\n              }\n            </div>\n          </div>\n\n          @if (visibleDetail(row, i).length) {\n            <dl class=\"mrow__detail\">\n              @for (col of visibleDetail(row, i); track col.id) {\n                <div class=\"mrow__field\">\n                  <dt>{{ $any(col).headerKey ? ($any(col).headerKey | translate) : $any(col).header }}</dt>\n                  <dd [class]=\"cellAlignClass($any(col))\">\n                    <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col, 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        <li class=\"mrow mrow--empty\">\n          <ng-content select=\"[empty-state-mobile]\">\n            <ng-container *ngTemplateOutlet=\"defaultEmptyTpl\"></ng-container>\n          </ng-content>\n        </li>\n      }\n    </ul>\n  } @else {\n    <table class=\"tbl\" [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>\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            (dblclick)=\"onRowDoubleClick(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          <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      </tbody>\n    </table>\n  }\n\n  <!-- \u2500\u2500 PAGER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <!-- Paging controls for an empty result set are chrome with nothing to\n       page, so they stay out of the way until there is something to move\n       through. -->\n  @if (!hidePager() && rows().length > 0) {\n    <ef-pager\n      [pageNumber]=\"pageNumber()\"\n      [pageSize]=\"pageSize()\"\n      [totalCount]=\"totalCount()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      (pageChange)=\"pageChange.emit($event)\"\n      (pageSizeChange)=\"pageSizeChange.emit($event)\"\n    />\n  }\n</div>\n\n<!-- \u2500\u2500 DEFAULT EMPTY STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Rendered when a screen projects nothing into [empty-state] /\n     [empty-state-mobile]. It words itself from `searchTerm`, because\n     \"nothing matched what you typed\" and \"there is nothing here yet\"\n     are different situations needing different ways out. -->\n<ng-template #defaultEmptyTpl>\n  <div class=\"tbl-empty\">\n    <i\n      class=\"pi tbl-empty__icon\"\n      [class.pi-search]=\"!!searchTerm()\"\n      [class.pi-inbox]=\"!searchTerm()\"\n      aria-hidden=\"true\"\n    ></i>\n\n    @if (searchTerm()) {\n      <p class=\"tbl-empty__title\">\n        {{ 'common_empty_no_results' | translate: { term: searchTerm() } }}\n      </p>\n      <p class=\"tbl-empty__hint\">{{ 'common_empty_no_results_hint' | translate }}</p>\n      <button class=\"btn btn-sm tbl-empty__action\" type=\"button\" (click)=\"clearSearch.emit()\">\n        <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n        {{ 'common_empty_clear_filters' | translate }}\n      </button>\n    } @else {\n      <p class=\"tbl-empty__title\">{{ 'common_empty_none_yet' | translate }}</p>\n      <p class=\"tbl-empty__hint\">{{ 'common_empty_none_yet_hint' | translate }}</p>\n    }\n  </div>\n</ng-template>\n\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\";.tbl thead th.is-sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl thead th.is-sortable:hover{color:var(--text)}.tbl tbody tr.is-row-clickable{cursor:pointer}.tbl-tools{display:flex;gap:6px;align-items:center}.tbl-tool{position:relative}.tbl-tool>.btn.open{color:var(--text);background:var(--paper)}.tbl-tool__menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:40;min-width:212px;max-height:340px;overflow-y:auto;padding:6px;display:grid;gap:1px;background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--shadow-3);animation:row-actions-menu-in var(--t-base) var(--ease-spring)}.tbl-tool__menu--wide{min-width:248px}.tbl-tool__menu button{appearance:none;background:transparent;border:0;width:100%;text-align:start;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out)}.tbl-tool__menu button:hover,.tbl-tool__menu button:focus-visible{background:var(--paper);outline:0}.tbl-tool__menu button>.pi{width:16px;flex:none;font-size:14px;color:var(--muted)}.tbl-tool__menu button.is-active>.pi{color:var(--module, var(--text))}.tbl-tool__label{flex:1 1 auto;min-width:0}.tbl-tool__check{color:var(--module, var(--text))}.tbl-tool__sep{margin:5px 2px;border-top:1px solid var(--rule)}.tbl-wrap[data-density=compact] .tbl tbody td{padding-top:4px;padding-bottom:4px}.tbl-wrap[data-density=comfortable] .tbl tbody td{padding-top:16px;padding-bottom:16px}.mlist{list-style:none;margin:0;padding:0;display:grid}.mrow{border-top:1px solid var(--rule)}.mrow:first-child{border-top:0}.mrow__head{display:flex;align-items:flex-start;gap:var(--s-3);padding:12px var(--s-4);min-height:var(--hit-touch)}.mrow__head.is-tappable{cursor:pointer}.mrow__head.is-tappable:active{background:var(--paper)}.mrow__lead{flex:1;min-width:0;display:grid;gap:2px}.mrow__primary{font-weight:700;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrow__secondary{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:12.5px;color:var(--text-mute);min-width:0}.mrow__secondary .mrow__sec-part+.mrow__sec-part:before{content:\"\\b7\";margin-inline-end:6px;color:var(--text-soft)}.mrow__trail{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);flex-shrink:0;min-height:20px}.mrow__actions{display:inline-flex}.mrow__detail{margin:0;padding:0 var(--s-4) 12px;display:grid;gap:1px}.mrow__field{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding:7px 0;border-top:1px solid var(--rule-soft)}.mrow__field dt{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute);flex-shrink:0}.mrow__field dd{margin:0;font-size:13.5px;color:var(--text);text-align:end;min-width:0;overflow-wrap:anywhere}.mrow__more{appearance:none;width:100%;background:transparent;border:0;border-top:1px solid var(--rule-soft);padding:10px;font:inherit;font-size:13px;font-weight:600;color:var(--tenant-500);cursor:pointer}.mlist[data-layout=card]{gap:var(--s-3);padding:var(--s-3) var(--s-3) 0}.mlist[data-layout=card] .mrow{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper-alt);overflow:hidden}.mlist[data-layout=card] .mrow__head{border-bottom:1px solid var(--rule)}.mrow__chevron{font-size:11px;color:var(--text-soft);transition:transform var(--t-fast) var(--ease-out);flex-shrink:0}.mrow__chevron.is-open{transform:rotate(180deg);color:var(--text-mute)}.mrow__head.is-tappable:focus-visible{outline:2px solid var(--tenant-400);outline-offset:-2px}.mrow__more{display:flex;align-items:center;justify-content:center;gap:6px}.tbl-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);padding:var(--s-9) var(--s-4);text-align:center}.tbl-empty__icon{font-size:28px;line-height:1;color:var(--ink-400);margin-block-end:var(--s-1)}.tbl-empty__title{margin:0;font-size:15px;font-weight:600;color:var(--text);max-inline-size:46ch;overflow-wrap:break-word}.tbl-empty__hint{margin:0;font-size:13px;color:var(--ink-600);max-inline-size:52ch;text-wrap:pretty}.tbl-empty__action{margin-block-start:var(--s-3);min-block-size:var(--hit-base)}.mrow--empty{padding:0}@media(max-width:767px){.tbl-empty{padding:var(--s-7) var(--s-4)}.tbl-empty__action{min-block-size:var(--hit-touch)}}.pi.is-spinning{animation:ef-export-spin .9s linear infinite}@keyframes ef-export-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.pi.is-spinning{animation:none}}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfPagerComponent, selector: "ef-pager", inputs: ["pageNumber", "pageSize", "totalCount", "pageSizeOptions", "linesPerPageLabelKey", "ofLabelKey", "prevLabelKey", "nextLabelKey", "hideSize"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: EfStatusChipComponent, selector: "ef-status-chip", inputs: ["referenceKey", "code", "color", "label", "labelKey", "hideDot", "showCode"] }, { kind: "component", type: EfRowActionsComponent, selector: "ef-row-actions", inputs: ["items", "context", "triggerIcon", "triggerAriaKey", "disabled", "menuLeft"], outputs: ["opened", "closed"] }, { kind: "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()", "ef-row-actions-toggle": "onRowActionsToggle($event)" } }, queries: [{ propertyName: "bodyTemplates", predicate: EfColumnTemplateDirective }, { propertyName: "headerTemplates", predicate: EfColumnHeaderTemplateDirective }], ngImport: i0, template: "<!-- One cell renderer, shared by the table, the mobile row and the mobile\n     detail. A new column type is added here once, not three times. -->\n<ng-template #cellTpl let-row let-col=\"col\" 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<div class=\"tbl-wrap\" [class.has-open-menu]=\"openMenuCount() > 0 || openTool() !== null\" [attr.data-density]=\"density()\">\n  <!-- \u2500\u2500 HEAD ROW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"tbl-head\">\n    <div class=\"count small\">\n      @if (loading()) {\n        <span>{{ loadingKey() | translate }}</span>\n      } @else if (errorMsg()) {\n        <span style=\"color: var(--st-cancelled-fg); font-weight: 600;\">\u26A0 {{ errorMsg() }}</span>\n      } @else {\n        <ng-content select=\"[tbl-head-info]\"></ng-content>\n      }\n    </div>\n    <div class=\"tbl-tools\">\n      <ng-content select=\"[tbl-head-actions]\"></ng-content>\n\n      @if (canExport()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [disabled]=\"exporting()\"\n            [attr.aria-busy]=\"exporting()\"\n            (click)=\"requestExport()\"\n          >\n            <i\n              class=\"pi\"\n              [class.pi-download]=\"!exporting()\"\n              [class.pi-spinner]=\"exporting()\"\n              [class.is-spinning]=\"exporting()\"\n              aria-hidden=\"true\"\n            ></i>\n            {{ (exporting() ? 'common_export_running' : 'common_export') | translate }}\n          </button>\n        </div>\n      }\n\n      @if (showDensityControl()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'density'\"\n            [attr.aria-expanded]=\"openTool() === 'density'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('density')\"\n          >\n            <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n            {{ 'common_density' | translate }}\n          </button>\n          @if (openTool() === 'density') {\n            <div class=\"tbl-tool__menu\" role=\"menu\">\n              @for (opt of densityOptions; track opt.value) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemradio\"\n                  [attr.aria-checked]=\"density() === opt.value\"\n                  [class.is-active]=\"density() === opt.value\"\n                  (click)=\"setDensity(opt.value)\"\n                >\n                  <i class=\"pi\" [ngClass]=\"opt.icon\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{ opt.labelKey | translate }}</span>\n                  @if (density() === opt.value) {\n                    <i class=\"pi pi-check tbl-tool__check\" aria-hidden=\"true\"></i>\n                  }\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @if (showColumnPicker()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'columns'\"\n            [attr.aria-expanded]=\"openTool() === 'columns'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('columns')\"\n          >\n            <i class=\"pi pi-th-large\" aria-hidden=\"true\"></i>\n            {{ 'common_columns' | translate }}\n          </button>\n          @if (openTool() === 'columns') {\n            <div class=\"tbl-tool__menu tbl-tool__menu--wide\" role=\"menu\">\n              @for (col of hideableColumns(); track col.id) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemcheckbox\"\n                  [attr.aria-checked]=\"!isColumnHidden(col.id)\"\n                  [class.is-active]=\"!isColumnHidden(col.id)\"\n                  (click)=\"toggleColumn(col.id)\"\n                >\n                  <i class=\"pi\" [class.pi-check]=\"!isColumnHidden(col.id)\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{\n                    col.headerKey ? (col.headerKey | translate) : (col.header || col.id)\n                  }}</span>\n                </button>\n              }\n              <div class=\"tbl-tool__sep\"></div>\n              <button type=\"button\" role=\"menuitem\" (click)=\"resetColumns()\">\n                <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n                <span class=\"tbl-tool__label\">{{ 'common_columns_reset' | translate }}</span>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 TABLE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (isMobile()) {\n    <!-- \u2500\u2500 MOBILE LIST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         A six-column table on a 390px screen either overflows or\n         squeezes every column to nothing, so the rows become a list.\n         Same columns, same cell renderers; each column just declares\n         (or is given) a role. Both shapes expand to the same detail \u2014\n         they differ only in how much they show collapsed. -->\n    <ul\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]=\"hasDetail()\"\n            [attr.role]=\"hasDetail() ? 'button' : null\"\n            [attr.tabindex]=\"hasDetail() ? 0 : null\"\n            [attr.aria-expanded]=\"hasDetail() ? isExpanded(row, i) : null\"\n            (click)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.enter)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.space)=\"onRowHeadActivate(row, i, $event)\"\n          >\n            <div class=\"mrow__lead\">\n              @if (primaryColumn(); as pc) {\n                <span class=\"mrow__primary\" 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                <!-- Says the row opens, and which way it is now. Decorative:\n                     the whole head is the control, and it carries the state. -->\n                <i\n                  class=\"pi pi-chevron-down mrow__chevron\"\n                  [class.is-open]=\"isExpanded(row, i)\"\n                  aria-hidden=\"true\"\n                ></i>\n              }\n            </div>\n          </div>\n\n          @if (visibleDetail(row, i).length) {\n            <dl class=\"mrow__detail\">\n              @for (col of visibleDetail(row, i); track col.id) {\n                <div class=\"mrow__field\">\n                  <dt>{{ $any(col).headerKey ? ($any(col).headerKey | translate) : $any(col).header }}</dt>\n                  <dd [class]=\"cellAlignClass($any(col))\">\n                    <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col, 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    <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            (dblclick)=\"onRowDoubleClick(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  }\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; the head chip still carries it\n     for anyone looking. This carries the two things that help: their\n     data is intact, and the way to try 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\";.tbl thead th.is-sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl thead th.is-sortable:hover{color:var(--text)}.tbl tbody tr.is-row-clickable{cursor:pointer}.tbl-tools{display:flex;gap:6px;align-items:center}.tbl-tool{position:relative}.tbl-tool>.btn.open{color:var(--text);background:var(--paper)}.tbl-tool__menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:40;min-width:212px;max-height:340px;overflow-y:auto;padding:6px;display:grid;gap:1px;background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--shadow-3);animation:row-actions-menu-in var(--t-base) var(--ease-spring)}.tbl-tool__menu--wide{min-width:248px}.tbl-tool__menu button{appearance:none;background:transparent;border:0;width:100%;text-align:start;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out)}.tbl-tool__menu button:hover,.tbl-tool__menu button:focus-visible{background:var(--paper);outline:0}.tbl-tool__menu button>.pi{width:16px;flex:none;font-size:14px;color:var(--muted)}.tbl-tool__menu button.is-active>.pi{color:var(--module, var(--text))}.tbl-tool__label{flex:1 1 auto;min-width:0}.tbl-tool__check{color:var(--module, var(--text))}.tbl-tool__sep{margin:5px 2px;border-top:1px solid var(--rule)}.tbl-wrap[data-density=compact] .tbl tbody td{padding-top:4px;padding-bottom:4px}.tbl-wrap[data-density=comfortable] .tbl tbody td{padding-top:16px;padding-bottom:16px}.mlist{list-style:none;margin:0;padding:0;display:grid}.mrow{border-top:1px solid var(--rule)}.mrow:first-child{border-top:0}.mrow__head{display:flex;align-items:flex-start;gap:var(--s-3);padding:12px var(--s-4);min-height:var(--hit-touch)}.mrow__head.is-tappable{cursor:pointer}.mrow__head.is-tappable:active{background:var(--paper)}.mrow__lead{flex:1;min-width:0;display:grid;gap:2px}.mrow__primary{font-weight:700;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrow__secondary{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:12.5px;color:var(--text-mute);min-width:0}.mrow__secondary .mrow__sec-part+.mrow__sec-part:before{content:\"\\b7\";margin-inline-end:6px;color:var(--text-soft)}.mrow__trail{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);flex-shrink:0;min-height:20px}.mrow__actions{display:inline-flex}.mrow__detail{margin:0;padding:0 var(--s-4) 12px;display:grid;gap:1px}.mrow__field{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding:7px 0;border-top:1px solid var(--rule-soft)}.mrow__field dt{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute);flex-shrink:0}.mrow__field dd{margin:0;font-size:13.5px;color:var(--text);text-align:end;min-width:0;overflow-wrap:anywhere}.mrow__more{appearance:none;width:100%;background:transparent;border:0;border-top:1px solid var(--rule-soft);padding:10px;font:inherit;font-size:13px;font-weight:600;color:var(--tenant-500);cursor:pointer}.mlist[data-layout=card]{gap:var(--s-3);padding:var(--s-3) var(--s-3) 0}.mlist[data-layout=card] .mrow{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper-alt);overflow:hidden}.mlist[data-layout=card] .mrow__head{border-bottom:1px solid var(--rule)}.mrow__chevron{font-size:11px;color:var(--text-soft);transition:transform var(--t-fast) var(--ease-out);flex-shrink:0}.mrow__chevron.is-open{transform:rotate(180deg);color:var(--text-mute)}.mrow__head.is-tappable:focus-visible{outline:2px solid var(--tenant-400);outline-offset:-2px}.mrow__more{display:flex;align-items:center;justify-content:center;gap:6px}.tbl-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);padding:var(--s-9) var(--s-4);text-align:center}.tbl-empty__icon{font-size:28px;line-height:1;color:var(--ink-400);margin-block-end:var(--s-1)}.tbl-empty__title{margin:0;font-size:15px;font-weight:600;color:var(--text);max-inline-size:46ch;overflow-wrap:break-word}.tbl-empty__hint{margin:0;font-size:13px;color:var(--ink-600);max-inline-size:52ch;text-wrap:pretty}.tbl-empty__action{margin-block-start:var(--s-3);min-block-size:var(--hit-base)}.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}\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDataCardComponent, decorators: [{
             type: Component,
@@ -5166,11 +5223,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         TranslateModule,
                         EfPagerComponent,
                         EfStatusChipComponent,
+                        EfSkeletonComponent,
                         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<div class=\"tbl-wrap\" [class.has-open-menu]=\"openMenuCount() > 0 || openTool() !== null\" [attr.data-density]=\"density()\">\n  <!-- \u2500\u2500 HEAD ROW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"tbl-head\">\n    <div class=\"count small\">\n      @if (loading()) {\n        <span>{{ loadingKey() | translate }}</span>\n      } @else if (errorMsg()) {\n        <span style=\"color: var(--st-cancelled-fg); font-weight: 600;\">\u26A0 {{ errorMsg() }}</span>\n      } @else {\n        <ng-content select=\"[tbl-head-info]\"></ng-content>\n      }\n    </div>\n    <div class=\"tbl-tools\">\n      <ng-content select=\"[tbl-head-actions]\"></ng-content>\n\n      @if (canExport()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [disabled]=\"exporting()\"\n            [attr.aria-busy]=\"exporting()\"\n            (click)=\"requestExport()\"\n          >\n            <i\n              class=\"pi\"\n              [class.pi-download]=\"!exporting()\"\n              [class.pi-spinner]=\"exporting()\"\n              [class.is-spinning]=\"exporting()\"\n              aria-hidden=\"true\"\n            ></i>\n            {{ (exporting() ? 'common_export_running' : 'common_export') | translate }}\n          </button>\n        </div>\n      }\n\n      @if (showDensityControl()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'density'\"\n            [attr.aria-expanded]=\"openTool() === 'density'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('density')\"\n          >\n            <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n            {{ 'common_density' | translate }}\n          </button>\n          @if (openTool() === 'density') {\n            <div class=\"tbl-tool__menu\" role=\"menu\">\n              @for (opt of densityOptions; track opt.value) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemradio\"\n                  [attr.aria-checked]=\"density() === opt.value\"\n                  [class.is-active]=\"density() === opt.value\"\n                  (click)=\"setDensity(opt.value)\"\n                >\n                  <i class=\"pi\" [ngClass]=\"opt.icon\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{ opt.labelKey | translate }}</span>\n                  @if (density() === opt.value) {\n                    <i class=\"pi pi-check tbl-tool__check\" aria-hidden=\"true\"></i>\n                  }\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @if (showColumnPicker()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'columns'\"\n            [attr.aria-expanded]=\"openTool() === 'columns'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('columns')\"\n          >\n            <i class=\"pi pi-th-large\" aria-hidden=\"true\"></i>\n            {{ 'common_columns' | translate }}\n          </button>\n          @if (openTool() === 'columns') {\n            <div class=\"tbl-tool__menu tbl-tool__menu--wide\" role=\"menu\">\n              @for (col of hideableColumns(); track col.id) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemcheckbox\"\n                  [attr.aria-checked]=\"!isColumnHidden(col.id)\"\n                  [class.is-active]=\"!isColumnHidden(col.id)\"\n                  (click)=\"toggleColumn(col.id)\"\n                >\n                  <i class=\"pi\" [class.pi-check]=\"!isColumnHidden(col.id)\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{\n                    col.headerKey ? (col.headerKey | translate) : (col.header || col.id)\n                  }}</span>\n                </button>\n              }\n              <div class=\"tbl-tool__sep\"></div>\n              <button type=\"button\" role=\"menuitem\" (click)=\"resetColumns()\">\n                <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n                <span class=\"tbl-tool__label\">{{ 'common_columns_reset' | translate }}</span>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 TABLE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (isMobile()) {\n    <!-- \u2500\u2500 MOBILE LIST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         A six-column table on a 390px screen either overflows or\n         squeezes every column to nothing, so the rows become a list.\n         Same columns, same cell renderers; each column just declares\n         (or is given) a role. Both shapes expand to the same detail \u2014\n         they differ only in how much they show collapsed. -->\n    <ul class=\"mlist\" [attr.data-layout]=\"effectiveMobileLayout()\">\n      @for (row of rows(); track trackByRow($index, row); let i = $index) {\n        <li class=\"mrow\" [class.is-open]=\"isExpanded(row, i)\">\n          <div\n            class=\"mrow__head\"\n            [class.is-tappable]=\"hasDetail()\"\n            [attr.role]=\"hasDetail() ? 'button' : null\"\n            [attr.tabindex]=\"hasDetail() ? 0 : null\"\n            [attr.aria-expanded]=\"hasDetail() ? isExpanded(row, i) : null\"\n            (click)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.enter)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.space)=\"onRowHeadActivate(row, i, $event)\"\n          >\n            <div class=\"mrow__lead\">\n              @if (primaryColumn(); as pc) {\n                <span class=\"mrow__primary\" 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                <!-- Says the row opens, and which way it is now. Decorative:\n                     the whole head is the control, and it carries the state. -->\n                <i\n                  class=\"pi pi-chevron-down mrow__chevron\"\n                  [class.is-open]=\"isExpanded(row, i)\"\n                  aria-hidden=\"true\"\n                ></i>\n              }\n            </div>\n          </div>\n\n          @if (visibleDetail(row, i).length) {\n            <dl class=\"mrow__detail\">\n              @for (col of visibleDetail(row, i); track col.id) {\n                <div class=\"mrow__field\">\n                  <dt>{{ $any(col).headerKey ? ($any(col).headerKey | translate) : $any(col).header }}</dt>\n                  <dd [class]=\"cellAlignClass($any(col))\">\n                    <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col, 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        <li class=\"mrow mrow--empty\">\n          <ng-content select=\"[empty-state-mobile]\">\n            <ng-container *ngTemplateOutlet=\"defaultEmptyTpl\"></ng-container>\n          </ng-content>\n        </li>\n      }\n    </ul>\n  } @else {\n    <table class=\"tbl\" [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>\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            (dblclick)=\"onRowDoubleClick(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          <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      </tbody>\n    </table>\n  }\n\n  <!-- \u2500\u2500 PAGER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <!-- Paging controls for an empty result set are chrome with nothing to\n       page, so they stay out of the way until there is something to move\n       through. -->\n  @if (!hidePager() && rows().length > 0) {\n    <ef-pager\n      [pageNumber]=\"pageNumber()\"\n      [pageSize]=\"pageSize()\"\n      [totalCount]=\"totalCount()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      (pageChange)=\"pageChange.emit($event)\"\n      (pageSizeChange)=\"pageSizeChange.emit($event)\"\n    />\n  }\n</div>\n\n<!-- \u2500\u2500 DEFAULT EMPTY STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Rendered when a screen projects nothing into [empty-state] /\n     [empty-state-mobile]. It words itself from `searchTerm`, because\n     \"nothing matched what you typed\" and \"there is nothing here yet\"\n     are different situations needing different ways out. -->\n<ng-template #defaultEmptyTpl>\n  <div class=\"tbl-empty\">\n    <i\n      class=\"pi tbl-empty__icon\"\n      [class.pi-search]=\"!!searchTerm()\"\n      [class.pi-inbox]=\"!searchTerm()\"\n      aria-hidden=\"true\"\n    ></i>\n\n    @if (searchTerm()) {\n      <p class=\"tbl-empty__title\">\n        {{ 'common_empty_no_results' | translate: { term: searchTerm() } }}\n      </p>\n      <p class=\"tbl-empty__hint\">{{ 'common_empty_no_results_hint' | translate }}</p>\n      <button class=\"btn btn-sm tbl-empty__action\" type=\"button\" (click)=\"clearSearch.emit()\">\n        <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n        {{ 'common_empty_clear_filters' | translate }}\n      </button>\n    } @else {\n      <p class=\"tbl-empty__title\">{{ 'common_empty_none_yet' | translate }}</p>\n      <p class=\"tbl-empty__hint\">{{ 'common_empty_none_yet_hint' | translate }}</p>\n    }\n  </div>\n</ng-template>\n\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\";.tbl thead th.is-sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl thead th.is-sortable:hover{color:var(--text)}.tbl tbody tr.is-row-clickable{cursor:pointer}.tbl-tools{display:flex;gap:6px;align-items:center}.tbl-tool{position:relative}.tbl-tool>.btn.open{color:var(--text);background:var(--paper)}.tbl-tool__menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:40;min-width:212px;max-height:340px;overflow-y:auto;padding:6px;display:grid;gap:1px;background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--shadow-3);animation:row-actions-menu-in var(--t-base) var(--ease-spring)}.tbl-tool__menu--wide{min-width:248px}.tbl-tool__menu button{appearance:none;background:transparent;border:0;width:100%;text-align:start;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out)}.tbl-tool__menu button:hover,.tbl-tool__menu button:focus-visible{background:var(--paper);outline:0}.tbl-tool__menu button>.pi{width:16px;flex:none;font-size:14px;color:var(--muted)}.tbl-tool__menu button.is-active>.pi{color:var(--module, var(--text))}.tbl-tool__label{flex:1 1 auto;min-width:0}.tbl-tool__check{color:var(--module, var(--text))}.tbl-tool__sep{margin:5px 2px;border-top:1px solid var(--rule)}.tbl-wrap[data-density=compact] .tbl tbody td{padding-top:4px;padding-bottom:4px}.tbl-wrap[data-density=comfortable] .tbl tbody td{padding-top:16px;padding-bottom:16px}.mlist{list-style:none;margin:0;padding:0;display:grid}.mrow{border-top:1px solid var(--rule)}.mrow:first-child{border-top:0}.mrow__head{display:flex;align-items:flex-start;gap:var(--s-3);padding:12px var(--s-4);min-height:var(--hit-touch)}.mrow__head.is-tappable{cursor:pointer}.mrow__head.is-tappable:active{background:var(--paper)}.mrow__lead{flex:1;min-width:0;display:grid;gap:2px}.mrow__primary{font-weight:700;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrow__secondary{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:12.5px;color:var(--text-mute);min-width:0}.mrow__secondary .mrow__sec-part+.mrow__sec-part:before{content:\"\\b7\";margin-inline-end:6px;color:var(--text-soft)}.mrow__trail{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);flex-shrink:0;min-height:20px}.mrow__actions{display:inline-flex}.mrow__detail{margin:0;padding:0 var(--s-4) 12px;display:grid;gap:1px}.mrow__field{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding:7px 0;border-top:1px solid var(--rule-soft)}.mrow__field dt{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute);flex-shrink:0}.mrow__field dd{margin:0;font-size:13.5px;color:var(--text);text-align:end;min-width:0;overflow-wrap:anywhere}.mrow__more{appearance:none;width:100%;background:transparent;border:0;border-top:1px solid var(--rule-soft);padding:10px;font:inherit;font-size:13px;font-weight:600;color:var(--tenant-500);cursor:pointer}.mlist[data-layout=card]{gap:var(--s-3);padding:var(--s-3) var(--s-3) 0}.mlist[data-layout=card] .mrow{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper-alt);overflow:hidden}.mlist[data-layout=card] .mrow__head{border-bottom:1px solid var(--rule)}.mrow__chevron{font-size:11px;color:var(--text-soft);transition:transform var(--t-fast) var(--ease-out);flex-shrink:0}.mrow__chevron.is-open{transform:rotate(180deg);color:var(--text-mute)}.mrow__head.is-tappable:focus-visible{outline:2px solid var(--tenant-400);outline-offset:-2px}.mrow__more{display:flex;align-items:center;justify-content:center;gap:6px}.tbl-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);padding:var(--s-9) var(--s-4);text-align:center}.tbl-empty__icon{font-size:28px;line-height:1;color:var(--ink-400);margin-block-end:var(--s-1)}.tbl-empty__title{margin:0;font-size:15px;font-weight:600;color:var(--text);max-inline-size:46ch;overflow-wrap:break-word}.tbl-empty__hint{margin:0;font-size:13px;color:var(--ink-600);max-inline-size:52ch;text-wrap:pretty}.tbl-empty__action{margin-block-start:var(--s-3);min-block-size:var(--hit-base)}.mrow--empty{padding:0}@media(max-width:767px){.tbl-empty{padding:var(--s-7) var(--s-4)}.tbl-empty__action{min-block-size:var(--hit-touch)}}.pi.is-spinning{animation:ef-export-spin .9s linear infinite}@keyframes ef-export-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.pi.is-spinning{animation:none}}.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}\n"] }]
-        }], propDecorators: { mobileLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileLayout", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], trackByField: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByField", required: false }] }], pageNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageNumber", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], totalCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalCount", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], hidePager: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePager", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], loadingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingKey", required: false }] }], rowDoubleClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDoubleClickable", required: false }] }], hasActionsColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActionsColumn", required: false }] }], rowActionsContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActionsContext", required: false }] }], showViewAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showViewAction", required: false }] }], showEditAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEditAction", required: false }] }], showDuplicateAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDuplicateAction", required: false }] }], showDeleteAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDeleteAction", required: false }] }], showDensityControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDensityControl", required: false }] }], showColumnPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnPicker", required: false }] }], showExportControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportControl", required: false }] }], exporting: [{ type: i0.Input, args: [{ isSignal: true, alias: "exporting", required: false }] }], screenContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "screenContext", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], tableKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableKey", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], rowAction: [{ type: i0.Output, args: ["rowAction"] }], exportRequest: [{ type: i0.Output, args: ["exportRequest"] }], clearSearch: [{ type: i0.Output, args: ["clearSearch"] }], bodyTemplates: [{
+                    ], 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<div class=\"tbl-wrap\" [class.has-open-menu]=\"openMenuCount() > 0 || openTool() !== null\" [attr.data-density]=\"density()\">\n  <!-- \u2500\u2500 HEAD ROW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"tbl-head\">\n    <div class=\"count small\">\n      @if (loading()) {\n        <span>{{ loadingKey() | translate }}</span>\n      } @else if (errorMsg()) {\n        <span style=\"color: var(--st-cancelled-fg); font-weight: 600;\">\u26A0 {{ errorMsg() }}</span>\n      } @else {\n        <ng-content select=\"[tbl-head-info]\"></ng-content>\n      }\n    </div>\n    <div class=\"tbl-tools\">\n      <ng-content select=\"[tbl-head-actions]\"></ng-content>\n\n      @if (canExport()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [disabled]=\"exporting()\"\n            [attr.aria-busy]=\"exporting()\"\n            (click)=\"requestExport()\"\n          >\n            <i\n              class=\"pi\"\n              [class.pi-download]=\"!exporting()\"\n              [class.pi-spinner]=\"exporting()\"\n              [class.is-spinning]=\"exporting()\"\n              aria-hidden=\"true\"\n            ></i>\n            {{ (exporting() ? 'common_export_running' : 'common_export') | translate }}\n          </button>\n        </div>\n      }\n\n      @if (showDensityControl()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'density'\"\n            [attr.aria-expanded]=\"openTool() === 'density'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('density')\"\n          >\n            <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n            {{ 'common_density' | translate }}\n          </button>\n          @if (openTool() === 'density') {\n            <div class=\"tbl-tool__menu\" role=\"menu\">\n              @for (opt of densityOptions; track opt.value) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemradio\"\n                  [attr.aria-checked]=\"density() === opt.value\"\n                  [class.is-active]=\"density() === opt.value\"\n                  (click)=\"setDensity(opt.value)\"\n                >\n                  <i class=\"pi\" [ngClass]=\"opt.icon\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{ opt.labelKey | translate }}</span>\n                  @if (density() === opt.value) {\n                    <i class=\"pi pi-check tbl-tool__check\" aria-hidden=\"true\"></i>\n                  }\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @if (showColumnPicker()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'columns'\"\n            [attr.aria-expanded]=\"openTool() === 'columns'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('columns')\"\n          >\n            <i class=\"pi pi-th-large\" aria-hidden=\"true\"></i>\n            {{ 'common_columns' | translate }}\n          </button>\n          @if (openTool() === 'columns') {\n            <div class=\"tbl-tool__menu tbl-tool__menu--wide\" role=\"menu\">\n              @for (col of hideableColumns(); track col.id) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemcheckbox\"\n                  [attr.aria-checked]=\"!isColumnHidden(col.id)\"\n                  [class.is-active]=\"!isColumnHidden(col.id)\"\n                  (click)=\"toggleColumn(col.id)\"\n                >\n                  <i class=\"pi\" [class.pi-check]=\"!isColumnHidden(col.id)\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{\n                    col.headerKey ? (col.headerKey | translate) : (col.header || col.id)\n                  }}</span>\n                </button>\n              }\n              <div class=\"tbl-tool__sep\"></div>\n              <button type=\"button\" role=\"menuitem\" (click)=\"resetColumns()\">\n                <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n                <span class=\"tbl-tool__label\">{{ 'common_columns_reset' | translate }}</span>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 TABLE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (isMobile()) {\n    <!-- \u2500\u2500 MOBILE LIST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         A six-column table on a 390px screen either overflows or\n         squeezes every column to nothing, so the rows become a list.\n         Same columns, same cell renderers; each column just declares\n         (or is given) a role. Both shapes expand to the same detail \u2014\n         they differ only in how much they show collapsed. -->\n    <ul\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]=\"hasDetail()\"\n            [attr.role]=\"hasDetail() ? 'button' : null\"\n            [attr.tabindex]=\"hasDetail() ? 0 : null\"\n            [attr.aria-expanded]=\"hasDetail() ? isExpanded(row, i) : null\"\n            (click)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.enter)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.space)=\"onRowHeadActivate(row, i, $event)\"\n          >\n            <div class=\"mrow__lead\">\n              @if (primaryColumn(); as pc) {\n                <span class=\"mrow__primary\" 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                <!-- Says the row opens, and which way it is now. Decorative:\n                     the whole head is the control, and it carries the state. -->\n                <i\n                  class=\"pi pi-chevron-down mrow__chevron\"\n                  [class.is-open]=\"isExpanded(row, i)\"\n                  aria-hidden=\"true\"\n                ></i>\n              }\n            </div>\n          </div>\n\n          @if (visibleDetail(row, i).length) {\n            <dl class=\"mrow__detail\">\n              @for (col of visibleDetail(row, i); track col.id) {\n                <div class=\"mrow__field\">\n                  <dt>{{ $any(col).headerKey ? ($any(col).headerKey | translate) : $any(col).header }}</dt>\n                  <dd [class]=\"cellAlignClass($any(col))\">\n                    <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col, 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    <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            (dblclick)=\"onRowDoubleClick(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  }\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; the head chip still carries it\n     for anyone looking. This carries the two things that help: their\n     data is intact, and the way to try 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\";.tbl thead th.is-sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl thead th.is-sortable:hover{color:var(--text)}.tbl tbody tr.is-row-clickable{cursor:pointer}.tbl-tools{display:flex;gap:6px;align-items:center}.tbl-tool{position:relative}.tbl-tool>.btn.open{color:var(--text);background:var(--paper)}.tbl-tool__menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:40;min-width:212px;max-height:340px;overflow-y:auto;padding:6px;display:grid;gap:1px;background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--shadow-3);animation:row-actions-menu-in var(--t-base) var(--ease-spring)}.tbl-tool__menu--wide{min-width:248px}.tbl-tool__menu button{appearance:none;background:transparent;border:0;width:100%;text-align:start;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out)}.tbl-tool__menu button:hover,.tbl-tool__menu button:focus-visible{background:var(--paper);outline:0}.tbl-tool__menu button>.pi{width:16px;flex:none;font-size:14px;color:var(--muted)}.tbl-tool__menu button.is-active>.pi{color:var(--module, var(--text))}.tbl-tool__label{flex:1 1 auto;min-width:0}.tbl-tool__check{color:var(--module, var(--text))}.tbl-tool__sep{margin:5px 2px;border-top:1px solid var(--rule)}.tbl-wrap[data-density=compact] .tbl tbody td{padding-top:4px;padding-bottom:4px}.tbl-wrap[data-density=comfortable] .tbl tbody td{padding-top:16px;padding-bottom:16px}.mlist{list-style:none;margin:0;padding:0;display:grid}.mrow{border-top:1px solid var(--rule)}.mrow:first-child{border-top:0}.mrow__head{display:flex;align-items:flex-start;gap:var(--s-3);padding:12px var(--s-4);min-height:var(--hit-touch)}.mrow__head.is-tappable{cursor:pointer}.mrow__head.is-tappable:active{background:var(--paper)}.mrow__lead{flex:1;min-width:0;display:grid;gap:2px}.mrow__primary{font-weight:700;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrow__secondary{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:12.5px;color:var(--text-mute);min-width:0}.mrow__secondary .mrow__sec-part+.mrow__sec-part:before{content:\"\\b7\";margin-inline-end:6px;color:var(--text-soft)}.mrow__trail{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);flex-shrink:0;min-height:20px}.mrow__actions{display:inline-flex}.mrow__detail{margin:0;padding:0 var(--s-4) 12px;display:grid;gap:1px}.mrow__field{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding:7px 0;border-top:1px solid var(--rule-soft)}.mrow__field dt{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute);flex-shrink:0}.mrow__field dd{margin:0;font-size:13.5px;color:var(--text);text-align:end;min-width:0;overflow-wrap:anywhere}.mrow__more{appearance:none;width:100%;background:transparent;border:0;border-top:1px solid var(--rule-soft);padding:10px;font:inherit;font-size:13px;font-weight:600;color:var(--tenant-500);cursor:pointer}.mlist[data-layout=card]{gap:var(--s-3);padding:var(--s-3) var(--s-3) 0}.mlist[data-layout=card] .mrow{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper-alt);overflow:hidden}.mlist[data-layout=card] .mrow__head{border-bottom:1px solid var(--rule)}.mrow__chevron{font-size:11px;color:var(--text-soft);transition:transform var(--t-fast) var(--ease-out);flex-shrink:0}.mrow__chevron.is-open{transform:rotate(180deg);color:var(--text-mute)}.mrow__head.is-tappable:focus-visible{outline:2px solid var(--tenant-400);outline-offset:-2px}.mrow__more{display:flex;align-items:center;justify-content:center;gap:6px}.tbl-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);padding:var(--s-9) var(--s-4);text-align:center}.tbl-empty__icon{font-size:28px;line-height:1;color:var(--ink-400);margin-block-end:var(--s-1)}.tbl-empty__title{margin:0;font-size:15px;font-weight:600;color:var(--text);max-inline-size:46ch;overflow-wrap:break-word}.tbl-empty__hint{margin:0;font-size:13px;color:var(--ink-600);max-inline-size:52ch;text-wrap:pretty}.tbl-empty__action{margin-block-start:var(--s-3);min-block-size:var(--hit-base)}.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}\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]
             }], headerTemplates: [{
@@ -5673,7 +5731,7 @@ class EfOrderBuilderComponent {
         return OrderEntityHelper.calculateTotals(this.order());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfOrderBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfOrderBuilderComponent, isStandalone: true, selector: "ef-order-builder", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: true, transformFunction: null }, products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: true, transformFunction: null }, customers: { classPropertyName: "customers", publicName: "customers", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, countGroupLabels: { classPropertyName: "countGroupLabels", publicName: "countGroupLabels", isSignal: true, isRequired: false, transformFunction: null }, productKeyField: { classPropertyName: "productKeyField", publicName: "productKeyField", isSignal: true, isRequired: false, transformFunction: null }, backendErrors: { classPropertyName: "backendErrors", publicName: "backendErrors", isSignal: true, isRequired: false, transformFunction: null }, auditEntries: { classPropertyName: "auditEntries", publicName: "auditEntries", isSignal: true, isRequired: false, transformFunction: null }, focusMode: { classPropertyName: "focusMode", publicName: "focusMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { order: "orderChange", openCatalogue: "openCatalogue", orderChanged: "orderChanged", orderValidated: "orderValidated", productsAdded: "productsAdded", focusMode: "focusModeChange" }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: EfProductTypeaheadComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"order-builder\"\n  [class.ob-collapsed]=\"focusMode()\"\n  [class.ob-rail-open]=\"railOpen()\">\n  <div class=\"ob-grid\">\n    <div class=\"ob-main\">\n      <!-- Order header: customer + date + express add (one card) -->\n      <ef-card\n        titleKey=\"order_builder.section_order\"\n        [metaKey]=\"readonly() ? '' : 'order_builder.quick_add_hint'\"\n        [overflowVisible]=\"true\">\n        <div class=\"ob-order-head\">\n          <div class=\"form-grid\">\n            <div class=\"field col-6\">\n              <ef-label labelKey=\"label.customer\" for=\"ob-cust\" [required]=\"true\" />\n              <ef-select\n                inputId=\"ob-cust\"\n                [options]=\"customers()\"\n                optionLabel=\"companyName\"\n                optionValue=\"customerId\"\n                [ngModel]=\"order().customerId\"\n                (ngModelChange)=\"updateCustomer($event)\"\n                [disabled]=\"readonly()\"\n                [showClear]=\"true\"\n                [filter]=\"true\"\n                filterBy=\"companyName\"\n                filterPlaceholderKey=\"label.search_customer\"\n                appendTo=\"body\"\n                placeholderKey=\"label.select_customer\" />\n            </div>\n            <div class=\"field col-3\">\n              <ef-label labelKey=\"label.order_date\" for=\"ob-date\" [required]=\"true\" />\n              <ef-datepicker-advanced\n                mode=\"field\"\n                selectionMode=\"single\"\n                inputId=\"ob-date\"\n                placeholderKey=\"date_select_date\"\n                [ngModel]=\"order().orderDate\"\n                (ngModelChange)=\"updateOrderDate($event)\"\n                [disabled]=\"readonly()\" />\n            </div>\n          </div>\n\n          @if (!readonly()) {\n            <div class=\"qa-grid\">\n              <div class=\"qa-combo-wrap\">\n                <ef-label labelKey=\"label.article\" />\n                <ef-product-typeahead\n                  [products]=\"products()\"\n                  [productKeyField]=\"productKeyField()\"\n                  placeholderKey=\"label.search_product\"\n                  [currency]=\"currency()\"\n                  [locale]=\"locale()\"\n                  (productSelect)=\"onTypeaheadSelect($event)\"\n                  [showVariants]=\"false\" />\n              </div>\n              <div class=\"qa-price\">\n                <ef-label labelKey=\"label.sale_price\" />\n                <ef-inputnumber\n                  variant=\"comptoir\"\n                  [value]=\"quickAddPrice()\"\n                  (valueChangeEvent)=\"quickAddPrice.set($event ?? 0)\"\n                  [minFractionDigits]=\"2\"\n                  [maxFractionDigits]=\"2\"\n                  [locale]=\"locale()\"\n                  [disabled]=\"readonly()\" />\n              </div>\n              <div class=\"qa-qtyf\">\n                <ef-label labelKey=\"label.quantity\" />\n                <ef-inputnumber\n                  variant=\"comptoir\"\n                  [ngModel]=\"quickAddQuantity()\"\n                  (ngModelChange)=\"quickAddQuantity.set($event)\"\n                  [min]=\"0\"\n                  [maxFractionDigits]=\"4\"\n                  [locale]=\"locale()\"\n                  [disabled]=\"readonly()\"\n                />\n              </div>\n              <div class=\"qa-go\">\n                <!-- Ghost while the preconditions are unmet, tenant once the\n                     line is addable. A disabled control painted in a faded\n                     tenant fill reads as an enabled button that lost its\n                     colour, which is the greyed-out accent the design brief\n                     bans; ghost reads as \"not yet\". -->\n                <ef-button\n                  labelKey=\"action.add\"\n                  icon=\"pi pi-plus\"\n                  variant=\"comptoir\"\n                  size=\"base\"\n                  [severity]=\"quickAddDisabled() ? 'ghost' : 'tenant'\"\n                  [disabled]=\"quickAddDisabled()\"\n                  (clickEvent)=\"addQuickProduct()\" />\n              </div>\n            </div>\n          }\n        </div>\n      </ef-card>\n\n      <!-- Lines.\n\n           ef-data-card owns the panel here instead of sitting inside an\n           ef-card: `.tbl-wrap` already draws a bordered, rounded surface, so\n           nesting it in another one would be a card inside a card. The title\n           and the card's actions move into the head slots it provides.\n\n           The columns are declared in TS (`lineColumns`) so discount and tax\n           follow the document config, and so one definition drives both the\n           desktop table and the mobile cards. Only the article column is\n           elastic; every other column holds a number of known magnitude and\n           gets a fixed track, which keeps the decimals aligned down the\n           table rather than shifting with the longest description. -->\n      <ef-data-card\n        [columns]=\"lineColumns()\"\n        [rows]=\"orderLines()\"\n        trackByField=\"id\"\n        [hidePager]=\"true\"\n        defaultDensity=\"compact\"\n        [reorderable]=\"!readonly()\"\n        [fixedLayout]=\"true\"\n        (rowReorder)=\"reorderLine($event)\"\n        mobileLayout=\"card\">\n\n        <div tbl-head-info class=\"ob-lines-head\">\n          <span class=\"strong\">{{ 'order_builder.lines' | translate }}</span>\n          <span class=\"meta\">\u00B7 {{ orderLines().length }}</span>\n        </div>\n\n        <div tbl-head-actions class=\"head-actions\">\n          @if (config().showCatalogue && !readonly()) {\n            <ef-button\n              labelKey=\"action.open_catalogue\"\n              icon=\"pi pi-box\"\n              severity=\"secondary\"\n              [text]=\"true\"\n              (clickEvent)=\"handleOpenCatalogue()\" />\n          }\n          <ef-button\n            [labelKey]=\"focusMode() ? 'order_builder.show_summary' : 'order_builder.fullscreen'\"\n            icon=\"pi pi-window-maximize\"\n            severity=\"secondary\"\n            [text]=\"true\"\n            (clickEvent)=\"toggleFocus()\" />\n        </div>\n\n        <span empty-state>{{ 'order_builder.empty' | translate }}</span>\n        <span empty-state-mobile>{{ 'order_builder.empty' | translate }}</span>\n\n        <ng-template efColumnTemplate=\"product\" let-item let-i=\"index\">\n          <div class=\"p\">\n            <span class=\"ln\">{{ i + 1 }}</span>\n            <span class=\"pp\">\n              <span class=\"nm\">{{ item.productDescription }}</span>\n            </span>\n          </div>\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"price\" let-item>\n          @if (!readonly() && isEditingCell(item, 'price')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.productUnitPrice\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [minFractionDigits]=\"2\"\n              [maxFractionDigits]=\"2\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'price')\">\n              {{ item.productUnitPrice | number: '1.2-2' : locale() }}\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"qty\" let-item>\n          @if (!readonly() && isEditingCell(item, 'qty')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.quantity\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [maxFractionDigits]=\"4\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'qty')\">\n              {{ item.quantity | number: '1.0-4' : locale() }}\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"discount\" let-item>\n          @if (!readonly() && isEditingCell(item, 'discount')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.discount\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [max]=\"100\"\n              [maxFractionDigits]=\"2\"\n              suffix=\" %\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'discount')\">\n              {{ item.discount | number: '1.0-2' : locale() }} %\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"tax\" let-item>\n          @if (!readonly() && isEditingCell(item, 'tva')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.taxRate\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [max]=\"100\"\n              [maxFractionDigits]=\"2\"\n              suffix=\" %\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'tva')\">\n              {{ (item.taxRate ?? 0) | number: '1.0-2' : locale() }} %\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"subtotal\" let-item>\n          {{ calculateSubtotal(item) | number: '1.2-2' : locale() }}\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"remove\" let-item>\n          <ef-button\n            icon=\"pi pi-trash\"\n            severity=\"danger\"\n            [text]=\"true\"\n            styleClass=\"ob-del\"\n            (clickEvent)=\"removeOrderLine(item.id)\" />\n        </ng-template>\n      </ef-data-card>\n\n    </div>\n\n    <!-- CONTEXT RAIL (1/3) -->\n    <aside class=\"ob-rail\">\n      <!-- Totaux (top) -->\n      <ef-card titleKey=\"order_builder.totals\" [meta]=\"currency()\">\n        <div class=\"ob-totals\">\n          <div class=\"row\">\n            <span class=\"lbl\">{{ 'order_builder.gross' | translate }}</span>\n            <span class=\"v\">{{ grossTotal() | number: '1.2-2' : locale() }}</span>\n          </div>\n          <div class=\"row discount\">\n            <span class=\"lbl\">{{ 'order_builder.discount' | translate }}</span>\n            <span class=\"v\">\u2212{{ discountTotal() | number: '1.2-2' : locale() }}</span>\n          </div>\n          <div class=\"row\">\n            <span class=\"lbl\">{{ 'order_builder.tax' | translate }}</span>\n            <span class=\"v\">{{ tvaTotal() | number: '1.2-2' : locale() }}</span>\n          </div>\n          <hr />\n          <div class=\"row grand\">\n            <span class=\"lbl\">{{ 'order_builder.grand_total' | translate }}</span>\n            <span class=\"v\">{{ finalTotal() | number: '1.2-2' : locale() }}<span class=\"cur\">{{ currency() }}</span></span>\n          </div>\n        </div>\n      </ef-card>\n\n      <!-- R\u00E9capitulatif par format -->\n      @if (productsSummary().items.length > 0) {\n        <ef-card titleKey=\"order_builder.recap\" metaKey=\"order_builder.auto\">\n          <div class=\"ob-recap\">\n            <div class=\"cols\">\n              @for (col of recapColumns(); track $index) {\n                <div class=\"grp\">\n                  @for (seg of col; track seg.code) {\n                    <div class=\"seg\">\n                      <span class=\"fmt\">{{ seg.label }}</span>\n                      <span class=\"n\">{{ seg.count | number: '1.0-0' : locale() }}</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n            <div class=\"tot\">\n              <span class=\"l\">{{ 'order_builder.total_units' | translate }}</span>\n              <span class=\"n\">{{ productsSummary().totalCount | number: '1.0-0' : locale() }}</span>\n            </div>\n          </div>\n        </ef-card>\n      }\n\n      <!-- Historique (optional, component-owned) -->\n      @if (hasAudit()) {\n        <ef-change-history [entries]=\"auditEntries()\" />\n      }\n    </aside>\n  </div>\n\n  <!-- Floating summary FAB + backdrop -->\n  <button type=\"button\" class=\"ob-backdrop\" aria-hidden=\"true\" tabindex=\"-1\" (click)=\"toggleRail(false)\"></button>\n  <div class=\"ob-fab\" role=\"status\">\n    <div class=\"ft\">\n      <span class=\"k\">{{ 'order_builder.total_units' | translate }} \u00B7 {{ productsSummary().totalCount }}</span>\n      <span class=\"vv\">{{ finalTotal() | number: '1.2-2' : locale() }}<span class=\"cur\">{{ currency() }}</span></span>\n    </div>\n    <button type=\"button\" class=\"open\" (click)=\"toggleRail(true)\">\n      {{ 'order_builder.summary' | translate }}\n    </button>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .order-builder{display:grid;gap:var(--s-3)}:host .order-builder .head-actions{display:flex;align-items:center;gap:6px}:host .order-builder .ob-empty{padding:28px 16px;text-align:center;color:var(--text-mute);font-size:13px}:host .order-builder .text-mute{color:var(--text-mute);font-weight:600}:host .order-builder .form-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(12,minmax(0,1fr))}:host .order-builder .form-grid>.col-3{grid-column:span 3}:host .order-builder .form-grid>.col-4{grid-column:span 4}:host .order-builder .form-grid>.col-5{grid-column:span 5}:host .order-builder .form-grid>.col-6{grid-column:span 6}@media(max-width:767px){:host .order-builder .form-grid>[class*=col-]{grid-column:span 12}}:host .order-builder .field{display:grid;gap:4px}:host .order-builder .field>label{font-size:11px;font-weight:700;color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em}:host .order-builder .field .req{color:var(--st-cancelled-fg);margin-inline-start:2px}:host .order-builder .ob-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);align-items:start}@media(min-width:1280px){:host .order-builder .ob-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}:host .order-builder .ob-main{display:grid;gap:var(--s-3);min-width:0}:host .order-builder .ob-rail{display:grid;gap:var(--s-3);align-content:start}@media(min-width:1280px){:host .order-builder .ob-rail{position:sticky;top:44px}}:host .order-builder .ob-order-head{display:grid;gap:var(--s-4)}:host .order-builder .qa-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:end;padding-top:var(--s-3);border-top:1px solid var(--rule-soft)}:host .order-builder .qa-combo-wrap{flex:1 1 260px;min-width:0}:host .order-builder .qa-price{flex:0 1 132px}:host .order-builder .qa-qtyf{flex:0 0 132px}:host .order-builder .qa-go{flex:0 0 auto}@media(max-width:560px){:host .order-builder .qa-combo-wrap,:host .order-builder .qa-price,:host .order-builder .qa-qtyf,:host .order-builder .qa-go{flex:1 1 100%}}:host .order-builder .qin{width:58px;text-align:end;font:inherit;font-family:var(--font-mono);font-weight:700;padding:6px 8px;min-height:34px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper-alt);color:var(--text);outline:0;-moz-appearance:textfield}:host .order-builder .qin::-webkit-outer-spin-button,:host .order-builder .qin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host .order-builder .qin:focus{border-color:var(--tenant-400);box-shadow:0 0 0 3px var(--tenant-100)}:host .order-builder ef-data-card{font-size:13px}:host .order-builder ef-data-card .p{display:flex;align-items:baseline;gap:9px;line-height:1.25}:host .order-builder ef-data-card .p .ln{flex:0 0 auto;min-width:15px;text-align:end;font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--text-soft)}:host .order-builder ef-data-card .p .pp{display:grid;gap:1px;min-width:0}:host .order-builder ef-data-card .p .nm{font-weight:600;letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .order-builder ef-data-card .p .nm em{font-style:normal;color:var(--text-mute);font-weight:600}:host .order-builder ef-data-card .p .ref{font-family:var(--font-mono);font-size:10.5px;color:var(--text-soft);font-weight:600}:host .order-builder ef-data-card ef-inputnumber,:host .order-builder ef-data-card ef-inputnumber .ef-field-control,:host .order-builder ef-data-card ef-inputnumber input{width:100%;min-width:0}:host .order-builder ef-data-card .num,:host .order-builder ef-data-card .total{font-family:var(--font-mono);font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums}:host .order-builder ef-data-card .ln-val{appearance:none;width:100%;margin:0;padding:5px 8px;border:1px solid transparent;border-radius:7px;background:transparent;font:inherit;font-family:var(--font-mono);font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;color:inherit;text-align:end;cursor:text;transition:background .12s ease,border-color .12s ease}:host .order-builder ef-data-card .ln-val:hover:not(:disabled){background:var(--paper);border-color:var(--rule)}:host .order-builder ef-data-card .ln-val:focus-visible{outline:none;background:var(--paper);border-color:var(--tenant, var(--rule))}:host .order-builder ef-data-card .ln-val:disabled{cursor:default;background:transparent;border-color:transparent}:host .order-builder ef-data-card .total{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 85;font-size:13.5px}:host .order-builder ef-data-card .cur{font-size:9.5px;color:var(--text-soft);margin-inline-start:3px}:host .order-builder ef-data-card .free{color:var(--st-delivered-fg)}:host .order-builder .ob-lines-head{display:flex;align-items:baseline;gap:6px;min-width:0}:host .order-builder .ob-lines-head .strong{font-weight:700;color:var(--text)}:host .order-builder .ob-lines-head .meta{color:var(--text-soft)}:host .order-builder .ob-del{color:var(--text-soft)}:host .order-builder .ob-del:hover{color:var(--st-cancelled-fg);border-color:var(--st-cancelled-bg)}:host .order-builder .ob-totals{display:grid;gap:6px}:host .order-builder .ob-totals .row{display:flex;justify-content:space-between;align-items:baseline;gap:14px}:host .order-builder .ob-totals .row .lbl{font-size:12px;font-weight:600;color:var(--text-mute)}:host .order-builder .ob-totals .row .v{font-family:var(--font-mono);font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px}:host .order-builder .ob-totals .row.discount .v{color:var(--st-pending-fg)}:host .order-builder .ob-totals hr{border:0;border-top:1px solid var(--rule);margin:5px 0}:host .order-builder .ob-totals .grand .lbl{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 85;font-size:13.5px;color:var(--text)}:host .order-builder .ob-totals .grand .v{font-family:var(--font-display);font-variation-settings:\"opsz\" 96,\"wght\" 700,\"wdth\" 80;font-size:26px;letter-spacing:-.03em;color:var(--text)}:host .order-builder .ob-totals .grand .cur{font-family:var(--font-mono);font-size:.4em;color:var(--text-mute);margin-inline-start:4px}:host .order-builder .ob-recap .cols{display:grid;grid-template-columns:1fr 1fr}:host .order-builder .ob-recap .grp{display:flex;flex-direction:column;gap:3px;min-width:0}:host .order-builder .ob-recap .grp:first-child{padding-inline-end:14px}:host .order-builder .ob-recap .grp+.grp{padding-inline-start:14px;border-inline-start:1px solid var(--rule)}:host .order-builder .ob-recap .seg{display:flex;justify-content:space-between;align-items:baseline;gap:8px}:host .order-builder .ob-recap .seg .fmt{font-size:11.5px;font-weight:700;color:var(--text);letter-spacing:-.005em;min-width:0}:host .order-builder .ob-recap .seg .fmt:after{content:\":\";color:var(--text-soft)}:host .order-builder .ob-recap .seg .n{font-family:var(--font-mono);font-weight:700;font-size:12px;color:var(--text);font-variant-numeric:tabular-nums;flex-shrink:0}:host .order-builder .ob-recap .tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:10px;border-top:1px solid var(--rule)}:host .order-builder .ob-recap .tot .l{font-weight:700;font-size:12px}:host .order-builder .ob-recap .tot .n{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 85;font-size:18px;font-variant-numeric:tabular-nums}:host .order-builder .ob-rail-close{display:none}:host .order-builder .ob-fab{display:none;position:fixed;inset-inline-end:20px;bottom:calc(var(--app-bottom-bar, 0px) + env(safe-area-inset-bottom,0px) + 20px);z-index:30;align-items:center;gap:10px;background:var(--ink-active);color:var(--paper);border-radius:var(--r-pill);padding:8px 10px 8px 16px;box-shadow:var(--shadow-3)}:host .order-builder .ob-fab .ft{display:grid;line-height:1.1}:host .order-builder .ob-fab .ft .k{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.65}:host .order-builder .ob-fab .ft .vv{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 82;font-size:16px}:host .order-builder .ob-fab .ft .vv .cur{font-family:var(--font-mono);font-size:.6em;opacity:.7;margin-inline-start:3px}:host .order-builder .ob-fab .open{appearance:none;cursor:pointer;border:0;background:#ffffff24;color:#fff;font:inherit;font-size:12px;font-weight:700;border-radius:var(--r-pill);padding:8px 14px;display:inline-flex;align-items:center;gap:6px}:host .order-builder .ob-fab .open:hover{background:#ffffff3d}:host .order-builder .ob-backdrop{display:none;position:fixed;inset:0;z-index:38;background:#0f11156b;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}:host .order-builder.ob-collapsed .ob-grid{grid-template-columns:minmax(0,1fr)}:host .order-builder.ob-collapsed .ob-fab{display:flex}:host .order-builder.ob-collapsed .ob-rail{position:fixed;top:0;inset-inline-end:0;height:100dvh;width:min(360px,92vw);z-index:40;background:var(--paper);border-inline-start:1px solid var(--rule);box-shadow:var(--shadow-3);padding:14px;overflow:auto;gap:var(--s-3);transform:translate(101%);transition:transform var(--t-base) var(--ease-out)}[dir=rtl] :host .order-builder.ob-collapsed .ob-rail{transform:translate(-101%)}:host .order-builder.ob-collapsed .ob-rail-close{display:inline-flex}:host .order-builder.ob-collapsed.ob-rail-open .ob-rail{transform:none}:host .order-builder.ob-collapsed.ob-rail-open .ob-backdrop{display:block}@media(max-width:1279px){:host .order-builder .ob-grid{grid-template-columns:minmax(0,1fr)}:host .order-builder .ob-fab{display:flex}:host .order-builder .ob-rail{position:fixed;top:0;inset-inline-end:0;height:100dvh;width:min(360px,92vw);z-index:40;background:var(--paper);border-inline-start:1px solid var(--rule);box-shadow:var(--shadow-3);padding:14px;overflow:auto;gap:var(--s-3);transform:translate(101%);transition:transform var(--t-base) var(--ease-out)}[dir=rtl] :host .order-builder .ob-rail{transform:translate(-101%)}:host .order-builder .ob-rail-close{display:inline-flex!important}:host .order-builder.ob-rail-open .ob-rail{transform:none}:host .order-builder.ob-rail-open .ob-backdrop{display:block}}:host ef-data-card .nm,:host ef-data-card .num,:host ef-data-card .ln-val,:host .ob-totals .v,:host .ob-sum-val{unicode-bidi:plaintext}@media(max-width:767px){:host .order-builder{padding-bottom:calc(var(--app-bottom-bar, 0px) + env(safe-area-inset-bottom,0px) + 20px + 56px + var(--s-4))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "component", type: EfDatepickerAdvancedComponent, selector: "ef-datepicker-advanced", inputs: ["triggerLabelKey", "triggerLabel", "presets", "activePreset", "start", "end", "allowCustomRange", "mode", "selectionMode", "variant", "showTime"], outputs: ["rangeChange", "opened", "closed"] }, { kind: "component", type: EfInputNumberComponent, selector: "ef-inputnumber", inputs: ["value", "invalid", "format", "showButtons", "buttonLayout", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "prefix", "suffix", "currency", "currencyDisplay", "locale", "localeMatcher", "mode", "useGrouping", "minFractionDigits", "maxFractionDigits", "min", "max", "step", "allowEmpty", "inputSize", "size", "maxlength", "minlength", "pattern", "tabindex", "title", "ariaLabelledBy", "inputStyle", "inputStyleClass", "style", "styleClass", "primeNgVariant", "autofocus", "autocomplete", "fluid", "inline", "variant", "pt", "ptOptions", "dt", "unstyled"], outputs: ["inputEvent", "valueChangeEvent", "focusEvent", "blurEvent", "keyDownEvent", "clearEvent"] }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "variant", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition", "autofocus"], outputs: ["clickEvent"] }, { kind: "component", type: EfCardComponent, selector: "ef-card", inputs: ["titleKey", "title", "metaKey", "meta", "tone", "forceHead", "hasFoot", "collapsible", "overflowVisible", "loading", "skeleton", "skeletonRows", "skeletonHeight", "collapsed"], outputs: ["collapsedChange"] }, { kind: "component", type: EfChangeHistoryComponent, selector: "ef-change-history", inputs: ["entries", "titleKey", "emptyKey", "limit", "previewLimit", "collapsible", "startCollapsed"] }, { kind: "component", type: EfProductTypeaheadComponent, selector: "ef-product-typeahead", inputs: ["products", "productKeyField", "placeholderKey", "disabled", "currency", "locale", "showVariants"], outputs: ["productSelect"] }, { kind: "component", type: EfDataCardComponent, selector: "ef-data-card", inputs: ["mobileLayout", "columns", "rows", "trackByField", "pageNumber", "pageSize", "totalCount", "pageSizeOptions", "hidePager", "sort", "loading", "errorMsg", "loadingKey", "rowDoubleClickable", "hasActionsColumn", "rowActionsContext", "showViewAction", "showEditAction", "showDuplicateAction", "showDeleteAction", "showDensityControl", "showColumnPicker", "showExportControl", "exporting", "screenContext", "searchTerm", "tableKey", "defaultDensity", "reorderable", "fixedLayout"], outputs: ["pageChange", "pageSizeChange", "sortChange", "rowDoubleClick", "rowAction", "exportRequest", "clearSearch", "rowReorder"] }, { kind: "directive", type: EfColumnTemplateDirective, selector: "[efColumnTemplate]", inputs: ["efColumnTemplate"] }, { kind: "pipe", type: i1$3.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfOrderBuilderComponent, isStandalone: true, selector: "ef-order-builder", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: true, transformFunction: null }, products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: true, transformFunction: null }, customers: { classPropertyName: "customers", publicName: "customers", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, countGroupLabels: { classPropertyName: "countGroupLabels", publicName: "countGroupLabels", isSignal: true, isRequired: false, transformFunction: null }, productKeyField: { classPropertyName: "productKeyField", publicName: "productKeyField", isSignal: true, isRequired: false, transformFunction: null }, backendErrors: { classPropertyName: "backendErrors", publicName: "backendErrors", isSignal: true, isRequired: false, transformFunction: null }, auditEntries: { classPropertyName: "auditEntries", publicName: "auditEntries", isSignal: true, isRequired: false, transformFunction: null }, focusMode: { classPropertyName: "focusMode", publicName: "focusMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { order: "orderChange", openCatalogue: "openCatalogue", orderChanged: "orderChanged", orderValidated: "orderValidated", productsAdded: "productsAdded", focusMode: "focusModeChange" }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: EfProductTypeaheadComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"order-builder\"\n  [class.ob-collapsed]=\"focusMode()\"\n  [class.ob-rail-open]=\"railOpen()\">\n  <div class=\"ob-grid\">\n    <div class=\"ob-main\">\n      <!-- Order header: customer + date + express add (one card) -->\n      <ef-card\n        titleKey=\"order_builder.section_order\"\n        [metaKey]=\"readonly() ? '' : 'order_builder.quick_add_hint'\"\n        [overflowVisible]=\"true\">\n        <div class=\"ob-order-head\">\n          <div class=\"form-grid\">\n            <div class=\"field col-6\">\n              <ef-label labelKey=\"label.customer\" for=\"ob-cust\" [required]=\"true\" />\n              <ef-select\n                inputId=\"ob-cust\"\n                [options]=\"customers()\"\n                optionLabel=\"companyName\"\n                optionValue=\"customerId\"\n                [ngModel]=\"order().customerId\"\n                (ngModelChange)=\"updateCustomer($event)\"\n                [disabled]=\"readonly()\"\n                [showClear]=\"true\"\n                [filter]=\"true\"\n                filterBy=\"companyName\"\n                filterPlaceholderKey=\"label.search_customer\"\n                appendTo=\"body\"\n                placeholderKey=\"label.select_customer\" />\n            </div>\n            <div class=\"field col-3\">\n              <ef-label labelKey=\"label.order_date\" for=\"ob-date\" [required]=\"true\" />\n              <ef-datepicker-advanced\n                mode=\"field\"\n                selectionMode=\"single\"\n                inputId=\"ob-date\"\n                placeholderKey=\"date_select_date\"\n                [ngModel]=\"order().orderDate\"\n                (ngModelChange)=\"updateOrderDate($event)\"\n                [disabled]=\"readonly()\" />\n            </div>\n          </div>\n\n          @if (!readonly()) {\n            <div class=\"qa-grid\">\n              <div class=\"qa-combo-wrap\">\n                <ef-label labelKey=\"label.article\" />\n                <ef-product-typeahead\n                  [products]=\"products()\"\n                  [productKeyField]=\"productKeyField()\"\n                  placeholderKey=\"label.search_product\"\n                  [currency]=\"currency()\"\n                  [locale]=\"locale()\"\n                  (productSelect)=\"onTypeaheadSelect($event)\"\n                  [showVariants]=\"false\" />\n              </div>\n              <div class=\"qa-price\">\n                <ef-label labelKey=\"label.sale_price\" />\n                <ef-inputnumber\n                  variant=\"comptoir\"\n                  [value]=\"quickAddPrice()\"\n                  (valueChangeEvent)=\"quickAddPrice.set($event ?? 0)\"\n                  [minFractionDigits]=\"2\"\n                  [maxFractionDigits]=\"2\"\n                  [locale]=\"locale()\"\n                  [disabled]=\"readonly()\" />\n              </div>\n              <div class=\"qa-qtyf\">\n                <ef-label labelKey=\"label.quantity\" />\n                <ef-inputnumber\n                  variant=\"comptoir\"\n                  [ngModel]=\"quickAddQuantity()\"\n                  (ngModelChange)=\"quickAddQuantity.set($event)\"\n                  [min]=\"0\"\n                  [maxFractionDigits]=\"4\"\n                  [locale]=\"locale()\"\n                  [disabled]=\"readonly()\"\n                />\n              </div>\n              <div class=\"qa-go\">\n                <!-- Ghost while the preconditions are unmet, tenant once the\n                     line is addable. A disabled control painted in a faded\n                     tenant fill reads as an enabled button that lost its\n                     colour, which is the greyed-out accent the design brief\n                     bans; ghost reads as \"not yet\". -->\n                <ef-button\n                  labelKey=\"action.add\"\n                  icon=\"pi pi-plus\"\n                  variant=\"comptoir\"\n                  size=\"base\"\n                  [severity]=\"quickAddDisabled() ? 'ghost' : 'tenant'\"\n                  [disabled]=\"quickAddDisabled()\"\n                  (clickEvent)=\"addQuickProduct()\" />\n              </div>\n            </div>\n          }\n        </div>\n      </ef-card>\n\n      <!-- Lines.\n\n           ef-data-card owns the panel here instead of sitting inside an\n           ef-card: `.tbl-wrap` already draws a bordered, rounded surface, so\n           nesting it in another one would be a card inside a card. The title\n           and the card's actions move into the head slots it provides.\n\n           The columns are declared in TS (`lineColumns`) so discount and tax\n           follow the document config, and so one definition drives both the\n           desktop table and the mobile cards. Only the article column is\n           elastic; every other column holds a number of known magnitude and\n           gets a fixed track, which keeps the decimals aligned down the\n           table rather than shifting with the longest description. -->\n      <ef-data-card\n        [columns]=\"lineColumns()\"\n        [rows]=\"orderLines()\"\n        trackByField=\"id\"\n        [hidePager]=\"true\"\n        defaultDensity=\"compact\"\n        [reorderable]=\"!readonly()\"\n        [fixedLayout]=\"true\"\n        (rowReorder)=\"reorderLine($event)\"\n        mobileLayout=\"card\">\n\n        <div tbl-head-info class=\"ob-lines-head\">\n          <span class=\"strong\">{{ 'order_builder.lines' | translate }}</span>\n          <span class=\"meta\">\u00B7 {{ orderLines().length }}</span>\n        </div>\n\n        <div tbl-head-actions class=\"head-actions\">\n          @if (config().showCatalogue && !readonly()) {\n            <ef-button\n              labelKey=\"action.open_catalogue\"\n              icon=\"pi pi-box\"\n              severity=\"secondary\"\n              [text]=\"true\"\n              (clickEvent)=\"handleOpenCatalogue()\" />\n          }\n          <ef-button\n            [labelKey]=\"focusMode() ? 'order_builder.show_summary' : 'order_builder.fullscreen'\"\n            icon=\"pi pi-window-maximize\"\n            severity=\"secondary\"\n            [text]=\"true\"\n            (clickEvent)=\"toggleFocus()\" />\n        </div>\n\n        <span empty-state>{{ 'order_builder.empty' | translate }}</span>\n        <span empty-state-mobile>{{ 'order_builder.empty' | translate }}</span>\n\n        <ng-template efColumnTemplate=\"product\" let-item let-i=\"index\">\n          <div class=\"p\">\n            <span class=\"ln\">{{ i + 1 }}</span>\n            <span class=\"pp\">\n              <span class=\"nm\">{{ item.productDescription }}</span>\n            </span>\n          </div>\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"price\" let-item>\n          @if (!readonly() && isEditingCell(item, 'price')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.productUnitPrice\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [minFractionDigits]=\"2\"\n              [maxFractionDigits]=\"2\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'price')\">\n              {{ item.productUnitPrice | number: '1.2-2' : locale() }}\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"qty\" let-item>\n          @if (!readonly() && isEditingCell(item, 'qty')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.quantity\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [maxFractionDigits]=\"4\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'qty')\">\n              {{ item.quantity | number: '1.0-4' : locale() }}\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"discount\" let-item>\n          @if (!readonly() && isEditingCell(item, 'discount')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.discount\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [max]=\"100\"\n              [maxFractionDigits]=\"2\"\n              suffix=\" %\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'discount')\">\n              {{ item.discount | number: '1.0-2' : locale() }} %\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"tax\" let-item>\n          @if (!readonly() && isEditingCell(item, 'tva')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.taxRate\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [max]=\"100\"\n              [maxFractionDigits]=\"2\"\n              suffix=\" %\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'tva')\">\n              {{ (item.taxRate ?? 0) | number: '1.0-2' : locale() }} %\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"subtotal\" let-item>\n          {{ calculateSubtotal(item) | number: '1.2-2' : locale() }}\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"remove\" let-item>\n          <ef-button\n            icon=\"pi pi-trash\"\n            severity=\"danger\"\n            [text]=\"true\"\n            styleClass=\"ob-del\"\n            (clickEvent)=\"removeOrderLine(item.id)\" />\n        </ng-template>\n      </ef-data-card>\n\n    </div>\n\n    <!-- CONTEXT RAIL (1/3) -->\n    <aside class=\"ob-rail\">\n      <!-- Totaux (top) -->\n      <ef-card titleKey=\"order_builder.totals\" [meta]=\"currency()\">\n        <div class=\"ob-totals\">\n          <div class=\"row\">\n            <span class=\"lbl\">{{ 'order_builder.gross' | translate }}</span>\n            <span class=\"v\">{{ grossTotal() | number: '1.2-2' : locale() }}</span>\n          </div>\n          <div class=\"row discount\">\n            <span class=\"lbl\">{{ 'order_builder.discount' | translate }}</span>\n            <span class=\"v\">\u2212{{ discountTotal() | number: '1.2-2' : locale() }}</span>\n          </div>\n          <div class=\"row\">\n            <span class=\"lbl\">{{ 'order_builder.tax' | translate }}</span>\n            <span class=\"v\">{{ tvaTotal() | number: '1.2-2' : locale() }}</span>\n          </div>\n          <hr />\n          <div class=\"row grand\">\n            <span class=\"lbl\">{{ 'order_builder.grand_total' | translate }}</span>\n            <span class=\"v\">{{ finalTotal() | number: '1.2-2' : locale() }}<span class=\"cur\">{{ currency() }}</span></span>\n          </div>\n        </div>\n      </ef-card>\n\n      <!-- R\u00E9capitulatif par format -->\n      @if (productsSummary().items.length > 0) {\n        <ef-card titleKey=\"order_builder.recap\" metaKey=\"order_builder.auto\">\n          <div class=\"ob-recap\">\n            <div class=\"cols\">\n              @for (col of recapColumns(); track $index) {\n                <div class=\"grp\">\n                  @for (seg of col; track seg.code) {\n                    <div class=\"seg\">\n                      <span class=\"fmt\">{{ seg.label }}</span>\n                      <span class=\"n\">{{ seg.count | number: '1.0-0' : locale() }}</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n            <div class=\"tot\">\n              <span class=\"l\">{{ 'order_builder.total_units' | translate }}</span>\n              <span class=\"n\">{{ productsSummary().totalCount | number: '1.0-0' : locale() }}</span>\n            </div>\n          </div>\n        </ef-card>\n      }\n\n      <!-- Historique (optional, component-owned) -->\n      @if (hasAudit()) {\n        <ef-change-history [entries]=\"auditEntries()\" />\n      }\n    </aside>\n  </div>\n\n  <!-- Floating summary FAB + backdrop -->\n  <button type=\"button\" class=\"ob-backdrop\" aria-hidden=\"true\" tabindex=\"-1\" (click)=\"toggleRail(false)\"></button>\n  <div class=\"ob-fab\" role=\"status\">\n    <div class=\"ft\">\n      <span class=\"k\">{{ 'order_builder.total_units' | translate }} \u00B7 {{ productsSummary().totalCount }}</span>\n      <span class=\"vv\">{{ finalTotal() | number: '1.2-2' : locale() }}<span class=\"cur\">{{ currency() }}</span></span>\n    </div>\n    <button type=\"button\" class=\"open\" (click)=\"toggleRail(true)\">\n      {{ 'order_builder.summary' | translate }}\n    </button>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .order-builder{display:grid;gap:var(--s-3)}:host .order-builder .head-actions{display:flex;align-items:center;gap:6px}:host .order-builder .form-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(12,minmax(0,1fr))}:host .order-builder .form-grid>.col-3{grid-column:span 3}:host .order-builder .form-grid>.col-4{grid-column:span 4}:host .order-builder .form-grid>.col-5{grid-column:span 5}:host .order-builder .form-grid>.col-6{grid-column:span 6}@media(max-width:767px){:host .order-builder .form-grid>[class*=col-]{grid-column:span 12}}:host .order-builder .field{display:grid;gap:4px}:host .order-builder .field>label{font-size:11px;font-weight:700;color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em}:host .order-builder .ob-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);align-items:start}@media(min-width:1280px){:host .order-builder .ob-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}:host .order-builder .ob-main{display:grid;gap:var(--s-3);min-width:0}:host .order-builder .ob-rail{display:grid;gap:var(--s-3);align-content:start}@media(min-width:1280px){:host .order-builder .ob-rail{position:sticky;top:44px}}:host .order-builder .ob-order-head{display:grid;gap:var(--s-4)}:host .order-builder .qa-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:end;padding-top:var(--s-3);border-top:1px solid var(--rule-soft)}:host .order-builder .qa-combo-wrap{flex:1 1 260px;min-width:0}:host .order-builder .qa-price{flex:0 1 132px}:host .order-builder .qa-qtyf{flex:0 0 132px}:host .order-builder .qa-go{flex:0 0 auto}@media(max-width:560px){:host .order-builder .qa-combo-wrap,:host .order-builder .qa-price,:host .order-builder .qa-qtyf,:host .order-builder .qa-go{flex:1 1 100%}}:host .order-builder ef-data-card{font-size:13px}:host .order-builder ef-data-card .p{display:flex;align-items:baseline;gap:9px;line-height:1.25}:host .order-builder ef-data-card .p .ln{flex:0 0 auto;min-width:15px;text-align:end;font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--text-soft)}:host .order-builder ef-data-card .p .pp{display:grid;gap:1px;min-width:0}:host .order-builder ef-data-card .p .nm{font-weight:600;letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .order-builder ef-data-card .p .nm em{font-style:normal;color:var(--text-mute);font-weight:600}:host .order-builder ef-data-card ef-inputnumber,:host .order-builder ef-data-card ef-inputnumber .ef-field-control,:host .order-builder ef-data-card ef-inputnumber input{width:100%;min-width:0}:host .order-builder ef-data-card .num,:host .order-builder ef-data-card .total{font-family:var(--font-mono);font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums}:host .order-builder ef-data-card .ln-val{appearance:none;width:100%;margin:0;padding:5px 8px;border:1px solid transparent;border-radius:7px;background:transparent;font:inherit;font-family:var(--font-mono);font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;color:inherit;text-align:end;cursor:text;transition:background .12s ease,border-color .12s ease}:host .order-builder ef-data-card .ln-val:hover:not(:disabled){background:var(--paper);border-color:var(--rule)}:host .order-builder ef-data-card .ln-val:focus-visible{outline:none;background:var(--paper);border-color:var(--tenant, var(--rule))}:host .order-builder ef-data-card .ln-val:disabled{cursor:default;background:transparent;border-color:transparent}:host .order-builder ef-data-card .total{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 85;font-size:13.5px}:host .order-builder ef-data-card .cur{font-size:9.5px;color:var(--text-soft);margin-inline-start:3px}:host .order-builder .ob-lines-head{display:flex;align-items:baseline;gap:6px;min-width:0}:host .order-builder .ob-lines-head .strong{font-weight:700;color:var(--text)}:host .order-builder .ob-lines-head .meta{color:var(--text-soft)}:host .order-builder .ob-del{color:var(--text-soft)}:host .order-builder .ob-del:hover{color:var(--st-cancelled-fg);border-color:var(--st-cancelled-bg)}:host .order-builder .ob-totals{display:grid;gap:6px}:host .order-builder .ob-totals .row{display:flex;justify-content:space-between;align-items:baseline;gap:14px}:host .order-builder .ob-totals .row .lbl{font-size:12px;font-weight:600;color:var(--text-mute)}:host .order-builder .ob-totals .row .v{font-family:var(--font-mono);font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px}:host .order-builder .ob-totals .row.discount .v{color:var(--st-pending-fg)}:host .order-builder .ob-totals hr{border:0;border-top:1px solid var(--rule);margin:5px 0}:host .order-builder .ob-totals .grand .lbl{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 85;font-size:13.5px;color:var(--text)}:host .order-builder .ob-totals .grand .v{font-family:var(--font-display);font-variation-settings:\"opsz\" 96,\"wght\" 700,\"wdth\" 80;font-size:26px;letter-spacing:-.03em;color:var(--text)}:host .order-builder .ob-totals .grand .cur{font-family:var(--font-mono);font-size:.4em;color:var(--text-mute);margin-inline-start:4px}:host .order-builder .ob-recap .cols{display:grid;grid-template-columns:1fr 1fr}:host .order-builder .ob-recap .grp{display:flex;flex-direction:column;gap:3px;min-width:0}:host .order-builder .ob-recap .grp:first-child{padding-inline-end:14px}:host .order-builder .ob-recap .grp+.grp{padding-inline-start:14px;border-inline-start:1px solid var(--rule)}:host .order-builder .ob-recap .seg{display:flex;justify-content:space-between;align-items:baseline;gap:8px}:host .order-builder .ob-recap .seg .fmt{font-size:11.5px;font-weight:700;color:var(--text);letter-spacing:-.005em;min-width:0}:host .order-builder .ob-recap .seg .fmt:after{content:\":\";color:var(--text-soft)}:host .order-builder .ob-recap .seg .n{font-family:var(--font-mono);font-weight:700;font-size:12px;color:var(--text);font-variant-numeric:tabular-nums;flex-shrink:0}:host .order-builder .ob-recap .tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:10px;border-top:1px solid var(--rule)}:host .order-builder .ob-recap .tot .l{font-weight:700;font-size:12px}:host .order-builder .ob-recap .tot .n{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 85;font-size:18px;font-variant-numeric:tabular-nums}:host .order-builder .ob-fab{display:none;position:fixed;inset-inline-end:20px;bottom:calc(var(--app-bottom-bar, 0px) + env(safe-area-inset-bottom,0px) + 20px);z-index:30;align-items:center;gap:10px;--ob-fab-ground: var(--ink-active);--ob-fab-on: var(--paper);background:var(--ob-fab-ground);color:var(--ob-fab-on);border-radius:var(--r-pill);padding:8px 10px 8px 16px;box-shadow:var(--shadow-3)}:host .order-builder .ob-fab .ft{display:grid;line-height:1.1}:host .order-builder .ob-fab .ft .k{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.65}:host .order-builder .ob-fab .ft .vv{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 82;font-size:16px}:host .order-builder .ob-fab .ft .vv .cur{font-family:var(--font-mono);font-size:.6em;opacity:.7;margin-inline-start:3px}:host .order-builder .ob-fab .open{appearance:none;cursor:pointer;border:0;background:color-mix(in srgb,var(--ob-fab-on) 14%,transparent);color:var(--ob-fab-on);font:inherit;font-size:12px;font-weight:700;border-radius:var(--r-pill);padding:8px 14px;display:inline-flex;align-items:center;gap:6px}:host .order-builder .ob-fab .open:hover{background:color-mix(in srgb,var(--ob-fab-on) 24%,transparent)}:host .order-builder .ob-fab .open:focus-visible{outline:2px solid var(--ob-fab-on);outline-offset:2px}:host .order-builder .ob-backdrop{display:none;position:fixed;inset:0;z-index:38;background:#0f11156b;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}:host .order-builder.ob-collapsed .ob-grid{grid-template-columns:minmax(0,1fr)}:host .order-builder.ob-collapsed .ob-fab{display:flex}:host .order-builder.ob-collapsed .ob-rail{position:fixed;top:0;inset-inline-end:0;height:100dvh;width:min(360px,92vw);z-index:40;background:var(--paper);border-inline-start:1px solid var(--rule);box-shadow:var(--shadow-3);padding:14px;overflow:auto;gap:var(--s-3);transform:translate(101%);transition:transform var(--t-base) var(--ease-out)}[dir=rtl] :host .order-builder.ob-collapsed .ob-rail{transform:translate(-101%)}:host .order-builder.ob-collapsed.ob-rail-open .ob-rail{transform:none}:host .order-builder.ob-collapsed.ob-rail-open .ob-backdrop{display:block}@media(max-width:1279px){:host .order-builder .ob-grid{grid-template-columns:minmax(0,1fr)}:host .order-builder .ob-fab{display:flex}:host .order-builder .ob-rail{position:fixed;top:0;inset-inline-end:0;height:100dvh;width:min(360px,92vw);z-index:40;background:var(--paper);border-inline-start:1px solid var(--rule);box-shadow:var(--shadow-3);padding:14px;overflow:auto;gap:var(--s-3);transform:translate(101%);transition:transform var(--t-base) var(--ease-out)}[dir=rtl] :host .order-builder .ob-rail{transform:translate(-101%)}:host .order-builder.ob-rail-open .ob-rail{transform:none}:host .order-builder.ob-rail-open .ob-backdrop{display:block}}:host ef-data-card .nm,:host ef-data-card .num,:host ef-data-card .ln-val,:host .ob-totals .v{unicode-bidi:plaintext}@media(max-width:767px){:host .order-builder{padding-bottom:calc(var(--app-bottom-bar, 0px) + env(safe-area-inset-bottom,0px) + 20px + 56px + var(--s-4))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "component", type: EfDatepickerAdvancedComponent, selector: "ef-datepicker-advanced", inputs: ["triggerLabelKey", "triggerLabel", "presets", "activePreset", "start", "end", "allowCustomRange", "mode", "selectionMode", "variant", "showTime"], outputs: ["rangeChange", "opened", "closed"] }, { kind: "component", type: EfInputNumberComponent, selector: "ef-inputnumber", inputs: ["value", "invalid", "format", "showButtons", "buttonLayout", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "prefix", "suffix", "currency", "currencyDisplay", "locale", "localeMatcher", "mode", "useGrouping", "minFractionDigits", "maxFractionDigits", "min", "max", "step", "allowEmpty", "inputSize", "size", "maxlength", "minlength", "pattern", "tabindex", "title", "ariaLabelledBy", "inputStyle", "inputStyleClass", "style", "styleClass", "primeNgVariant", "autofocus", "autocomplete", "fluid", "inline", "variant", "pt", "ptOptions", "dt", "unstyled"], outputs: ["inputEvent", "valueChangeEvent", "focusEvent", "blurEvent", "keyDownEvent", "clearEvent"] }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "variant", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition", "autofocus"], outputs: ["clickEvent"] }, { kind: "component", type: EfCardComponent, selector: "ef-card", inputs: ["titleKey", "title", "metaKey", "meta", "tone", "forceHead", "hasFoot", "collapsible", "overflowVisible", "loading", "skeleton", "skeletonRows", "skeletonHeight", "collapsed"], outputs: ["collapsedChange"] }, { kind: "component", type: EfChangeHistoryComponent, selector: "ef-change-history", inputs: ["entries", "titleKey", "emptyKey", "limit", "previewLimit", "collapsible", "startCollapsed"] }, { kind: "component", type: EfProductTypeaheadComponent, selector: "ef-product-typeahead", inputs: ["products", "productKeyField", "placeholderKey", "disabled", "currency", "locale", "showVariants"], outputs: ["productSelect"] }, { kind: "component", type: EfDataCardComponent, selector: "ef-data-card", inputs: ["mobileLayout", "columns", "rows", "trackByField", "pageNumber", "pageSize", "totalCount", "pageSizeOptions", "hidePager", "sort", "loading", "errorMsg", "loadingKey", "rowDoubleClickable", "hasActionsColumn", "rowActionsContext", "showViewAction", "showEditAction", "showDuplicateAction", "showDeleteAction", "showDensityControl", "showColumnPicker", "showExportControl", "exporting", "screenContext", "searchTerm", "tableKey", "defaultDensity", "reorderable", "fixedLayout"], outputs: ["pageChange", "pageSizeChange", "sortChange", "rowDoubleClick", "rowAction", "exportRequest", "clearSearch", "retry", "rowReorder"] }, { kind: "directive", type: EfColumnTemplateDirective, selector: "[efColumnTemplate]", inputs: ["efColumnTemplate"] }, { kind: "pipe", type: i1$3.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfOrderBuilderComponent, decorators: [{
             type: Component,
@@ -5692,7 +5750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         EfProductTypeaheadComponent,
                         EfDataCardComponent,
                         EfColumnTemplateDirective,
-                    ], template: "<div\n  class=\"order-builder\"\n  [class.ob-collapsed]=\"focusMode()\"\n  [class.ob-rail-open]=\"railOpen()\">\n  <div class=\"ob-grid\">\n    <div class=\"ob-main\">\n      <!-- Order header: customer + date + express add (one card) -->\n      <ef-card\n        titleKey=\"order_builder.section_order\"\n        [metaKey]=\"readonly() ? '' : 'order_builder.quick_add_hint'\"\n        [overflowVisible]=\"true\">\n        <div class=\"ob-order-head\">\n          <div class=\"form-grid\">\n            <div class=\"field col-6\">\n              <ef-label labelKey=\"label.customer\" for=\"ob-cust\" [required]=\"true\" />\n              <ef-select\n                inputId=\"ob-cust\"\n                [options]=\"customers()\"\n                optionLabel=\"companyName\"\n                optionValue=\"customerId\"\n                [ngModel]=\"order().customerId\"\n                (ngModelChange)=\"updateCustomer($event)\"\n                [disabled]=\"readonly()\"\n                [showClear]=\"true\"\n                [filter]=\"true\"\n                filterBy=\"companyName\"\n                filterPlaceholderKey=\"label.search_customer\"\n                appendTo=\"body\"\n                placeholderKey=\"label.select_customer\" />\n            </div>\n            <div class=\"field col-3\">\n              <ef-label labelKey=\"label.order_date\" for=\"ob-date\" [required]=\"true\" />\n              <ef-datepicker-advanced\n                mode=\"field\"\n                selectionMode=\"single\"\n                inputId=\"ob-date\"\n                placeholderKey=\"date_select_date\"\n                [ngModel]=\"order().orderDate\"\n                (ngModelChange)=\"updateOrderDate($event)\"\n                [disabled]=\"readonly()\" />\n            </div>\n          </div>\n\n          @if (!readonly()) {\n            <div class=\"qa-grid\">\n              <div class=\"qa-combo-wrap\">\n                <ef-label labelKey=\"label.article\" />\n                <ef-product-typeahead\n                  [products]=\"products()\"\n                  [productKeyField]=\"productKeyField()\"\n                  placeholderKey=\"label.search_product\"\n                  [currency]=\"currency()\"\n                  [locale]=\"locale()\"\n                  (productSelect)=\"onTypeaheadSelect($event)\"\n                  [showVariants]=\"false\" />\n              </div>\n              <div class=\"qa-price\">\n                <ef-label labelKey=\"label.sale_price\" />\n                <ef-inputnumber\n                  variant=\"comptoir\"\n                  [value]=\"quickAddPrice()\"\n                  (valueChangeEvent)=\"quickAddPrice.set($event ?? 0)\"\n                  [minFractionDigits]=\"2\"\n                  [maxFractionDigits]=\"2\"\n                  [locale]=\"locale()\"\n                  [disabled]=\"readonly()\" />\n              </div>\n              <div class=\"qa-qtyf\">\n                <ef-label labelKey=\"label.quantity\" />\n                <ef-inputnumber\n                  variant=\"comptoir\"\n                  [ngModel]=\"quickAddQuantity()\"\n                  (ngModelChange)=\"quickAddQuantity.set($event)\"\n                  [min]=\"0\"\n                  [maxFractionDigits]=\"4\"\n                  [locale]=\"locale()\"\n                  [disabled]=\"readonly()\"\n                />\n              </div>\n              <div class=\"qa-go\">\n                <!-- Ghost while the preconditions are unmet, tenant once the\n                     line is addable. A disabled control painted in a faded\n                     tenant fill reads as an enabled button that lost its\n                     colour, which is the greyed-out accent the design brief\n                     bans; ghost reads as \"not yet\". -->\n                <ef-button\n                  labelKey=\"action.add\"\n                  icon=\"pi pi-plus\"\n                  variant=\"comptoir\"\n                  size=\"base\"\n                  [severity]=\"quickAddDisabled() ? 'ghost' : 'tenant'\"\n                  [disabled]=\"quickAddDisabled()\"\n                  (clickEvent)=\"addQuickProduct()\" />\n              </div>\n            </div>\n          }\n        </div>\n      </ef-card>\n\n      <!-- Lines.\n\n           ef-data-card owns the panel here instead of sitting inside an\n           ef-card: `.tbl-wrap` already draws a bordered, rounded surface, so\n           nesting it in another one would be a card inside a card. The title\n           and the card's actions move into the head slots it provides.\n\n           The columns are declared in TS (`lineColumns`) so discount and tax\n           follow the document config, and so one definition drives both the\n           desktop table and the mobile cards. Only the article column is\n           elastic; every other column holds a number of known magnitude and\n           gets a fixed track, which keeps the decimals aligned down the\n           table rather than shifting with the longest description. -->\n      <ef-data-card\n        [columns]=\"lineColumns()\"\n        [rows]=\"orderLines()\"\n        trackByField=\"id\"\n        [hidePager]=\"true\"\n        defaultDensity=\"compact\"\n        [reorderable]=\"!readonly()\"\n        [fixedLayout]=\"true\"\n        (rowReorder)=\"reorderLine($event)\"\n        mobileLayout=\"card\">\n\n        <div tbl-head-info class=\"ob-lines-head\">\n          <span class=\"strong\">{{ 'order_builder.lines' | translate }}</span>\n          <span class=\"meta\">\u00B7 {{ orderLines().length }}</span>\n        </div>\n\n        <div tbl-head-actions class=\"head-actions\">\n          @if (config().showCatalogue && !readonly()) {\n            <ef-button\n              labelKey=\"action.open_catalogue\"\n              icon=\"pi pi-box\"\n              severity=\"secondary\"\n              [text]=\"true\"\n              (clickEvent)=\"handleOpenCatalogue()\" />\n          }\n          <ef-button\n            [labelKey]=\"focusMode() ? 'order_builder.show_summary' : 'order_builder.fullscreen'\"\n            icon=\"pi pi-window-maximize\"\n            severity=\"secondary\"\n            [text]=\"true\"\n            (clickEvent)=\"toggleFocus()\" />\n        </div>\n\n        <span empty-state>{{ 'order_builder.empty' | translate }}</span>\n        <span empty-state-mobile>{{ 'order_builder.empty' | translate }}</span>\n\n        <ng-template efColumnTemplate=\"product\" let-item let-i=\"index\">\n          <div class=\"p\">\n            <span class=\"ln\">{{ i + 1 }}</span>\n            <span class=\"pp\">\n              <span class=\"nm\">{{ item.productDescription }}</span>\n            </span>\n          </div>\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"price\" let-item>\n          @if (!readonly() && isEditingCell(item, 'price')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.productUnitPrice\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [minFractionDigits]=\"2\"\n              [maxFractionDigits]=\"2\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'price')\">\n              {{ item.productUnitPrice | number: '1.2-2' : locale() }}\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"qty\" let-item>\n          @if (!readonly() && isEditingCell(item, 'qty')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.quantity\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [maxFractionDigits]=\"4\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'qty')\">\n              {{ item.quantity | number: '1.0-4' : locale() }}\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"discount\" let-item>\n          @if (!readonly() && isEditingCell(item, 'discount')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.discount\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [max]=\"100\"\n              [maxFractionDigits]=\"2\"\n              suffix=\" %\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'discount')\">\n              {{ item.discount | number: '1.0-2' : locale() }} %\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"tax\" let-item>\n          @if (!readonly() && isEditingCell(item, 'tva')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.taxRate\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [max]=\"100\"\n              [maxFractionDigits]=\"2\"\n              suffix=\" %\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'tva')\">\n              {{ (item.taxRate ?? 0) | number: '1.0-2' : locale() }} %\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"subtotal\" let-item>\n          {{ calculateSubtotal(item) | number: '1.2-2' : locale() }}\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"remove\" let-item>\n          <ef-button\n            icon=\"pi pi-trash\"\n            severity=\"danger\"\n            [text]=\"true\"\n            styleClass=\"ob-del\"\n            (clickEvent)=\"removeOrderLine(item.id)\" />\n        </ng-template>\n      </ef-data-card>\n\n    </div>\n\n    <!-- CONTEXT RAIL (1/3) -->\n    <aside class=\"ob-rail\">\n      <!-- Totaux (top) -->\n      <ef-card titleKey=\"order_builder.totals\" [meta]=\"currency()\">\n        <div class=\"ob-totals\">\n          <div class=\"row\">\n            <span class=\"lbl\">{{ 'order_builder.gross' | translate }}</span>\n            <span class=\"v\">{{ grossTotal() | number: '1.2-2' : locale() }}</span>\n          </div>\n          <div class=\"row discount\">\n            <span class=\"lbl\">{{ 'order_builder.discount' | translate }}</span>\n            <span class=\"v\">\u2212{{ discountTotal() | number: '1.2-2' : locale() }}</span>\n          </div>\n          <div class=\"row\">\n            <span class=\"lbl\">{{ 'order_builder.tax' | translate }}</span>\n            <span class=\"v\">{{ tvaTotal() | number: '1.2-2' : locale() }}</span>\n          </div>\n          <hr />\n          <div class=\"row grand\">\n            <span class=\"lbl\">{{ 'order_builder.grand_total' | translate }}</span>\n            <span class=\"v\">{{ finalTotal() | number: '1.2-2' : locale() }}<span class=\"cur\">{{ currency() }}</span></span>\n          </div>\n        </div>\n      </ef-card>\n\n      <!-- R\u00E9capitulatif par format -->\n      @if (productsSummary().items.length > 0) {\n        <ef-card titleKey=\"order_builder.recap\" metaKey=\"order_builder.auto\">\n          <div class=\"ob-recap\">\n            <div class=\"cols\">\n              @for (col of recapColumns(); track $index) {\n                <div class=\"grp\">\n                  @for (seg of col; track seg.code) {\n                    <div class=\"seg\">\n                      <span class=\"fmt\">{{ seg.label }}</span>\n                      <span class=\"n\">{{ seg.count | number: '1.0-0' : locale() }}</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n            <div class=\"tot\">\n              <span class=\"l\">{{ 'order_builder.total_units' | translate }}</span>\n              <span class=\"n\">{{ productsSummary().totalCount | number: '1.0-0' : locale() }}</span>\n            </div>\n          </div>\n        </ef-card>\n      }\n\n      <!-- Historique (optional, component-owned) -->\n      @if (hasAudit()) {\n        <ef-change-history [entries]=\"auditEntries()\" />\n      }\n    </aside>\n  </div>\n\n  <!-- Floating summary FAB + backdrop -->\n  <button type=\"button\" class=\"ob-backdrop\" aria-hidden=\"true\" tabindex=\"-1\" (click)=\"toggleRail(false)\"></button>\n  <div class=\"ob-fab\" role=\"status\">\n    <div class=\"ft\">\n      <span class=\"k\">{{ 'order_builder.total_units' | translate }} \u00B7 {{ productsSummary().totalCount }}</span>\n      <span class=\"vv\">{{ finalTotal() | number: '1.2-2' : locale() }}<span class=\"cur\">{{ currency() }}</span></span>\n    </div>\n    <button type=\"button\" class=\"open\" (click)=\"toggleRail(true)\">\n      {{ 'order_builder.summary' | translate }}\n    </button>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .order-builder{display:grid;gap:var(--s-3)}:host .order-builder .head-actions{display:flex;align-items:center;gap:6px}:host .order-builder .ob-empty{padding:28px 16px;text-align:center;color:var(--text-mute);font-size:13px}:host .order-builder .text-mute{color:var(--text-mute);font-weight:600}:host .order-builder .form-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(12,minmax(0,1fr))}:host .order-builder .form-grid>.col-3{grid-column:span 3}:host .order-builder .form-grid>.col-4{grid-column:span 4}:host .order-builder .form-grid>.col-5{grid-column:span 5}:host .order-builder .form-grid>.col-6{grid-column:span 6}@media(max-width:767px){:host .order-builder .form-grid>[class*=col-]{grid-column:span 12}}:host .order-builder .field{display:grid;gap:4px}:host .order-builder .field>label{font-size:11px;font-weight:700;color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em}:host .order-builder .field .req{color:var(--st-cancelled-fg);margin-inline-start:2px}:host .order-builder .ob-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);align-items:start}@media(min-width:1280px){:host .order-builder .ob-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}:host .order-builder .ob-main{display:grid;gap:var(--s-3);min-width:0}:host .order-builder .ob-rail{display:grid;gap:var(--s-3);align-content:start}@media(min-width:1280px){:host .order-builder .ob-rail{position:sticky;top:44px}}:host .order-builder .ob-order-head{display:grid;gap:var(--s-4)}:host .order-builder .qa-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:end;padding-top:var(--s-3);border-top:1px solid var(--rule-soft)}:host .order-builder .qa-combo-wrap{flex:1 1 260px;min-width:0}:host .order-builder .qa-price{flex:0 1 132px}:host .order-builder .qa-qtyf{flex:0 0 132px}:host .order-builder .qa-go{flex:0 0 auto}@media(max-width:560px){:host .order-builder .qa-combo-wrap,:host .order-builder .qa-price,:host .order-builder .qa-qtyf,:host .order-builder .qa-go{flex:1 1 100%}}:host .order-builder .qin{width:58px;text-align:end;font:inherit;font-family:var(--font-mono);font-weight:700;padding:6px 8px;min-height:34px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper-alt);color:var(--text);outline:0;-moz-appearance:textfield}:host .order-builder .qin::-webkit-outer-spin-button,:host .order-builder .qin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host .order-builder .qin:focus{border-color:var(--tenant-400);box-shadow:0 0 0 3px var(--tenant-100)}:host .order-builder ef-data-card{font-size:13px}:host .order-builder ef-data-card .p{display:flex;align-items:baseline;gap:9px;line-height:1.25}:host .order-builder ef-data-card .p .ln{flex:0 0 auto;min-width:15px;text-align:end;font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--text-soft)}:host .order-builder ef-data-card .p .pp{display:grid;gap:1px;min-width:0}:host .order-builder ef-data-card .p .nm{font-weight:600;letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .order-builder ef-data-card .p .nm em{font-style:normal;color:var(--text-mute);font-weight:600}:host .order-builder ef-data-card .p .ref{font-family:var(--font-mono);font-size:10.5px;color:var(--text-soft);font-weight:600}:host .order-builder ef-data-card ef-inputnumber,:host .order-builder ef-data-card ef-inputnumber .ef-field-control,:host .order-builder ef-data-card ef-inputnumber input{width:100%;min-width:0}:host .order-builder ef-data-card .num,:host .order-builder ef-data-card .total{font-family:var(--font-mono);font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums}:host .order-builder ef-data-card .ln-val{appearance:none;width:100%;margin:0;padding:5px 8px;border:1px solid transparent;border-radius:7px;background:transparent;font:inherit;font-family:var(--font-mono);font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;color:inherit;text-align:end;cursor:text;transition:background .12s ease,border-color .12s ease}:host .order-builder ef-data-card .ln-val:hover:not(:disabled){background:var(--paper);border-color:var(--rule)}:host .order-builder ef-data-card .ln-val:focus-visible{outline:none;background:var(--paper);border-color:var(--tenant, var(--rule))}:host .order-builder ef-data-card .ln-val:disabled{cursor:default;background:transparent;border-color:transparent}:host .order-builder ef-data-card .total{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 85;font-size:13.5px}:host .order-builder ef-data-card .cur{font-size:9.5px;color:var(--text-soft);margin-inline-start:3px}:host .order-builder ef-data-card .free{color:var(--st-delivered-fg)}:host .order-builder .ob-lines-head{display:flex;align-items:baseline;gap:6px;min-width:0}:host .order-builder .ob-lines-head .strong{font-weight:700;color:var(--text)}:host .order-builder .ob-lines-head .meta{color:var(--text-soft)}:host .order-builder .ob-del{color:var(--text-soft)}:host .order-builder .ob-del:hover{color:var(--st-cancelled-fg);border-color:var(--st-cancelled-bg)}:host .order-builder .ob-totals{display:grid;gap:6px}:host .order-builder .ob-totals .row{display:flex;justify-content:space-between;align-items:baseline;gap:14px}:host .order-builder .ob-totals .row .lbl{font-size:12px;font-weight:600;color:var(--text-mute)}:host .order-builder .ob-totals .row .v{font-family:var(--font-mono);font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px}:host .order-builder .ob-totals .row.discount .v{color:var(--st-pending-fg)}:host .order-builder .ob-totals hr{border:0;border-top:1px solid var(--rule);margin:5px 0}:host .order-builder .ob-totals .grand .lbl{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 85;font-size:13.5px;color:var(--text)}:host .order-builder .ob-totals .grand .v{font-family:var(--font-display);font-variation-settings:\"opsz\" 96,\"wght\" 700,\"wdth\" 80;font-size:26px;letter-spacing:-.03em;color:var(--text)}:host .order-builder .ob-totals .grand .cur{font-family:var(--font-mono);font-size:.4em;color:var(--text-mute);margin-inline-start:4px}:host .order-builder .ob-recap .cols{display:grid;grid-template-columns:1fr 1fr}:host .order-builder .ob-recap .grp{display:flex;flex-direction:column;gap:3px;min-width:0}:host .order-builder .ob-recap .grp:first-child{padding-inline-end:14px}:host .order-builder .ob-recap .grp+.grp{padding-inline-start:14px;border-inline-start:1px solid var(--rule)}:host .order-builder .ob-recap .seg{display:flex;justify-content:space-between;align-items:baseline;gap:8px}:host .order-builder .ob-recap .seg .fmt{font-size:11.5px;font-weight:700;color:var(--text);letter-spacing:-.005em;min-width:0}:host .order-builder .ob-recap .seg .fmt:after{content:\":\";color:var(--text-soft)}:host .order-builder .ob-recap .seg .n{font-family:var(--font-mono);font-weight:700;font-size:12px;color:var(--text);font-variant-numeric:tabular-nums;flex-shrink:0}:host .order-builder .ob-recap .tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:10px;border-top:1px solid var(--rule)}:host .order-builder .ob-recap .tot .l{font-weight:700;font-size:12px}:host .order-builder .ob-recap .tot .n{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 85;font-size:18px;font-variant-numeric:tabular-nums}:host .order-builder .ob-rail-close{display:none}:host .order-builder .ob-fab{display:none;position:fixed;inset-inline-end:20px;bottom:calc(var(--app-bottom-bar, 0px) + env(safe-area-inset-bottom,0px) + 20px);z-index:30;align-items:center;gap:10px;background:var(--ink-active);color:var(--paper);border-radius:var(--r-pill);padding:8px 10px 8px 16px;box-shadow:var(--shadow-3)}:host .order-builder .ob-fab .ft{display:grid;line-height:1.1}:host .order-builder .ob-fab .ft .k{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.65}:host .order-builder .ob-fab .ft .vv{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 82;font-size:16px}:host .order-builder .ob-fab .ft .vv .cur{font-family:var(--font-mono);font-size:.6em;opacity:.7;margin-inline-start:3px}:host .order-builder .ob-fab .open{appearance:none;cursor:pointer;border:0;background:#ffffff24;color:#fff;font:inherit;font-size:12px;font-weight:700;border-radius:var(--r-pill);padding:8px 14px;display:inline-flex;align-items:center;gap:6px}:host .order-builder .ob-fab .open:hover{background:#ffffff3d}:host .order-builder .ob-backdrop{display:none;position:fixed;inset:0;z-index:38;background:#0f11156b;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}:host .order-builder.ob-collapsed .ob-grid{grid-template-columns:minmax(0,1fr)}:host .order-builder.ob-collapsed .ob-fab{display:flex}:host .order-builder.ob-collapsed .ob-rail{position:fixed;top:0;inset-inline-end:0;height:100dvh;width:min(360px,92vw);z-index:40;background:var(--paper);border-inline-start:1px solid var(--rule);box-shadow:var(--shadow-3);padding:14px;overflow:auto;gap:var(--s-3);transform:translate(101%);transition:transform var(--t-base) var(--ease-out)}[dir=rtl] :host .order-builder.ob-collapsed .ob-rail{transform:translate(-101%)}:host .order-builder.ob-collapsed .ob-rail-close{display:inline-flex}:host .order-builder.ob-collapsed.ob-rail-open .ob-rail{transform:none}:host .order-builder.ob-collapsed.ob-rail-open .ob-backdrop{display:block}@media(max-width:1279px){:host .order-builder .ob-grid{grid-template-columns:minmax(0,1fr)}:host .order-builder .ob-fab{display:flex}:host .order-builder .ob-rail{position:fixed;top:0;inset-inline-end:0;height:100dvh;width:min(360px,92vw);z-index:40;background:var(--paper);border-inline-start:1px solid var(--rule);box-shadow:var(--shadow-3);padding:14px;overflow:auto;gap:var(--s-3);transform:translate(101%);transition:transform var(--t-base) var(--ease-out)}[dir=rtl] :host .order-builder .ob-rail{transform:translate(-101%)}:host .order-builder .ob-rail-close{display:inline-flex!important}:host .order-builder.ob-rail-open .ob-rail{transform:none}:host .order-builder.ob-rail-open .ob-backdrop{display:block}}:host ef-data-card .nm,:host ef-data-card .num,:host ef-data-card .ln-val,:host .ob-totals .v,:host .ob-sum-val{unicode-bidi:plaintext}@media(max-width:767px){:host .order-builder{padding-bottom:calc(var(--app-bottom-bar, 0px) + env(safe-area-inset-bottom,0px) + 20px + 56px + var(--s-4))}}\n"] }]
+                    ], template: "<div\n  class=\"order-builder\"\n  [class.ob-collapsed]=\"focusMode()\"\n  [class.ob-rail-open]=\"railOpen()\">\n  <div class=\"ob-grid\">\n    <div class=\"ob-main\">\n      <!-- Order header: customer + date + express add (one card) -->\n      <ef-card\n        titleKey=\"order_builder.section_order\"\n        [metaKey]=\"readonly() ? '' : 'order_builder.quick_add_hint'\"\n        [overflowVisible]=\"true\">\n        <div class=\"ob-order-head\">\n          <div class=\"form-grid\">\n            <div class=\"field col-6\">\n              <ef-label labelKey=\"label.customer\" for=\"ob-cust\" [required]=\"true\" />\n              <ef-select\n                inputId=\"ob-cust\"\n                [options]=\"customers()\"\n                optionLabel=\"companyName\"\n                optionValue=\"customerId\"\n                [ngModel]=\"order().customerId\"\n                (ngModelChange)=\"updateCustomer($event)\"\n                [disabled]=\"readonly()\"\n                [showClear]=\"true\"\n                [filter]=\"true\"\n                filterBy=\"companyName\"\n                filterPlaceholderKey=\"label.search_customer\"\n                appendTo=\"body\"\n                placeholderKey=\"label.select_customer\" />\n            </div>\n            <div class=\"field col-3\">\n              <ef-label labelKey=\"label.order_date\" for=\"ob-date\" [required]=\"true\" />\n              <ef-datepicker-advanced\n                mode=\"field\"\n                selectionMode=\"single\"\n                inputId=\"ob-date\"\n                placeholderKey=\"date_select_date\"\n                [ngModel]=\"order().orderDate\"\n                (ngModelChange)=\"updateOrderDate($event)\"\n                [disabled]=\"readonly()\" />\n            </div>\n          </div>\n\n          @if (!readonly()) {\n            <div class=\"qa-grid\">\n              <div class=\"qa-combo-wrap\">\n                <ef-label labelKey=\"label.article\" />\n                <ef-product-typeahead\n                  [products]=\"products()\"\n                  [productKeyField]=\"productKeyField()\"\n                  placeholderKey=\"label.search_product\"\n                  [currency]=\"currency()\"\n                  [locale]=\"locale()\"\n                  (productSelect)=\"onTypeaheadSelect($event)\"\n                  [showVariants]=\"false\" />\n              </div>\n              <div class=\"qa-price\">\n                <ef-label labelKey=\"label.sale_price\" />\n                <ef-inputnumber\n                  variant=\"comptoir\"\n                  [value]=\"quickAddPrice()\"\n                  (valueChangeEvent)=\"quickAddPrice.set($event ?? 0)\"\n                  [minFractionDigits]=\"2\"\n                  [maxFractionDigits]=\"2\"\n                  [locale]=\"locale()\"\n                  [disabled]=\"readonly()\" />\n              </div>\n              <div class=\"qa-qtyf\">\n                <ef-label labelKey=\"label.quantity\" />\n                <ef-inputnumber\n                  variant=\"comptoir\"\n                  [ngModel]=\"quickAddQuantity()\"\n                  (ngModelChange)=\"quickAddQuantity.set($event)\"\n                  [min]=\"0\"\n                  [maxFractionDigits]=\"4\"\n                  [locale]=\"locale()\"\n                  [disabled]=\"readonly()\"\n                />\n              </div>\n              <div class=\"qa-go\">\n                <!-- Ghost while the preconditions are unmet, tenant once the\n                     line is addable. A disabled control painted in a faded\n                     tenant fill reads as an enabled button that lost its\n                     colour, which is the greyed-out accent the design brief\n                     bans; ghost reads as \"not yet\". -->\n                <ef-button\n                  labelKey=\"action.add\"\n                  icon=\"pi pi-plus\"\n                  variant=\"comptoir\"\n                  size=\"base\"\n                  [severity]=\"quickAddDisabled() ? 'ghost' : 'tenant'\"\n                  [disabled]=\"quickAddDisabled()\"\n                  (clickEvent)=\"addQuickProduct()\" />\n              </div>\n            </div>\n          }\n        </div>\n      </ef-card>\n\n      <!-- Lines.\n\n           ef-data-card owns the panel here instead of sitting inside an\n           ef-card: `.tbl-wrap` already draws a bordered, rounded surface, so\n           nesting it in another one would be a card inside a card. The title\n           and the card's actions move into the head slots it provides.\n\n           The columns are declared in TS (`lineColumns`) so discount and tax\n           follow the document config, and so one definition drives both the\n           desktop table and the mobile cards. Only the article column is\n           elastic; every other column holds a number of known magnitude and\n           gets a fixed track, which keeps the decimals aligned down the\n           table rather than shifting with the longest description. -->\n      <ef-data-card\n        [columns]=\"lineColumns()\"\n        [rows]=\"orderLines()\"\n        trackByField=\"id\"\n        [hidePager]=\"true\"\n        defaultDensity=\"compact\"\n        [reorderable]=\"!readonly()\"\n        [fixedLayout]=\"true\"\n        (rowReorder)=\"reorderLine($event)\"\n        mobileLayout=\"card\">\n\n        <div tbl-head-info class=\"ob-lines-head\">\n          <span class=\"strong\">{{ 'order_builder.lines' | translate }}</span>\n          <span class=\"meta\">\u00B7 {{ orderLines().length }}</span>\n        </div>\n\n        <div tbl-head-actions class=\"head-actions\">\n          @if (config().showCatalogue && !readonly()) {\n            <ef-button\n              labelKey=\"action.open_catalogue\"\n              icon=\"pi pi-box\"\n              severity=\"secondary\"\n              [text]=\"true\"\n              (clickEvent)=\"handleOpenCatalogue()\" />\n          }\n          <ef-button\n            [labelKey]=\"focusMode() ? 'order_builder.show_summary' : 'order_builder.fullscreen'\"\n            icon=\"pi pi-window-maximize\"\n            severity=\"secondary\"\n            [text]=\"true\"\n            (clickEvent)=\"toggleFocus()\" />\n        </div>\n\n        <span empty-state>{{ 'order_builder.empty' | translate }}</span>\n        <span empty-state-mobile>{{ 'order_builder.empty' | translate }}</span>\n\n        <ng-template efColumnTemplate=\"product\" let-item let-i=\"index\">\n          <div class=\"p\">\n            <span class=\"ln\">{{ i + 1 }}</span>\n            <span class=\"pp\">\n              <span class=\"nm\">{{ item.productDescription }}</span>\n            </span>\n          </div>\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"price\" let-item>\n          @if (!readonly() && isEditingCell(item, 'price')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.productUnitPrice\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [minFractionDigits]=\"2\"\n              [maxFractionDigits]=\"2\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'price')\">\n              {{ item.productUnitPrice | number: '1.2-2' : locale() }}\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"qty\" let-item>\n          @if (!readonly() && isEditingCell(item, 'qty')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.quantity\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [maxFractionDigits]=\"4\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'qty')\">\n              {{ item.quantity | number: '1.0-4' : locale() }}\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"discount\" let-item>\n          @if (!readonly() && isEditingCell(item, 'discount')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.discount\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [max]=\"100\"\n              [maxFractionDigits]=\"2\"\n              suffix=\" %\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'discount')\">\n              {{ item.discount | number: '1.0-2' : locale() }} %\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"tax\" let-item>\n          @if (!readonly() && isEditingCell(item, 'tva')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.taxRate\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [max]=\"100\"\n              [maxFractionDigits]=\"2\"\n              suffix=\" %\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'tva')\">\n              {{ (item.taxRate ?? 0) | number: '1.0-2' : locale() }} %\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"subtotal\" let-item>\n          {{ calculateSubtotal(item) | number: '1.2-2' : locale() }}\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"remove\" let-item>\n          <ef-button\n            icon=\"pi pi-trash\"\n            severity=\"danger\"\n            [text]=\"true\"\n            styleClass=\"ob-del\"\n            (clickEvent)=\"removeOrderLine(item.id)\" />\n        </ng-template>\n      </ef-data-card>\n\n    </div>\n\n    <!-- CONTEXT RAIL (1/3) -->\n    <aside class=\"ob-rail\">\n      <!-- Totaux (top) -->\n      <ef-card titleKey=\"order_builder.totals\" [meta]=\"currency()\">\n        <div class=\"ob-totals\">\n          <div class=\"row\">\n            <span class=\"lbl\">{{ 'order_builder.gross' | translate }}</span>\n            <span class=\"v\">{{ grossTotal() | number: '1.2-2' : locale() }}</span>\n          </div>\n          <div class=\"row discount\">\n            <span class=\"lbl\">{{ 'order_builder.discount' | translate }}</span>\n            <span class=\"v\">\u2212{{ discountTotal() | number: '1.2-2' : locale() }}</span>\n          </div>\n          <div class=\"row\">\n            <span class=\"lbl\">{{ 'order_builder.tax' | translate }}</span>\n            <span class=\"v\">{{ tvaTotal() | number: '1.2-2' : locale() }}</span>\n          </div>\n          <hr />\n          <div class=\"row grand\">\n            <span class=\"lbl\">{{ 'order_builder.grand_total' | translate }}</span>\n            <span class=\"v\">{{ finalTotal() | number: '1.2-2' : locale() }}<span class=\"cur\">{{ currency() }}</span></span>\n          </div>\n        </div>\n      </ef-card>\n\n      <!-- R\u00E9capitulatif par format -->\n      @if (productsSummary().items.length > 0) {\n        <ef-card titleKey=\"order_builder.recap\" metaKey=\"order_builder.auto\">\n          <div class=\"ob-recap\">\n            <div class=\"cols\">\n              @for (col of recapColumns(); track $index) {\n                <div class=\"grp\">\n                  @for (seg of col; track seg.code) {\n                    <div class=\"seg\">\n                      <span class=\"fmt\">{{ seg.label }}</span>\n                      <span class=\"n\">{{ seg.count | number: '1.0-0' : locale() }}</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n            <div class=\"tot\">\n              <span class=\"l\">{{ 'order_builder.total_units' | translate }}</span>\n              <span class=\"n\">{{ productsSummary().totalCount | number: '1.0-0' : locale() }}</span>\n            </div>\n          </div>\n        </ef-card>\n      }\n\n      <!-- Historique (optional, component-owned) -->\n      @if (hasAudit()) {\n        <ef-change-history [entries]=\"auditEntries()\" />\n      }\n    </aside>\n  </div>\n\n  <!-- Floating summary FAB + backdrop -->\n  <button type=\"button\" class=\"ob-backdrop\" aria-hidden=\"true\" tabindex=\"-1\" (click)=\"toggleRail(false)\"></button>\n  <div class=\"ob-fab\" role=\"status\">\n    <div class=\"ft\">\n      <span class=\"k\">{{ 'order_builder.total_units' | translate }} \u00B7 {{ productsSummary().totalCount }}</span>\n      <span class=\"vv\">{{ finalTotal() | number: '1.2-2' : locale() }}<span class=\"cur\">{{ currency() }}</span></span>\n    </div>\n    <button type=\"button\" class=\"open\" (click)=\"toggleRail(true)\">\n      {{ 'order_builder.summary' | translate }}\n    </button>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .order-builder{display:grid;gap:var(--s-3)}:host .order-builder .head-actions{display:flex;align-items:center;gap:6px}:host .order-builder .form-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(12,minmax(0,1fr))}:host .order-builder .form-grid>.col-3{grid-column:span 3}:host .order-builder .form-grid>.col-4{grid-column:span 4}:host .order-builder .form-grid>.col-5{grid-column:span 5}:host .order-builder .form-grid>.col-6{grid-column:span 6}@media(max-width:767px){:host .order-builder .form-grid>[class*=col-]{grid-column:span 12}}:host .order-builder .field{display:grid;gap:4px}:host .order-builder .field>label{font-size:11px;font-weight:700;color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em}:host .order-builder .ob-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);align-items:start}@media(min-width:1280px){:host .order-builder .ob-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}:host .order-builder .ob-main{display:grid;gap:var(--s-3);min-width:0}:host .order-builder .ob-rail{display:grid;gap:var(--s-3);align-content:start}@media(min-width:1280px){:host .order-builder .ob-rail{position:sticky;top:44px}}:host .order-builder .ob-order-head{display:grid;gap:var(--s-4)}:host .order-builder .qa-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:end;padding-top:var(--s-3);border-top:1px solid var(--rule-soft)}:host .order-builder .qa-combo-wrap{flex:1 1 260px;min-width:0}:host .order-builder .qa-price{flex:0 1 132px}:host .order-builder .qa-qtyf{flex:0 0 132px}:host .order-builder .qa-go{flex:0 0 auto}@media(max-width:560px){:host .order-builder .qa-combo-wrap,:host .order-builder .qa-price,:host .order-builder .qa-qtyf,:host .order-builder .qa-go{flex:1 1 100%}}:host .order-builder ef-data-card{font-size:13px}:host .order-builder ef-data-card .p{display:flex;align-items:baseline;gap:9px;line-height:1.25}:host .order-builder ef-data-card .p .ln{flex:0 0 auto;min-width:15px;text-align:end;font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--text-soft)}:host .order-builder ef-data-card .p .pp{display:grid;gap:1px;min-width:0}:host .order-builder ef-data-card .p .nm{font-weight:600;letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .order-builder ef-data-card .p .nm em{font-style:normal;color:var(--text-mute);font-weight:600}:host .order-builder ef-data-card ef-inputnumber,:host .order-builder ef-data-card ef-inputnumber .ef-field-control,:host .order-builder ef-data-card ef-inputnumber input{width:100%;min-width:0}:host .order-builder ef-data-card .num,:host .order-builder ef-data-card .total{font-family:var(--font-mono);font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums}:host .order-builder ef-data-card .ln-val{appearance:none;width:100%;margin:0;padding:5px 8px;border:1px solid transparent;border-radius:7px;background:transparent;font:inherit;font-family:var(--font-mono);font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;color:inherit;text-align:end;cursor:text;transition:background .12s ease,border-color .12s ease}:host .order-builder ef-data-card .ln-val:hover:not(:disabled){background:var(--paper);border-color:var(--rule)}:host .order-builder ef-data-card .ln-val:focus-visible{outline:none;background:var(--paper);border-color:var(--tenant, var(--rule))}:host .order-builder ef-data-card .ln-val:disabled{cursor:default;background:transparent;border-color:transparent}:host .order-builder ef-data-card .total{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 85;font-size:13.5px}:host .order-builder ef-data-card .cur{font-size:9.5px;color:var(--text-soft);margin-inline-start:3px}:host .order-builder .ob-lines-head{display:flex;align-items:baseline;gap:6px;min-width:0}:host .order-builder .ob-lines-head .strong{font-weight:700;color:var(--text)}:host .order-builder .ob-lines-head .meta{color:var(--text-soft)}:host .order-builder .ob-del{color:var(--text-soft)}:host .order-builder .ob-del:hover{color:var(--st-cancelled-fg);border-color:var(--st-cancelled-bg)}:host .order-builder .ob-totals{display:grid;gap:6px}:host .order-builder .ob-totals .row{display:flex;justify-content:space-between;align-items:baseline;gap:14px}:host .order-builder .ob-totals .row .lbl{font-size:12px;font-weight:600;color:var(--text-mute)}:host .order-builder .ob-totals .row .v{font-family:var(--font-mono);font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px}:host .order-builder .ob-totals .row.discount .v{color:var(--st-pending-fg)}:host .order-builder .ob-totals hr{border:0;border-top:1px solid var(--rule);margin:5px 0}:host .order-builder .ob-totals .grand .lbl{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 85;font-size:13.5px;color:var(--text)}:host .order-builder .ob-totals .grand .v{font-family:var(--font-display);font-variation-settings:\"opsz\" 96,\"wght\" 700,\"wdth\" 80;font-size:26px;letter-spacing:-.03em;color:var(--text)}:host .order-builder .ob-totals .grand .cur{font-family:var(--font-mono);font-size:.4em;color:var(--text-mute);margin-inline-start:4px}:host .order-builder .ob-recap .cols{display:grid;grid-template-columns:1fr 1fr}:host .order-builder .ob-recap .grp{display:flex;flex-direction:column;gap:3px;min-width:0}:host .order-builder .ob-recap .grp:first-child{padding-inline-end:14px}:host .order-builder .ob-recap .grp+.grp{padding-inline-start:14px;border-inline-start:1px solid var(--rule)}:host .order-builder .ob-recap .seg{display:flex;justify-content:space-between;align-items:baseline;gap:8px}:host .order-builder .ob-recap .seg .fmt{font-size:11.5px;font-weight:700;color:var(--text);letter-spacing:-.005em;min-width:0}:host .order-builder .ob-recap .seg .fmt:after{content:\":\";color:var(--text-soft)}:host .order-builder .ob-recap .seg .n{font-family:var(--font-mono);font-weight:700;font-size:12px;color:var(--text);font-variant-numeric:tabular-nums;flex-shrink:0}:host .order-builder .ob-recap .tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:10px;border-top:1px solid var(--rule)}:host .order-builder .ob-recap .tot .l{font-weight:700;font-size:12px}:host .order-builder .ob-recap .tot .n{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 85;font-size:18px;font-variant-numeric:tabular-nums}:host .order-builder .ob-fab{display:none;position:fixed;inset-inline-end:20px;bottom:calc(var(--app-bottom-bar, 0px) + env(safe-area-inset-bottom,0px) + 20px);z-index:30;align-items:center;gap:10px;--ob-fab-ground: var(--ink-active);--ob-fab-on: var(--paper);background:var(--ob-fab-ground);color:var(--ob-fab-on);border-radius:var(--r-pill);padding:8px 10px 8px 16px;box-shadow:var(--shadow-3)}:host .order-builder .ob-fab .ft{display:grid;line-height:1.1}:host .order-builder .ob-fab .ft .k{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.65}:host .order-builder .ob-fab .ft .vv{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 82;font-size:16px}:host .order-builder .ob-fab .ft .vv .cur{font-family:var(--font-mono);font-size:.6em;opacity:.7;margin-inline-start:3px}:host .order-builder .ob-fab .open{appearance:none;cursor:pointer;border:0;background:color-mix(in srgb,var(--ob-fab-on) 14%,transparent);color:var(--ob-fab-on);font:inherit;font-size:12px;font-weight:700;border-radius:var(--r-pill);padding:8px 14px;display:inline-flex;align-items:center;gap:6px}:host .order-builder .ob-fab .open:hover{background:color-mix(in srgb,var(--ob-fab-on) 24%,transparent)}:host .order-builder .ob-fab .open:focus-visible{outline:2px solid var(--ob-fab-on);outline-offset:2px}:host .order-builder .ob-backdrop{display:none;position:fixed;inset:0;z-index:38;background:#0f11156b;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}:host .order-builder.ob-collapsed .ob-grid{grid-template-columns:minmax(0,1fr)}:host .order-builder.ob-collapsed .ob-fab{display:flex}:host .order-builder.ob-collapsed .ob-rail{position:fixed;top:0;inset-inline-end:0;height:100dvh;width:min(360px,92vw);z-index:40;background:var(--paper);border-inline-start:1px solid var(--rule);box-shadow:var(--shadow-3);padding:14px;overflow:auto;gap:var(--s-3);transform:translate(101%);transition:transform var(--t-base) var(--ease-out)}[dir=rtl] :host .order-builder.ob-collapsed .ob-rail{transform:translate(-101%)}:host .order-builder.ob-collapsed.ob-rail-open .ob-rail{transform:none}:host .order-builder.ob-collapsed.ob-rail-open .ob-backdrop{display:block}@media(max-width:1279px){:host .order-builder .ob-grid{grid-template-columns:minmax(0,1fr)}:host .order-builder .ob-fab{display:flex}:host .order-builder .ob-rail{position:fixed;top:0;inset-inline-end:0;height:100dvh;width:min(360px,92vw);z-index:40;background:var(--paper);border-inline-start:1px solid var(--rule);box-shadow:var(--shadow-3);padding:14px;overflow:auto;gap:var(--s-3);transform:translate(101%);transition:transform var(--t-base) var(--ease-out)}[dir=rtl] :host .order-builder .ob-rail{transform:translate(-101%)}:host .order-builder.ob-rail-open .ob-rail{transform:none}:host .order-builder.ob-rail-open .ob-backdrop{display:block}}:host ef-data-card .nm,:host ef-data-card .num,:host ef-data-card .ln-val,:host .ob-totals .v{unicode-bidi:plaintext}@media(max-width:767px){:host .order-builder{padding-bottom:calc(var(--app-bottom-bar, 0px) + env(safe-area-inset-bottom,0px) + 20px + 56px + var(--s-4))}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], order: [{ type: i0.Input, args: [{ isSignal: true, alias: "order", required: true }] }, { type: i0.Output, args: ["orderChange"] }], products: [{ type: i0.Input, args: [{ isSignal: true, alias: "products", required: true }] }], customers: [{ type: i0.Input, args: [{ isSignal: true, alias: "customers", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], countGroupLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "countGroupLabels", required: false }] }], productKeyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "productKeyField", required: false }] }], backendErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "backendErrors", required: false }] }], auditEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "auditEntries", required: false }] }], openCatalogue: [{ type: i0.Output, args: ["openCatalogue"] }], orderChanged: [{ type: i0.Output, args: ["orderChanged"] }], orderValidated: [{ type: i0.Output, args: ["orderValidated"] }], productsAdded: [{ type: i0.Output, args: ["productsAdded"] }], focusMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusMode", required: false }] }, { type: i0.Output, args: ["focusModeChange"] }], typeahead: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EfProductTypeaheadComponent), { isSignal: true }] }] } });
 
 /**
@@ -5803,11 +5861,11 @@ class EfOrderSummaryComponent {
      */
     hasGroups = computed(() => this.groupedCounts().length > 0, ...(ngDevMode ? [{ debugName: "hasGroups" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfOrderSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfOrderSummaryComponent, isStandalone: true, selector: "ef-order-summary", inputs: { orderLines: { classPropertyName: "orderLines", publicName: "orderLines", isSignal: true, isRequired: true, transformFunction: null }, countGroupLabels: { classPropertyName: "countGroupLabels", publicName: "countGroupLabels", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, legendKey: { classPropertyName: "legendKey", publicName: "legendKey", isSignal: true, isRequired: false, transformFunction: null }, totalLabelKey: { classPropertyName: "totalLabelKey", publicName: "totalLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (hasGroups()) {\n  <p-fieldset [legend]=\"resolvedLegend()\">\n    <div class=\"ef-order-summary\">\n      <div class=\"ef-order-summary__content\">\n        @for (column of columnGroups(); track $index) {\n          <div class=\"ef-order-summary__column\">\n            @for (group of column; track group.code) {\n              <div class=\"ef-order-summary__item\">\n                <span class=\"ef-order-summary__label\">{{ group.label }}:</span>\n                <span class=\"ef-order-summary__count\">{{ group.count }}</span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <div class=\"ef-order-summary__footer\">\n        <span class=\"ef-order-summary__total-label\">{{ totalLabelKey() | translate }}</span>\n        <span class=\"ef-order-summary__total-count\">{{ totalCount() }}</span>\n      </div>\n    </div>\n  </p-fieldset>\n}\n", styles: [".ef-order-summary__content{display:flex;gap:2rem;padding:1rem .25rem}.ef-order-summary__column{flex:1;display:flex;flex-direction:column;gap:.25rem}.ef-order-summary__column:not(:last-child){border-right:1px solid var(--p-surface-200);padding-right:2rem}.ef-order-summary__item{display:flex;justify-content:space-between;align-items:center;font-size:.875rem}.ef-order-summary__label{font-weight:600;color:var(--p-surface-700)}:host-context(.dark) .ef-order-summary__label{color:var(--p-surface-300)}.ef-order-summary__count{font-weight:500;color:var(--p-surface-900)}:host-context(.dark) .ef-order-summary__count{color:var(--p-surface-100)}.ef-order-summary__footer{display:flex;justify-content:space-between;align-items:center;padding-top:.75rem;border-top:1px solid var(--p-surface-300)}.ef-order-summary__total-label,.ef-order-summary__total-count{font-size:1rem;font-weight:700;color:var(--p-primary-color)}.ef-order-summary__label,.ef-order-summary__count,.ef-order-summary__total-count{unicode-bidi:plaintext}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FieldsetModule }, { kind: "component", type: i1$7.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "style", "styleClass", "transitionOptions", "motionOptions", "collapsed"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfOrderSummaryComponent, isStandalone: true, selector: "ef-order-summary", inputs: { orderLines: { classPropertyName: "orderLines", publicName: "orderLines", isSignal: true, isRequired: true, transformFunction: null }, countGroupLabels: { classPropertyName: "countGroupLabels", publicName: "countGroupLabels", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, legendKey: { classPropertyName: "legendKey", publicName: "legendKey", isSignal: true, isRequired: false, transformFunction: null }, totalLabelKey: { classPropertyName: "totalLabelKey", publicName: "totalLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (hasGroups()) {\n  <p-fieldset [legend]=\"resolvedLegend()\">\n    <div class=\"ef-order-summary\">\n      <div class=\"ef-order-summary__content\">\n        @for (column of columnGroups(); track $index) {\n          <div class=\"ef-order-summary__column\">\n            @for (group of column; track group.code) {\n              <div class=\"ef-order-summary__item\">\n                <span class=\"ef-order-summary__label\">{{ group.label }}:</span>\n                <span class=\"ef-order-summary__count\">{{ group.count }}</span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <div class=\"ef-order-summary__footer\">\n        <span class=\"ef-order-summary__total-label\">{{ totalLabelKey() | translate }}</span>\n        <span class=\"ef-order-summary__total-count\">{{ totalCount() }}</span>\n      </div>\n    </div>\n  </p-fieldset>\n}\n", styles: [".ef-order-summary__content{display:flex;gap:2rem;padding:1rem .25rem}.ef-order-summary__column{flex:1;display:flex;flex-direction:column;gap:.25rem}.ef-order-summary__column:not(:last-child){border-right:1px solid var(--rule);padding-right:2rem}.ef-order-summary__item{display:flex;justify-content:space-between;align-items:center;font-size:.875rem}.ef-order-summary__label{font-weight:600;color:var(--text-mute)}.ef-order-summary__count{font-weight:500;color:var(--text)}.ef-order-summary__footer{display:flex;justify-content:space-between;align-items:center;padding-top:.75rem;border-top:1px solid var(--rule)}.ef-order-summary__total-label,.ef-order-summary__total-count{font-size:1rem;font-weight:700;color:var(--p-primary-color)}.ef-order-summary__label,.ef-order-summary__count,.ef-order-summary__total-count{unicode-bidi:plaintext}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FieldsetModule }, { kind: "component", type: i1$7.Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "style", "styleClass", "transitionOptions", "motionOptions", "collapsed"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfOrderSummaryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-order-summary', standalone: true, imports: [CommonModule, FieldsetModule, TranslateModule], template: "@if (hasGroups()) {\n  <p-fieldset [legend]=\"resolvedLegend()\">\n    <div class=\"ef-order-summary\">\n      <div class=\"ef-order-summary__content\">\n        @for (column of columnGroups(); track $index) {\n          <div class=\"ef-order-summary__column\">\n            @for (group of column; track group.code) {\n              <div class=\"ef-order-summary__item\">\n                <span class=\"ef-order-summary__label\">{{ group.label }}:</span>\n                <span class=\"ef-order-summary__count\">{{ group.count }}</span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <div class=\"ef-order-summary__footer\">\n        <span class=\"ef-order-summary__total-label\">{{ totalLabelKey() | translate }}</span>\n        <span class=\"ef-order-summary__total-count\">{{ totalCount() }}</span>\n      </div>\n    </div>\n  </p-fieldset>\n}\n", styles: [".ef-order-summary__content{display:flex;gap:2rem;padding:1rem .25rem}.ef-order-summary__column{flex:1;display:flex;flex-direction:column;gap:.25rem}.ef-order-summary__column:not(:last-child){border-right:1px solid var(--p-surface-200);padding-right:2rem}.ef-order-summary__item{display:flex;justify-content:space-between;align-items:center;font-size:.875rem}.ef-order-summary__label{font-weight:600;color:var(--p-surface-700)}:host-context(.dark) .ef-order-summary__label{color:var(--p-surface-300)}.ef-order-summary__count{font-weight:500;color:var(--p-surface-900)}:host-context(.dark) .ef-order-summary__count{color:var(--p-surface-100)}.ef-order-summary__footer{display:flex;justify-content:space-between;align-items:center;padding-top:.75rem;border-top:1px solid var(--p-surface-300)}.ef-order-summary__total-label,.ef-order-summary__total-count{font-size:1rem;font-weight:700;color:var(--p-primary-color)}.ef-order-summary__label,.ef-order-summary__count,.ef-order-summary__total-count{unicode-bidi:plaintext}\n"] }]
+            args: [{ selector: 'ef-order-summary', standalone: true, imports: [CommonModule, FieldsetModule, TranslateModule], template: "@if (hasGroups()) {\n  <p-fieldset [legend]=\"resolvedLegend()\">\n    <div class=\"ef-order-summary\">\n      <div class=\"ef-order-summary__content\">\n        @for (column of columnGroups(); track $index) {\n          <div class=\"ef-order-summary__column\">\n            @for (group of column; track group.code) {\n              <div class=\"ef-order-summary__item\">\n                <span class=\"ef-order-summary__label\">{{ group.label }}:</span>\n                <span class=\"ef-order-summary__count\">{{ group.count }}</span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <div class=\"ef-order-summary__footer\">\n        <span class=\"ef-order-summary__total-label\">{{ totalLabelKey() | translate }}</span>\n        <span class=\"ef-order-summary__total-count\">{{ totalCount() }}</span>\n      </div>\n    </div>\n  </p-fieldset>\n}\n", styles: [".ef-order-summary__content{display:flex;gap:2rem;padding:1rem .25rem}.ef-order-summary__column{flex:1;display:flex;flex-direction:column;gap:.25rem}.ef-order-summary__column:not(:last-child){border-right:1px solid var(--rule);padding-right:2rem}.ef-order-summary__item{display:flex;justify-content:space-between;align-items:center;font-size:.875rem}.ef-order-summary__label{font-weight:600;color:var(--text-mute)}.ef-order-summary__count{font-weight:500;color:var(--text)}.ef-order-summary__footer{display:flex;justify-content:space-between;align-items:center;padding-top:.75rem;border-top:1px solid var(--rule)}.ef-order-summary__total-label,.ef-order-summary__total-count{font-size:1rem;font-weight:700;color:var(--p-primary-color)}.ef-order-summary__label,.ef-order-summary__count,.ef-order-summary__total-count{unicode-bidi:plaintext}\n"] }]
         }], propDecorators: { orderLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "orderLines", required: true }] }], countGroupLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "countGroupLabels", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], legendKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendKey", required: false }] }], totalLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalLabelKey", required: false }] }] } });
 
 class EfProductCatalogueFilterComponent {
@@ -6210,7 +6268,7 @@ class EfProductCatalogueComponent {
         return (this.currencyPipe.transform(value, this.currencyCode(), 'symbol-narrow', '1.2-2') || '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfProductCatalogueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfProductCatalogueComponent, isStandalone: true, selector: "ef-product-catalogue", inputs: { products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: false, transformFunction: null }, categoryGroups: { classPropertyName: "categoryGroups", publicName: "categoryGroups", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedItems: { classPropertyName: "initialSelectedItems", publicName: "initialSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, defaultFilters: { classPropertyName: "defaultFilters", publicName: "defaultFilters", isSignal: true, isRequired: false, transformFunction: null }, trackByField: { classPropertyName: "trackByField", publicName: "trackByField", isSignal: true, isRequired: false, transformFunction: null }, currencyCode: { classPropertyName: "currencyCode", publicName: "currencyCode", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productsValidated: "productsValidated" }, queries: [{ propertyName: "productThumbnailTpl", first: true, predicate: ["productThumbnail"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sortMenu", first: true, predicate: ["sortMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"bg-surface-0 dark:bg-surface-950\">\n  <div class=\"flex flex-row gap-4\">\n    <!-- Filter Sidebar -->\n    <ef-product-catalogue-filter\n      [categoryGroups]=\"categoryGroups()\"\n      [products]=\"products()\"\n      [(selectedFilters)]=\"selectedFilters\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n    />\n\n    <!-- Product Grid -->\n    <div\n      class=\"min-h-96 flex-1 rounded-md border-2 border-dotted border-surface-200 bg-surface-50 p-4 dark:border-surface-700 dark:bg-surface-800\"\n    >\n      <div class=\"sticky top-0 z-10 w-full mb-4 bg-surface-50 dark:bg-surface-800 pb-2 -mt-4 pt-4 -mx-4 px-4\">\n        <p-iconfield iconPosition=\"left\" class=\"w-full\">\n          <p-inputicon class=\"pi pi-search\"></p-inputicon>\n          <input\n            pInputText\n            size=\"small\"\n            [(ngModel)]=\"productSearch\"\n            [placeholder]=\"'placeholder.search_products' | translate\"\n            class=\"w-full\"\n          />\n        </p-iconfield>\n      </div>\n      <div class=\"grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-4\">\n        @for (product of filteredProducts(); track trackKey(product)) {\n          <p-card\n            [header]=\"''\"\n            [class.border-2]=\"true\"\n            [class.border-blue-100]=\"getProductQuantity(product) > 0\"\n            [class.!bg-blue-100]=\"getProductQuantity(product) > 0\"\n            [class.dark:!border-blue-900]=\"getProductQuantity(product) > 0\"\n            [class.dark:!bg-blue-900]=\"getProductQuantity(product) > 0\"\n            [class.border-transparent]=\"getProductQuantity(product) === 0\"\n            class=\"cursor-pointer hover:shadow-md dark:hover:shadow-md dark:hover:shadow-gray-300/50\"\n          >\n            <ng-template pTemplate=\"header\">\n              <div class=\"w-full\">\n                @if (productThumbnailTpl()) {\n                  <ng-container *ngTemplateOutlet=\"productThumbnailTpl(); context: { $implicit: product }\"></ng-container>\n                } @else {\n                  <!-- Default fallback thumbnail -->\n                  <div class=\"flex h-[13rem] items-center justify-center bg-surface-100 text-3xl text-surface-400 dark:bg-surface-800\">\n                    <i class=\"pi pi-box\"></i>\n                  </div>\n                }\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"content\">\n              <div [innerHTML]=\"product.displayName\" class=\"h-14 font-semibold\"></div>\n            </ng-template>\n            <ng-template pTemplate=\"footer\">\n              @if (isVariableProduct(product)) {\n                <!-- Variable product: variant selector + per-variant quantities -->\n                <div class=\"flex items-center justify-between mb-2\">\n                  <p-badge\n                    severity=\"secondary\"\n                    [value]=\"getActiveVariants(product).length + ' ' + ('catalogue.variants' | translate)\"\n                    badgeSize=\"small\"\n                  />\n                  <div class=\"text-lg font-bold\">\n                    {{ formatPrice(product) }}\n                  </div>\n                </div>\n\n                <!-- Variant selector -->\n                <p-select\n                  [autofocus]=\"false\"\n                  [options]=\"getActiveVariants(product)\"\n                  optionLabel=\"title\"\n                  optionValue=\"variantId\"\n                  [ngModel]=\"getSelectedVariantId(product)\"\n                  (ngModelChange)=\"setSelectedVariant(product, $event)\"\n                  size=\"small\"\n                  styleClass=\"w-full mb-3\"\n                  [placeholder]=\"'placeholder.select_variant' | translate\"\n                />\n\n                <!-- Add button or quantity stepper for selected variant -->\n                <div class=\"mt-2\">\n                  @if (getProductQuantity(product) > 0) {\n                    <!-- Show per-variant breakdown -->\n                    @for (entry of selectedProducts(); track $index) {\n                      @if (productKey(entry.product) === productKey(product) && entry.variantId) {\n                        <div class=\"flex items-center justify-center gap-2 mb-2\">\n                          <span class=\"text-xs font-medium text-surface-600 dark:text-surface-400 min-w-12 text-center\">\n                            {{ getVariantTitle(product, entry.variantId) }}\n                          </span>\n                          <ef-quantity-stepper\n                            [ngModel]=\"entry.quantity\"\n                            (ngModelChange)=\"updateVariantQuantity(product, entry.variantId!, $event)\"\n                            [min]=\"0\"\n                            [max]=\"1000\"\n                            [maxFractionDigits]=\"4\"\n                            [locale]=\"localeCode()\"\n                          />\n                          <ef-button\n                            icon=\"pi pi-times\"\n                            severity=\"danger\"\n                            styleClass=\"!rounded-full !w-7 !h-7 !p-0\"\n                            size=\"small\"\n                            (clickEvent)=\"removeVariantSelection(product, entry.variantId!)\"\n                          />\n                        </div>\n                      }\n                    }\n                    <!-- Add another variant button -->\n                    <ef-button\n                      icon=\"pi pi-plus\"\n                      [label]=\"'button.add_variant' | translate\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-10 mt-1\"\n                      size=\"small\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  } @else {\n                    <ef-button\n                      [label]=\"'button.add' | translate\"\n                      icon=\"pi pi-shopping-cart\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-12\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  }\n                </div>\n              } @else {\n                <!-- Simple product: original behavior -->\n                <div class=\"flex items-center justify-between\">\n                  <p-badge\n                    severity=\"secondary\"\n                    [value]=\"getPackagingLabel(product)\"\n                    badgeSize=\"small\"\n                  />\n                  <div class=\"text-lg font-bold\">\n                    {{ formatPrice(product) }}\n                  </div>\n                </div>\n                <div class=\"mt-4\">\n                  @if (getProductQuantity(product) > 0) {\n                    <div class=\"flex items-center justify-between\">\n                      <ef-button\n                        icon=\"pi pi-trash\"\n                        severity=\"primary\"\n                        styleClass=\"!rounded-full\"\n                        (clickEvent)=\"removeProduct(product)\"\n                      />\n                      <ef-quantity-stepper\n                        [ngModel]=\"getProductQuantity(product)\"\n                        (ngModelChange)=\"updateProductQuantity(product, $event)\"\n                        [min]=\"0\"\n                        [max]=\"1000\"\n                        [maxFractionDigits]=\"4\"\n                        [locale]=\"localeCode()\"\n                      />\n                    </div>\n                  } @else {\n                    <ef-button\n                      [label]=\"'button.add' | translate\"\n                      icon=\"pi pi-shopping-cart\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-12\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  }\n                </div>\n              }\n            </ng-template>\n          </p-card>\n        } @empty {\n          <div class=\"p-2\">{{ 'message.no_products_found' | translate }}</div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".p-accordion-header-link{border:0!important;padding:.25rem 0!important;box-shadow:none!important}.p-accordion-panel{border:0!important;border-bottom:1px solid var(--surface-200)!important}:host-context(.dark) .p-accordion-panel{border-bottom-color:var(--surface-700)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i3.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "variant", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition", "autofocus"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i5$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i9.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: MenuModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i1$2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: EfQuantityStepperComponent, selector: "ef-quantity-stepper", inputs: ["value", "min", "max", "step", "minFractionDigits", "maxFractionDigits", "locale", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: EfProductCatalogueFilterComponent, selector: "ef-product-catalogue-filter", inputs: ["categoryGroups", "products", "selectedFilters"], outputs: ["selectedFiltersChange", "filtersChanged"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfProductCatalogueComponent, isStandalone: true, selector: "ef-product-catalogue", inputs: { products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: false, transformFunction: null }, categoryGroups: { classPropertyName: "categoryGroups", publicName: "categoryGroups", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedItems: { classPropertyName: "initialSelectedItems", publicName: "initialSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, defaultFilters: { classPropertyName: "defaultFilters", publicName: "defaultFilters", isSignal: true, isRequired: false, transformFunction: null }, trackByField: { classPropertyName: "trackByField", publicName: "trackByField", isSignal: true, isRequired: false, transformFunction: null }, currencyCode: { classPropertyName: "currencyCode", publicName: "currencyCode", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productsValidated: "productsValidated" }, queries: [{ propertyName: "productThumbnailTpl", first: true, predicate: ["productThumbnail"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sortMenu", first: true, predicate: ["sortMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"bg-surface-0 dark:bg-surface-950\">\n  <div class=\"flex flex-row gap-4\">\n    <!-- Filter Sidebar -->\n    <ef-product-catalogue-filter\n      [categoryGroups]=\"categoryGroups()\"\n      [products]=\"products()\"\n      [(selectedFilters)]=\"selectedFilters\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n    />\n\n    <!-- Product Grid -->\n    <div\n      class=\"min-h-96 flex-1 rounded-md border-2 border-dotted border-surface-200 bg-surface-50 p-4 dark:border-surface-700 dark:bg-surface-800\"\n    >\n      <div class=\"sticky top-0 z-10 w-full mb-4 bg-surface-50 dark:bg-surface-800 pb-2 -mt-4 pt-4 -mx-4 px-4\">\n        <p-iconfield iconPosition=\"left\" class=\"w-full\">\n          <p-inputicon class=\"pi pi-search\"></p-inputicon>\n          <input\n            pInputText\n            size=\"small\"\n            [(ngModel)]=\"productSearch\"\n            [placeholder]=\"'placeholder.search_products' | translate\"\n            class=\"w-full\"\n          />\n        </p-iconfield>\n      </div>\n      <div class=\"grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-4\">\n        @for (product of filteredProducts(); track trackKey(product)) {\n          <p-card\n            [header]=\"''\"\n            [class.border-2]=\"true\"\n            [class.border-blue-100]=\"getProductQuantity(product) > 0\"\n            [class.!bg-blue-100]=\"getProductQuantity(product) > 0\"\n            [class.dark:!border-blue-900]=\"getProductQuantity(product) > 0\"\n            [class.dark:!bg-blue-900]=\"getProductQuantity(product) > 0\"\n            [class.border-transparent]=\"getProductQuantity(product) === 0\"\n            class=\"cursor-pointer hover:shadow-md dark:hover:shadow-md dark:hover:shadow-gray-300/50\"\n          >\n            <ng-template pTemplate=\"header\">\n              <div class=\"w-full\">\n                @if (productThumbnailTpl()) {\n                  <ng-container *ngTemplateOutlet=\"productThumbnailTpl(); context: { $implicit: product }\"></ng-container>\n                } @else {\n                  <!-- Default fallback thumbnail -->\n                  <div class=\"flex h-[13rem] items-center justify-center bg-surface-100 text-3xl text-surface-400 dark:bg-surface-800\">\n                    <i class=\"pi pi-box\"></i>\n                  </div>\n                }\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"content\">\n              <div [innerHTML]=\"product.displayName\" class=\"h-14 font-semibold\"></div>\n            </ng-template>\n            <ng-template pTemplate=\"footer\">\n              @if (isVariableProduct(product)) {\n                <!-- Variable product: variant selector + per-variant quantities -->\n                <div class=\"flex items-center justify-between mb-2\">\n                  <p-badge\n                    severity=\"secondary\"\n                    [value]=\"getActiveVariants(product).length + ' ' + ('catalogue.variants' | translate)\"\n                    badgeSize=\"small\"\n                  />\n                  <div class=\"text-lg font-bold\">\n                    {{ formatPrice(product) }}\n                  </div>\n                </div>\n\n                <!-- Variant selector -->\n                <p-select\n                  [autofocus]=\"false\"\n                  [options]=\"getActiveVariants(product)\"\n                  optionLabel=\"title\"\n                  optionValue=\"variantId\"\n                  [ngModel]=\"getSelectedVariantId(product)\"\n                  (ngModelChange)=\"setSelectedVariant(product, $event)\"\n                  size=\"small\"\n                  styleClass=\"w-full mb-3\"\n                  [placeholder]=\"'placeholder.select_variant' | translate\"\n                />\n\n                <!-- Add button or quantity stepper for selected variant -->\n                <div class=\"mt-2\">\n                  @if (getProductQuantity(product) > 0) {\n                    <!-- Show per-variant breakdown -->\n                    @for (entry of selectedProducts(); track $index) {\n                      @if (productKey(entry.product) === productKey(product) && entry.variantId) {\n                        <div class=\"flex items-center justify-center gap-2 mb-2\">\n                          <span class=\"text-xs font-medium text-surface-600 dark:text-surface-400 min-w-12 text-center\">\n                            {{ getVariantTitle(product, entry.variantId) }}\n                          </span>\n                          <ef-quantity-stepper\n                            [ngModel]=\"entry.quantity\"\n                            (ngModelChange)=\"updateVariantQuantity(product, entry.variantId!, $event)\"\n                            [min]=\"0\"\n                            [max]=\"1000\"\n                            [maxFractionDigits]=\"4\"\n                            [locale]=\"localeCode()\"\n                          />\n                          <ef-button\n                            icon=\"pi pi-times\"\n                            severity=\"danger\"\n                            styleClass=\"!rounded-full !w-7 !h-7 !p-0\"\n                            size=\"small\"\n                            (clickEvent)=\"removeVariantSelection(product, entry.variantId!)\"\n                          />\n                        </div>\n                      }\n                    }\n                    <!-- Add another variant button -->\n                    <ef-button\n                      icon=\"pi pi-plus\"\n                      [label]=\"'button.add_variant' | translate\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-10 mt-1\"\n                      size=\"small\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  } @else {\n                    <ef-button\n                      [label]=\"'button.add' | translate\"\n                      icon=\"pi pi-shopping-cart\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-12\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  }\n                </div>\n              } @else {\n                <!-- Simple product: original behavior -->\n                <div class=\"flex items-center justify-between\">\n                  <p-badge\n                    severity=\"secondary\"\n                    [value]=\"getPackagingLabel(product)\"\n                    badgeSize=\"small\"\n                  />\n                  <div class=\"text-lg font-bold\">\n                    {{ formatPrice(product) }}\n                  </div>\n                </div>\n                <div class=\"mt-4\">\n                  @if (getProductQuantity(product) > 0) {\n                    <div class=\"flex items-center justify-between\">\n                      <ef-button\n                        icon=\"pi pi-trash\"\n                        severity=\"primary\"\n                        styleClass=\"!rounded-full\"\n                        (clickEvent)=\"removeProduct(product)\"\n                      />\n                      <ef-quantity-stepper\n                        [ngModel]=\"getProductQuantity(product)\"\n                        (ngModelChange)=\"updateProductQuantity(product, $event)\"\n                        [min]=\"0\"\n                        [max]=\"1000\"\n                        [maxFractionDigits]=\"4\"\n                        [locale]=\"localeCode()\"\n                      />\n                    </div>\n                  } @else {\n                    <ef-button\n                      [label]=\"'button.add' | translate\"\n                      icon=\"pi pi-shopping-cart\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-12\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  }\n                </div>\n              }\n            </ng-template>\n          </p-card>\n        } @empty {\n          <div class=\"p-2\">{{ 'message.no_products_found' | translate }}</div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".p-accordion-header-link{border:0!important;padding:.25rem 0!important;box-shadow:none!important}.p-accordion-panel{border:0!important;border-bottom:1px solid var(--rule)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i3.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "variant", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition", "autofocus"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i5$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i9.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: MenuModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i1$2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: EfQuantityStepperComponent, selector: "ef-quantity-stepper", inputs: ["value", "min", "max", "step", "minFractionDigits", "maxFractionDigits", "locale", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: EfProductCatalogueFilterComponent, selector: "ef-product-catalogue-filter", inputs: ["categoryGroups", "products", "selectedFilters"], outputs: ["selectedFiltersChange", "filtersChanged"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfProductCatalogueComponent, decorators: [{
             type: Component,
@@ -6228,7 +6286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         EfQuantityStepperComponent,
                         EfProductCatalogueFilterComponent,
                         TranslateModule,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bg-surface-0 dark:bg-surface-950\">\n  <div class=\"flex flex-row gap-4\">\n    <!-- Filter Sidebar -->\n    <ef-product-catalogue-filter\n      [categoryGroups]=\"categoryGroups()\"\n      [products]=\"products()\"\n      [(selectedFilters)]=\"selectedFilters\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n    />\n\n    <!-- Product Grid -->\n    <div\n      class=\"min-h-96 flex-1 rounded-md border-2 border-dotted border-surface-200 bg-surface-50 p-4 dark:border-surface-700 dark:bg-surface-800\"\n    >\n      <div class=\"sticky top-0 z-10 w-full mb-4 bg-surface-50 dark:bg-surface-800 pb-2 -mt-4 pt-4 -mx-4 px-4\">\n        <p-iconfield iconPosition=\"left\" class=\"w-full\">\n          <p-inputicon class=\"pi pi-search\"></p-inputicon>\n          <input\n            pInputText\n            size=\"small\"\n            [(ngModel)]=\"productSearch\"\n            [placeholder]=\"'placeholder.search_products' | translate\"\n            class=\"w-full\"\n          />\n        </p-iconfield>\n      </div>\n      <div class=\"grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-4\">\n        @for (product of filteredProducts(); track trackKey(product)) {\n          <p-card\n            [header]=\"''\"\n            [class.border-2]=\"true\"\n            [class.border-blue-100]=\"getProductQuantity(product) > 0\"\n            [class.!bg-blue-100]=\"getProductQuantity(product) > 0\"\n            [class.dark:!border-blue-900]=\"getProductQuantity(product) > 0\"\n            [class.dark:!bg-blue-900]=\"getProductQuantity(product) > 0\"\n            [class.border-transparent]=\"getProductQuantity(product) === 0\"\n            class=\"cursor-pointer hover:shadow-md dark:hover:shadow-md dark:hover:shadow-gray-300/50\"\n          >\n            <ng-template pTemplate=\"header\">\n              <div class=\"w-full\">\n                @if (productThumbnailTpl()) {\n                  <ng-container *ngTemplateOutlet=\"productThumbnailTpl(); context: { $implicit: product }\"></ng-container>\n                } @else {\n                  <!-- Default fallback thumbnail -->\n                  <div class=\"flex h-[13rem] items-center justify-center bg-surface-100 text-3xl text-surface-400 dark:bg-surface-800\">\n                    <i class=\"pi pi-box\"></i>\n                  </div>\n                }\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"content\">\n              <div [innerHTML]=\"product.displayName\" class=\"h-14 font-semibold\"></div>\n            </ng-template>\n            <ng-template pTemplate=\"footer\">\n              @if (isVariableProduct(product)) {\n                <!-- Variable product: variant selector + per-variant quantities -->\n                <div class=\"flex items-center justify-between mb-2\">\n                  <p-badge\n                    severity=\"secondary\"\n                    [value]=\"getActiveVariants(product).length + ' ' + ('catalogue.variants' | translate)\"\n                    badgeSize=\"small\"\n                  />\n                  <div class=\"text-lg font-bold\">\n                    {{ formatPrice(product) }}\n                  </div>\n                </div>\n\n                <!-- Variant selector -->\n                <p-select\n                  [autofocus]=\"false\"\n                  [options]=\"getActiveVariants(product)\"\n                  optionLabel=\"title\"\n                  optionValue=\"variantId\"\n                  [ngModel]=\"getSelectedVariantId(product)\"\n                  (ngModelChange)=\"setSelectedVariant(product, $event)\"\n                  size=\"small\"\n                  styleClass=\"w-full mb-3\"\n                  [placeholder]=\"'placeholder.select_variant' | translate\"\n                />\n\n                <!-- Add button or quantity stepper for selected variant -->\n                <div class=\"mt-2\">\n                  @if (getProductQuantity(product) > 0) {\n                    <!-- Show per-variant breakdown -->\n                    @for (entry of selectedProducts(); track $index) {\n                      @if (productKey(entry.product) === productKey(product) && entry.variantId) {\n                        <div class=\"flex items-center justify-center gap-2 mb-2\">\n                          <span class=\"text-xs font-medium text-surface-600 dark:text-surface-400 min-w-12 text-center\">\n                            {{ getVariantTitle(product, entry.variantId) }}\n                          </span>\n                          <ef-quantity-stepper\n                            [ngModel]=\"entry.quantity\"\n                            (ngModelChange)=\"updateVariantQuantity(product, entry.variantId!, $event)\"\n                            [min]=\"0\"\n                            [max]=\"1000\"\n                            [maxFractionDigits]=\"4\"\n                            [locale]=\"localeCode()\"\n                          />\n                          <ef-button\n                            icon=\"pi pi-times\"\n                            severity=\"danger\"\n                            styleClass=\"!rounded-full !w-7 !h-7 !p-0\"\n                            size=\"small\"\n                            (clickEvent)=\"removeVariantSelection(product, entry.variantId!)\"\n                          />\n                        </div>\n                      }\n                    }\n                    <!-- Add another variant button -->\n                    <ef-button\n                      icon=\"pi pi-plus\"\n                      [label]=\"'button.add_variant' | translate\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-10 mt-1\"\n                      size=\"small\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  } @else {\n                    <ef-button\n                      [label]=\"'button.add' | translate\"\n                      icon=\"pi pi-shopping-cart\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-12\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  }\n                </div>\n              } @else {\n                <!-- Simple product: original behavior -->\n                <div class=\"flex items-center justify-between\">\n                  <p-badge\n                    severity=\"secondary\"\n                    [value]=\"getPackagingLabel(product)\"\n                    badgeSize=\"small\"\n                  />\n                  <div class=\"text-lg font-bold\">\n                    {{ formatPrice(product) }}\n                  </div>\n                </div>\n                <div class=\"mt-4\">\n                  @if (getProductQuantity(product) > 0) {\n                    <div class=\"flex items-center justify-between\">\n                      <ef-button\n                        icon=\"pi pi-trash\"\n                        severity=\"primary\"\n                        styleClass=\"!rounded-full\"\n                        (clickEvent)=\"removeProduct(product)\"\n                      />\n                      <ef-quantity-stepper\n                        [ngModel]=\"getProductQuantity(product)\"\n                        (ngModelChange)=\"updateProductQuantity(product, $event)\"\n                        [min]=\"0\"\n                        [max]=\"1000\"\n                        [maxFractionDigits]=\"4\"\n                        [locale]=\"localeCode()\"\n                      />\n                    </div>\n                  } @else {\n                    <ef-button\n                      [label]=\"'button.add' | translate\"\n                      icon=\"pi pi-shopping-cart\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-12\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  }\n                </div>\n              }\n            </ng-template>\n          </p-card>\n        } @empty {\n          <div class=\"p-2\">{{ 'message.no_products_found' | translate }}</div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".p-accordion-header-link{border:0!important;padding:.25rem 0!important;box-shadow:none!important}.p-accordion-panel{border:0!important;border-bottom:1px solid var(--surface-200)!important}:host-context(.dark) .p-accordion-panel{border-bottom-color:var(--surface-700)!important}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bg-surface-0 dark:bg-surface-950\">\n  <div class=\"flex flex-row gap-4\">\n    <!-- Filter Sidebar -->\n    <ef-product-catalogue-filter\n      [categoryGroups]=\"categoryGroups()\"\n      [products]=\"products()\"\n      [(selectedFilters)]=\"selectedFilters\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n    />\n\n    <!-- Product Grid -->\n    <div\n      class=\"min-h-96 flex-1 rounded-md border-2 border-dotted border-surface-200 bg-surface-50 p-4 dark:border-surface-700 dark:bg-surface-800\"\n    >\n      <div class=\"sticky top-0 z-10 w-full mb-4 bg-surface-50 dark:bg-surface-800 pb-2 -mt-4 pt-4 -mx-4 px-4\">\n        <p-iconfield iconPosition=\"left\" class=\"w-full\">\n          <p-inputicon class=\"pi pi-search\"></p-inputicon>\n          <input\n            pInputText\n            size=\"small\"\n            [(ngModel)]=\"productSearch\"\n            [placeholder]=\"'placeholder.search_products' | translate\"\n            class=\"w-full\"\n          />\n        </p-iconfield>\n      </div>\n      <div class=\"grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-4\">\n        @for (product of filteredProducts(); track trackKey(product)) {\n          <p-card\n            [header]=\"''\"\n            [class.border-2]=\"true\"\n            [class.border-blue-100]=\"getProductQuantity(product) > 0\"\n            [class.!bg-blue-100]=\"getProductQuantity(product) > 0\"\n            [class.dark:!border-blue-900]=\"getProductQuantity(product) > 0\"\n            [class.dark:!bg-blue-900]=\"getProductQuantity(product) > 0\"\n            [class.border-transparent]=\"getProductQuantity(product) === 0\"\n            class=\"cursor-pointer hover:shadow-md dark:hover:shadow-md dark:hover:shadow-gray-300/50\"\n          >\n            <ng-template pTemplate=\"header\">\n              <div class=\"w-full\">\n                @if (productThumbnailTpl()) {\n                  <ng-container *ngTemplateOutlet=\"productThumbnailTpl(); context: { $implicit: product }\"></ng-container>\n                } @else {\n                  <!-- Default fallback thumbnail -->\n                  <div class=\"flex h-[13rem] items-center justify-center bg-surface-100 text-3xl text-surface-400 dark:bg-surface-800\">\n                    <i class=\"pi pi-box\"></i>\n                  </div>\n                }\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"content\">\n              <div [innerHTML]=\"product.displayName\" class=\"h-14 font-semibold\"></div>\n            </ng-template>\n            <ng-template pTemplate=\"footer\">\n              @if (isVariableProduct(product)) {\n                <!-- Variable product: variant selector + per-variant quantities -->\n                <div class=\"flex items-center justify-between mb-2\">\n                  <p-badge\n                    severity=\"secondary\"\n                    [value]=\"getActiveVariants(product).length + ' ' + ('catalogue.variants' | translate)\"\n                    badgeSize=\"small\"\n                  />\n                  <div class=\"text-lg font-bold\">\n                    {{ formatPrice(product) }}\n                  </div>\n                </div>\n\n                <!-- Variant selector -->\n                <p-select\n                  [autofocus]=\"false\"\n                  [options]=\"getActiveVariants(product)\"\n                  optionLabel=\"title\"\n                  optionValue=\"variantId\"\n                  [ngModel]=\"getSelectedVariantId(product)\"\n                  (ngModelChange)=\"setSelectedVariant(product, $event)\"\n                  size=\"small\"\n                  styleClass=\"w-full mb-3\"\n                  [placeholder]=\"'placeholder.select_variant' | translate\"\n                />\n\n                <!-- Add button or quantity stepper for selected variant -->\n                <div class=\"mt-2\">\n                  @if (getProductQuantity(product) > 0) {\n                    <!-- Show per-variant breakdown -->\n                    @for (entry of selectedProducts(); track $index) {\n                      @if (productKey(entry.product) === productKey(product) && entry.variantId) {\n                        <div class=\"flex items-center justify-center gap-2 mb-2\">\n                          <span class=\"text-xs font-medium text-surface-600 dark:text-surface-400 min-w-12 text-center\">\n                            {{ getVariantTitle(product, entry.variantId) }}\n                          </span>\n                          <ef-quantity-stepper\n                            [ngModel]=\"entry.quantity\"\n                            (ngModelChange)=\"updateVariantQuantity(product, entry.variantId!, $event)\"\n                            [min]=\"0\"\n                            [max]=\"1000\"\n                            [maxFractionDigits]=\"4\"\n                            [locale]=\"localeCode()\"\n                          />\n                          <ef-button\n                            icon=\"pi pi-times\"\n                            severity=\"danger\"\n                            styleClass=\"!rounded-full !w-7 !h-7 !p-0\"\n                            size=\"small\"\n                            (clickEvent)=\"removeVariantSelection(product, entry.variantId!)\"\n                          />\n                        </div>\n                      }\n                    }\n                    <!-- Add another variant button -->\n                    <ef-button\n                      icon=\"pi pi-plus\"\n                      [label]=\"'button.add_variant' | translate\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-10 mt-1\"\n                      size=\"small\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  } @else {\n                    <ef-button\n                      [label]=\"'button.add' | translate\"\n                      icon=\"pi pi-shopping-cart\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-12\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  }\n                </div>\n              } @else {\n                <!-- Simple product: original behavior -->\n                <div class=\"flex items-center justify-between\">\n                  <p-badge\n                    severity=\"secondary\"\n                    [value]=\"getPackagingLabel(product)\"\n                    badgeSize=\"small\"\n                  />\n                  <div class=\"text-lg font-bold\">\n                    {{ formatPrice(product) }}\n                  </div>\n                </div>\n                <div class=\"mt-4\">\n                  @if (getProductQuantity(product) > 0) {\n                    <div class=\"flex items-center justify-between\">\n                      <ef-button\n                        icon=\"pi pi-trash\"\n                        severity=\"primary\"\n                        styleClass=\"!rounded-full\"\n                        (clickEvent)=\"removeProduct(product)\"\n                      />\n                      <ef-quantity-stepper\n                        [ngModel]=\"getProductQuantity(product)\"\n                        (ngModelChange)=\"updateProductQuantity(product, $event)\"\n                        [min]=\"0\"\n                        [max]=\"1000\"\n                        [maxFractionDigits]=\"4\"\n                        [locale]=\"localeCode()\"\n                      />\n                    </div>\n                  } @else {\n                    <ef-button\n                      [label]=\"'button.add' | translate\"\n                      icon=\"pi pi-shopping-cart\"\n                      severity=\"primary\"\n                      styleClass=\"w-full !rounded-full !h-12\"\n                      (clickEvent)=\"addProduct(product)\"\n                    />\n                  }\n                </div>\n              }\n            </ng-template>\n          </p-card>\n        } @empty {\n          <div class=\"p-2\">{{ 'message.no_products_found' | translate }}</div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".p-accordion-header-link{border:0!important;padding:.25rem 0!important;box-shadow:none!important}.p-accordion-panel{border:0!important;border-bottom:1px solid var(--rule)!important}\n"] }]
         }], propDecorators: { products: [{ type: i0.Input, args: [{ isSignal: true, alias: "products", required: false }] }], categoryGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryGroups", required: false }] }], initialSelectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedItems", required: false }] }], defaultFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFilters", required: false }] }], trackByField: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByField", required: false }] }], currencyCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyCode", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], productThumbnailTpl: [{ type: i0.ContentChild, args: ['productThumbnail', { isSignal: true }] }], sortMenu: [{
                 type: ViewChild,
                 args: ['sortMenu']
@@ -11727,7 +11785,7 @@ class EfEmailMetricsCardComponent {
         return 'warn';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfEmailMetricsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfEmailMetricsCardComponent, isStandalone: true, selector: "ef-email-metrics-card", inputs: { metrics: { classPropertyName: "metrics", publicName: "metrics", isSignal: true, isRequired: false, transformFunction: null }, recentEvents: { classPropertyName: "recentEvents", publicName: "recentEvents", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rangeChange: "rangeChange" }, ngImport: i0, template: "<p-card styleClass=\"ef-email-metrics-card\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"ef-email-metrics-card__header\">\n      <div>\n        <h3 class=\"ef-email-metrics-card__title\">{{ title() }}</h3>\n        @if (metrics(); as m) {\n          <p class=\"ef-email-metrics-card__subtitle\">\n            {{ m.from | date: 'dd MMM' }} \u2013 {{ m.to | date: 'dd MMM yyyy' }}\n          </p>\n        }\n      </div>\n      <p-selectButton\n        [options]=\"rangeOptions\"\n        [(ngModel)]=\"selectedRange\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        styleClass=\"ef-email-metrics-card__range\"\n        (onChange)=\"onRangeChange($event.value)\"\n      />\n    </div>\n  </ng-template>\n\n  @if (metrics(); as m) {\n    <div class=\"ef-email-metrics-card__kpis\">\n      @for (kpi of kpis(); track kpi.label) {\n        <div class=\"ef-email-metrics-card__kpi\" [attr.data-tone]=\"kpi.tone\">\n          <span class=\"ef-email-metrics-card__kpi-label\">{{ kpi.label }}</span>\n          <span class=\"ef-email-metrics-card__kpi-value\">\n            @if (kpi.rate) {\n              {{ kpi.value | number: '1.1-1' : 'fr' }}\n              <span class=\"ef-email-metrics-card__kpi-unit\">%</span>\n            } @else {\n              {{ kpi.value | number: '1.0-0' : 'fr' }}\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (m.categories.length > 0) {\n      <div class=\"ef-email-metrics-card__section\">\n        <h4 class=\"ef-email-metrics-card__section-title\">Par cat\u00E9gorie</h4>\n        <p-table [value]=\"m.categories\" styleClass=\"ef-email-metrics-card__table\" [scrollable]=\"true\" scrollHeight=\"180px\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th>Cat\u00E9gorie</th>\n              <th class=\"ef-email-metrics-card__num\">Envoy\u00E9s</th>\n              <th class=\"ef-email-metrics-card__num\">Ouverts</th>\n              <th class=\"ef-email-metrics-card__num\">Cliqu\u00E9s</th>\n              <th class=\"ef-email-metrics-card__num\">Rebonds</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-row>\n            <tr>\n              <td class=\"ef-email-metrics-card__category\">{{ row.category }}</td>\n              <td class=\"ef-email-metrics-card__num\">{{ row.sent }}</td>\n              <td class=\"ef-email-metrics-card__num\">{{ row.opened }}</td>\n              <td class=\"ef-email-metrics-card__num\">{{ row.clicked }}</td>\n              <td class=\"ef-email-metrics-card__num\" [class.ef-email-metrics-card__num--danger]=\"row.bounced > 0\">{{ row.bounced }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n      </div>\n    }\n\n    @if (recentEvents().length > 0) {\n      <div class=\"ef-email-metrics-card__section\">\n        <h4 class=\"ef-email-metrics-card__section-title\">\u00C9v\u00E9nements r\u00E9cents</h4>\n        <p-table [value]=\"recentEvents()\" styleClass=\"ef-email-metrics-card__table\" [scrollable]=\"true\" scrollHeight=\"240px\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th>Quand</th>\n              <th>Destinataire</th>\n              <th>Cat\u00E9gorie</th>\n              <th>Type</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-row>\n            <tr>\n              <td class=\"ef-email-metrics-card__when\">{{ row.occurredAt | date: 'dd/MM HH:mm' }}</td>\n              <td class=\"ef-email-metrics-card__recipient\">{{ row.recipient }}</td>\n              <td>{{ row.category || '\u2014' }}</td>\n              <td>\n                <p-tag [severity]=\"kindSeverity(row.kind)\" [value]=\"row.kind\" styleClass=\"ef-email-metrics-card__kind\" />\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n      </div>\n    }\n  } @else {\n    <div class=\"ef-email-metrics-card__empty\">\n      <p-button\n        [autofocus]=\"false\"\n        [buttonProps]=\"noAutofocus\" label=\"Aucune donn\u00E9e encore\" [text]=\"true\" icon=\"pi pi-envelope\" [disabled]=\"true\" />\n    </div>\n  }\n</p-card>\n", styles: [":host{display:block}.ef-email-metrics-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.25rem 0;flex-wrap:wrap}.ef-email-metrics-card__title{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--p-text-color)}.ef-email-metrics-card__subtitle{margin:.15rem 0 0;font-size:.8125rem;color:var(--p-text-muted-color)}.ef-email-metrics-card__range :global(.p-selectbutton){border-radius:999px}.ef-email-metrics-card__range :global(.p-selectbutton .p-button){border-radius:999px;padding:.25rem .75rem;font-size:.75rem}.ef-email-metrics-card__kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;padding:1rem 0}.ef-email-metrics-card__kpi{display:flex;flex-direction:column;gap:.25rem;padding:.85rem 1rem;border-radius:12px;background:var(--p-surface-50, #f8fafc);border:1px solid var(--p-surface-200, #e2e8f0)}.ef-email-metrics-card__kpi[data-tone=good]{background:color-mix(in srgb,var(--p-green-500, #10b981) 8%,transparent);border-color:color-mix(in srgb,var(--p-green-500, #10b981) 25%,transparent)}.ef-email-metrics-card__kpi[data-tone=warn]{background:color-mix(in srgb,var(--p-orange-500, #f97316) 8%,transparent);border-color:color-mix(in srgb,var(--p-orange-500, #f97316) 25%,transparent)}.ef-email-metrics-card__kpi-label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--p-text-muted-color)}.ef-email-metrics-card__kpi-value{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--p-text-color)}.ef-email-metrics-card__kpi-unit{font-size:.875rem;font-weight:500;margin-left:.125rem;color:var(--p-text-muted-color)}.ef-email-metrics-card__section{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--p-surface-200, #e2e8f0)}.ef-email-metrics-card__section-title{margin:0 0 .5rem;font-size:.8125rem;font-weight:600;color:var(--p-text-color)}.ef-email-metrics-card__table{font-size:.8125rem}.ef-email-metrics-card__num{text-align:right;font-variant-numeric:tabular-nums}.ef-email-metrics-card__num--danger{color:var(--p-red-600, #dc2626);font-weight:600}.ef-email-metrics-card__category{text-transform:capitalize;font-weight:500}.ef-email-metrics-card__recipient{font-family:var(--font-mono);font-size:.75rem;color:var(--p-text-muted-color)}.ef-email-metrics-card__when{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.75rem}.ef-email-metrics-card__kind{border-radius:999px;padding:.1rem .6rem;font-size:.7rem;letter-spacing:.02em}.ef-email-metrics-card__empty{padding:2rem 1.25rem;text-align:center;color:var(--p-text-muted-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i5$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i5$2.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i1$f.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "pipe", type: i1$3.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$3.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfEmailMetricsCardComponent, isStandalone: true, selector: "ef-email-metrics-card", inputs: { metrics: { classPropertyName: "metrics", publicName: "metrics", isSignal: true, isRequired: false, transformFunction: null }, recentEvents: { classPropertyName: "recentEvents", publicName: "recentEvents", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rangeChange: "rangeChange" }, ngImport: i0, template: "<p-card styleClass=\"ef-email-metrics-card\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"ef-email-metrics-card__header\">\n      <div>\n        <h3 class=\"ef-email-metrics-card__title\">{{ title() }}</h3>\n        @if (metrics(); as m) {\n          <p class=\"ef-email-metrics-card__subtitle\">\n            {{ m.from | date: 'dd MMM' }} \u2013 {{ m.to | date: 'dd MMM yyyy' }}\n          </p>\n        }\n      </div>\n      <p-selectButton\n        [options]=\"rangeOptions\"\n        [(ngModel)]=\"selectedRange\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        styleClass=\"ef-email-metrics-card__range\"\n        (onChange)=\"onRangeChange($event.value)\"\n      />\n    </div>\n  </ng-template>\n\n  @if (metrics(); as m) {\n    <div class=\"ef-email-metrics-card__kpis\">\n      @for (kpi of kpis(); track kpi.label) {\n        <div class=\"ef-email-metrics-card__kpi\" [attr.data-tone]=\"kpi.tone\">\n          <span class=\"ef-email-metrics-card__kpi-label\">{{ kpi.label }}</span>\n          <span class=\"ef-email-metrics-card__kpi-value\">\n            @if (kpi.rate) {\n              {{ kpi.value | number: '1.1-1' : 'fr' }}\n              <span class=\"ef-email-metrics-card__kpi-unit\">%</span>\n            } @else {\n              {{ kpi.value | number: '1.0-0' : 'fr' }}\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (m.categories.length > 0) {\n      <div class=\"ef-email-metrics-card__section\">\n        <h4 class=\"ef-email-metrics-card__section-title\">Par cat\u00E9gorie</h4>\n        <p-table [value]=\"m.categories\" styleClass=\"ef-email-metrics-card__table\" [scrollable]=\"true\" scrollHeight=\"180px\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th>Cat\u00E9gorie</th>\n              <th class=\"ef-email-metrics-card__num\">Envoy\u00E9s</th>\n              <th class=\"ef-email-metrics-card__num\">Ouverts</th>\n              <th class=\"ef-email-metrics-card__num\">Cliqu\u00E9s</th>\n              <th class=\"ef-email-metrics-card__num\">Rebonds</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-row>\n            <tr>\n              <td class=\"ef-email-metrics-card__category\">{{ row.category }}</td>\n              <td class=\"ef-email-metrics-card__num\">{{ row.sent }}</td>\n              <td class=\"ef-email-metrics-card__num\">{{ row.opened }}</td>\n              <td class=\"ef-email-metrics-card__num\">{{ row.clicked }}</td>\n              <td class=\"ef-email-metrics-card__num\" [class.ef-email-metrics-card__num--danger]=\"row.bounced > 0\">{{ row.bounced }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n      </div>\n    }\n\n    @if (recentEvents().length > 0) {\n      <div class=\"ef-email-metrics-card__section\">\n        <h4 class=\"ef-email-metrics-card__section-title\">\u00C9v\u00E9nements r\u00E9cents</h4>\n        <p-table [value]=\"recentEvents()\" styleClass=\"ef-email-metrics-card__table\" [scrollable]=\"true\" scrollHeight=\"240px\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th>Quand</th>\n              <th>Destinataire</th>\n              <th>Cat\u00E9gorie</th>\n              <th>Type</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-row>\n            <tr>\n              <td class=\"ef-email-metrics-card__when\">{{ row.occurredAt | date: 'dd/MM HH:mm' }}</td>\n              <td class=\"ef-email-metrics-card__recipient\">{{ row.recipient }}</td>\n              <td>{{ row.category || '\u2014' }}</td>\n              <td>\n                <p-tag [severity]=\"kindSeverity(row.kind)\" [value]=\"row.kind\" styleClass=\"ef-email-metrics-card__kind\" />\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n      </div>\n    }\n  } @else {\n    <div class=\"ef-email-metrics-card__empty\">\n      <p-button\n        [autofocus]=\"false\"\n        [buttonProps]=\"noAutofocus\" label=\"Aucune donn\u00E9e encore\" [text]=\"true\" icon=\"pi pi-envelope\" [disabled]=\"true\" />\n    </div>\n  }\n</p-card>\n", styles: [":host{display:block}.ef-email-metrics-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.25rem 0;flex-wrap:wrap}.ef-email-metrics-card__title{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--p-text-color)}.ef-email-metrics-card__subtitle{margin:.15rem 0 0;font-size:.8125rem;color:var(--p-text-muted-color)}.ef-email-metrics-card__range :global(.p-selectbutton){border-radius:999px}.ef-email-metrics-card__range :global(.p-selectbutton .p-button){border-radius:999px;padding:.25rem .75rem;font-size:.75rem}.ef-email-metrics-card__kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;padding:1rem 0}.ef-email-metrics-card__kpi{display:flex;flex-direction:column;gap:.25rem;padding:.85rem 1rem;border-radius:12px;background:var(--paper-alt);border:1px solid var(--rule)}.ef-email-metrics-card__kpi[data-tone=good]{background:color-mix(in srgb,var(--p-green-500, #10b981) 8%,transparent);border-color:color-mix(in srgb,var(--p-green-500, #10b981) 25%,transparent)}.ef-email-metrics-card__kpi[data-tone=warn]{background:color-mix(in srgb,var(--p-orange-500, #f97316) 8%,transparent);border-color:color-mix(in srgb,var(--p-orange-500, #f97316) 25%,transparent)}.ef-email-metrics-card__kpi-label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--p-text-muted-color)}.ef-email-metrics-card__kpi-value{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--p-text-color)}.ef-email-metrics-card__kpi-unit{font-size:.875rem;font-weight:500;margin-left:.125rem;color:var(--p-text-muted-color)}.ef-email-metrics-card__section{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--rule)}.ef-email-metrics-card__section-title{margin:0 0 .5rem;font-size:.8125rem;font-weight:600;color:var(--p-text-color)}.ef-email-metrics-card__table{font-size:.8125rem}.ef-email-metrics-card__num{text-align:right;font-variant-numeric:tabular-nums}.ef-email-metrics-card__num--danger{color:var(--p-red-600, #dc2626);font-weight:600}.ef-email-metrics-card__category{text-transform:capitalize;font-weight:500}.ef-email-metrics-card__recipient{font-family:var(--font-mono);font-size:.75rem;color:var(--p-text-muted-color)}.ef-email-metrics-card__when{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.75rem}.ef-email-metrics-card__kind{border-radius:999px;padding:.1rem .6rem;font-size:.7rem;letter-spacing:.02em}.ef-email-metrics-card__empty{padding:2rem 1.25rem;text-align:center;color:var(--p-text-muted-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i5$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i5$2.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i1$f.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "pipe", type: i1$3.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$3.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfEmailMetricsCardComponent, decorators: [{
             type: Component,
@@ -11741,7 +11799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         SelectButtonModule,
                         DecimalPipe,
                         DatePipe,
-                    ], template: "<p-card styleClass=\"ef-email-metrics-card\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"ef-email-metrics-card__header\">\n      <div>\n        <h3 class=\"ef-email-metrics-card__title\">{{ title() }}</h3>\n        @if (metrics(); as m) {\n          <p class=\"ef-email-metrics-card__subtitle\">\n            {{ m.from | date: 'dd MMM' }} \u2013 {{ m.to | date: 'dd MMM yyyy' }}\n          </p>\n        }\n      </div>\n      <p-selectButton\n        [options]=\"rangeOptions\"\n        [(ngModel)]=\"selectedRange\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        styleClass=\"ef-email-metrics-card__range\"\n        (onChange)=\"onRangeChange($event.value)\"\n      />\n    </div>\n  </ng-template>\n\n  @if (metrics(); as m) {\n    <div class=\"ef-email-metrics-card__kpis\">\n      @for (kpi of kpis(); track kpi.label) {\n        <div class=\"ef-email-metrics-card__kpi\" [attr.data-tone]=\"kpi.tone\">\n          <span class=\"ef-email-metrics-card__kpi-label\">{{ kpi.label }}</span>\n          <span class=\"ef-email-metrics-card__kpi-value\">\n            @if (kpi.rate) {\n              {{ kpi.value | number: '1.1-1' : 'fr' }}\n              <span class=\"ef-email-metrics-card__kpi-unit\">%</span>\n            } @else {\n              {{ kpi.value | number: '1.0-0' : 'fr' }}\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (m.categories.length > 0) {\n      <div class=\"ef-email-metrics-card__section\">\n        <h4 class=\"ef-email-metrics-card__section-title\">Par cat\u00E9gorie</h4>\n        <p-table [value]=\"m.categories\" styleClass=\"ef-email-metrics-card__table\" [scrollable]=\"true\" scrollHeight=\"180px\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th>Cat\u00E9gorie</th>\n              <th class=\"ef-email-metrics-card__num\">Envoy\u00E9s</th>\n              <th class=\"ef-email-metrics-card__num\">Ouverts</th>\n              <th class=\"ef-email-metrics-card__num\">Cliqu\u00E9s</th>\n              <th class=\"ef-email-metrics-card__num\">Rebonds</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-row>\n            <tr>\n              <td class=\"ef-email-metrics-card__category\">{{ row.category }}</td>\n              <td class=\"ef-email-metrics-card__num\">{{ row.sent }}</td>\n              <td class=\"ef-email-metrics-card__num\">{{ row.opened }}</td>\n              <td class=\"ef-email-metrics-card__num\">{{ row.clicked }}</td>\n              <td class=\"ef-email-metrics-card__num\" [class.ef-email-metrics-card__num--danger]=\"row.bounced > 0\">{{ row.bounced }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n      </div>\n    }\n\n    @if (recentEvents().length > 0) {\n      <div class=\"ef-email-metrics-card__section\">\n        <h4 class=\"ef-email-metrics-card__section-title\">\u00C9v\u00E9nements r\u00E9cents</h4>\n        <p-table [value]=\"recentEvents()\" styleClass=\"ef-email-metrics-card__table\" [scrollable]=\"true\" scrollHeight=\"240px\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th>Quand</th>\n              <th>Destinataire</th>\n              <th>Cat\u00E9gorie</th>\n              <th>Type</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-row>\n            <tr>\n              <td class=\"ef-email-metrics-card__when\">{{ row.occurredAt | date: 'dd/MM HH:mm' }}</td>\n              <td class=\"ef-email-metrics-card__recipient\">{{ row.recipient }}</td>\n              <td>{{ row.category || '\u2014' }}</td>\n              <td>\n                <p-tag [severity]=\"kindSeverity(row.kind)\" [value]=\"row.kind\" styleClass=\"ef-email-metrics-card__kind\" />\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n      </div>\n    }\n  } @else {\n    <div class=\"ef-email-metrics-card__empty\">\n      <p-button\n        [autofocus]=\"false\"\n        [buttonProps]=\"noAutofocus\" label=\"Aucune donn\u00E9e encore\" [text]=\"true\" icon=\"pi pi-envelope\" [disabled]=\"true\" />\n    </div>\n  }\n</p-card>\n", styles: [":host{display:block}.ef-email-metrics-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.25rem 0;flex-wrap:wrap}.ef-email-metrics-card__title{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--p-text-color)}.ef-email-metrics-card__subtitle{margin:.15rem 0 0;font-size:.8125rem;color:var(--p-text-muted-color)}.ef-email-metrics-card__range :global(.p-selectbutton){border-radius:999px}.ef-email-metrics-card__range :global(.p-selectbutton .p-button){border-radius:999px;padding:.25rem .75rem;font-size:.75rem}.ef-email-metrics-card__kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;padding:1rem 0}.ef-email-metrics-card__kpi{display:flex;flex-direction:column;gap:.25rem;padding:.85rem 1rem;border-radius:12px;background:var(--p-surface-50, #f8fafc);border:1px solid var(--p-surface-200, #e2e8f0)}.ef-email-metrics-card__kpi[data-tone=good]{background:color-mix(in srgb,var(--p-green-500, #10b981) 8%,transparent);border-color:color-mix(in srgb,var(--p-green-500, #10b981) 25%,transparent)}.ef-email-metrics-card__kpi[data-tone=warn]{background:color-mix(in srgb,var(--p-orange-500, #f97316) 8%,transparent);border-color:color-mix(in srgb,var(--p-orange-500, #f97316) 25%,transparent)}.ef-email-metrics-card__kpi-label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--p-text-muted-color)}.ef-email-metrics-card__kpi-value{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--p-text-color)}.ef-email-metrics-card__kpi-unit{font-size:.875rem;font-weight:500;margin-left:.125rem;color:var(--p-text-muted-color)}.ef-email-metrics-card__section{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--p-surface-200, #e2e8f0)}.ef-email-metrics-card__section-title{margin:0 0 .5rem;font-size:.8125rem;font-weight:600;color:var(--p-text-color)}.ef-email-metrics-card__table{font-size:.8125rem}.ef-email-metrics-card__num{text-align:right;font-variant-numeric:tabular-nums}.ef-email-metrics-card__num--danger{color:var(--p-red-600, #dc2626);font-weight:600}.ef-email-metrics-card__category{text-transform:capitalize;font-weight:500}.ef-email-metrics-card__recipient{font-family:var(--font-mono);font-size:.75rem;color:var(--p-text-muted-color)}.ef-email-metrics-card__when{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.75rem}.ef-email-metrics-card__kind{border-radius:999px;padding:.1rem .6rem;font-size:.7rem;letter-spacing:.02em}.ef-email-metrics-card__empty{padding:2rem 1.25rem;text-align:center;color:var(--p-text-muted-color)}\n"] }]
+                    ], template: "<p-card styleClass=\"ef-email-metrics-card\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"ef-email-metrics-card__header\">\n      <div>\n        <h3 class=\"ef-email-metrics-card__title\">{{ title() }}</h3>\n        @if (metrics(); as m) {\n          <p class=\"ef-email-metrics-card__subtitle\">\n            {{ m.from | date: 'dd MMM' }} \u2013 {{ m.to | date: 'dd MMM yyyy' }}\n          </p>\n        }\n      </div>\n      <p-selectButton\n        [options]=\"rangeOptions\"\n        [(ngModel)]=\"selectedRange\"\n        optionLabel=\"label\"\n        optionValue=\"value\"\n        styleClass=\"ef-email-metrics-card__range\"\n        (onChange)=\"onRangeChange($event.value)\"\n      />\n    </div>\n  </ng-template>\n\n  @if (metrics(); as m) {\n    <div class=\"ef-email-metrics-card__kpis\">\n      @for (kpi of kpis(); track kpi.label) {\n        <div class=\"ef-email-metrics-card__kpi\" [attr.data-tone]=\"kpi.tone\">\n          <span class=\"ef-email-metrics-card__kpi-label\">{{ kpi.label }}</span>\n          <span class=\"ef-email-metrics-card__kpi-value\">\n            @if (kpi.rate) {\n              {{ kpi.value | number: '1.1-1' : 'fr' }}\n              <span class=\"ef-email-metrics-card__kpi-unit\">%</span>\n            } @else {\n              {{ kpi.value | number: '1.0-0' : 'fr' }}\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (m.categories.length > 0) {\n      <div class=\"ef-email-metrics-card__section\">\n        <h4 class=\"ef-email-metrics-card__section-title\">Par cat\u00E9gorie</h4>\n        <p-table [value]=\"m.categories\" styleClass=\"ef-email-metrics-card__table\" [scrollable]=\"true\" scrollHeight=\"180px\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th>Cat\u00E9gorie</th>\n              <th class=\"ef-email-metrics-card__num\">Envoy\u00E9s</th>\n              <th class=\"ef-email-metrics-card__num\">Ouverts</th>\n              <th class=\"ef-email-metrics-card__num\">Cliqu\u00E9s</th>\n              <th class=\"ef-email-metrics-card__num\">Rebonds</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-row>\n            <tr>\n              <td class=\"ef-email-metrics-card__category\">{{ row.category }}</td>\n              <td class=\"ef-email-metrics-card__num\">{{ row.sent }}</td>\n              <td class=\"ef-email-metrics-card__num\">{{ row.opened }}</td>\n              <td class=\"ef-email-metrics-card__num\">{{ row.clicked }}</td>\n              <td class=\"ef-email-metrics-card__num\" [class.ef-email-metrics-card__num--danger]=\"row.bounced > 0\">{{ row.bounced }}</td>\n            </tr>\n          </ng-template>\n        </p-table>\n      </div>\n    }\n\n    @if (recentEvents().length > 0) {\n      <div class=\"ef-email-metrics-card__section\">\n        <h4 class=\"ef-email-metrics-card__section-title\">\u00C9v\u00E9nements r\u00E9cents</h4>\n        <p-table [value]=\"recentEvents()\" styleClass=\"ef-email-metrics-card__table\" [scrollable]=\"true\" scrollHeight=\"240px\">\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th>Quand</th>\n              <th>Destinataire</th>\n              <th>Cat\u00E9gorie</th>\n              <th>Type</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\" let-row>\n            <tr>\n              <td class=\"ef-email-metrics-card__when\">{{ row.occurredAt | date: 'dd/MM HH:mm' }}</td>\n              <td class=\"ef-email-metrics-card__recipient\">{{ row.recipient }}</td>\n              <td>{{ row.category || '\u2014' }}</td>\n              <td>\n                <p-tag [severity]=\"kindSeverity(row.kind)\" [value]=\"row.kind\" styleClass=\"ef-email-metrics-card__kind\" />\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n      </div>\n    }\n  } @else {\n    <div class=\"ef-email-metrics-card__empty\">\n      <p-button\n        [autofocus]=\"false\"\n        [buttonProps]=\"noAutofocus\" label=\"Aucune donn\u00E9e encore\" [text]=\"true\" icon=\"pi pi-envelope\" [disabled]=\"true\" />\n    </div>\n  }\n</p-card>\n", styles: [":host{display:block}.ef-email-metrics-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.25rem 0;flex-wrap:wrap}.ef-email-metrics-card__title{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--p-text-color)}.ef-email-metrics-card__subtitle{margin:.15rem 0 0;font-size:.8125rem;color:var(--p-text-muted-color)}.ef-email-metrics-card__range :global(.p-selectbutton){border-radius:999px}.ef-email-metrics-card__range :global(.p-selectbutton .p-button){border-radius:999px;padding:.25rem .75rem;font-size:.75rem}.ef-email-metrics-card__kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;padding:1rem 0}.ef-email-metrics-card__kpi{display:flex;flex-direction:column;gap:.25rem;padding:.85rem 1rem;border-radius:12px;background:var(--paper-alt);border:1px solid var(--rule)}.ef-email-metrics-card__kpi[data-tone=good]{background:color-mix(in srgb,var(--p-green-500, #10b981) 8%,transparent);border-color:color-mix(in srgb,var(--p-green-500, #10b981) 25%,transparent)}.ef-email-metrics-card__kpi[data-tone=warn]{background:color-mix(in srgb,var(--p-orange-500, #f97316) 8%,transparent);border-color:color-mix(in srgb,var(--p-orange-500, #f97316) 25%,transparent)}.ef-email-metrics-card__kpi-label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--p-text-muted-color)}.ef-email-metrics-card__kpi-value{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--p-text-color)}.ef-email-metrics-card__kpi-unit{font-size:.875rem;font-weight:500;margin-left:.125rem;color:var(--p-text-muted-color)}.ef-email-metrics-card__section{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--rule)}.ef-email-metrics-card__section-title{margin:0 0 .5rem;font-size:.8125rem;font-weight:600;color:var(--p-text-color)}.ef-email-metrics-card__table{font-size:.8125rem}.ef-email-metrics-card__num{text-align:right;font-variant-numeric:tabular-nums}.ef-email-metrics-card__num--danger{color:var(--p-red-600, #dc2626);font-weight:600}.ef-email-metrics-card__category{text-transform:capitalize;font-weight:500}.ef-email-metrics-card__recipient{font-family:var(--font-mono);font-size:.75rem;color:var(--p-text-muted-color)}.ef-email-metrics-card__when{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.75rem}.ef-email-metrics-card__kind{border-radius:999px;padding:.1rem .6rem;font-size:.7rem;letter-spacing:.02em}.ef-email-metrics-card__empty{padding:2rem 1.25rem;text-align:center;color:var(--p-text-muted-color)}\n"] }]
         }], propDecorators: { metrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "metrics", required: false }] }], recentEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "recentEvents", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }] } });
 
 // Pipes