@elasticias/ui 1.0.49 → 1.0.51

package/fesm2022/elasticias-ui.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { Pipe, input, Component, output, booleanAttribute, Input, Directive, signal, computed, inject, EventEmitter, Injector, forwardRef, Output, ContentChild, HostBinding, ChangeDetectionStrategy, ElementRef, LOCALE_ID, ViewContainerRef, DestroyRef, ChangeDetectorRef, effect, HostListener, ViewChild, isDevMode, model, InjectionToken, afterNextRender, TemplateRef, ContentChildren, viewChild, untracked, contentChild, ViewEncapsulation, ViewChildren, PLATFORM_ID } from '@angular/core';
-import { NumberUtils, UuidUtils } from '@elasticias/utils';
+import { Pipe, input, Component, output, booleanAttribute, Input, Directive, signal, computed, inject, EventEmitter, Injector, forwardRef, Output, ContentChild, HostBinding, ChangeDetectionStrategy, ElementRef, LOCALE_ID, ViewContainerRef, DestroyRef, ChangeDetectorRef, effect, HostListener, ViewChild, isDevMode, model, InjectionToken, afterNextRender, TemplateRef, ContentChildren, viewChild, untracked, contentChild, ViewEncapsulation, linkedSignal, ViewChildren, afterEveryRender, PLATFORM_ID } from '@angular/core';
+import { NumberUtils, UuidUtils, PhoneUtils } from '@elasticias/utils';
 import * as i1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i1$3 from '@angular/common';
@@ -13,7 +13,10 @@ import * as i1$2 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import * as i2 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { merge, Subject, tap, switchMap, catchError, EMPTY } from 'rxjs';
+import { ZIndexUtils } from 'primeng/utils';
+import { EfViewportService, EfShortcutService, EF_PREFERENCE_STORE, formatShortcut, efTablePrefsKey, EfThemeConfigService, EF_BUILD_INFO, EfSessionIdleService, EF_SESSION, EfPermissionService, EfActiveModuleService, EF_SIDE_COLLAPSED_KEY, EfToastService } from '@elasticias/core';
 import * as i1$4 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
 import * as i1$5 from 'primeng/tooltip';
@@ -22,8 +25,6 @@ import * as i1$6 from 'primeng/dialog';
 import { DialogModule, Dialog } from 'primeng/dialog';
 import { SCREEN_REF_DATA_SERVICE, ScreenStateEnum } from '@elasticias/screens';
 import { Permissions } from '@elasticias/types';
-import { EfViewportService, EfShortcutService, EF_PREFERENCE_STORE, formatShortcut, efTablePrefsKey, EfThemeConfigService, EF_BUILD_INFO, EfSessionIdleService, EF_SESSION, EfPermissionService, EfActiveModuleService, EF_SIDE_COLLAPSED_KEY, EfToastService } from '@elasticias/core';
-import { Subject, tap, switchMap, catchError, EMPTY } from 'rxjs';
 import * as i1$7 from 'primeng/fieldset';
 import { FieldsetModule } from 'primeng/fieldset';
 import * as i2$2 from 'primeng/accordion';
@@ -223,6 +224,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 }]
         }], propDecorators: { quantity: [{ type: i0.Input, args: [{ isSignal: true, alias: "quantity", required: false }] }], quantityChange: [{ type: i0.Output, args: ["quantityChange"] }] } });
 
+/** A positive number, or null: the shop treats a missing, zero or non-numeric price as unpriced. */
+function positivePrice(value) {
+    if (typeof value !== 'number' && typeof value !== 'string')
+        return null;
+    if (typeof value === 'string' && value.trim() === '')
+        return null;
+    const n = Number(value);
+    return Number.isFinite(n) && n > 0 ? n : null;
+}
+/** The unit price a new line for `product` (and its chosen `variant`) starts at under `priceList`. */
+function defaultUnitPrice(product, variant, priceList = 'wholesale') {
+    if (priceList === 'retail') {
+        return (positivePrice(variant?.['salePrice']) ??
+            positivePrice(product['salePrice']) ??
+            0);
+    }
+    return (variant?.['price'] ??
+        product['unitPrice'] ??
+        product['salePrice'] ??
+        0);
+}
+
 /**
  * Helper functions for order line items
  */
@@ -294,14 +317,15 @@ class OrderLineItemHelper {
     /**
      * Create a line item from product selection
      * @param keyField - Field name used to identify the product (default: 'id')
+     * @param priceList - Which catalogue price the line starts at (see `EfOrderPriceList`)
      */
-    static createFromProduct(product, quantity = 1, keyField = 'id', variantId) {
+    static createFromProduct(product, quantity = 1, keyField = 'id', variantId, priceList = 'wholesale') {
         // Resolve variant data if variantId is provided and product has variants
         const variants = product['variants'];
         const variant = variantId && variants?.length
             ? variants.find((v) => v['variantId'] === variantId)
             : undefined;
-        const unitPrice = variant?.['price'] ?? product.unitPrice ?? product.salePrice ?? 0;
+        const unitPrice = defaultUnitPrice(product, variant, priceList);
         const taxRate = product.taxRate || 0;
         const countGroup = (variant?.['countGroup'] ?? product['countGroup'] ?? '');
         const item = {
@@ -533,6 +557,8 @@ class EfLabelComponent {
     label;
     /** Translation key — preferred. */
     labelKey;
+    /** Interpolation params for `labelKey`. */
+    labelParams;
     /** DOM id of the labelled input. Empty / unset → no `for` attr. */
     for;
     /** Caller-supplied extra class. The Comptoir `.ef-label` class is
@@ -553,11 +579,11 @@ class EfLabelComponent {
         return parts.join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.11", type: EfLabelComponent, isStandalone: true, selector: "ef-label", inputs: { label: "label", labelKey: "labelKey", for: "for", styleClass: "styleClass", required: ["required", "required", booleanAttribute] }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.11", type: EfLabelComponent, isStandalone: true, selector: "ef-label", inputs: { label: "label", labelKey: "labelKey", labelParams: "labelParams", for: "for", styleClass: "styleClass", required: ["required", "required", booleanAttribute] }, ngImport: i0, template: `
     <label
       [attr.for]="for || null"
       [class]="resolvedClass"
-    >{{ labelKey ? (labelKey | translate) : label }}</label>
+    >{{ labelKey ? (labelKey | translate: labelParams) : label }}</label>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ 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: EfLabelComponent, decorators: [{
@@ -566,12 +592,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
     <label
       [attr.for]="for || null"
       [class]="resolvedClass"
-    >{{ labelKey ? (labelKey | translate) : label }}</label>
+    >{{ labelKey ? (labelKey | translate: labelParams) : label }}</label>
   `, imports: [TranslateModule], styles: [":host{display:contents}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], labelKey: [{
                 type: Input
+            }], labelParams: [{
+                type: Input
             }], for: [{
                 type: Input
             }], styleClass: [{
@@ -735,9 +763,13 @@ class AbstractEfFormControl {
     /** Translation key for the label — preferred (memory:
      *  feedback_i18n_keys says always use `*Key`). */
     labelKey = input('', ...(ngDevMode ? [{ debugName: "labelKey" }] : /* istanbul ignore next */ []));
+    /** Interpolation params for `labelKey` (`{{name}}` in the translation). */
+    labelParams = input(undefined, ...(ngDevMode ? [{ debugName: "labelParams" }] : /* istanbul ignore next */ []));
     /* ── Placeholder (i18n) ───────────────────────────────────── */
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     placeholderKey = input('', ...(ngDevMode ? [{ debugName: "placeholderKey" }] : /* istanbul ignore next */ []));
+    /** Interpolation params for `placeholderKey` (`{{last4}}` and the like). */
+    placeholderParams = input(undefined, ...(ngDevMode ? [{ debugName: "placeholderParams" }] : /* istanbul ignore next */ []));
     /* ── Hint (i18n) ──────────────────────────────────────────── */
     /** Short help text shown under the control. Use `hintKey` for i18n. */
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
@@ -747,6 +779,8 @@ class AbstractEfFormControl {
      *  Rendered by ef-input-text, ef-textarea, ef-inputnumber and ef-select;
      *  the other controls inherit the input but do not render it yet. */
     hintKey = input('', ...(ngDevMode ? [{ debugName: "hintKey" }] : /* istanbul ignore next */ []));
+    /** Interpolation params for `hintKey`. */
+    hintParams = input(undefined, ...(ngDevMode ? [{ debugName: "hintParams" }] : /* istanbul ignore next */ []));
     /* ── Screen-reader-only label (when no visible label) ─────── */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     ariaLabelKey = input('', ...(ngDevMode ? [{ debugName: "ariaLabelKey" }] : /* istanbul ignore next */ []));
@@ -829,7 +863,7 @@ class AbstractEfFormControl {
     /** Translated placeholder (or empty string). */
     get effectivePlaceholder() {
         if (this.placeholderKey()) {
-            return this.translateService.instant(this.placeholderKey());
+            return this.translateService.instant(this.placeholderKey(), this.placeholderParams());
         }
         return this.placeholder() || '';
     }
@@ -847,10 +881,13 @@ class AbstractEfFormControl {
         }
         return this.ariaLabel() || null;
     }
+    /** Ids of elements outside the control that describe it too (a character
+     *  counter, a help block), appended to `aria-describedby`. */
+    describedByExtra = input('', ...(ngDevMode ? [{ debugName: "describedByExtra" }] : /* istanbul ignore next */ []));
     /** Translated hint (or empty string). */
     get effectiveHint() {
         if (this.hintKey()) {
-            return this.translateService.instant(this.hintKey());
+            return this.translateService.instant(this.hintKey(), this.hintParams());
         }
         return this.hint() || '';
     }
@@ -868,6 +905,7 @@ class AbstractEfFormControl {
         const ids = [
             this.effectiveHint ? this.hintId : null,
             showErrors ? this.errorsId : null,
+            this.describedByExtra() || null,
             ...extra,
         ].filter((id) => !!id);
         return ids.length ? ids.join(' ') : null;
@@ -879,12 +917,12 @@ class AbstractEfFormControl {
         return `${this.effectiveId}-errors`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractEfFormControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: AbstractEfFormControl, isStandalone: true, selector: "ng-component", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: AbstractEfFormControl, isStandalone: true, selector: "ng-component", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, labelParams: { classPropertyName: "labelParams", publicName: "labelParams", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, placeholderParams: { classPropertyName: "placeholderParams", publicName: "placeholderParams", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, hintParams: { classPropertyName: "hintParams", publicName: "hintParams", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, describedByExtra: { classPropertyName: "describedByExtra", publicName: "describedByExtra", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractEfFormControl, decorators: [{
             type: Component,
             args: [{ template: '', standalone: true }]
-        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
+        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], labelParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelParams", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], placeholderParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderParams", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], hintParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintParams", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], describedByExtra: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedByExtra", required: false }] }] } });
 
 /**
  * Comptoir select — wraps PrimeNG `p-select` (single) or `p-multiselect`
@@ -1189,7 +1227,7 @@ class EfSelectComponent extends AbstractEfFormControl {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => EfSelectComponent),
                 multi: true,
-            }], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true }, { propertyName: "selectedItemTemplate", first: true, predicate: ["selectedItem"], descendants: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"], descendants: true }, { propertyName: "emptyFilterTemplate", first: true, predicate: ["emptyFilter"], descendants: true }, { propertyName: "filterTemplate", first: true, predicate: ["filter"], descendants: true }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  @if (variant === 'comptoir') {\n    <!-- Comptoir variant \u2014 native <select> against the\n         .ef-select-native pattern. No filter / virtualization /\n         multi / templates; use the PrimeNG variant for those. -->\n    <select\n      class=\"ef-select-native\"\n      [id]=\"effectiveId\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"isDisabled()\"\n      [class.is-invalid]=\"isInvalid\"\n      [attr.aria-label]=\"effectiveAriaLabel\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n      (change)=\"handleNativeSelectChange($any($event.target).value)\"\n    >\n      <option value=\"\" [selected]=\"value === null || value === undefined\">{{ placeholderText }}</option>\n      @for (opt of filteredOptions; track $index) {\n        <option\n          [value]=\"optionValue ? opt[optionValue] : opt\"\n          [selected]=\"(optionValue ? opt[optionValue] : opt) === value\"\n        >\n          {{ opt[optionLabel] }}\n        </option>\n      }\n    </select>\n  } @else if (multiple) {\n    <!-- \u2500\u2500\u2500\u2500\u2500 PrimeNG multi-select branch \u2500\u2500\u2500\u2500\u2500 -->\n    <p-multiselect\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [ngModel]=\"value\"\n      [ngModelOptions]=\"{standalone: true}\"\n      (onChange)=\"handleSelectionChange($event)\"\n      (onClear)=\"handleClear()\"\n      (onFilter)=\"handleFilter($event)\"\n      (onPanelShow)=\"handlePanelShow()\"\n      (onPanelHide)=\"handlePanelHide()\"\n      [options]=\"filteredOptions\"\n      [optionLabel]=\"optionLabel\"\n      [optionValue]=\"optionValue\"\n      [optionDisabled]=\"optionDisabled\"\n      [dataKey]=\"dataKey\"\n      [group]=\"group\"\n      [optionGroupLabel]=\"optionGroupLabel\"\n      [optionGroupChildren]=\"optionGroupChildren\"\n      [placeholder]=\"placeholderText\"\n      [filter]=\"filter\"\n      [filterPlaceHolder]=\"effectiveFilterPlaceholder\"\n      [autofocusFilter]=\"autofocusFilter\"\n      [autofocus]=\"autofocus\"\n      [filterBy]=\"filterBy ?? optionLabel\"\n      [showClear]=\"showClear()\"\n      [disabled]=\"isDisabled()\"\n      [appendTo]=\"appendTo\"\n      [styleClass]=\"effectiveStyleClass\"\n      [pt]=\"describedByPt\"\n      [panelStyleClass]=\"effectivePanelStyleClass\"\n      [scrollHeight]=\"scrollHeight\"\n      [virtualScroll]=\"virtualScroll\"\n      [virtualScrollItemSize]=\"virtualScrollItemSize\"\n      [loading]=\"loading\"\n      [emptyMessage]=\"effectiveEmptyMessage\"\n      [emptyFilterMessage]=\"effectiveEmptyFilterMessage\"\n      [display]=\"multiDisplay\"\n      [showToggleAll]=\"showToggleAll\"\n      [class.ng-invalid]=\"isInvalid\"\n      [class.ng-touched]=\"ngControl?.touched\"\n      fluid\n    >\n      @if (itemTemplate) {\n        <ng-template #item let-item>\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\" />\n        </ng-template>\n      }\n      @if (selectedItemTemplate) {\n        <ng-template #selectedItems let-items>\n          <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: items }\" />\n        </ng-template>\n      }\n      @if (groupTemplate) {\n        <ng-template #group let-group>\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: group }\" />\n        </ng-template>\n      }\n      @if (headerTemplate) {\n        <ng-template #header>\n          <ng-container *ngTemplateOutlet=\"headerTemplate\" />\n        </ng-template>\n      }\n      @if (footerTemplate) {\n        <ng-template #footer>\n          <ng-container *ngTemplateOutlet=\"footerTemplate\" />\n        </ng-template>\n      }\n      @if (emptyTemplate) {\n        <ng-template #empty>\n          <ng-container *ngTemplateOutlet=\"emptyTemplate\" />\n        </ng-template>\n      }\n      @if (emptyFilterTemplate) {\n        <ng-template #emptyfilter>\n          <ng-container *ngTemplateOutlet=\"emptyFilterTemplate\" />\n        </ng-template>\n      }\n      @if (filterTemplate) {\n        <ng-template #filter let-options=\"options\">\n          <ng-container *ngTemplateOutlet=\"filterTemplate; context: { $implicit: options }\" />\n        </ng-template>\n      }\n      @if (loaderTemplate) {\n        <ng-template #loader>\n          <ng-container *ngTemplateOutlet=\"loaderTemplate\" />\n        </ng-template>\n      }\n      <ng-template #clearicon>\n        <span class=\"es-clear\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n            <path d=\"M18 6 6 18M6 6l12 12\" />\n          </svg>\n        </span>\n      </ng-template>\n      <ng-template #dropdownicon>\n        <svg class=\"ef-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </ng-template>\n    </p-multiselect>\n  } @else {\n    <!-- \u2500\u2500\u2500\u2500\u2500 PrimeNG single-select branch \u2500\u2500\u2500\u2500\u2500 -->\n    <p-select\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [ngModel]=\"value\"\n      [ngModelOptions]=\"{standalone: true}\"\n      (onChange)=\"handleSelectionChange($event)\"\n      (onClear)=\"handleClear()\"\n      (onFilter)=\"handleFilter($event)\"\n      (onShow)=\"handlePanelShow()\"\n      (onHide)=\"handlePanelHide()\"\n      [options]=\"filteredOptions\"\n      [optionLabel]=\"optionLabel\"\n      [optionValue]=\"optionValue\"\n      [optionDisabled]=\"optionDisabled\"\n      [dataKey]=\"dataKey\"\n      [group]=\"group\"\n      [optionGroupLabel]=\"optionGroupLabel\"\n      [optionGroupChildren]=\"optionGroupChildren\"\n      [placeholder]=\"placeholderText\"\n      [size]=\"size\"\n      [filter]=\"filter\"\n      [filterPlaceholder]=\"effectiveFilterPlaceholder\"\n      [filterBy]=\"filterBy ?? optionLabel\"\n      [autofocusFilter]=\"autofocusFilter\"\n      [autofocus]=\"autofocus\"\n      [showClear]=\"showClear()\"\n      [editable]=\"editable\"\n      [disabled]=\"isDisabled()\"\n      [appendTo]=\"appendTo\"\n      [styleClass]=\"effectiveStyleClass\"\n      [pt]=\"describedByPt\"\n      [panelStyleClass]=\"effectivePanelStyleClass\"\n      [scrollHeight]=\"scrollHeight\"\n      [virtualScroll]=\"virtualScroll\"\n      [virtualScrollItemSize]=\"virtualScrollItemSize\"\n      [loading]=\"loading\"\n      [emptyMessage]=\"effectiveEmptyMessage\"\n      [emptyFilterMessage]=\"effectiveEmptyFilterMessage\"\n      [class.ng-invalid]=\"isInvalid\"\n      [class.ng-touched]=\"ngControl?.touched\"\n      fluid\n    >\n      @if (itemTemplate) {\n        <ng-template #item let-item>\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\" />\n        </ng-template>\n      }\n      @if (selectedItemTemplate) {\n        <ng-template #selectedItem let-item>\n          <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: item }\" />\n        </ng-template>\n      }\n      @if (groupTemplate) {\n        <ng-template #group let-group>\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: group }\" />\n        </ng-template>\n      }\n      @if (headerTemplate) {\n        <ng-template #header>\n          <ng-container *ngTemplateOutlet=\"headerTemplate\" />\n        </ng-template>\n      }\n      @if (footerTemplate) {\n        <ng-template #footer>\n          <ng-container *ngTemplateOutlet=\"footerTemplate\" />\n        </ng-template>\n      }\n      @if (emptyTemplate) {\n        <ng-template #empty>\n          <ng-container *ngTemplateOutlet=\"emptyTemplate\" />\n        </ng-template>\n      }\n      @if (emptyFilterTemplate) {\n        <ng-template #emptyfilter>\n          <ng-container *ngTemplateOutlet=\"emptyFilterTemplate\" />\n        </ng-template>\n      }\n      @if (filterTemplate) {\n        <ng-template #filter let-options=\"options\">\n          <ng-container *ngTemplateOutlet=\"filterTemplate; context: { $implicit: options }\" />\n        </ng-template>\n      }\n      @if (loaderTemplate) {\n        <ng-template #loader>\n          <ng-container *ngTemplateOutlet=\"loaderTemplate\" />\n        </ng-template>\n      }\n      <ng-template #clearicon>\n        <span class=\"es-clear\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n            <path d=\"M18 6 6 18M6 6l12 12\" />\n          </svg>\n        </span>\n      </ng-template>\n      <ng-template #dropdownicon>\n        <svg class=\"ef-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </ng-template>\n    </p-select>\n  }\n  @if (effectiveHint) {\n    <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n  }\n  @if (showRequired || serverErrors) {\n    <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n      @if (showRequired) {\n        <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n      }\n      @if (serverErrors; as errors) {\n        @for (error of errors; track error) {\n          <small class=\"text-danger block\">{{ error }}</small>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ 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: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+            }], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true }, { propertyName: "selectedItemTemplate", first: true, predicate: ["selectedItem"], descendants: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"], descendants: true }, { propertyName: "emptyFilterTemplate", first: true, predicate: ["emptyFilter"], descendants: true }, { propertyName: "filterTemplate", first: true, predicate: ["filter"], descendants: true }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  @if (variant === 'comptoir') {\n    <!-- Comptoir variant \u2014 native <select> against the\n         .ef-select-native pattern. No filter / virtualization /\n         multi / templates; use the PrimeNG variant for those. -->\n    <select\n      class=\"ef-select-native\"\n      [id]=\"effectiveId\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"isDisabled()\"\n      [class.is-invalid]=\"isInvalid\"\n      [attr.aria-label]=\"effectiveAriaLabel\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n      (change)=\"handleNativeSelectChange($any($event.target).value)\"\n    >\n      <option value=\"\" [selected]=\"value === null || value === undefined\">{{ placeholderText }}</option>\n      @for (opt of filteredOptions; track $index) {\n        <option\n          [value]=\"optionValue ? opt[optionValue] : opt\"\n          [selected]=\"(optionValue ? opt[optionValue] : opt) === value\"\n        >\n          {{ opt[optionLabel] }}\n        </option>\n      }\n    </select>\n  } @else if (multiple) {\n    <!-- \u2500\u2500\u2500\u2500\u2500 PrimeNG multi-select branch \u2500\u2500\u2500\u2500\u2500 -->\n    <p-multiselect\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [ngModel]=\"value\"\n      [ngModelOptions]=\"{standalone: true}\"\n      (onChange)=\"handleSelectionChange($event)\"\n      (onClear)=\"handleClear()\"\n      (onFilter)=\"handleFilter($event)\"\n      (onPanelShow)=\"handlePanelShow()\"\n      (onPanelHide)=\"handlePanelHide()\"\n      [options]=\"filteredOptions\"\n      [optionLabel]=\"optionLabel\"\n      [optionValue]=\"optionValue\"\n      [optionDisabled]=\"optionDisabled\"\n      [dataKey]=\"dataKey\"\n      [group]=\"group\"\n      [optionGroupLabel]=\"optionGroupLabel\"\n      [optionGroupChildren]=\"optionGroupChildren\"\n      [placeholder]=\"placeholderText\"\n      [filter]=\"filter\"\n      [filterPlaceHolder]=\"effectiveFilterPlaceholder\"\n      [autofocusFilter]=\"autofocusFilter\"\n      [autofocus]=\"autofocus\"\n      [filterBy]=\"filterBy ?? optionLabel\"\n      [showClear]=\"showClear()\"\n      [disabled]=\"isDisabled()\"\n      [appendTo]=\"appendTo\"\n      [styleClass]=\"effectiveStyleClass\"\n      [pt]=\"describedByPt\"\n      [panelStyleClass]=\"effectivePanelStyleClass\"\n      [scrollHeight]=\"scrollHeight\"\n      [virtualScroll]=\"virtualScroll\"\n      [virtualScrollItemSize]=\"virtualScrollItemSize\"\n      [loading]=\"loading\"\n      [emptyMessage]=\"effectiveEmptyMessage\"\n      [emptyFilterMessage]=\"effectiveEmptyFilterMessage\"\n      [display]=\"multiDisplay\"\n      [showToggleAll]=\"showToggleAll\"\n      [class.ng-invalid]=\"isInvalid\"\n      [class.ng-touched]=\"ngControl?.touched\"\n      fluid\n    >\n      @if (itemTemplate) {\n        <ng-template #item let-item>\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\" />\n        </ng-template>\n      }\n      @if (selectedItemTemplate) {\n        <ng-template #selectedItems let-items>\n          <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: items }\" />\n        </ng-template>\n      }\n      @if (groupTemplate) {\n        <ng-template #group let-group>\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: group }\" />\n        </ng-template>\n      }\n      @if (headerTemplate) {\n        <ng-template #header>\n          <ng-container *ngTemplateOutlet=\"headerTemplate\" />\n        </ng-template>\n      }\n      @if (footerTemplate) {\n        <ng-template #footer>\n          <ng-container *ngTemplateOutlet=\"footerTemplate\" />\n        </ng-template>\n      }\n      @if (emptyTemplate) {\n        <ng-template #empty>\n          <ng-container *ngTemplateOutlet=\"emptyTemplate\" />\n        </ng-template>\n      }\n      @if (emptyFilterTemplate) {\n        <ng-template #emptyfilter>\n          <ng-container *ngTemplateOutlet=\"emptyFilterTemplate\" />\n        </ng-template>\n      }\n      @if (filterTemplate) {\n        <ng-template #filter let-options=\"options\">\n          <ng-container *ngTemplateOutlet=\"filterTemplate; context: { $implicit: options }\" />\n        </ng-template>\n      }\n      @if (loaderTemplate) {\n        <ng-template #loader>\n          <ng-container *ngTemplateOutlet=\"loaderTemplate\" />\n        </ng-template>\n      }\n      <ng-template #clearicon>\n        <span class=\"es-clear\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n            <path d=\"M18 6 6 18M6 6l12 12\" />\n          </svg>\n        </span>\n      </ng-template>\n      <ng-template #dropdownicon>\n        <svg class=\"ef-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </ng-template>\n    </p-multiselect>\n  } @else {\n    <!-- \u2500\u2500\u2500\u2500\u2500 PrimeNG single-select branch \u2500\u2500\u2500\u2500\u2500 -->\n    <p-select\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [ngModel]=\"value\"\n      [ngModelOptions]=\"{standalone: true}\"\n      (onChange)=\"handleSelectionChange($event)\"\n      (onClear)=\"handleClear()\"\n      (onFilter)=\"handleFilter($event)\"\n      (onShow)=\"handlePanelShow()\"\n      (onHide)=\"handlePanelHide()\"\n      [options]=\"filteredOptions\"\n      [optionLabel]=\"optionLabel\"\n      [optionValue]=\"optionValue\"\n      [optionDisabled]=\"optionDisabled\"\n      [dataKey]=\"dataKey\"\n      [group]=\"group\"\n      [optionGroupLabel]=\"optionGroupLabel\"\n      [optionGroupChildren]=\"optionGroupChildren\"\n      [placeholder]=\"placeholderText\"\n      [size]=\"size\"\n      [filter]=\"filter\"\n      [filterPlaceholder]=\"effectiveFilterPlaceholder\"\n      [filterBy]=\"filterBy ?? optionLabel\"\n      [autofocusFilter]=\"autofocusFilter\"\n      [autofocus]=\"autofocus\"\n      [showClear]=\"showClear()\"\n      [editable]=\"editable\"\n      [disabled]=\"isDisabled()\"\n      [appendTo]=\"appendTo\"\n      [styleClass]=\"effectiveStyleClass\"\n      [pt]=\"describedByPt\"\n      [panelStyleClass]=\"effectivePanelStyleClass\"\n      [scrollHeight]=\"scrollHeight\"\n      [virtualScroll]=\"virtualScroll\"\n      [virtualScrollItemSize]=\"virtualScrollItemSize\"\n      [loading]=\"loading\"\n      [emptyMessage]=\"effectiveEmptyMessage\"\n      [emptyFilterMessage]=\"effectiveEmptyFilterMessage\"\n      [class.ng-invalid]=\"isInvalid\"\n      [class.ng-touched]=\"ngControl?.touched\"\n      fluid\n    >\n      @if (itemTemplate) {\n        <ng-template #item let-item>\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\" />\n        </ng-template>\n      }\n      @if (selectedItemTemplate) {\n        <ng-template #selectedItem let-item>\n          <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: item }\" />\n        </ng-template>\n      }\n      @if (groupTemplate) {\n        <ng-template #group let-group>\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: group }\" />\n        </ng-template>\n      }\n      @if (headerTemplate) {\n        <ng-template #header>\n          <ng-container *ngTemplateOutlet=\"headerTemplate\" />\n        </ng-template>\n      }\n      @if (footerTemplate) {\n        <ng-template #footer>\n          <ng-container *ngTemplateOutlet=\"footerTemplate\" />\n        </ng-template>\n      }\n      @if (emptyTemplate) {\n        <ng-template #empty>\n          <ng-container *ngTemplateOutlet=\"emptyTemplate\" />\n        </ng-template>\n      }\n      @if (emptyFilterTemplate) {\n        <ng-template #emptyfilter>\n          <ng-container *ngTemplateOutlet=\"emptyFilterTemplate\" />\n        </ng-template>\n      }\n      @if (filterTemplate) {\n        <ng-template #filter let-options=\"options\">\n          <ng-container *ngTemplateOutlet=\"filterTemplate; context: { $implicit: options }\" />\n        </ng-template>\n      }\n      @if (loaderTemplate) {\n        <ng-template #loader>\n          <ng-container *ngTemplateOutlet=\"loaderTemplate\" />\n        </ng-template>\n      }\n      <ng-template #clearicon>\n        <span class=\"es-clear\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n            <path d=\"M18 6 6 18M6 6l12 12\" />\n          </svg>\n        </span>\n      </ng-template>\n      <ng-template #dropdownicon>\n        <svg class=\"ef-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </ng-template>\n    </p-select>\n  }\n  @if (effectiveHint) {\n    <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n  }\n  @if (showRequired || serverErrors) {\n    <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n      @if (showRequired) {\n        <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n      }\n      @if (serverErrors; as errors) {\n        @for (error of errors; track error) {\n          <small class=\"text-danger block\">{{ error }}</small>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ 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: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "labelParams", "for", "styleClass", "required"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfSelectComponent, decorators: [{
             type: Component,
@@ -1204,7 +1242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => EfSelectComponent),
                             multi: true,
-                        }], template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  @if (variant === 'comptoir') {\n    <!-- Comptoir variant \u2014 native <select> against the\n         .ef-select-native pattern. No filter / virtualization /\n         multi / templates; use the PrimeNG variant for those. -->\n    <select\n      class=\"ef-select-native\"\n      [id]=\"effectiveId\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"isDisabled()\"\n      [class.is-invalid]=\"isInvalid\"\n      [attr.aria-label]=\"effectiveAriaLabel\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n      (change)=\"handleNativeSelectChange($any($event.target).value)\"\n    >\n      <option value=\"\" [selected]=\"value === null || value === undefined\">{{ placeholderText }}</option>\n      @for (opt of filteredOptions; track $index) {\n        <option\n          [value]=\"optionValue ? opt[optionValue] : opt\"\n          [selected]=\"(optionValue ? opt[optionValue] : opt) === value\"\n        >\n          {{ opt[optionLabel] }}\n        </option>\n      }\n    </select>\n  } @else if (multiple) {\n    <!-- \u2500\u2500\u2500\u2500\u2500 PrimeNG multi-select branch \u2500\u2500\u2500\u2500\u2500 -->\n    <p-multiselect\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [ngModel]=\"value\"\n      [ngModelOptions]=\"{standalone: true}\"\n      (onChange)=\"handleSelectionChange($event)\"\n      (onClear)=\"handleClear()\"\n      (onFilter)=\"handleFilter($event)\"\n      (onPanelShow)=\"handlePanelShow()\"\n      (onPanelHide)=\"handlePanelHide()\"\n      [options]=\"filteredOptions\"\n      [optionLabel]=\"optionLabel\"\n      [optionValue]=\"optionValue\"\n      [optionDisabled]=\"optionDisabled\"\n      [dataKey]=\"dataKey\"\n      [group]=\"group\"\n      [optionGroupLabel]=\"optionGroupLabel\"\n      [optionGroupChildren]=\"optionGroupChildren\"\n      [placeholder]=\"placeholderText\"\n      [filter]=\"filter\"\n      [filterPlaceHolder]=\"effectiveFilterPlaceholder\"\n      [autofocusFilter]=\"autofocusFilter\"\n      [autofocus]=\"autofocus\"\n      [filterBy]=\"filterBy ?? optionLabel\"\n      [showClear]=\"showClear()\"\n      [disabled]=\"isDisabled()\"\n      [appendTo]=\"appendTo\"\n      [styleClass]=\"effectiveStyleClass\"\n      [pt]=\"describedByPt\"\n      [panelStyleClass]=\"effectivePanelStyleClass\"\n      [scrollHeight]=\"scrollHeight\"\n      [virtualScroll]=\"virtualScroll\"\n      [virtualScrollItemSize]=\"virtualScrollItemSize\"\n      [loading]=\"loading\"\n      [emptyMessage]=\"effectiveEmptyMessage\"\n      [emptyFilterMessage]=\"effectiveEmptyFilterMessage\"\n      [display]=\"multiDisplay\"\n      [showToggleAll]=\"showToggleAll\"\n      [class.ng-invalid]=\"isInvalid\"\n      [class.ng-touched]=\"ngControl?.touched\"\n      fluid\n    >\n      @if (itemTemplate) {\n        <ng-template #item let-item>\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\" />\n        </ng-template>\n      }\n      @if (selectedItemTemplate) {\n        <ng-template #selectedItems let-items>\n          <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: items }\" />\n        </ng-template>\n      }\n      @if (groupTemplate) {\n        <ng-template #group let-group>\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: group }\" />\n        </ng-template>\n      }\n      @if (headerTemplate) {\n        <ng-template #header>\n          <ng-container *ngTemplateOutlet=\"headerTemplate\" />\n        </ng-template>\n      }\n      @if (footerTemplate) {\n        <ng-template #footer>\n          <ng-container *ngTemplateOutlet=\"footerTemplate\" />\n        </ng-template>\n      }\n      @if (emptyTemplate) {\n        <ng-template #empty>\n          <ng-container *ngTemplateOutlet=\"emptyTemplate\" />\n        </ng-template>\n      }\n      @if (emptyFilterTemplate) {\n        <ng-template #emptyfilter>\n          <ng-container *ngTemplateOutlet=\"emptyFilterTemplate\" />\n        </ng-template>\n      }\n      @if (filterTemplate) {\n        <ng-template #filter let-options=\"options\">\n          <ng-container *ngTemplateOutlet=\"filterTemplate; context: { $implicit: options }\" />\n        </ng-template>\n      }\n      @if (loaderTemplate) {\n        <ng-template #loader>\n          <ng-container *ngTemplateOutlet=\"loaderTemplate\" />\n        </ng-template>\n      }\n      <ng-template #clearicon>\n        <span class=\"es-clear\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n            <path d=\"M18 6 6 18M6 6l12 12\" />\n          </svg>\n        </span>\n      </ng-template>\n      <ng-template #dropdownicon>\n        <svg class=\"ef-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </ng-template>\n    </p-multiselect>\n  } @else {\n    <!-- \u2500\u2500\u2500\u2500\u2500 PrimeNG single-select branch \u2500\u2500\u2500\u2500\u2500 -->\n    <p-select\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [ngModel]=\"value\"\n      [ngModelOptions]=\"{standalone: true}\"\n      (onChange)=\"handleSelectionChange($event)\"\n      (onClear)=\"handleClear()\"\n      (onFilter)=\"handleFilter($event)\"\n      (onShow)=\"handlePanelShow()\"\n      (onHide)=\"handlePanelHide()\"\n      [options]=\"filteredOptions\"\n      [optionLabel]=\"optionLabel\"\n      [optionValue]=\"optionValue\"\n      [optionDisabled]=\"optionDisabled\"\n      [dataKey]=\"dataKey\"\n      [group]=\"group\"\n      [optionGroupLabel]=\"optionGroupLabel\"\n      [optionGroupChildren]=\"optionGroupChildren\"\n      [placeholder]=\"placeholderText\"\n      [size]=\"size\"\n      [filter]=\"filter\"\n      [filterPlaceholder]=\"effectiveFilterPlaceholder\"\n      [filterBy]=\"filterBy ?? optionLabel\"\n      [autofocusFilter]=\"autofocusFilter\"\n      [autofocus]=\"autofocus\"\n      [showClear]=\"showClear()\"\n      [editable]=\"editable\"\n      [disabled]=\"isDisabled()\"\n      [appendTo]=\"appendTo\"\n      [styleClass]=\"effectiveStyleClass\"\n      [pt]=\"describedByPt\"\n      [panelStyleClass]=\"effectivePanelStyleClass\"\n      [scrollHeight]=\"scrollHeight\"\n      [virtualScroll]=\"virtualScroll\"\n      [virtualScrollItemSize]=\"virtualScrollItemSize\"\n      [loading]=\"loading\"\n      [emptyMessage]=\"effectiveEmptyMessage\"\n      [emptyFilterMessage]=\"effectiveEmptyFilterMessage\"\n      [class.ng-invalid]=\"isInvalid\"\n      [class.ng-touched]=\"ngControl?.touched\"\n      fluid\n    >\n      @if (itemTemplate) {\n        <ng-template #item let-item>\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\" />\n        </ng-template>\n      }\n      @if (selectedItemTemplate) {\n        <ng-template #selectedItem let-item>\n          <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: item }\" />\n        </ng-template>\n      }\n      @if (groupTemplate) {\n        <ng-template #group let-group>\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: group }\" />\n        </ng-template>\n      }\n      @if (headerTemplate) {\n        <ng-template #header>\n          <ng-container *ngTemplateOutlet=\"headerTemplate\" />\n        </ng-template>\n      }\n      @if (footerTemplate) {\n        <ng-template #footer>\n          <ng-container *ngTemplateOutlet=\"footerTemplate\" />\n        </ng-template>\n      }\n      @if (emptyTemplate) {\n        <ng-template #empty>\n          <ng-container *ngTemplateOutlet=\"emptyTemplate\" />\n        </ng-template>\n      }\n      @if (emptyFilterTemplate) {\n        <ng-template #emptyfilter>\n          <ng-container *ngTemplateOutlet=\"emptyFilterTemplate\" />\n        </ng-template>\n      }\n      @if (filterTemplate) {\n        <ng-template #filter let-options=\"options\">\n          <ng-container *ngTemplateOutlet=\"filterTemplate; context: { $implicit: options }\" />\n        </ng-template>\n      }\n      @if (loaderTemplate) {\n        <ng-template #loader>\n          <ng-container *ngTemplateOutlet=\"loaderTemplate\" />\n        </ng-template>\n      }\n      <ng-template #clearicon>\n        <span class=\"es-clear\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n            <path d=\"M18 6 6 18M6 6l12 12\" />\n          </svg>\n        </span>\n      </ng-template>\n      <ng-template #dropdownicon>\n        <svg class=\"ef-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </ng-template>\n    </p-select>\n  }\n  @if (effectiveHint) {\n    <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n  }\n  @if (showRequired || serverErrors) {\n    <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n      @if (showRequired) {\n        <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n      }\n      @if (serverErrors; as errors) {\n        @for (error of errors; track error) {\n          <small class=\"text-danger block\">{{ error }}</small>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"] }]
+                        }], template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  @if (variant === 'comptoir') {\n    <!-- Comptoir variant \u2014 native <select> against the\n         .ef-select-native pattern. No filter / virtualization /\n         multi / templates; use the PrimeNG variant for those. -->\n    <select\n      class=\"ef-select-native\"\n      [id]=\"effectiveId\"\n      [attr.name]=\"name() || null\"\n      [disabled]=\"isDisabled()\"\n      [class.is-invalid]=\"isInvalid\"\n      [attr.aria-label]=\"effectiveAriaLabel\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n      (change)=\"handleNativeSelectChange($any($event.target).value)\"\n    >\n      <option value=\"\" [selected]=\"value === null || value === undefined\">{{ placeholderText }}</option>\n      @for (opt of filteredOptions; track $index) {\n        <option\n          [value]=\"optionValue ? opt[optionValue] : opt\"\n          [selected]=\"(optionValue ? opt[optionValue] : opt) === value\"\n        >\n          {{ opt[optionLabel] }}\n        </option>\n      }\n    </select>\n  } @else if (multiple) {\n    <!-- \u2500\u2500\u2500\u2500\u2500 PrimeNG multi-select branch \u2500\u2500\u2500\u2500\u2500 -->\n    <p-multiselect\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [ngModel]=\"value\"\n      [ngModelOptions]=\"{standalone: true}\"\n      (onChange)=\"handleSelectionChange($event)\"\n      (onClear)=\"handleClear()\"\n      (onFilter)=\"handleFilter($event)\"\n      (onPanelShow)=\"handlePanelShow()\"\n      (onPanelHide)=\"handlePanelHide()\"\n      [options]=\"filteredOptions\"\n      [optionLabel]=\"optionLabel\"\n      [optionValue]=\"optionValue\"\n      [optionDisabled]=\"optionDisabled\"\n      [dataKey]=\"dataKey\"\n      [group]=\"group\"\n      [optionGroupLabel]=\"optionGroupLabel\"\n      [optionGroupChildren]=\"optionGroupChildren\"\n      [placeholder]=\"placeholderText\"\n      [filter]=\"filter\"\n      [filterPlaceHolder]=\"effectiveFilterPlaceholder\"\n      [autofocusFilter]=\"autofocusFilter\"\n      [autofocus]=\"autofocus\"\n      [filterBy]=\"filterBy ?? optionLabel\"\n      [showClear]=\"showClear()\"\n      [disabled]=\"isDisabled()\"\n      [appendTo]=\"appendTo\"\n      [styleClass]=\"effectiveStyleClass\"\n      [pt]=\"describedByPt\"\n      [panelStyleClass]=\"effectivePanelStyleClass\"\n      [scrollHeight]=\"scrollHeight\"\n      [virtualScroll]=\"virtualScroll\"\n      [virtualScrollItemSize]=\"virtualScrollItemSize\"\n      [loading]=\"loading\"\n      [emptyMessage]=\"effectiveEmptyMessage\"\n      [emptyFilterMessage]=\"effectiveEmptyFilterMessage\"\n      [display]=\"multiDisplay\"\n      [showToggleAll]=\"showToggleAll\"\n      [class.ng-invalid]=\"isInvalid\"\n      [class.ng-touched]=\"ngControl?.touched\"\n      fluid\n    >\n      @if (itemTemplate) {\n        <ng-template #item let-item>\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\" />\n        </ng-template>\n      }\n      @if (selectedItemTemplate) {\n        <ng-template #selectedItems let-items>\n          <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: items }\" />\n        </ng-template>\n      }\n      @if (groupTemplate) {\n        <ng-template #group let-group>\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: group }\" />\n        </ng-template>\n      }\n      @if (headerTemplate) {\n        <ng-template #header>\n          <ng-container *ngTemplateOutlet=\"headerTemplate\" />\n        </ng-template>\n      }\n      @if (footerTemplate) {\n        <ng-template #footer>\n          <ng-container *ngTemplateOutlet=\"footerTemplate\" />\n        </ng-template>\n      }\n      @if (emptyTemplate) {\n        <ng-template #empty>\n          <ng-container *ngTemplateOutlet=\"emptyTemplate\" />\n        </ng-template>\n      }\n      @if (emptyFilterTemplate) {\n        <ng-template #emptyfilter>\n          <ng-container *ngTemplateOutlet=\"emptyFilterTemplate\" />\n        </ng-template>\n      }\n      @if (filterTemplate) {\n        <ng-template #filter let-options=\"options\">\n          <ng-container *ngTemplateOutlet=\"filterTemplate; context: { $implicit: options }\" />\n        </ng-template>\n      }\n      @if (loaderTemplate) {\n        <ng-template #loader>\n          <ng-container *ngTemplateOutlet=\"loaderTemplate\" />\n        </ng-template>\n      }\n      <ng-template #clearicon>\n        <span class=\"es-clear\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n            <path d=\"M18 6 6 18M6 6l12 12\" />\n          </svg>\n        </span>\n      </ng-template>\n      <ng-template #dropdownicon>\n        <svg class=\"ef-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </ng-template>\n    </p-multiselect>\n  } @else {\n    <!-- \u2500\u2500\u2500\u2500\u2500 PrimeNG single-select branch \u2500\u2500\u2500\u2500\u2500 -->\n    <p-select\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [ngModel]=\"value\"\n      [ngModelOptions]=\"{standalone: true}\"\n      (onChange)=\"handleSelectionChange($event)\"\n      (onClear)=\"handleClear()\"\n      (onFilter)=\"handleFilter($event)\"\n      (onShow)=\"handlePanelShow()\"\n      (onHide)=\"handlePanelHide()\"\n      [options]=\"filteredOptions\"\n      [optionLabel]=\"optionLabel\"\n      [optionValue]=\"optionValue\"\n      [optionDisabled]=\"optionDisabled\"\n      [dataKey]=\"dataKey\"\n      [group]=\"group\"\n      [optionGroupLabel]=\"optionGroupLabel\"\n      [optionGroupChildren]=\"optionGroupChildren\"\n      [placeholder]=\"placeholderText\"\n      [size]=\"size\"\n      [filter]=\"filter\"\n      [filterPlaceholder]=\"effectiveFilterPlaceholder\"\n      [filterBy]=\"filterBy ?? optionLabel\"\n      [autofocusFilter]=\"autofocusFilter\"\n      [autofocus]=\"autofocus\"\n      [showClear]=\"showClear()\"\n      [editable]=\"editable\"\n      [disabled]=\"isDisabled()\"\n      [appendTo]=\"appendTo\"\n      [styleClass]=\"effectiveStyleClass\"\n      [pt]=\"describedByPt\"\n      [panelStyleClass]=\"effectivePanelStyleClass\"\n      [scrollHeight]=\"scrollHeight\"\n      [virtualScroll]=\"virtualScroll\"\n      [virtualScrollItemSize]=\"virtualScrollItemSize\"\n      [loading]=\"loading\"\n      [emptyMessage]=\"effectiveEmptyMessage\"\n      [emptyFilterMessage]=\"effectiveEmptyFilterMessage\"\n      [class.ng-invalid]=\"isInvalid\"\n      [class.ng-touched]=\"ngControl?.touched\"\n      fluid\n    >\n      @if (itemTemplate) {\n        <ng-template #item let-item>\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\" />\n        </ng-template>\n      }\n      @if (selectedItemTemplate) {\n        <ng-template #selectedItem let-item>\n          <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: item }\" />\n        </ng-template>\n      }\n      @if (groupTemplate) {\n        <ng-template #group let-group>\n          <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: group }\" />\n        </ng-template>\n      }\n      @if (headerTemplate) {\n        <ng-template #header>\n          <ng-container *ngTemplateOutlet=\"headerTemplate\" />\n        </ng-template>\n      }\n      @if (footerTemplate) {\n        <ng-template #footer>\n          <ng-container *ngTemplateOutlet=\"footerTemplate\" />\n        </ng-template>\n      }\n      @if (emptyTemplate) {\n        <ng-template #empty>\n          <ng-container *ngTemplateOutlet=\"emptyTemplate\" />\n        </ng-template>\n      }\n      @if (emptyFilterTemplate) {\n        <ng-template #emptyfilter>\n          <ng-container *ngTemplateOutlet=\"emptyFilterTemplate\" />\n        </ng-template>\n      }\n      @if (filterTemplate) {\n        <ng-template #filter let-options=\"options\">\n          <ng-container *ngTemplateOutlet=\"filterTemplate; context: { $implicit: options }\" />\n        </ng-template>\n      }\n      @if (loaderTemplate) {\n        <ng-template #loader>\n          <ng-container *ngTemplateOutlet=\"loaderTemplate\" />\n        </ng-template>\n      }\n      <ng-template #clearicon>\n        <span class=\"es-clear\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n            <path d=\"M18 6 6 18M6 6l12 12\" />\n          </svg>\n        </span>\n      </ng-template>\n      <ng-template #dropdownicon>\n        <svg class=\"ef-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </ng-template>\n    </p-select>\n  }\n  @if (effectiveHint) {\n    <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n  }\n  @if (showRequired || serverErrors) {\n    <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n      @if (showRequired) {\n        <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n      }\n      @if (serverErrors; as errors) {\n        @for (error of errors; track error) {\n          <small class=\"text-danger block\">{{ error }}</small>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], optionLabel: [{
@@ -1390,6 +1428,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Output
             }] } });
 
+/** Below this the panel is too short to use; it takes the space anyway. */
+const MIN_USABLE_HEIGHT = 160;
+function placeDpPanel(input) {
+    const gap = input.gap ?? 8;
+    const margin = input.margin ?? 8;
+    const { anchor, panel, viewport, rtl } = input;
+    // ── Block axis ──
+    const roomBelow = viewport.height - anchor.bottom - gap - margin;
+    const roomAbove = anchor.top - gap - margin;
+    let side;
+    if (panel.height <= roomBelow)
+        side = 'below';
+    else if (panel.height <= roomAbove)
+        side = 'above';
+    else
+        side = roomAbove > roomBelow ? 'above' : 'below';
+    const room = side === 'below' ? roomBelow : roomAbove;
+    const maxHeight = Math.max(Math.floor(room), MIN_USABLE_HEIGHT);
+    // ── Inline axis ──
+    const width = Math.min(panel.width, viewport.width - 2 * margin);
+    const startAligned = rtl ? anchor.right - width : anchor.left;
+    const endAligned = rtl ? anchor.left : anchor.right - width;
+    const fits = (left) => left >= margin && left + width <= viewport.width - margin;
+    let left = fits(startAligned) ? startAligned : endAligned;
+    left = Math.min(Math.max(left, margin), Math.max(margin, viewport.width - margin - width));
+    return {
+        side,
+        top: side === 'below' ? Math.round(anchor.bottom + gap) : null,
+        bottom: side === 'above' ? Math.round(viewport.height - anchor.top + gap) : null,
+        left: Math.round(left),
+        maxHeight,
+    };
+}
+
 /**
  * Comptoir period selector for smart-bars — a pill trigger ("Date — 30
  * derniers jours v") that opens a popover with a preset list and an
@@ -1422,6 +1494,11 @@ class EfDatepickerAdvancedComponent extends AbstractEfFormControl {
     vcr = inject(ViewContainerRef);
     destroyRef = inject(DestroyRef);
     cdr = inject(ChangeDetectorRef);
+    viewport = inject(EfViewportService);
+    /** The one picker whose panel is open on the page, if any. A click on
+     *  another picker's trigger never reaches the document (the trigger
+     *  stops it), so opening a picker closes this one explicitly. */
+    static openPicker = null;
     /**
      * Self-injected form control (present only when the consumer binds
      * `[(ngModel)]` / `formControlName` in field mode). We register as its
@@ -1438,7 +1515,19 @@ class EfDatepickerAdvancedComponent extends AbstractEfFormControl {
     /** Active embedded view + its root node, while the panel is open. */
     panelView = null;
     panelRoot = null;
-    resizeHandler = null;
+    /** Every root node the panel template rendered (the sheet backdrop too). */
+    portalNodes = [];
+    repositionListener = null;
+    resizeObserver = null;
+    repositionFrame = 0;
+    /** Phone width (EfViewportService, <= 767px): the panel opens as a
+     *  full-width bottom sheet with 48px targets instead of a popover. */
+    sheet = computed(() => this.viewport.isMobile(), ...(ngDevMode ? [{ debugName: "sheet" }] : /* istanbul ignore next */ []));
+    /** The dialog's accessible name: the field's own label in field mode
+     *  (the panel no longer repeats it as a visible title), else the
+     *  trigger label. */
+    panelLabelKey = computed(() => this.mode() === 'field' && this.labelKey() ? this.labelKey() : this.triggerLabelKey(), ...(ngDevMode ? [{ debugName: "panelLabelKey" }] : /* istanbul ignore next */ []));
+    panelLabel = computed(() => this.mode() === 'field' && !this.labelKey() && this.label() ? this.label() : this.triggerLabel(), ...(ngDevMode ? [{ debugName: "panelLabel" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         // Register as our own NgControl's value accessor (field mode only).
@@ -1451,6 +1540,15 @@ class EfDatepickerAdvancedComponent extends AbstractEfFormControl {
             else
                 this.detachPortal();
         });
+        // Crossing the phone breakpoint while open would leave a popover
+        // styled as a sheet, or the reverse. Close rather than morph.
+        let wasSheet = this.sheet();
+        effect(() => {
+            const isSheet = this.sheet();
+            if (isSheet !== wasSheet && this.open())
+                this.close();
+            wasSheet = isSheet;
+        });
         // Last-line cleanup if the host is destroyed while the panel is open
         // (route change, *ngIf collapse, …) — orphan DOM is the worst.
         this.destroyRef.onDestroy(() => this.detachPortal());
@@ -1625,6 +1723,26 @@ class EfDatepickerAdvancedComponent extends AbstractEfFormControl {
     /* ── Field mode: committed value (ControlValueAccessor) ──────────
        The trigger in field mode renders THIS — the committed CVA value —
        not the drafts (mid-selection) nor `resolvedRange()` (filter-only). */
+    /** Bumps whenever the language or its translations change, so the
+     *  placeholder below re-reads the dictionary. */
+    i18nTick = toSignal(merge(this.translate.onLangChange, this.translate.onTranslationChange), { initialValue: null });
+    /**
+     * Placeholder of the typed-date inputs. The parser takes ASCII digits
+     * only, day first (`\d` and the keydown filter are [0-9/]), so the hint
+     * spells that order in the reader's terms, in Latin letters: `JJ/MM/AAAA`
+     * for French, `DD/MM/YYYY` otherwise, Arabic included. An Arabic-word
+     * pattern (يوم/شهر/سنة) would lay out right to left, the reverse of the
+     * digits the user then types. An app can override it per language with
+     * the `date_input_placeholder` key.
+     */
+    datePlaceholder = computed(() => {
+        this.i18nTick();
+        const key = 'date_input_placeholder';
+        const translated = this.translate.instant(key);
+        if (typeof translated === 'string' && translated && translated !== key)
+            return translated;
+        return String(this.locale).toLowerCase().startsWith('fr') ? 'JJ/MM/AAAA' : 'DD/MM/YYYY';
+    }, ...(ngDevMode ? [{ debugName: "datePlaceholder" }] : /* istanbul ignore next */ []));
     /** Committed value pushed in via `writeValue` / day-pick / Apply. */
     fieldValue = signal(null, ...(ngDevMode ? [{ debugName: "fieldValue" }] : /* istanbul ignore next */ []));
     /* isDisabled (the `[disabled]` input OR form-driven) and updateDisabledState
@@ -1783,7 +1901,7 @@ class EfDatepickerAdvancedComponent extends AbstractEfFormControl {
     commitField(value) {
         this.fieldValue.set(value);
         this.onChange(this.toOutput(value));
-        this.close();
+        this.close(true);
     }
     /** Merge a day with a draft time. Returns start-of-day when `showTime`
      *  is off, so date-only commits stay time-free. */
@@ -1841,6 +1959,10 @@ class EfDatepickerAdvancedComponent extends AbstractEfFormControl {
             return;
         this.open.update(v => !v);
         if (this.open()) {
+            const previous = EfDatepickerAdvancedComponent.openPicker;
+            if (previous && previous !== this)
+                previous.close();
+            EfDatepickerAdvancedComponent.openPicker = this;
             this.calMode.set('days');
             if (this.mode() === 'field') {
                 // No presets in field mode — open straight to the calendar.
@@ -1866,12 +1988,28 @@ class EfDatepickerAdvancedComponent extends AbstractEfFormControl {
             this.closed.emit();
         }
     }
-    close() {
+    /**
+     * Close the panel. `returnFocus` puts focus back on the trigger; Escape
+     * and a commit pass it, so a keyboard user is not dropped on <body>
+     * when the panel's DOM goes. An outside click or another picker opening
+     * does not, since the user has just put focus somewhere else.
+     */
+    close(returnFocus = false) {
         if (!this.open())
             return;
         this.open.set(false);
+        if (EfDatepickerAdvancedComponent.openPicker === this)
+            EfDatepickerAdvancedComponent.openPicker = null;
         this.onTouched();
         this.closed.emit();
+        if (returnFocus)
+            this.focusTrigger();
+    }
+    /** The trigger sits behind an `@if` (field box or pill), so find it now. */
+    focusTrigger() {
+        this.host.nativeElement
+            .querySelector('.dp__field-trigger, .dp__trigger')
+            ?.focus();
     }
     onDocumentClick(event) {
         if (!this.open())
@@ -1887,7 +2025,36 @@ class EfDatepickerAdvancedComponent extends AbstractEfFormControl {
             return;
         this.close();
     }
+    /** The phone sheet is aria-modal, so Tab wraps inside it instead of
+     *  reaching the page behind the backdrop. */
+    onTab(event) {
+        if (event.key !== 'Tab')
+            return;
+        const root = this.panelRoot;
+        if (!this.open() || !this.sheet() || !root)
+            return;
+        const items = Array.from(root.querySelectorAll('button, input, select, textarea, [href], [tabindex]')).filter(el => !el.hasAttribute('disabled') && el.tabIndex >= 0 && !el.closest('.dp__view:not(.active)'));
+        if (!items.length)
+            return;
+        const first = items[0];
+        const last = items[items.length - 1];
+        const active = document.activeElement;
+        if (!root.contains(active)) {
+            event.preventDefault();
+            (event.shiftKey ? last : first).focus();
+        }
+        else if (event.shiftKey && active === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
     onEscape() {
+        if (!this.open())
+            return;
         // Drill back out one level at a time: year/month picker → day grid
         // → presets → closed.
         if (this.view() === 'custom' && this.calMode() !== 'days') {
@@ -1899,7 +2066,7 @@ class EfDatepickerAdvancedComponent extends AbstractEfFormControl {
             this.backToPresets();
             return;
         }
-        this.close();
+        this.close(true);
     }
     /* ── Preset actions ─────────────────────────────────────────── */
     selectPreset(preset) {
@@ -1909,7 +2076,7 @@ class EfDatepickerAdvancedComponent extends AbstractEfFormControl {
         }
         const range = this.computePresetRange(preset.key);
         this.rangeChange.emit(range);
-        this.close();
+        this.close(true);
     }
     isActivePreset(key) {
         return (this.activePreset() ?? 'last_30_days') === key;
@@ -2022,64 +2189,141 @@ class EfDatepickerAdvancedComponent extends AbstractEfFormControl {
         // Re-sync to canonical (zero-padded) regardless of how it was typed.
         el.value = which === 'start' ? this.fromText() : this.toText();
     }
-    /* ── Portal (panel rendered as a child of <body>) ───────────── */
+    /* ── Portal (panel rendered as a child of <body>) ─────────────
+       The panel is appended to <body>, so no ancestor's overflow (a card,
+       a table scroller, the shell's content area) can clip it, and it is
+       fixed to the viewport, so it can never extend the page. PrimeNG's
+       ZIndexUtils gives it the next overlay layer: a picker opened inside
+       a dialog (1101 and up) paints above that dialog. The CDK overlay
+       container sits at a flat 1000, below every PrimeNG dialog, and the
+       CDK is not a dependency of this library. */
     attachPortal() {
         if (this.panelView || !this.panelTpl)
             return;
         this.panelView = this.vcr.createEmbeddedView(this.panelTpl);
         this.panelView.detectChanges();
-        const root = this.panelView.rootNodes.find((n) => n instanceof HTMLElement);
+        this.portalNodes = this.panelView.rootNodes.filter((n) => n instanceof HTMLElement);
+        const root = this.portalNodes.find(n => n.classList.contains('dp__panel'));
         if (!root)
             return;
         this.panelRoot = root;
-        document.body.appendChild(root);
+        // The panel leaves the host's subtree, so it would lose a `dir` set
+        // on an ancestor below <html>; carry the direction across.
+        root.setAttribute('dir', this.isRtl() ? 'rtl' : 'ltr');
+        for (const node of this.portalNodes) {
+            document.body.appendChild(node);
+            ZIndexUtils.set('overlay', node, 1000);
+        }
+        // The sheet is pinned to the bottom edge by CSS; only the popover
+        // follows its trigger. On a phone the on-screen keyboard fires
+        // resize and scroll, which must not move or close the sheet.
+        if (this.sheet()) {
+            this.focusIntoSheet(root);
+            return;
+        }
         this.positionPanel();
-        // Reposition when the viewport changes; scroll already moves the
-        // panel with the trigger because we use absolute / page coords.
-        this.resizeHandler = () => this.positionPanel();
-        window.addEventListener('resize', this.resizeHandler);
+        this.repositionListener = (event) => {
+            // A scroll inside the panel itself does not move the trigger.
+            if (event.type === 'scroll' && event.target instanceof Node && root.contains(event.target))
+                return;
+            this.schedulePosition();
+        };
+        document.addEventListener('scroll', this.repositionListener, { capture: true, passive: true });
+        window.addEventListener('resize', this.repositionListener, { passive: true });
+        // The content changes height (day grid ↔ month grid, a time row):
+        // re-decide the side so the taller view still fits.
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.schedulePosition());
+            this.resizeObserver.observe(root);
+        }
     }
     detachPortal() {
-        if (this.resizeHandler) {
-            window.removeEventListener('resize', this.resizeHandler);
-            this.resizeHandler = null;
-        }
-        if (this.panelRoot && this.panelRoot.parentNode) {
-            this.panelRoot.parentNode.removeChild(this.panelRoot);
-        }
+        if (this.repositionListener) {
+            document.removeEventListener('scroll', this.repositionListener, { capture: true });
+            window.removeEventListener('resize', this.repositionListener);
+            this.repositionListener = null;
+        }
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+        if (this.repositionFrame) {
+            cancelAnimationFrame(this.repositionFrame);
+            this.repositionFrame = 0;
+        }
+        for (const node of this.portalNodes) {
+            ZIndexUtils.clear(node);
+            node.parentNode?.removeChild(node);
+        }
+        this.portalNodes = [];
         this.panelRoot = null;
         if (this.panelView) {
             this.panelView.destroy();
             this.panelView = null;
         }
+        if (EfDatepickerAdvancedComponent.openPicker === this)
+            EfDatepickerAdvancedComponent.openPicker = null;
+    }
+    /** The sheet is modal and sits at the end of <body>, far from the
+     *  trigger in tab order, so focus moves into it: the picked day, else
+     *  today, else the first day of the month. A day, not the date input,
+     *  which would raise the on-screen keyboard over the calendar. */
+    focusIntoSheet(root) {
+        const day = root.querySelector('.dp__view.active .dp__cal-day.range-start') ??
+            root.querySelector('.dp__view.active .dp__cal-day.today') ??
+            root.querySelector('.dp__view.active .dp__cal-day:not(.out)') ??
+            root.querySelector('.dp__view.active button');
+        day?.focus();
+    }
+    schedulePosition() {
+        if (this.repositionFrame)
+            return;
+        this.repositionFrame = requestAnimationFrame(() => {
+            this.repositionFrame = 0;
+            this.positionPanel();
+        });
     }
-    /** Anchor the panel's top-left to the trigger's bottom-left, using
-     *  page coords so the panel scrolls with the trigger naturally.
-     *  Flips to right-aligned (and clamps to the viewport) when the
-     *  default left-anchor would overflow the right edge — otherwise the
-     *  panel is clipped for triggers that sit near the right of the page. */
+    /** Place the popover against the trigger (see `placeDpPanel`). Sizes
+     *  come from offsetWidth / scrollHeight, not getBoundingClientRect:
+     *  the entry animation scales the panel, and scrollHeight still tells
+     *  the natural height once a previous placement capped it. */
     positionPanel() {
-        if (!this.panelRoot || !this.anchorEl)
-            return;
-        const rect = this.anchorEl.nativeElement.getBoundingClientRect();
-        const margin = 8;
-        const viewportWidth = document.documentElement.clientWidth;
-        const panelWidth = this.panelRoot.offsetWidth || 320;
-        // Default: align panel's left edge to the trigger's left edge.
-        let left = rect.left;
-        // Flip to right-aligned (panel right edge ↔ trigger right edge)
-        // if the panel would spill past the right viewport edge.
-        if (left + panelWidth > viewportWidth - margin) {
-            left = rect.right - panelWidth;
-        }
-        // Never let it spill past the left edge either.
-        left = Math.max(margin, left);
-        Object.assign(this.panelRoot.style, {
-            position: 'absolute',
-            top: `${window.scrollY + rect.bottom + 8}px`,
-            left: `${window.scrollX + left}px`,
-            insetInlineEnd: 'auto',
+        const panel = this.panelRoot;
+        if (!panel || this.sheet())
+            return;
+        const anchor = this.triggerRect();
+        const vw = document.documentElement.clientWidth || window.innerWidth;
+        const vh = document.documentElement.clientHeight || window.innerHeight;
+        const place = placeDpPanel({
+            anchor,
+            panel: { width: panel.offsetWidth || 340, height: panel.scrollHeight || 0 },
+            viewport: { width: vw, height: vh },
+            rtl: this.isRtl(),
+        });
+        const px = (n) => (n == null ? 'auto' : `${n}px`);
+        // All four physical sides, so no logical inset from a stylesheet
+        // can pull the panel across in a right-to-left page.
+        Object.assign(panel.style, {
+            position: 'fixed',
+            top: px(place.top),
+            bottom: px(place.bottom),
+            left: px(place.left),
+            right: 'auto',
+            maxHeight: px(place.maxHeight),
         });
+        panel.dataset['side'] = place.side;
+    }
+    /** The trigger button's box, not the wrapper's: the wrapper also holds
+     *  the label above and the error text below. */
+    triggerRect() {
+        const trigger = this.host.nativeElement.querySelector('.dp__field-trigger, .dp__trigger');
+        return (trigger ?? this.anchorEl.nativeElement).getBoundingClientRect();
+    }
+    /** The nearest `dir` wins (the app sets it on <html>); computed style covers a page without one. */
+    isRtl() {
+        const el = this.host.nativeElement;
+        const dir = el.closest('[dir]')?.getAttribute('dir');
+        if (dir)
+            return dir.toLowerCase() === 'rtl';
+        return getComputedStyle(el).direction === 'rtl';
     }
     /** Click handling: 1st click sets start, 2nd click sets end (or swap).
      *  Field single-date mode short-circuits — one click commits & closes. */
@@ -2129,7 +2373,7 @@ class EfDatepickerAdvancedComponent extends AbstractEfFormControl {
             return;
         }
         this.rangeChange.emit(this.buildRange('custom', s, e));
-        this.close();
+        this.close(true);
     }
     /** Field single-date mode: commit a typed `JJ/MM/AAAA` value & close.
      *  With `showTime`, only update the draft — Apply commits date + time. */
@@ -2353,11 +2597,11 @@ class EfDatepickerAdvancedComponent extends AbstractEfFormControl {
     trackByDay = (_, day) => day.date.getTime();
     trackByDow = (_, label) => label;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDatepickerAdvancedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfDatepickerAdvancedComponent, isStandalone: true, selector: "ef-datepicker-advanced", inputs: { triggerLabelKey: { classPropertyName: "triggerLabelKey", publicName: "triggerLabelKey", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, activePreset: { classPropertyName: "activePreset", publicName: "activePreset", isSignal: true, isRequired: false, transformFunction: null }, start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: false, transformFunction: null }, end: { classPropertyName: "end", publicName: "end", isSignal: true, isRequired: false, transformFunction: null }, allowCustomRange: { classPropertyName: "allowCustomRange", publicName: "allowCustomRange", isSignal: true, isRequired: false, transformFunction: null }, allowAllTime: { classPropertyName: "allowAllTime", publicName: "allowAllTime", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rangeChange: "rangeChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" }, properties: { "class.dp-host--field": "mode() === 'field'" } }, viewQueries: [{ propertyName: "anchorEl", first: true, predicate: ["anchorEl"], descendants: true, static: true }, { propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dp\" [class.dp--field]=\"mode() === 'field'\" #anchorEl>\n    @if (mode() === 'field' && variant() === 'field') {\n        <!-- Field mode \u2014 labelled field-box trigger (form control) -->\n        @if (labelKey() || label()) {\n            <ef-label\n                [labelKey]=\"labelKey()\"\n                [label]=\"label()\"\n                [for]=\"effectiveId\"\n                [required]=\"required()\"\n            />\n        }\n        <div class=\"ef-field-control\">\n            <button\n                type=\"button\"\n                class=\"dp__field-trigger\"\n                [id]=\"effectiveId\"\n                [class.open]=\"open()\"\n                [class.is-invalid]=\"isInvalid\"\n                [class.is-placeholder]=\"!hasFieldValue()\"\n                [disabled]=\"isDisabled()\"\n                [attr.aria-haspopup]=\"'dialog'\"\n                [attr.aria-expanded]=\"open()\"\n                [attr.aria-required]=\"required() ? 'true' : null\"\n                [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n                [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n                [attr.aria-label]=\"(labelKey() || label()) ? null : (ariaLabelKey() ? (ariaLabelKey() | translate) : (ariaLabel() || null))\"\n                (click)=\"toggle($event)\"\n            >\n                <i class=\"ico pi pi-calendar\" aria-hidden=\"true\"></i>\n                <span class=\"val\">\n                    @if (hasFieldValue()) {\n                        <bdi dir=\"ltr\">{{ fieldDisplay() }}</bdi>\n                    } @else {\n                        {{ placeholderKey() ? (placeholderKey() | translate) : placeholder() }}\n                    }\n                </span>\n                <svg class=\"caret ef-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\" /></svg>\n            </button>\n            @if (canClear) {\n                <!-- Overlaid sibling (not nested in the trigger <button>) so it\n                     clears instead of toggling the calendar. -->\n                <ef-clear-button\n                    class=\"dp__field-clear\"\n                    [ariaLabel]=\"'action.clear' | translate\"\n                    (clear)=\"clearValue()\"\n                />\n            }\n            @if (showRequired || serverErrors) {\n                <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n                    @if (showRequired) {\n                        <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n                    }\n                    @if (serverErrors; as errors) {\n                        @for (error of errors; track error) {\n                            <small class=\"text-danger block\">{{ error }}</small>\n                        }\n                    }\n                </div>\n            }\n        </div>\n    } @else {\n        <!-- Pill trigger \u2014 filter mode, or field mode with variant=\"pill\" -->\n        <button\n            type=\"button\"\n            class=\"dp__trigger\"\n            [class.open]=\"open()\"\n            [disabled]=\"isDisabled()\"\n            [attr.aria-haspopup]=\"'dialog'\"\n            [attr.aria-expanded]=\"open()\"\n            [attr.aria-label]=\"mode() === 'field' && !(labelKey() || label()) ? (ariaLabelKey() ? (ariaLabelKey() | translate) : (ariaLabel() || null)) : null\"\n            (click)=\"toggle($event)\"\n        >\n            <i class=\"ico pi pi-calendar\" aria-hidden=\"true\"></i>\n            @if (mode() === 'field') {\n                <span class=\"val\">\n                    @if (hasFieldValue()) {\n                        <bdi dir=\"ltr\">{{ fieldDisplay() }}</bdi>\n                    } @else {\n                        {{ placeholderKey() ? (placeholderKey() | translate) : placeholder() }}\n                    }\n                </span>\n            } @else {\n                <span class=\"lbl\">\n                    {{ triggerLabelKey() ? (triggerLabelKey() | translate) : triggerLabel() }}\n                </span>\n                <span class=\"val\">\n                    @if (resolvedRange().labelKey; as key) {\n                        {{ key | translate }}\n                    } @else {\n                        {{ resolvedRange().label }}\n                    }\n                </span>\n            }\n            <svg class=\"caret ef-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\" /></svg>\n        </button>\n    }\n</div>\n\n<!--\n    Popover panel \u2014 instantiated via ViewContainerRef + appended to\n    <body> when `open()` flips on. Anchored absolutely to the trigger\n    via positionPanel(); escapes ancestor overflow / stacking contexts.\n-->\n<ng-template #panelTpl>\n    <div\n        class=\"dp__panel open\"\n        [class.wide]=\"view() === 'custom'\"\n        role=\"dialog\"\n        [attr.aria-label]=\"triggerLabelKey() | translate\"\n    >\n        <!-- \u2500\u2500 View 1 \u2014 preset list \u2500\u2500 -->\n        <div class=\"dp__view\" [class.active]=\"view() === 'presets'\">\n            @for (preset of effectivePresets(); track trackByPreset($index, preset)) {\n                <button\n                    type=\"button\"\n                    class=\"dp__preset\"\n                    [class.active]=\"isActivePreset(preset.key)\"\n                    (click)=\"selectPreset(preset)\"\n                >\n                    {{ preset.labelKey ? (preset.labelKey | translate) : preset.label }}\n                    <span class=\"hint\">{{ presetHint(preset) }}</span>\n                </button>\n            }\n\n            @if (allowCustomRange()) {\n                <div class=\"dp__divider\" role=\"separator\"></div>\n                <button\n                    type=\"button\"\n                    class=\"dp__preset muted\"\n                    (click)=\"openCustomView()\"\n                >\n                    <span style=\"display:inline-flex;align-items:center;gap:8px\">\n                        <i class=\"ico-lead pi pi-calendar\" aria-hidden=\"true\"></i>\n                        {{ 'date_preset_custom' | translate }}\n                    </span>\n                    <span class=\"hint\">\u21E7</span>\n                </button>\n            }\n        </div>\n\n        <!-- \u2500\u2500 View 2 \u2014 custom range with calendar \u2500\u2500 -->\n        <div class=\"dp__view\" [class.active]=\"view() === 'custom'\">\n            <div class=\"dp__custom-head\">\n                @if (mode() !== 'field') {\n                    <button\n                        type=\"button\"\n                        class=\"dp__back\"\n                        [attr.aria-label]=\"'common_back' | translate\"\n                        (click)=\"backToPresets()\"\n                    >\n                        <i class=\"pi pi-chevron-left\" aria-hidden=\"true\"></i>\n                    </button>\n                } @else {\n                    <span></span>\n                }\n                <div class=\"dp__custom-title\">\n                    <span class=\"pulse-dot\"></span>\n                    {{ (mode() === 'field' && selectionMode() === 'single' ? 'date_select_date' : 'date_custom_range') | translate }}\n                </div>\n                <span></span>\n            </div>\n\n            <div class=\"dp__cal\">\n                <div class=\"dp__cal-head\">\n                    <button\n                        type=\"button\"\n                        class=\"dp__cal-nav\"\n                        [attr.aria-label]=\"'date_prev_month' | translate\"\n                        (click)=\"headerPrev()\"\n                    >\n                        <i class=\"pi pi-chevron-left\" aria-hidden=\"true\"></i>\n                    </button>\n                    <div class=\"dp__cal-title\">\n                        @switch (calMode()) {\n                            @case ('years') {\n                                <span class=\"dp__cal-pick is-static\">{{ yearWindowLabel() }}</span>\n                            }\n                            @case ('months') {\n                                <button type=\"button\" class=\"dp__cal-pick\" (click)=\"openYearPicker()\">\n                                    {{ yearLabel() }}\n                                </button>\n                            }\n                            @default {\n                                <button type=\"button\" class=\"dp__cal-pick\" (click)=\"openMonthPicker()\">\n                                    {{ monthLabel() }}\n                                </button>\n                                <button type=\"button\" class=\"dp__cal-pick\" (click)=\"openYearPicker()\">\n                                    {{ yearLabel() }}\n                                </button>\n                            }\n                        }\n                    </div>\n                    <button\n                        type=\"button\"\n                        class=\"dp__cal-nav\"\n                        [attr.aria-label]=\"'date_next_month' | translate\"\n                        (click)=\"headerNext()\"\n                    >\n                        <i class=\"pi pi-chevron-right\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                @switch (calMode()) {\n                    @case ('months') {\n                        <div class=\"dp__cal-cells\">\n                            @for (cell of monthCells(); track cell.month) {\n                                <button\n                                    type=\"button\"\n                                    class=\"dp__cal-cell\"\n                                    [class.active]=\"cell.active\"\n                                    [class.today]=\"cell.today\"\n                                    (click)=\"selectMonth(cell.month)\"\n                                >\n                                    {{ cell.label }}\n                                </button>\n                            }\n                        </div>\n                    }\n                    @case ('years') {\n                        <div class=\"dp__cal-cells\">\n                            @for (cell of yearCells(); track cell.year) {\n                                <button\n                                    type=\"button\"\n                                    class=\"dp__cal-cell\"\n                                    [class.active]=\"cell.active\"\n                                    [class.today]=\"cell.today\"\n                                    (click)=\"selectYear(cell.year)\"\n                                >\n                                    {{ cell.year }}\n                                </button>\n                            }\n                        </div>\n                    }\n                    @default {\n                        <div class=\"dp__cal-dow-row\">\n                            @for (label of dowLabels(); track trackByDow($index, label)) {\n                                <div class=\"dp__cal-dow\">{{ label }}</div>\n                            }\n                        </div>\n\n                        <div class=\"dp__cal-grid\">\n                            @for (day of calendarGrid(); track trackByDay($index, day)) {\n                                <button\n                                    type=\"button\"\n                                    class=\"dp__cal-day\"\n                                    [class.out]=\"day.out\"\n                                    [class.today]=\"day.today\"\n                                    [class.in-range]=\"day.inRange\"\n                                    [class.range-start]=\"day.rangeStart\"\n                                    [class.range-end]=\"day.rangeEnd\"\n                                    [attr.aria-label]=\"day.date | date:'fullDate'\"\n                                    (click)=\"selectDay(day.date)\"\n                                >\n                                    <span class=\"day-num\">{{ day.day }}</span>\n                                </button>\n                            }\n                        </div>\n                    }\n                }\n            </div>\n\n            @if (mode() === 'field' && selectionMode() === 'single') {\n                <!-- Single-date field: date (+ time when enabled). Without time,\n                     picking a day commits & closes; with time, Apply commits. -->\n                <div class=\"dp__inputs\" [class.dp__inputs--single]=\"!showTime()\">\n                    <div class=\"dp__field\">\n                        <label [attr.for]=\"effectiveId + '-single'\">{{ 'date_select_date' | translate }}</label>\n                        <input\n                            #singleInput\n                            [id]=\"effectiveId + '-single'\"\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            maxlength=\"10\"\n                            [value]=\"fromText()\"\n                            placeholder=\"JJ/MM/AAAA\"\n                            (keydown)=\"onDateKeydown($event, singleInput)\"\n                            (change)=\"commitSingleInput(singleInput)\"\n                        />\n                    </div>\n                    @if (showTime()) {\n                        <div class=\"dp__field\">\n                            <label [attr.for]=\"effectiveId + '-single-time'\">{{ 'date_time' | translate }}</label>\n                            <input\n                                #singleTime\n                                [id]=\"effectiveId + '-single-time'\"\n                                type=\"text\"\n                                inputmode=\"numeric\"\n                                maxlength=\"5\"\n                                [value]=\"fromTimeText()\"\n                                placeholder=\"HH:mm\"\n                                (keydown)=\"onTimeKeydown($event, singleTime)\"\n                                (change)=\"commitTimeInput('start', singleTime)\"\n                            />\n                        </div>\n                    }\n                </div>\n            } @else {\n                <div class=\"dp__inputs\">\n                    <div class=\"dp__field\">\n                        <label [attr.for]=\"effectiveId + '-from'\">{{ 'date_from' | translate }}</label>\n                        <input\n                            #fromInput\n                            [id]=\"effectiveId + '-from'\"\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            maxlength=\"10\"\n                            [value]=\"fromText()\"\n                            placeholder=\"JJ/MM/AAAA\"\n                            (keydown)=\"onDateKeydown($event, fromInput)\"\n                            (change)=\"commitDateInput('start', fromInput)\"\n                        />\n                        @if (mode() === 'field' && showTime()) {\n                            <input\n                                #fromTime\n                                [attr.aria-label]=\"'date_time' | translate\"\n                                type=\"text\"\n                                inputmode=\"numeric\"\n                                maxlength=\"5\"\n                                [value]=\"fromTimeText()\"\n                                placeholder=\"HH:mm\"\n                                (keydown)=\"onTimeKeydown($event, fromTime)\"\n                                (change)=\"commitTimeInput('start', fromTime)\"\n                            />\n                        }\n                    </div>\n                    <div class=\"dp__field\">\n                        <label [attr.for]=\"effectiveId + '-to'\">{{ 'date_to' | translate }}</label>\n                        <input\n                            #toInput\n                            [id]=\"effectiveId + '-to'\"\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            maxlength=\"10\"\n                            [value]=\"toText()\"\n                            placeholder=\"JJ/MM/AAAA\"\n                            (keydown)=\"onDateKeydown($event, toInput)\"\n                            (change)=\"commitDateInput('end', toInput)\"\n                        />\n                        @if (mode() === 'field' && showTime()) {\n                            <input\n                                #toTime\n                                [attr.aria-label]=\"'date_time' | translate\"\n                                type=\"text\"\n                                inputmode=\"numeric\"\n                                maxlength=\"5\"\n                                [value]=\"toTimeText()\"\n                                placeholder=\"HH:mm\"\n                                (keydown)=\"onTimeKeydown($event, toTime)\"\n                                (change)=\"commitTimeInput('end', toTime)\"\n                            />\n                        }\n                    </div>\n                </div>\n            }\n\n            <!-- Footer: hidden only for single field WITHOUT time (commit on pick). -->\n            @if (!(mode() === 'field' && selectionMode() === 'single' && !showTime())) {\n                <div class=\"dp__actions\">\n                    @if (mode() === 'field' && selectionMode() === 'single') {\n                        <span></span>\n                    } @else {\n                        <span class=\"duration\">\n                            <span class=\"num\">{{ draftDurationDays() }}</span>\n                            {{ 'date_days' | translate }}\n                        </span>\n                    }\n                    <div class=\"right\">\n                        @if (mode() !== 'field') {\n                            <button\n                                type=\"button\"\n                                class=\"btn btn-ghost btn-sm\"\n                                (click)=\"backToPresets()\"\n                            >\n                                {{ 'common_back' | translate }}\n                            </button>\n                        }\n                        <button\n                            type=\"button\"\n                            class=\"btn btn-primary btn-sm\"\n                            [disabled]=\"!draftStart()\"\n                            (click)=\"applyCustomRange()\"\n                        >\n                            {{ 'common_apply' | translate }}\n                        </button>\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n</ng-template>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:inline-block}:host(.dp-host--field){display:block}.hint{unicode-bidi:plaintext}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "component", type: EfClearButtonComponent, selector: "ef-clear-button", inputs: ["ariaLabel", "disabled"], outputs: ["clear"] }, { 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: EfDatepickerAdvancedComponent, isStandalone: true, selector: "ef-datepicker-advanced", inputs: { triggerLabelKey: { classPropertyName: "triggerLabelKey", publicName: "triggerLabelKey", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, activePreset: { classPropertyName: "activePreset", publicName: "activePreset", isSignal: true, isRequired: false, transformFunction: null }, start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: false, transformFunction: null }, end: { classPropertyName: "end", publicName: "end", isSignal: true, isRequired: false, transformFunction: null }, allowCustomRange: { classPropertyName: "allowCustomRange", publicName: "allowCustomRange", isSignal: true, isRequired: false, transformFunction: null }, allowAllTime: { classPropertyName: "allowAllTime", publicName: "allowAllTime", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rangeChange: "rangeChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown": "onTab($event)", "document:keydown.escape": "onEscape()" }, properties: { "class.dp-host--field": "mode() === 'field'" } }, viewQueries: [{ propertyName: "anchorEl", first: true, predicate: ["anchorEl"], descendants: true, static: true }, { propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dp\" [class.dp--field]=\"mode() === 'field'\" #anchorEl>\n    @if (mode() === 'field' && variant() === 'field') {\n        <!-- Field mode \u2014 labelled field-box trigger (form control) -->\n        @if (labelKey() || label()) {\n            <ef-label\n                [labelKey]=\"labelKey()\"\n                [label]=\"label()\"\n                [for]=\"effectiveId\"\n                [required]=\"required()\"\n            />\n        }\n        <div class=\"ef-field-control\">\n            <button\n                type=\"button\"\n                class=\"dp__field-trigger\"\n                [id]=\"effectiveId\"\n                [class.open]=\"open()\"\n                [class.is-invalid]=\"isInvalid\"\n                [class.is-placeholder]=\"!hasFieldValue()\"\n                [disabled]=\"isDisabled()\"\n                [attr.aria-haspopup]=\"'dialog'\"\n                [attr.aria-expanded]=\"open()\"\n                [attr.aria-required]=\"required() ? 'true' : null\"\n                [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n                [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n                [attr.aria-label]=\"(labelKey() || label()) ? null : (ariaLabelKey() ? (ariaLabelKey() | translate) : (ariaLabel() || null))\"\n                (click)=\"toggle($event)\"\n            >\n                <i class=\"ico pi pi-calendar\" aria-hidden=\"true\"></i>\n                <span class=\"val\">\n                    @if (hasFieldValue()) {\n                        <bdi dir=\"ltr\">{{ fieldDisplay() }}</bdi>\n                    } @else {\n                        {{ placeholderKey() ? (placeholderKey() | translate) : placeholder() }}\n                    }\n                </span>\n                <svg class=\"caret ef-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\" /></svg>\n            </button>\n            @if (canClear) {\n                <!-- Overlaid sibling (not nested in the trigger <button>) so it\n                     clears instead of toggling the calendar. -->\n                <ef-clear-button\n                    class=\"dp__field-clear\"\n                    [ariaLabel]=\"'action.clear' | translate\"\n                    (clear)=\"clearValue()\"\n                />\n            }\n            @if (showRequired || serverErrors) {\n                <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n                    @if (showRequired) {\n                        <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n                    }\n                    @if (serverErrors; as errors) {\n                        @for (error of errors; track error) {\n                            <small class=\"text-danger block\">{{ error }}</small>\n                        }\n                    }\n                </div>\n            }\n        </div>\n    } @else {\n        <!-- Pill trigger \u2014 filter mode, or field mode with variant=\"pill\" -->\n        <button\n            type=\"button\"\n            class=\"dp__trigger\"\n            [class.open]=\"open()\"\n            [disabled]=\"isDisabled()\"\n            [attr.aria-haspopup]=\"'dialog'\"\n            [attr.aria-expanded]=\"open()\"\n            [attr.aria-label]=\"mode() === 'field' && !(labelKey() || label()) ? (ariaLabelKey() ? (ariaLabelKey() | translate) : (ariaLabel() || null)) : null\"\n            (click)=\"toggle($event)\"\n        >\n            <i class=\"ico pi pi-calendar\" aria-hidden=\"true\"></i>\n            @if (mode() === 'field') {\n                <span class=\"val\">\n                    @if (hasFieldValue()) {\n                        <bdi dir=\"ltr\">{{ fieldDisplay() }}</bdi>\n                    } @else {\n                        {{ placeholderKey() ? (placeholderKey() | translate) : placeholder() }}\n                    }\n                </span>\n            } @else {\n                <span class=\"lbl\">\n                    {{ triggerLabelKey() ? (triggerLabelKey() | translate) : triggerLabel() }}\n                </span>\n                <span class=\"val\">\n                    @if (resolvedRange().labelKey; as key) {\n                        {{ key | translate }}\n                    } @else {\n                        {{ resolvedRange().label }}\n                    }\n                </span>\n            }\n            <svg class=\"caret ef-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\" /></svg>\n        </button>\n    }\n</div>\n\n<!--\n    Popover panel \u2014 instantiated via ViewContainerRef + appended to\n    <body> when `open()` flips on. Fixed to the viewport and placed\n    against the trigger by positionPanel() (flips above, keeps inside the\n    viewport); on a phone it is a bottom sheet over a backdrop instead.\n-->\n<ng-template #panelTpl>\n    @if (sheet()) {\n        <div class=\"dp__backdrop\" aria-hidden=\"true\" (click)=\"close(true)\"></div>\n    }\n    <div\n        class=\"dp__panel open\"\n        [class.wide]=\"view() === 'custom'\"\n        [class.dp__panel--sheet]=\"sheet()\"\n        role=\"dialog\"\n        [attr.aria-modal]=\"sheet() ? 'true' : null\"\n        [attr.aria-label]=\"panelLabelKey() ? (panelLabelKey() | translate) : panelLabel()\"\n    >\n        <!-- \u2500\u2500 View 1 \u2014 preset list \u2500\u2500 -->\n        <div class=\"dp__view\" [class.active]=\"view() === 'presets'\">\n            @for (preset of effectivePresets(); track trackByPreset($index, preset)) {\n                <button\n                    type=\"button\"\n                    class=\"dp__preset\"\n                    [class.active]=\"isActivePreset(preset.key)\"\n                    (click)=\"selectPreset(preset)\"\n                >\n                    {{ preset.labelKey ? (preset.labelKey | translate) : preset.label }}\n                    <span class=\"hint\">{{ presetHint(preset) }}</span>\n                </button>\n            }\n\n            @if (allowCustomRange()) {\n                <div class=\"dp__divider\" role=\"separator\"></div>\n                <button\n                    type=\"button\"\n                    class=\"dp__preset muted\"\n                    (click)=\"openCustomView()\"\n                >\n                    <span style=\"display:inline-flex;align-items:center;gap:8px\">\n                        <i class=\"ico-lead pi pi-calendar\" aria-hidden=\"true\"></i>\n                        {{ 'date_preset_custom' | translate }}\n                    </span>\n                    <span class=\"hint\">\u21E7</span>\n                </button>\n            }\n        </div>\n\n        <!-- \u2500\u2500 View 2 \u2014 custom range with calendar \u2500\u2500 -->\n        <div class=\"dp__view\" [class.active]=\"view() === 'custom'\">\n            <!-- A single-date field drops this title: the field's own label\n                 names the dialog (aria-label above), and the date input below\n                 carries the same words, so \"S\u00E9lectionner une date\" read twice. -->\n            @if (!(mode() === 'field' && selectionMode() === 'single')) {\n            <div class=\"dp__custom-head\">\n                @if (mode() !== 'field') {\n                    <button\n                        type=\"button\"\n                        class=\"dp__back\"\n                        [attr.aria-label]=\"'common_back' | translate\"\n                        (click)=\"backToPresets()\"\n                    >\n                        <i class=\"pi pi-chevron-left\" aria-hidden=\"true\"></i>\n                    </button>\n                } @else {\n                    <span></span>\n                }\n                <div class=\"dp__custom-title\">\n                    <span class=\"pulse-dot\"></span>\n                    {{ 'date_custom_range' | translate }}\n                </div>\n                <span></span>\n            </div>\n            }\n\n            <div class=\"dp__cal\">\n                <div class=\"dp__cal-head\">\n                    <button\n                        type=\"button\"\n                        class=\"dp__cal-nav\"\n                        [attr.aria-label]=\"'date_prev_month' | translate\"\n                        (click)=\"headerPrev()\"\n                    >\n                        <i class=\"pi pi-chevron-left\" aria-hidden=\"true\"></i>\n                    </button>\n                    <div class=\"dp__cal-title\">\n                        @switch (calMode()) {\n                            @case ('years') {\n                                <span class=\"dp__cal-pick is-static\">{{ yearWindowLabel() }}</span>\n                            }\n                            @case ('months') {\n                                <button type=\"button\" class=\"dp__cal-pick\" (click)=\"openYearPicker()\">\n                                    {{ yearLabel() }}\n                                </button>\n                            }\n                            @default {\n                                <button type=\"button\" class=\"dp__cal-pick\" (click)=\"openMonthPicker()\">\n                                    {{ monthLabel() }}\n                                </button>\n                                <button type=\"button\" class=\"dp__cal-pick\" (click)=\"openYearPicker()\">\n                                    {{ yearLabel() }}\n                                </button>\n                            }\n                        }\n                    </div>\n                    <button\n                        type=\"button\"\n                        class=\"dp__cal-nav\"\n                        [attr.aria-label]=\"'date_next_month' | translate\"\n                        (click)=\"headerNext()\"\n                    >\n                        <i class=\"pi pi-chevron-right\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                @switch (calMode()) {\n                    @case ('months') {\n                        <div class=\"dp__cal-cells\">\n                            @for (cell of monthCells(); track cell.month) {\n                                <button\n                                    type=\"button\"\n                                    class=\"dp__cal-cell\"\n                                    [class.active]=\"cell.active\"\n                                    [class.today]=\"cell.today\"\n                                    (click)=\"selectMonth(cell.month)\"\n                                >\n                                    {{ cell.label }}\n                                </button>\n                            }\n                        </div>\n                    }\n                    @case ('years') {\n                        <div class=\"dp__cal-cells\">\n                            @for (cell of yearCells(); track cell.year) {\n                                <button\n                                    type=\"button\"\n                                    class=\"dp__cal-cell\"\n                                    [class.active]=\"cell.active\"\n                                    [class.today]=\"cell.today\"\n                                    (click)=\"selectYear(cell.year)\"\n                                >\n                                    {{ cell.year }}\n                                </button>\n                            }\n                        </div>\n                    }\n                    @default {\n                        <div class=\"dp__cal-dow-row\">\n                            @for (label of dowLabels(); track trackByDow($index, label)) {\n                                <div class=\"dp__cal-dow\">{{ label }}</div>\n                            }\n                        </div>\n\n                        <div class=\"dp__cal-grid\">\n                            @for (day of calendarGrid(); track trackByDay($index, day)) {\n                                <button\n                                    type=\"button\"\n                                    class=\"dp__cal-day\"\n                                    [class.out]=\"day.out\"\n                                    [class.today]=\"day.today\"\n                                    [class.in-range]=\"day.inRange\"\n                                    [class.range-start]=\"day.rangeStart\"\n                                    [class.range-end]=\"day.rangeEnd\"\n                                    [attr.aria-label]=\"day.date | date:'fullDate'\"\n                                    (click)=\"selectDay(day.date)\"\n                                >\n                                    <span class=\"day-num\">{{ day.day }}</span>\n                                </button>\n                            }\n                        </div>\n                    }\n                }\n            </div>\n\n            @if (mode() === 'field' && selectionMode() === 'single') {\n                <!-- Single-date field: date (+ time when enabled). Without time,\n                     picking a day commits & closes; with time, Apply commits. -->\n                <div class=\"dp__inputs\" [class.dp__inputs--single]=\"!showTime()\">\n                    <div class=\"dp__field\">\n                        <label [attr.for]=\"effectiveId + '-single'\">{{ 'date_select_date' | translate }}</label>\n                        <input\n                            #singleInput\n                            [id]=\"effectiveId + '-single'\"\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            maxlength=\"10\"\n                            [value]=\"fromText()\"\n                            [placeholder]=\"datePlaceholder()\"\n                            (keydown)=\"onDateKeydown($event, singleInput)\"\n                            (change)=\"commitSingleInput(singleInput)\"\n                        />\n                    </div>\n                    @if (showTime()) {\n                        <div class=\"dp__field\">\n                            <label [attr.for]=\"effectiveId + '-single-time'\">{{ 'date_time' | translate }}</label>\n                            <input\n                                #singleTime\n                                [id]=\"effectiveId + '-single-time'\"\n                                type=\"text\"\n                                inputmode=\"numeric\"\n                                maxlength=\"5\"\n                                [value]=\"fromTimeText()\"\n                                placeholder=\"HH:mm\"\n                                (keydown)=\"onTimeKeydown($event, singleTime)\"\n                                (change)=\"commitTimeInput('start', singleTime)\"\n                            />\n                        </div>\n                    }\n                </div>\n            } @else {\n                <div class=\"dp__inputs\">\n                    <div class=\"dp__field\">\n                        <label [attr.for]=\"effectiveId + '-from'\">{{ 'date_from' | translate }}</label>\n                        <input\n                            #fromInput\n                            [id]=\"effectiveId + '-from'\"\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            maxlength=\"10\"\n                            [value]=\"fromText()\"\n                            [placeholder]=\"datePlaceholder()\"\n                            (keydown)=\"onDateKeydown($event, fromInput)\"\n                            (change)=\"commitDateInput('start', fromInput)\"\n                        />\n                        @if (mode() === 'field' && showTime()) {\n                            <input\n                                #fromTime\n                                [attr.aria-label]=\"'date_time' | translate\"\n                                type=\"text\"\n                                inputmode=\"numeric\"\n                                maxlength=\"5\"\n                                [value]=\"fromTimeText()\"\n                                placeholder=\"HH:mm\"\n                                (keydown)=\"onTimeKeydown($event, fromTime)\"\n                                (change)=\"commitTimeInput('start', fromTime)\"\n                            />\n                        }\n                    </div>\n                    <div class=\"dp__field\">\n                        <label [attr.for]=\"effectiveId + '-to'\">{{ 'date_to' | translate }}</label>\n                        <input\n                            #toInput\n                            [id]=\"effectiveId + '-to'\"\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            maxlength=\"10\"\n                            [value]=\"toText()\"\n                            [placeholder]=\"datePlaceholder()\"\n                            (keydown)=\"onDateKeydown($event, toInput)\"\n                            (change)=\"commitDateInput('end', toInput)\"\n                        />\n                        @if (mode() === 'field' && showTime()) {\n                            <input\n                                #toTime\n                                [attr.aria-label]=\"'date_time' | translate\"\n                                type=\"text\"\n                                inputmode=\"numeric\"\n                                maxlength=\"5\"\n                                [value]=\"toTimeText()\"\n                                placeholder=\"HH:mm\"\n                                (keydown)=\"onTimeKeydown($event, toTime)\"\n                                (change)=\"commitTimeInput('end', toTime)\"\n                            />\n                        }\n                    </div>\n                </div>\n            }\n\n            <!-- Footer: hidden only for single field WITHOUT time (commit on pick). -->\n            @if (!(mode() === 'field' && selectionMode() === 'single' && !showTime())) {\n                <div class=\"dp__actions\">\n                    @if (mode() === 'field' && selectionMode() === 'single') {\n                        <span></span>\n                    } @else {\n                        <span class=\"duration\">\n                            <span class=\"num\">{{ draftDurationDays() }}</span>\n                            {{ 'date_days' | translate }}\n                        </span>\n                    }\n                    <div class=\"right\">\n                        @if (mode() !== 'field') {\n                            <button\n                                type=\"button\"\n                                class=\"btn btn-ghost btn-sm\"\n                                (click)=\"backToPresets()\"\n                            >\n                                {{ 'common_back' | translate }}\n                            </button>\n                        }\n                        <button\n                            type=\"button\"\n                            class=\"btn btn-primary btn-sm\"\n                            [disabled]=\"!draftStart()\"\n                            (click)=\"applyCustomRange()\"\n                        >\n                            {{ 'common_apply' | translate }}\n                        </button>\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n</ng-template>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:inline-block}:host(.dp-host--field){display:block}.hint{unicode-bidi:plaintext}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "labelParams", "for", "styleClass", "required"] }, { kind: "component", type: EfClearButtonComponent, selector: "ef-clear-button", inputs: ["ariaLabel", "disabled"], outputs: ["clear"] }, { 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: EfDatepickerAdvancedComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-datepicker-advanced', standalone: true, imports: [CommonModule, TranslateModule, EfLabelComponent, EfClearButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.dp-host--field]': "mode() === 'field'" }, template: "<div class=\"dp\" [class.dp--field]=\"mode() === 'field'\" #anchorEl>\n    @if (mode() === 'field' && variant() === 'field') {\n        <!-- Field mode \u2014 labelled field-box trigger (form control) -->\n        @if (labelKey() || label()) {\n            <ef-label\n                [labelKey]=\"labelKey()\"\n                [label]=\"label()\"\n                [for]=\"effectiveId\"\n                [required]=\"required()\"\n            />\n        }\n        <div class=\"ef-field-control\">\n            <button\n                type=\"button\"\n                class=\"dp__field-trigger\"\n                [id]=\"effectiveId\"\n                [class.open]=\"open()\"\n                [class.is-invalid]=\"isInvalid\"\n                [class.is-placeholder]=\"!hasFieldValue()\"\n                [disabled]=\"isDisabled()\"\n                [attr.aria-haspopup]=\"'dialog'\"\n                [attr.aria-expanded]=\"open()\"\n                [attr.aria-required]=\"required() ? 'true' : null\"\n                [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n                [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n                [attr.aria-label]=\"(labelKey() || label()) ? null : (ariaLabelKey() ? (ariaLabelKey() | translate) : (ariaLabel() || null))\"\n                (click)=\"toggle($event)\"\n            >\n                <i class=\"ico pi pi-calendar\" aria-hidden=\"true\"></i>\n                <span class=\"val\">\n                    @if (hasFieldValue()) {\n                        <bdi dir=\"ltr\">{{ fieldDisplay() }}</bdi>\n                    } @else {\n                        {{ placeholderKey() ? (placeholderKey() | translate) : placeholder() }}\n                    }\n                </span>\n                <svg class=\"caret ef-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\" /></svg>\n            </button>\n            @if (canClear) {\n                <!-- Overlaid sibling (not nested in the trigger <button>) so it\n                     clears instead of toggling the calendar. -->\n                <ef-clear-button\n                    class=\"dp__field-clear\"\n                    [ariaLabel]=\"'action.clear' | translate\"\n                    (clear)=\"clearValue()\"\n                />\n            }\n            @if (showRequired || serverErrors) {\n                <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n                    @if (showRequired) {\n                        <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n                    }\n                    @if (serverErrors; as errors) {\n                        @for (error of errors; track error) {\n                            <small class=\"text-danger block\">{{ error }}</small>\n                        }\n                    }\n                </div>\n            }\n        </div>\n    } @else {\n        <!-- Pill trigger \u2014 filter mode, or field mode with variant=\"pill\" -->\n        <button\n            type=\"button\"\n            class=\"dp__trigger\"\n            [class.open]=\"open()\"\n            [disabled]=\"isDisabled()\"\n            [attr.aria-haspopup]=\"'dialog'\"\n            [attr.aria-expanded]=\"open()\"\n            [attr.aria-label]=\"mode() === 'field' && !(labelKey() || label()) ? (ariaLabelKey() ? (ariaLabelKey() | translate) : (ariaLabel() || null)) : null\"\n            (click)=\"toggle($event)\"\n        >\n            <i class=\"ico pi pi-calendar\" aria-hidden=\"true\"></i>\n            @if (mode() === 'field') {\n                <span class=\"val\">\n                    @if (hasFieldValue()) {\n                        <bdi dir=\"ltr\">{{ fieldDisplay() }}</bdi>\n                    } @else {\n                        {{ placeholderKey() ? (placeholderKey() | translate) : placeholder() }}\n                    }\n                </span>\n            } @else {\n                <span class=\"lbl\">\n                    {{ triggerLabelKey() ? (triggerLabelKey() | translate) : triggerLabel() }}\n                </span>\n                <span class=\"val\">\n                    @if (resolvedRange().labelKey; as key) {\n                        {{ key | translate }}\n                    } @else {\n                        {{ resolvedRange().label }}\n                    }\n                </span>\n            }\n            <svg class=\"caret ef-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\" /></svg>\n        </button>\n    }\n</div>\n\n<!--\n    Popover panel \u2014 instantiated via ViewContainerRef + appended to\n    <body> when `open()` flips on. Anchored absolutely to the trigger\n    via positionPanel(); escapes ancestor overflow / stacking contexts.\n-->\n<ng-template #panelTpl>\n    <div\n        class=\"dp__panel open\"\n        [class.wide]=\"view() === 'custom'\"\n        role=\"dialog\"\n        [attr.aria-label]=\"triggerLabelKey() | translate\"\n    >\n        <!-- \u2500\u2500 View 1 \u2014 preset list \u2500\u2500 -->\n        <div class=\"dp__view\" [class.active]=\"view() === 'presets'\">\n            @for (preset of effectivePresets(); track trackByPreset($index, preset)) {\n                <button\n                    type=\"button\"\n                    class=\"dp__preset\"\n                    [class.active]=\"isActivePreset(preset.key)\"\n                    (click)=\"selectPreset(preset)\"\n                >\n                    {{ preset.labelKey ? (preset.labelKey | translate) : preset.label }}\n                    <span class=\"hint\">{{ presetHint(preset) }}</span>\n                </button>\n            }\n\n            @if (allowCustomRange()) {\n                <div class=\"dp__divider\" role=\"separator\"></div>\n                <button\n                    type=\"button\"\n                    class=\"dp__preset muted\"\n                    (click)=\"openCustomView()\"\n                >\n                    <span style=\"display:inline-flex;align-items:center;gap:8px\">\n                        <i class=\"ico-lead pi pi-calendar\" aria-hidden=\"true\"></i>\n                        {{ 'date_preset_custom' | translate }}\n                    </span>\n                    <span class=\"hint\">\u21E7</span>\n                </button>\n            }\n        </div>\n\n        <!-- \u2500\u2500 View 2 \u2014 custom range with calendar \u2500\u2500 -->\n        <div class=\"dp__view\" [class.active]=\"view() === 'custom'\">\n            <div class=\"dp__custom-head\">\n                @if (mode() !== 'field') {\n                    <button\n                        type=\"button\"\n                        class=\"dp__back\"\n                        [attr.aria-label]=\"'common_back' | translate\"\n                        (click)=\"backToPresets()\"\n                    >\n                        <i class=\"pi pi-chevron-left\" aria-hidden=\"true\"></i>\n                    </button>\n                } @else {\n                    <span></span>\n                }\n                <div class=\"dp__custom-title\">\n                    <span class=\"pulse-dot\"></span>\n                    {{ (mode() === 'field' && selectionMode() === 'single' ? 'date_select_date' : 'date_custom_range') | translate }}\n                </div>\n                <span></span>\n            </div>\n\n            <div class=\"dp__cal\">\n                <div class=\"dp__cal-head\">\n                    <button\n                        type=\"button\"\n                        class=\"dp__cal-nav\"\n                        [attr.aria-label]=\"'date_prev_month' | translate\"\n                        (click)=\"headerPrev()\"\n                    >\n                        <i class=\"pi pi-chevron-left\" aria-hidden=\"true\"></i>\n                    </button>\n                    <div class=\"dp__cal-title\">\n                        @switch (calMode()) {\n                            @case ('years') {\n                                <span class=\"dp__cal-pick is-static\">{{ yearWindowLabel() }}</span>\n                            }\n                            @case ('months') {\n                                <button type=\"button\" class=\"dp__cal-pick\" (click)=\"openYearPicker()\">\n                                    {{ yearLabel() }}\n                                </button>\n                            }\n                            @default {\n                                <button type=\"button\" class=\"dp__cal-pick\" (click)=\"openMonthPicker()\">\n                                    {{ monthLabel() }}\n                                </button>\n                                <button type=\"button\" class=\"dp__cal-pick\" (click)=\"openYearPicker()\">\n                                    {{ yearLabel() }}\n                                </button>\n                            }\n                        }\n                    </div>\n                    <button\n                        type=\"button\"\n                        class=\"dp__cal-nav\"\n                        [attr.aria-label]=\"'date_next_month' | translate\"\n                        (click)=\"headerNext()\"\n                    >\n                        <i class=\"pi pi-chevron-right\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                @switch (calMode()) {\n                    @case ('months') {\n                        <div class=\"dp__cal-cells\">\n                            @for (cell of monthCells(); track cell.month) {\n                                <button\n                                    type=\"button\"\n                                    class=\"dp__cal-cell\"\n                                    [class.active]=\"cell.active\"\n                                    [class.today]=\"cell.today\"\n                                    (click)=\"selectMonth(cell.month)\"\n                                >\n                                    {{ cell.label }}\n                                </button>\n                            }\n                        </div>\n                    }\n                    @case ('years') {\n                        <div class=\"dp__cal-cells\">\n                            @for (cell of yearCells(); track cell.year) {\n                                <button\n                                    type=\"button\"\n                                    class=\"dp__cal-cell\"\n                                    [class.active]=\"cell.active\"\n                                    [class.today]=\"cell.today\"\n                                    (click)=\"selectYear(cell.year)\"\n                                >\n                                    {{ cell.year }}\n                                </button>\n                            }\n                        </div>\n                    }\n                    @default {\n                        <div class=\"dp__cal-dow-row\">\n                            @for (label of dowLabels(); track trackByDow($index, label)) {\n                                <div class=\"dp__cal-dow\">{{ label }}</div>\n                            }\n                        </div>\n\n                        <div class=\"dp__cal-grid\">\n                            @for (day of calendarGrid(); track trackByDay($index, day)) {\n                                <button\n                                    type=\"button\"\n                                    class=\"dp__cal-day\"\n                                    [class.out]=\"day.out\"\n                                    [class.today]=\"day.today\"\n                                    [class.in-range]=\"day.inRange\"\n                                    [class.range-start]=\"day.rangeStart\"\n                                    [class.range-end]=\"day.rangeEnd\"\n                                    [attr.aria-label]=\"day.date | date:'fullDate'\"\n                                    (click)=\"selectDay(day.date)\"\n                                >\n                                    <span class=\"day-num\">{{ day.day }}</span>\n                                </button>\n                            }\n                        </div>\n                    }\n                }\n            </div>\n\n            @if (mode() === 'field' && selectionMode() === 'single') {\n                <!-- Single-date field: date (+ time when enabled). Without time,\n                     picking a day commits & closes; with time, Apply commits. -->\n                <div class=\"dp__inputs\" [class.dp__inputs--single]=\"!showTime()\">\n                    <div class=\"dp__field\">\n                        <label [attr.for]=\"effectiveId + '-single'\">{{ 'date_select_date' | translate }}</label>\n                        <input\n                            #singleInput\n                            [id]=\"effectiveId + '-single'\"\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            maxlength=\"10\"\n                            [value]=\"fromText()\"\n                            placeholder=\"JJ/MM/AAAA\"\n                            (keydown)=\"onDateKeydown($event, singleInput)\"\n                            (change)=\"commitSingleInput(singleInput)\"\n                        />\n                    </div>\n                    @if (showTime()) {\n                        <div class=\"dp__field\">\n                            <label [attr.for]=\"effectiveId + '-single-time'\">{{ 'date_time' | translate }}</label>\n                            <input\n                                #singleTime\n                                [id]=\"effectiveId + '-single-time'\"\n                                type=\"text\"\n                                inputmode=\"numeric\"\n                                maxlength=\"5\"\n                                [value]=\"fromTimeText()\"\n                                placeholder=\"HH:mm\"\n                                (keydown)=\"onTimeKeydown($event, singleTime)\"\n                                (change)=\"commitTimeInput('start', singleTime)\"\n                            />\n                        </div>\n                    }\n                </div>\n            } @else {\n                <div class=\"dp__inputs\">\n                    <div class=\"dp__field\">\n                        <label [attr.for]=\"effectiveId + '-from'\">{{ 'date_from' | translate }}</label>\n                        <input\n                            #fromInput\n                            [id]=\"effectiveId + '-from'\"\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            maxlength=\"10\"\n                            [value]=\"fromText()\"\n                            placeholder=\"JJ/MM/AAAA\"\n                            (keydown)=\"onDateKeydown($event, fromInput)\"\n                            (change)=\"commitDateInput('start', fromInput)\"\n                        />\n                        @if (mode() === 'field' && showTime()) {\n                            <input\n                                #fromTime\n                                [attr.aria-label]=\"'date_time' | translate\"\n                                type=\"text\"\n                                inputmode=\"numeric\"\n                                maxlength=\"5\"\n                                [value]=\"fromTimeText()\"\n                                placeholder=\"HH:mm\"\n                                (keydown)=\"onTimeKeydown($event, fromTime)\"\n                                (change)=\"commitTimeInput('start', fromTime)\"\n                            />\n                        }\n                    </div>\n                    <div class=\"dp__field\">\n                        <label [attr.for]=\"effectiveId + '-to'\">{{ 'date_to' | translate }}</label>\n                        <input\n                            #toInput\n                            [id]=\"effectiveId + '-to'\"\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            maxlength=\"10\"\n                            [value]=\"toText()\"\n                            placeholder=\"JJ/MM/AAAA\"\n                            (keydown)=\"onDateKeydown($event, toInput)\"\n                            (change)=\"commitDateInput('end', toInput)\"\n                        />\n                        @if (mode() === 'field' && showTime()) {\n                            <input\n                                #toTime\n                                [attr.aria-label]=\"'date_time' | translate\"\n                                type=\"text\"\n                                inputmode=\"numeric\"\n                                maxlength=\"5\"\n                                [value]=\"toTimeText()\"\n                                placeholder=\"HH:mm\"\n                                (keydown)=\"onTimeKeydown($event, toTime)\"\n                                (change)=\"commitTimeInput('end', toTime)\"\n                            />\n                        }\n                    </div>\n                </div>\n            }\n\n            <!-- Footer: hidden only for single field WITHOUT time (commit on pick). -->\n            @if (!(mode() === 'field' && selectionMode() === 'single' && !showTime())) {\n                <div class=\"dp__actions\">\n                    @if (mode() === 'field' && selectionMode() === 'single') {\n                        <span></span>\n                    } @else {\n                        <span class=\"duration\">\n                            <span class=\"num\">{{ draftDurationDays() }}</span>\n                            {{ 'date_days' | translate }}\n                        </span>\n                    }\n                    <div class=\"right\">\n                        @if (mode() !== 'field') {\n                            <button\n                                type=\"button\"\n                                class=\"btn btn-ghost btn-sm\"\n                                (click)=\"backToPresets()\"\n                            >\n                                {{ 'common_back' | translate }}\n                            </button>\n                        }\n                        <button\n                            type=\"button\"\n                            class=\"btn btn-primary btn-sm\"\n                            [disabled]=\"!draftStart()\"\n                            (click)=\"applyCustomRange()\"\n                        >\n                            {{ 'common_apply' | translate }}\n                        </button>\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n</ng-template>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:inline-block}:host(.dp-host--field){display:block}.hint{unicode-bidi:plaintext}\n"] }]
+            args: [{ selector: 'ef-datepicker-advanced', standalone: true, imports: [CommonModule, TranslateModule, EfLabelComponent, EfClearButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.dp-host--field]': "mode() === 'field'" }, template: "<div class=\"dp\" [class.dp--field]=\"mode() === 'field'\" #anchorEl>\n    @if (mode() === 'field' && variant() === 'field') {\n        <!-- Field mode \u2014 labelled field-box trigger (form control) -->\n        @if (labelKey() || label()) {\n            <ef-label\n                [labelKey]=\"labelKey()\"\n                [label]=\"label()\"\n                [for]=\"effectiveId\"\n                [required]=\"required()\"\n            />\n        }\n        <div class=\"ef-field-control\">\n            <button\n                type=\"button\"\n                class=\"dp__field-trigger\"\n                [id]=\"effectiveId\"\n                [class.open]=\"open()\"\n                [class.is-invalid]=\"isInvalid\"\n                [class.is-placeholder]=\"!hasFieldValue()\"\n                [disabled]=\"isDisabled()\"\n                [attr.aria-haspopup]=\"'dialog'\"\n                [attr.aria-expanded]=\"open()\"\n                [attr.aria-required]=\"required() ? 'true' : null\"\n                [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n                [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n                [attr.aria-label]=\"(labelKey() || label()) ? null : (ariaLabelKey() ? (ariaLabelKey() | translate) : (ariaLabel() || null))\"\n                (click)=\"toggle($event)\"\n            >\n                <i class=\"ico pi pi-calendar\" aria-hidden=\"true\"></i>\n                <span class=\"val\">\n                    @if (hasFieldValue()) {\n                        <bdi dir=\"ltr\">{{ fieldDisplay() }}</bdi>\n                    } @else {\n                        {{ placeholderKey() ? (placeholderKey() | translate) : placeholder() }}\n                    }\n                </span>\n                <svg class=\"caret ef-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\" /></svg>\n            </button>\n            @if (canClear) {\n                <!-- Overlaid sibling (not nested in the trigger <button>) so it\n                     clears instead of toggling the calendar. -->\n                <ef-clear-button\n                    class=\"dp__field-clear\"\n                    [ariaLabel]=\"'action.clear' | translate\"\n                    (clear)=\"clearValue()\"\n                />\n            }\n            @if (showRequired || serverErrors) {\n                <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n                    @if (showRequired) {\n                        <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n                    }\n                    @if (serverErrors; as errors) {\n                        @for (error of errors; track error) {\n                            <small class=\"text-danger block\">{{ error }}</small>\n                        }\n                    }\n                </div>\n            }\n        </div>\n    } @else {\n        <!-- Pill trigger \u2014 filter mode, or field mode with variant=\"pill\" -->\n        <button\n            type=\"button\"\n            class=\"dp__trigger\"\n            [class.open]=\"open()\"\n            [disabled]=\"isDisabled()\"\n            [attr.aria-haspopup]=\"'dialog'\"\n            [attr.aria-expanded]=\"open()\"\n            [attr.aria-label]=\"mode() === 'field' && !(labelKey() || label()) ? (ariaLabelKey() ? (ariaLabelKey() | translate) : (ariaLabel() || null)) : null\"\n            (click)=\"toggle($event)\"\n        >\n            <i class=\"ico pi pi-calendar\" aria-hidden=\"true\"></i>\n            @if (mode() === 'field') {\n                <span class=\"val\">\n                    @if (hasFieldValue()) {\n                        <bdi dir=\"ltr\">{{ fieldDisplay() }}</bdi>\n                    } @else {\n                        {{ placeholderKey() ? (placeholderKey() | translate) : placeholder() }}\n                    }\n                </span>\n            } @else {\n                <span class=\"lbl\">\n                    {{ triggerLabelKey() ? (triggerLabelKey() | translate) : triggerLabel() }}\n                </span>\n                <span class=\"val\">\n                    @if (resolvedRange().labelKey; as key) {\n                        {{ key | translate }}\n                    } @else {\n                        {{ resolvedRange().label }}\n                    }\n                </span>\n            }\n            <svg class=\"caret ef-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\" /></svg>\n        </button>\n    }\n</div>\n\n<!--\n    Popover panel \u2014 instantiated via ViewContainerRef + appended to\n    <body> when `open()` flips on. Fixed to the viewport and placed\n    against the trigger by positionPanel() (flips above, keeps inside the\n    viewport); on a phone it is a bottom sheet over a backdrop instead.\n-->\n<ng-template #panelTpl>\n    @if (sheet()) {\n        <div class=\"dp__backdrop\" aria-hidden=\"true\" (click)=\"close(true)\"></div>\n    }\n    <div\n        class=\"dp__panel open\"\n        [class.wide]=\"view() === 'custom'\"\n        [class.dp__panel--sheet]=\"sheet()\"\n        role=\"dialog\"\n        [attr.aria-modal]=\"sheet() ? 'true' : null\"\n        [attr.aria-label]=\"panelLabelKey() ? (panelLabelKey() | translate) : panelLabel()\"\n    >\n        <!-- \u2500\u2500 View 1 \u2014 preset list \u2500\u2500 -->\n        <div class=\"dp__view\" [class.active]=\"view() === 'presets'\">\n            @for (preset of effectivePresets(); track trackByPreset($index, preset)) {\n                <button\n                    type=\"button\"\n                    class=\"dp__preset\"\n                    [class.active]=\"isActivePreset(preset.key)\"\n                    (click)=\"selectPreset(preset)\"\n                >\n                    {{ preset.labelKey ? (preset.labelKey | translate) : preset.label }}\n                    <span class=\"hint\">{{ presetHint(preset) }}</span>\n                </button>\n            }\n\n            @if (allowCustomRange()) {\n                <div class=\"dp__divider\" role=\"separator\"></div>\n                <button\n                    type=\"button\"\n                    class=\"dp__preset muted\"\n                    (click)=\"openCustomView()\"\n                >\n                    <span style=\"display:inline-flex;align-items:center;gap:8px\">\n                        <i class=\"ico-lead pi pi-calendar\" aria-hidden=\"true\"></i>\n                        {{ 'date_preset_custom' | translate }}\n                    </span>\n                    <span class=\"hint\">\u21E7</span>\n                </button>\n            }\n        </div>\n\n        <!-- \u2500\u2500 View 2 \u2014 custom range with calendar \u2500\u2500 -->\n        <div class=\"dp__view\" [class.active]=\"view() === 'custom'\">\n            <!-- A single-date field drops this title: the field's own label\n                 names the dialog (aria-label above), and the date input below\n                 carries the same words, so \"S\u00E9lectionner une date\" read twice. -->\n            @if (!(mode() === 'field' && selectionMode() === 'single')) {\n            <div class=\"dp__custom-head\">\n                @if (mode() !== 'field') {\n                    <button\n                        type=\"button\"\n                        class=\"dp__back\"\n                        [attr.aria-label]=\"'common_back' | translate\"\n                        (click)=\"backToPresets()\"\n                    >\n                        <i class=\"pi pi-chevron-left\" aria-hidden=\"true\"></i>\n                    </button>\n                } @else {\n                    <span></span>\n                }\n                <div class=\"dp__custom-title\">\n                    <span class=\"pulse-dot\"></span>\n                    {{ 'date_custom_range' | translate }}\n                </div>\n                <span></span>\n            </div>\n            }\n\n            <div class=\"dp__cal\">\n                <div class=\"dp__cal-head\">\n                    <button\n                        type=\"button\"\n                        class=\"dp__cal-nav\"\n                        [attr.aria-label]=\"'date_prev_month' | translate\"\n                        (click)=\"headerPrev()\"\n                    >\n                        <i class=\"pi pi-chevron-left\" aria-hidden=\"true\"></i>\n                    </button>\n                    <div class=\"dp__cal-title\">\n                        @switch (calMode()) {\n                            @case ('years') {\n                                <span class=\"dp__cal-pick is-static\">{{ yearWindowLabel() }}</span>\n                            }\n                            @case ('months') {\n                                <button type=\"button\" class=\"dp__cal-pick\" (click)=\"openYearPicker()\">\n                                    {{ yearLabel() }}\n                                </button>\n                            }\n                            @default {\n                                <button type=\"button\" class=\"dp__cal-pick\" (click)=\"openMonthPicker()\">\n                                    {{ monthLabel() }}\n                                </button>\n                                <button type=\"button\" class=\"dp__cal-pick\" (click)=\"openYearPicker()\">\n                                    {{ yearLabel() }}\n                                </button>\n                            }\n                        }\n                    </div>\n                    <button\n                        type=\"button\"\n                        class=\"dp__cal-nav\"\n                        [attr.aria-label]=\"'date_next_month' | translate\"\n                        (click)=\"headerNext()\"\n                    >\n                        <i class=\"pi pi-chevron-right\" aria-hidden=\"true\"></i>\n                    </button>\n                </div>\n\n                @switch (calMode()) {\n                    @case ('months') {\n                        <div class=\"dp__cal-cells\">\n                            @for (cell of monthCells(); track cell.month) {\n                                <button\n                                    type=\"button\"\n                                    class=\"dp__cal-cell\"\n                                    [class.active]=\"cell.active\"\n                                    [class.today]=\"cell.today\"\n                                    (click)=\"selectMonth(cell.month)\"\n                                >\n                                    {{ cell.label }}\n                                </button>\n                            }\n                        </div>\n                    }\n                    @case ('years') {\n                        <div class=\"dp__cal-cells\">\n                            @for (cell of yearCells(); track cell.year) {\n                                <button\n                                    type=\"button\"\n                                    class=\"dp__cal-cell\"\n                                    [class.active]=\"cell.active\"\n                                    [class.today]=\"cell.today\"\n                                    (click)=\"selectYear(cell.year)\"\n                                >\n                                    {{ cell.year }}\n                                </button>\n                            }\n                        </div>\n                    }\n                    @default {\n                        <div class=\"dp__cal-dow-row\">\n                            @for (label of dowLabels(); track trackByDow($index, label)) {\n                                <div class=\"dp__cal-dow\">{{ label }}</div>\n                            }\n                        </div>\n\n                        <div class=\"dp__cal-grid\">\n                            @for (day of calendarGrid(); track trackByDay($index, day)) {\n                                <button\n                                    type=\"button\"\n                                    class=\"dp__cal-day\"\n                                    [class.out]=\"day.out\"\n                                    [class.today]=\"day.today\"\n                                    [class.in-range]=\"day.inRange\"\n                                    [class.range-start]=\"day.rangeStart\"\n                                    [class.range-end]=\"day.rangeEnd\"\n                                    [attr.aria-label]=\"day.date | date:'fullDate'\"\n                                    (click)=\"selectDay(day.date)\"\n                                >\n                                    <span class=\"day-num\">{{ day.day }}</span>\n                                </button>\n                            }\n                        </div>\n                    }\n                }\n            </div>\n\n            @if (mode() === 'field' && selectionMode() === 'single') {\n                <!-- Single-date field: date (+ time when enabled). Without time,\n                     picking a day commits & closes; with time, Apply commits. -->\n                <div class=\"dp__inputs\" [class.dp__inputs--single]=\"!showTime()\">\n                    <div class=\"dp__field\">\n                        <label [attr.for]=\"effectiveId + '-single'\">{{ 'date_select_date' | translate }}</label>\n                        <input\n                            #singleInput\n                            [id]=\"effectiveId + '-single'\"\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            maxlength=\"10\"\n                            [value]=\"fromText()\"\n                            [placeholder]=\"datePlaceholder()\"\n                            (keydown)=\"onDateKeydown($event, singleInput)\"\n                            (change)=\"commitSingleInput(singleInput)\"\n                        />\n                    </div>\n                    @if (showTime()) {\n                        <div class=\"dp__field\">\n                            <label [attr.for]=\"effectiveId + '-single-time'\">{{ 'date_time' | translate }}</label>\n                            <input\n                                #singleTime\n                                [id]=\"effectiveId + '-single-time'\"\n                                type=\"text\"\n                                inputmode=\"numeric\"\n                                maxlength=\"5\"\n                                [value]=\"fromTimeText()\"\n                                placeholder=\"HH:mm\"\n                                (keydown)=\"onTimeKeydown($event, singleTime)\"\n                                (change)=\"commitTimeInput('start', singleTime)\"\n                            />\n                        </div>\n                    }\n                </div>\n            } @else {\n                <div class=\"dp__inputs\">\n                    <div class=\"dp__field\">\n                        <label [attr.for]=\"effectiveId + '-from'\">{{ 'date_from' | translate }}</label>\n                        <input\n                            #fromInput\n                            [id]=\"effectiveId + '-from'\"\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            maxlength=\"10\"\n                            [value]=\"fromText()\"\n                            [placeholder]=\"datePlaceholder()\"\n                            (keydown)=\"onDateKeydown($event, fromInput)\"\n                            (change)=\"commitDateInput('start', fromInput)\"\n                        />\n                        @if (mode() === 'field' && showTime()) {\n                            <input\n                                #fromTime\n                                [attr.aria-label]=\"'date_time' | translate\"\n                                type=\"text\"\n                                inputmode=\"numeric\"\n                                maxlength=\"5\"\n                                [value]=\"fromTimeText()\"\n                                placeholder=\"HH:mm\"\n                                (keydown)=\"onTimeKeydown($event, fromTime)\"\n                                (change)=\"commitTimeInput('start', fromTime)\"\n                            />\n                        }\n                    </div>\n                    <div class=\"dp__field\">\n                        <label [attr.for]=\"effectiveId + '-to'\">{{ 'date_to' | translate }}</label>\n                        <input\n                            #toInput\n                            [id]=\"effectiveId + '-to'\"\n                            type=\"text\"\n                            inputmode=\"numeric\"\n                            maxlength=\"10\"\n                            [value]=\"toText()\"\n                            [placeholder]=\"datePlaceholder()\"\n                            (keydown)=\"onDateKeydown($event, toInput)\"\n                            (change)=\"commitDateInput('end', toInput)\"\n                        />\n                        @if (mode() === 'field' && showTime()) {\n                            <input\n                                #toTime\n                                [attr.aria-label]=\"'date_time' | translate\"\n                                type=\"text\"\n                                inputmode=\"numeric\"\n                                maxlength=\"5\"\n                                [value]=\"toTimeText()\"\n                                placeholder=\"HH:mm\"\n                                (keydown)=\"onTimeKeydown($event, toTime)\"\n                                (change)=\"commitTimeInput('end', toTime)\"\n                            />\n                        }\n                    </div>\n                </div>\n            }\n\n            <!-- Footer: hidden only for single field WITHOUT time (commit on pick). -->\n            @if (!(mode() === 'field' && selectionMode() === 'single' && !showTime())) {\n                <div class=\"dp__actions\">\n                    @if (mode() === 'field' && selectionMode() === 'single') {\n                        <span></span>\n                    } @else {\n                        <span class=\"duration\">\n                            <span class=\"num\">{{ draftDurationDays() }}</span>\n                            {{ 'date_days' | translate }}\n                        </span>\n                    }\n                    <div class=\"right\">\n                        @if (mode() !== 'field') {\n                            <button\n                                type=\"button\"\n                                class=\"btn btn-ghost btn-sm\"\n                                (click)=\"backToPresets()\"\n                            >\n                                {{ 'common_back' | translate }}\n                            </button>\n                        }\n                        <button\n                            type=\"button\"\n                            class=\"btn btn-primary btn-sm\"\n                            [disabled]=\"!draftStart()\"\n                            (click)=\"applyCustomRange()\"\n                        >\n                            {{ 'common_apply' | translate }}\n                        </button>\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n</ng-template>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:inline-block}:host(.dp-host--field){display:block}.hint{unicode-bidi:plaintext}\n"] }]
         }], ctorParameters: () => [], propDecorators: { anchorEl: [{
                 type: ViewChild,
                 args: ['anchorEl', { static: true }]
@@ -2367,6 +2611,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             }], triggerLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabelKey", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], activePreset: [{ type: i0.Input, args: [{ isSignal: true, alias: "activePreset", required: false }] }], start: [{ type: i0.Input, args: [{ isSignal: true, alias: "start", required: false }] }], end: [{ type: i0.Input, args: [{ isSignal: true, alias: "end", required: false }] }], allowCustomRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomRange", required: false }] }], allowAllTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAllTime", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
+            }], onTab: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
             }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -2805,11 +3052,11 @@ class EfInputNumberComponent extends AbstractEfFormControl {
         this.handleClear();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfInputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfInputNumberComponent, isStandalone: true, selector: "ef-inputnumber", inputs: { value: "value", invalid: "invalid", format: "format", showButtons: ["showButtons", "showButtons", booleanAttribute], buttonLayout: "buttonLayout", incrementButtonClass: "incrementButtonClass", decrementButtonClass: "decrementButtonClass", incrementButtonIcon: "incrementButtonIcon", decrementButtonIcon: "decrementButtonIcon", prefix: "prefix", suffix: "suffix", currency: "currency", currencyDisplay: "currencyDisplay", locale: "locale", localeMatcher: "localeMatcher", mode: "mode", useGrouping: "useGrouping", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", min: "min", max: "max", step: "step", allowEmpty: "allowEmpty", inputSize: "inputSize", size: "size", maxlength: "maxlength", minlength: "minlength", pattern: "pattern", tabindex: "tabindex", title: "title", ariaLabelledBy: "ariaLabelledBy", inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", style: "style", styleClass: "styleClass", primeNgVariant: "primeNgVariant", autofocus: ["autofocus", "autofocus", booleanAttribute], autocomplete: "autocomplete", fluid: "fluid", inline: ["inline", "inline", booleanAttribute], variant: "variant", pt: "pt", ptOptions: "ptOptions", dt: "dt", unstyled: "unstyled" }, outputs: { inputEvent: "inputEvent", valueChangeEvent: "valueChangeEvent", focusEvent: "focusEvent", blurEvent: "blurEvent", keyDownEvent: "keyDownEvent", clearEvent: "clearEvent" }, host: { properties: { "class.ef-inline": "this.isInline" } }, viewQueries: [{ propertyName: "inputNumber", first: true, predicate: ["inputNumber"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  @if (variant === 'comptoir') {\n    @if (prefix || suffix || showButtons || currencyAddon) {\n      <!-- Comptoir variant \u2014 native text input (inputmode=decimal, accepts\n           \",\" or \".\" as decimal separator) wrapped in .ef-input-group when\n           there's a prefix / suffix / stepper. min/max are enforced by\n           blur-time clamping in the component (text inputs have no native\n           range semantics). -->\n      <div class=\"ef-input-group\" [class.is-invalid]=\"isInvalid\">\n        @if (showButtons) {\n          <button\n            type=\"button\"\n            class=\"ef-input-addon is-stepper\"\n            [disabled]=\"isDisabled() || (min !== undefined && (value ?? 0) <= min)\"\n            (click)=\"step$(-1)\"\n            [attr.aria-label]=\"('ef_input_decrement' | translate) || 'Decrease'\"\n          >\n            <i class=\"pi pi-minus\" aria-hidden=\"true\"></i>\n          </button>\n        }\n        @if (prefix) {\n          <span class=\"ef-input-addon is-prefix\" aria-hidden=\"true\">{{ prefix }}</span>\n        }\n        @if (currencyAddon?.side === 'prefix') {\n          <span class=\"ef-input-addon is-prefix is-currency\" [id]=\"currencyId\">{{ currencyAddon?.symbol }}</span>\n        }\n        <input\n          type=\"text\"\n          inputmode=\"decimal\"\n          [id]=\"effectiveId\"\n          [attr.name]=\"name() || null\"\n          [value]=\"displayText\"\n          [attr.placeholder]=\"effectivePlaceholder || null\"\n          [readonly]=\"readonly()\"\n          [disabled]=\"isDisabled()\"\n          [attr.autocomplete]=\"autocomplete ?? 'off'\"\n          [attr.aria-label]=\"effectiveAriaLabel\"\n          [attr.aria-required]=\"required() ? 'true' : null\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n          [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors, currencyAddon ? currencyId : null)\"\n          (input)=\"handleNativeInput($any($event.target).value)\"\n          (focus)=\"handleFocus($event)\"\n          (blur)=\"handleBlur($event)\"\n          (keydown)=\"handleKeyDown($event)\"\n        />\n        @if (canClear) {\n          <ef-clear-button\n            class=\"ef-group-clear\"\n            [ariaLabel]=\"'action.clear' | translate\"\n            (clear)=\"clearValue()\"\n          />\n        }\n        @if (suffix) {\n          <span class=\"ef-input-addon is-suffix\" aria-hidden=\"true\">{{ suffix }}</span>\n        }\n        @if (currencyAddon?.side === 'suffix') {\n          <span class=\"ef-input-addon is-suffix is-currency\" [id]=\"currencyId\">{{ currencyAddon?.symbol }}</span>\n        }\n        @if (showButtons) {\n          <button\n            type=\"button\"\n            class=\"ef-input-addon is-stepper\"\n            [disabled]=\"isDisabled() || (max !== undefined && (value ?? 0) >= max)\"\n            (click)=\"step$(1)\"\n            [attr.aria-label]=\"('ef_input_increment' | translate) || 'Increase'\"\n          >\n            <i class=\"pi pi-plus\" aria-hidden=\"true\"></i>\n          </button>\n        }\n      </div>\n    } @else {\n      <!-- Comptoir variant \u2014 bare native text input (inputmode=decimal,\n           accepts \",\" or \".\" as decimal separator; optional inline clear).\n           min/max are enforced by blur-time clamping in the component. -->\n      <div class=\"ef-input-wrap\">\n        <input\n          type=\"text\"\n          inputmode=\"decimal\"\n          class=\"ef-input\"\n          [class.has-clear]=\"canClear\"\n          [id]=\"effectiveId\"\n          [attr.name]=\"name() || null\"\n          [value]=\"displayText\"\n          [attr.placeholder]=\"effectivePlaceholder || null\"\n          [readonly]=\"readonly()\"\n          [disabled]=\"isDisabled()\"\n          [attr.autocomplete]=\"autocomplete ?? 'off'\"\n          [class.is-invalid]=\"isInvalid\"\n          [attr.aria-label]=\"effectiveAriaLabel\"\n          [attr.aria-required]=\"required() ? 'true' : null\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n          [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n          (input)=\"handleNativeInput($any($event.target).value)\"\n          (focus)=\"handleFocus($event)\"\n          (blur)=\"handleBlur($event)\"\n          (keydown)=\"handleKeyDown($event)\"\n        />\n        @if (canClear) {\n          <ef-clear-button\n            class=\"ef-input-clear\"\n            [ariaLabel]=\"'action.clear' | translate\"\n            (clear)=\"clearValue()\"\n          />\n        }\n      </div>\n    }\n  } @else {\n    <!-- PrimeNG variant (default) \u2014 full locale-aware formatting. -->\n    <p-inputnumber\n      #inputNumber\n      [(ngModel)]=\"value\"\n      [ngModelOptions]=\"{standalone: true}\"\n      [invalid]=\"isInvalid\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [format]=\"format\"\n      [showButtons]=\"showButtons\"\n      [buttonLayout]=\"buttonLayout\"\n      [incrementButtonClass]=\"incrementButtonClass\"\n      [decrementButtonClass]=\"decrementButtonClass\"\n      [incrementButtonIcon]=\"incrementButtonIcon\"\n      [decrementButtonIcon]=\"decrementButtonIcon\"\n      [prefix]=\"prefix\"\n      [suffix]=\"suffix\"\n      [currency]=\"currency\"\n      [currencyDisplay]=\"currencyDisplay\"\n      [locale]=\"locale\"\n      [localeMatcher]=\"localeMatcher\"\n      [mode]=\"mode\"\n      [useGrouping]=\"useGrouping\"\n      [minFractionDigits]=\"minFractionDigits\"\n      [maxFractionDigits]=\"maxFractionDigits\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [step]=\"step\"\n      [allowEmpty]=\"allowEmpty\"\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [placeholder]=\"effectivePlaceholder\"\n      [inputSize]=\"inputSize\"\n      [size]=\"size\"\n      [maxlength]=\"maxlength\"\n      [minlength]=\"minlength\"\n      [pattern]=\"pattern\"\n      [tabindex]=\"tabindex\"\n      [title]=\"title\"\n      [ariaLabel]=\"effectiveAriaLabel\"\n      [ariaLabelledBy]=\"ariaLabelledBy\"\n      [ariaDescribedBy]=\"describedBy(showRequired || !!serverErrors)\"\n      [ariaRequired]=\"required()\"\n      [inputStyle]=\"inputStyle\"\n      [inputStyleClass]=\"inputStyleClass\"\n      [style]=\"style\"\n      [styleClass]=\"styleClass\"\n      [showClear]=\"showClear()\"\n      [variant]=\"primeNgVariant\"\n      [autofocus]=\"autofocus\"\n      [autocomplete]=\"autocomplete\"\n      [fluid]=\"fluid\"\n      [pt]=\"pt\"\n      [ptOptions]=\"ptOptions\"\n      [dt]=\"dt\"\n      [unstyled]=\"unstyled\"\n      (onInput)=\"handleInput($event)\"\n      (onFocus)=\"handleFocus($event)\"\n      (onBlur)=\"handleBlur($event)\"\n      (onKeyDown)=\"handleKeyDown($event)\"\n      (onClear)=\"handleClear()\"\n    />\n  }\n  @if (effectiveHint) {\n    <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n  }\n  @if (showRequired || serverErrors) {\n    <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n      @if (showRequired) {\n        <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n      }\n      @if (serverErrors; as errors) {\n        @for (error of errors; track error) {\n          <small class=\"text-danger block\">{{ error }}</small>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block;width:100%}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}:host(.ef-inputnumber-small) ::ng-deep .p-inputnumber-input{font-size:.875rem;padding:.375rem .5rem}:host(.ef-inputnumber-large) ::ng-deep .p-inputnumber-input{font-size:1.125rem;padding:.75rem 1rem}:host(.ng-invalid.ng-touched) ::ng-deep .p-inputnumber-input,:host(.ng-invalid.ng-dirty) ::ng-deep .p-inputnumber-input{border-color:var(--red-500, #ef4444)}:host(.ng-invalid.ng-touched) ::ng-deep .p-inputnumber-input:focus,:host(.ng-invalid.ng-dirty) ::ng-deep .p-inputnumber-input:focus{box-shadow:0 0 0 .2rem #ef444440}\n"], dependencies: [{ kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i1$4.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "component", type: EfClearButtonComponent, selector: "ef-clear-button", inputs: ["ariaLabel", "disabled"], outputs: ["clear"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfInputNumberComponent, isStandalone: true, selector: "ef-inputnumber", inputs: { value: "value", invalid: "invalid", format: "format", showButtons: ["showButtons", "showButtons", booleanAttribute], buttonLayout: "buttonLayout", incrementButtonClass: "incrementButtonClass", decrementButtonClass: "decrementButtonClass", incrementButtonIcon: "incrementButtonIcon", decrementButtonIcon: "decrementButtonIcon", prefix: "prefix", suffix: "suffix", currency: "currency", currencyDisplay: "currencyDisplay", locale: "locale", localeMatcher: "localeMatcher", mode: "mode", useGrouping: "useGrouping", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", min: "min", max: "max", step: "step", allowEmpty: "allowEmpty", inputSize: "inputSize", size: "size", maxlength: "maxlength", minlength: "minlength", pattern: "pattern", tabindex: "tabindex", title: "title", ariaLabelledBy: "ariaLabelledBy", inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", style: "style", styleClass: "styleClass", primeNgVariant: "primeNgVariant", autofocus: ["autofocus", "autofocus", booleanAttribute], autocomplete: "autocomplete", fluid: "fluid", inline: ["inline", "inline", booleanAttribute], variant: "variant", pt: "pt", ptOptions: "ptOptions", dt: "dt", unstyled: "unstyled" }, outputs: { inputEvent: "inputEvent", valueChangeEvent: "valueChangeEvent", focusEvent: "focusEvent", blurEvent: "blurEvent", keyDownEvent: "keyDownEvent", clearEvent: "clearEvent" }, host: { properties: { "class.ef-inline": "this.isInline" } }, viewQueries: [{ propertyName: "inputNumber", first: true, predicate: ["inputNumber"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  @if (variant === 'comptoir') {\n    @if (prefix || suffix || showButtons || currencyAddon) {\n      <!-- Comptoir variant \u2014 native text input (inputmode=decimal, accepts\n           \",\" or \".\" as decimal separator) wrapped in .ef-input-group when\n           there's a prefix / suffix / stepper. min/max are enforced by\n           blur-time clamping in the component (text inputs have no native\n           range semantics). -->\n      <div class=\"ef-input-group\" [class.is-invalid]=\"isInvalid\">\n        @if (showButtons) {\n          <button\n            type=\"button\"\n            class=\"ef-input-addon is-stepper\"\n            [disabled]=\"isDisabled() || (min !== undefined && (value ?? 0) <= min)\"\n            (click)=\"step$(-1)\"\n            [attr.aria-label]=\"('ef_input_decrement' | translate) || 'Decrease'\"\n          >\n            <i class=\"pi pi-minus\" aria-hidden=\"true\"></i>\n          </button>\n        }\n        @if (prefix) {\n          <span class=\"ef-input-addon is-prefix\" aria-hidden=\"true\">{{ prefix }}</span>\n        }\n        @if (currencyAddon?.side === 'prefix') {\n          <span class=\"ef-input-addon is-prefix is-currency\" [id]=\"currencyId\">{{ currencyAddon?.symbol }}</span>\n        }\n        <input\n          type=\"text\"\n          inputmode=\"decimal\"\n          [id]=\"effectiveId\"\n          [attr.name]=\"name() || null\"\n          [value]=\"displayText\"\n          [attr.placeholder]=\"effectivePlaceholder || null\"\n          [readonly]=\"readonly()\"\n          [disabled]=\"isDisabled()\"\n          [attr.autocomplete]=\"autocomplete ?? 'off'\"\n          [attr.aria-label]=\"effectiveAriaLabel\"\n          [attr.aria-required]=\"required() ? 'true' : null\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n          [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors, currencyAddon ? currencyId : null)\"\n          (input)=\"handleNativeInput($any($event.target).value)\"\n          (focus)=\"handleFocus($event)\"\n          (blur)=\"handleBlur($event)\"\n          (keydown)=\"handleKeyDown($event)\"\n        />\n        @if (canClear) {\n          <ef-clear-button\n            class=\"ef-group-clear\"\n            [ariaLabel]=\"'action.clear' | translate\"\n            (clear)=\"clearValue()\"\n          />\n        }\n        @if (suffix) {\n          <span class=\"ef-input-addon is-suffix\" aria-hidden=\"true\">{{ suffix }}</span>\n        }\n        @if (currencyAddon?.side === 'suffix') {\n          <span class=\"ef-input-addon is-suffix is-currency\" [id]=\"currencyId\">{{ currencyAddon?.symbol }}</span>\n        }\n        @if (showButtons) {\n          <button\n            type=\"button\"\n            class=\"ef-input-addon is-stepper\"\n            [disabled]=\"isDisabled() || (max !== undefined && (value ?? 0) >= max)\"\n            (click)=\"step$(1)\"\n            [attr.aria-label]=\"('ef_input_increment' | translate) || 'Increase'\"\n          >\n            <i class=\"pi pi-plus\" aria-hidden=\"true\"></i>\n          </button>\n        }\n      </div>\n    } @else {\n      <!-- Comptoir variant \u2014 bare native text input (inputmode=decimal,\n           accepts \",\" or \".\" as decimal separator; optional inline clear).\n           min/max are enforced by blur-time clamping in the component. -->\n      <div class=\"ef-input-wrap\">\n        <input\n          type=\"text\"\n          inputmode=\"decimal\"\n          class=\"ef-input\"\n          [class.has-clear]=\"canClear\"\n          [id]=\"effectiveId\"\n          [attr.name]=\"name() || null\"\n          [value]=\"displayText\"\n          [attr.placeholder]=\"effectivePlaceholder || null\"\n          [readonly]=\"readonly()\"\n          [disabled]=\"isDisabled()\"\n          [attr.autocomplete]=\"autocomplete ?? 'off'\"\n          [class.is-invalid]=\"isInvalid\"\n          [attr.aria-label]=\"effectiveAriaLabel\"\n          [attr.aria-required]=\"required() ? 'true' : null\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n          [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n          (input)=\"handleNativeInput($any($event.target).value)\"\n          (focus)=\"handleFocus($event)\"\n          (blur)=\"handleBlur($event)\"\n          (keydown)=\"handleKeyDown($event)\"\n        />\n        @if (canClear) {\n          <ef-clear-button\n            class=\"ef-input-clear\"\n            [ariaLabel]=\"'action.clear' | translate\"\n            (clear)=\"clearValue()\"\n          />\n        }\n      </div>\n    }\n  } @else {\n    <!-- PrimeNG variant (default) \u2014 full locale-aware formatting. -->\n    <p-inputnumber\n      #inputNumber\n      [(ngModel)]=\"value\"\n      [ngModelOptions]=\"{standalone: true}\"\n      [invalid]=\"isInvalid\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [format]=\"format\"\n      [showButtons]=\"showButtons\"\n      [buttonLayout]=\"buttonLayout\"\n      [incrementButtonClass]=\"incrementButtonClass\"\n      [decrementButtonClass]=\"decrementButtonClass\"\n      [incrementButtonIcon]=\"incrementButtonIcon\"\n      [decrementButtonIcon]=\"decrementButtonIcon\"\n      [prefix]=\"prefix\"\n      [suffix]=\"suffix\"\n      [currency]=\"currency\"\n      [currencyDisplay]=\"currencyDisplay\"\n      [locale]=\"locale\"\n      [localeMatcher]=\"localeMatcher\"\n      [mode]=\"mode\"\n      [useGrouping]=\"useGrouping\"\n      [minFractionDigits]=\"minFractionDigits\"\n      [maxFractionDigits]=\"maxFractionDigits\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [step]=\"step\"\n      [allowEmpty]=\"allowEmpty\"\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [placeholder]=\"effectivePlaceholder\"\n      [inputSize]=\"inputSize\"\n      [size]=\"size\"\n      [maxlength]=\"maxlength ?? null\"\n      [minlength]=\"minlength ?? null\"\n      [pattern]=\"$any(pattern)\"\n      [tabindex]=\"tabindex\"\n      [title]=\"title\"\n      [ariaLabel]=\"effectiveAriaLabel ?? undefined\"\n      [ariaLabelledBy]=\"ariaLabelledBy\"\n      [ariaDescribedBy]=\"describedBy(showRequired || !!serverErrors) ?? undefined\"\n      [ariaRequired]=\"required()\"\n      [inputStyle]=\"inputStyle\"\n      [inputStyleClass]=\"inputStyleClass\"\n      [style]=\"style\"\n      [styleClass]=\"styleClass\"\n      [showClear]=\"showClear()\"\n      [variant]=\"primeNgVariant\"\n      [autofocus]=\"autofocus\"\n      [autocomplete]=\"autocomplete\"\n      [fluid]=\"fluid\"\n      [pt]=\"pt\"\n      [ptOptions]=\"ptOptions\"\n      [dt]=\"dt\"\n      [unstyled]=\"unstyled\"\n      (onInput)=\"handleInput($event)\"\n      (onFocus)=\"handleFocus($event)\"\n      (onBlur)=\"handleBlur($event)\"\n      (onKeyDown)=\"handleKeyDown($event)\"\n      (onClear)=\"handleClear()\"\n    />\n  }\n  @if (effectiveHint) {\n    <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n  }\n  @if (showRequired || serverErrors) {\n    <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n      @if (showRequired) {\n        <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n      }\n      @if (serverErrors; as errors) {\n        @for (error of errors; track error) {\n          <small class=\"text-danger block\">{{ error }}</small>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block;width:100%}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}:host(.ef-inputnumber-small) ::ng-deep .p-inputnumber-input{font-size:.875rem;padding:.375rem .5rem}:host(.ef-inputnumber-large) ::ng-deep .p-inputnumber-input{font-size:1.125rem;padding:.75rem 1rem}:host(.ng-invalid.ng-touched) ::ng-deep .p-inputnumber-input,:host(.ng-invalid.ng-dirty) ::ng-deep .p-inputnumber-input{border-color:var(--red-500, #ef4444)}:host(.ng-invalid.ng-touched) ::ng-deep .p-inputnumber-input:focus,:host(.ng-invalid.ng-dirty) ::ng-deep .p-inputnumber-input:focus{box-shadow:0 0 0 .2rem #ef444440}\n"], dependencies: [{ kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i1$4.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "labelParams", "for", "styleClass", "required"] }, { kind: "component", type: EfClearButtonComponent, selector: "ef-clear-button", inputs: ["ariaLabel", "disabled"], outputs: ["clear"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfInputNumberComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-inputnumber', standalone: true, imports: [InputNumberModule, FormsModule, TranslateModule, EfLabelComponent, EfClearButtonComponent], template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  @if (variant === 'comptoir') {\n    @if (prefix || suffix || showButtons || currencyAddon) {\n      <!-- Comptoir variant \u2014 native text input (inputmode=decimal, accepts\n           \",\" or \".\" as decimal separator) wrapped in .ef-input-group when\n           there's a prefix / suffix / stepper. min/max are enforced by\n           blur-time clamping in the component (text inputs have no native\n           range semantics). -->\n      <div class=\"ef-input-group\" [class.is-invalid]=\"isInvalid\">\n        @if (showButtons) {\n          <button\n            type=\"button\"\n            class=\"ef-input-addon is-stepper\"\n            [disabled]=\"isDisabled() || (min !== undefined && (value ?? 0) <= min)\"\n            (click)=\"step$(-1)\"\n            [attr.aria-label]=\"('ef_input_decrement' | translate) || 'Decrease'\"\n          >\n            <i class=\"pi pi-minus\" aria-hidden=\"true\"></i>\n          </button>\n        }\n        @if (prefix) {\n          <span class=\"ef-input-addon is-prefix\" aria-hidden=\"true\">{{ prefix }}</span>\n        }\n        @if (currencyAddon?.side === 'prefix') {\n          <span class=\"ef-input-addon is-prefix is-currency\" [id]=\"currencyId\">{{ currencyAddon?.symbol }}</span>\n        }\n        <input\n          type=\"text\"\n          inputmode=\"decimal\"\n          [id]=\"effectiveId\"\n          [attr.name]=\"name() || null\"\n          [value]=\"displayText\"\n          [attr.placeholder]=\"effectivePlaceholder || null\"\n          [readonly]=\"readonly()\"\n          [disabled]=\"isDisabled()\"\n          [attr.autocomplete]=\"autocomplete ?? 'off'\"\n          [attr.aria-label]=\"effectiveAriaLabel\"\n          [attr.aria-required]=\"required() ? 'true' : null\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n          [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors, currencyAddon ? currencyId : null)\"\n          (input)=\"handleNativeInput($any($event.target).value)\"\n          (focus)=\"handleFocus($event)\"\n          (blur)=\"handleBlur($event)\"\n          (keydown)=\"handleKeyDown($event)\"\n        />\n        @if (canClear) {\n          <ef-clear-button\n            class=\"ef-group-clear\"\n            [ariaLabel]=\"'action.clear' | translate\"\n            (clear)=\"clearValue()\"\n          />\n        }\n        @if (suffix) {\n          <span class=\"ef-input-addon is-suffix\" aria-hidden=\"true\">{{ suffix }}</span>\n        }\n        @if (currencyAddon?.side === 'suffix') {\n          <span class=\"ef-input-addon is-suffix is-currency\" [id]=\"currencyId\">{{ currencyAddon?.symbol }}</span>\n        }\n        @if (showButtons) {\n          <button\n            type=\"button\"\n            class=\"ef-input-addon is-stepper\"\n            [disabled]=\"isDisabled() || (max !== undefined && (value ?? 0) >= max)\"\n            (click)=\"step$(1)\"\n            [attr.aria-label]=\"('ef_input_increment' | translate) || 'Increase'\"\n          >\n            <i class=\"pi pi-plus\" aria-hidden=\"true\"></i>\n          </button>\n        }\n      </div>\n    } @else {\n      <!-- Comptoir variant \u2014 bare native text input (inputmode=decimal,\n           accepts \",\" or \".\" as decimal separator; optional inline clear).\n           min/max are enforced by blur-time clamping in the component. -->\n      <div class=\"ef-input-wrap\">\n        <input\n          type=\"text\"\n          inputmode=\"decimal\"\n          class=\"ef-input\"\n          [class.has-clear]=\"canClear\"\n          [id]=\"effectiveId\"\n          [attr.name]=\"name() || null\"\n          [value]=\"displayText\"\n          [attr.placeholder]=\"effectivePlaceholder || null\"\n          [readonly]=\"readonly()\"\n          [disabled]=\"isDisabled()\"\n          [attr.autocomplete]=\"autocomplete ?? 'off'\"\n          [class.is-invalid]=\"isInvalid\"\n          [attr.aria-label]=\"effectiveAriaLabel\"\n          [attr.aria-required]=\"required() ? 'true' : null\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n          [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n          (input)=\"handleNativeInput($any($event.target).value)\"\n          (focus)=\"handleFocus($event)\"\n          (blur)=\"handleBlur($event)\"\n          (keydown)=\"handleKeyDown($event)\"\n        />\n        @if (canClear) {\n          <ef-clear-button\n            class=\"ef-input-clear\"\n            [ariaLabel]=\"'action.clear' | translate\"\n            (clear)=\"clearValue()\"\n          />\n        }\n      </div>\n    }\n  } @else {\n    <!-- PrimeNG variant (default) \u2014 full locale-aware formatting. -->\n    <p-inputnumber\n      #inputNumber\n      [(ngModel)]=\"value\"\n      [ngModelOptions]=\"{standalone: true}\"\n      [invalid]=\"isInvalid\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [format]=\"format\"\n      [showButtons]=\"showButtons\"\n      [buttonLayout]=\"buttonLayout\"\n      [incrementButtonClass]=\"incrementButtonClass\"\n      [decrementButtonClass]=\"decrementButtonClass\"\n      [incrementButtonIcon]=\"incrementButtonIcon\"\n      [decrementButtonIcon]=\"decrementButtonIcon\"\n      [prefix]=\"prefix\"\n      [suffix]=\"suffix\"\n      [currency]=\"currency\"\n      [currencyDisplay]=\"currencyDisplay\"\n      [locale]=\"locale\"\n      [localeMatcher]=\"localeMatcher\"\n      [mode]=\"mode\"\n      [useGrouping]=\"useGrouping\"\n      [minFractionDigits]=\"minFractionDigits\"\n      [maxFractionDigits]=\"maxFractionDigits\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [step]=\"step\"\n      [allowEmpty]=\"allowEmpty\"\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [placeholder]=\"effectivePlaceholder\"\n      [inputSize]=\"inputSize\"\n      [size]=\"size\"\n      [maxlength]=\"maxlength\"\n      [minlength]=\"minlength\"\n      [pattern]=\"pattern\"\n      [tabindex]=\"tabindex\"\n      [title]=\"title\"\n      [ariaLabel]=\"effectiveAriaLabel\"\n      [ariaLabelledBy]=\"ariaLabelledBy\"\n      [ariaDescribedBy]=\"describedBy(showRequired || !!serverErrors)\"\n      [ariaRequired]=\"required()\"\n      [inputStyle]=\"inputStyle\"\n      [inputStyleClass]=\"inputStyleClass\"\n      [style]=\"style\"\n      [styleClass]=\"styleClass\"\n      [showClear]=\"showClear()\"\n      [variant]=\"primeNgVariant\"\n      [autofocus]=\"autofocus\"\n      [autocomplete]=\"autocomplete\"\n      [fluid]=\"fluid\"\n      [pt]=\"pt\"\n      [ptOptions]=\"ptOptions\"\n      [dt]=\"dt\"\n      [unstyled]=\"unstyled\"\n      (onInput)=\"handleInput($event)\"\n      (onFocus)=\"handleFocus($event)\"\n      (onBlur)=\"handleBlur($event)\"\n      (onKeyDown)=\"handleKeyDown($event)\"\n      (onClear)=\"handleClear()\"\n    />\n  }\n  @if (effectiveHint) {\n    <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n  }\n  @if (showRequired || serverErrors) {\n    <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n      @if (showRequired) {\n        <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n      }\n      @if (serverErrors; as errors) {\n        @for (error of errors; track error) {\n          <small class=\"text-danger block\">{{ error }}</small>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block;width:100%}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}:host(.ef-inputnumber-small) ::ng-deep .p-inputnumber-input{font-size:.875rem;padding:.375rem .5rem}:host(.ef-inputnumber-large) ::ng-deep .p-inputnumber-input{font-size:1.125rem;padding:.75rem 1rem}:host(.ng-invalid.ng-touched) ::ng-deep .p-inputnumber-input,:host(.ng-invalid.ng-dirty) ::ng-deep .p-inputnumber-input{border-color:var(--red-500, #ef4444)}:host(.ng-invalid.ng-touched) ::ng-deep .p-inputnumber-input:focus,:host(.ng-invalid.ng-dirty) ::ng-deep .p-inputnumber-input:focus{box-shadow:0 0 0 .2rem #ef444440}\n"] }]
+            args: [{ selector: 'ef-inputnumber', standalone: true, imports: [InputNumberModule, FormsModule, TranslateModule, EfLabelComponent, EfClearButtonComponent], template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  @if (variant === 'comptoir') {\n    @if (prefix || suffix || showButtons || currencyAddon) {\n      <!-- Comptoir variant \u2014 native text input (inputmode=decimal, accepts\n           \",\" or \".\" as decimal separator) wrapped in .ef-input-group when\n           there's a prefix / suffix / stepper. min/max are enforced by\n           blur-time clamping in the component (text inputs have no native\n           range semantics). -->\n      <div class=\"ef-input-group\" [class.is-invalid]=\"isInvalid\">\n        @if (showButtons) {\n          <button\n            type=\"button\"\n            class=\"ef-input-addon is-stepper\"\n            [disabled]=\"isDisabled() || (min !== undefined && (value ?? 0) <= min)\"\n            (click)=\"step$(-1)\"\n            [attr.aria-label]=\"('ef_input_decrement' | translate) || 'Decrease'\"\n          >\n            <i class=\"pi pi-minus\" aria-hidden=\"true\"></i>\n          </button>\n        }\n        @if (prefix) {\n          <span class=\"ef-input-addon is-prefix\" aria-hidden=\"true\">{{ prefix }}</span>\n        }\n        @if (currencyAddon?.side === 'prefix') {\n          <span class=\"ef-input-addon is-prefix is-currency\" [id]=\"currencyId\">{{ currencyAddon?.symbol }}</span>\n        }\n        <input\n          type=\"text\"\n          inputmode=\"decimal\"\n          [id]=\"effectiveId\"\n          [attr.name]=\"name() || null\"\n          [value]=\"displayText\"\n          [attr.placeholder]=\"effectivePlaceholder || null\"\n          [readonly]=\"readonly()\"\n          [disabled]=\"isDisabled()\"\n          [attr.autocomplete]=\"autocomplete ?? 'off'\"\n          [attr.aria-label]=\"effectiveAriaLabel\"\n          [attr.aria-required]=\"required() ? 'true' : null\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n          [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors, currencyAddon ? currencyId : null)\"\n          (input)=\"handleNativeInput($any($event.target).value)\"\n          (focus)=\"handleFocus($event)\"\n          (blur)=\"handleBlur($event)\"\n          (keydown)=\"handleKeyDown($event)\"\n        />\n        @if (canClear) {\n          <ef-clear-button\n            class=\"ef-group-clear\"\n            [ariaLabel]=\"'action.clear' | translate\"\n            (clear)=\"clearValue()\"\n          />\n        }\n        @if (suffix) {\n          <span class=\"ef-input-addon is-suffix\" aria-hidden=\"true\">{{ suffix }}</span>\n        }\n        @if (currencyAddon?.side === 'suffix') {\n          <span class=\"ef-input-addon is-suffix is-currency\" [id]=\"currencyId\">{{ currencyAddon?.symbol }}</span>\n        }\n        @if (showButtons) {\n          <button\n            type=\"button\"\n            class=\"ef-input-addon is-stepper\"\n            [disabled]=\"isDisabled() || (max !== undefined && (value ?? 0) >= max)\"\n            (click)=\"step$(1)\"\n            [attr.aria-label]=\"('ef_input_increment' | translate) || 'Increase'\"\n          >\n            <i class=\"pi pi-plus\" aria-hidden=\"true\"></i>\n          </button>\n        }\n      </div>\n    } @else {\n      <!-- Comptoir variant \u2014 bare native text input (inputmode=decimal,\n           accepts \",\" or \".\" as decimal separator; optional inline clear).\n           min/max are enforced by blur-time clamping in the component. -->\n      <div class=\"ef-input-wrap\">\n        <input\n          type=\"text\"\n          inputmode=\"decimal\"\n          class=\"ef-input\"\n          [class.has-clear]=\"canClear\"\n          [id]=\"effectiveId\"\n          [attr.name]=\"name() || null\"\n          [value]=\"displayText\"\n          [attr.placeholder]=\"effectivePlaceholder || null\"\n          [readonly]=\"readonly()\"\n          [disabled]=\"isDisabled()\"\n          [attr.autocomplete]=\"autocomplete ?? 'off'\"\n          [class.is-invalid]=\"isInvalid\"\n          [attr.aria-label]=\"effectiveAriaLabel\"\n          [attr.aria-required]=\"required() ? 'true' : null\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n          [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n          (input)=\"handleNativeInput($any($event.target).value)\"\n          (focus)=\"handleFocus($event)\"\n          (blur)=\"handleBlur($event)\"\n          (keydown)=\"handleKeyDown($event)\"\n        />\n        @if (canClear) {\n          <ef-clear-button\n            class=\"ef-input-clear\"\n            [ariaLabel]=\"'action.clear' | translate\"\n            (clear)=\"clearValue()\"\n          />\n        }\n      </div>\n    }\n  } @else {\n    <!-- PrimeNG variant (default) \u2014 full locale-aware formatting. -->\n    <p-inputnumber\n      #inputNumber\n      [(ngModel)]=\"value\"\n      [ngModelOptions]=\"{standalone: true}\"\n      [invalid]=\"isInvalid\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [format]=\"format\"\n      [showButtons]=\"showButtons\"\n      [buttonLayout]=\"buttonLayout\"\n      [incrementButtonClass]=\"incrementButtonClass\"\n      [decrementButtonClass]=\"decrementButtonClass\"\n      [incrementButtonIcon]=\"incrementButtonIcon\"\n      [decrementButtonIcon]=\"decrementButtonIcon\"\n      [prefix]=\"prefix\"\n      [suffix]=\"suffix\"\n      [currency]=\"currency\"\n      [currencyDisplay]=\"currencyDisplay\"\n      [locale]=\"locale\"\n      [localeMatcher]=\"localeMatcher\"\n      [mode]=\"mode\"\n      [useGrouping]=\"useGrouping\"\n      [minFractionDigits]=\"minFractionDigits\"\n      [maxFractionDigits]=\"maxFractionDigits\"\n      [min]=\"min\"\n      [max]=\"max\"\n      [step]=\"step\"\n      [allowEmpty]=\"allowEmpty\"\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [placeholder]=\"effectivePlaceholder\"\n      [inputSize]=\"inputSize\"\n      [size]=\"size\"\n      [maxlength]=\"maxlength ?? null\"\n      [minlength]=\"minlength ?? null\"\n      [pattern]=\"$any(pattern)\"\n      [tabindex]=\"tabindex\"\n      [title]=\"title\"\n      [ariaLabel]=\"effectiveAriaLabel ?? undefined\"\n      [ariaLabelledBy]=\"ariaLabelledBy\"\n      [ariaDescribedBy]=\"describedBy(showRequired || !!serverErrors) ?? undefined\"\n      [ariaRequired]=\"required()\"\n      [inputStyle]=\"inputStyle\"\n      [inputStyleClass]=\"inputStyleClass\"\n      [style]=\"style\"\n      [styleClass]=\"styleClass\"\n      [showClear]=\"showClear()\"\n      [variant]=\"primeNgVariant\"\n      [autofocus]=\"autofocus\"\n      [autocomplete]=\"autocomplete\"\n      [fluid]=\"fluid\"\n      [pt]=\"pt\"\n      [ptOptions]=\"ptOptions\"\n      [dt]=\"dt\"\n      [unstyled]=\"unstyled\"\n      (onInput)=\"handleInput($event)\"\n      (onFocus)=\"handleFocus($event)\"\n      (onBlur)=\"handleBlur($event)\"\n      (onKeyDown)=\"handleKeyDown($event)\"\n      (onClear)=\"handleClear()\"\n    />\n  }\n  @if (effectiveHint) {\n    <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n  }\n  @if (showRequired || serverErrors) {\n    <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n      @if (showRequired) {\n        <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n      }\n      @if (serverErrors; as errors) {\n        @for (error of errors; track error) {\n          <small class=\"text-danger block\">{{ error }}</small>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block;width:100%}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}:host(.ef-inputnumber-small) ::ng-deep .p-inputnumber-input{font-size:.875rem;padding:.375rem .5rem}:host(.ef-inputnumber-large) ::ng-deep .p-inputnumber-input{font-size:1.125rem;padding:.75rem 1rem}:host(.ng-invalid.ng-touched) ::ng-deep .p-inputnumber-input,:host(.ng-invalid.ng-dirty) ::ng-deep .p-inputnumber-input{border-color:var(--red-500, #ef4444)}:host(.ng-invalid.ng-touched) ::ng-deep .p-inputnumber-input:focus,:host(.ng-invalid.ng-dirty) ::ng-deep .p-inputnumber-input:focus{box-shadow:0 0 0 .2rem #ef444440}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputNumber: [{
                 type: ViewChild,
                 args: ['inputNumber', { static: false }]
@@ -3194,7 +3441,7 @@ class EfButtonComponent {
      * `'base'` maps to `null` rather than being forwarded verbatim.
      */
     get pnSize() {
-        return this.size === 'base' ? null : this.size;
+        return this.size === 'base' ? undefined : this.size;
     }
     /** Composed class string for the Comptoir variant —
      *  `btn btn-{severity} btn-sm` plus any caller-supplied `styleClass`. */
@@ -3821,11 +4068,11 @@ class EfDialogComponent {
         this.saveAction.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfDialogComponent, isStandalone: true, selector: "ef-dialog", inputs: { header: "header", headerKey: "headerKey", subtitle: "subtitle", subtitleKey: "subtitleKey", visible: ["visible", "visible", booleanAttribute], modal: ["modal", "modal", booleanAttribute], closable: ["closable", "closable", booleanAttribute], draggable: ["draggable", "draggable", booleanAttribute], resizable: ["resizable", "resizable", booleanAttribute], dismissableMask: ["dismissableMask", "dismissableMask", booleanAttribute], closeOnEscape: ["closeOnEscape", "closeOnEscape", booleanAttribute], severity: "severity", icon: "icon", size: "size", style: "style", styleClass: "styleClass", position: "position", appendTo: "appendTo", variant: "variant", actions: "actions", defaultActions: ["defaultActions", "defaultActions", booleanAttribute], saveLabelKey: "saveLabelKey", cancelLabelKey: "cancelLabelKey", saveLabel: "saveLabel", cancelLabel: "cancelLabel", saveIcon: "saveIcon", cancelIcon: "cancelIcon", saveDisabled: ["saveDisabled", "saveDisabled", booleanAttribute], saveStyleClass: "saveStyleClass", cancelStyleClass: "cancelStyleClass", saveSeverity: "saveSeverity", cancelSeverity: "cancelSeverity" }, outputs: { visibleChange: "visibleChange", showEvent: "showEvent", hideEvent: "hideEvent", saveAction: "saveAction", cancelAction: "cancelAction", actionClick: "actionClick" }, viewQueries: [{ propertyName: "defaultFooterTpl", first: true, predicate: ["defaultFooter"], descendants: true, static: true }, { propertyName: "dialog", first: true, predicate: Dialog, descendants: true }], ngImport: i0, template: "<p-dialog\n  [visible]=\"visible\"\n  (visibleChange)=\"handleVisibleChange($event)\"\n  [modal]=\"modal\"\n  [draggable]=\"draggable\"\n  [resizable]=\"resizable\"\n  [dismissableMask]=\"dismissableMask\"\n  [closeOnEscape]=\"closeOnEscape\"\n  [focusOnShow]=\"!hasAutofocusAction\"\n  [style]=\"style\"\n  [styleClass]=\"effectiveStyleClass\"\n  [position]=\"position\"\n  [appendTo]=\"appendTo\"\n  [header]=\"variant === 'primeng' ? effectiveTitle : null\"\n  [closable]=\"variant === 'primeng' ? closable : false\"\n  [footerTemplate]=\"variant === 'primeng' && !useDynamicActions && defaultActions ? defaultFooterTpl : null\"\n  (onShow)=\"handleShow()\"\n  (onHide)=\"handleHide()\"\n>\n  <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 COMPTOIR HEADER (content-child #header) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Replaces PrimeNG's default header strip with our icon + title\n       + subtitle + close X structure. Skipped in 'primeng' variant\n       (which uses the [header] string input + native close). -->\n  @if (variant === 'comptoir') {\n    <!-- PrimeNG points the dialog's aria-labelledby at an id it passes to\n         this template; the title takes it, so the dialog is named. -->\n    <ng-template #header let-labelledBy=\"ariaLabelledBy\">\n      @if (effectiveIcon) {\n        <span class=\"es-dialog__icon\" aria-hidden=\"true\">\n          <i [class]=\"effectiveIcon\"></i>\n        </span>\n      }\n      <div class=\"es-dialog__title-block\">\n        <div class=\"es-dialog__title\" [attr.id]=\"labelledBy\">{{ effectiveTitle }}</div>\n        @if (effectiveSubtitle) {\n          <div class=\"es-dialog__sub\">{{ effectiveSubtitle }}</div>\n        }\n      </div>\n      @if (closable) {\n        <button\n          type=\"button\"\n          class=\"es-dialog__close\"\n          [attr.aria-label]=\"'common_close' | translate\"\n          (click)=\"handleVisibleChange(false)\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      }\n    </ng-template>\n  }\n\n  <!-- Body \u2014 projected from <ef-dialog>\u2026</ef-dialog> -->\n  <ng-content />\n\n  <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 COMPTOIR FOOTER (content-child #footer) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Dynamic [actions] path takes precedence; falls back to the\n       backward-compat save+cancel pair when defaultActions is on. -->\n  @if (variant === 'comptoir' && hasFooter) {\n    <ng-template #footer>\n      @if (useDynamicActions) {\n        @for (a of actions; track $index) {\n          <button\n            type=\"button\"\n            [class]=\"actionClass(a)\"\n            [disabled]=\"a.disabled || a.loading\"\n            [attr.data-ef-autofocus]=\"a.autofocus ? '' : null\"\n            (click)=\"handleActionClick(a, $index)\"\n          >\n            @if (a.icon) {\n              <i [class]=\"a.icon\"></i>\n            }\n            {{ actionLabel(a) }}\n          </button>\n        }\n      } @else {\n        <ef-button\n          variant=\"comptoir\"\n          [severity]=\"cancelSeverity\"\n          [labelKey]=\"cancelLabelKey\"\n          [label]=\"cancelLabel\"\n          [icon]=\"cancelIcon\"\n          [styleClass]=\"cancelStyleClass\"\n          (clickEvent)=\"onDefaultCancel()\"\n        />\n        <ef-button\n          variant=\"comptoir\"\n          [severity]=\"saveSeverity\"\n          [labelKey]=\"saveLabelKey\"\n          [label]=\"saveLabel\"\n          [icon]=\"saveIcon\"\n          [styleClass]=\"saveStyleClass\"\n          [disabled]=\"saveDisabled\"\n          (clickEvent)=\"onDefaultSave()\"\n        />\n      }\n    </ng-template>\n  }\n</p-dialog>\n\n<!-- Default-action footer template for the 'primeng' variant (legacy path).\n     Declared outside <p-dialog> because the comptoir branch above already\n     provides its own content-child footer; this template is only consumed\n     when variant === 'primeng' via [footerTemplate] input binding. -->\n<ng-template #defaultFooter>\n  <ef-button\n    variant=\"primeng\"\n    [severity]=\"cancelSeverity\"\n    [labelKey]=\"cancelLabelKey\"\n    [label]=\"cancelLabel\"\n    [icon]=\"cancelIcon\"\n    [styleClass]=\"cancelStyleClass\"\n    (clickEvent)=\"onDefaultCancel()\"\n  />\n  <ef-button\n    variant=\"primeng\"\n    [severity]=\"saveSeverity\"\n    [labelKey]=\"saveLabelKey\"\n    [label]=\"saveLabel\"\n    [icon]=\"saveIcon\"\n    [styleClass]=\"saveStyleClass\"\n    [disabled]=\"saveDisabled\"\n    (clickEvent)=\"onDefaultSave()\"\n  />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$6.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "ariaLabelKey", "variant", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition", "autofocus"], outputs: ["clickEvent"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfDialogComponent, isStandalone: true, selector: "ef-dialog", inputs: { header: "header", headerKey: "headerKey", subtitle: "subtitle", subtitleKey: "subtitleKey", visible: ["visible", "visible", booleanAttribute], modal: ["modal", "modal", booleanAttribute], closable: ["closable", "closable", booleanAttribute], draggable: ["draggable", "draggable", booleanAttribute], resizable: ["resizable", "resizable", booleanAttribute], dismissableMask: ["dismissableMask", "dismissableMask", booleanAttribute], closeOnEscape: ["closeOnEscape", "closeOnEscape", booleanAttribute], severity: "severity", icon: "icon", size: "size", style: "style", styleClass: "styleClass", position: "position", appendTo: "appendTo", variant: "variant", actions: "actions", defaultActions: ["defaultActions", "defaultActions", booleanAttribute], saveLabelKey: "saveLabelKey", cancelLabelKey: "cancelLabelKey", saveLabel: "saveLabel", cancelLabel: "cancelLabel", saveIcon: "saveIcon", cancelIcon: "cancelIcon", saveDisabled: ["saveDisabled", "saveDisabled", booleanAttribute], saveStyleClass: "saveStyleClass", cancelStyleClass: "cancelStyleClass", saveSeverity: "saveSeverity", cancelSeverity: "cancelSeverity" }, outputs: { visibleChange: "visibleChange", showEvent: "showEvent", hideEvent: "hideEvent", saveAction: "saveAction", cancelAction: "cancelAction", actionClick: "actionClick" }, viewQueries: [{ propertyName: "defaultFooterTpl", first: true, predicate: ["defaultFooter"], descendants: true, static: true }, { propertyName: "dialog", first: true, predicate: Dialog, descendants: true }], ngImport: i0, template: "<p-dialog\n  [visible]=\"visible\"\n  (visibleChange)=\"handleVisibleChange($event)\"\n  [modal]=\"modal\"\n  [draggable]=\"draggable\"\n  [resizable]=\"resizable\"\n  [dismissableMask]=\"dismissableMask\"\n  [closeOnEscape]=\"closeOnEscape\"\n  [focusOnShow]=\"!hasAutofocusAction\"\n  [style]=\"style\"\n  [styleClass]=\"effectiveStyleClass\"\n  [position]=\"position\"\n  [appendTo]=\"appendTo\"\n  [header]=\"variant === 'primeng' ? effectiveTitle : undefined\"\n  [closable]=\"variant === 'primeng' ? closable : false\"\n  [footerTemplate]=\"variant === 'primeng' && !useDynamicActions && defaultActions ? defaultFooterTpl : undefined\"\n  (onShow)=\"handleShow()\"\n  (onHide)=\"handleHide()\"\n>\n  <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 COMPTOIR HEADER (content-child #header) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Replaces PrimeNG's default header strip with our icon + title\n       + subtitle + close X structure. Skipped in 'primeng' variant\n       (which uses the [header] string input + native close). -->\n  @if (variant === 'comptoir') {\n    <!-- PrimeNG points the dialog's aria-labelledby at an id it passes to\n         this template; the title takes it, so the dialog is named. -->\n    <ng-template #header let-labelledBy=\"ariaLabelledBy\">\n      @if (effectiveIcon) {\n        <span class=\"es-dialog__icon\" aria-hidden=\"true\">\n          <i [class]=\"effectiveIcon\"></i>\n        </span>\n      }\n      <div class=\"es-dialog__title-block\">\n        <div class=\"es-dialog__title\" [attr.id]=\"labelledBy\">{{ effectiveTitle }}</div>\n        @if (effectiveSubtitle) {\n          <div class=\"es-dialog__sub\">{{ effectiveSubtitle }}</div>\n        }\n      </div>\n      @if (closable) {\n        <button\n          type=\"button\"\n          class=\"es-dialog__close\"\n          [attr.aria-label]=\"'common_close' | translate\"\n          (click)=\"handleVisibleChange(false)\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      }\n    </ng-template>\n  }\n\n  <!-- Body \u2014 projected from <ef-dialog>\u2026</ef-dialog> -->\n  <ng-content />\n\n  <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 COMPTOIR FOOTER (content-child #footer) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Dynamic [actions] path takes precedence; falls back to the\n       backward-compat save+cancel pair when defaultActions is on. -->\n  @if (variant === 'comptoir' && hasFooter) {\n    <ng-template #footer>\n      @if (useDynamicActions) {\n        @for (a of actions; track $index) {\n          <button\n            type=\"button\"\n            [class]=\"actionClass(a)\"\n            [disabled]=\"a.disabled || a.loading\"\n            [attr.data-ef-autofocus]=\"a.autofocus ? '' : null\"\n            (click)=\"handleActionClick(a, $index)\"\n          >\n            @if (a.icon) {\n              <i [class]=\"a.icon\"></i>\n            }\n            {{ actionLabel(a) }}\n          </button>\n        }\n      } @else {\n        <ef-button\n          variant=\"comptoir\"\n          [severity]=\"cancelSeverity\"\n          [labelKey]=\"cancelLabelKey\"\n          [label]=\"cancelLabel\"\n          [icon]=\"cancelIcon\"\n          [styleClass]=\"cancelStyleClass\"\n          (clickEvent)=\"onDefaultCancel()\"\n        />\n        <ef-button\n          variant=\"comptoir\"\n          [severity]=\"saveSeverity\"\n          [labelKey]=\"saveLabelKey\"\n          [label]=\"saveLabel\"\n          [icon]=\"saveIcon\"\n          [styleClass]=\"saveStyleClass\"\n          [disabled]=\"saveDisabled\"\n          (clickEvent)=\"onDefaultSave()\"\n        />\n      }\n    </ng-template>\n  }\n</p-dialog>\n\n<!-- Default-action footer template for the 'primeng' variant (legacy path).\n     Declared outside <p-dialog> because the comptoir branch above already\n     provides its own content-child footer; this template is only consumed\n     when variant === 'primeng' via [footerTemplate] input binding. -->\n<ng-template #defaultFooter>\n  <ef-button\n    variant=\"primeng\"\n    [severity]=\"cancelSeverity\"\n    [labelKey]=\"cancelLabelKey\"\n    [label]=\"cancelLabel\"\n    [icon]=\"cancelIcon\"\n    [styleClass]=\"cancelStyleClass\"\n    (clickEvent)=\"onDefaultCancel()\"\n  />\n  <ef-button\n    variant=\"primeng\"\n    [severity]=\"saveSeverity\"\n    [labelKey]=\"saveLabelKey\"\n    [label]=\"saveLabel\"\n    [icon]=\"saveIcon\"\n    [styleClass]=\"saveStyleClass\"\n    [disabled]=\"saveDisabled\"\n    (clickEvent)=\"onDefaultSave()\"\n  />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$6.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "ariaLabelKey", "variant", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition", "autofocus"], outputs: ["clickEvent"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-dialog', standalone: true, imports: [CommonModule, DialogModule, TranslateModule, EfButtonComponent], template: "<p-dialog\n  [visible]=\"visible\"\n  (visibleChange)=\"handleVisibleChange($event)\"\n  [modal]=\"modal\"\n  [draggable]=\"draggable\"\n  [resizable]=\"resizable\"\n  [dismissableMask]=\"dismissableMask\"\n  [closeOnEscape]=\"closeOnEscape\"\n  [focusOnShow]=\"!hasAutofocusAction\"\n  [style]=\"style\"\n  [styleClass]=\"effectiveStyleClass\"\n  [position]=\"position\"\n  [appendTo]=\"appendTo\"\n  [header]=\"variant === 'primeng' ? effectiveTitle : null\"\n  [closable]=\"variant === 'primeng' ? closable : false\"\n  [footerTemplate]=\"variant === 'primeng' && !useDynamicActions && defaultActions ? defaultFooterTpl : null\"\n  (onShow)=\"handleShow()\"\n  (onHide)=\"handleHide()\"\n>\n  <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 COMPTOIR HEADER (content-child #header) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Replaces PrimeNG's default header strip with our icon + title\n       + subtitle + close X structure. Skipped in 'primeng' variant\n       (which uses the [header] string input + native close). -->\n  @if (variant === 'comptoir') {\n    <!-- PrimeNG points the dialog's aria-labelledby at an id it passes to\n         this template; the title takes it, so the dialog is named. -->\n    <ng-template #header let-labelledBy=\"ariaLabelledBy\">\n      @if (effectiveIcon) {\n        <span class=\"es-dialog__icon\" aria-hidden=\"true\">\n          <i [class]=\"effectiveIcon\"></i>\n        </span>\n      }\n      <div class=\"es-dialog__title-block\">\n        <div class=\"es-dialog__title\" [attr.id]=\"labelledBy\">{{ effectiveTitle }}</div>\n        @if (effectiveSubtitle) {\n          <div class=\"es-dialog__sub\">{{ effectiveSubtitle }}</div>\n        }\n      </div>\n      @if (closable) {\n        <button\n          type=\"button\"\n          class=\"es-dialog__close\"\n          [attr.aria-label]=\"'common_close' | translate\"\n          (click)=\"handleVisibleChange(false)\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      }\n    </ng-template>\n  }\n\n  <!-- Body \u2014 projected from <ef-dialog>\u2026</ef-dialog> -->\n  <ng-content />\n\n  <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 COMPTOIR FOOTER (content-child #footer) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Dynamic [actions] path takes precedence; falls back to the\n       backward-compat save+cancel pair when defaultActions is on. -->\n  @if (variant === 'comptoir' && hasFooter) {\n    <ng-template #footer>\n      @if (useDynamicActions) {\n        @for (a of actions; track $index) {\n          <button\n            type=\"button\"\n            [class]=\"actionClass(a)\"\n            [disabled]=\"a.disabled || a.loading\"\n            [attr.data-ef-autofocus]=\"a.autofocus ? '' : null\"\n            (click)=\"handleActionClick(a, $index)\"\n          >\n            @if (a.icon) {\n              <i [class]=\"a.icon\"></i>\n            }\n            {{ actionLabel(a) }}\n          </button>\n        }\n      } @else {\n        <ef-button\n          variant=\"comptoir\"\n          [severity]=\"cancelSeverity\"\n          [labelKey]=\"cancelLabelKey\"\n          [label]=\"cancelLabel\"\n          [icon]=\"cancelIcon\"\n          [styleClass]=\"cancelStyleClass\"\n          (clickEvent)=\"onDefaultCancel()\"\n        />\n        <ef-button\n          variant=\"comptoir\"\n          [severity]=\"saveSeverity\"\n          [labelKey]=\"saveLabelKey\"\n          [label]=\"saveLabel\"\n          [icon]=\"saveIcon\"\n          [styleClass]=\"saveStyleClass\"\n          [disabled]=\"saveDisabled\"\n          (clickEvent)=\"onDefaultSave()\"\n        />\n      }\n    </ng-template>\n  }\n</p-dialog>\n\n<!-- Default-action footer template for the 'primeng' variant (legacy path).\n     Declared outside <p-dialog> because the comptoir branch above already\n     provides its own content-child footer; this template is only consumed\n     when variant === 'primeng' via [footerTemplate] input binding. -->\n<ng-template #defaultFooter>\n  <ef-button\n    variant=\"primeng\"\n    [severity]=\"cancelSeverity\"\n    [labelKey]=\"cancelLabelKey\"\n    [label]=\"cancelLabel\"\n    [icon]=\"cancelIcon\"\n    [styleClass]=\"cancelStyleClass\"\n    (clickEvent)=\"onDefaultCancel()\"\n  />\n  <ef-button\n    variant=\"primeng\"\n    [severity]=\"saveSeverity\"\n    [labelKey]=\"saveLabelKey\"\n    [label]=\"saveLabel\"\n    [icon]=\"saveIcon\"\n    [styleClass]=\"saveStyleClass\"\n    [disabled]=\"saveDisabled\"\n    (clickEvent)=\"onDefaultSave()\"\n  />\n</ng-template>\n" }]
+            args: [{ selector: 'ef-dialog', standalone: true, imports: [CommonModule, DialogModule, TranslateModule, EfButtonComponent], template: "<p-dialog\n  [visible]=\"visible\"\n  (visibleChange)=\"handleVisibleChange($event)\"\n  [modal]=\"modal\"\n  [draggable]=\"draggable\"\n  [resizable]=\"resizable\"\n  [dismissableMask]=\"dismissableMask\"\n  [closeOnEscape]=\"closeOnEscape\"\n  [focusOnShow]=\"!hasAutofocusAction\"\n  [style]=\"style\"\n  [styleClass]=\"effectiveStyleClass\"\n  [position]=\"position\"\n  [appendTo]=\"appendTo\"\n  [header]=\"variant === 'primeng' ? effectiveTitle : undefined\"\n  [closable]=\"variant === 'primeng' ? closable : false\"\n  [footerTemplate]=\"variant === 'primeng' && !useDynamicActions && defaultActions ? defaultFooterTpl : undefined\"\n  (onShow)=\"handleShow()\"\n  (onHide)=\"handleHide()\"\n>\n  <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 COMPTOIR HEADER (content-child #header) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Replaces PrimeNG's default header strip with our icon + title\n       + subtitle + close X structure. Skipped in 'primeng' variant\n       (which uses the [header] string input + native close). -->\n  @if (variant === 'comptoir') {\n    <!-- PrimeNG points the dialog's aria-labelledby at an id it passes to\n         this template; the title takes it, so the dialog is named. -->\n    <ng-template #header let-labelledBy=\"ariaLabelledBy\">\n      @if (effectiveIcon) {\n        <span class=\"es-dialog__icon\" aria-hidden=\"true\">\n          <i [class]=\"effectiveIcon\"></i>\n        </span>\n      }\n      <div class=\"es-dialog__title-block\">\n        <div class=\"es-dialog__title\" [attr.id]=\"labelledBy\">{{ effectiveTitle }}</div>\n        @if (effectiveSubtitle) {\n          <div class=\"es-dialog__sub\">{{ effectiveSubtitle }}</div>\n        }\n      </div>\n      @if (closable) {\n        <button\n          type=\"button\"\n          class=\"es-dialog__close\"\n          [attr.aria-label]=\"'common_close' | translate\"\n          (click)=\"handleVisibleChange(false)\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      }\n    </ng-template>\n  }\n\n  <!-- Body \u2014 projected from <ef-dialog>\u2026</ef-dialog> -->\n  <ng-content />\n\n  <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 COMPTOIR FOOTER (content-child #footer) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Dynamic [actions] path takes precedence; falls back to the\n       backward-compat save+cancel pair when defaultActions is on. -->\n  @if (variant === 'comptoir' && hasFooter) {\n    <ng-template #footer>\n      @if (useDynamicActions) {\n        @for (a of actions; track $index) {\n          <button\n            type=\"button\"\n            [class]=\"actionClass(a)\"\n            [disabled]=\"a.disabled || a.loading\"\n            [attr.data-ef-autofocus]=\"a.autofocus ? '' : null\"\n            (click)=\"handleActionClick(a, $index)\"\n          >\n            @if (a.icon) {\n              <i [class]=\"a.icon\"></i>\n            }\n            {{ actionLabel(a) }}\n          </button>\n        }\n      } @else {\n        <ef-button\n          variant=\"comptoir\"\n          [severity]=\"cancelSeverity\"\n          [labelKey]=\"cancelLabelKey\"\n          [label]=\"cancelLabel\"\n          [icon]=\"cancelIcon\"\n          [styleClass]=\"cancelStyleClass\"\n          (clickEvent)=\"onDefaultCancel()\"\n        />\n        <ef-button\n          variant=\"comptoir\"\n          [severity]=\"saveSeverity\"\n          [labelKey]=\"saveLabelKey\"\n          [label]=\"saveLabel\"\n          [icon]=\"saveIcon\"\n          [styleClass]=\"saveStyleClass\"\n          [disabled]=\"saveDisabled\"\n          (clickEvent)=\"onDefaultSave()\"\n        />\n      }\n    </ng-template>\n  }\n</p-dialog>\n\n<!-- Default-action footer template for the 'primeng' variant (legacy path).\n     Declared outside <p-dialog> because the comptoir branch above already\n     provides its own content-child footer; this template is only consumed\n     when variant === 'primeng' via [footerTemplate] input binding. -->\n<ng-template #defaultFooter>\n  <ef-button\n    variant=\"primeng\"\n    [severity]=\"cancelSeverity\"\n    [labelKey]=\"cancelLabelKey\"\n    [label]=\"cancelLabel\"\n    [icon]=\"cancelIcon\"\n    [styleClass]=\"cancelStyleClass\"\n    (clickEvent)=\"onDefaultCancel()\"\n  />\n  <ef-button\n    variant=\"primeng\"\n    [severity]=\"saveSeverity\"\n    [labelKey]=\"saveLabelKey\"\n    [label]=\"saveLabel\"\n    [icon]=\"saveIcon\"\n    [styleClass]=\"saveStyleClass\"\n    [disabled]=\"saveDisabled\"\n    (clickEvent)=\"onDefaultSave()\"\n  />\n</ng-template>\n" }]
         }], propDecorators: { header: [{
                 type: Input
             }], headerKey: [{
@@ -3940,6 +4187,19 @@ const DEFAULT_META = { cls: 'op-default' };
  * ```html
  * <ef-change-history [entries]="auditEntries()" />
  * ```
+ *
+ * Values are shown raw by default (`Received → Confirmed`). To show a field's
+ * values translated, pass `valueLists`: a map of field path to the
+ * `{ code, label }` items of a reference list. Each old/new value that matches
+ * an item `code` (case-insensitive) is shown as its `label` (translated when
+ * the label is an i18n key); anything unmatched stays raw. The reserved key
+ * `status` maps the `fromStatus` / `toStatus` of status-change entries.
+ * On a V2 detail screen, `AbstractDetailScreenV2.auditValueLists()` builds this
+ * map from `ScreenConfig.AUDIT_VALUE_LISTS`.
+ *
+ * ```html
+ * <ef-change-history [entries]="auditEntries()" [valueLists]="auditValueLists()" />
+ * ```
  */
 class EfChangeHistoryComponent {
     translate = inject(TranslateService);
@@ -3955,6 +4215,14 @@ class EfChangeHistoryComponent {
     collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
     /** Initial collapsed state — expanded by default. */
     startCollapsed = input(false, ...(ngDevMode ? [{ debugName: "startCollapsed" }] : /* istanbul ignore next */ []));
+    /** Optional field path to reference items, used to show a field's raw
+     *  old/new values as translated labels. Unmapped fields and unmatched
+     *  values stay raw. Key `status` covers `fromStatus` / `toStatus`. */
+    valueLists = input(null, ...(ngDevMode ? [{ debugName: "valueLists" }] : /* istanbul ignore next */ []));
+    /** Optional formatter for an entry's free-text note. Return the text to show,
+     *  or null to keep the raw note. Rendered as plain text (never HTML). A
+     *  screen uses it to translate coded notes such as `order_email_resent:order_confirmed`. */
+    noteFormatter = input(null, ...(ngDevMode ? [{ debugName: "noteFormatter" }] : /* istanbul ignore next */ []));
     /** "Show more" dialog visibility. */
     dialogVisible = signal(false, ...(ngDevMode ? [{ debugName: "dialogVisible" }] : /* istanbul ignore next */ []));
     /** First `previewLimit` rows shown inline in the card. */
@@ -3993,6 +4261,30 @@ class EfChangeHistoryComponent {
         const key = `audit_field_${field.replace(/\./g, '_')}`;
         return this.resolveLabel(key, field);
     }
+    /** The note as shown: the formatter's text, else the raw note. */
+    noteText(note) {
+        if (!note)
+            return '';
+        const fn = this.noteFormatter();
+        if (!fn)
+            return note;
+        return fn(note) ?? note;
+    }
+    /** Display value for a field's raw value: the matching list item's label
+     *  (translated when it is an i18n key), else the raw value. */
+    valueLabel(field, value) {
+        if (value == null || value === '')
+            return '';
+        const items = field ? this.valueLists()?.[field] : undefined;
+        if (!items?.length)
+            return value;
+        const needle = String(value).toLowerCase();
+        const hit = items.find((i) => String(i.code).toLowerCase() === needle);
+        if (!hit?.label)
+            return value;
+        const translated = this.translate.instant(hit.label);
+        return translated || hit.label;
+    }
     /** Returns the translation when present, otherwise a humanized fallback of
      *  the source token (ngx-translate echoes the key on a miss). */
     resolveLabel(key, source) {
@@ -4020,7 +4312,7 @@ class EfChangeHistoryComponent {
         return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfChangeHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfChangeHistoryComponent, isStandalone: true, selector: "ef-change-history", inputs: { entries: { classPropertyName: "entries", publicName: "entries", isSignal: true, isRequired: false, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, emptyKey: { classPropertyName: "emptyKey", publicName: "emptyKey", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, previewLimit: { classPropertyName: "previewLimit", publicName: "previewLimit", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, startCollapsed: { classPropertyName: "startCollapsed", publicName: "startCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ef-card\n    [titleKey]=\"titleKey()\"\n    [collapsible]=\"collapsible()\"\n    [collapsed]=\"startCollapsed()\"\n>\n    <ng-container head-extra>\n        @if (hasMore()) {\n            <ef-button\n                variant=\"comptoir\"\n                severity=\"ghost\"\n                size=\"small\"\n                icon=\"pi pi-window-maximize\"\n                tooltipKey=\"audit_view_all\"\n                (clickEvent)=\"openDialog($event)\"\n            />\n        }\n    </ng-container>\n\n    <ng-container\n        *ngTemplateOutlet=\"timeline; context: { $implicit: previewRows(), compact: true }\"\n    ></ng-container>\n\n    @if (hasMore()) {\n        <button type=\"button\" class=\"ch-more\" (click)=\"openDialog()\">\n            {{ 'audit_view_all' | translate }} ({{ rows().length }})\n        </button>\n    }\n</ef-card>\n\n<!-- \"Show more\" dialog \u2014 full timeline, roomy + scrollable -->\n<ef-dialog\n    [visible]=\"dialogVisible()\"\n    (visibleChange)=\"dialogVisible.set($event)\"\n    [headerKey]=\"titleKey()\"\n    [defaultActions]=\"false\"\n    size=\"lg\"\n    [modal]=\"true\"\n    position=\"center\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"timeline; context: { $implicit: rows(), compact: false }\"\n    ></ng-container>\n</ef-dialog>\n\n<ng-template #timeline let-items let-compact=\"compact\">\n    @if (items.length === 0) {\n        <p class=\"text-mute small\">{{ emptyKey() | translate }}</p>\n    } @else {\n        <div class=\"timeline\" [class.timeline--compact]=\"compact\">\n            @for (row of items; track $index) {\n                <div class=\"item\">\n                    <span class=\"dot\" [class]=\"row.meta.cls\" aria-hidden=\"true\"></span>\n                    <div class=\"body\">\n                        <div class=\"label\">{{ row.operationLabel }}</div>\n                        <div class=\"meta\">\n                            @if (row.entry.userName) {\n                                <span class=\"strong\">{{ row.entry.userName }}</span> \u00B7\n                            }\n                            {{ formatWhen(row.entry.occurredAt) }}\n                        </div>\n\n                        @if (row.entry.operation === 'status_changed' && (row.entry.fromStatus || row.entry.toStatus)) {\n                            <div class=\"ch-status small\">\n                                <span class=\"text-mute\">{{ row.entry.fromStatus || '\u2014' }}</span>\n                                <i class=\"pi pi-arrow-right\"></i>\n                                <span class=\"strong\">{{ row.entry.toStatus || '\u2014' }}</span>\n                            </div>\n                        }\n\n                        @if (row.entry.changes?.length) {\n                            <ul class=\"ch-changes small\">\n                                @for (c of row.entry.changes; track c.field) {\n                                    <li>\n                                        <span class=\"ch-field\">{{ fieldLabel(c.field) }}</span>\n                                        <span class=\"text-mute\">{{ c.oldValue || '\u2014' }}</span>\n                                        <i class=\"pi pi-arrow-right\"></i>\n                                        <span class=\"strong\">{{ c.newValue || '\u2014' }}</span>\n                                    </li>\n                                }\n                            </ul>\n                        }\n\n                        @if (row.entry.note) {\n                            <div class=\"ch-note small\">{{ row.entry.note }}</div>\n                        }\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [":host{display:block}.dot.op-created{background:var(--st-delivered-fg, #16a34a);border-color:var(--st-delivered-fg, #16a34a)}.dot.op-updated{background:#2563eb;border-color:#2563eb}.dot.op-status{background:#f59e0b;border-color:#f59e0b}.dot.op-deleted{background:#dc2626;border-color:#dc2626}.dot.op-note{background:#64748b;border-color:#64748b}.dot.op-default{background:var(--ink-300, #94a3b8);border-color:var(--ink-300, #94a3b8)}.ch-status{display:flex;align-items:center;gap:6px;margin-top:4px}.item .body{min-width:0}.ch-changes{list-style:none;padding:0;margin:4px 0 0}.ch-changes li{display:flex;align-items:center;gap:6px;padding:1px 0;min-width:0}.ch-field{font-weight:600;min-width:120px}.timeline--compact .ch-changes .ch-field{flex:0 0 auto}.timeline--compact .ch-changes .text-mute,.timeline--compact .ch-changes .strong{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.timeline:not(.timeline--compact) .ch-changes li{flex-wrap:wrap}.timeline:not(.timeline--compact) .ch-changes .text-mute,.timeline:not(.timeline--compact) .ch-changes .strong{overflow-wrap:anywhere}.ch-changes .pi,.ch-status .pi{font-size:10px;opacity:.6}.ch-note{margin-top:4px;padding-left:8px;border-left:2px solid var(--rule-soft, #e2e8f0);color:var(--ink-600, #475569)}.ch-more{margin-top:8px;border:0;background:transparent;cursor:pointer;padding:2px 0;font-size:12px;font-weight:600;color:var(--module, #2563eb)}.ch-more:hover{text-decoration:underline}:host-context([dir=rtl]) .ch-changes .pi-arrow-right,:host-context([dir=rtl]) .ch-status .pi-arrow-right{transform:scaleX(-1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { 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: EfDialogComponent, selector: "ef-dialog", inputs: ["header", "headerKey", "subtitle", "subtitleKey", "visible", "modal", "closable", "draggable", "resizable", "dismissableMask", "closeOnEscape", "severity", "icon", "size", "style", "styleClass", "position", "appendTo", "variant", "actions", "defaultActions", "saveLabelKey", "cancelLabelKey", "saveLabel", "cancelLabel", "saveIcon", "cancelIcon", "saveDisabled", "saveStyleClass", "cancelStyleClass", "saveSeverity", "cancelSeverity"], outputs: ["visibleChange", "showEvent", "hideEvent", "saveAction", "cancelAction", "actionClick"] }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "ariaLabelKey", "variant", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition", "autofocus"], outputs: ["clickEvent"] }, { 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: EfChangeHistoryComponent, isStandalone: true, selector: "ef-change-history", inputs: { entries: { classPropertyName: "entries", publicName: "entries", isSignal: true, isRequired: false, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, emptyKey: { classPropertyName: "emptyKey", publicName: "emptyKey", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, previewLimit: { classPropertyName: "previewLimit", publicName: "previewLimit", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, startCollapsed: { classPropertyName: "startCollapsed", publicName: "startCollapsed", isSignal: true, isRequired: false, transformFunction: null }, valueLists: { classPropertyName: "valueLists", publicName: "valueLists", isSignal: true, isRequired: false, transformFunction: null }, noteFormatter: { classPropertyName: "noteFormatter", publicName: "noteFormatter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ef-card\n    [titleKey]=\"titleKey()\"\n    [collapsible]=\"collapsible()\"\n    [collapsed]=\"startCollapsed()\"\n>\n    <ng-container head-extra>\n        @if (hasMore()) {\n            <ef-button\n                variant=\"comptoir\"\n                severity=\"ghost\"\n                size=\"small\"\n                icon=\"pi pi-window-maximize\"\n                tooltipKey=\"audit_view_all\"\n                (clickEvent)=\"openDialog($event)\"\n            />\n        }\n    </ng-container>\n\n    <ng-container\n        *ngTemplateOutlet=\"timeline; context: { $implicit: previewRows(), compact: true }\"\n    ></ng-container>\n\n    @if (hasMore()) {\n        <button type=\"button\" class=\"ch-more\" (click)=\"openDialog()\">\n            {{ 'audit_view_all' | translate }} ({{ rows().length }})\n        </button>\n    }\n</ef-card>\n\n<!-- \"Show more\" dialog \u2014 full timeline, roomy + scrollable -->\n<ef-dialog\n    [visible]=\"dialogVisible()\"\n    (visibleChange)=\"dialogVisible.set($event)\"\n    [headerKey]=\"titleKey()\"\n    [defaultActions]=\"false\"\n    size=\"lg\"\n    [modal]=\"true\"\n    position=\"center\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"timeline; context: { $implicit: rows(), compact: false }\"\n    ></ng-container>\n</ef-dialog>\n\n<ng-template #timeline let-items let-compact=\"compact\">\n    @if (items.length === 0) {\n        <p class=\"text-mute small\">{{ emptyKey() | translate }}</p>\n    } @else {\n        <div class=\"timeline\" [class.timeline--compact]=\"compact\">\n            @for (row of items; track $index) {\n                <div class=\"item\">\n                    <span class=\"dot\" [class]=\"row.meta.cls\" aria-hidden=\"true\"></span>\n                    <div class=\"body\">\n                        <div class=\"label\">{{ row.operationLabel }}</div>\n                        <div class=\"meta\">\n                            @if (row.entry.userName) {\n                                <span class=\"strong\">{{ row.entry.userName }}</span> \u00B7\n                            }\n                            {{ formatWhen(row.entry.occurredAt) }}\n                        </div>\n\n                        @if (row.entry.operation === 'status_changed' && (row.entry.fromStatus || row.entry.toStatus)) {\n                            <div class=\"ch-status small\">\n                                <span class=\"text-mute\" dir=\"auto\">{{ valueLabel('status', row.entry.fromStatus) || '\u2014' }}</span>\n                                <i class=\"pi pi-arrow-right\"></i>\n                                <span class=\"strong\" dir=\"auto\">{{ valueLabel('status', row.entry.toStatus) || '\u2014' }}</span>\n                            </div>\n                        }\n\n                        @if (row.entry.changes?.length) {\n                            <ul class=\"ch-changes small\">\n                                @for (c of row.entry.changes; track c.field) {\n                                    <li>\n                                        <span class=\"ch-field\">{{ fieldLabel(c.field) }}</span>\n                                        <span class=\"text-mute\" dir=\"auto\">{{ valueLabel(c.field, c.oldValue) || '\u2014' }}</span>\n                                        <i class=\"pi pi-arrow-right\"></i>\n                                        <span class=\"strong\" dir=\"auto\">{{ valueLabel(c.field, c.newValue) || '\u2014' }}</span>\n                                    </li>\n                                }\n                            </ul>\n                        }\n\n                        @if (row.entry.note) {\n                            <div class=\"ch-note small\">{{ noteText(row.entry.note) }}</div>\n                        }\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [":host{display:block}.dot.op-created{background:var(--st-delivered-fg, #16a34a);border-color:var(--st-delivered-fg, #16a34a)}.dot.op-updated{background:#2563eb;border-color:#2563eb}.dot.op-status{background:#f59e0b;border-color:#f59e0b}.dot.op-deleted{background:#dc2626;border-color:#dc2626}.dot.op-note{background:#64748b;border-color:#64748b}.dot.op-default{background:var(--ink-300, #94a3b8);border-color:var(--ink-300, #94a3b8)}.ch-status{display:flex;align-items:center;gap:6px;margin-top:4px}.item .body{min-width:0}.ch-changes{list-style:none;padding:0;margin:4px 0 0}.ch-changes li{display:flex;align-items:center;gap:6px;padding:1px 0;min-width:0}.ch-field{font-weight:600;min-width:120px}.timeline--compact .ch-changes .ch-field{flex:0 0 auto}.timeline--compact .ch-changes .text-mute,.timeline--compact .ch-changes .strong{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.timeline:not(.timeline--compact) .ch-changes li{flex-wrap:wrap}.timeline:not(.timeline--compact) .ch-changes .text-mute,.timeline:not(.timeline--compact) .ch-changes .strong{overflow-wrap:anywhere}.ch-changes .pi,.ch-status .pi{font-size:10px;opacity:.6}.ch-note{margin-top:4px;padding-left:8px;border-left:2px solid var(--rule-soft, #e2e8f0);color:var(--ink-600, #475569)}.ch-more{margin-top:8px;border:0;background:transparent;cursor:pointer;padding:2px 0;font-size:12px;font-weight:600;color:var(--module, #2563eb)}.ch-more:hover{text-decoration:underline}.ch-changes .text-mute,.ch-changes .strong,.ch-status .text-mute,.ch-status .strong{text-align:start}:host-context([dir=rtl]) .ch-changes .pi-arrow-right,:host-context([dir=rtl]) .ch-status .pi-arrow-right{transform:scaleX(-1)}@media(max-width:767px){.timeline--compact .ch-changes li{flex-wrap:wrap}.timeline--compact .ch-changes .text-mute,.timeline--compact .ch-changes .strong{flex:1 1 auto;overflow:visible;white-space:normal;text-overflow:clip;overflow-wrap:anywhere}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { 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: EfDialogComponent, selector: "ef-dialog", inputs: ["header", "headerKey", "subtitle", "subtitleKey", "visible", "modal", "closable", "draggable", "resizable", "dismissableMask", "closeOnEscape", "severity", "icon", "size", "style", "styleClass", "position", "appendTo", "variant", "actions", "defaultActions", "saveLabelKey", "cancelLabelKey", "saveLabel", "cancelLabel", "saveIcon", "cancelIcon", "saveDisabled", "saveStyleClass", "cancelStyleClass", "saveSeverity", "cancelSeverity"], outputs: ["visibleChange", "showEvent", "hideEvent", "saveAction", "cancelAction", "actionClick"] }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "ariaLabelKey", "variant", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition", "autofocus"], outputs: ["clickEvent"] }, { 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: EfChangeHistoryComponent, decorators: [{
             type: Component,
@@ -4030,8 +4322,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         EfCardComponent,
                         EfDialogComponent,
                         EfButtonComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ef-card\n    [titleKey]=\"titleKey()\"\n    [collapsible]=\"collapsible()\"\n    [collapsed]=\"startCollapsed()\"\n>\n    <ng-container head-extra>\n        @if (hasMore()) {\n            <ef-button\n                variant=\"comptoir\"\n                severity=\"ghost\"\n                size=\"small\"\n                icon=\"pi pi-window-maximize\"\n                tooltipKey=\"audit_view_all\"\n                (clickEvent)=\"openDialog($event)\"\n            />\n        }\n    </ng-container>\n\n    <ng-container\n        *ngTemplateOutlet=\"timeline; context: { $implicit: previewRows(), compact: true }\"\n    ></ng-container>\n\n    @if (hasMore()) {\n        <button type=\"button\" class=\"ch-more\" (click)=\"openDialog()\">\n            {{ 'audit_view_all' | translate }} ({{ rows().length }})\n        </button>\n    }\n</ef-card>\n\n<!-- \"Show more\" dialog \u2014 full timeline, roomy + scrollable -->\n<ef-dialog\n    [visible]=\"dialogVisible()\"\n    (visibleChange)=\"dialogVisible.set($event)\"\n    [headerKey]=\"titleKey()\"\n    [defaultActions]=\"false\"\n    size=\"lg\"\n    [modal]=\"true\"\n    position=\"center\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"timeline; context: { $implicit: rows(), compact: false }\"\n    ></ng-container>\n</ef-dialog>\n\n<ng-template #timeline let-items let-compact=\"compact\">\n    @if (items.length === 0) {\n        <p class=\"text-mute small\">{{ emptyKey() | translate }}</p>\n    } @else {\n        <div class=\"timeline\" [class.timeline--compact]=\"compact\">\n            @for (row of items; track $index) {\n                <div class=\"item\">\n                    <span class=\"dot\" [class]=\"row.meta.cls\" aria-hidden=\"true\"></span>\n                    <div class=\"body\">\n                        <div class=\"label\">{{ row.operationLabel }}</div>\n                        <div class=\"meta\">\n                            @if (row.entry.userName) {\n                                <span class=\"strong\">{{ row.entry.userName }}</span> \u00B7\n                            }\n                            {{ formatWhen(row.entry.occurredAt) }}\n                        </div>\n\n                        @if (row.entry.operation === 'status_changed' && (row.entry.fromStatus || row.entry.toStatus)) {\n                            <div class=\"ch-status small\">\n                                <span class=\"text-mute\">{{ row.entry.fromStatus || '\u2014' }}</span>\n                                <i class=\"pi pi-arrow-right\"></i>\n                                <span class=\"strong\">{{ row.entry.toStatus || '\u2014' }}</span>\n                            </div>\n                        }\n\n                        @if (row.entry.changes?.length) {\n                            <ul class=\"ch-changes small\">\n                                @for (c of row.entry.changes; track c.field) {\n                                    <li>\n                                        <span class=\"ch-field\">{{ fieldLabel(c.field) }}</span>\n                                        <span class=\"text-mute\">{{ c.oldValue || '\u2014' }}</span>\n                                        <i class=\"pi pi-arrow-right\"></i>\n                                        <span class=\"strong\">{{ c.newValue || '\u2014' }}</span>\n                                    </li>\n                                }\n                            </ul>\n                        }\n\n                        @if (row.entry.note) {\n                            <div class=\"ch-note small\">{{ row.entry.note }}</div>\n                        }\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [":host{display:block}.dot.op-created{background:var(--st-delivered-fg, #16a34a);border-color:var(--st-delivered-fg, #16a34a)}.dot.op-updated{background:#2563eb;border-color:#2563eb}.dot.op-status{background:#f59e0b;border-color:#f59e0b}.dot.op-deleted{background:#dc2626;border-color:#dc2626}.dot.op-note{background:#64748b;border-color:#64748b}.dot.op-default{background:var(--ink-300, #94a3b8);border-color:var(--ink-300, #94a3b8)}.ch-status{display:flex;align-items:center;gap:6px;margin-top:4px}.item .body{min-width:0}.ch-changes{list-style:none;padding:0;margin:4px 0 0}.ch-changes li{display:flex;align-items:center;gap:6px;padding:1px 0;min-width:0}.ch-field{font-weight:600;min-width:120px}.timeline--compact .ch-changes .ch-field{flex:0 0 auto}.timeline--compact .ch-changes .text-mute,.timeline--compact .ch-changes .strong{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.timeline:not(.timeline--compact) .ch-changes li{flex-wrap:wrap}.timeline:not(.timeline--compact) .ch-changes .text-mute,.timeline:not(.timeline--compact) .ch-changes .strong{overflow-wrap:anywhere}.ch-changes .pi,.ch-status .pi{font-size:10px;opacity:.6}.ch-note{margin-top:4px;padding-left:8px;border-left:2px solid var(--rule-soft, #e2e8f0);color:var(--ink-600, #475569)}.ch-more{margin-top:8px;border:0;background:transparent;cursor:pointer;padding:2px 0;font-size:12px;font-weight:600;color:var(--module, #2563eb)}.ch-more:hover{text-decoration:underline}:host-context([dir=rtl]) .ch-changes .pi-arrow-right,:host-context([dir=rtl]) .ch-status .pi-arrow-right{transform:scaleX(-1)}\n"] }]
-        }], propDecorators: { entries: [{ type: i0.Input, args: [{ isSignal: true, alias: "entries", required: false }] }], titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], emptyKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyKey", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], previewLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewLimit", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], startCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "startCollapsed", required: false }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ef-card\n    [titleKey]=\"titleKey()\"\n    [collapsible]=\"collapsible()\"\n    [collapsed]=\"startCollapsed()\"\n>\n    <ng-container head-extra>\n        @if (hasMore()) {\n            <ef-button\n                variant=\"comptoir\"\n                severity=\"ghost\"\n                size=\"small\"\n                icon=\"pi pi-window-maximize\"\n                tooltipKey=\"audit_view_all\"\n                (clickEvent)=\"openDialog($event)\"\n            />\n        }\n    </ng-container>\n\n    <ng-container\n        *ngTemplateOutlet=\"timeline; context: { $implicit: previewRows(), compact: true }\"\n    ></ng-container>\n\n    @if (hasMore()) {\n        <button type=\"button\" class=\"ch-more\" (click)=\"openDialog()\">\n            {{ 'audit_view_all' | translate }} ({{ rows().length }})\n        </button>\n    }\n</ef-card>\n\n<!-- \"Show more\" dialog \u2014 full timeline, roomy + scrollable -->\n<ef-dialog\n    [visible]=\"dialogVisible()\"\n    (visibleChange)=\"dialogVisible.set($event)\"\n    [headerKey]=\"titleKey()\"\n    [defaultActions]=\"false\"\n    size=\"lg\"\n    [modal]=\"true\"\n    position=\"center\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"timeline; context: { $implicit: rows(), compact: false }\"\n    ></ng-container>\n</ef-dialog>\n\n<ng-template #timeline let-items let-compact=\"compact\">\n    @if (items.length === 0) {\n        <p class=\"text-mute small\">{{ emptyKey() | translate }}</p>\n    } @else {\n        <div class=\"timeline\" [class.timeline--compact]=\"compact\">\n            @for (row of items; track $index) {\n                <div class=\"item\">\n                    <span class=\"dot\" [class]=\"row.meta.cls\" aria-hidden=\"true\"></span>\n                    <div class=\"body\">\n                        <div class=\"label\">{{ row.operationLabel }}</div>\n                        <div class=\"meta\">\n                            @if (row.entry.userName) {\n                                <span class=\"strong\">{{ row.entry.userName }}</span> \u00B7\n                            }\n                            {{ formatWhen(row.entry.occurredAt) }}\n                        </div>\n\n                        @if (row.entry.operation === 'status_changed' && (row.entry.fromStatus || row.entry.toStatus)) {\n                            <div class=\"ch-status small\">\n                                <span class=\"text-mute\" dir=\"auto\">{{ valueLabel('status', row.entry.fromStatus) || '\u2014' }}</span>\n                                <i class=\"pi pi-arrow-right\"></i>\n                                <span class=\"strong\" dir=\"auto\">{{ valueLabel('status', row.entry.toStatus) || '\u2014' }}</span>\n                            </div>\n                        }\n\n                        @if (row.entry.changes?.length) {\n                            <ul class=\"ch-changes small\">\n                                @for (c of row.entry.changes; track c.field) {\n                                    <li>\n                                        <span class=\"ch-field\">{{ fieldLabel(c.field) }}</span>\n                                        <span class=\"text-mute\" dir=\"auto\">{{ valueLabel(c.field, c.oldValue) || '\u2014' }}</span>\n                                        <i class=\"pi pi-arrow-right\"></i>\n                                        <span class=\"strong\" dir=\"auto\">{{ valueLabel(c.field, c.newValue) || '\u2014' }}</span>\n                                    </li>\n                                }\n                            </ul>\n                        }\n\n                        @if (row.entry.note) {\n                            <div class=\"ch-note small\">{{ noteText(row.entry.note) }}</div>\n                        }\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [":host{display:block}.dot.op-created{background:var(--st-delivered-fg, #16a34a);border-color:var(--st-delivered-fg, #16a34a)}.dot.op-updated{background:#2563eb;border-color:#2563eb}.dot.op-status{background:#f59e0b;border-color:#f59e0b}.dot.op-deleted{background:#dc2626;border-color:#dc2626}.dot.op-note{background:#64748b;border-color:#64748b}.dot.op-default{background:var(--ink-300, #94a3b8);border-color:var(--ink-300, #94a3b8)}.ch-status{display:flex;align-items:center;gap:6px;margin-top:4px}.item .body{min-width:0}.ch-changes{list-style:none;padding:0;margin:4px 0 0}.ch-changes li{display:flex;align-items:center;gap:6px;padding:1px 0;min-width:0}.ch-field{font-weight:600;min-width:120px}.timeline--compact .ch-changes .ch-field{flex:0 0 auto}.timeline--compact .ch-changes .text-mute,.timeline--compact .ch-changes .strong{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.timeline:not(.timeline--compact) .ch-changes li{flex-wrap:wrap}.timeline:not(.timeline--compact) .ch-changes .text-mute,.timeline:not(.timeline--compact) .ch-changes .strong{overflow-wrap:anywhere}.ch-changes .pi,.ch-status .pi{font-size:10px;opacity:.6}.ch-note{margin-top:4px;padding-left:8px;border-left:2px solid var(--rule-soft, #e2e8f0);color:var(--ink-600, #475569)}.ch-more{margin-top:8px;border:0;background:transparent;cursor:pointer;padding:2px 0;font-size:12px;font-weight:600;color:var(--module, #2563eb)}.ch-more:hover{text-decoration:underline}.ch-changes .text-mute,.ch-changes .strong,.ch-status .text-mute,.ch-status .strong{text-align:start}:host-context([dir=rtl]) .ch-changes .pi-arrow-right,:host-context([dir=rtl]) .ch-status .pi-arrow-right{transform:scaleX(-1)}@media(max-width:767px){.timeline--compact .ch-changes li{flex-wrap:wrap}.timeline--compact .ch-changes .text-mute,.timeline--compact .ch-changes .strong{flex:1 1 auto;overflow:visible;white-space:normal;text-overflow:clip;overflow-wrap:anywhere}}\n"] }]
+        }], propDecorators: { entries: [{ type: i0.Input, args: [{ isSignal: true, alias: "entries", required: false }] }], titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], emptyKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyKey", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], previewLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewLimit", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], startCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "startCollapsed", required: false }] }], valueLists: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLists", required: false }] }], noteFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "noteFormatter", required: false }] }] } });
 
 /**
  * Keyboard-navigable product search. Filters products by display name,
@@ -4064,6 +4356,11 @@ class EfProductTypeaheadComponent {
      * variant + unit price) is identical either way.
      */
     showVariants = input(true, { ...(ngDevMode ? { debugName: "showVariants" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Which catalogue price each row shows and its selection carries: the
+     * wholesale price (default) or the shop price for a Web order.
+     */
+    priceList = input('wholesale', ...(ngDevMode ? [{ debugName: "priceList" }] : /* istanbul ignore next */ []));
     productSelect = output();
     query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
@@ -4170,11 +4467,7 @@ class EfProductTypeaheadComponent {
         return row.variants[this.variantIndexOf(row)] ?? null;
     }
     priceOf(row) {
-        const variant = this.variantOf(row);
-        return (variant?.['price'] ??
-            row.product['unitPrice'] ??
-            row.product['salePrice'] ??
-            0);
+        return defaultUnitPrice(row.product, this.variantOf(row), this.priceList());
     }
     setActiveVariant(row, index) {
         this.activeVariant.update((m) => ({ ...m, [row.key]: index }));
@@ -4203,12 +4496,12 @@ class EfProductTypeaheadComponent {
         this.activeVariant.set({});
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfProductTypeaheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfProductTypeaheadComponent, isStandalone: true, selector: "ef-product-typeahead", inputs: { products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: true, transformFunction: null }, productKeyField: { classPropertyName: "productKeyField", publicName: "productKeyField", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, showVariants: { classPropertyName: "showVariants", publicName: "showVariants", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSelect: "productSelect" }, ngImport: i0, template: "<div class=\"qa-combo\">\n  <svg class=\"ic\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n    <circle cx=\"11\" cy=\"11\" r=\"7\" /><path d=\"m20 20-3-3\" />\n  </svg>\n  <input\n    class=\"input\"\n    type=\"text\"\n    autocomplete=\"off\"\n    role=\"combobox\"\n    aria-controls=\"qa-listbox\"\n    [attr.aria-expanded]=\"open() && rows().length > 0\"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"placeholderKey() ? (placeholderKey() | translate) : ''\"\n    [ngModel]=\"query()\"\n    (ngModelChange)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (focus)=\"open.set(true)\"\n    (blur)=\"open.set(false)\" />\n\n  @if (query() && !disabled()) {\n    <button\n      type=\"button\"\n      class=\"qa-clear\"\n      [attr.aria-label]=\"'action.clear' | translate\"\n      (mousedown)=\"$event.preventDefault(); reset()\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n        <path d=\"M18 6 6 18M6 6l12 12\" />\n      </svg>\n    </button>\n  }\n\n  @if (open() && rows().length > 0) {\n    <div id=\"qa-listbox\" class=\"qa-menu\" role=\"listbox\">\n      <div class=\"grp\">{{ rows().length }} \u00B7 \u00AB {{ query() }} \u00BB</div>\n      @for (row of rows(); track row.key; let i = $index) {\n        <div\n          class=\"qa-opt\"\n          role=\"option\"\n          [attr.aria-selected]=\"i === highlightedIndex()\"\n          [class.hl]=\"i === highlightedIndex()\"\n          (mouseenter)=\"highlightedIndex.set(i)\"\n          (mousedown)=\"$event.preventDefault(); selectRow(row)\">\n          <span class=\"nm\">\n            @for (seg of row.segments; track $index) {\n              @if (seg.mark) { <mark>{{ seg.text }}</mark> } @else { {{ seg.text }} }\n            }\n          </span>\n          <span class=\"var\">\n            @if (showVariants()) {\n              @for (variant of row.variants; track variant['variantId']; let vi = $index) {\n                <span\n                  class=\"qa-chip\"\n                  [class.on]=\"vi === variantIndexOf(row)\"\n                  (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); setActiveVariant(row, vi)\">\n                  {{ variant['title'] }}\n                </span>\n              }\n            }\n          </span>\n          <span class=\"px\">{{ priceOf(row) | number: '1.2-2' : locale() }}</span>\n        </div>\n      }\n      <div class=\"qa-foot\">\n        <span class=\"qa-hint\">\n          <span class=\"kbd\">\u2191</span><span class=\"kbd\">\u2193</span>\n          {{ 'order_builder.qa_navigate' | translate }} \u00B7\n          <span class=\"kbd\">\u21B5</span> {{ 'order_builder.qa_add' | translate }}\n        </span>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.qa-combo{position:relative}.qa-combo .input{width:100%;box-sizing:border-box;height:var(--hit-field);padding:0 36px 0 38px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--paper-alt);color:var(--text);font:inherit;font-size:14px;line-height:1.2;outline:0}.qa-combo .input:focus{border-color:var(--tenant-400);box-shadow:0 0 0 3px var(--tenant-100)}.qa-combo .ic{position:absolute;inset-inline-start:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-soft);pointer-events:none}.qa-combo .qa-clear{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-soft);cursor:pointer}.qa-combo .qa-clear svg{width:14px;height:14px}.qa-combo .qa-clear:hover{background:var(--paper);color:var(--text)}.qa-menu{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:40;background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--shadow-3);padding:6px;max-height:320px;overflow-y:auto;overflow-x:hidden}.grp{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);padding:8px 10px 4px}.qa-opt{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 10px;border-radius:var(--r-md);cursor:pointer}.qa-opt:hover,.qa-opt.hl{background:color-mix(in srgb,var(--tenant-50) 75%,var(--paper-alt))}.qa-opt .nm{font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qa-opt .nm mark{background:var(--tenant-100);color:var(--tenant-700);border-radius:3px;padding:0 1px;font-weight:800}.qa-opt .var{display:inline-flex;gap:4px;flex-shrink:0}.qa-opt .px{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text)}.qa-chip{font-family:var(--font-mono);font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:var(--r-pill);border:1px solid var(--rule);color:var(--text-mute);background:var(--paper);cursor:pointer}.qa-chip.on{background:var(--tenant-500);border-color:var(--tenant-500);color:#fff}.qa-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 4px;border-top:1px solid var(--rule-soft);margin-top:4px}.qa-hint{font-size:11px;color:var(--text-mute);display:inline-flex;align-items:center;gap:6px}.kbd{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--text-mute);background:var(--paper);border:1px solid var(--rule);border-radius:5px;padding:2px 6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: TranslateModule }, { kind: "pipe", type: i1$3.DecimalPipe, name: "number" }, { 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: EfProductTypeaheadComponent, isStandalone: true, selector: "ef-product-typeahead", inputs: { products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: true, transformFunction: null }, productKeyField: { classPropertyName: "productKeyField", publicName: "productKeyField", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, showVariants: { classPropertyName: "showVariants", publicName: "showVariants", isSignal: true, isRequired: false, transformFunction: null }, priceList: { classPropertyName: "priceList", publicName: "priceList", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { productSelect: "productSelect" }, ngImport: i0, template: "<div class=\"qa-combo\">\n  <svg class=\"ic\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n    <circle cx=\"11\" cy=\"11\" r=\"7\" /><path d=\"m20 20-3-3\" />\n  </svg>\n  <input\n    class=\"input\"\n    type=\"text\"\n    autocomplete=\"off\"\n    role=\"combobox\"\n    aria-controls=\"qa-listbox\"\n    [attr.aria-expanded]=\"open() && rows().length > 0\"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"placeholderKey() ? (placeholderKey() | translate) : ''\"\n    [ngModel]=\"query()\"\n    (ngModelChange)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (focus)=\"open.set(true)\"\n    (blur)=\"open.set(false)\" />\n\n  @if (query() && !disabled()) {\n    <button\n      type=\"button\"\n      class=\"qa-clear\"\n      [attr.aria-label]=\"'action.clear' | translate\"\n      (mousedown)=\"$event.preventDefault(); reset()\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n        <path d=\"M18 6 6 18M6 6l12 12\" />\n      </svg>\n    </button>\n  }\n\n  @if (open() && rows().length > 0) {\n    <div id=\"qa-listbox\" class=\"qa-menu\" role=\"listbox\">\n      <div class=\"grp\">{{ rows().length }} \u00B7 \u00AB {{ query() }} \u00BB</div>\n      @for (row of rows(); track row.key; let i = $index) {\n        <div\n          class=\"qa-opt\"\n          role=\"option\"\n          [attr.aria-selected]=\"i === highlightedIndex()\"\n          [class.hl]=\"i === highlightedIndex()\"\n          (mouseenter)=\"highlightedIndex.set(i)\"\n          (mousedown)=\"$event.preventDefault(); selectRow(row)\">\n          <span class=\"nm\">\n            @for (seg of row.segments; track $index) {\n              @if (seg.mark) { <mark>{{ seg.text }}</mark> } @else { {{ seg.text }} }\n            }\n          </span>\n          <span class=\"var\">\n            @if (showVariants()) {\n              @for (variant of row.variants; track variant['variantId']; let vi = $index) {\n                <span\n                  class=\"qa-chip\"\n                  [class.on]=\"vi === variantIndexOf(row)\"\n                  (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); setActiveVariant(row, vi)\">\n                  {{ variant['title'] }}\n                </span>\n              }\n            }\n          </span>\n          <span class=\"px\">{{ priceOf(row) | number: '1.2-2' : locale() }}</span>\n        </div>\n      }\n      <div class=\"qa-foot\">\n        <span class=\"qa-hint\">\n          <span class=\"kbd\">\u2191</span><span class=\"kbd\">\u2193</span>\n          {{ 'order_builder.qa_navigate' | translate }} \u00B7\n          <span class=\"kbd\">\u21B5</span> {{ 'order_builder.qa_add' | translate }}\n        </span>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.qa-combo{position:relative}.qa-combo .input{width:100%;box-sizing:border-box;height:var(--hit-field);padding:0 36px 0 38px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--paper-alt);color:var(--text);font:inherit;font-size:14px;line-height:1.2;outline:0}.qa-combo .input:focus{border-color:var(--tenant-400);box-shadow:0 0 0 3px var(--tenant-100)}.qa-combo .ic{position:absolute;inset-inline-start:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-soft);pointer-events:none}.qa-combo .qa-clear{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-soft);cursor:pointer}.qa-combo .qa-clear svg{width:14px;height:14px}.qa-combo .qa-clear:hover{background:var(--paper);color:var(--text)}.qa-menu{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:40;background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--shadow-3);padding:6px;max-height:320px;overflow-y:auto;overflow-x:hidden}.grp{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);padding:8px 10px 4px}.qa-opt{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 10px;border-radius:var(--r-md);cursor:pointer}.qa-opt:hover,.qa-opt.hl{background:color-mix(in srgb,var(--tenant-50) 75%,var(--paper-alt))}.qa-opt .nm{font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qa-opt .nm mark{background:var(--tenant-100);color:var(--tenant-700);border-radius:3px;padding:0 1px;font-weight:800}.qa-opt .var{display:inline-flex;gap:4px;flex-shrink:0}.qa-opt .px{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text)}.qa-chip{font-family:var(--font-mono);font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:var(--r-pill);border:1px solid var(--rule);color:var(--text-mute);background:var(--paper);cursor:pointer}.qa-chip.on{background:var(--tenant-500);border-color:var(--tenant-500);color:#fff}.qa-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 4px;border-top:1px solid var(--rule-soft);margin-top:4px}.qa-hint{font-size:11px;color:var(--text-mute);display:inline-flex;align-items:center;gap:6px}.kbd{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--text-mute);background:var(--paper);border:1px solid var(--rule);border-radius:5px;padding:2px 6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: TranslateModule }, { kind: "pipe", type: i1$3.DecimalPipe, name: "number" }, { 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: EfProductTypeaheadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-product-typeahead', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, TranslateModule], template: "<div class=\"qa-combo\">\n  <svg class=\"ic\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n    <circle cx=\"11\" cy=\"11\" r=\"7\" /><path d=\"m20 20-3-3\" />\n  </svg>\n  <input\n    class=\"input\"\n    type=\"text\"\n    autocomplete=\"off\"\n    role=\"combobox\"\n    aria-controls=\"qa-listbox\"\n    [attr.aria-expanded]=\"open() && rows().length > 0\"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"placeholderKey() ? (placeholderKey() | translate) : ''\"\n    [ngModel]=\"query()\"\n    (ngModelChange)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (focus)=\"open.set(true)\"\n    (blur)=\"open.set(false)\" />\n\n  @if (query() && !disabled()) {\n    <button\n      type=\"button\"\n      class=\"qa-clear\"\n      [attr.aria-label]=\"'action.clear' | translate\"\n      (mousedown)=\"$event.preventDefault(); reset()\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n        <path d=\"M18 6 6 18M6 6l12 12\" />\n      </svg>\n    </button>\n  }\n\n  @if (open() && rows().length > 0) {\n    <div id=\"qa-listbox\" class=\"qa-menu\" role=\"listbox\">\n      <div class=\"grp\">{{ rows().length }} \u00B7 \u00AB {{ query() }} \u00BB</div>\n      @for (row of rows(); track row.key; let i = $index) {\n        <div\n          class=\"qa-opt\"\n          role=\"option\"\n          [attr.aria-selected]=\"i === highlightedIndex()\"\n          [class.hl]=\"i === highlightedIndex()\"\n          (mouseenter)=\"highlightedIndex.set(i)\"\n          (mousedown)=\"$event.preventDefault(); selectRow(row)\">\n          <span class=\"nm\">\n            @for (seg of row.segments; track $index) {\n              @if (seg.mark) { <mark>{{ seg.text }}</mark> } @else { {{ seg.text }} }\n            }\n          </span>\n          <span class=\"var\">\n            @if (showVariants()) {\n              @for (variant of row.variants; track variant['variantId']; let vi = $index) {\n                <span\n                  class=\"qa-chip\"\n                  [class.on]=\"vi === variantIndexOf(row)\"\n                  (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); setActiveVariant(row, vi)\">\n                  {{ variant['title'] }}\n                </span>\n              }\n            }\n          </span>\n          <span class=\"px\">{{ priceOf(row) | number: '1.2-2' : locale() }}</span>\n        </div>\n      }\n      <div class=\"qa-foot\">\n        <span class=\"qa-hint\">\n          <span class=\"kbd\">\u2191</span><span class=\"kbd\">\u2193</span>\n          {{ 'order_builder.qa_navigate' | translate }} \u00B7\n          <span class=\"kbd\">\u21B5</span> {{ 'order_builder.qa_add' | translate }}\n        </span>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.qa-combo{position:relative}.qa-combo .input{width:100%;box-sizing:border-box;height:var(--hit-field);padding:0 36px 0 38px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--paper-alt);color:var(--text);font:inherit;font-size:14px;line-height:1.2;outline:0}.qa-combo .input:focus{border-color:var(--tenant-400);box-shadow:0 0 0 3px var(--tenant-100)}.qa-combo .ic{position:absolute;inset-inline-start:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-soft);pointer-events:none}.qa-combo .qa-clear{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-soft);cursor:pointer}.qa-combo .qa-clear svg{width:14px;height:14px}.qa-combo .qa-clear:hover{background:var(--paper);color:var(--text)}.qa-menu{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:40;background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--shadow-3);padding:6px;max-height:320px;overflow-y:auto;overflow-x:hidden}.grp{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);padding:8px 10px 4px}.qa-opt{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 10px;border-radius:var(--r-md);cursor:pointer}.qa-opt:hover,.qa-opt.hl{background:color-mix(in srgb,var(--tenant-50) 75%,var(--paper-alt))}.qa-opt .nm{font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qa-opt .nm mark{background:var(--tenant-100);color:var(--tenant-700);border-radius:3px;padding:0 1px;font-weight:800}.qa-opt .var{display:inline-flex;gap:4px;flex-shrink:0}.qa-opt .px{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text)}.qa-chip{font-family:var(--font-mono);font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:var(--r-pill);border:1px solid var(--rule);color:var(--text-mute);background:var(--paper);cursor:pointer}.qa-chip.on{background:var(--tenant-500);border-color:var(--tenant-500);color:#fff}.qa-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 4px;border-top:1px solid var(--rule-soft);margin-top:4px}.qa-hint{font-size:11px;color:var(--text-mute);display:inline-flex;align-items:center;gap:6px}.kbd{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--text-mute);background:var(--paper);border:1px solid var(--rule);border-radius:5px;padding:2px 6px}\n"] }]
-        }], propDecorators: { products: [{ type: i0.Input, args: [{ isSignal: true, alias: "products", required: true }] }], productKeyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "productKeyField", required: false }] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], showVariants: [{ type: i0.Input, args: [{ isSignal: true, alias: "showVariants", required: false }] }], productSelect: [{ type: i0.Output, args: ["productSelect"] }] } });
+        }], propDecorators: { products: [{ type: i0.Input, args: [{ isSignal: true, alias: "products", required: true }] }], productKeyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "productKeyField", required: false }] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], showVariants: [{ type: i0.Input, args: [{ isSignal: true, alias: "showVariants", required: false }] }], priceList: [{ type: i0.Input, args: [{ isSignal: true, alias: "priceList", required: false }] }], productSelect: [{ type: i0.Output, args: ["productSelect"] }] } });
 
 /**
  * App-wide default, so screens don't drift apart. Provide it once at the
@@ -5655,6 +5948,19 @@ class EfDataCardComponent {
             return undefined;
         return path.split('.').reduce((obj, key) => (obj == null ? obj : obj[key]), row);
     }
+    /**
+     * Whether a cell has anything to show. The mobile secondary line joins its
+     * parts with a "·" drawn before every part but the first, so an empty part
+     * left a dangling separator; skipping it keeps separators between present
+     * values only. A column with a custom body template is always present (the
+     * template decides what to render); a boolean always renders a glyph.
+     */
+    hasCellContent(row, col) {
+        if (this.bodyTemplate(col.id) || col.type === 'boolean')
+            return true;
+        const v = this.cellValue(row, col);
+        return v !== null && v !== undefined && !(typeof v === 'string' && v.trim() === '');
+    }
     headerAlignClass(col) {
         if (col.align === 'end')
             return 'num';
@@ -6058,7 +6364,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 }, rowPressed: { classPropertyName: "rowPressed", publicName: "rowPressed", isSignal: true, isRequired: false, transformFunction: null }, rowDisabled: { classPropertyName: "rowDisabled", publicName: "rowDisabled", 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 }, rowActionState: { classPropertyName: "rowActionState", publicName: "rowActionState", isSignal: true, isRequired: false, transformFunction: null }, showDensityControl: { classPropertyName: "showDensityControl", publicName: "showDensityControl", isSignal: true, isRequired: false, transformFunction: null }, showColumnPicker: { classPropertyName: "showColumnPicker", publicName: "showColumnPicker", isSignal: true, isRequired: false, transformFunction: null }, showExportControl: { classPropertyName: "showExportControl", publicName: "showExportControl", isSignal: true, isRequired: false, transformFunction: null }, exporting: { classPropertyName: "exporting", publicName: "exporting", isSignal: true, isRequired: false, transformFunction: null }, screenContext: { classPropertyName: "screenContext", publicName: "screenContext", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, tableKey: { classPropertyName: "tableKey", publicName: "tableKey", isSignal: true, isRequired: false, transformFunction: null }, defaultDensity: { classPropertyName: "defaultDensity", publicName: "defaultDensity", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, fixedLayout: { classPropertyName: "fixedLayout", publicName: "fixedLayout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", rowDoubleClick: "rowDoubleClick", rowAction: "rowAction", exportRequest: "exportRequest", clearSearch: "clearSearch", retry: "retry", rowReorder: "rowReorder" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "bodyTemplates", predicate: EfColumnTemplateDirective }, { propertyName: "headerTemplates", predicate: EfColumnHeaderTemplateDirective }], ngImport: i0, template: "<!-- One cell renderer, shared by the table, the mobile row and the mobile\n     detail. A new column type is added here once, not three times. -->\n<ng-template #cellTpl let-row let-col=\"col\" let-index=\"index\">\n  @if (bodyTemplate(col.id); as bodyTpl) {\n    <ng-container *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, col: col, index: index }\"></ng-container>\n  } @else {\n              @switch (col.type) {\n                @case ('number') {\n                  {{ $any(cellValue(row, col)) | number:numberFormat(col):col.locale }}\n                }\n                @case ('money') {\n                  {{ $any(cellValue(row, col)) | currency:(col.currencyCode || 'EUR'):(col.currencyDisplay || 'symbol'):numberFormat(col):col.locale }}\n                }\n                @case ('date') {\n                  {{ $any(cellValue(row, col)) | date:(col.dateFormat || 'dd/MM/yyyy'):undefined:col.locale }}\n                }\n                @case ('datetime') {\n                  {{ $any(cellValue(row, col)) | date:(col.dateFormat || 'dd/MM/yyyy HH:mm'):undefined:col.locale }}\n                }\n                @case ('boolean') {\n                  @if (cellValue(row, col)) {\n                    <span class=\"bool yes\"><span class=\"dot\"></span> \u2713</span>\n                  } @else {\n                    <span class=\"bool no\"><span class=\"dot\"></span> \u2014</span>\n                  }\n                }\n                @case ('mono') {\n                  <span class=\"ref\">{{ cellValue(row, col) }}</span>\n                }\n                @case ('chip') {\n                  <span [class]=\"'chip ' + (col.chipPrefix || 'chip-') + cellValue(row, col)\">\n                    \u25CF {{ cellValue(row, col) }}\n                  </span>\n                }\n                @case ('status') {\n                  <ef-status-chip\n                    [referenceKey]=\"col.referenceKey || ''\"\n                    [code]=\"$any(cellValue(row, col))\"\n                  />\n                }\n                @case ('reference') {\n                  {{ resolveReference(cellValue(row, col), col) }}\n                }\n                @default {\n                  {{ cellValue(row, col) }}\n                }\n              }\n  }\n</ng-template>\n\n<!-- .has-open-menu unclips the shell for the Densit\u00E9 / Colonnes menus,\n     which hang below .tbl-head. Row menus are fixed to the viewport\n     (ef-row-actions) and need no lift; counting them also left the shell\n     unclipped for good when a row went while its menu was open. -->\n<div class=\"tbl-wrap\" [class.has-open-menu]=\"openTool() !== null\" [attr.data-density]=\"density()\">\n  <!-- \u2500\u2500 HEAD ROW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"tbl-head\">\n    <div class=\"count small\">\n      @if (loading()) {\n        <span>{{ loadingKey() | translate }}</span>\n      } @else if (errorMsg()) {\n        <!-- A refresh that failed on top of rows already on screen keeps the\n             rows, so this chip is the only sign anything went wrong \u2014 and the\n             rows it sits above may now be stale. It has to say so, and say it\n             in the product's words: `errorMsg` is `err.message` from the HTTP\n             layer, and \"500 Internal Server Error\" tells an operator nothing\n             they can act on.\n\n             The raw string stays on `data-error`, where devtools can read it\n             and no reader ever meets it. `title` was the obvious place and is\n             the wrong one: it renders the exception in a tooltip, which is\n             precisely what this change exists to stop, and it is unreachable\n             on touch besides.\n\n             role=\"status\", not \"alert\": polite is right for a signal beside\n             rows that are still usable, and when the body is showing the\n             error state it already carries the alert \u2014 one failure must not\n             interrupt a screen-reader twice. -->\n        <span\n          role=\"status\"\n          [attr.data-error]=\"errorMsg()\"\n          style=\"color: var(--st-cancelled-fg); font-weight: 600;\"\n          >\u26A0 {{ 'common_error_refresh_failed' | translate }}</span\n        >\n      } @else {\n        <ng-content select=\"[tbl-head-info]\"></ng-content>\n      }\n    </div>\n    <div class=\"tbl-tools\">\n      <ng-content select=\"[tbl-head-actions]\"></ng-content>\n\n      @if (canExport()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [disabled]=\"exporting()\"\n            [attr.aria-busy]=\"exporting()\"\n            (click)=\"requestExport()\"\n          >\n            <i\n              class=\"pi\"\n              [class.pi-download]=\"!exporting()\"\n              [class.pi-spinner]=\"exporting()\"\n              [class.is-spinning]=\"exporting()\"\n              aria-hidden=\"true\"\n            ></i>\n            {{ (exporting() ? 'common_export_running' : 'common_export') | translate }}\n          </button>\n        </div>\n      }\n\n      @if (showDensityControl()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'density'\"\n            [attr.aria-expanded]=\"openTool() === 'density'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('density')\"\n          >\n            <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n            {{ 'common_density' | translate }}\n          </button>\n          @if (openTool() === 'density') {\n            <div class=\"tbl-tool__menu\" role=\"menu\">\n              @for (opt of densityOptions; track opt.value) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemradio\"\n                  [attr.aria-checked]=\"density() === opt.value\"\n                  [class.is-active]=\"density() === opt.value\"\n                  (click)=\"setDensity(opt.value)\"\n                >\n                  <i class=\"pi\" [ngClass]=\"opt.icon\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{ opt.labelKey | translate }}</span>\n                  @if (density() === opt.value) {\n                    <i class=\"pi pi-check tbl-tool__check\" aria-hidden=\"true\"></i>\n                  }\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @if (showColumnPicker()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'columns'\"\n            [attr.aria-expanded]=\"openTool() === 'columns'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('columns')\"\n          >\n            <i class=\"pi pi-th-large\" aria-hidden=\"true\"></i>\n            {{ 'common_columns' | translate }}\n          </button>\n          @if (openTool() === 'columns') {\n            <div class=\"tbl-tool__menu tbl-tool__menu--wide\" role=\"menu\">\n              @for (col of hideableColumns(); track col.id) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemcheckbox\"\n                  [attr.aria-checked]=\"!isColumnHidden(col.id)\"\n                  [class.is-active]=\"!isColumnHidden(col.id)\"\n                  (click)=\"toggleColumn(col.id)\"\n                >\n                  <i class=\"pi\" [class.pi-check]=\"!isColumnHidden(col.id)\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{\n                    col.headerKey ? (col.headerKey | translate) : (col.header || col.id)\n                  }}</span>\n                </button>\n              }\n              <div class=\"tbl-tool__sep\"></div>\n              <button type=\"button\" role=\"menuitem\" (click)=\"resetColumns()\">\n                <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n                <span class=\"tbl-tool__label\">{{ 'common_columns_reset' | translate }}</span>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 TABLE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (isMobile()) {\n    <!-- \u2500\u2500 MOBILE LIST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         A six-column table on a 390px screen either overflows or\n         squeezes every column to nothing, so the rows become a list.\n         Same columns, same cell renderers; each column just declares\n         (or is given) a role. Both shapes expand to the same detail \u2014\n         they differ only in how much they show collapsed. -->\n    <ul\n      class=\"mlist\"\n      [attr.data-layout]=\"effectiveMobileLayout()\"\n      [attr.aria-busy]=\"loading() ? 'true' : null\"\n    >\n      @for (row of rows(); track trackByRow($index, row); let i = $index) {\n        <li class=\"mrow\" [class.is-open]=\"isExpanded(row, i)\" [class.is-disabled]=\"isRowDisabled(row)\">\n          <div\n            class=\"mrow__head\"\n            [class.is-tappable]=\"headIsControl()\"\n            [attr.role]=\"headIsControl() ? 'button' : null\"\n            [attr.tabindex]=\"headIsControl() ? 0 : null\"\n            [attr.aria-pressed]=\"pressedAttr(row)\"\n            [attr.aria-disabled]=\"isRowDisabled(row) ? 'true' : null\"\n            [attr.aria-expanded]=\"!rowNavigable() && hasDetail() ? isExpanded(row, i) : null\"\n            (click)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.enter)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.space)=\"onRowHeadActivate(row, i, $event)\"\n          >\n            <div class=\"mrow__lead\">\n              @if (primaryColumn(); as pc) {\n                <span class=\"mrow__primary\" efOverflowTooltip efTooltip efTooltipPosition=\"top\">\n                  <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: pc, index: i }\"></ng-container>\n                </span>\n              }\n              @if (effectiveMobileLayout() === 'row' && secondaryColumns().length) {\n                <span class=\"mrow__secondary\">\n                  @for (sc of secondaryColumns(); track sc.id) {\n                    <span class=\"mrow__sec-part\">\n                      <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: sc, index: i }\"></ng-container>\n                    </span>\n                  }\n                </span>\n              }\n            </div>\n\n            <div class=\"mrow__trail\">\n              @if (statusColumn(); as st) {\n                <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: st, index: i }\"></ng-container>\n              }\n              @if (hasActionsColumn()) {\n                <span class=\"mrow__actions\">\n                  <ef-row-actions [items]=\"defaultRowActions(row)\" [context]=\"rowActionsContext()\" />\n                </span>\n              }\n              @if (hasDetail() && effectiveMobileLayout() === 'row') {\n                @if (rowNavigable()) {\n                  <!-- The head opens the record, so expansion needs a control\n                       of its own. Same glyph, promoted from decoration to a\n                       button that carries the state it was already drawing. -->\n                  <button\n                    type=\"button\"\n                    class=\"mrow__disclosure\"\n                    [attr.aria-expanded]=\"isExpanded(row, i)\"\n                    [attr.aria-label]=\"(isExpanded(row, i) ? 'common_view_less' : 'common_view_more') | translate\"\n                    (click)=\"onDisclosureToggle(row, i, $event)\"\n                  >\n                    <i\n                      class=\"pi pi-chevron-down mrow__chevron\"\n                      [class.is-open]=\"isExpanded(row, i)\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </button>\n                } @else {\n                  <!-- Says the row opens, and which way it is now. Decorative:\n                       the whole head is the control, and it carries the state. -->\n                  <i\n                    class=\"pi pi-chevron-down mrow__chevron\"\n                    [class.is-open]=\"isExpanded(row, i)\"\n                    aria-hidden=\"true\"\n                  ></i>\n                }\n              }\n            </div>\n          </div>\n\n          @if (visibleDetail(row, i).length) {\n            <dl class=\"mrow__detail\">\n              @for (col of visibleDetail(row, i); track col.id) {\n                <div class=\"mrow__field\">\n                  <dt>{{ $any(col).headerKey ? ($any(col).headerKey | translate) : $any(col).header }}</dt>\n                  <dd [class]=\"cellAlignClass($any(col))\">\n                    <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col, index: i }\"></ng-container>\n                  </dd>\n                </div>\n              }\n            </dl>\n          }\n\n          @if (hasMoreThanPreview() && effectiveMobileLayout() === 'card') {\n            <button class=\"mrow__more\" type=\"button\" (click)=\"toggleExpanded(row, i)\">\n              <span>{{ (isExpanded(row, i) ? 'common_view_less' : 'common_view_more') | translate }}</span>\n              <i class=\"pi pi-chevron-down mrow__chevron\" [class.is-open]=\"isExpanded(row, i)\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </li>\n      } @empty {\n        <!-- No rows has three meanings and they must not share a screen:\n             still loading is a skeleton, the request failed is the error\n             state, finished-and-empty is the empty state. Saying \"nothing\n             here yet\" to someone whose data is still in flight \u2014 or whose\n             request just failed \u2014 is a lie the whole time it shows. -->\n        @if (showSkeleton()) {\n          @for (line of skeletonLines(); track line) {\n            <li class=\"mrow mrow--skeleton\">\n              <ef-skeleton variant=\"text\" [rows]=\"2\" />\n            </li>\n          }\n        } @else if (showError()) {\n          <li class=\"mrow mrow--empty\">\n            <ng-container *ngTemplateOutlet=\"errorStateTpl\"></ng-container>\n          </li>\n        } @else {\n          <li class=\"mrow mrow--empty\">\n            <ng-content select=\"[empty-state-mobile]\">\n              <ng-container *ngTemplateOutlet=\"defaultEmptyTpl\"></ng-container>\n            </ng-content>\n          </li>\n        }\n      }\n    </ul>\n  } @else {\n    <!-- The table scrolls sideways inside its own box. Between 768px and\n         the table's natural width (about 900-1100px) the columns past the\n         edge were simply clipped by .tbl-wrap, with no way to reach them.\n         .tbl-wrap stays the clipping shell, so the head and the pager do\n         not scroll with the rows. Row menus are fixed to the viewport\n         (ef-row-actions), so this scroller never clips them. -->\n    <div class=\"tbl-scroll\">\n    <table class=\"tbl\" [class.tbl--fixed]=\"fixedLayout()\">\n      <thead>\n        <tr>\n          @if (reorderable()) {\n            <th class=\"tbl-drag-h\" aria-hidden=\"true\"></th>\n          }\n          @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n            <!-- A sortable header is a real <button> inside the <th>, not a\n                 click handler on the cell. The cell carries aria-sort so the\n                 current order is announced; the arrow stays decorative.\n                 Sorting was previously mouse-only and silent to assistive\n                 technology, on every list screen in the product. -->\n            <th\n              [class]=\"headerAlignClass(col)\"\n              [class.is-sortable]=\"col.sortable\"\n              [style.width]=\"col.width || null\"\n              [attr.data-col]=\"col.id\"\n              [attr.aria-sort]=\"ariaSort(col)\"\n            >\n              @if (col.sortable) {\n                <button type=\"button\" class=\"tbl-sort\" (click)=\"onHeaderClick(col)\">\n                  <ng-container *ngTemplateOutlet=\"headerLabelTpl; context: { col: col }\"></ng-container>\n                  @if (sortIndicator(col)) {\n                    <span aria-hidden=\"true\" class=\"tbl-sort__arrow\">{{ sortIndicator(col) }}</span>\n                  }\n                </button>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"headerLabelTpl; context: { col: col }\"></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody [attr.aria-busy]=\"loading() ? 'true' : null\">\n        @for (row of rows(); track trackByRow($index, row); let i = $index) {\n          <tr\n            [class.is-row-clickable]=\"rowDoubleClickable()\"\n            [class.is-dragging]=\"dragFrom() === i\"\n            [class.is-drop-target]=\"dragFrom() !== null && dragFrom() !== i && dragTo() === i\"\n            [attr.tabindex]=\"rowDoubleClickable() ? 0 : null\"\n            [attr.role]=\"rowDoubleClickable() ? 'button' : null\"\n            [attr.aria-pressed]=\"pressedAttr(row)\"\n            [attr.aria-disabled]=\"isRowDisabled(row) ? 'true' : null\"\n            [class.is-disabled]=\"isRowDisabled(row)\"\n            (click)=\"onRowClick(row, $event)\"\n            (keydown.enter)=\"onRowKeydown(row, $event)\"\n            (keydown.space)=\"onRowSpace(row, $event)\"\n          >\n            @if (reorderable()) {\n              <td class=\"tbl-drag\">\n                <!-- The row is draggable only by this handle, so a drag never\n                     starts from a cell the operator meant to click or select.\n                     Arrow keys move the row for anyone not using a pointer. -->\n                <button\n                  type=\"button\"\n                  class=\"tbl-drag__grip\"\n                  [attr.aria-label]=\"'common_reorder_row' | translate\"\n                  (pointerdown)=\"onDragPointerDown(i, $event)\"\n                  (pointermove)=\"onDragPointerMove($event)\"\n                  (pointerup)=\"onDragPointerUp()\"\n                  (pointercancel)=\"onDragPointerUp()\"\n                  (keydown)=\"onDragKeydown(i, $event)\"\n                >\n                  <i class=\"pi pi-ellipsis-v\" aria-hidden=\"true\"></i>\n                </button>\n              </td>\n            }\n            @for (col of effectiveColumns(); track trackByColumn($index, col); let colIdx = $index) {\n              <td efOverflowTooltip efTooltip efTooltipPosition=\"top\" [class]=\"cellAlignClass(col)\" [attr.data-col]=\"col.id\">\n                @if (col.id === 'actions' && hasActionsColumn()) {\n                  <!-- Auto row-actions cell: View / Edit / Duplicate / Delete,\n                       gated by [show*Action] flags + ScreenContext perms. -->\n                  <ef-row-actions\n                    [items]=\"defaultRowActions(row)\"\n                    [context]=\"rowActionsContext()\"\n                  />\n                } @else {\n                  <ng-container\n                    *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col, index: i }\"\n                  ></ng-container>\n                }\n                          </td>\n            }\n          </tr>\n        } @empty {\n          <!-- Placeholder rows keep the real columns, so the table that\n               arrives lands where the shimmer already was instead of\n               reflowing the page under the reader's eyes. -->\n          @if (showSkeleton()) {\n            @for (line of skeletonLines(); track line) {\n              <tr>\n                @if (reorderable()) {\n                  <td class=\"tbl-drag\"></td>\n                }\n                @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n                  <td [class]=\"cellAlignClass(col)\" [attr.data-col]=\"col.id\">\n                    <ef-skeleton variant=\"text\" [rows]=\"1\" />\n                  </td>\n                }\n              </tr>\n            }\n          } @else if (showError()) {\n            <!-- The failure replaces the body, so it spans the full row \u2014\n                 crammed into column one it reads as a value, not a state. -->\n            <tr>\n              <td [attr.colspan]=\"effectiveColumns().length + (reorderable() ? 1 : 0)\">\n                <ng-container *ngTemplateOutlet=\"errorStateTpl\"></ng-container>\n              </td>\n            </tr>\n          } @else {\n            <tr>\n              <td [attr.colspan]=\"effectiveColumns().length + (reorderable() ? 1 : 0)\">\n                <ng-content select=\"[empty-state]\">\n                  <ng-container *ngTemplateOutlet=\"defaultEmptyTpl\"></ng-container>\n                </ng-content>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n    </div>\n  }\n\n  <!-- \u2500\u2500 PAGER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <!-- Paging controls for an empty result set are chrome with nothing to\n       page, so they stay out of the way until there is something to move\n       through. -->\n  @if (!hidePager() && rows().length > 0) {\n    <ef-pager\n      [pageNumber]=\"pageNumber()\"\n      [pageSize]=\"pageSize()\"\n      [totalCount]=\"totalCount()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      (pageChange)=\"pageChange.emit($event)\"\n      (pageSizeChange)=\"pageSizeChange.emit($event)\"\n    />\n  }\n</div>\n\n<!-- \u2500\u2500 DEFAULT EMPTY STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Rendered when a screen projects nothing into [empty-state] /\n     [empty-state-mobile]. It words itself from `searchTerm`, because\n     \"nothing matched what you typed\" and \"there is nothing here yet\"\n     are different situations needing different ways out. -->\n<ng-template #defaultEmptyTpl>\n  <div class=\"tbl-empty\">\n    <i\n      class=\"pi tbl-empty__icon\"\n      [class.pi-search]=\"!!searchTerm()\"\n      [class.pi-inbox]=\"!searchTerm()\"\n      aria-hidden=\"true\"\n    ></i>\n\n    @if (searchTerm()) {\n      <p class=\"tbl-empty__title\">\n        {{ 'common_empty_no_results' | translate: { term: searchTerm() } }}\n      </p>\n      <p class=\"tbl-empty__hint\">{{ 'common_empty_no_results_hint' | translate }}</p>\n      <button class=\"btn btn-sm tbl-empty__action\" type=\"button\" (click)=\"clearSearch.emit()\">\n        <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n        {{ 'common_empty_clear_filters' | translate }}\n      </button>\n    } @else {\n      <p class=\"tbl-empty__title\">{{ 'common_empty_none_yet' | translate }}</p>\n      <p class=\"tbl-empty__hint\">{{ 'common_empty_none_yet_hint' | translate }}</p>\n    }\n  </div>\n</ng-template>\n\n<!-- \u2500\u2500 ERROR STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     A request that failed and came back with nothing is not an empty\n     collection, and must never borrow its words: \"nothing here yet\" is\n     a confident false statement about the operator's data, and they may\n     act on it. So this replaces the empty state outright, projected\n     [empty-state] included \u2014 a screen's own \"create your first client\"\n     copy is just as wrong here as the default.\n\n     It says nothing about *what* failed. `errorMsg` is `err.message`\n     from the HTTP layer, and a status line or an exception string tells\n     an operator nothing they can act on; it survives on the head chip's\n     `data-error` attribute, for whoever is reading the DOM. This carries\n     the two things that help: their data is intact, and the way to try\n     again.\n\n     role=\"alert\" goes on this div, never on the <tr> / <td> / <li> that\n     hosts it \u2014 a role on a row or cell takes the table's semantics down\n     with it. It fires on insertion, which is exactly when @if adds it. -->\n<ng-template #errorStateTpl>\n  <div class=\"tbl-empty tbl-empty--error\" role=\"alert\">\n    <i class=\"pi pi-exclamation-triangle tbl-empty__icon\" aria-hidden=\"true\"></i>\n    <p class=\"tbl-empty__title\">{{ 'common_error_load_failed' | translate }}</p>\n    <p class=\"tbl-empty__hint\">{{ 'common_error_load_failed_hint' | translate }}</p>\n    <button class=\"btn btn-sm tbl-empty__action\" type=\"button\" (click)=\"retry.emit()\">\n      <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n      {{ 'common_retry' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<!-- Header label, shared by the sortable and plain header cells so the\n     projection rules stay in one place. -->\n<ng-template #headerLabelTpl let-col=\"col\">\n  @if (headerTemplate(col.id); as headerTpl) {\n    <ng-container *ngTemplateOutlet=\"headerTpl; context: { $implicit: col, col: col }\"></ng-container>\n  } @else if (col.headerKey) {\n    <span>{{ col.headerKey | translate }}</span>\n  } @else if (col.header) {\n    <span>{{ col.header }}</span>\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0}.tbl thead th.is-sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl thead th.is-sortable:hover{color:var(--text)}.tbl tbody tr.is-row-clickable{cursor:pointer}.tbl-tools{display:flex;gap:6px;align-items:center}.tbl-tool{position:relative}.tbl-tool>.btn.open{color:var(--text);background:var(--paper)}.tbl-tool__menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:40;min-width:212px;max-height:340px;overflow-y:auto;padding:6px;display:grid;gap:1px;background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--shadow-3);animation:row-actions-menu-in var(--t-base) var(--ease-spring)}.tbl-tool__menu--wide{min-width:248px}.tbl-tool__menu button{appearance:none;background:transparent;border:0;width:100%;text-align:start;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out)}.tbl-tool__menu button:hover,.tbl-tool__menu button:focus-visible{background:var(--paper);outline:0}.tbl-tool__menu button>.pi{width:16px;flex:none;font-size:14px;color:var(--muted)}.tbl-tool__menu button.is-active>.pi{color:var(--module, var(--text))}.tbl-tool__label{flex:1 1 auto;min-width:0}.tbl-tool__check{color:var(--module, var(--text))}.tbl-tool__sep{margin:5px 2px;border-top:1px solid var(--rule)}.tbl-wrap[data-density=compact] .tbl tbody td{--tbl-cell-pad-block: 4px;padding-top:var(--tbl-cell-pad-block);padding-bottom:var(--tbl-cell-pad-block)}.tbl-wrap[data-density=comfortable] .tbl tbody td{--tbl-cell-pad-block: 16px;padding-top:var(--tbl-cell-pad-block);padding-bottom:var(--tbl-cell-pad-block)}.mlist{list-style:none;margin:0;padding:0;display:grid}.mrow{border-top:1px solid var(--rule)}.mrow:first-child{border-top:0}.mrow__head{display:flex;align-items:flex-start;gap:var(--s-3);padding:12px var(--s-4);min-height:var(--hit-touch)}.mrow__head.is-tappable{cursor:pointer}.mrow__head.is-tappable:active{background:var(--paper)}.mrow__lead{flex:1;min-width:0;display:grid;gap:2px}.mrow__primary{font-weight:700;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrow__secondary{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:12.5px;color:var(--text-mute);min-width:0}.mrow__secondary .mrow__sec-part+.mrow__sec-part:before{content:\"\\b7\";margin-inline-end:6px;color:var(--text-soft)}.mrow__trail{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);flex-shrink:0;min-height:20px}.mrow__actions{display:inline-flex}.mrow__detail{margin:0;padding:0 var(--s-4) 12px;display:grid;gap:1px}.mrow__field{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding:7px 0;border-top:1px solid var(--rule-soft)}.mrow__field dt{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute);flex-shrink:0}.mrow__field dd{margin:0;font-size:13.5px;color:var(--text);text-align:end;min-width:0;overflow-wrap:anywhere}.mrow__more{appearance:none;width:100%;background:transparent;border:0;border-top:1px solid var(--rule-soft);padding:10px;font:inherit;font-size:13px;font-weight:600;color:var(--tenant-500);cursor:pointer}.mlist[data-layout=card]{gap:var(--s-3);padding:var(--s-3) var(--s-3) 0}.mlist[data-layout=card] .mrow{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper-alt);overflow:hidden}.mlist[data-layout=card] .mrow__head{border-bottom:1px solid var(--rule)}.mrow__chevron{font-size:11px;color:var(--text-soft);transition:transform var(--t-fast) var(--ease-out);flex-shrink:0}.mrow__chevron.is-open{transform:rotate(180deg);color:var(--text-mute)}.mrow__head.is-tappable:focus-visible{outline:2px solid var(--tenant-400);outline-offset:-2px}.mrow__more{display:flex;align-items:center;justify-content:center;gap:6px}.tbl-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);padding:var(--s-9) var(--s-4);text-align:center}.tbl-empty__icon{font-size:28px;line-height:1;color:var(--ink-400);margin-block-end:var(--s-1)}.tbl-empty__title{margin:0;font-size:15px;font-weight:600;color:var(--text);max-inline-size:46ch;overflow-wrap:break-word}.tbl-empty__hint{margin:0;font-size:13px;color:var(--ink-600);max-inline-size:52ch;text-wrap:pretty}.tbl-empty__action{margin-block-start:var(--s-3);min-block-size:var(--hit-base)}.tbl-empty--error .tbl-empty__icon{color:var(--st-cancelled-fg)}.mrow--empty{padding:0}.mrow--skeleton{padding:12px var(--s-4)}@media(max-width:767px){.tbl-empty{padding:var(--s-7) var(--s-4)}.tbl-empty__action{min-block-size:var(--hit-touch)}}.pi.is-spinning{animation:ef-export-spin .9s linear infinite}@keyframes ef-export-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.pi.is-spinning{animation:none}}.tbl th.tbl-drag-h,.tbl td.tbl-drag{width:28px;padding-inline:4px 0;text-align:center}.tbl td.tbl-drag{cursor:default}.tbl .tbl-drag__grip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:26px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-soft);cursor:grab;touch-action:none;transition:background var(--t-fast, .14s) var(--ease-out, ease-out),color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl .tbl-drag__grip:hover{background:var(--paper);color:var(--text)}.tbl .tbl-drag__grip:focus-visible{outline:2px solid var(--tenant, var(--rule));outline-offset:1px}.tbl .tbl-drag__grip:active{cursor:grabbing}.tbl .tbl-drag__grip i{font-size:12px}.tbl tbody tr.is-dragging>td{background:var(--paper);opacity:.55}.tbl tbody tr.is-drop-target>td{box-shadow:inset 0 2px 0 var(--tenant, var(--rule))}.tbl.tbl--fixed{table-layout:fixed}.mrow__disclosure{appearance:none;background:transparent;border:0;padding:0;margin:0;display:inline-grid;place-items:center;color:var(--text-mute);cursor:pointer;position:relative}.mrow__disclosure:after{content:\"\";position:absolute;top:50%;left:50%;width:var(--hit-touch);height:var(--hit-touch);transform:translate(-50%,-50%)}.mrow__disclosure:focus-visible{outline:2px solid color-mix(in srgb,var(--ink-active) 40%,transparent);outline-offset:2px;border-radius:var(--r-pill)}@media(pointer:coarse){.mrow__actions+.mrow__disclosure{margin-inline-start:calc((var(--hit-touch) - 11px) / 2 - var(--s-2) + 1px)}}.tbl tbody tr.is-disabled{cursor:not-allowed}.tbl tbody tr.is-disabled td,.mrow.is-disabled .mrow__head{opacity:.5}.mrow.is-disabled .mrow__head{cursor:not-allowed}.tbl-head:has(>.count:empty):has(>.tbl-tools:empty){display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfPagerComponent, selector: "ef-pager", inputs: ["pageNumber", "pageSize", "totalCount", "pageSizeOptions", "linesPerPageLabelKey", "ofLabelKey", "prevLabelKey", "nextLabelKey", "firstLabelKey", "lastLabelKey", "hideSize"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: EfStatusChipComponent, selector: "ef-status-chip", inputs: ["referenceKey", "code", "color", "label", "labelKey", "hideDot", "showCode"] }, { kind: "component", type: EfSkeletonComponent, selector: "ef-skeleton", inputs: ["variant", "rows", "height"] }, { kind: "component", type: EfRowActionsComponent, selector: "ef-row-actions", inputs: ["items", "context", "triggerIcon", "triggerAriaKey", "disabled", "menuLeft"], outputs: ["opened", "closed"] }, { kind: "directive", type: EfOverflowTooltipDirective, selector: "[efOverflowTooltip]" }, { kind: "directive", type: EfTooltipDirective, selector: "[efTooltip]" }, { kind: "pipe", type: i1$3.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$3.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 }, rowPressed: { classPropertyName: "rowPressed", publicName: "rowPressed", isSignal: true, isRequired: false, transformFunction: null }, rowDisabled: { classPropertyName: "rowDisabled", publicName: "rowDisabled", 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 }, rowActionState: { classPropertyName: "rowActionState", publicName: "rowActionState", isSignal: true, isRequired: false, transformFunction: null }, showDensityControl: { classPropertyName: "showDensityControl", publicName: "showDensityControl", isSignal: true, isRequired: false, transformFunction: null }, showColumnPicker: { classPropertyName: "showColumnPicker", publicName: "showColumnPicker", isSignal: true, isRequired: false, transformFunction: null }, showExportControl: { classPropertyName: "showExportControl", publicName: "showExportControl", isSignal: true, isRequired: false, transformFunction: null }, exporting: { classPropertyName: "exporting", publicName: "exporting", isSignal: true, isRequired: false, transformFunction: null }, screenContext: { classPropertyName: "screenContext", publicName: "screenContext", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, tableKey: { classPropertyName: "tableKey", publicName: "tableKey", isSignal: true, isRequired: false, transformFunction: null }, defaultDensity: { classPropertyName: "defaultDensity", publicName: "defaultDensity", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, fixedLayout: { classPropertyName: "fixedLayout", publicName: "fixedLayout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", rowDoubleClick: "rowDoubleClick", rowAction: "rowAction", exportRequest: "exportRequest", clearSearch: "clearSearch", retry: "retry", rowReorder: "rowReorder" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "bodyTemplates", predicate: EfColumnTemplateDirective }, { propertyName: "headerTemplates", predicate: EfColumnHeaderTemplateDirective }], ngImport: i0, template: "<!-- One cell renderer, shared by the table, the mobile row and the mobile\n     detail. A new column type is added here once, not three times. -->\n<ng-template #cellTpl let-row let-col=\"col\" let-index=\"index\">\n  @if (bodyTemplate(col.id); as bodyTpl) {\n    <ng-container *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, col: col, index: index }\"></ng-container>\n  } @else {\n              @switch (col.type) {\n                @case ('number') {\n                  {{ $any(cellValue(row, col)) | number:numberFormat(col):col.locale }}\n                }\n                @case ('money') {\n                  {{ $any(cellValue(row, col)) | currency:(col.currencyCode || 'EUR'):(col.currencyDisplay || 'symbol'):numberFormat(col):col.locale }}\n                }\n                @case ('date') {\n                  {{ $any(cellValue(row, col)) | date:(col.dateFormat || 'dd/MM/yyyy'):undefined:col.locale }}\n                }\n                @case ('datetime') {\n                  {{ $any(cellValue(row, col)) | date:(col.dateFormat || 'dd/MM/yyyy HH:mm'):undefined:col.locale }}\n                }\n                @case ('boolean') {\n                  @if (cellValue(row, col)) {\n                    <span class=\"bool yes\"><span class=\"dot\"></span> \u2713</span>\n                  } @else {\n                    <span class=\"bool no\"><span class=\"dot\"></span> \u2014</span>\n                  }\n                }\n                @case ('mono') {\n                  <span class=\"ref\">{{ cellValue(row, col) }}</span>\n                }\n                @case ('chip') {\n                  <span [class]=\"'chip ' + (col.chipPrefix || 'chip-') + cellValue(row, col)\">\n                    \u25CF {{ cellValue(row, col) }}\n                  </span>\n                }\n                @case ('status') {\n                  <ef-status-chip\n                    [referenceKey]=\"col.referenceKey || ''\"\n                    [code]=\"$any(cellValue(row, col))\"\n                  />\n                }\n                @case ('reference') {\n                  {{ resolveReference(cellValue(row, col), col) }}\n                }\n                @default {\n                  {{ cellValue(row, col) }}\n                }\n              }\n  }\n</ng-template>\n\n<!-- .has-open-menu unclips the shell for the Densit\u00E9 / Colonnes menus,\n     which hang below .tbl-head. Row menus are fixed to the viewport\n     (ef-row-actions) and need no lift; counting them also left the shell\n     unclipped for good when a row went while its menu was open. -->\n<div class=\"tbl-wrap\" [class.has-open-menu]=\"openTool() !== null\" [attr.data-density]=\"density()\">\n  <!-- \u2500\u2500 HEAD ROW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"tbl-head\">\n    <div class=\"count small\">\n      @if (loading()) {\n        <span>{{ loadingKey() | translate }}</span>\n      } @else if (errorMsg()) {\n        <!-- A refresh that failed on top of rows already on screen keeps the\n             rows, so this chip is the only sign anything went wrong \u2014 and the\n             rows it sits above may now be stale. It has to say so, and say it\n             in the product's words: `errorMsg` is `err.message` from the HTTP\n             layer, and \"500 Internal Server Error\" tells an operator nothing\n             they can act on.\n\n             The raw string stays on `data-error`, where devtools can read it\n             and no reader ever meets it. `title` was the obvious place and is\n             the wrong one: it renders the exception in a tooltip, which is\n             precisely what this change exists to stop, and it is unreachable\n             on touch besides.\n\n             role=\"status\", not \"alert\": polite is right for a signal beside\n             rows that are still usable, and when the body is showing the\n             error state it already carries the alert \u2014 one failure must not\n             interrupt a screen-reader twice. -->\n        <span\n          role=\"status\"\n          [attr.data-error]=\"errorMsg()\"\n          style=\"color: var(--st-cancelled-fg); font-weight: 600;\"\n          >\u26A0 {{ 'common_error_refresh_failed' | translate }}</span\n        >\n      } @else {\n        <ng-content select=\"[tbl-head-info]\"></ng-content>\n      }\n    </div>\n    <div class=\"tbl-tools\">\n      <ng-content select=\"[tbl-head-actions]\"></ng-content>\n\n      @if (canExport()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [disabled]=\"exporting()\"\n            [attr.aria-busy]=\"exporting()\"\n            (click)=\"requestExport()\"\n          >\n            <i\n              class=\"pi\"\n              [class.pi-download]=\"!exporting()\"\n              [class.pi-spinner]=\"exporting()\"\n              [class.is-spinning]=\"exporting()\"\n              aria-hidden=\"true\"\n            ></i>\n            {{ (exporting() ? 'common_export_running' : 'common_export') | translate }}\n          </button>\n        </div>\n      }\n\n      @if (showDensityControl()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'density'\"\n            [attr.aria-expanded]=\"openTool() === 'density'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('density')\"\n          >\n            <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n            {{ 'common_density' | translate }}\n          </button>\n          @if (openTool() === 'density') {\n            <div class=\"tbl-tool__menu\" role=\"menu\">\n              @for (opt of densityOptions; track opt.value) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemradio\"\n                  [attr.aria-checked]=\"density() === opt.value\"\n                  [class.is-active]=\"density() === opt.value\"\n                  (click)=\"setDensity(opt.value)\"\n                >\n                  <i class=\"pi\" [ngClass]=\"opt.icon\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{ opt.labelKey | translate }}</span>\n                  @if (density() === opt.value) {\n                    <i class=\"pi pi-check tbl-tool__check\" aria-hidden=\"true\"></i>\n                  }\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @if (showColumnPicker()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'columns'\"\n            [attr.aria-expanded]=\"openTool() === 'columns'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('columns')\"\n          >\n            <i class=\"pi pi-th-large\" aria-hidden=\"true\"></i>\n            {{ 'common_columns' | translate }}\n          </button>\n          @if (openTool() === 'columns') {\n            <div class=\"tbl-tool__menu tbl-tool__menu--wide\" role=\"menu\">\n              @for (col of hideableColumns(); track col.id) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemcheckbox\"\n                  [attr.aria-checked]=\"!isColumnHidden(col.id)\"\n                  [class.is-active]=\"!isColumnHidden(col.id)\"\n                  (click)=\"toggleColumn(col.id)\"\n                >\n                  <i class=\"pi\" [class.pi-check]=\"!isColumnHidden(col.id)\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{\n                    col.headerKey ? (col.headerKey | translate) : (col.header || col.id)\n                  }}</span>\n                </button>\n              }\n              <div class=\"tbl-tool__sep\"></div>\n              <button type=\"button\" role=\"menuitem\" (click)=\"resetColumns()\">\n                <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n                <span class=\"tbl-tool__label\">{{ 'common_columns_reset' | translate }}</span>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 TABLE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (isMobile()) {\n    <!-- \u2500\u2500 MOBILE LIST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         A six-column table on a 390px screen either overflows or\n         squeezes every column to nothing, so the rows become a list.\n         Same columns, same cell renderers; each column just declares\n         (or is given) a role. Both shapes expand to the same detail \u2014\n         they differ only in how much they show collapsed. -->\n    <ul\n      class=\"mlist\"\n      [attr.data-layout]=\"effectiveMobileLayout()\"\n      [attr.aria-busy]=\"loading() ? 'true' : null\"\n    >\n      @for (row of rows(); track trackByRow($index, row); let i = $index) {\n        <li class=\"mrow\" [class.is-open]=\"isExpanded(row, i)\" [class.is-disabled]=\"isRowDisabled(row)\">\n          <div\n            class=\"mrow__head\"\n            [class.is-tappable]=\"headIsControl()\"\n            [attr.role]=\"headIsControl() ? 'button' : null\"\n            [attr.tabindex]=\"headIsControl() ? 0 : null\"\n            [attr.aria-pressed]=\"pressedAttr(row)\"\n            [attr.aria-disabled]=\"isRowDisabled(row) ? 'true' : null\"\n            [attr.aria-expanded]=\"!rowNavigable() && hasDetail() ? isExpanded(row, i) : null\"\n            (click)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.enter)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.space)=\"onRowHeadActivate(row, i, $event)\"\n          >\n            <div class=\"mrow__lead\">\n              @if (primaryColumn(); as pc) {\n                <span class=\"mrow__primary\" efOverflowTooltip efTooltip efTooltipPosition=\"top\">\n                  <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: pc, index: i }\"></ng-container>\n                </span>\n              }\n              @if (effectiveMobileLayout() === 'row' && secondaryColumns().length) {\n                <span class=\"mrow__secondary\">\n                  @for (sc of secondaryColumns(); track sc.id) {\n                    @if (hasCellContent(row, sc)) {\n                      <span class=\"mrow__sec-part\">\n                        <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: sc, index: i }\"></ng-container>\n                      </span>\n                    }\n                  }\n                </span>\n              }\n            </div>\n\n            <div class=\"mrow__trail\">\n              @if (statusColumn(); as st) {\n                <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: st, index: i }\"></ng-container>\n              }\n              @if (hasActionsColumn()) {\n                <span class=\"mrow__actions\">\n                  <ef-row-actions [items]=\"defaultRowActions(row)\" [context]=\"rowActionsContext()\" />\n                </span>\n              }\n              @if (hasDetail() && effectiveMobileLayout() === 'row') {\n                @if (rowNavigable()) {\n                  <!-- The head opens the record, so expansion needs a control\n                       of its own. Same glyph, promoted from decoration to a\n                       button that carries the state it was already drawing. -->\n                  <button\n                    type=\"button\"\n                    class=\"mrow__disclosure\"\n                    [attr.aria-expanded]=\"isExpanded(row, i)\"\n                    [attr.aria-label]=\"(isExpanded(row, i) ? 'common_view_less' : 'common_view_more') | translate\"\n                    (click)=\"onDisclosureToggle(row, i, $event)\"\n                  >\n                    <i\n                      class=\"pi pi-chevron-down mrow__chevron\"\n                      [class.is-open]=\"isExpanded(row, i)\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </button>\n                } @else {\n                  <!-- Says the row opens, and which way it is now. Decorative:\n                       the whole head is the control, and it carries the state. -->\n                  <i\n                    class=\"pi pi-chevron-down mrow__chevron\"\n                    [class.is-open]=\"isExpanded(row, i)\"\n                    aria-hidden=\"true\"\n                  ></i>\n                }\n              }\n            </div>\n          </div>\n\n          @if (visibleDetail(row, i).length) {\n            <dl class=\"mrow__detail\">\n              @for (col of visibleDetail(row, i); track col.id) {\n                <div class=\"mrow__field\">\n                  <dt>{{ $any(col).headerKey ? ($any(col).headerKey | translate) : $any(col).header }}</dt>\n                  <dd [class]=\"cellAlignClass($any(col))\">\n                    <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col, index: i }\"></ng-container>\n                  </dd>\n                </div>\n              }\n            </dl>\n          }\n\n          @if (hasMoreThanPreview() && effectiveMobileLayout() === 'card') {\n            <button class=\"mrow__more\" type=\"button\" (click)=\"toggleExpanded(row, i)\">\n              <span>{{ (isExpanded(row, i) ? 'common_view_less' : 'common_view_more') | translate }}</span>\n              <i class=\"pi pi-chevron-down mrow__chevron\" [class.is-open]=\"isExpanded(row, i)\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </li>\n      } @empty {\n        <!-- No rows has three meanings and they must not share a screen:\n             still loading is a skeleton, the request failed is the error\n             state, finished-and-empty is the empty state. Saying \"nothing\n             here yet\" to someone whose data is still in flight \u2014 or whose\n             request just failed \u2014 is a lie the whole time it shows. -->\n        @if (showSkeleton()) {\n          @for (line of skeletonLines(); track line) {\n            <li class=\"mrow mrow--skeleton\">\n              <ef-skeleton variant=\"text\" [rows]=\"2\" />\n            </li>\n          }\n        } @else if (showError()) {\n          <li class=\"mrow mrow--empty\">\n            <ng-container *ngTemplateOutlet=\"errorStateTpl\"></ng-container>\n          </li>\n        } @else {\n          <li class=\"mrow mrow--empty\">\n            <ng-content select=\"[empty-state-mobile]\">\n              <ng-container *ngTemplateOutlet=\"defaultEmptyTpl\"></ng-container>\n            </ng-content>\n          </li>\n        }\n      }\n    </ul>\n  } @else {\n    <!-- The table scrolls sideways inside its own box. Between 768px and\n         the table's natural width (about 900-1100px) the columns past the\n         edge were simply clipped by .tbl-wrap, with no way to reach them.\n         .tbl-wrap stays the clipping shell, so the head and the pager do\n         not scroll with the rows. Row menus are fixed to the viewport\n         (ef-row-actions), so this scroller never clips them. -->\n    <div class=\"tbl-scroll\">\n    <table class=\"tbl\" [class.tbl--fixed]=\"fixedLayout()\">\n      <thead>\n        <tr>\n          @if (reorderable()) {\n            <th class=\"tbl-drag-h\" aria-hidden=\"true\"></th>\n          }\n          @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n            <!-- A sortable header is a real <button> inside the <th>, not a\n                 click handler on the cell. The cell carries aria-sort so the\n                 current order is announced; the arrow stays decorative.\n                 Sorting was previously mouse-only and silent to assistive\n                 technology, on every list screen in the product. -->\n            <th\n              [class]=\"headerAlignClass(col)\"\n              [class.is-sortable]=\"col.sortable\"\n              [style.width]=\"col.width || null\"\n              [attr.data-col]=\"col.id\"\n              [attr.aria-sort]=\"ariaSort(col)\"\n            >\n              @if (col.sortable) {\n                <button type=\"button\" class=\"tbl-sort\" (click)=\"onHeaderClick(col)\">\n                  <ng-container *ngTemplateOutlet=\"headerLabelTpl; context: { col: col }\"></ng-container>\n                  @if (sortIndicator(col)) {\n                    <span aria-hidden=\"true\" class=\"tbl-sort__arrow\">{{ sortIndicator(col) }}</span>\n                  }\n                </button>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"headerLabelTpl; context: { col: col }\"></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody [attr.aria-busy]=\"loading() ? 'true' : null\">\n        @for (row of rows(); track trackByRow($index, row); let i = $index) {\n          <tr\n            [class.is-row-clickable]=\"rowDoubleClickable()\"\n            [class.is-dragging]=\"dragFrom() === i\"\n            [class.is-drop-target]=\"dragFrom() !== null && dragFrom() !== i && dragTo() === i\"\n            [attr.tabindex]=\"rowDoubleClickable() ? 0 : null\"\n            [attr.role]=\"rowDoubleClickable() ? 'button' : null\"\n            [attr.aria-pressed]=\"pressedAttr(row)\"\n            [attr.aria-disabled]=\"isRowDisabled(row) ? 'true' : null\"\n            [class.is-disabled]=\"isRowDisabled(row)\"\n            (click)=\"onRowClick(row, $event)\"\n            (keydown.enter)=\"onRowKeydown(row, $event)\"\n            (keydown.space)=\"onRowSpace(row, $event)\"\n          >\n            @if (reorderable()) {\n              <td class=\"tbl-drag\">\n                <!-- The row is draggable only by this handle, so a drag never\n                     starts from a cell the operator meant to click or select.\n                     Arrow keys move the row for anyone not using a pointer. -->\n                <button\n                  type=\"button\"\n                  class=\"tbl-drag__grip\"\n                  [attr.aria-label]=\"'common_reorder_row' | translate\"\n                  (pointerdown)=\"onDragPointerDown(i, $event)\"\n                  (pointermove)=\"onDragPointerMove($event)\"\n                  (pointerup)=\"onDragPointerUp()\"\n                  (pointercancel)=\"onDragPointerUp()\"\n                  (keydown)=\"onDragKeydown(i, $event)\"\n                >\n                  <i class=\"pi pi-ellipsis-v\" aria-hidden=\"true\"></i>\n                </button>\n              </td>\n            }\n            @for (col of effectiveColumns(); track trackByColumn($index, col); let colIdx = $index) {\n              <td efOverflowTooltip efTooltip efTooltipPosition=\"top\" [class]=\"cellAlignClass(col)\" [attr.data-col]=\"col.id\">\n                @if (col.id === 'actions' && hasActionsColumn()) {\n                  <!-- Auto row-actions cell: View / Edit / Duplicate / Delete,\n                       gated by [show*Action] flags + ScreenContext perms. -->\n                  <ef-row-actions\n                    [items]=\"defaultRowActions(row)\"\n                    [context]=\"rowActionsContext()\"\n                  />\n                } @else {\n                  <ng-container\n                    *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col, index: i }\"\n                  ></ng-container>\n                }\n                          </td>\n            }\n          </tr>\n        } @empty {\n          <!-- Placeholder rows keep the real columns, so the table that\n               arrives lands where the shimmer already was instead of\n               reflowing the page under the reader's eyes. -->\n          @if (showSkeleton()) {\n            @for (line of skeletonLines(); track line) {\n              <tr>\n                @if (reorderable()) {\n                  <td class=\"tbl-drag\"></td>\n                }\n                @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n                  <td [class]=\"cellAlignClass(col)\" [attr.data-col]=\"col.id\">\n                    <ef-skeleton variant=\"text\" [rows]=\"1\" />\n                  </td>\n                }\n              </tr>\n            }\n          } @else if (showError()) {\n            <!-- The failure replaces the body, so it spans the full row \u2014\n                 crammed into column one it reads as a value, not a state. -->\n            <tr>\n              <td [attr.colspan]=\"effectiveColumns().length + (reorderable() ? 1 : 0)\">\n                <ng-container *ngTemplateOutlet=\"errorStateTpl\"></ng-container>\n              </td>\n            </tr>\n          } @else {\n            <tr>\n              <td [attr.colspan]=\"effectiveColumns().length + (reorderable() ? 1 : 0)\">\n                <ng-content select=\"[empty-state]\">\n                  <ng-container *ngTemplateOutlet=\"defaultEmptyTpl\"></ng-container>\n                </ng-content>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n    </div>\n  }\n\n  <!-- \u2500\u2500 PAGER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <!-- Paging controls for an empty result set are chrome with nothing to\n       page, so they stay out of the way until there is something to move\n       through. -->\n  @if (!hidePager() && rows().length > 0) {\n    <ef-pager\n      [pageNumber]=\"pageNumber()\"\n      [pageSize]=\"pageSize()\"\n      [totalCount]=\"totalCount()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      (pageChange)=\"pageChange.emit($event)\"\n      (pageSizeChange)=\"pageSizeChange.emit($event)\"\n    />\n  }\n</div>\n\n<!-- \u2500\u2500 DEFAULT EMPTY STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Rendered when a screen projects nothing into [empty-state] /\n     [empty-state-mobile]. It words itself from `searchTerm`, because\n     \"nothing matched what you typed\" and \"there is nothing here yet\"\n     are different situations needing different ways out. -->\n<ng-template #defaultEmptyTpl>\n  <div class=\"tbl-empty\">\n    <i\n      class=\"pi tbl-empty__icon\"\n      [class.pi-search]=\"!!searchTerm()\"\n      [class.pi-inbox]=\"!searchTerm()\"\n      aria-hidden=\"true\"\n    ></i>\n\n    @if (searchTerm()) {\n      <p class=\"tbl-empty__title\">\n        {{ 'common_empty_no_results' | translate: { term: searchTerm() } }}\n      </p>\n      <p class=\"tbl-empty__hint\">{{ 'common_empty_no_results_hint' | translate }}</p>\n      <button class=\"btn btn-sm tbl-empty__action\" type=\"button\" (click)=\"clearSearch.emit()\">\n        <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n        {{ 'common_empty_clear_filters' | translate }}\n      </button>\n    } @else {\n      <p class=\"tbl-empty__title\">{{ 'common_empty_none_yet' | translate }}</p>\n      <p class=\"tbl-empty__hint\">{{ 'common_empty_none_yet_hint' | translate }}</p>\n    }\n  </div>\n</ng-template>\n\n<!-- \u2500\u2500 ERROR STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     A request that failed and came back with nothing is not an empty\n     collection, and must never borrow its words: \"nothing here yet\" is\n     a confident false statement about the operator's data, and they may\n     act on it. So this replaces the empty state outright, projected\n     [empty-state] included \u2014 a screen's own \"create your first client\"\n     copy is just as wrong here as the default.\n\n     It says nothing about *what* failed. `errorMsg` is `err.message`\n     from the HTTP layer, and a status line or an exception string tells\n     an operator nothing they can act on; it survives on the head chip's\n     `data-error` attribute, for whoever is reading the DOM. This carries\n     the two things that help: their data is intact, and the way to try\n     again.\n\n     role=\"alert\" goes on this div, never on the <tr> / <td> / <li> that\n     hosts it \u2014 a role on a row or cell takes the table's semantics down\n     with it. It fires on insertion, which is exactly when @if adds it. -->\n<ng-template #errorStateTpl>\n  <div class=\"tbl-empty tbl-empty--error\" role=\"alert\">\n    <i class=\"pi pi-exclamation-triangle tbl-empty__icon\" aria-hidden=\"true\"></i>\n    <p class=\"tbl-empty__title\">{{ 'common_error_load_failed' | translate }}</p>\n    <p class=\"tbl-empty__hint\">{{ 'common_error_load_failed_hint' | translate }}</p>\n    <button class=\"btn btn-sm tbl-empty__action\" type=\"button\" (click)=\"retry.emit()\">\n      <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n      {{ 'common_retry' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<!-- Header label, shared by the sortable and plain header cells so the\n     projection rules stay in one place. -->\n<ng-template #headerLabelTpl let-col=\"col\">\n  @if (headerTemplate(col.id); as headerTpl) {\n    <ng-container *ngTemplateOutlet=\"headerTpl; context: { $implicit: col, col: col }\"></ng-container>\n  } @else if (col.headerKey) {\n    <span>{{ col.headerKey | translate }}</span>\n  } @else if (col.header) {\n    <span>{{ col.header }}</span>\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0}.tbl thead th.is-sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl thead th.is-sortable:hover{color:var(--text)}.tbl tbody tr.is-row-clickable{cursor:pointer}.tbl-tools{display:flex;gap:6px;align-items:center}.tbl-tool{position:relative}.tbl-tool>.btn.open{color:var(--text);background:var(--paper)}.tbl-tool__menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:40;min-width:212px;max-height:340px;overflow-y:auto;padding:6px;display:grid;gap:1px;background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--shadow-3);animation:row-actions-menu-in var(--t-base) var(--ease-spring)}.tbl-tool__menu--wide{min-width:248px}.tbl-tool__menu button{appearance:none;background:transparent;border:0;width:100%;text-align:start;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out)}.tbl-tool__menu button:hover,.tbl-tool__menu button:focus-visible{background:var(--paper);outline:0}.tbl-tool__menu button>.pi{width:16px;flex:none;font-size:14px;color:var(--muted)}.tbl-tool__menu button.is-active>.pi{color:var(--module, var(--text))}.tbl-tool__label{flex:1 1 auto;min-width:0}.tbl-tool__check{color:var(--module, var(--text))}.tbl-tool__sep{margin:5px 2px;border-top:1px solid var(--rule)}.tbl-wrap[data-density=compact] .tbl tbody td{--tbl-cell-pad-block: 4px;padding-top:var(--tbl-cell-pad-block);padding-bottom:var(--tbl-cell-pad-block)}.tbl-wrap[data-density=comfortable] .tbl tbody td{--tbl-cell-pad-block: 16px;padding-top:var(--tbl-cell-pad-block);padding-bottom:var(--tbl-cell-pad-block)}.mlist{list-style:none;margin:0;padding:0;display:grid}.mrow{border-top:1px solid var(--rule)}.mrow:first-child{border-top:0}.mrow__head{display:flex;align-items:flex-start;gap:var(--s-3);padding:12px var(--s-4);min-height:var(--hit-touch)}.mrow__head.is-tappable{cursor:pointer}.mrow__head.is-tappable:active{background:var(--paper)}.mrow__lead{flex:1;min-width:0;display:grid;gap:2px}.mrow__primary{font-weight:700;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrow__secondary{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:12.5px;color:var(--text-mute);min-width:0}.mrow__secondary .mrow__sec-part+.mrow__sec-part:before{content:\"\\b7\";margin-inline-end:6px;color:var(--text-soft)}.mrow__trail{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);flex-shrink:0;min-height:20px}.mrow__actions{display:inline-flex}.mrow__detail{margin:0;padding:0 var(--s-4) 12px;display:grid;gap:1px}.mrow__field{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding:7px 0;border-top:1px solid var(--rule-soft)}.mrow__field dt{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute);flex-shrink:0}.mrow__field dd{margin:0;font-size:13.5px;color:var(--text);text-align:end;min-width:0;overflow-wrap:anywhere}.mrow__more{appearance:none;width:100%;background:transparent;border:0;border-top:1px solid var(--rule-soft);padding:10px;font:inherit;font-size:13px;font-weight:600;color:var(--tenant-500);cursor:pointer}.mlist[data-layout=card]{gap:var(--s-3);padding:var(--s-3) var(--s-3) 0}.mlist[data-layout=card] .mrow{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper-alt);overflow:hidden}.mlist[data-layout=card] .mrow__head{border-bottom:1px solid var(--rule)}.mrow__chevron{font-size:11px;color:var(--text-soft);transition:transform var(--t-fast) var(--ease-out);flex-shrink:0}.mrow__chevron.is-open{transform:rotate(180deg);color:var(--text-mute)}.mrow__head.is-tappable:focus-visible{outline:2px solid var(--tenant-400);outline-offset:-2px}.mrow__more{display:flex;align-items:center;justify-content:center;gap:6px}.tbl-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);padding:var(--s-9) var(--s-4);text-align:center}.tbl-empty__icon{font-size:28px;line-height:1;color:var(--ink-400);margin-block-end:var(--s-1)}.tbl-empty__title{margin:0;font-size:15px;font-weight:600;color:var(--text);max-inline-size:46ch;overflow-wrap:break-word}.tbl-empty__hint{margin:0;font-size:13px;color:var(--ink-600);max-inline-size:52ch;text-wrap:pretty}.tbl-empty__action{margin-block-start:var(--s-3);min-block-size:var(--hit-base)}.tbl-empty--error .tbl-empty__icon{color:var(--st-cancelled-fg)}.mrow--empty{padding:0}.mrow--skeleton{padding:12px var(--s-4)}@media(max-width:767px){.tbl-empty{padding:var(--s-7) var(--s-4)}.tbl-empty__action{min-block-size:var(--hit-touch)}}.pi.is-spinning{animation:ef-export-spin .9s linear infinite}@keyframes ef-export-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.pi.is-spinning{animation:none}}.tbl th.tbl-drag-h,.tbl td.tbl-drag{width:28px;padding-inline:4px 0;text-align:center}.tbl td.tbl-drag{cursor:default}.tbl .tbl-drag__grip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:26px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-soft);cursor:grab;touch-action:none;transition:background var(--t-fast, .14s) var(--ease-out, ease-out),color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl .tbl-drag__grip:hover{background:var(--paper);color:var(--text)}.tbl .tbl-drag__grip:focus-visible{outline:2px solid var(--tenant, var(--rule));outline-offset:1px}.tbl .tbl-drag__grip:active{cursor:grabbing}.tbl .tbl-drag__grip i{font-size:12px}.tbl tbody tr.is-dragging>td{background:var(--paper);opacity:.55}.tbl tbody tr.is-drop-target>td{box-shadow:inset 0 2px 0 var(--tenant, var(--rule))}.tbl.tbl--fixed{table-layout:fixed}.mrow__disclosure{appearance:none;background:transparent;border:0;padding:0;margin:0;display:inline-grid;place-items:center;color:var(--text-mute);cursor:pointer;position:relative}.mrow__disclosure:after{content:\"\";position:absolute;top:50%;left:50%;width:var(--hit-touch);height:var(--hit-touch);transform:translate(-50%,-50%)}.mrow__disclosure:focus-visible{outline:2px solid color-mix(in srgb,var(--ink-active) 40%,transparent);outline-offset:2px;border-radius:var(--r-pill)}@media(pointer:coarse){.mrow__actions+.mrow__disclosure{margin-inline-start:calc((var(--hit-touch) - 11px) / 2 - var(--s-2) + 1px)}}.tbl tbody tr.is-disabled{cursor:not-allowed}.tbl tbody tr.is-disabled td,.mrow.is-disabled .mrow__head{opacity:.5}.mrow.is-disabled .mrow__head{cursor:not-allowed}.tbl-head:has(>.count:empty):has(>.tbl-tools:empty){display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfPagerComponent, selector: "ef-pager", inputs: ["pageNumber", "pageSize", "totalCount", "pageSizeOptions", "linesPerPageLabelKey", "ofLabelKey", "prevLabelKey", "nextLabelKey", "firstLabelKey", "lastLabelKey", "hideSize"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: EfStatusChipComponent, selector: "ef-status-chip", inputs: ["referenceKey", "code", "color", "label", "labelKey", "hideDot", "showCode"] }, { kind: "component", type: EfSkeletonComponent, selector: "ef-skeleton", inputs: ["variant", "rows", "height"] }, { kind: "component", type: EfRowActionsComponent, selector: "ef-row-actions", inputs: ["items", "context", "triggerIcon", "triggerAriaKey", "disabled", "menuLeft"], outputs: ["opened", "closed"] }, { kind: "directive", type: EfOverflowTooltipDirective, selector: "[efOverflowTooltip]" }, { kind: "directive", type: EfTooltipDirective, selector: "[efTooltip]" }, { kind: "pipe", type: i1$3.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$3.DatePipe, name: "date" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDataCardComponent, decorators: [{
             type: Component,
@@ -6071,7 +6377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         EfRowActionsComponent,
                         EfOverflowTooltipDirective,
                         EfTooltipDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- One cell renderer, shared by the table, the mobile row and the mobile\n     detail. A new column type is added here once, not three times. -->\n<ng-template #cellTpl let-row let-col=\"col\" let-index=\"index\">\n  @if (bodyTemplate(col.id); as bodyTpl) {\n    <ng-container *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, col: col, index: index }\"></ng-container>\n  } @else {\n              @switch (col.type) {\n                @case ('number') {\n                  {{ $any(cellValue(row, col)) | number:numberFormat(col):col.locale }}\n                }\n                @case ('money') {\n                  {{ $any(cellValue(row, col)) | currency:(col.currencyCode || 'EUR'):(col.currencyDisplay || 'symbol'):numberFormat(col):col.locale }}\n                }\n                @case ('date') {\n                  {{ $any(cellValue(row, col)) | date:(col.dateFormat || 'dd/MM/yyyy'):undefined:col.locale }}\n                }\n                @case ('datetime') {\n                  {{ $any(cellValue(row, col)) | date:(col.dateFormat || 'dd/MM/yyyy HH:mm'):undefined:col.locale }}\n                }\n                @case ('boolean') {\n                  @if (cellValue(row, col)) {\n                    <span class=\"bool yes\"><span class=\"dot\"></span> \u2713</span>\n                  } @else {\n                    <span class=\"bool no\"><span class=\"dot\"></span> \u2014</span>\n                  }\n                }\n                @case ('mono') {\n                  <span class=\"ref\">{{ cellValue(row, col) }}</span>\n                }\n                @case ('chip') {\n                  <span [class]=\"'chip ' + (col.chipPrefix || 'chip-') + cellValue(row, col)\">\n                    \u25CF {{ cellValue(row, col) }}\n                  </span>\n                }\n                @case ('status') {\n                  <ef-status-chip\n                    [referenceKey]=\"col.referenceKey || ''\"\n                    [code]=\"$any(cellValue(row, col))\"\n                  />\n                }\n                @case ('reference') {\n                  {{ resolveReference(cellValue(row, col), col) }}\n                }\n                @default {\n                  {{ cellValue(row, col) }}\n                }\n              }\n  }\n</ng-template>\n\n<!-- .has-open-menu unclips the shell for the Densit\u00E9 / Colonnes menus,\n     which hang below .tbl-head. Row menus are fixed to the viewport\n     (ef-row-actions) and need no lift; counting them also left the shell\n     unclipped for good when a row went while its menu was open. -->\n<div class=\"tbl-wrap\" [class.has-open-menu]=\"openTool() !== null\" [attr.data-density]=\"density()\">\n  <!-- \u2500\u2500 HEAD ROW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"tbl-head\">\n    <div class=\"count small\">\n      @if (loading()) {\n        <span>{{ loadingKey() | translate }}</span>\n      } @else if (errorMsg()) {\n        <!-- A refresh that failed on top of rows already on screen keeps the\n             rows, so this chip is the only sign anything went wrong \u2014 and the\n             rows it sits above may now be stale. It has to say so, and say it\n             in the product's words: `errorMsg` is `err.message` from the HTTP\n             layer, and \"500 Internal Server Error\" tells an operator nothing\n             they can act on.\n\n             The raw string stays on `data-error`, where devtools can read it\n             and no reader ever meets it. `title` was the obvious place and is\n             the wrong one: it renders the exception in a tooltip, which is\n             precisely what this change exists to stop, and it is unreachable\n             on touch besides.\n\n             role=\"status\", not \"alert\": polite is right for a signal beside\n             rows that are still usable, and when the body is showing the\n             error state it already carries the alert \u2014 one failure must not\n             interrupt a screen-reader twice. -->\n        <span\n          role=\"status\"\n          [attr.data-error]=\"errorMsg()\"\n          style=\"color: var(--st-cancelled-fg); font-weight: 600;\"\n          >\u26A0 {{ 'common_error_refresh_failed' | translate }}</span\n        >\n      } @else {\n        <ng-content select=\"[tbl-head-info]\"></ng-content>\n      }\n    </div>\n    <div class=\"tbl-tools\">\n      <ng-content select=\"[tbl-head-actions]\"></ng-content>\n\n      @if (canExport()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [disabled]=\"exporting()\"\n            [attr.aria-busy]=\"exporting()\"\n            (click)=\"requestExport()\"\n          >\n            <i\n              class=\"pi\"\n              [class.pi-download]=\"!exporting()\"\n              [class.pi-spinner]=\"exporting()\"\n              [class.is-spinning]=\"exporting()\"\n              aria-hidden=\"true\"\n            ></i>\n            {{ (exporting() ? 'common_export_running' : 'common_export') | translate }}\n          </button>\n        </div>\n      }\n\n      @if (showDensityControl()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'density'\"\n            [attr.aria-expanded]=\"openTool() === 'density'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('density')\"\n          >\n            <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n            {{ 'common_density' | translate }}\n          </button>\n          @if (openTool() === 'density') {\n            <div class=\"tbl-tool__menu\" role=\"menu\">\n              @for (opt of densityOptions; track opt.value) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemradio\"\n                  [attr.aria-checked]=\"density() === opt.value\"\n                  [class.is-active]=\"density() === opt.value\"\n                  (click)=\"setDensity(opt.value)\"\n                >\n                  <i class=\"pi\" [ngClass]=\"opt.icon\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{ opt.labelKey | translate }}</span>\n                  @if (density() === opt.value) {\n                    <i class=\"pi pi-check tbl-tool__check\" aria-hidden=\"true\"></i>\n                  }\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @if (showColumnPicker()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'columns'\"\n            [attr.aria-expanded]=\"openTool() === 'columns'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('columns')\"\n          >\n            <i class=\"pi pi-th-large\" aria-hidden=\"true\"></i>\n            {{ 'common_columns' | translate }}\n          </button>\n          @if (openTool() === 'columns') {\n            <div class=\"tbl-tool__menu tbl-tool__menu--wide\" role=\"menu\">\n              @for (col of hideableColumns(); track col.id) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemcheckbox\"\n                  [attr.aria-checked]=\"!isColumnHidden(col.id)\"\n                  [class.is-active]=\"!isColumnHidden(col.id)\"\n                  (click)=\"toggleColumn(col.id)\"\n                >\n                  <i class=\"pi\" [class.pi-check]=\"!isColumnHidden(col.id)\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{\n                    col.headerKey ? (col.headerKey | translate) : (col.header || col.id)\n                  }}</span>\n                </button>\n              }\n              <div class=\"tbl-tool__sep\"></div>\n              <button type=\"button\" role=\"menuitem\" (click)=\"resetColumns()\">\n                <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n                <span class=\"tbl-tool__label\">{{ 'common_columns_reset' | translate }}</span>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 TABLE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (isMobile()) {\n    <!-- \u2500\u2500 MOBILE LIST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         A six-column table on a 390px screen either overflows or\n         squeezes every column to nothing, so the rows become a list.\n         Same columns, same cell renderers; each column just declares\n         (or is given) a role. Both shapes expand to the same detail \u2014\n         they differ only in how much they show collapsed. -->\n    <ul\n      class=\"mlist\"\n      [attr.data-layout]=\"effectiveMobileLayout()\"\n      [attr.aria-busy]=\"loading() ? 'true' : null\"\n    >\n      @for (row of rows(); track trackByRow($index, row); let i = $index) {\n        <li class=\"mrow\" [class.is-open]=\"isExpanded(row, i)\" [class.is-disabled]=\"isRowDisabled(row)\">\n          <div\n            class=\"mrow__head\"\n            [class.is-tappable]=\"headIsControl()\"\n            [attr.role]=\"headIsControl() ? 'button' : null\"\n            [attr.tabindex]=\"headIsControl() ? 0 : null\"\n            [attr.aria-pressed]=\"pressedAttr(row)\"\n            [attr.aria-disabled]=\"isRowDisabled(row) ? 'true' : null\"\n            [attr.aria-expanded]=\"!rowNavigable() && hasDetail() ? isExpanded(row, i) : null\"\n            (click)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.enter)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.space)=\"onRowHeadActivate(row, i, $event)\"\n          >\n            <div class=\"mrow__lead\">\n              @if (primaryColumn(); as pc) {\n                <span class=\"mrow__primary\" efOverflowTooltip efTooltip efTooltipPosition=\"top\">\n                  <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: pc, index: i }\"></ng-container>\n                </span>\n              }\n              @if (effectiveMobileLayout() === 'row' && secondaryColumns().length) {\n                <span class=\"mrow__secondary\">\n                  @for (sc of secondaryColumns(); track sc.id) {\n                    <span class=\"mrow__sec-part\">\n                      <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: sc, index: i }\"></ng-container>\n                    </span>\n                  }\n                </span>\n              }\n            </div>\n\n            <div class=\"mrow__trail\">\n              @if (statusColumn(); as st) {\n                <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: st, index: i }\"></ng-container>\n              }\n              @if (hasActionsColumn()) {\n                <span class=\"mrow__actions\">\n                  <ef-row-actions [items]=\"defaultRowActions(row)\" [context]=\"rowActionsContext()\" />\n                </span>\n              }\n              @if (hasDetail() && effectiveMobileLayout() === 'row') {\n                @if (rowNavigable()) {\n                  <!-- The head opens the record, so expansion needs a control\n                       of its own. Same glyph, promoted from decoration to a\n                       button that carries the state it was already drawing. -->\n                  <button\n                    type=\"button\"\n                    class=\"mrow__disclosure\"\n                    [attr.aria-expanded]=\"isExpanded(row, i)\"\n                    [attr.aria-label]=\"(isExpanded(row, i) ? 'common_view_less' : 'common_view_more') | translate\"\n                    (click)=\"onDisclosureToggle(row, i, $event)\"\n                  >\n                    <i\n                      class=\"pi pi-chevron-down mrow__chevron\"\n                      [class.is-open]=\"isExpanded(row, i)\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </button>\n                } @else {\n                  <!-- Says the row opens, and which way it is now. Decorative:\n                       the whole head is the control, and it carries the state. -->\n                  <i\n                    class=\"pi pi-chevron-down mrow__chevron\"\n                    [class.is-open]=\"isExpanded(row, i)\"\n                    aria-hidden=\"true\"\n                  ></i>\n                }\n              }\n            </div>\n          </div>\n\n          @if (visibleDetail(row, i).length) {\n            <dl class=\"mrow__detail\">\n              @for (col of visibleDetail(row, i); track col.id) {\n                <div class=\"mrow__field\">\n                  <dt>{{ $any(col).headerKey ? ($any(col).headerKey | translate) : $any(col).header }}</dt>\n                  <dd [class]=\"cellAlignClass($any(col))\">\n                    <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col, index: i }\"></ng-container>\n                  </dd>\n                </div>\n              }\n            </dl>\n          }\n\n          @if (hasMoreThanPreview() && effectiveMobileLayout() === 'card') {\n            <button class=\"mrow__more\" type=\"button\" (click)=\"toggleExpanded(row, i)\">\n              <span>{{ (isExpanded(row, i) ? 'common_view_less' : 'common_view_more') | translate }}</span>\n              <i class=\"pi pi-chevron-down mrow__chevron\" [class.is-open]=\"isExpanded(row, i)\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </li>\n      } @empty {\n        <!-- No rows has three meanings and they must not share a screen:\n             still loading is a skeleton, the request failed is the error\n             state, finished-and-empty is the empty state. Saying \"nothing\n             here yet\" to someone whose data is still in flight \u2014 or whose\n             request just failed \u2014 is a lie the whole time it shows. -->\n        @if (showSkeleton()) {\n          @for (line of skeletonLines(); track line) {\n            <li class=\"mrow mrow--skeleton\">\n              <ef-skeleton variant=\"text\" [rows]=\"2\" />\n            </li>\n          }\n        } @else if (showError()) {\n          <li class=\"mrow mrow--empty\">\n            <ng-container *ngTemplateOutlet=\"errorStateTpl\"></ng-container>\n          </li>\n        } @else {\n          <li class=\"mrow mrow--empty\">\n            <ng-content select=\"[empty-state-mobile]\">\n              <ng-container *ngTemplateOutlet=\"defaultEmptyTpl\"></ng-container>\n            </ng-content>\n          </li>\n        }\n      }\n    </ul>\n  } @else {\n    <!-- The table scrolls sideways inside its own box. Between 768px and\n         the table's natural width (about 900-1100px) the columns past the\n         edge were simply clipped by .tbl-wrap, with no way to reach them.\n         .tbl-wrap stays the clipping shell, so the head and the pager do\n         not scroll with the rows. Row menus are fixed to the viewport\n         (ef-row-actions), so this scroller never clips them. -->\n    <div class=\"tbl-scroll\">\n    <table class=\"tbl\" [class.tbl--fixed]=\"fixedLayout()\">\n      <thead>\n        <tr>\n          @if (reorderable()) {\n            <th class=\"tbl-drag-h\" aria-hidden=\"true\"></th>\n          }\n          @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n            <!-- A sortable header is a real <button> inside the <th>, not a\n                 click handler on the cell. The cell carries aria-sort so the\n                 current order is announced; the arrow stays decorative.\n                 Sorting was previously mouse-only and silent to assistive\n                 technology, on every list screen in the product. -->\n            <th\n              [class]=\"headerAlignClass(col)\"\n              [class.is-sortable]=\"col.sortable\"\n              [style.width]=\"col.width || null\"\n              [attr.data-col]=\"col.id\"\n              [attr.aria-sort]=\"ariaSort(col)\"\n            >\n              @if (col.sortable) {\n                <button type=\"button\" class=\"tbl-sort\" (click)=\"onHeaderClick(col)\">\n                  <ng-container *ngTemplateOutlet=\"headerLabelTpl; context: { col: col }\"></ng-container>\n                  @if (sortIndicator(col)) {\n                    <span aria-hidden=\"true\" class=\"tbl-sort__arrow\">{{ sortIndicator(col) }}</span>\n                  }\n                </button>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"headerLabelTpl; context: { col: col }\"></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody [attr.aria-busy]=\"loading() ? 'true' : null\">\n        @for (row of rows(); track trackByRow($index, row); let i = $index) {\n          <tr\n            [class.is-row-clickable]=\"rowDoubleClickable()\"\n            [class.is-dragging]=\"dragFrom() === i\"\n            [class.is-drop-target]=\"dragFrom() !== null && dragFrom() !== i && dragTo() === i\"\n            [attr.tabindex]=\"rowDoubleClickable() ? 0 : null\"\n            [attr.role]=\"rowDoubleClickable() ? 'button' : null\"\n            [attr.aria-pressed]=\"pressedAttr(row)\"\n            [attr.aria-disabled]=\"isRowDisabled(row) ? 'true' : null\"\n            [class.is-disabled]=\"isRowDisabled(row)\"\n            (click)=\"onRowClick(row, $event)\"\n            (keydown.enter)=\"onRowKeydown(row, $event)\"\n            (keydown.space)=\"onRowSpace(row, $event)\"\n          >\n            @if (reorderable()) {\n              <td class=\"tbl-drag\">\n                <!-- The row is draggable only by this handle, so a drag never\n                     starts from a cell the operator meant to click or select.\n                     Arrow keys move the row for anyone not using a pointer. -->\n                <button\n                  type=\"button\"\n                  class=\"tbl-drag__grip\"\n                  [attr.aria-label]=\"'common_reorder_row' | translate\"\n                  (pointerdown)=\"onDragPointerDown(i, $event)\"\n                  (pointermove)=\"onDragPointerMove($event)\"\n                  (pointerup)=\"onDragPointerUp()\"\n                  (pointercancel)=\"onDragPointerUp()\"\n                  (keydown)=\"onDragKeydown(i, $event)\"\n                >\n                  <i class=\"pi pi-ellipsis-v\" aria-hidden=\"true\"></i>\n                </button>\n              </td>\n            }\n            @for (col of effectiveColumns(); track trackByColumn($index, col); let colIdx = $index) {\n              <td efOverflowTooltip efTooltip efTooltipPosition=\"top\" [class]=\"cellAlignClass(col)\" [attr.data-col]=\"col.id\">\n                @if (col.id === 'actions' && hasActionsColumn()) {\n                  <!-- Auto row-actions cell: View / Edit / Duplicate / Delete,\n                       gated by [show*Action] flags + ScreenContext perms. -->\n                  <ef-row-actions\n                    [items]=\"defaultRowActions(row)\"\n                    [context]=\"rowActionsContext()\"\n                  />\n                } @else {\n                  <ng-container\n                    *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col, index: i }\"\n                  ></ng-container>\n                }\n                          </td>\n            }\n          </tr>\n        } @empty {\n          <!-- Placeholder rows keep the real columns, so the table that\n               arrives lands where the shimmer already was instead of\n               reflowing the page under the reader's eyes. -->\n          @if (showSkeleton()) {\n            @for (line of skeletonLines(); track line) {\n              <tr>\n                @if (reorderable()) {\n                  <td class=\"tbl-drag\"></td>\n                }\n                @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n                  <td [class]=\"cellAlignClass(col)\" [attr.data-col]=\"col.id\">\n                    <ef-skeleton variant=\"text\" [rows]=\"1\" />\n                  </td>\n                }\n              </tr>\n            }\n          } @else if (showError()) {\n            <!-- The failure replaces the body, so it spans the full row \u2014\n                 crammed into column one it reads as a value, not a state. -->\n            <tr>\n              <td [attr.colspan]=\"effectiveColumns().length + (reorderable() ? 1 : 0)\">\n                <ng-container *ngTemplateOutlet=\"errorStateTpl\"></ng-container>\n              </td>\n            </tr>\n          } @else {\n            <tr>\n              <td [attr.colspan]=\"effectiveColumns().length + (reorderable() ? 1 : 0)\">\n                <ng-content select=\"[empty-state]\">\n                  <ng-container *ngTemplateOutlet=\"defaultEmptyTpl\"></ng-container>\n                </ng-content>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n    </div>\n  }\n\n  <!-- \u2500\u2500 PAGER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <!-- Paging controls for an empty result set are chrome with nothing to\n       page, so they stay out of the way until there is something to move\n       through. -->\n  @if (!hidePager() && rows().length > 0) {\n    <ef-pager\n      [pageNumber]=\"pageNumber()\"\n      [pageSize]=\"pageSize()\"\n      [totalCount]=\"totalCount()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      (pageChange)=\"pageChange.emit($event)\"\n      (pageSizeChange)=\"pageSizeChange.emit($event)\"\n    />\n  }\n</div>\n\n<!-- \u2500\u2500 DEFAULT EMPTY STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Rendered when a screen projects nothing into [empty-state] /\n     [empty-state-mobile]. It words itself from `searchTerm`, because\n     \"nothing matched what you typed\" and \"there is nothing here yet\"\n     are different situations needing different ways out. -->\n<ng-template #defaultEmptyTpl>\n  <div class=\"tbl-empty\">\n    <i\n      class=\"pi tbl-empty__icon\"\n      [class.pi-search]=\"!!searchTerm()\"\n      [class.pi-inbox]=\"!searchTerm()\"\n      aria-hidden=\"true\"\n    ></i>\n\n    @if (searchTerm()) {\n      <p class=\"tbl-empty__title\">\n        {{ 'common_empty_no_results' | translate: { term: searchTerm() } }}\n      </p>\n      <p class=\"tbl-empty__hint\">{{ 'common_empty_no_results_hint' | translate }}</p>\n      <button class=\"btn btn-sm tbl-empty__action\" type=\"button\" (click)=\"clearSearch.emit()\">\n        <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n        {{ 'common_empty_clear_filters' | translate }}\n      </button>\n    } @else {\n      <p class=\"tbl-empty__title\">{{ 'common_empty_none_yet' | translate }}</p>\n      <p class=\"tbl-empty__hint\">{{ 'common_empty_none_yet_hint' | translate }}</p>\n    }\n  </div>\n</ng-template>\n\n<!-- \u2500\u2500 ERROR STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     A request that failed and came back with nothing is not an empty\n     collection, and must never borrow its words: \"nothing here yet\" is\n     a confident false statement about the operator's data, and they may\n     act on it. So this replaces the empty state outright, projected\n     [empty-state] included \u2014 a screen's own \"create your first client\"\n     copy is just as wrong here as the default.\n\n     It says nothing about *what* failed. `errorMsg` is `err.message`\n     from the HTTP layer, and a status line or an exception string tells\n     an operator nothing they can act on; it survives on the head chip's\n     `data-error` attribute, for whoever is reading the DOM. This carries\n     the two things that help: their data is intact, and the way to try\n     again.\n\n     role=\"alert\" goes on this div, never on the <tr> / <td> / <li> that\n     hosts it \u2014 a role on a row or cell takes the table's semantics down\n     with it. It fires on insertion, which is exactly when @if adds it. -->\n<ng-template #errorStateTpl>\n  <div class=\"tbl-empty tbl-empty--error\" role=\"alert\">\n    <i class=\"pi pi-exclamation-triangle tbl-empty__icon\" aria-hidden=\"true\"></i>\n    <p class=\"tbl-empty__title\">{{ 'common_error_load_failed' | translate }}</p>\n    <p class=\"tbl-empty__hint\">{{ 'common_error_load_failed_hint' | translate }}</p>\n    <button class=\"btn btn-sm tbl-empty__action\" type=\"button\" (click)=\"retry.emit()\">\n      <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n      {{ 'common_retry' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<!-- Header label, shared by the sortable and plain header cells so the\n     projection rules stay in one place. -->\n<ng-template #headerLabelTpl let-col=\"col\">\n  @if (headerTemplate(col.id); as headerTpl) {\n    <ng-container *ngTemplateOutlet=\"headerTpl; context: { $implicit: col, col: col }\"></ng-container>\n  } @else if (col.headerKey) {\n    <span>{{ col.headerKey | translate }}</span>\n  } @else if (col.header) {\n    <span>{{ col.header }}</span>\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0}.tbl thead th.is-sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl thead th.is-sortable:hover{color:var(--text)}.tbl tbody tr.is-row-clickable{cursor:pointer}.tbl-tools{display:flex;gap:6px;align-items:center}.tbl-tool{position:relative}.tbl-tool>.btn.open{color:var(--text);background:var(--paper)}.tbl-tool__menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:40;min-width:212px;max-height:340px;overflow-y:auto;padding:6px;display:grid;gap:1px;background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--shadow-3);animation:row-actions-menu-in var(--t-base) var(--ease-spring)}.tbl-tool__menu--wide{min-width:248px}.tbl-tool__menu button{appearance:none;background:transparent;border:0;width:100%;text-align:start;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out)}.tbl-tool__menu button:hover,.tbl-tool__menu button:focus-visible{background:var(--paper);outline:0}.tbl-tool__menu button>.pi{width:16px;flex:none;font-size:14px;color:var(--muted)}.tbl-tool__menu button.is-active>.pi{color:var(--module, var(--text))}.tbl-tool__label{flex:1 1 auto;min-width:0}.tbl-tool__check{color:var(--module, var(--text))}.tbl-tool__sep{margin:5px 2px;border-top:1px solid var(--rule)}.tbl-wrap[data-density=compact] .tbl tbody td{--tbl-cell-pad-block: 4px;padding-top:var(--tbl-cell-pad-block);padding-bottom:var(--tbl-cell-pad-block)}.tbl-wrap[data-density=comfortable] .tbl tbody td{--tbl-cell-pad-block: 16px;padding-top:var(--tbl-cell-pad-block);padding-bottom:var(--tbl-cell-pad-block)}.mlist{list-style:none;margin:0;padding:0;display:grid}.mrow{border-top:1px solid var(--rule)}.mrow:first-child{border-top:0}.mrow__head{display:flex;align-items:flex-start;gap:var(--s-3);padding:12px var(--s-4);min-height:var(--hit-touch)}.mrow__head.is-tappable{cursor:pointer}.mrow__head.is-tappable:active{background:var(--paper)}.mrow__lead{flex:1;min-width:0;display:grid;gap:2px}.mrow__primary{font-weight:700;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrow__secondary{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:12.5px;color:var(--text-mute);min-width:0}.mrow__secondary .mrow__sec-part+.mrow__sec-part:before{content:\"\\b7\";margin-inline-end:6px;color:var(--text-soft)}.mrow__trail{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);flex-shrink:0;min-height:20px}.mrow__actions{display:inline-flex}.mrow__detail{margin:0;padding:0 var(--s-4) 12px;display:grid;gap:1px}.mrow__field{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding:7px 0;border-top:1px solid var(--rule-soft)}.mrow__field dt{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute);flex-shrink:0}.mrow__field dd{margin:0;font-size:13.5px;color:var(--text);text-align:end;min-width:0;overflow-wrap:anywhere}.mrow__more{appearance:none;width:100%;background:transparent;border:0;border-top:1px solid var(--rule-soft);padding:10px;font:inherit;font-size:13px;font-weight:600;color:var(--tenant-500);cursor:pointer}.mlist[data-layout=card]{gap:var(--s-3);padding:var(--s-3) var(--s-3) 0}.mlist[data-layout=card] .mrow{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper-alt);overflow:hidden}.mlist[data-layout=card] .mrow__head{border-bottom:1px solid var(--rule)}.mrow__chevron{font-size:11px;color:var(--text-soft);transition:transform var(--t-fast) var(--ease-out);flex-shrink:0}.mrow__chevron.is-open{transform:rotate(180deg);color:var(--text-mute)}.mrow__head.is-tappable:focus-visible{outline:2px solid var(--tenant-400);outline-offset:-2px}.mrow__more{display:flex;align-items:center;justify-content:center;gap:6px}.tbl-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);padding:var(--s-9) var(--s-4);text-align:center}.tbl-empty__icon{font-size:28px;line-height:1;color:var(--ink-400);margin-block-end:var(--s-1)}.tbl-empty__title{margin:0;font-size:15px;font-weight:600;color:var(--text);max-inline-size:46ch;overflow-wrap:break-word}.tbl-empty__hint{margin:0;font-size:13px;color:var(--ink-600);max-inline-size:52ch;text-wrap:pretty}.tbl-empty__action{margin-block-start:var(--s-3);min-block-size:var(--hit-base)}.tbl-empty--error .tbl-empty__icon{color:var(--st-cancelled-fg)}.mrow--empty{padding:0}.mrow--skeleton{padding:12px var(--s-4)}@media(max-width:767px){.tbl-empty{padding:var(--s-7) var(--s-4)}.tbl-empty__action{min-block-size:var(--hit-touch)}}.pi.is-spinning{animation:ef-export-spin .9s linear infinite}@keyframes ef-export-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.pi.is-spinning{animation:none}}.tbl th.tbl-drag-h,.tbl td.tbl-drag{width:28px;padding-inline:4px 0;text-align:center}.tbl td.tbl-drag{cursor:default}.tbl .tbl-drag__grip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:26px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-soft);cursor:grab;touch-action:none;transition:background var(--t-fast, .14s) var(--ease-out, ease-out),color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl .tbl-drag__grip:hover{background:var(--paper);color:var(--text)}.tbl .tbl-drag__grip:focus-visible{outline:2px solid var(--tenant, var(--rule));outline-offset:1px}.tbl .tbl-drag__grip:active{cursor:grabbing}.tbl .tbl-drag__grip i{font-size:12px}.tbl tbody tr.is-dragging>td{background:var(--paper);opacity:.55}.tbl tbody tr.is-drop-target>td{box-shadow:inset 0 2px 0 var(--tenant, var(--rule))}.tbl.tbl--fixed{table-layout:fixed}.mrow__disclosure{appearance:none;background:transparent;border:0;padding:0;margin:0;display:inline-grid;place-items:center;color:var(--text-mute);cursor:pointer;position:relative}.mrow__disclosure:after{content:\"\";position:absolute;top:50%;left:50%;width:var(--hit-touch);height:var(--hit-touch);transform:translate(-50%,-50%)}.mrow__disclosure:focus-visible{outline:2px solid color-mix(in srgb,var(--ink-active) 40%,transparent);outline-offset:2px;border-radius:var(--r-pill)}@media(pointer:coarse){.mrow__actions+.mrow__disclosure{margin-inline-start:calc((var(--hit-touch) - 11px) / 2 - var(--s-2) + 1px)}}.tbl tbody tr.is-disabled{cursor:not-allowed}.tbl tbody tr.is-disabled td,.mrow.is-disabled .mrow__head{opacity:.5}.mrow.is-disabled .mrow__head{cursor:not-allowed}.tbl-head:has(>.count:empty):has(>.tbl-tools:empty){display:none}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- One cell renderer, shared by the table, the mobile row and the mobile\n     detail. A new column type is added here once, not three times. -->\n<ng-template #cellTpl let-row let-col=\"col\" let-index=\"index\">\n  @if (bodyTemplate(col.id); as bodyTpl) {\n    <ng-container *ngTemplateOutlet=\"bodyTpl; context: { $implicit: row, col: col, index: index }\"></ng-container>\n  } @else {\n              @switch (col.type) {\n                @case ('number') {\n                  {{ $any(cellValue(row, col)) | number:numberFormat(col):col.locale }}\n                }\n                @case ('money') {\n                  {{ $any(cellValue(row, col)) | currency:(col.currencyCode || 'EUR'):(col.currencyDisplay || 'symbol'):numberFormat(col):col.locale }}\n                }\n                @case ('date') {\n                  {{ $any(cellValue(row, col)) | date:(col.dateFormat || 'dd/MM/yyyy'):undefined:col.locale }}\n                }\n                @case ('datetime') {\n                  {{ $any(cellValue(row, col)) | date:(col.dateFormat || 'dd/MM/yyyy HH:mm'):undefined:col.locale }}\n                }\n                @case ('boolean') {\n                  @if (cellValue(row, col)) {\n                    <span class=\"bool yes\"><span class=\"dot\"></span> \u2713</span>\n                  } @else {\n                    <span class=\"bool no\"><span class=\"dot\"></span> \u2014</span>\n                  }\n                }\n                @case ('mono') {\n                  <span class=\"ref\">{{ cellValue(row, col) }}</span>\n                }\n                @case ('chip') {\n                  <span [class]=\"'chip ' + (col.chipPrefix || 'chip-') + cellValue(row, col)\">\n                    \u25CF {{ cellValue(row, col) }}\n                  </span>\n                }\n                @case ('status') {\n                  <ef-status-chip\n                    [referenceKey]=\"col.referenceKey || ''\"\n                    [code]=\"$any(cellValue(row, col))\"\n                  />\n                }\n                @case ('reference') {\n                  {{ resolveReference(cellValue(row, col), col) }}\n                }\n                @default {\n                  {{ cellValue(row, col) }}\n                }\n              }\n  }\n</ng-template>\n\n<!-- .has-open-menu unclips the shell for the Densit\u00E9 / Colonnes menus,\n     which hang below .tbl-head. Row menus are fixed to the viewport\n     (ef-row-actions) and need no lift; counting them also left the shell\n     unclipped for good when a row went while its menu was open. -->\n<div class=\"tbl-wrap\" [class.has-open-menu]=\"openTool() !== null\" [attr.data-density]=\"density()\">\n  <!-- \u2500\u2500 HEAD ROW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"tbl-head\">\n    <div class=\"count small\">\n      @if (loading()) {\n        <span>{{ loadingKey() | translate }}</span>\n      } @else if (errorMsg()) {\n        <!-- A refresh that failed on top of rows already on screen keeps the\n             rows, so this chip is the only sign anything went wrong \u2014 and the\n             rows it sits above may now be stale. It has to say so, and say it\n             in the product's words: `errorMsg` is `err.message` from the HTTP\n             layer, and \"500 Internal Server Error\" tells an operator nothing\n             they can act on.\n\n             The raw string stays on `data-error`, where devtools can read it\n             and no reader ever meets it. `title` was the obvious place and is\n             the wrong one: it renders the exception in a tooltip, which is\n             precisely what this change exists to stop, and it is unreachable\n             on touch besides.\n\n             role=\"status\", not \"alert\": polite is right for a signal beside\n             rows that are still usable, and when the body is showing the\n             error state it already carries the alert \u2014 one failure must not\n             interrupt a screen-reader twice. -->\n        <span\n          role=\"status\"\n          [attr.data-error]=\"errorMsg()\"\n          style=\"color: var(--st-cancelled-fg); font-weight: 600;\"\n          >\u26A0 {{ 'common_error_refresh_failed' | translate }}</span\n        >\n      } @else {\n        <ng-content select=\"[tbl-head-info]\"></ng-content>\n      }\n    </div>\n    <div class=\"tbl-tools\">\n      <ng-content select=\"[tbl-head-actions]\"></ng-content>\n\n      @if (canExport()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [disabled]=\"exporting()\"\n            [attr.aria-busy]=\"exporting()\"\n            (click)=\"requestExport()\"\n          >\n            <i\n              class=\"pi\"\n              [class.pi-download]=\"!exporting()\"\n              [class.pi-spinner]=\"exporting()\"\n              [class.is-spinning]=\"exporting()\"\n              aria-hidden=\"true\"\n            ></i>\n            {{ (exporting() ? 'common_export_running' : 'common_export') | translate }}\n          </button>\n        </div>\n      }\n\n      @if (showDensityControl()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'density'\"\n            [attr.aria-expanded]=\"openTool() === 'density'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('density')\"\n          >\n            <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n            {{ 'common_density' | translate }}\n          </button>\n          @if (openTool() === 'density') {\n            <div class=\"tbl-tool__menu\" role=\"menu\">\n              @for (opt of densityOptions; track opt.value) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemradio\"\n                  [attr.aria-checked]=\"density() === opt.value\"\n                  [class.is-active]=\"density() === opt.value\"\n                  (click)=\"setDensity(opt.value)\"\n                >\n                  <i class=\"pi\" [ngClass]=\"opt.icon\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{ opt.labelKey | translate }}</span>\n                  @if (density() === opt.value) {\n                    <i class=\"pi pi-check tbl-tool__check\" aria-hidden=\"true\"></i>\n                  }\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @if (showColumnPicker()) {\n        <div class=\"tbl-tool\">\n          <button\n            class=\"btn btn-ghost btn-sm\"\n            type=\"button\"\n            [class.open]=\"openTool() === 'columns'\"\n            [attr.aria-expanded]=\"openTool() === 'columns'\"\n            aria-haspopup=\"menu\"\n            (click)=\"toggleTool('columns')\"\n          >\n            <i class=\"pi pi-th-large\" aria-hidden=\"true\"></i>\n            {{ 'common_columns' | translate }}\n          </button>\n          @if (openTool() === 'columns') {\n            <div class=\"tbl-tool__menu tbl-tool__menu--wide\" role=\"menu\">\n              @for (col of hideableColumns(); track col.id) {\n                <button\n                  type=\"button\"\n                  role=\"menuitemcheckbox\"\n                  [attr.aria-checked]=\"!isColumnHidden(col.id)\"\n                  [class.is-active]=\"!isColumnHidden(col.id)\"\n                  (click)=\"toggleColumn(col.id)\"\n                >\n                  <i class=\"pi\" [class.pi-check]=\"!isColumnHidden(col.id)\" aria-hidden=\"true\"></i>\n                  <span class=\"tbl-tool__label\">{{\n                    col.headerKey ? (col.headerKey | translate) : (col.header || col.id)\n                  }}</span>\n                </button>\n              }\n              <div class=\"tbl-tool__sep\"></div>\n              <button type=\"button\" role=\"menuitem\" (click)=\"resetColumns()\">\n                <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n                <span class=\"tbl-tool__label\">{{ 'common_columns_reset' | translate }}</span>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 TABLE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (isMobile()) {\n    <!-- \u2500\u2500 MOBILE LIST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         A six-column table on a 390px screen either overflows or\n         squeezes every column to nothing, so the rows become a list.\n         Same columns, same cell renderers; each column just declares\n         (or is given) a role. Both shapes expand to the same detail \u2014\n         they differ only in how much they show collapsed. -->\n    <ul\n      class=\"mlist\"\n      [attr.data-layout]=\"effectiveMobileLayout()\"\n      [attr.aria-busy]=\"loading() ? 'true' : null\"\n    >\n      @for (row of rows(); track trackByRow($index, row); let i = $index) {\n        <li class=\"mrow\" [class.is-open]=\"isExpanded(row, i)\" [class.is-disabled]=\"isRowDisabled(row)\">\n          <div\n            class=\"mrow__head\"\n            [class.is-tappable]=\"headIsControl()\"\n            [attr.role]=\"headIsControl() ? 'button' : null\"\n            [attr.tabindex]=\"headIsControl() ? 0 : null\"\n            [attr.aria-pressed]=\"pressedAttr(row)\"\n            [attr.aria-disabled]=\"isRowDisabled(row) ? 'true' : null\"\n            [attr.aria-expanded]=\"!rowNavigable() && hasDetail() ? isExpanded(row, i) : null\"\n            (click)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.enter)=\"onRowHeadActivate(row, i, $event)\"\n            (keydown.space)=\"onRowHeadActivate(row, i, $event)\"\n          >\n            <div class=\"mrow__lead\">\n              @if (primaryColumn(); as pc) {\n                <span class=\"mrow__primary\" efOverflowTooltip efTooltip efTooltipPosition=\"top\">\n                  <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: pc, index: i }\"></ng-container>\n                </span>\n              }\n              @if (effectiveMobileLayout() === 'row' && secondaryColumns().length) {\n                <span class=\"mrow__secondary\">\n                  @for (sc of secondaryColumns(); track sc.id) {\n                    @if (hasCellContent(row, sc)) {\n                      <span class=\"mrow__sec-part\">\n                        <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: sc, index: i }\"></ng-container>\n                      </span>\n                    }\n                  }\n                </span>\n              }\n            </div>\n\n            <div class=\"mrow__trail\">\n              @if (statusColumn(); as st) {\n                <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: st, index: i }\"></ng-container>\n              }\n              @if (hasActionsColumn()) {\n                <span class=\"mrow__actions\">\n                  <ef-row-actions [items]=\"defaultRowActions(row)\" [context]=\"rowActionsContext()\" />\n                </span>\n              }\n              @if (hasDetail() && effectiveMobileLayout() === 'row') {\n                @if (rowNavigable()) {\n                  <!-- The head opens the record, so expansion needs a control\n                       of its own. Same glyph, promoted from decoration to a\n                       button that carries the state it was already drawing. -->\n                  <button\n                    type=\"button\"\n                    class=\"mrow__disclosure\"\n                    [attr.aria-expanded]=\"isExpanded(row, i)\"\n                    [attr.aria-label]=\"(isExpanded(row, i) ? 'common_view_less' : 'common_view_more') | translate\"\n                    (click)=\"onDisclosureToggle(row, i, $event)\"\n                  >\n                    <i\n                      class=\"pi pi-chevron-down mrow__chevron\"\n                      [class.is-open]=\"isExpanded(row, i)\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </button>\n                } @else {\n                  <!-- Says the row opens, and which way it is now. Decorative:\n                       the whole head is the control, and it carries the state. -->\n                  <i\n                    class=\"pi pi-chevron-down mrow__chevron\"\n                    [class.is-open]=\"isExpanded(row, i)\"\n                    aria-hidden=\"true\"\n                  ></i>\n                }\n              }\n            </div>\n          </div>\n\n          @if (visibleDetail(row, i).length) {\n            <dl class=\"mrow__detail\">\n              @for (col of visibleDetail(row, i); track col.id) {\n                <div class=\"mrow__field\">\n                  <dt>{{ $any(col).headerKey ? ($any(col).headerKey | translate) : $any(col).header }}</dt>\n                  <dd [class]=\"cellAlignClass($any(col))\">\n                    <ng-container *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col, index: i }\"></ng-container>\n                  </dd>\n                </div>\n              }\n            </dl>\n          }\n\n          @if (hasMoreThanPreview() && effectiveMobileLayout() === 'card') {\n            <button class=\"mrow__more\" type=\"button\" (click)=\"toggleExpanded(row, i)\">\n              <span>{{ (isExpanded(row, i) ? 'common_view_less' : 'common_view_more') | translate }}</span>\n              <i class=\"pi pi-chevron-down mrow__chevron\" [class.is-open]=\"isExpanded(row, i)\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </li>\n      } @empty {\n        <!-- No rows has three meanings and they must not share a screen:\n             still loading is a skeleton, the request failed is the error\n             state, finished-and-empty is the empty state. Saying \"nothing\n             here yet\" to someone whose data is still in flight \u2014 or whose\n             request just failed \u2014 is a lie the whole time it shows. -->\n        @if (showSkeleton()) {\n          @for (line of skeletonLines(); track line) {\n            <li class=\"mrow mrow--skeleton\">\n              <ef-skeleton variant=\"text\" [rows]=\"2\" />\n            </li>\n          }\n        } @else if (showError()) {\n          <li class=\"mrow mrow--empty\">\n            <ng-container *ngTemplateOutlet=\"errorStateTpl\"></ng-container>\n          </li>\n        } @else {\n          <li class=\"mrow mrow--empty\">\n            <ng-content select=\"[empty-state-mobile]\">\n              <ng-container *ngTemplateOutlet=\"defaultEmptyTpl\"></ng-container>\n            </ng-content>\n          </li>\n        }\n      }\n    </ul>\n  } @else {\n    <!-- The table scrolls sideways inside its own box. Between 768px and\n         the table's natural width (about 900-1100px) the columns past the\n         edge were simply clipped by .tbl-wrap, with no way to reach them.\n         .tbl-wrap stays the clipping shell, so the head and the pager do\n         not scroll with the rows. Row menus are fixed to the viewport\n         (ef-row-actions), so this scroller never clips them. -->\n    <div class=\"tbl-scroll\">\n    <table class=\"tbl\" [class.tbl--fixed]=\"fixedLayout()\">\n      <thead>\n        <tr>\n          @if (reorderable()) {\n            <th class=\"tbl-drag-h\" aria-hidden=\"true\"></th>\n          }\n          @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n            <!-- A sortable header is a real <button> inside the <th>, not a\n                 click handler on the cell. The cell carries aria-sort so the\n                 current order is announced; the arrow stays decorative.\n                 Sorting was previously mouse-only and silent to assistive\n                 technology, on every list screen in the product. -->\n            <th\n              [class]=\"headerAlignClass(col)\"\n              [class.is-sortable]=\"col.sortable\"\n              [style.width]=\"col.width || null\"\n              [attr.data-col]=\"col.id\"\n              [attr.aria-sort]=\"ariaSort(col)\"\n            >\n              @if (col.sortable) {\n                <button type=\"button\" class=\"tbl-sort\" (click)=\"onHeaderClick(col)\">\n                  <ng-container *ngTemplateOutlet=\"headerLabelTpl; context: { col: col }\"></ng-container>\n                  @if (sortIndicator(col)) {\n                    <span aria-hidden=\"true\" class=\"tbl-sort__arrow\">{{ sortIndicator(col) }}</span>\n                  }\n                </button>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"headerLabelTpl; context: { col: col }\"></ng-container>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody [attr.aria-busy]=\"loading() ? 'true' : null\">\n        @for (row of rows(); track trackByRow($index, row); let i = $index) {\n          <tr\n            [class.is-row-clickable]=\"rowDoubleClickable()\"\n            [class.is-dragging]=\"dragFrom() === i\"\n            [class.is-drop-target]=\"dragFrom() !== null && dragFrom() !== i && dragTo() === i\"\n            [attr.tabindex]=\"rowDoubleClickable() ? 0 : null\"\n            [attr.role]=\"rowDoubleClickable() ? 'button' : null\"\n            [attr.aria-pressed]=\"pressedAttr(row)\"\n            [attr.aria-disabled]=\"isRowDisabled(row) ? 'true' : null\"\n            [class.is-disabled]=\"isRowDisabled(row)\"\n            (click)=\"onRowClick(row, $event)\"\n            (keydown.enter)=\"onRowKeydown(row, $event)\"\n            (keydown.space)=\"onRowSpace(row, $event)\"\n          >\n            @if (reorderable()) {\n              <td class=\"tbl-drag\">\n                <!-- The row is draggable only by this handle, so a drag never\n                     starts from a cell the operator meant to click or select.\n                     Arrow keys move the row for anyone not using a pointer. -->\n                <button\n                  type=\"button\"\n                  class=\"tbl-drag__grip\"\n                  [attr.aria-label]=\"'common_reorder_row' | translate\"\n                  (pointerdown)=\"onDragPointerDown(i, $event)\"\n                  (pointermove)=\"onDragPointerMove($event)\"\n                  (pointerup)=\"onDragPointerUp()\"\n                  (pointercancel)=\"onDragPointerUp()\"\n                  (keydown)=\"onDragKeydown(i, $event)\"\n                >\n                  <i class=\"pi pi-ellipsis-v\" aria-hidden=\"true\"></i>\n                </button>\n              </td>\n            }\n            @for (col of effectiveColumns(); track trackByColumn($index, col); let colIdx = $index) {\n              <td efOverflowTooltip efTooltip efTooltipPosition=\"top\" [class]=\"cellAlignClass(col)\" [attr.data-col]=\"col.id\">\n                @if (col.id === 'actions' && hasActionsColumn()) {\n                  <!-- Auto row-actions cell: View / Edit / Duplicate / Delete,\n                       gated by [show*Action] flags + ScreenContext perms. -->\n                  <ef-row-actions\n                    [items]=\"defaultRowActions(row)\"\n                    [context]=\"rowActionsContext()\"\n                  />\n                } @else {\n                  <ng-container\n                    *ngTemplateOutlet=\"cellTpl; context: { $implicit: row, col: col, index: i }\"\n                  ></ng-container>\n                }\n                          </td>\n            }\n          </tr>\n        } @empty {\n          <!-- Placeholder rows keep the real columns, so the table that\n               arrives lands where the shimmer already was instead of\n               reflowing the page under the reader's eyes. -->\n          @if (showSkeleton()) {\n            @for (line of skeletonLines(); track line) {\n              <tr>\n                @if (reorderable()) {\n                  <td class=\"tbl-drag\"></td>\n                }\n                @for (col of effectiveColumns(); track trackByColumn($index, col)) {\n                  <td [class]=\"cellAlignClass(col)\" [attr.data-col]=\"col.id\">\n                    <ef-skeleton variant=\"text\" [rows]=\"1\" />\n                  </td>\n                }\n              </tr>\n            }\n          } @else if (showError()) {\n            <!-- The failure replaces the body, so it spans the full row \u2014\n                 crammed into column one it reads as a value, not a state. -->\n            <tr>\n              <td [attr.colspan]=\"effectiveColumns().length + (reorderable() ? 1 : 0)\">\n                <ng-container *ngTemplateOutlet=\"errorStateTpl\"></ng-container>\n              </td>\n            </tr>\n          } @else {\n            <tr>\n              <td [attr.colspan]=\"effectiveColumns().length + (reorderable() ? 1 : 0)\">\n                <ng-content select=\"[empty-state]\">\n                  <ng-container *ngTemplateOutlet=\"defaultEmptyTpl\"></ng-container>\n                </ng-content>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n    </div>\n  }\n\n  <!-- \u2500\u2500 PAGER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <!-- Paging controls for an empty result set are chrome with nothing to\n       page, so they stay out of the way until there is something to move\n       through. -->\n  @if (!hidePager() && rows().length > 0) {\n    <ef-pager\n      [pageNumber]=\"pageNumber()\"\n      [pageSize]=\"pageSize()\"\n      [totalCount]=\"totalCount()\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      (pageChange)=\"pageChange.emit($event)\"\n      (pageSizeChange)=\"pageSizeChange.emit($event)\"\n    />\n  }\n</div>\n\n<!-- \u2500\u2500 DEFAULT EMPTY STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     Rendered when a screen projects nothing into [empty-state] /\n     [empty-state-mobile]. It words itself from `searchTerm`, because\n     \"nothing matched what you typed\" and \"there is nothing here yet\"\n     are different situations needing different ways out. -->\n<ng-template #defaultEmptyTpl>\n  <div class=\"tbl-empty\">\n    <i\n      class=\"pi tbl-empty__icon\"\n      [class.pi-search]=\"!!searchTerm()\"\n      [class.pi-inbox]=\"!searchTerm()\"\n      aria-hidden=\"true\"\n    ></i>\n\n    @if (searchTerm()) {\n      <p class=\"tbl-empty__title\">\n        {{ 'common_empty_no_results' | translate: { term: searchTerm() } }}\n      </p>\n      <p class=\"tbl-empty__hint\">{{ 'common_empty_no_results_hint' | translate }}</p>\n      <button class=\"btn btn-sm tbl-empty__action\" type=\"button\" (click)=\"clearSearch.emit()\">\n        <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\n        {{ 'common_empty_clear_filters' | translate }}\n      </button>\n    } @else {\n      <p class=\"tbl-empty__title\">{{ 'common_empty_none_yet' | translate }}</p>\n      <p class=\"tbl-empty__hint\">{{ 'common_empty_none_yet_hint' | translate }}</p>\n    }\n  </div>\n</ng-template>\n\n<!-- \u2500\u2500 ERROR STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     A request that failed and came back with nothing is not an empty\n     collection, and must never borrow its words: \"nothing here yet\" is\n     a confident false statement about the operator's data, and they may\n     act on it. So this replaces the empty state outright, projected\n     [empty-state] included \u2014 a screen's own \"create your first client\"\n     copy is just as wrong here as the default.\n\n     It says nothing about *what* failed. `errorMsg` is `err.message`\n     from the HTTP layer, and a status line or an exception string tells\n     an operator nothing they can act on; it survives on the head chip's\n     `data-error` attribute, for whoever is reading the DOM. This carries\n     the two things that help: their data is intact, and the way to try\n     again.\n\n     role=\"alert\" goes on this div, never on the <tr> / <td> / <li> that\n     hosts it \u2014 a role on a row or cell takes the table's semantics down\n     with it. It fires on insertion, which is exactly when @if adds it. -->\n<ng-template #errorStateTpl>\n  <div class=\"tbl-empty tbl-empty--error\" role=\"alert\">\n    <i class=\"pi pi-exclamation-triangle tbl-empty__icon\" aria-hidden=\"true\"></i>\n    <p class=\"tbl-empty__title\">{{ 'common_error_load_failed' | translate }}</p>\n    <p class=\"tbl-empty__hint\">{{ 'common_error_load_failed_hint' | translate }}</p>\n    <button class=\"btn btn-sm tbl-empty__action\" type=\"button\" (click)=\"retry.emit()\">\n      <i class=\"pi pi-refresh\" aria-hidden=\"true\"></i>\n      {{ 'common_retry' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<!-- Header label, shared by the sortable and plain header cells so the\n     projection rules stay in one place. -->\n<ng-template #headerLabelTpl let-col=\"col\">\n  @if (headerTemplate(col.id); as headerTpl) {\n    <ng-container *ngTemplateOutlet=\"headerTpl; context: { $implicit: col, col: col }\"></ng-container>\n  } @else if (col.headerKey) {\n    <span>{{ col.headerKey | translate }}</span>\n  } @else if (col.header) {\n    <span>{{ col.header }}</span>\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0}.tbl thead th.is-sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl thead th.is-sortable:hover{color:var(--text)}.tbl tbody tr.is-row-clickable{cursor:pointer}.tbl-tools{display:flex;gap:6px;align-items:center}.tbl-tool{position:relative}.tbl-tool>.btn.open{color:var(--text);background:var(--paper)}.tbl-tool__menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:40;min-width:212px;max-height:340px;overflow-y:auto;padding:6px;display:grid;gap:1px;background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--shadow-3);animation:row-actions-menu-in var(--t-base) var(--ease-spring)}.tbl-tool__menu--wide{min-width:248px}.tbl-tool__menu button{appearance:none;background:transparent;border:0;width:100%;text-align:start;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out)}.tbl-tool__menu button:hover,.tbl-tool__menu button:focus-visible{background:var(--paper);outline:0}.tbl-tool__menu button>.pi{width:16px;flex:none;font-size:14px;color:var(--muted)}.tbl-tool__menu button.is-active>.pi{color:var(--module, var(--text))}.tbl-tool__label{flex:1 1 auto;min-width:0}.tbl-tool__check{color:var(--module, var(--text))}.tbl-tool__sep{margin:5px 2px;border-top:1px solid var(--rule)}.tbl-wrap[data-density=compact] .tbl tbody td{--tbl-cell-pad-block: 4px;padding-top:var(--tbl-cell-pad-block);padding-bottom:var(--tbl-cell-pad-block)}.tbl-wrap[data-density=comfortable] .tbl tbody td{--tbl-cell-pad-block: 16px;padding-top:var(--tbl-cell-pad-block);padding-bottom:var(--tbl-cell-pad-block)}.mlist{list-style:none;margin:0;padding:0;display:grid}.mrow{border-top:1px solid var(--rule)}.mrow:first-child{border-top:0}.mrow__head{display:flex;align-items:flex-start;gap:var(--s-3);padding:12px var(--s-4);min-height:var(--hit-touch)}.mrow__head.is-tappable{cursor:pointer}.mrow__head.is-tappable:active{background:var(--paper)}.mrow__lead{flex:1;min-width:0;display:grid;gap:2px}.mrow__primary{font-weight:700;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrow__secondary{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:12.5px;color:var(--text-mute);min-width:0}.mrow__secondary .mrow__sec-part+.mrow__sec-part:before{content:\"\\b7\";margin-inline-end:6px;color:var(--text-soft)}.mrow__trail{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);flex-shrink:0;min-height:20px}.mrow__actions{display:inline-flex}.mrow__detail{margin:0;padding:0 var(--s-4) 12px;display:grid;gap:1px}.mrow__field{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding:7px 0;border-top:1px solid var(--rule-soft)}.mrow__field dt{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute);flex-shrink:0}.mrow__field dd{margin:0;font-size:13.5px;color:var(--text);text-align:end;min-width:0;overflow-wrap:anywhere}.mrow__more{appearance:none;width:100%;background:transparent;border:0;border-top:1px solid var(--rule-soft);padding:10px;font:inherit;font-size:13px;font-weight:600;color:var(--tenant-500);cursor:pointer}.mlist[data-layout=card]{gap:var(--s-3);padding:var(--s-3) var(--s-3) 0}.mlist[data-layout=card] .mrow{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper-alt);overflow:hidden}.mlist[data-layout=card] .mrow__head{border-bottom:1px solid var(--rule)}.mrow__chevron{font-size:11px;color:var(--text-soft);transition:transform var(--t-fast) var(--ease-out);flex-shrink:0}.mrow__chevron.is-open{transform:rotate(180deg);color:var(--text-mute)}.mrow__head.is-tappable:focus-visible{outline:2px solid var(--tenant-400);outline-offset:-2px}.mrow__more{display:flex;align-items:center;justify-content:center;gap:6px}.tbl-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);padding:var(--s-9) var(--s-4);text-align:center}.tbl-empty__icon{font-size:28px;line-height:1;color:var(--ink-400);margin-block-end:var(--s-1)}.tbl-empty__title{margin:0;font-size:15px;font-weight:600;color:var(--text);max-inline-size:46ch;overflow-wrap:break-word}.tbl-empty__hint{margin:0;font-size:13px;color:var(--ink-600);max-inline-size:52ch;text-wrap:pretty}.tbl-empty__action{margin-block-start:var(--s-3);min-block-size:var(--hit-base)}.tbl-empty--error .tbl-empty__icon{color:var(--st-cancelled-fg)}.mrow--empty{padding:0}.mrow--skeleton{padding:12px var(--s-4)}@media(max-width:767px){.tbl-empty{padding:var(--s-7) var(--s-4)}.tbl-empty__action{min-block-size:var(--hit-touch)}}.pi.is-spinning{animation:ef-export-spin .9s linear infinite}@keyframes ef-export-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.pi.is-spinning{animation:none}}.tbl th.tbl-drag-h,.tbl td.tbl-drag{width:28px;padding-inline:4px 0;text-align:center}.tbl td.tbl-drag{cursor:default}.tbl .tbl-drag__grip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:26px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-soft);cursor:grab;touch-action:none;transition:background var(--t-fast, .14s) var(--ease-out, ease-out),color var(--t-fast, .14s) var(--ease-out, ease-out)}.tbl .tbl-drag__grip:hover{background:var(--paper);color:var(--text)}.tbl .tbl-drag__grip:focus-visible{outline:2px solid var(--tenant, var(--rule));outline-offset:1px}.tbl .tbl-drag__grip:active{cursor:grabbing}.tbl .tbl-drag__grip i{font-size:12px}.tbl tbody tr.is-dragging>td{background:var(--paper);opacity:.55}.tbl tbody tr.is-drop-target>td{box-shadow:inset 0 2px 0 var(--tenant, var(--rule))}.tbl.tbl--fixed{table-layout:fixed}.mrow__disclosure{appearance:none;background:transparent;border:0;padding:0;margin:0;display:inline-grid;place-items:center;color:var(--text-mute);cursor:pointer;position:relative}.mrow__disclosure:after{content:\"\";position:absolute;top:50%;left:50%;width:var(--hit-touch);height:var(--hit-touch);transform:translate(-50%,-50%)}.mrow__disclosure:focus-visible{outline:2px solid color-mix(in srgb,var(--ink-active) 40%,transparent);outline-offset:2px;border-radius:var(--r-pill)}@media(pointer:coarse){.mrow__actions+.mrow__disclosure{margin-inline-start:calc((var(--hit-touch) - 11px) / 2 - var(--s-2) + 1px)}}.tbl tbody tr.is-disabled{cursor:not-allowed}.tbl tbody tr.is-disabled td,.mrow.is-disabled .mrow__head{opacity:.5}.mrow.is-disabled .mrow__head{cursor:not-allowed}.tbl-head:has(>.count:empty):has(>.tbl-tools:empty){display:none}\n"] }]
         }], propDecorators: { mobileLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileLayout", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], trackByField: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByField", required: false }] }], pageNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageNumber", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], totalCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalCount", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], hidePager: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePager", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], loadingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingKey", required: false }] }], rowDoubleClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDoubleClickable", required: false }] }], rowPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowPressed", required: false }] }], rowDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDisabled", 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 }] }], rowActionState: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActionState", 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]
@@ -6117,10 +6423,40 @@ class EfOrderBuilderComponent {
     order = model.required(...(ngDevMode ? [{ debugName: "order" }] : /* istanbul ignore next */ []));
     products = input.required(...(ngDevMode ? [{ debugName: "products" }] : /* istanbul ignore next */ []));
     customers = input.required(...(ngDevMode ? [{ debugName: "customers" }] : /* istanbul ignore next */ []));
+    /**
+     * Who the order goes to when it has no client to pick (a storefront order).
+     * When set, the header shows it read-only instead of the customer select,
+     * `customers` may be `[]` and the order validates without a `customerId`.
+     * Null keeps the customer select and its required rule.
+     */
+    recipient = input(null, ...(ngDevMode ? [{ debugName: "recipient" }] : /* istanbul ignore next */ []));
+    /**
+     * Calling code (`'212'` or `'+212'`) for a national recipient phone, so the
+     * `tel:` link dials `+212612345678` for `0612345678` from anywhere.
+     */
+    defaultCallingCode = input('', ...(ngDevMode ? [{ debugName: "defaultCallingCode" }] : /* istanbul ignore next */ []));
+    /**
+     * `tel:` target for the recipient's phone: E.164 when it can be made, else
+     * the digits as typed (a national number still dials inside the country).
+     */
+    recipientTel = computed(() => {
+        const phone = this.recipient()?.phone ?? '';
+        const e164 = PhoneUtils.toE164(phone, this.defaultCallingCode());
+        if (e164)
+            return `tel:${e164}`;
+        const digits = phone.replace(/\D/g, '');
+        return digits ? `tel:${digits}` : null;
+    }, ...(ngDevMode ? [{ debugName: "recipientTel" }] : /* istanbul ignore next */ []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     countGroupLabels = input([], ...(ngDevMode ? [{ debugName: "countGroupLabels" }] : /* istanbul ignore next */ []));
     /** Field name used to identify products (must match catalogue's trackByField) */
     productKeyField = input('id', ...(ngDevMode ? [{ debugName: "productKeyField" }] : /* istanbul ignore next */ []));
+    /**
+     * Which catalogue price a new line starts at, in quick-add, its typeahead
+     * and the catalogue: `'wholesale'` (default, B2B sales) or `'retail'`, the
+     * shop price a Web order is charged. Lines already on the order keep theirs.
+     */
+    priceList = input('wholesale', ...(ngDevMode ? [{ debugName: "priceList" }] : /* istanbul ignore next */ []));
     backendErrors = input({}, ...(ngDevMode ? [{ debugName: "backendErrors" }] : /* istanbul ignore next */ []));
     /**
      * Delivery amount (TTC) the host owns. It is the builder's only fee source:
@@ -6130,8 +6466,20 @@ class EfOrderBuilderComponent {
      * non-numeric fee is treated as 0.
      */
     shippingTotal = input(0, { ...(ngDevMode ? { debugName: "shippingTotal" } : /* istanbul ignore next */ {}), transform: toFee });
-    /** Optional change-history entries; when non-empty the Historique rail card renders. */
+    /**
+     * Optional change-history entries; when non-empty the Historique rail card renders.
+     *
+     * Host cards that belong in the rail (a delivery card, internal notes) are
+     * projected with the `obRail` attribute: `<ef-card obRail ...>`. They sit
+     * after the totals and the recap and before the history, as a column at
+     * desktop width and inside the drawer below that or in focus mode.
+     */
     auditEntries = input([], ...(ngDevMode ? [{ debugName: "auditEntries" }] : /* istanbul ignore next */ []));
+    /** Passed to the history's `valueLists`: field path to reference items, so
+     *  raw statuses show as translated labels. */
+    auditValueLists = input(null, ...(ngDevMode ? [{ debugName: "auditValueLists" }] : /* istanbul ignore next */ []));
+    /** Passed to the history's `noteFormatter`: returns the text for a note, or null for the raw note. */
+    auditNoteFormatter = input(null, ...(ngDevMode ? [{ debugName: "auditNoteFormatter" }] : /* istanbul ignore next */ []));
     openCatalogue = output();
     orderChanged = output();
     orderValidated = output();
@@ -6216,7 +6564,13 @@ class EfOrderBuilderComponent {
         return { items, totalCount };
     }, ...(ngDevMode ? [{ debugName: "productsSummary" }] : /* istanbul ignore next */ []));
     validationResult = computed(() => {
-        return OrderEntityHelper.validate(this.order());
+        const result = OrderEntityHelper.validate(this.order());
+        if (!this.recipient() || !result.errors['customerId'])
+            return result;
+        // An order with a recipient has no client to pick: drop that one rule.
+        const errors = { ...result.errors };
+        delete errors['customerId'];
+        return { ...result, errors, isValid: Object.keys(errors).length === 0 };
     }, ...(ngDevMode ? [{ debugName: "validationResult" }] : /* istanbul ignore next */ []));
     combinedErrors = computed(() => {
         const clientErrors = this.validationResult().errors;
@@ -6443,7 +6797,7 @@ class EfOrderBuilderComponent {
             return;
         }
         const variantId = selection.variant?.['variantId'] ?? undefined;
-        const newItem = OrderLineItemHelper.createFromProduct(selection.product, this.quickAddQuantity(), this.productKeyField(), variantId);
+        const newItem = OrderLineItemHelper.createFromProduct(selection.product, this.quickAddQuantity(), this.productKeyField(), variantId, this.priceList());
         const overridden = OrderLineItemHelper.updateCalculations({
             ...newItem,
             productUnitPrice: this.quickAddPrice(),
@@ -6481,7 +6835,7 @@ class EfOrderBuilderComponent {
                 currentItems[existingIndex] = updated;
             }
             else {
-                const newItem = OrderLineItemHelper.createFromProduct(product, quantity, keyField, variantId);
+                const newItem = OrderLineItemHelper.createFromProduct(product, quantity, keyField, variantId, this.priceList());
                 currentItems.push(newItem);
                 addedItems.push(newItem);
             }
@@ -6603,7 +6957,7 @@ class EfOrderBuilderComponent {
         return OrderEntityHelper.calculateTotals(fee > 0 ? { ...order, shippingTotal: fee } : 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 }, shippingTotal: { classPropertyName: "shippingTotal", publicName: "shippingTotal", 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            ariaLabelKey=\"common_delete\"\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          @if (shippingTotal() > 0) {\n            <div class=\"row shipping\">\n              <span class=\"lbl\">{{ 'order_builder.shipping' | translate }}</span>\n              <span class=\"v\">{{ shippingTotal() | number: '1.2-2' : locale() }}</span>\n            </div>\n          }\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;box-sizing:border-box;block-size:var(--ef-order-fab-h);--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-block:0;padding-inline:16px 10px;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(pointer:coarse){:host .order-builder .ob-fab .open{min-block-size:var(--hit-touch)}:host ef-data-card .ln-val{min-block-size:var(--hit-field)}}\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", "allowAllTime", "mode", "selectionMode", "variant", "showTime", "valueFormat"], 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", "ariaLabelKey", "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", "rowPressed", "rowDisabled", "hasActionsColumn", "rowActionsContext", "showViewAction", "showEditAction", "showDuplicateAction", "showDeleteAction", "rowActionState", "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" }] });
+    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 }, recipient: { classPropertyName: "recipient", publicName: "recipient", isSignal: true, isRequired: false, transformFunction: null }, defaultCallingCode: { classPropertyName: "defaultCallingCode", publicName: "defaultCallingCode", isSignal: true, isRequired: false, 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 }, priceList: { classPropertyName: "priceList", publicName: "priceList", isSignal: true, isRequired: false, transformFunction: null }, backendErrors: { classPropertyName: "backendErrors", publicName: "backendErrors", isSignal: true, isRequired: false, transformFunction: null }, shippingTotal: { classPropertyName: "shippingTotal", publicName: "shippingTotal", isSignal: true, isRequired: false, transformFunction: null }, auditEntries: { classPropertyName: "auditEntries", publicName: "auditEntries", isSignal: true, isRequired: false, transformFunction: null }, auditValueLists: { classPropertyName: "auditValueLists", publicName: "auditValueLists", isSignal: true, isRequired: false, transformFunction: null }, auditNoteFormatter: { classPropertyName: "auditNoteFormatter", publicName: "auditNoteFormatter", 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            @if (recipient(); as r) {\n              <!-- No client to pick (a storefront order): who it goes to,\n                   read-only, in the customer's place. -->\n              <div class=\"field col-6\">\n                <ef-label labelKey=\"order_builder.recipient\" />\n                <div\n                  class=\"ob-recipient\"\n                  role=\"group\"\n                  [attr.aria-label]=\"'order_builder.recipient' | translate\">\n                  <span class=\"ob-recipient-name\">{{ r.name }}</span>\n                  @if (recipientTel(); as tel) {\n                    <a class=\"ob-recipient-phone\" [href]=\"tel\" dir=\"ltr\">{{ r.phone }}</a>\n                  }\n                  @if (r.city) {\n                    <span class=\"ob-recipient-city\">{{ r.city }}</span>\n                  }\n                  @if (r.address) {\n                    <span class=\"ob-recipient-address\" [title]=\"r.address\">{{ r.address }}</span>\n                  }\n                </div>\n              </div>\n            } @else {\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            }\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                  [priceList]=\"priceList()\"\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            ariaLabelKey=\"common_delete\"\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          @if (shippingTotal() > 0) {\n            <div class=\"row shipping\">\n              <span class=\"lbl\">{{ 'order_builder.shipping' | translate }}</span>\n              <span class=\"v\">{{ shippingTotal() | number: '1.2-2' : locale() }}</span>\n            </div>\n          }\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      <!-- Host cards that belong beside the totals (delivery, notes): a column\n           at desktop width, below the totals in the drawer otherwise. -->\n      <ng-content select=\"[obRail]\" />\n\n      <!-- Historique (optional, component-owned) -->\n      @if (hasAudit()) {\n        <ef-change-history\n          [entries]=\"auditEntries()\"\n          [valueLists]=\"auditValueLists()\"\n          [noteFormatter]=\"auditNoteFormatter()\"\n        />\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 .ob-recipient{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s-3);row-gap:2px;min-width:0;font-size:13px;line-height:1.45;color:var(--text-soft)}:host .order-builder .ob-recipient>*{flex:0 1 auto;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}:host .order-builder .ob-recipient-name{font-weight:600;color:var(--text)}:host .order-builder .ob-recipient-phone{color:var(--tenant-700);text-decoration:none;font-variant-numeric:tabular-nums}:host .order-builder .ob-recipient-phone:hover{text-decoration:underline}:host .order-builder .ob-recipient-address{flex-basis:100%;color:var(--text-mute)}: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;box-sizing:border-box;block-size:var(--ef-order-fab-h);--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-block:0;padding-inline:16px 10px;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(pointer:coarse){:host .order-builder .ob-fab .open{min-block-size:var(--hit-touch)}:host ef-data-card .ln-val{min-block-size:var(--hit-field)}:host .order-builder .ob-recipient-phone{line-height:var(--hit-touch)}}\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", "allowAllTime", "mode", "selectionMode", "variant", "showTime", "valueFormat"], 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", "labelParams", "for", "styleClass", "required"] }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "ariaLabelKey", "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", "valueLists", "noteFormatter"] }, { kind: "component", type: EfProductTypeaheadComponent, selector: "ef-product-typeahead", inputs: ["products", "productKeyField", "placeholderKey", "disabled", "currency", "locale", "showVariants", "priceList"], 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", "rowPressed", "rowDisabled", "hasActionsColumn", "rowActionsContext", "showViewAction", "showEditAction", "showDuplicateAction", "showDeleteAction", "rowActionState", "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,
@@ -6622,8 +6976,8 @@ 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            ariaLabelKey=\"common_delete\"\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          @if (shippingTotal() > 0) {\n            <div class=\"row shipping\">\n              <span class=\"lbl\">{{ 'order_builder.shipping' | translate }}</span>\n              <span class=\"v\">{{ shippingTotal() | number: '1.2-2' : locale() }}</span>\n            </div>\n          }\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;box-sizing:border-box;block-size:var(--ef-order-fab-h);--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-block:0;padding-inline:16px 10px;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(pointer:coarse){:host .order-builder .ob-fab .open{min-block-size:var(--hit-touch)}:host ef-data-card .ln-val{min-block-size:var(--hit-field)}}\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 }] }], shippingTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "shippingTotal", 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 }] }] } });
+                    ], 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            @if (recipient(); as r) {\n              <!-- No client to pick (a storefront order): who it goes to,\n                   read-only, in the customer's place. -->\n              <div class=\"field col-6\">\n                <ef-label labelKey=\"order_builder.recipient\" />\n                <div\n                  class=\"ob-recipient\"\n                  role=\"group\"\n                  [attr.aria-label]=\"'order_builder.recipient' | translate\">\n                  <span class=\"ob-recipient-name\">{{ r.name }}</span>\n                  @if (recipientTel(); as tel) {\n                    <a class=\"ob-recipient-phone\" [href]=\"tel\" dir=\"ltr\">{{ r.phone }}</a>\n                  }\n                  @if (r.city) {\n                    <span class=\"ob-recipient-city\">{{ r.city }}</span>\n                  }\n                  @if (r.address) {\n                    <span class=\"ob-recipient-address\" [title]=\"r.address\">{{ r.address }}</span>\n                  }\n                </div>\n              </div>\n            } @else {\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            }\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                  [priceList]=\"priceList()\"\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            ariaLabelKey=\"common_delete\"\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          @if (shippingTotal() > 0) {\n            <div class=\"row shipping\">\n              <span class=\"lbl\">{{ 'order_builder.shipping' | translate }}</span>\n              <span class=\"v\">{{ shippingTotal() | number: '1.2-2' : locale() }}</span>\n            </div>\n          }\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      <!-- Host cards that belong beside the totals (delivery, notes): a column\n           at desktop width, below the totals in the drawer otherwise. -->\n      <ng-content select=\"[obRail]\" />\n\n      <!-- Historique (optional, component-owned) -->\n      @if (hasAudit()) {\n        <ef-change-history\n          [entries]=\"auditEntries()\"\n          [valueLists]=\"auditValueLists()\"\n          [noteFormatter]=\"auditNoteFormatter()\"\n        />\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 .ob-recipient{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s-3);row-gap:2px;min-width:0;font-size:13px;line-height:1.45;color:var(--text-soft)}:host .order-builder .ob-recipient>*{flex:0 1 auto;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}:host .order-builder .ob-recipient-name{font-weight:600;color:var(--text)}:host .order-builder .ob-recipient-phone{color:var(--tenant-700);text-decoration:none;font-variant-numeric:tabular-nums}:host .order-builder .ob-recipient-phone:hover{text-decoration:underline}:host .order-builder .ob-recipient-address{flex-basis:100%;color:var(--text-mute)}: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;box-sizing:border-box;block-size:var(--ef-order-fab-h);--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-block:0;padding-inline:16px 10px;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(pointer:coarse){:host .order-builder .ob-fab .open{min-block-size:var(--hit-touch)}:host ef-data-card .ln-val{min-block-size:var(--hit-field)}:host .order-builder .ob-recipient-phone{line-height:var(--hit-touch)}}\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 }] }], recipient: [{ type: i0.Input, args: [{ isSignal: true, alias: "recipient", required: false }] }], defaultCallingCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCallingCode", required: false }] }], 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 }] }], priceList: [{ type: i0.Input, args: [{ isSignal: true, alias: "priceList", required: false }] }], backendErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "backendErrors", required: false }] }], shippingTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "shippingTotal", required: false }] }], auditEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "auditEntries", required: false }] }], auditValueLists: [{ type: i0.Input, args: [{ isSignal: true, alias: "auditValueLists", required: false }] }], auditNoteFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "auditNoteFormatter", 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 }] }] } });
 
 /**
  * Comptoir smart bar — the search/filter card every list screen
@@ -7405,7 +7759,7 @@ class EfProductCatalogueFilterComponent {
         return (group.children?.length || 0) > 5;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfProductCatalogueFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfProductCatalogueFilterComponent, isStandalone: true, selector: "ef-product-catalogue-filter", inputs: { categoryGroups: { classPropertyName: "categoryGroups", publicName: "categoryGroups", isSignal: true, isRequired: true, transformFunction: null }, products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: true, transformFunction: null }, selectedFilters: { classPropertyName: "selectedFilters", publicName: "selectedFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedFilters: "selectedFiltersChange", filtersChanged: "filtersChanged" }, ngImport: i0, template: "<div class=\"flex w-80 shrink-0 flex-col items-start justify-start sticky top-4 max-h-[calc(100vh-2rem)] overflow-y-auto\">\n  <div\n    class=\"mb-4 flex flex-col items-start justify-center gap-2 self-stretch border-b border-surface-200 px-2 pb-4 dark:border-surface-700\"\n  >\n    <div class=\"flex items-center justify-between gap-2 self-stretch\">\n      <div\n        class=\"text-base font-semibold leading-tight text-surface-900 dark:text-surface-0\"\n      >\n        Filters\n      </div>\n      <p-button\n        [autofocus]=\"false\"\n        [buttonProps]=\"noAutofocus\"\n        size=\"small\"\n        severity=\"secondary\"\n        [text]=\"true\"\n        class=\"py-1! px-2! text-base! font-normal!\"\n        (clickEvent)=\"clearAllFilters()\"\n      >\n        <span pButtonLabel>\n          <i class=\"pi pi-eraser\"></i>\n          Clear\n        </span>\n      </p-button>\n    </div>\n    @if (selectedFilters().length > 0) {\n      <div\n        class=\"flex flex-wrap items-start justify-start gap-2 self-stretch\"\n      >\n        @for (filter of selectedFilters(); track filter.type + filter.code) {\n          <p-chip\n            [label]=\"filter.label\"\n            [removable]=\"true\"\n            size=\"small\"\n            class=\"h-auto rounded-full px-6\"\n            removeIcon=\"pi pi-times\"\n            (onRemove)=\"removeFilter(filter)\"\n          ></p-chip>\n        }\n      </div>\n    }\n  </div>\n\n  <p-accordion\n    [multiple]=\"true\"\n    [value]=\"expandedPanels()\"\n    class=\"w-full\"\n  >\n    @for (group of categoryGroups(); track group.code) {\n      @if (group.children && group.children.length > 0) {\n        <p-accordion-panel [value]=\"group.code\">\n          <p-accordion-header>\n            <span\n              class=\"text-base font-semibold leading-tight text-surface-900 dark:text-surface-0\"\n            >{{ group.label }}</span>\n          </p-accordion-header>\n          <p-accordion-content>\n            <div class=\"flex flex-col gap-4\">\n              @if (shouldShowSearch(group)) {\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]=\"searchTerms()[group.code] || ''\"\n                    (ngModelChange)=\"updateSearchTerm(group.code, $event)\"\n                    [placeholder]=\"'Rechercher ' + group.label.toLowerCase()\"\n                    class=\"w-full\"\n                  />\n                </p-iconfield>\n              }\n\n              @for (item of getFilteredChildren(group); track item.code) {\n                <div class=\"flex items-center justify-between gap-2\">\n                  <div class=\"flex flex-1 items-center gap-2\">\n                    <p-checkbox\n                      size=\"small\"\n                      [inputId]=\"group.code + '_' + item.code\"\n                      [binary]=\"true\"\n                      [ngModel]=\"isFilterSelected(group.code, item.code)\"\n                      (ngModelChange)=\"toggleFilter(group, item)\"\n                    ></p-checkbox>\n                    @if (getColorClass(item)) {\n                      <div\n                        class=\"h-5 w-5 rounded-full\"\n                        [class]=\"getColorClass(item)\"\n                      ></div>\n                    }\n                    <ef-label\n                      [label]=\"item.label\"\n                      [for]=\"group.code + '_' + item.code\"\n                      styleClass=\"cursor-pointer text-base font-normal leading-tight text-surface-700 dark:text-surface-300\"\n                    />\n                  </div>\n                  @if (getItemCount(group.code, item.code) > 0) {\n                    <p-badge\n                      [value]=\"getItemCount(group.code, item.code)\"\n                      size=\"small\"\n                      class=\"rounded-xl! h-6! min-w-6!\"\n                      severity=\"secondary\"\n                    ></p-badge>\n                  }\n                </div>\n              }\n            </div>\n          </p-accordion-content>\n        </p-accordion-panel>\n      }\n    }\n  </p-accordion>\n</div>\n", dependencies: [{ 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: AccordionModule }, { kind: "component", type: i2$2.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "motionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i2$2.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i2$2.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i2$2.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i3.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { 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: "directive", type: i1.ButtonLabel, selector: "[pButtonLabel]", inputs: ["ptButtonLabel", "pButtonLabelPT", "pButtonLabelUnstyled"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i6.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { 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: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfProductCatalogueFilterComponent, isStandalone: true, selector: "ef-product-catalogue-filter", inputs: { categoryGroups: { classPropertyName: "categoryGroups", publicName: "categoryGroups", isSignal: true, isRequired: true, transformFunction: null }, products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: true, transformFunction: null }, selectedFilters: { classPropertyName: "selectedFilters", publicName: "selectedFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedFilters: "selectedFiltersChange", filtersChanged: "filtersChanged" }, ngImport: i0, template: "<div class=\"flex w-80 shrink-0 flex-col items-start justify-start sticky top-4 max-h-[calc(100vh-2rem)] overflow-y-auto\">\n  <div\n    class=\"mb-4 flex flex-col items-start justify-center gap-2 self-stretch border-b border-surface-200 px-2 pb-4 dark:border-surface-700\"\n  >\n    <div class=\"flex items-center justify-between gap-2 self-stretch\">\n      <div\n        class=\"text-base font-semibold leading-tight text-surface-900 dark:text-surface-0\"\n      >\n        Filters\n      </div>\n      <p-button\n        [autofocus]=\"false\"\n        [buttonProps]=\"noAutofocus\"\n        size=\"small\"\n        severity=\"secondary\"\n        [text]=\"true\"\n        class=\"py-1! px-2! text-base! font-normal!\"\n        (clickEvent)=\"clearAllFilters()\"\n      >\n        <span pButtonLabel>\n          <i class=\"pi pi-eraser\"></i>\n          Clear\n        </span>\n      </p-button>\n    </div>\n    @if (selectedFilters().length > 0) {\n      <div\n        class=\"flex flex-wrap items-start justify-start gap-2 self-stretch\"\n      >\n        @for (filter of selectedFilters(); track filter.type + filter.code) {\n          <p-chip\n            [label]=\"filter.label\"\n            [removable]=\"true\"\n            size=\"small\"\n            class=\"h-auto rounded-full px-6\"\n            removeIcon=\"pi pi-times\"\n            (onRemove)=\"removeFilter(filter)\"\n          ></p-chip>\n        }\n      </div>\n    }\n  </div>\n\n  <p-accordion\n    [multiple]=\"true\"\n    [value]=\"expandedPanels()\"\n    class=\"w-full\"\n  >\n    @for (group of categoryGroups(); track group.code) {\n      @if (group.children && group.children.length > 0) {\n        <p-accordion-panel [value]=\"group.code\">\n          <p-accordion-header>\n            <span\n              class=\"text-base font-semibold leading-tight text-surface-900 dark:text-surface-0\"\n            >{{ group.label }}</span>\n          </p-accordion-header>\n          <p-accordion-content>\n            <div class=\"flex flex-col gap-4\">\n              @if (shouldShowSearch(group)) {\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]=\"searchTerms()[group.code] || ''\"\n                    (ngModelChange)=\"updateSearchTerm(group.code, $event)\"\n                    [placeholder]=\"'Rechercher ' + group.label.toLowerCase()\"\n                    class=\"w-full\"\n                  />\n                </p-iconfield>\n              }\n\n              @for (item of getFilteredChildren(group); track item.code) {\n                <div class=\"flex items-center justify-between gap-2\">\n                  <div class=\"flex flex-1 items-center gap-2\">\n                    <p-checkbox\n                      size=\"small\"\n                      [inputId]=\"group.code + '_' + item.code\"\n                      [binary]=\"true\"\n                      [ngModel]=\"isFilterSelected(group.code, item.code)\"\n                      (ngModelChange)=\"toggleFilter(group, item)\"\n                    ></p-checkbox>\n                    @if (getColorClass(item)) {\n                      <div\n                        class=\"h-5 w-5 rounded-full\"\n                        [class]=\"getColorClass(item)\"\n                      ></div>\n                    }\n                    <ef-label\n                      [label]=\"item.label\"\n                      [for]=\"group.code + '_' + item.code\"\n                      styleClass=\"cursor-pointer text-base font-normal leading-tight text-surface-700 dark:text-surface-300\"\n                    />\n                  </div>\n                  @if (getItemCount(group.code, item.code) > 0) {\n                    <p-badge\n                      [value]=\"getItemCount(group.code, item.code)\"\n                      size=\"small\"\n                      class=\"rounded-xl! h-6! min-w-6!\"\n                      severity=\"secondary\"\n                    ></p-badge>\n                  }\n                </div>\n              }\n            </div>\n          </p-accordion-content>\n        </p-accordion-panel>\n      }\n    }\n  </p-accordion>\n</div>\n", dependencies: [{ 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: AccordionModule }, { kind: "component", type: i2$2.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "motionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i2$2.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i2$2.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i2$2.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i3.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { 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: "directive", type: i1.ButtonLabel, selector: "[pButtonLabel]", inputs: ["ptButtonLabel", "pButtonLabelPT", "pButtonLabelUnstyled"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i6.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { 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: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "labelParams", "for", "styleClass", "required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfProductCatalogueFilterComponent, decorators: [{
             type: Component,
@@ -7438,6 +7792,12 @@ class EfProductCatalogueComponent {
     trackByField = input('id', ...(ngDevMode ? [{ debugName: "trackByField" }] : /* istanbul ignore next */ []));
     /** Currency code for price formatting */
     currencyCode = input('MAD', ...(ngDevMode ? [{ debugName: "currencyCode" }] : /* istanbul ignore next */ []));
+    /**
+     * Which price the cards show: `'wholesale'` (default) or `'retail'`, the shop price.
+     * Bind the same value as the order builder's `priceList`, so a card shows the price
+     * of the line it adds (the rule lives in `defaultUnitPrice`).
+     */
+    priceList = input('wholesale', ...(ngDevMode ? [{ debugName: "priceList" }] : /* istanbul ignore next */ []));
     /** Locale used for number/currency formatting and the quantity stepper */
     localeCode = input('fr-FR', ...(ngDevMode ? [{ debugName: "localeCode" }] : /* istanbul ignore next */ []));
     /**
@@ -7691,30 +8051,38 @@ class EfProductCatalogueComponent {
     trackKey(product) {
         return this.productKey(product);
     }
+    /** The price a variant (or a simple product, `variant` null) is shown at under the active list. */
+    priceOf(product, variant) {
+        if (this.priceList() === 'retail') {
+            return defaultUnitPrice(product, variant, 'retail');
+        }
+        return variant ? variant.price : product.unitPrice;
+    }
     formatPrice(product) {
         if (this.isVariableProduct(product)) {
             const variantId = this.getSelectedVariantId(product);
             const variant = product.variants?.find((v) => v.variantId === variantId);
             if (variant) {
-                return this.formatCurrency(variant.price);
+                return this.formatCurrency(this.priceOf(product, variant));
             }
             // Fallback: show price range
             const activeVariants = this.getActiveVariants(product);
             if (activeVariants.length > 0) {
-                const min = Math.min(...activeVariants.map((v) => v.price));
-                const max = Math.max(...activeVariants.map((v) => v.price));
+                const prices = activeVariants.map((v) => this.priceOf(product, v) ?? 0);
+                const min = Math.min(...prices);
+                const max = Math.max(...prices);
                 if (min === max)
                     return this.formatCurrency(min);
                 return `${this.formatCurrency(min)} - ${this.formatCurrency(max)}`;
             }
         }
-        const price = product.unitPrice;
+        const price = this.priceOf(product, null);
         if (price == null)
             return '';
         return this.formatCurrency(price);
     }
-    formatVariantPrice(variant) {
-        return this.formatCurrency(variant.price);
+    formatVariantPrice(variant, product) {
+        return this.formatCurrency(product ? this.priceOf(product, variant) : variant.price);
     }
     formatCurrency(value) {
         if (value == null)
@@ -7722,7 +8090,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(--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", "ariaLabelKey", "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 }, priceList: { classPropertyName: "priceList", publicName: "priceList", 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", "ariaLabelKey", "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,
@@ -7741,7 +8109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         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(--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: [{
+        }], 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 }] }], priceList: [{ type: i0.Input, args: [{ isSignal: true, alias: "priceList", 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']
             }], productsValidated: [{ type: i0.Output, args: ["productsValidated"] }] } });
@@ -9263,8 +9631,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  */
 class EfPillGroupComponent {
     items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    /** Two-way bound selection. */
-    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Selected value; `null` when nothing is selected. Two-way bindable
+     *  with `[(value)]`. */
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emits the picked pill's value. Never `null`: a click always picks
+     *  a pill, so handlers can take `T` without a null check. */
+    valueChange = output();
+    /** What the pills render: the bound value, or the last pick when the
+     *  caller only listens to `valueChange`. */
+    selected = linkedSignal(() => this.value(), ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     /** Translation key for the group's accessible name. */
     ariaLabelKey = input('common_filters', ...(ngDevMode ? [{ debugName: "ariaLabelKey" }] : /* istanbul ignore next */ []));
     /** Hide counts even when items provide them. */
@@ -9285,7 +9660,7 @@ class EfPillGroupComponent {
             this.scrollActiveIntoView('auto');
         });
         effect(() => {
-            this.value();
+            this.selected();
             this.items();
             queueMicrotask(() => {
                 this.measure();
@@ -9294,8 +9669,10 @@ class EfPillGroupComponent {
         });
     }
     select(item) {
-        if (this.value() !== item.value)
-            this.value.set(item.value);
+        if (this.selected() === item.value)
+            return;
+        this.selected.set(item.value);
+        this.valueChange.emit(item.value);
     }
     onScroll() {
         this.measure();
@@ -9325,12 +9702,12 @@ class EfPillGroupComponent {
         active.scrollIntoView({ behavior, inline: 'center', block: 'nearest' });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfPillGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfPillGroupComponent, isStandalone: true, selector: "ef-pill-group", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, hideCounts: { classPropertyName: "hideCounts", publicName: "hideCounts", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ef-pill-group\" [ngClass]=\"fadeClass()\">\n  <div\n    #scroller\n    class=\"ef-pill-group__track\"\n    role=\"tablist\"\n    [attr.aria-label]=\"ariaLabelKey() | translate\"\n    (scroll)=\"onScroll()\"\n  >\n    @for (item of items(); track trackValue($index, item)) {\n      <button\n        type=\"button\"\n        class=\"ef-pill\"\n        role=\"tab\"\n        [class.is-active]=\"item.value === value()\"\n        [attr.aria-selected]=\"item.value === value()\"\n        (click)=\"select(item)\"\n      >\n        <span class=\"ef-pill__label\">{{ item.labelKey | translate }}</span>\n        @if (!hideCounts() && item.count !== undefined) {\n          <span class=\"ef-pill__sep\" aria-hidden=\"true\">\u00B7</span>\n          <span class=\"ef-pill__count\">{{ item.count }}</span>\n        }\n      </button>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;min-width:0;max-width:100%;flex:1 1 auto}@media(max-width:767px){:host{flex-basis:100%}}.ef-pill-group{position:relative;display:flex;min-width:0;max-width:100%;inline-size:100%;border-radius:var(--r-pill)}.ef-pill-group__track{display:flex;align-items:center;gap:4px;padding:4px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;border-radius:inherit;scrollbar-width:none;-ms-overflow-style:none}.ef-pill-group__track::-webkit-scrollbar{display:none}.ef-pill-group:before,.ef-pill-group:after{content:\"\";position:absolute;inset-block:0;inline-size:28px;pointer-events:none;opacity:0;transition:opacity var(--t-fast, .14s) var(--ease-out, ease-out);z-index:1}.ef-pill-group:before{inset-inline-start:0;background:linear-gradient(to right,var(--paper-alt) 20%,transparent)}.ef-pill-group:after{inset-inline-end:0;background:linear-gradient(to left,var(--paper-alt) 20%,transparent)}[dir=rtl] .ef-pill-group:before{background:linear-gradient(to left,var(--paper-alt) 20%,transparent)}[dir=rtl] .ef-pill-group:after{background:linear-gradient(to right,var(--paper-alt) 20%,transparent)}.ef-pill-group.has-fade-start:before,.ef-pill-group.has-fade-end:after{opacity:1}.ef-pill{flex:0 0 auto;scroll-snap-align:center;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;block-size:var(--hit);padding-inline:14px;border:none;border-radius:var(--r-pill);background:transparent;color:var(--text-mute);font-family:inherit;font-size:12.5px;font-weight:500;letter-spacing:.01em;line-height:1;cursor:pointer;transition:background var(--t-fast, .14s) var(--ease-out, ease-out),color var(--t-fast, .14s) var(--ease-out, ease-out)}.ef-pill:hover:not(.is-active){background:color-mix(in srgb,var(--ink-active, #0f1115) 6%,transparent);color:var(--text)}.ef-pill:focus-visible{outline:2px solid color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent);outline-offset:1px}.ef-pill.is-active{background:var(--ink-active, #0f1115);color:var(--paper)}.ef-pill.is-active .ef-pill__sep,.ef-pill.is-active .ef-pill__count{color:color-mix(in srgb,var(--paper) 70%,transparent)}.ef-pill__sep{color:var(--text-soft)}.ef-pill__count{font-variant-numeric:tabular-nums;color:var(--text-mute)}@media(pointer:coarse){.ef-pill{block-size:var(--hit-touch);padding-inline:16px;font-size:13px}}@media(max-width:767px){.ef-pill-group__track{scroll-padding-inline:var(--s-2)}}@media(max-width:767px)and (pointer:fine){.ef-pill-group__track{padding-block:calc((var(--hit-touch) - var(--hit)) / 2)}.ef-pill{position:relative;min-inline-size:var(--hit-touch);justify-content:center}.ef-pill:after{content:\"\";position:absolute;inset-inline:0;inset-block:calc((var(--hit) - var(--hit-touch)) / 2)}}@media(prefers-reduced-motion:reduce){.ef-pill-group:before,.ef-pill-group:after,.ef-pill{transition:none}.ef-pill-group__track{scroll-behavior:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfPillGroupComponent, isStandalone: true, selector: "ef-pill-group", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, hideCounts: { classPropertyName: "hideCounts", publicName: "hideCounts", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ef-pill-group\" [ngClass]=\"fadeClass()\">\n  <div\n    #scroller\n    class=\"ef-pill-group__track\"\n    role=\"tablist\"\n    [attr.aria-label]=\"ariaLabelKey() | translate\"\n    (scroll)=\"onScroll()\"\n  >\n    @for (item of items(); track trackValue($index, item)) {\n      <button\n        type=\"button\"\n        class=\"ef-pill\"\n        role=\"tab\"\n        [class.is-active]=\"item.value === selected()\"\n        [attr.aria-selected]=\"item.value === selected()\"\n        (click)=\"select(item)\"\n      >\n        <span class=\"ef-pill__label\">{{ item.labelKey | translate }}</span>\n        @if (!hideCounts() && item.count !== undefined) {\n          <span class=\"ef-pill__sep\" aria-hidden=\"true\">\u00B7</span>\n          <span class=\"ef-pill__count\">{{ item.count }}</span>\n        }\n      </button>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;min-width:0;max-width:100%;flex:1 1 auto}@media(max-width:767px){:host{flex-basis:100%}}.ef-pill-group{position:relative;display:flex;min-width:0;max-width:100%;inline-size:100%;border-radius:var(--r-pill)}.ef-pill-group__track{display:flex;align-items:center;gap:4px;padding:4px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;border-radius:inherit;scrollbar-width:none;-ms-overflow-style:none}.ef-pill-group__track::-webkit-scrollbar{display:none}.ef-pill-group:before,.ef-pill-group:after{content:\"\";position:absolute;inset-block:0;inline-size:28px;pointer-events:none;opacity:0;transition:opacity var(--t-fast, .14s) var(--ease-out, ease-out);z-index:1}.ef-pill-group:before{inset-inline-start:0;background:linear-gradient(to right,var(--paper-alt) 20%,transparent)}.ef-pill-group:after{inset-inline-end:0;background:linear-gradient(to left,var(--paper-alt) 20%,transparent)}[dir=rtl] .ef-pill-group:before{background:linear-gradient(to left,var(--paper-alt) 20%,transparent)}[dir=rtl] .ef-pill-group:after{background:linear-gradient(to right,var(--paper-alt) 20%,transparent)}.ef-pill-group.has-fade-start:before,.ef-pill-group.has-fade-end:after{opacity:1}.ef-pill{flex:0 0 auto;scroll-snap-align:center;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;block-size:var(--hit);padding-inline:14px;border:none;border-radius:var(--r-pill);background:transparent;color:var(--text-mute);font-family:inherit;font-size:12.5px;font-weight:500;letter-spacing:.01em;line-height:1;cursor:pointer;transition:background var(--t-fast, .14s) var(--ease-out, ease-out),color var(--t-fast, .14s) var(--ease-out, ease-out)}.ef-pill:hover:not(.is-active){background:color-mix(in srgb,var(--ink-active, #0f1115) 6%,transparent);color:var(--text)}.ef-pill:focus-visible{outline:2px solid color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent);outline-offset:1px}.ef-pill.is-active{background:var(--ink-active, #0f1115);color:var(--paper)}.ef-pill.is-active .ef-pill__sep,.ef-pill.is-active .ef-pill__count{color:color-mix(in srgb,var(--paper) 70%,transparent)}.ef-pill__sep{color:var(--text-soft)}.ef-pill__count{font-variant-numeric:tabular-nums;color:var(--text-mute)}@media(pointer:coarse){.ef-pill{block-size:var(--hit-touch);padding-inline:16px;font-size:13px}}@media(max-width:767px){.ef-pill-group__track{scroll-padding-inline:var(--s-2)}}@media(max-width:767px)and (pointer:fine){.ef-pill-group__track{padding-block:calc((var(--hit-touch) - var(--hit)) / 2)}.ef-pill{position:relative;min-inline-size:var(--hit-touch);justify-content:center}.ef-pill:after{content:\"\";position:absolute;inset-inline:0;inset-block:calc((var(--hit) - var(--hit-touch)) / 2)}}@media(prefers-reduced-motion:reduce){.ef-pill-group:before,.ef-pill-group:after,.ef-pill{transition:none}.ef-pill-group__track{scroll-behavior:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfPillGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-pill-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TranslateModule], template: "<div class=\"ef-pill-group\" [ngClass]=\"fadeClass()\">\n  <div\n    #scroller\n    class=\"ef-pill-group__track\"\n    role=\"tablist\"\n    [attr.aria-label]=\"ariaLabelKey() | translate\"\n    (scroll)=\"onScroll()\"\n  >\n    @for (item of items(); track trackValue($index, item)) {\n      <button\n        type=\"button\"\n        class=\"ef-pill\"\n        role=\"tab\"\n        [class.is-active]=\"item.value === value()\"\n        [attr.aria-selected]=\"item.value === value()\"\n        (click)=\"select(item)\"\n      >\n        <span class=\"ef-pill__label\">{{ item.labelKey | translate }}</span>\n        @if (!hideCounts() && item.count !== undefined) {\n          <span class=\"ef-pill__sep\" aria-hidden=\"true\">\u00B7</span>\n          <span class=\"ef-pill__count\">{{ item.count }}</span>\n        }\n      </button>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;min-width:0;max-width:100%;flex:1 1 auto}@media(max-width:767px){:host{flex-basis:100%}}.ef-pill-group{position:relative;display:flex;min-width:0;max-width:100%;inline-size:100%;border-radius:var(--r-pill)}.ef-pill-group__track{display:flex;align-items:center;gap:4px;padding:4px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;border-radius:inherit;scrollbar-width:none;-ms-overflow-style:none}.ef-pill-group__track::-webkit-scrollbar{display:none}.ef-pill-group:before,.ef-pill-group:after{content:\"\";position:absolute;inset-block:0;inline-size:28px;pointer-events:none;opacity:0;transition:opacity var(--t-fast, .14s) var(--ease-out, ease-out);z-index:1}.ef-pill-group:before{inset-inline-start:0;background:linear-gradient(to right,var(--paper-alt) 20%,transparent)}.ef-pill-group:after{inset-inline-end:0;background:linear-gradient(to left,var(--paper-alt) 20%,transparent)}[dir=rtl] .ef-pill-group:before{background:linear-gradient(to left,var(--paper-alt) 20%,transparent)}[dir=rtl] .ef-pill-group:after{background:linear-gradient(to right,var(--paper-alt) 20%,transparent)}.ef-pill-group.has-fade-start:before,.ef-pill-group.has-fade-end:after{opacity:1}.ef-pill{flex:0 0 auto;scroll-snap-align:center;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;block-size:var(--hit);padding-inline:14px;border:none;border-radius:var(--r-pill);background:transparent;color:var(--text-mute);font-family:inherit;font-size:12.5px;font-weight:500;letter-spacing:.01em;line-height:1;cursor:pointer;transition:background var(--t-fast, .14s) var(--ease-out, ease-out),color var(--t-fast, .14s) var(--ease-out, ease-out)}.ef-pill:hover:not(.is-active){background:color-mix(in srgb,var(--ink-active, #0f1115) 6%,transparent);color:var(--text)}.ef-pill:focus-visible{outline:2px solid color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent);outline-offset:1px}.ef-pill.is-active{background:var(--ink-active, #0f1115);color:var(--paper)}.ef-pill.is-active .ef-pill__sep,.ef-pill.is-active .ef-pill__count{color:color-mix(in srgb,var(--paper) 70%,transparent)}.ef-pill__sep{color:var(--text-soft)}.ef-pill__count{font-variant-numeric:tabular-nums;color:var(--text-mute)}@media(pointer:coarse){.ef-pill{block-size:var(--hit-touch);padding-inline:16px;font-size:13px}}@media(max-width:767px){.ef-pill-group__track{scroll-padding-inline:var(--s-2)}}@media(max-width:767px)and (pointer:fine){.ef-pill-group__track{padding-block:calc((var(--hit-touch) - var(--hit)) / 2)}.ef-pill{position:relative;min-inline-size:var(--hit-touch);justify-content:center}.ef-pill:after{content:\"\";position:absolute;inset-inline:0;inset-block:calc((var(--hit) - var(--hit-touch)) / 2)}}@media(prefers-reduced-motion:reduce){.ef-pill-group:before,.ef-pill-group:after,.ef-pill{transition:none}.ef-pill-group__track{scroll-behavior:auto}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], hideCounts: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCounts", required: false }] }], scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }] } });
+            args: [{ selector: 'ef-pill-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TranslateModule], template: "<div class=\"ef-pill-group\" [ngClass]=\"fadeClass()\">\n  <div\n    #scroller\n    class=\"ef-pill-group__track\"\n    role=\"tablist\"\n    [attr.aria-label]=\"ariaLabelKey() | translate\"\n    (scroll)=\"onScroll()\"\n  >\n    @for (item of items(); track trackValue($index, item)) {\n      <button\n        type=\"button\"\n        class=\"ef-pill\"\n        role=\"tab\"\n        [class.is-active]=\"item.value === selected()\"\n        [attr.aria-selected]=\"item.value === selected()\"\n        (click)=\"select(item)\"\n      >\n        <span class=\"ef-pill__label\">{{ item.labelKey | translate }}</span>\n        @if (!hideCounts() && item.count !== undefined) {\n          <span class=\"ef-pill__sep\" aria-hidden=\"true\">\u00B7</span>\n          <span class=\"ef-pill__count\">{{ item.count }}</span>\n        }\n      </button>\n    }\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;min-width:0;max-width:100%;flex:1 1 auto}@media(max-width:767px){:host{flex-basis:100%}}.ef-pill-group{position:relative;display:flex;min-width:0;max-width:100%;inline-size:100%;border-radius:var(--r-pill)}.ef-pill-group__track{display:flex;align-items:center;gap:4px;padding:4px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;border-radius:inherit;scrollbar-width:none;-ms-overflow-style:none}.ef-pill-group__track::-webkit-scrollbar{display:none}.ef-pill-group:before,.ef-pill-group:after{content:\"\";position:absolute;inset-block:0;inline-size:28px;pointer-events:none;opacity:0;transition:opacity var(--t-fast, .14s) var(--ease-out, ease-out);z-index:1}.ef-pill-group:before{inset-inline-start:0;background:linear-gradient(to right,var(--paper-alt) 20%,transparent)}.ef-pill-group:after{inset-inline-end:0;background:linear-gradient(to left,var(--paper-alt) 20%,transparent)}[dir=rtl] .ef-pill-group:before{background:linear-gradient(to left,var(--paper-alt) 20%,transparent)}[dir=rtl] .ef-pill-group:after{background:linear-gradient(to right,var(--paper-alt) 20%,transparent)}.ef-pill-group.has-fade-start:before,.ef-pill-group.has-fade-end:after{opacity:1}.ef-pill{flex:0 0 auto;scroll-snap-align:center;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;block-size:var(--hit);padding-inline:14px;border:none;border-radius:var(--r-pill);background:transparent;color:var(--text-mute);font-family:inherit;font-size:12.5px;font-weight:500;letter-spacing:.01em;line-height:1;cursor:pointer;transition:background var(--t-fast, .14s) var(--ease-out, ease-out),color var(--t-fast, .14s) var(--ease-out, ease-out)}.ef-pill:hover:not(.is-active){background:color-mix(in srgb,var(--ink-active, #0f1115) 6%,transparent);color:var(--text)}.ef-pill:focus-visible{outline:2px solid color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent);outline-offset:1px}.ef-pill.is-active{background:var(--ink-active, #0f1115);color:var(--paper)}.ef-pill.is-active .ef-pill__sep,.ef-pill.is-active .ef-pill__count{color:color-mix(in srgb,var(--paper) 70%,transparent)}.ef-pill__sep{color:var(--text-soft)}.ef-pill__count{font-variant-numeric:tabular-nums;color:var(--text-mute)}@media(pointer:coarse){.ef-pill{block-size:var(--hit-touch);padding-inline:16px;font-size:13px}}@media(max-width:767px){.ef-pill-group__track{scroll-padding-inline:var(--s-2)}}@media(max-width:767px)and (pointer:fine){.ef-pill-group__track{padding-block:calc((var(--hit-touch) - var(--hit)) / 2)}.ef-pill{position:relative;min-inline-size:var(--hit-touch);justify-content:center}.ef-pill:after{content:\"\";position:absolute;inset-inline:0;inset-block:calc((var(--hit) - var(--hit-touch)) / 2)}}@media(prefers-reduced-motion:reduce){.ef-pill-group:before,.ef-pill-group:after,.ef-pill{transition:none}.ef-pill-group__track{scroll-behavior:auto}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], hideCounts: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCounts", required: false }] }], scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }] } });
 
 /**
  * Marks an `<ng-template>` as the panel renderer for a tab value on
@@ -9426,7 +9803,10 @@ class EfTabsComponent {
     overflow = false;
     /** Hide count badges even when items provide them. */
     hideCounts = false;
+    /** Untranslated accessible name of the tablist. Prefer `ariaLabelKey`. */
     ariaLabel = 'tabs';
+    /** Translation key for the tablist's accessible name; wins over `ariaLabel`. */
+    ariaLabelKey;
     /** Translation key used as the `aria-label` of the dirty dot.
      *  Defaults to `'common.dirty'` — apps add the matching entry to
      *  `fr.json` / `ar.json`. */
@@ -9505,7 +9885,7 @@ class EfTabsComponent {
         return item.value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfTabsComponent, isStandalone: true, selector: "ef-tabs", inputs: { items: "items", value: "value", variant: "variant", module: "module", overflow: ["overflow", "overflow", booleanAttribute], hideCounts: ["hideCounts", "hideCounts", booleanAttribute], ariaLabel: "ariaLabel", dirtyLabelKey: "dirtyLabelKey" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.ef-tabs--pill": "variant === 'pill'", "class.ef-tabs--underline": "variant === 'underline'", "class.ef-tabs--overflow": "overflow", "attr.data-module": "module ?? null" } }, queries: [{ propertyName: "panels", predicate: EfTabPanelDirective }], viewQueries: [{ propertyName: "tabEls", predicate: ["tabEl"], descendants: true }], ngImport: i0, template: "<div class=\"ef-tabs__list\" role=\"tablist\" [attr.aria-label]=\"ariaLabel\">\n  @for (item of items; track trackValue($index, item); let i = $index) {\n    <button\n      #tabEl\n      type=\"button\"\n      class=\"ef-tabs__tab\"\n      role=\"tab\"\n      [class.is-active]=\"item.value === value\"\n      [class.is-disabled]=\"!!item.disabled\"\n      [attr.aria-selected]=\"item.value === value\"\n      [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n      [disabled]=\"item.disabled\"\n      [tabindex]=\"item.value === value ? 0 : -1\"\n      (click)=\"select(item)\"\n      (keydown)=\"onKeydown($event, i)\"\n    >\n      @if (item.icon) {\n        <i class=\"ef-tabs__ico\" [class]=\"item.icon\" aria-hidden=\"true\"></i>\n      }\n      <span class=\"ef-tabs__label\">\n        @if (item.labelKey) {\n          {{ item.labelKey | translate }}\n        } @else {\n          {{ item.label }}\n        }\n      </span>\n      @if (!hideCounts && item.count !== undefined && item.count !== null) {\n        <span class=\"ef-tabs__count\">{{ item.count }}</span>\n      }\n      @if (item.dirty) {\n        <span class=\"ef-tabs__dot\" [attr.aria-label]=\"dirtyLabelKey | translate\"></span>\n      }\n    </button>\n  }\n</div>\n\n@if (hasPanels()) {\n  <div class=\"ef-tabs__panels\" role=\"tabpanel\">\n    @if (activePanel(); as tpl) {\n      <ng-container [ngTemplateOutlet]=\"tpl\"></ng-container>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0}.ef-tabs__list{position:relative;display:flex;align-items:stretch;gap:2px;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.ef-tabs__list>*{flex:0 0 auto}.ef-tabs__panels{display:block;padding-top:var(--s-5);min-width:0;animation:ef-tabs-panel-in var(--t-base, .26s) var(--ease-out, ease-out)}@keyframes ef-tabs-panel-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.ef-tabs__list::-webkit-scrollbar{display:none}.ef-tabs__tab{appearance:none;background:transparent;border:0;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.005em;color:var(--text-mute);cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:color var(--t-fast, .14s) var(--ease-out, ease-out),background-color var(--t-fast, .14s) var(--ease-out, ease-out),border-color var(--t-base, .26s) var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1))}.ef-tabs__tab:focus-visible{outline:0}.ef-tabs__tab.is-disabled,.ef-tabs__tab[disabled]{opacity:.4;cursor:not-allowed}.ef-tabs__ico{font-size:13px;opacity:.75;flex-shrink:0}.ef-tabs__tab.is-active .ef-tabs__ico{opacity:1}.ef-tabs__count{font-family:var(--font-mono);font-size:10.5px;font-weight:700;background:var(--paper);border:1px solid var(--rule);color:var(--text-mute);padding:1px 7px;border-radius:var(--r-pill);min-width:20px;text-align:center;line-height:1.5;font-variant-numeric:tabular-nums}.ef-tabs__dot{width:6px;height:6px;border-radius:50%;background:var(--tenant-500);flex-shrink:0}:host(.ef-tabs--pill) .ef-tabs__list{background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-pill);padding:4px;gap:2px}:host(.ef-tabs--pill) .ef-tabs__tab{min-height:var(--hit, 32px);padding:7px 14px;border-radius:var(--r-pill)}:host(.ef-tabs--pill) .ef-tabs__tab:hover:not(.is-active):not(.is-disabled){color:var(--text)}:host(.ef-tabs--pill) .ef-tabs__tab:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active{background:var(--ink-active, #0f1115);color:var(--paper)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active .ef-tabs__count{background:#ffffff2e;border-color:transparent;color:var(--paper)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active .ef-tabs__dot{background:var(--paper)}:host(.ef-tabs--underline) .ef-tabs__list{display:flex;border-bottom:1px solid var(--rule);padding:0;gap:2px}:host(.ef-tabs--underline) .ef-tabs__tab{min-height:42px;padding:11px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:var(--r-sm) var(--r-sm) 0 0;font-size:13.5px}:host(.ef-tabs--underline) .ef-tabs__tab:hover:not(.is-active):not(.is-disabled){color:var(--text);background:var(--paper)}:host(.ef-tabs--underline) .ef-tabs__tab:focus-visible{background:var(--paper-alt);box-shadow:inset 0 0 0 2px var(--tenant-200)}:host(.ef-tabs--underline) .ef-tabs__tab.is-active{color:var(--text);border-bottom-color:var(--module, var(--ink-active))}:host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__count{background:color-mix(in srgb,var(--module, var(--ink-active)) 14%,var(--paper-alt));border-color:transparent;color:var(--module, var(--ink-active))}:host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__dot{background:var(--module, var(--tenant-500))}:host[data-module=sales]{--module: var(--m-sales)}:host[data-module=purchase]{--module: var(--m-purchase)}:host[data-module=stock]{--module: var(--m-stock)}:host[data-module=pos]{--module: var(--m-pos)}:host[data-module=marketing]{--module: var(--m-marketing)}:host[data-module=store]{--module: var(--m-store)}:host[data-module=finance]{--module: var(--m-finance)}:host[data-module=admin]{--module: var(--m-admin)}:host(.ef-tabs--overflow){position:relative;display:block}:host(.ef-tabs--overflow) .ef-tabs__list{display:flex;width:100%}:host(.ef-tabs--overflow):before,:host(.ef-tabs--overflow):after{content:\"\";position:absolute;top:0;bottom:0;width:36px;pointer-events:none;z-index:2}:host(.ef-tabs--overflow):before{inset-inline-start:0;background:linear-gradient(to right,var(--paper-alt),transparent)}:host(.ef-tabs--overflow):after{inset-inline-end:0;background:linear-gradient(to left,var(--paper-alt),transparent)}[data-theme=dark] :host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__count{background:color-mix(in srgb,var(--module, var(--ink-active)) 28%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfTabsComponent, isStandalone: true, selector: "ef-tabs", inputs: { items: "items", value: "value", variant: "variant", module: "module", overflow: ["overflow", "overflow", booleanAttribute], hideCounts: ["hideCounts", "hideCounts", booleanAttribute], ariaLabel: "ariaLabel", ariaLabelKey: "ariaLabelKey", dirtyLabelKey: "dirtyLabelKey" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.ef-tabs--pill": "variant === 'pill'", "class.ef-tabs--underline": "variant === 'underline'", "class.ef-tabs--overflow": "overflow", "attr.data-module": "module ?? null" } }, queries: [{ propertyName: "panels", predicate: EfTabPanelDirective }], viewQueries: [{ propertyName: "tabEls", predicate: ["tabEl"], descendants: true }], ngImport: i0, template: "<div class=\"ef-tabs__list\" role=\"tablist\" [attr.aria-label]=\"ariaLabelKey ? (ariaLabelKey | translate) : ariaLabel\">\n  @for (item of items; track trackValue($index, item); let i = $index) {\n    <button\n      #tabEl\n      type=\"button\"\n      class=\"ef-tabs__tab\"\n      role=\"tab\"\n      [class.is-active]=\"item.value === value\"\n      [class.is-disabled]=\"!!item.disabled\"\n      [attr.aria-selected]=\"item.value === value\"\n      [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n      [disabled]=\"item.disabled\"\n      [tabindex]=\"item.value === value ? 0 : -1\"\n      (click)=\"select(item)\"\n      (keydown)=\"onKeydown($event, i)\"\n    >\n      @if (item.icon) {\n        <i class=\"ef-tabs__ico\" [class]=\"item.icon\" aria-hidden=\"true\"></i>\n      }\n      <span class=\"ef-tabs__label\">\n        @if (item.labelKey) {\n          {{ item.labelKey | translate }}\n        } @else {\n          {{ item.label }}\n        }\n      </span>\n      @if (!hideCounts && item.count !== undefined && item.count !== null) {\n        <span class=\"ef-tabs__count\">{{ item.count }}</span>\n      }\n      @if (item.dirty) {\n        <span class=\"ef-tabs__dot\" [attr.aria-label]=\"dirtyLabelKey | translate\"></span>\n      }\n    </button>\n  }\n</div>\n\n@if (hasPanels()) {\n  <div class=\"ef-tabs__panels\" role=\"tabpanel\">\n    @if (activePanel(); as tpl) {\n      <ng-container [ngTemplateOutlet]=\"tpl\"></ng-container>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0}.ef-tabs__list{position:relative;display:flex;align-items:stretch;gap:2px;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.ef-tabs__list>*{flex:0 0 auto}.ef-tabs__panels{display:block;padding-top:var(--s-5);min-width:0;animation:ef-tabs-panel-in var(--t-base, .26s) var(--ease-out, ease-out)}@keyframes ef-tabs-panel-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.ef-tabs__list::-webkit-scrollbar{display:none}.ef-tabs__tab{appearance:none;background:transparent;border:0;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.005em;color:var(--text-mute);cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:color var(--t-fast, .14s) var(--ease-out, ease-out),background-color var(--t-fast, .14s) var(--ease-out, ease-out),border-color var(--t-base, .26s) var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1))}.ef-tabs__tab:focus-visible{outline:0}.ef-tabs__tab.is-disabled,.ef-tabs__tab[disabled]{opacity:.4;cursor:not-allowed}.ef-tabs__ico{font-size:13px;opacity:.75;flex-shrink:0}.ef-tabs__tab.is-active .ef-tabs__ico{opacity:1}.ef-tabs__count{font-family:var(--font-mono);font-size:10.5px;font-weight:700;background:var(--paper);border:1px solid var(--rule);color:var(--text-mute);padding:1px 7px;border-radius:var(--r-pill);min-width:20px;text-align:center;line-height:1.5;font-variant-numeric:tabular-nums}.ef-tabs__dot{width:6px;height:6px;border-radius:50%;background:var(--tenant-500);flex-shrink:0}:host(.ef-tabs--pill) .ef-tabs__list{background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-pill);padding:4px;gap:2px}:host(.ef-tabs--pill) .ef-tabs__tab{min-height:var(--hit, 32px);padding:7px 14px;border-radius:var(--r-pill)}:host(.ef-tabs--pill) .ef-tabs__tab:hover:not(.is-active):not(.is-disabled){color:var(--text)}:host(.ef-tabs--pill) .ef-tabs__tab:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active{background:var(--ink-active, #0f1115);color:var(--paper)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active .ef-tabs__count{background:#ffffff2e;border-color:transparent;color:var(--paper)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active .ef-tabs__dot{background:var(--paper)}:host(.ef-tabs--underline) .ef-tabs__list{display:flex;border-bottom:1px solid var(--rule);padding:0;gap:2px}:host(.ef-tabs--underline) .ef-tabs__tab{min-height:42px;padding:11px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:var(--r-sm) var(--r-sm) 0 0;font-size:13.5px}:host(.ef-tabs--underline) .ef-tabs__tab:hover:not(.is-active):not(.is-disabled){color:var(--text);background:var(--paper)}:host(.ef-tabs--underline) .ef-tabs__tab:focus-visible{background:var(--paper-alt);box-shadow:inset 0 0 0 2px var(--tenant-200)}:host(.ef-tabs--underline) .ef-tabs__tab.is-active{color:var(--text);border-bottom-color:var(--module, var(--ink-active))}:host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__count{background:color-mix(in srgb,var(--module, var(--ink-active)) 14%,var(--paper-alt));border-color:transparent;color:var(--module, var(--ink-active))}:host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__dot{background:var(--module, var(--tenant-500))}:host[data-module=sales]{--module: var(--m-sales)}:host[data-module=purchase]{--module: var(--m-purchase)}:host[data-module=stock]{--module: var(--m-stock)}:host[data-module=pos]{--module: var(--m-pos)}:host[data-module=marketing]{--module: var(--m-marketing)}:host[data-module=store]{--module: var(--m-store)}:host[data-module=finance]{--module: var(--m-finance)}:host[data-module=admin]{--module: var(--m-admin)}:host(.ef-tabs--overflow){position:relative;display:block}:host(.ef-tabs--overflow) .ef-tabs__list{display:flex;width:100%}:host(.ef-tabs--overflow):before,:host(.ef-tabs--overflow):after{content:\"\";position:absolute;top:0;bottom:0;width:36px;pointer-events:none;z-index:2}:host(.ef-tabs--overflow):before{inset-inline-start:0;background:linear-gradient(to right,var(--paper-alt),transparent)}:host(.ef-tabs--overflow):after{inset-inline-end:0;background:linear-gradient(to left,var(--paper-alt),transparent)}[data-theme=dark] :host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__count{background:color-mix(in srgb,var(--module, var(--ink-active)) 28%,transparent)}@media(pointer:coarse){:host(.ef-tabs--pill) .ef-tabs__tab,:host(.ef-tabs--underline) .ef-tabs__tab{min-height:var(--hit-touch)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfTabsComponent, decorators: [{
             type: Component,
@@ -9514,7 +9894,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         '[class.ef-tabs--underline]': "variant === 'underline'",
                         '[class.ef-tabs--overflow]': 'overflow',
                         '[attr.data-module]': 'module ?? null',
-                    }, template: "<div class=\"ef-tabs__list\" role=\"tablist\" [attr.aria-label]=\"ariaLabel\">\n  @for (item of items; track trackValue($index, item); let i = $index) {\n    <button\n      #tabEl\n      type=\"button\"\n      class=\"ef-tabs__tab\"\n      role=\"tab\"\n      [class.is-active]=\"item.value === value\"\n      [class.is-disabled]=\"!!item.disabled\"\n      [attr.aria-selected]=\"item.value === value\"\n      [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n      [disabled]=\"item.disabled\"\n      [tabindex]=\"item.value === value ? 0 : -1\"\n      (click)=\"select(item)\"\n      (keydown)=\"onKeydown($event, i)\"\n    >\n      @if (item.icon) {\n        <i class=\"ef-tabs__ico\" [class]=\"item.icon\" aria-hidden=\"true\"></i>\n      }\n      <span class=\"ef-tabs__label\">\n        @if (item.labelKey) {\n          {{ item.labelKey | translate }}\n        } @else {\n          {{ item.label }}\n        }\n      </span>\n      @if (!hideCounts && item.count !== undefined && item.count !== null) {\n        <span class=\"ef-tabs__count\">{{ item.count }}</span>\n      }\n      @if (item.dirty) {\n        <span class=\"ef-tabs__dot\" [attr.aria-label]=\"dirtyLabelKey | translate\"></span>\n      }\n    </button>\n  }\n</div>\n\n@if (hasPanels()) {\n  <div class=\"ef-tabs__panels\" role=\"tabpanel\">\n    @if (activePanel(); as tpl) {\n      <ng-container [ngTemplateOutlet]=\"tpl\"></ng-container>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0}.ef-tabs__list{position:relative;display:flex;align-items:stretch;gap:2px;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.ef-tabs__list>*{flex:0 0 auto}.ef-tabs__panels{display:block;padding-top:var(--s-5);min-width:0;animation:ef-tabs-panel-in var(--t-base, .26s) var(--ease-out, ease-out)}@keyframes ef-tabs-panel-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.ef-tabs__list::-webkit-scrollbar{display:none}.ef-tabs__tab{appearance:none;background:transparent;border:0;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.005em;color:var(--text-mute);cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:color var(--t-fast, .14s) var(--ease-out, ease-out),background-color var(--t-fast, .14s) var(--ease-out, ease-out),border-color var(--t-base, .26s) var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1))}.ef-tabs__tab:focus-visible{outline:0}.ef-tabs__tab.is-disabled,.ef-tabs__tab[disabled]{opacity:.4;cursor:not-allowed}.ef-tabs__ico{font-size:13px;opacity:.75;flex-shrink:0}.ef-tabs__tab.is-active .ef-tabs__ico{opacity:1}.ef-tabs__count{font-family:var(--font-mono);font-size:10.5px;font-weight:700;background:var(--paper);border:1px solid var(--rule);color:var(--text-mute);padding:1px 7px;border-radius:var(--r-pill);min-width:20px;text-align:center;line-height:1.5;font-variant-numeric:tabular-nums}.ef-tabs__dot{width:6px;height:6px;border-radius:50%;background:var(--tenant-500);flex-shrink:0}:host(.ef-tabs--pill) .ef-tabs__list{background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-pill);padding:4px;gap:2px}:host(.ef-tabs--pill) .ef-tabs__tab{min-height:var(--hit, 32px);padding:7px 14px;border-radius:var(--r-pill)}:host(.ef-tabs--pill) .ef-tabs__tab:hover:not(.is-active):not(.is-disabled){color:var(--text)}:host(.ef-tabs--pill) .ef-tabs__tab:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active{background:var(--ink-active, #0f1115);color:var(--paper)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active .ef-tabs__count{background:#ffffff2e;border-color:transparent;color:var(--paper)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active .ef-tabs__dot{background:var(--paper)}:host(.ef-tabs--underline) .ef-tabs__list{display:flex;border-bottom:1px solid var(--rule);padding:0;gap:2px}:host(.ef-tabs--underline) .ef-tabs__tab{min-height:42px;padding:11px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:var(--r-sm) var(--r-sm) 0 0;font-size:13.5px}:host(.ef-tabs--underline) .ef-tabs__tab:hover:not(.is-active):not(.is-disabled){color:var(--text);background:var(--paper)}:host(.ef-tabs--underline) .ef-tabs__tab:focus-visible{background:var(--paper-alt);box-shadow:inset 0 0 0 2px var(--tenant-200)}:host(.ef-tabs--underline) .ef-tabs__tab.is-active{color:var(--text);border-bottom-color:var(--module, var(--ink-active))}:host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__count{background:color-mix(in srgb,var(--module, var(--ink-active)) 14%,var(--paper-alt));border-color:transparent;color:var(--module, var(--ink-active))}:host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__dot{background:var(--module, var(--tenant-500))}:host[data-module=sales]{--module: var(--m-sales)}:host[data-module=purchase]{--module: var(--m-purchase)}:host[data-module=stock]{--module: var(--m-stock)}:host[data-module=pos]{--module: var(--m-pos)}:host[data-module=marketing]{--module: var(--m-marketing)}:host[data-module=store]{--module: var(--m-store)}:host[data-module=finance]{--module: var(--m-finance)}:host[data-module=admin]{--module: var(--m-admin)}:host(.ef-tabs--overflow){position:relative;display:block}:host(.ef-tabs--overflow) .ef-tabs__list{display:flex;width:100%}:host(.ef-tabs--overflow):before,:host(.ef-tabs--overflow):after{content:\"\";position:absolute;top:0;bottom:0;width:36px;pointer-events:none;z-index:2}:host(.ef-tabs--overflow):before{inset-inline-start:0;background:linear-gradient(to right,var(--paper-alt),transparent)}:host(.ef-tabs--overflow):after{inset-inline-end:0;background:linear-gradient(to left,var(--paper-alt),transparent)}[data-theme=dark] :host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__count{background:color-mix(in srgb,var(--module, var(--ink-active)) 28%,transparent)}\n"] }]
+                    }, template: "<div class=\"ef-tabs__list\" role=\"tablist\" [attr.aria-label]=\"ariaLabelKey ? (ariaLabelKey | translate) : ariaLabel\">\n  @for (item of items; track trackValue($index, item); let i = $index) {\n    <button\n      #tabEl\n      type=\"button\"\n      class=\"ef-tabs__tab\"\n      role=\"tab\"\n      [class.is-active]=\"item.value === value\"\n      [class.is-disabled]=\"!!item.disabled\"\n      [attr.aria-selected]=\"item.value === value\"\n      [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n      [disabled]=\"item.disabled\"\n      [tabindex]=\"item.value === value ? 0 : -1\"\n      (click)=\"select(item)\"\n      (keydown)=\"onKeydown($event, i)\"\n    >\n      @if (item.icon) {\n        <i class=\"ef-tabs__ico\" [class]=\"item.icon\" aria-hidden=\"true\"></i>\n      }\n      <span class=\"ef-tabs__label\">\n        @if (item.labelKey) {\n          {{ item.labelKey | translate }}\n        } @else {\n          {{ item.label }}\n        }\n      </span>\n      @if (!hideCounts && item.count !== undefined && item.count !== null) {\n        <span class=\"ef-tabs__count\">{{ item.count }}</span>\n      }\n      @if (item.dirty) {\n        <span class=\"ef-tabs__dot\" [attr.aria-label]=\"dirtyLabelKey | translate\"></span>\n      }\n    </button>\n  }\n</div>\n\n@if (hasPanels()) {\n  <div class=\"ef-tabs__panels\" role=\"tabpanel\">\n    @if (activePanel(); as tpl) {\n      <ng-container [ngTemplateOutlet]=\"tpl\"></ng-container>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0}.ef-tabs__list{position:relative;display:flex;align-items:stretch;gap:2px;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.ef-tabs__list>*{flex:0 0 auto}.ef-tabs__panels{display:block;padding-top:var(--s-5);min-width:0;animation:ef-tabs-panel-in var(--t-base, .26s) var(--ease-out, ease-out)}@keyframes ef-tabs-panel-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.ef-tabs__list::-webkit-scrollbar{display:none}.ef-tabs__tab{appearance:none;background:transparent;border:0;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.005em;color:var(--text-mute);cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:color var(--t-fast, .14s) var(--ease-out, ease-out),background-color var(--t-fast, .14s) var(--ease-out, ease-out),border-color var(--t-base, .26s) var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1))}.ef-tabs__tab:focus-visible{outline:0}.ef-tabs__tab.is-disabled,.ef-tabs__tab[disabled]{opacity:.4;cursor:not-allowed}.ef-tabs__ico{font-size:13px;opacity:.75;flex-shrink:0}.ef-tabs__tab.is-active .ef-tabs__ico{opacity:1}.ef-tabs__count{font-family:var(--font-mono);font-size:10.5px;font-weight:700;background:var(--paper);border:1px solid var(--rule);color:var(--text-mute);padding:1px 7px;border-radius:var(--r-pill);min-width:20px;text-align:center;line-height:1.5;font-variant-numeric:tabular-nums}.ef-tabs__dot{width:6px;height:6px;border-radius:50%;background:var(--tenant-500);flex-shrink:0}:host(.ef-tabs--pill) .ef-tabs__list{background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-pill);padding:4px;gap:2px}:host(.ef-tabs--pill) .ef-tabs__tab{min-height:var(--hit, 32px);padding:7px 14px;border-radius:var(--r-pill)}:host(.ef-tabs--pill) .ef-tabs__tab:hover:not(.is-active):not(.is-disabled){color:var(--text)}:host(.ef-tabs--pill) .ef-tabs__tab:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active{background:var(--ink-active, #0f1115);color:var(--paper)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active .ef-tabs__count{background:#ffffff2e;border-color:transparent;color:var(--paper)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active .ef-tabs__dot{background:var(--paper)}:host(.ef-tabs--underline) .ef-tabs__list{display:flex;border-bottom:1px solid var(--rule);padding:0;gap:2px}:host(.ef-tabs--underline) .ef-tabs__tab{min-height:42px;padding:11px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:var(--r-sm) var(--r-sm) 0 0;font-size:13.5px}:host(.ef-tabs--underline) .ef-tabs__tab:hover:not(.is-active):not(.is-disabled){color:var(--text);background:var(--paper)}:host(.ef-tabs--underline) .ef-tabs__tab:focus-visible{background:var(--paper-alt);box-shadow:inset 0 0 0 2px var(--tenant-200)}:host(.ef-tabs--underline) .ef-tabs__tab.is-active{color:var(--text);border-bottom-color:var(--module, var(--ink-active))}:host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__count{background:color-mix(in srgb,var(--module, var(--ink-active)) 14%,var(--paper-alt));border-color:transparent;color:var(--module, var(--ink-active))}:host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__dot{background:var(--module, var(--tenant-500))}:host[data-module=sales]{--module: var(--m-sales)}:host[data-module=purchase]{--module: var(--m-purchase)}:host[data-module=stock]{--module: var(--m-stock)}:host[data-module=pos]{--module: var(--m-pos)}:host[data-module=marketing]{--module: var(--m-marketing)}:host[data-module=store]{--module: var(--m-store)}:host[data-module=finance]{--module: var(--m-finance)}:host[data-module=admin]{--module: var(--m-admin)}:host(.ef-tabs--overflow){position:relative;display:block}:host(.ef-tabs--overflow) .ef-tabs__list{display:flex;width:100%}:host(.ef-tabs--overflow):before,:host(.ef-tabs--overflow):after{content:\"\";position:absolute;top:0;bottom:0;width:36px;pointer-events:none;z-index:2}:host(.ef-tabs--overflow):before{inset-inline-start:0;background:linear-gradient(to right,var(--paper-alt),transparent)}:host(.ef-tabs--overflow):after{inset-inline-end:0;background:linear-gradient(to left,var(--paper-alt),transparent)}[data-theme=dark] :host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__count{background:color-mix(in srgb,var(--module, var(--ink-active)) 28%,transparent)}@media(pointer:coarse){:host(.ef-tabs--pill) .ef-tabs__tab,:host(.ef-tabs--underline) .ef-tabs__tab{min-height:var(--hit-touch)}}\n"] }]
         }], propDecorators: { items: [{
                 type: Input,
                 args: [{ required: true }]
@@ -9532,6 +9912,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 args: [{ transform: booleanAttribute }]
             }], ariaLabel: [{
                 type: Input
+            }], ariaLabelKey: [{
+                type: Input
             }], dirtyLabelKey: [{
                 type: Input
             }], valueChange: [{
@@ -9815,8 +10197,13 @@ class EfPdfPreviewComponent {
     showOpenInNewTab = input(true, { ...(ngDevMode ? { debugName: "showOpenInNewTab" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Show the WhatsApp share button (Web Share API → wa.me fallback). */
     showWhatsappShare = input(false, { ...(ngDevMode ? { debugName: "showWhatsappShare" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /** Optional recipient phone for the wa.me fallback (digits / +). */
+    /** Optional recipient phone for the wa.me fallback, as typed: international
+     *  (`+`/`00`) or national with `defaultCallingCode`. */
     whatsappPhone = input('', ...(ngDevMode ? [{ debugName: "whatsappPhone" }] : /* istanbul ignore next */ []));
+    /** Calling code (`'212'` or `'+212'`) that turns a national
+     *  `whatsappPhone` (`0612345678`) into the international number wa.me
+     *  needs. Without it a national number opens the contact picker. */
+    defaultCallingCode = input('', ...(ngDevMode ? [{ debugName: "defaultCallingCode" }] : /* istanbul ignore next */ []));
     objectUrl = signal(null, ...(ngDevMode ? [{ debugName: "objectUrl" }] : /* istanbul ignore next */ []));
     currentUrl = null;
     safeUrl = computed(() => {
@@ -9926,7 +10313,10 @@ class EfPdfPreviewComponent {
         this.openWhatsappWeb();
     }
     openWhatsappWeb() {
-        const phone = (this.whatsappPhone() || '').replace(/[^0-9+]/g, '');
+        // wa.me takes the international number as digits only: a leading "+"
+        // or a national number lands on WhatsApp's error page, not the chat.
+        const e164 = PhoneUtils.toE164(this.whatsappPhone(), this.defaultCallingCode());
+        const phone = e164 ? e164.slice(1) : '';
         const msg = encodeURIComponent(this.fileName());
         const url = phone
             ? `https://wa.me/${phone}?text=${msg}`
@@ -9934,12 +10324,79 @@ class EfPdfPreviewComponent {
         window.open(url, '_blank');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfPdfPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfPdfPreviewComponent, isStandalone: true, selector: "ef-pdf-preview", inputs: { blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, showDownload: { classPropertyName: "showDownload", publicName: "showDownload", isSignal: true, isRequired: false, transformFunction: null }, showPrint: { classPropertyName: "showPrint", publicName: "showPrint", isSignal: true, isRequired: false, transformFunction: null }, showOpenInNewTab: { classPropertyName: "showOpenInNewTab", publicName: "showOpenInNewTab", isSignal: true, isRequired: false, transformFunction: null }, showWhatsappShare: { classPropertyName: "showWhatsappShare", publicName: "showWhatsappShare", isSignal: true, isRequired: false, transformFunction: null }, whatsappPhone: { classPropertyName: "whatsappPhone", publicName: "whatsappPhone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, ngImport: i0, template: "<ef-dialog\n  [(visible)]=\"visible\"\n  [headerKey]=\"titleKey()\"\n  [subtitle]=\"fileName()\"\n  icon=\"pi pi-file-pdf\"\n  [style]=\"{ width: '92vw', 'max-width': '1280px' }\"\n  styleClass=\"ef-pdf-preview-dialog\"\n  [actions]=\"actions()\"\n>\n  <div class=\"pdf-frame-wrap\">\n    @if (safeUrl()) {\n      <iframe class=\"pdf-frame\" [src]=\"safeUrl()\" [title]=\"fileName()\"></iframe>\n    } @else {\n      <div class=\"pdf-empty\">{{ 'pdf_preview.empty' | translate }}</div>\n    }\n  </div>\n</ef-dialog>\n", styles: [":host{display:contents}.pdf-frame-wrap{height:75vh;min-height:320px}.pdf-frame{width:100%;height:100%;border:0;border-radius:var(--r-md);background:#525659}.pdf-empty{display:grid;place-items:center;height:100%;color:var(--text-mute);font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfDialogComponent, selector: "ef-dialog", inputs: ["header", "headerKey", "subtitle", "subtitleKey", "visible", "modal", "closable", "draggable", "resizable", "dismissableMask", "closeOnEscape", "severity", "icon", "size", "style", "styleClass", "position", "appendTo", "variant", "actions", "defaultActions", "saveLabelKey", "cancelLabelKey", "saveLabel", "cancelLabel", "saveIcon", "cancelIcon", "saveDisabled", "saveStyleClass", "cancelStyleClass", "saveSeverity", "cancelSeverity"], outputs: ["visibleChange", "showEvent", "hideEvent", "saveAction", "cancelAction", "actionClick"] }, { 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: EfPdfPreviewComponent, isStandalone: true, selector: "ef-pdf-preview", inputs: { blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, showDownload: { classPropertyName: "showDownload", publicName: "showDownload", isSignal: true, isRequired: false, transformFunction: null }, showPrint: { classPropertyName: "showPrint", publicName: "showPrint", isSignal: true, isRequired: false, transformFunction: null }, showOpenInNewTab: { classPropertyName: "showOpenInNewTab", publicName: "showOpenInNewTab", isSignal: true, isRequired: false, transformFunction: null }, showWhatsappShare: { classPropertyName: "showWhatsappShare", publicName: "showWhatsappShare", isSignal: true, isRequired: false, transformFunction: null }, whatsappPhone: { classPropertyName: "whatsappPhone", publicName: "whatsappPhone", isSignal: true, isRequired: false, transformFunction: null }, defaultCallingCode: { classPropertyName: "defaultCallingCode", publicName: "defaultCallingCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, ngImport: i0, template: "<ef-dialog\n  [(visible)]=\"visible\"\n  [headerKey]=\"titleKey()\"\n  [subtitle]=\"fileName()\"\n  icon=\"pi pi-file-pdf\"\n  [style]=\"{ width: '92vw', 'max-width': '1280px' }\"\n  styleClass=\"ef-pdf-preview-dialog\"\n  [actions]=\"actions()\"\n>\n  <div class=\"pdf-frame-wrap\">\n    @if (safeUrl()) {\n      <iframe class=\"pdf-frame\" [src]=\"safeUrl()\" [title]=\"fileName()\"></iframe>\n    } @else {\n      <div class=\"pdf-empty\">{{ 'pdf_preview.empty' | translate }}</div>\n    }\n  </div>\n</ef-dialog>\n", styles: [":host{display:contents}.pdf-frame-wrap{height:75vh;min-height:320px}.pdf-frame{width:100%;height:100%;border:0;border-radius:var(--r-md);background:#525659}.pdf-empty{display:grid;place-items:center;height:100%;color:var(--text-mute);font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfDialogComponent, selector: "ef-dialog", inputs: ["header", "headerKey", "subtitle", "subtitleKey", "visible", "modal", "closable", "draggable", "resizable", "dismissableMask", "closeOnEscape", "severity", "icon", "size", "style", "styleClass", "position", "appendTo", "variant", "actions", "defaultActions", "saveLabelKey", "cancelLabelKey", "saveLabel", "cancelLabel", "saveIcon", "cancelIcon", "saveDisabled", "saveStyleClass", "cancelStyleClass", "saveSeverity", "cancelSeverity"], outputs: ["visibleChange", "showEvent", "hideEvent", "saveAction", "cancelAction", "actionClick"] }, { 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: EfPdfPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-pdf-preview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TranslateModule, EfDialogComponent], template: "<ef-dialog\n  [(visible)]=\"visible\"\n  [headerKey]=\"titleKey()\"\n  [subtitle]=\"fileName()\"\n  icon=\"pi pi-file-pdf\"\n  [style]=\"{ width: '92vw', 'max-width': '1280px' }\"\n  styleClass=\"ef-pdf-preview-dialog\"\n  [actions]=\"actions()\"\n>\n  <div class=\"pdf-frame-wrap\">\n    @if (safeUrl()) {\n      <iframe class=\"pdf-frame\" [src]=\"safeUrl()\" [title]=\"fileName()\"></iframe>\n    } @else {\n      <div class=\"pdf-empty\">{{ 'pdf_preview.empty' | translate }}</div>\n    }\n  </div>\n</ef-dialog>\n", styles: [":host{display:contents}.pdf-frame-wrap{height:75vh;min-height:320px}.pdf-frame{width:100%;height:100%;border:0;border-radius:var(--r-md);background:#525659}.pdf-empty{display:grid;place-items:center;height:100%;color:var(--text-mute);font-size:13px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { blob: [{ type: i0.Input, args: [{ isSignal: true, alias: "blob", required: false }] }], fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], showDownload: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDownload", required: false }] }], showPrint: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPrint", required: false }] }], showOpenInNewTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOpenInNewTab", required: false }] }], showWhatsappShare: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWhatsappShare", required: false }] }], whatsappPhone: [{ type: i0.Input, args: [{ isSignal: true, alias: "whatsappPhone", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { blob: [{ type: i0.Input, args: [{ isSignal: true, alias: "blob", required: false }] }], fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], showDownload: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDownload", required: false }] }], showPrint: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPrint", required: false }] }], showOpenInNewTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOpenInNewTab", required: false }] }], showWhatsappShare: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWhatsappShare", required: false }] }], whatsappPhone: [{ type: i0.Input, args: [{ isSignal: true, alias: "whatsappPhone", required: false }] }], defaultCallingCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCallingCode", required: false }] }] } });
+
+/**
+ * Shows a complete HTML document (an email template, rendered with sample
+ * data) inside a frame that cannot act.
+ *
+ * The frame's `sandbox` attribute is written in the template and empty, and
+ * no input reaches it: the document runs no script, has an opaque origin
+ * (no cookies, no storage, no access to the parent), cannot submit a form,
+ * open a popup or navigate the top window. The document comes from
+ * `srcdoc`, so there is no URL to load and no new origin for the CSP; it
+ * inherits the host page's policy, whose `style-src 'unsafe-inline'` lets
+ * the template's own styles apply.
+ *
+ * The frame always has an accessible name (WCAG 4.1.2): `titleKey`, or the
+ * shared `ef_html_preview_title` key when none is given. Consuming apps define it:
+ * fr "Aperçu", ar "معاينة", en "Preview".
+ *
+ * `width: 100%` and `min-width: 0` keep a 600px email table scrolling inside
+ * the frame on a phone instead of widening the page.
+ *
+ * ```html
+ * <ef-html-preview [html]="previewHtml()" titleKey="email_templates_preview_title" [height]="560" />
+ * ```
+ */
+/** The title key the frame falls back to; apps add it to fr.json, ar.json and en.json. */
+const EF_HTML_PREVIEW_DEFAULT_TITLE_KEY = 'ef_html_preview_title';
+class EfHtmlPreviewComponent {
+    /** The full document to show. Sanitized by the server before it gets here. */
+    html = input('', ...(ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []));
+    /** i18n key of the frame's accessible title; `ef_html_preview_title` when empty. */
+    titleKey = input('', ...(ngDevMode ? [{ debugName: "titleKey" }] : /* istanbul ignore next */ []));
+    /** Frame height in pixels. */
+    height = input(480, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    sanitizer = inject(DomSanitizer);
+    effectiveTitleKey = computed(() => this.titleKey() || EF_HTML_PREVIEW_DEFAULT_TITLE_KEY, ...(ngDevMode ? [{ debugName: "effectiveTitleKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Angular's sanitizer strips every `style` attribute and `<style>` block
+     * from a bound `srcdoc`, which would preview an email without its
+     * layout, so the HTML is trusted explicitly. The guarantee is the frame's
+     * empty sandbox: nothing in the document can run, submit, open a window
+     * or reach this page, even for raw author HTML of an unsaved edit. The
+     * server's sanitization of stored templates is a second layer, not the
+     * reason this is safe. Never reuse this bypass for markup rendered
+     * outside such a frame.
+     */
+    trustedHtml = computed(() => this.sanitizer.bypassSecurityTrustHtml(this.html() ?? ''), ...(ngDevMode ? [{ debugName: "trustedHtml" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfHtmlPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: EfHtmlPreviewComponent, isStandalone: true, selector: "ef-html-preview", inputs: { html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<iframe
+        class="ef-html-preview__frame"
+        sandbox=""
+        referrerpolicy="no-referrer"
+        [srcdoc]="trustedHtml()"
+        [attr.title]="effectiveTitleKey() | translate"
+        [style.height.px]="height()"
+    ></iframe>`, isInline: true, styles: [":host{display:block;min-width:0;max-width:100%}.ef-html-preview__frame{display:block;width:100%;max-width:100%;min-width:0;border:1px solid var(--rule, #e5e5e5);border-radius:var(--r-2, 8px);background:#fff}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfHtmlPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ef-html-preview', standalone: true, imports: [TranslateModule], template: `<iframe
+        class="ef-html-preview__frame"
+        sandbox=""
+        referrerpolicy="no-referrer"
+        [srcdoc]="trustedHtml()"
+        [attr.title]="effectiveTitleKey() | translate"
+        [style.height.px]="height()"
+    ></iframe>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;max-width:100%}.ef-html-preview__frame{display:block;width:100%;max-width:100%;min-width:0;border:1px solid var(--rule, #e5e5e5);border-radius:var(--r-2, 8px);background:#fff}\n"] }]
+        }], propDecorators: { html: [{ type: i0.Input, args: [{ isSignal: true, alias: "html", required: false }] }], titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
 
 /**
  * Comptoir toast region — V2 successor to PrimeNG `<p-toast>`.
@@ -10158,13 +10615,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * ```
  *
  * Phone overflow: on the mobile tier, when the visible actions (custom and
- * standard, Save included) outnumber `[overflowAfter]`, Save stays in view
- * and every other action moves into a kebab menu (`ef-row-actions`, so it is
+ * standard, Save included) outnumber `[overflowAfter]`, Save and any custom
+ * action flagged `keepInView` stay in view and every other action moves
+ * into a kebab menu (`ef-row-actions`, so it is
  * a `role="menu"` with Escape, outside-click and RTL placement). The split
  * happens after permission and `requiresWrite` filtering, so a hidden action
  * is hidden in the menu too. The projected `[actions]` slot is not moved.
  * Buttons are 48px on a coarse pointer (see `.detail-toolbar` in patterns).
  *
+ * Tablet and desktop reflow: the identity has a basis
+ * (`--detail-toolbar-identity-min`, 22rem), so when it and the actions
+ * cannot share a row the actions wrap below it, rather than squeezing the
+ * identity until its notices are cut.
+ *
  * Custom actions can declare `permission` and `visible` like
  * `EfRowAction`. With `[context]` bound, the toolbar filters them
  * against `ScreenContext.isGranted()` automatically.
@@ -10241,9 +10704,11 @@ class EfDetailToolbarComponent {
             [this.canPrint(), this.canDuplicate(), this.canDelete(), this.canSave()].filter(Boolean).length;
         return total > this.overflowAfter();
     }, ...(ngDevMode ? [{ debugName: "overflowing" }] : /* istanbul ignore next */ []));
-    /** Everything but Save, as menu items, in toolbar order. */
+    /** Visible custom actions that stay inline on a phone even when the rest overflow. */
+    keptInView = computed(() => this.visibleCustomActions().filter((a) => a.keepInView), ...(ngDevMode ? [{ debugName: "keptInView" }] : /* istanbul ignore next */ []));
+    /** Everything but Save and the keepInView actions, as menu items, in toolbar order. */
     overflowItems = computed(() => {
-        const items = this.visibleCustomActions().map((a, i) => ({
+        const items = this.visibleCustomActions().filter((a) => !a.keepInView).map((a, i) => ({
             id: `custom-${a.id ?? i}`,
             labelKey: a.labelKey,
             label: a.label,
@@ -10266,6 +10731,34 @@ class EfDetailToolbarComponent {
     }, ...(ngDevMode ? [{ debugName: "overflowItems" }] : /* istanbul ignore next */ []));
     /** Whether the `|` separator should render — both groups present. */
     showSeparator = computed(() => this.hasCustomActions() && this.hasStandardActions(), ...(ngDevMode ? [{ debugName: "showSeparator" }] : /* istanbul ignore next */ []));
+    /* ── Wrap of the standard group ─────────────────────────────── */
+    host = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    /** The standard group (separator, Print … Save) starts a row of its own,
+     *  below the custom actions: its leading separator would separate nothing. */
+    standardWrapped = signal(false, ...(ngDevMode ? [{ debugName: "standardWrapped" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const right = this.host.nativeElement.querySelector('.right');
+            if (!right)
+                return;
+            const observer = new ResizeObserver(() => this.measureWrap());
+            observer.observe(right);
+            this.destroyRef.onDestroy(() => observer.disconnect());
+        });
+    }
+    /** Compares the standard group's row with the first item of the right
+     *  group. Public for specs: jsdom lays nothing out. */
+    measureWrap() {
+        const right = this.host.nativeElement.querySelector('.right');
+        const std = right?.querySelector(':scope > .std');
+        const first = right?.firstElementChild;
+        const wrapped = !!std && !!first && first !== std && std.getBoundingClientRect().top > first.getBoundingClientRect().top + 1;
+        if (wrapped !== this.standardWrapped())
+            this.standardWrapped.set(wrapped);
+    }
     /* ── Click bridge ───────────────────────────────────────────── */
     onCustomClick(action) {
         if (action.disabled)
@@ -10305,12 +10798,12 @@ class EfDetailToolbarComponent {
     /** Stable trackBy across renders. */
     trackByAction = (i, a) => a.id ?? a.labelKey ?? a.label ?? i;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDetailToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfDetailToolbarComponent, isStandalone: true, selector: "ef-detail-toolbar", inputs: { customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, showPrintAction: { classPropertyName: "showPrintAction", publicName: "showPrintAction", 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 }, showSaveAction: { classPropertyName: "showSaveAction", publicName: "showSaveAction", isSignal: true, isRequired: false, transformFunction: null }, saving: { classPropertyName: "saving", publicName: "saving", isSignal: true, isRequired: false, transformFunction: null }, saveLabelKey: { classPropertyName: "saveLabelKey", publicName: "saveLabelKey", isSignal: true, isRequired: false, transformFunction: null }, overflowAfter: { classPropertyName: "overflowAfter", publicName: "overflowAfter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customAction: "customAction", print: "print", duplicate: "duplicate", delete: "delete", save: "save" }, host: { classAttribute: "detail-toolbar" }, ngImport: i0, template: "<div class=\"left\">\n    <ng-content></ng-content>\n</div>\n\n<div class=\"right\">\n    @if (overflowing()) {\n        <!-- Phone, too many actions: everything but Save sits in a menu. -->\n        <ef-row-actions\n            class=\"overflow\"\n            [items]=\"overflowItems()\"\n            triggerIcon=\"pi pi-ellipsis-v\"\n            triggerAriaKey=\"common_actions\"\n        />\n    }\n\n    <!-- Custom screen actions (before the standard group). -->\n    @for (action of (overflowing() ? [] : visibleCustomActions()); track trackByAction($index, action)) {\n        <ef-button\n            variant=\"comptoir\"\n            size=\"small\"\n            [severity]=\"action.severity ?? 'ghost'\"\n            [icon]=\"action.icon\"\n            [label]=\"action.label\"\n            [labelKey]=\"action.labelKey\"\n            [disabled]=\"!!action.disabled\"\n            (clickEvent)=\"onCustomClick(action)\"\n        />\n    }\n\n    <!-- Full-template escape hatch \u2014 anything projected here renders\n         after the customActions array, before the standard group. -->\n    <ng-content select=\"[actions]\"></ng-content>\n\n    <!-- Separator between custom and standard groups. -->\n    @if (showSeparator() && !overflowing()) {\n        <span class=\"sep\" aria-hidden=\"true\">|</span>\n    }\n\n    <!-- Standard actions: Print \u2192 Duplicate \u2192 Delete \u2192 Save. -->\n    @if (canPrint() && !overflowing()) {\n        <ef-button\n            variant=\"comptoir\"\n            severity=\"ghost\"\n            size=\"small\"\n            icon=\"pi pi-print\"\n            labelKey=\"common_print\"\n            (clickEvent)=\"print.emit()\"\n        />\n    }\n\n    @if (canDuplicate() && !overflowing()) {\n        <ef-button\n            variant=\"comptoir\"\n            severity=\"ghost\"\n            size=\"small\"\n            icon=\"pi pi-clone\"\n            labelKey=\"common_duplicate\"\n            (clickEvent)=\"duplicate.emit()\"\n        />\n    }\n\n    @if (canDelete() && !overflowing()) {\n        <ef-button\n            variant=\"comptoir\"\n            severity=\"danger\"\n            size=\"small\"\n            icon=\"pi pi-trash\"\n            labelKey=\"common_delete\"\n            (clickEvent)=\"delete.emit()\"\n        />\n    }\n\n    @if (canSave()) {\n        <ef-button\n            variant=\"comptoir\"\n            severity=\"tenant\"\n            size=\"small\"\n            icon=\"pi pi-save\"\n            [labelKey]=\"saveLabelKey()\"\n            [disabled]=\"saving()\"\n            [loading]=\"saving()\"\n            (clickEvent)=\"save.emit()\"\n        />\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "ariaLabelKey", "variant", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition", "autofocus"], outputs: ["clickEvent"] }, { kind: "component", type: EfRowActionsComponent, selector: "ef-row-actions", inputs: ["items", "context", "triggerIcon", "triggerAriaKey", "disabled", "menuLeft"], outputs: ["opened", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfDetailToolbarComponent, isStandalone: true, selector: "ef-detail-toolbar", inputs: { customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, showPrintAction: { classPropertyName: "showPrintAction", publicName: "showPrintAction", 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 }, showSaveAction: { classPropertyName: "showSaveAction", publicName: "showSaveAction", isSignal: true, isRequired: false, transformFunction: null }, saving: { classPropertyName: "saving", publicName: "saving", isSignal: true, isRequired: false, transformFunction: null }, saveLabelKey: { classPropertyName: "saveLabelKey", publicName: "saveLabelKey", isSignal: true, isRequired: false, transformFunction: null }, overflowAfter: { classPropertyName: "overflowAfter", publicName: "overflowAfter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { customAction: "customAction", print: "print", duplicate: "duplicate", delete: "delete", save: "save" }, host: { classAttribute: "detail-toolbar" }, ngImport: i0, template: "<div class=\"left\">\n    <ng-content></ng-content>\n</div>\n\n<div class=\"right\">\n    @if (overflowing()) {\n        <!-- Phone, too many actions: everything but Save and the keepInView actions sits in a menu. -->\n        <ef-row-actions\n            class=\"overflow\"\n            [items]=\"overflowItems()\"\n            triggerIcon=\"pi pi-ellipsis-v\"\n            triggerAriaKey=\"common_actions\"\n        />\n    }\n\n    <!-- Custom screen actions (before the standard group). Each is named by\n         its label key, so it keeps a name when a phone shows only its icon;\n         a keepInView action keeps its visible label there too. -->\n    @for (action of (overflowing() ? keptInView() : visibleCustomActions()); track trackByAction($index, action)) {\n        <ef-button\n            variant=\"comptoir\"\n            size=\"small\"\n            [severity]=\"action.severity ?? 'ghost'\"\n            [icon]=\"action.icon\"\n            [label]=\"action.label\"\n            [labelKey]=\"action.labelKey\"\n            [ariaLabelKey]=\"action.labelKey || action.label\"\n            [styleClass]=\"action.keepInView ? 'btn--keep-label' : undefined\"\n            [disabled]=\"!!action.disabled\"\n            (clickEvent)=\"onCustomClick(action)\"\n        />\n    }\n\n    <!-- Full-template escape hatch \u2014 anything projected here renders\n         after the customActions array, before the standard group. -->\n    <ng-content select=\"[actions]\"></ng-content>\n\n    <!-- Standard actions: Print \u2192 Duplicate \u2192 Delete \u2192 Save, in one group\n         that never wraps inside itself, with the separator at its head. When\n         the group drops to a row of its own the separator turns invisible but\n         keeps its width, so the wrap state cannot flip back and forth. -->\n    @if (hasStandardActions()) {\n        <span class=\"std\">\n            @if (showSeparator() && !overflowing()) {\n                <span class=\"sep\" [class.is-hidden]=\"standardWrapped()\" aria-hidden=\"true\">|</span>\n            }\n\n            @if (canPrint() && !overflowing()) {\n                <ef-button\n                    variant=\"comptoir\"\n                    severity=\"ghost\"\n                    size=\"small\"\n                    icon=\"pi pi-print\"\n                    labelKey=\"common_print\"\n                    ariaLabelKey=\"common_print\"\n                    (clickEvent)=\"print.emit()\"\n                />\n            }\n\n            @if (canDuplicate() && !overflowing()) {\n                <ef-button\n                    variant=\"comptoir\"\n                    severity=\"ghost\"\n                    size=\"small\"\n                    icon=\"pi pi-clone\"\n                    labelKey=\"common_duplicate\"\n                    ariaLabelKey=\"common_duplicate\"\n                    (clickEvent)=\"duplicate.emit()\"\n                />\n            }\n\n            @if (canDelete() && !overflowing()) {\n                <ef-button\n                    variant=\"comptoir\"\n                    severity=\"danger\"\n                    size=\"small\"\n                    icon=\"pi pi-trash\"\n                    labelKey=\"common_delete\"\n                    ariaLabelKey=\"common_delete\"\n                    (clickEvent)=\"delete.emit()\"\n                />\n            }\n\n            @if (canSave()) {\n                <ef-button\n                    variant=\"comptoir\"\n                    severity=\"tenant\"\n                    size=\"small\"\n                    icon=\"pi pi-save\"\n                    [labelKey]=\"saveLabelKey()\"\n                    [ariaLabelKey]=\"saveLabelKey()\"\n                    [disabled]=\"saving()\"\n                    [loading]=\"saving()\"\n                    (clickEvent)=\"save.emit()\"\n                />\n            }\n        </span>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "ariaLabelKey", "variant", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition", "autofocus"], outputs: ["clickEvent"] }, { kind: "component", type: EfRowActionsComponent, selector: "ef-row-actions", inputs: ["items", "context", "triggerIcon", "triggerAriaKey", "disabled", "menuLeft"], outputs: ["opened", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDetailToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-detail-toolbar', standalone: true, imports: [CommonModule, TranslateModule, EfButtonComponent, EfRowActionsComponent], host: { class: 'detail-toolbar' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"left\">\n    <ng-content></ng-content>\n</div>\n\n<div class=\"right\">\n    @if (overflowing()) {\n        <!-- Phone, too many actions: everything but Save sits in a menu. -->\n        <ef-row-actions\n            class=\"overflow\"\n            [items]=\"overflowItems()\"\n            triggerIcon=\"pi pi-ellipsis-v\"\n            triggerAriaKey=\"common_actions\"\n        />\n    }\n\n    <!-- Custom screen actions (before the standard group). -->\n    @for (action of (overflowing() ? [] : visibleCustomActions()); track trackByAction($index, action)) {\n        <ef-button\n            variant=\"comptoir\"\n            size=\"small\"\n            [severity]=\"action.severity ?? 'ghost'\"\n            [icon]=\"action.icon\"\n            [label]=\"action.label\"\n            [labelKey]=\"action.labelKey\"\n            [disabled]=\"!!action.disabled\"\n            (clickEvent)=\"onCustomClick(action)\"\n        />\n    }\n\n    <!-- Full-template escape hatch \u2014 anything projected here renders\n         after the customActions array, before the standard group. -->\n    <ng-content select=\"[actions]\"></ng-content>\n\n    <!-- Separator between custom and standard groups. -->\n    @if (showSeparator() && !overflowing()) {\n        <span class=\"sep\" aria-hidden=\"true\">|</span>\n    }\n\n    <!-- Standard actions: Print \u2192 Duplicate \u2192 Delete \u2192 Save. -->\n    @if (canPrint() && !overflowing()) {\n        <ef-button\n            variant=\"comptoir\"\n            severity=\"ghost\"\n            size=\"small\"\n            icon=\"pi pi-print\"\n            labelKey=\"common_print\"\n            (clickEvent)=\"print.emit()\"\n        />\n    }\n\n    @if (canDuplicate() && !overflowing()) {\n        <ef-button\n            variant=\"comptoir\"\n            severity=\"ghost\"\n            size=\"small\"\n            icon=\"pi pi-clone\"\n            labelKey=\"common_duplicate\"\n            (clickEvent)=\"duplicate.emit()\"\n        />\n    }\n\n    @if (canDelete() && !overflowing()) {\n        <ef-button\n            variant=\"comptoir\"\n            severity=\"danger\"\n            size=\"small\"\n            icon=\"pi pi-trash\"\n            labelKey=\"common_delete\"\n            (clickEvent)=\"delete.emit()\"\n        />\n    }\n\n    @if (canSave()) {\n        <ef-button\n            variant=\"comptoir\"\n            severity=\"tenant\"\n            size=\"small\"\n            icon=\"pi pi-save\"\n            [labelKey]=\"saveLabelKey()\"\n            [disabled]=\"saving()\"\n            [loading]=\"saving()\"\n            (clickEvent)=\"save.emit()\"\n        />\n    }\n</div>\n" }]
-        }], propDecorators: { customActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "customActions", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], showPrintAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPrintAction", required: false }] }], showDuplicateAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDuplicateAction", required: false }] }], showDeleteAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDeleteAction", required: false }] }], showSaveAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSaveAction", required: false }] }], saving: [{ type: i0.Input, args: [{ isSignal: true, alias: "saving", required: false }] }], saveLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveLabelKey", required: false }] }], overflowAfter: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowAfter", required: false }] }], customAction: [{ type: i0.Output, args: ["customAction"] }], print: [{ type: i0.Output, args: ["print"] }], duplicate: [{ type: i0.Output, args: ["duplicate"] }], delete: [{ type: i0.Output, args: ["delete"] }], save: [{ type: i0.Output, args: ["save"] }] } });
+            args: [{ selector: 'ef-detail-toolbar', standalone: true, imports: [CommonModule, TranslateModule, EfButtonComponent, EfRowActionsComponent], host: { class: 'detail-toolbar' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"left\">\n    <ng-content></ng-content>\n</div>\n\n<div class=\"right\">\n    @if (overflowing()) {\n        <!-- Phone, too many actions: everything but Save and the keepInView actions sits in a menu. -->\n        <ef-row-actions\n            class=\"overflow\"\n            [items]=\"overflowItems()\"\n            triggerIcon=\"pi pi-ellipsis-v\"\n            triggerAriaKey=\"common_actions\"\n        />\n    }\n\n    <!-- Custom screen actions (before the standard group). Each is named by\n         its label key, so it keeps a name when a phone shows only its icon;\n         a keepInView action keeps its visible label there too. -->\n    @for (action of (overflowing() ? keptInView() : visibleCustomActions()); track trackByAction($index, action)) {\n        <ef-button\n            variant=\"comptoir\"\n            size=\"small\"\n            [severity]=\"action.severity ?? 'ghost'\"\n            [icon]=\"action.icon\"\n            [label]=\"action.label\"\n            [labelKey]=\"action.labelKey\"\n            [ariaLabelKey]=\"action.labelKey || action.label\"\n            [styleClass]=\"action.keepInView ? 'btn--keep-label' : undefined\"\n            [disabled]=\"!!action.disabled\"\n            (clickEvent)=\"onCustomClick(action)\"\n        />\n    }\n\n    <!-- Full-template escape hatch \u2014 anything projected here renders\n         after the customActions array, before the standard group. -->\n    <ng-content select=\"[actions]\"></ng-content>\n\n    <!-- Standard actions: Print \u2192 Duplicate \u2192 Delete \u2192 Save, in one group\n         that never wraps inside itself, with the separator at its head. When\n         the group drops to a row of its own the separator turns invisible but\n         keeps its width, so the wrap state cannot flip back and forth. -->\n    @if (hasStandardActions()) {\n        <span class=\"std\">\n            @if (showSeparator() && !overflowing()) {\n                <span class=\"sep\" [class.is-hidden]=\"standardWrapped()\" aria-hidden=\"true\">|</span>\n            }\n\n            @if (canPrint() && !overflowing()) {\n                <ef-button\n                    variant=\"comptoir\"\n                    severity=\"ghost\"\n                    size=\"small\"\n                    icon=\"pi pi-print\"\n                    labelKey=\"common_print\"\n                    ariaLabelKey=\"common_print\"\n                    (clickEvent)=\"print.emit()\"\n                />\n            }\n\n            @if (canDuplicate() && !overflowing()) {\n                <ef-button\n                    variant=\"comptoir\"\n                    severity=\"ghost\"\n                    size=\"small\"\n                    icon=\"pi pi-clone\"\n                    labelKey=\"common_duplicate\"\n                    ariaLabelKey=\"common_duplicate\"\n                    (clickEvent)=\"duplicate.emit()\"\n                />\n            }\n\n            @if (canDelete() && !overflowing()) {\n                <ef-button\n                    variant=\"comptoir\"\n                    severity=\"danger\"\n                    size=\"small\"\n                    icon=\"pi pi-trash\"\n                    labelKey=\"common_delete\"\n                    ariaLabelKey=\"common_delete\"\n                    (clickEvent)=\"delete.emit()\"\n                />\n            }\n\n            @if (canSave()) {\n                <ef-button\n                    variant=\"comptoir\"\n                    severity=\"tenant\"\n                    size=\"small\"\n                    icon=\"pi pi-save\"\n                    [labelKey]=\"saveLabelKey()\"\n                    [ariaLabelKey]=\"saveLabelKey()\"\n                    [disabled]=\"saving()\"\n                    [loading]=\"saving()\"\n                    (clickEvent)=\"save.emit()\"\n                />\n            }\n        </span>\n    }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { customActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "customActions", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], showPrintAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPrintAction", required: false }] }], showDuplicateAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDuplicateAction", required: false }] }], showDeleteAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDeleteAction", required: false }] }], showSaveAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSaveAction", required: false }] }], saving: [{ type: i0.Input, args: [{ isSignal: true, alias: "saving", required: false }] }], saveLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveLabelKey", required: false }] }], overflowAfter: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflowAfter", required: false }] }], customAction: [{ type: i0.Output, args: ["customAction"] }], print: [{ type: i0.Output, args: ["print"] }], duplicate: [{ type: i0.Output, args: ["duplicate"] }], delete: [{ type: i0.Output, args: ["delete"] }], save: [{ type: i0.Output, args: ["save"] }] } });
 
 /**
  * Page-level toolbar for list / search screens. Mirrors the
@@ -10947,7 +11440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.rank{list-style:none;margin:0;padding:0;display:grid;gap:10px}.rank-row{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center}.rank-idx{font-size:12px;font-weight:700;color:var(--ink-soft, #64748b);text-align:center}.rank-main{display:grid;gap:3px;min-width:0}.rank-label{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-secondary{font-size:11px;color:var(--ink-soft, #64748b)}.rank-bar{height:4px;border-radius:999px;background:var(--paper-alt, #f1f5f9);overflow:hidden}.rank-bar i{display:block;height:100%;border-radius:inherit;background:var(--tenant-500, #0d9488)}.rank-value{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}\n"] }]
         }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
 
-let nextId = 0;
+let nextId$1 = 0;
 /** Cuts at a code point count (never inside a surrogate pair) and adds an ellipsis. */
 function clip(text, max) {
     const value = (text ?? '').trim();
@@ -10988,7 +11481,7 @@ class EfSeoPreviewComponent {
     descriptionMaxLength = input(160, ...(ngDevMode ? [{ debugName: "descriptionMaxLength" }] : /* istanbul ignore next */ []));
     /** Language of the previewed text (`fr`, `ar`, `en`), for screen readers and hyphenation. */
     contentLang = input(null, ...(ngDevMode ? [{ debugName: "contentLang" }] : /* istanbul ignore next */ []));
-    labelId = `ef-seo-preview-label-${++nextId}`;
+    labelId = `ef-seo-preview-label-${++nextId$1}`;
     shownTitle = computed(() => clip(this.pageTitle(), this.titleMaxLength()), ...(ngDevMode ? [{ debugName: "shownTitle" }] : /* istanbul ignore next */ []));
     shownUrl = computed(() => (this.url() ?? '').trim(), ...(ngDevMode ? [{ debugName: "shownUrl" }] : /* istanbul ignore next */ []));
     shownDescription = computed(() => clip(this.description(), this.descriptionMaxLength()), ...(ngDevMode ? [{ debugName: "shownDescription" }] : /* istanbul ignore next */ []));
@@ -11004,6 +11497,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                     }, template: "<p class=\"ef-seo-preview__label\" data-role=\"preview-label\" [id]=\"labelId\">{{ labelKey() | translate }}</p>\n<div class=\"ef-seo-preview__box\" data-role=\"preview-box\" [attr.lang]=\"contentLang()\">\n    <p class=\"ef-seo-preview__url\" data-role=\"preview-url\" dir=\"ltr\">{{ shownUrl() }}</p>\n    <p class=\"ef-seo-preview__title\" data-role=\"preview-title\" dir=\"auto\">{{ shownTitle() }}</p>\n    <p class=\"ef-seo-preview__description\" data-role=\"preview-description\" dir=\"auto\">{{ shownDescription() }}</p>\n</div>\n", styles: [":host{display:grid;gap:var(--s-2);min-width:0}.ef-seo-preview__label{margin:0;font-size:12px;color:var(--text-mute)}.ef-seo-preview__box{display:grid;gap:2px;min-width:0;padding:var(--s-3);border:1px solid var(--rule-soft);border-radius:var(--r-md, 8px);background:#fff;color:#4d5156}.ef-seo-preview__box p{margin:0;min-width:0;overflow-wrap:anywhere}.ef-seo-preview__url{color:#006621;font-family:var(--font-mono, monospace);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}.ef-seo-preview__title{color:#1a0dab;font-size:16px;font-weight:500;letter-spacing:-.005em;line-height:1.3}.ef-seo-preview__description{font-size:13px;line-height:1.4;margin-top:4px}\n"] }]
         }], propDecorators: { pageTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageTitle", required: false }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], titleMaxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleMaxLength", required: false }] }], descriptionMaxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionMaxLength", required: false }] }], contentLang: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentLang", required: false }] }] } });
 
+/**
+ * The value a text field takes when `text` is inserted where the user left
+ * the caret, and where the caret goes next.
+ *
+ * `selectionStart` is only the user's choice once the field has had focus:
+ * before that the browser reports wherever writing `value` left it. A field
+ * never entered, or one whose type has no selection (`email`, `number`),
+ * gets the text appended. A field that lost focus keeps its last selection,
+ * which is what a toolbar button beside it relies on.
+ */
+function insertAtSelection(field, text, wasFocused) {
+    const current = field.value;
+    let start = null;
+    let end = null;
+    try {
+        start = field.selectionStart;
+        end = field.selectionEnd;
+    }
+    catch {
+        // Some input types throw on selection access instead of returning null.
+    }
+    if (!wasFocused || start === null || end === null) {
+        return { value: current + text, caret: current.length + text.length };
+    }
+    const from = Math.min(start, end, current.length);
+    const to = Math.min(Math.max(start, end), current.length);
+    return { value: current.slice(0, from) + text + current.slice(to), caret: from + text.length };
+}
+/** Moves the caret, ignoring input types that have no selection. */
+function placeCaret(field, caret) {
+    field.focus();
+    try {
+        field.setSelectionRange(caret, caret);
+    }
+    catch {
+        // `email` / `number` inputs: no selection API, the caret stays at the end.
+    }
+}
+
 class EfInputTextComponent extends AbstractEfFormControl {
     /* Identity / label / placeholder / aria / required / readonly /
        disabled all inherited from AbstractEfFormControl. */
@@ -11013,6 +11545,11 @@ class EfInputTextComponent extends AbstractEfFormControl {
     fluid = true;
     inline = false;
     autocomplete;
+    /** Direction of the typed value, applied to the native input. Use
+     *  `'ltr'` for IBAN / RIB / phone values on an Arabic screen, `'auto'` to
+     *  follow the value's first strong character. The label and messages keep
+     *  the page direction. Null or absent leaves the input unchanged. */
+    dir = null;
     /** Clearable (showClear / canClear) is inherited from AbstractEfFormControl;
      *  we only supply the value predicate + the reset. */
     get hasValue() {
@@ -11046,6 +11583,7 @@ class EfInputTextComponent extends AbstractEfFormControl {
     onChange = () => { };
     onTouched = () => { };
     ngControl = inject(NgControl, { self: true, optional: true });
+    hostRef = inject(ElementRef);
     constructor() {
         super();
         if (this.ngControl) {
@@ -11082,15 +11620,52 @@ class EfInputTextComponent extends AbstractEfFormControl {
         this.onChange(value);
         this.valueChangeEvent.emit(value);
     }
+    /** Set once the field itself has had focus; see {@link insertAtSelection}. */
+    wasFocused = false;
+    markFocused(event) {
+        // Only the native field counts: focus on the clear button says nothing
+        // about where the user left the caret.
+        if (event.target === this.nativeField())
+            this.wasFocused = true;
+    }
+    /**
+     * Inserts `text` at the caret (replacing a selection), or at the end when
+     * the field was never focused, then puts the caret after it. Emits the
+     * change once, exactly as typing would. Does nothing when read-only or
+     * disabled, and refuses the whole insert when the result would pass
+     * `maxlength` (a cut placeholder token is worse than none).
+     *
+     * The value is written programmatically, so the browser's undo history for
+     * the field is reset and no DOM `input` event fires; the form control
+     * (`onChange`) and `valueChangeEvent` are the contract.
+     */
+    insertAtCursor(text) {
+        if (this.readonly() || this.isDisabled())
+            return;
+        const field = this.nativeField();
+        if (!field)
+            return;
+        const { value, caret } = insertAtSelection(field, text, this.wasFocused);
+        if (this.maxlength != null && value.length > this.maxlength)
+            return;
+        // Write the DOM first so the later [value] binding finds it unchanged
+        // and leaves the caret where we put it.
+        field.value = value;
+        this.handleInput(value);
+        placeCaret(field, caret);
+    }
+    nativeField() {
+        return this.hostRef.nativeElement.querySelector('input');
+    }
     handleBlur() {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfInputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfInputTextComponent, isStandalone: true, selector: "ef-input-text", inputs: { size: "size", type: "type", maxlength: "maxlength", fluid: ["fluid", "fluid", booleanAttribute], inline: ["inline", "inline", booleanAttribute], autocomplete: "autocomplete", variant: "variant", prefix: "prefix", suffix: "suffix", value: "value" }, outputs: { valueChangeEvent: "valueChangeEvent" }, host: { properties: { "class.ef-inline": "this.isInline" } }, usesInheritance: true, ngImport: i0, template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  @if (variant === 'comptoir') {\n    @if (prefix || suffix) {\n      <!-- Comptoir variant with prefix/suffix \u2014 wraps the input in\n           an .ef-input-group so the addons share the border + focus\n           ring with the input. -->\n      <div class=\"ef-input-group\" [class.is-invalid]=\"isInvalid\">\n        @if (prefix) {\n          <span class=\"ef-input-addon is-prefix\" aria-hidden=\"true\">{{ prefix }}</span>\n        }\n        <input\n          [id]=\"effectiveId\"\n          [attr.name]=\"name() || null\"\n          [type]=\"type\"\n          [value]=\"value\"\n          (input)=\"handleInput($any($event.target).value)\"\n          (blur)=\"handleBlur()\"\n          [attr.placeholder]=\"effectivePlaceholder || null\"\n          [attr.maxlength]=\"maxlength ?? null\"\n          [readonly]=\"readonly()\"\n          [disabled]=\"isDisabled()\"\n          [attr.autocomplete]=\"autocomplete ?? null\"\n          [attr.aria-label]=\"effectiveAriaLabel\"\n          [attr.aria-required]=\"required() ? 'true' : null\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n          [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n        />\n        @if (canClear) {\n          <ef-clear-button\n            class=\"ef-group-clear\"\n            [ariaLabel]=\"'action.clear' | translate\"\n            (clear)=\"clearValue()\"\n          />\n        }\n        @if (suffix) {\n          <span class=\"ef-input-addon is-suffix\" aria-hidden=\"true\">{{ suffix }}</span>\n        }\n      </div>\n    } @else {\n      <!-- Comptoir variant \u2014 bare native input (+ optional inline clear). -->\n      <div class=\"ef-input-wrap\">\n        <input\n          class=\"ef-input\"\n          [class.has-clear]=\"canClear\"\n          [id]=\"effectiveId\"\n          [attr.name]=\"name() || null\"\n          [type]=\"type\"\n          [value]=\"value\"\n          (input)=\"handleInput($any($event.target).value)\"\n          (blur)=\"handleBlur()\"\n          [attr.placeholder]=\"effectivePlaceholder || null\"\n          [attr.maxlength]=\"maxlength ?? null\"\n          [readonly]=\"readonly()\"\n          [disabled]=\"isDisabled()\"\n          [attr.autocomplete]=\"autocomplete ?? null\"\n          [class.is-invalid]=\"isInvalid\"\n          [attr.aria-label]=\"effectiveAriaLabel\"\n          [attr.aria-required]=\"required() ? 'true' : null\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n          [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n        />\n        @if (canClear) {\n          <ef-clear-button\n            class=\"ef-input-clear\"\n            [ariaLabel]=\"'action.clear' | translate\"\n            (clear)=\"clearValue()\"\n          />\n        }\n      </div>\n    }\n  } @else {\n    <!-- PrimeNG variant (default) \u2014 v1 styling. -->\n    <input\n      [id]=\"effectiveId\"\n      [attr.name]=\"name() || null\"\n      [type]=\"type\"\n      pInputText\n      [pSize]=\"size\"\n      [value]=\"value\"\n      (input)=\"handleInput($any($event.target).value)\"\n      (blur)=\"handleBlur()\"\n      [attr.placeholder]=\"effectivePlaceholder || null\"\n      [attr.maxlength]=\"maxlength ?? null\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"isDisabled()\"\n      [attr.autocomplete]=\"autocomplete ?? null\"\n      [class.ng-invalid]=\"isInvalid\"\n      [class.ng-touched]=\"ngControl?.touched\"\n      [attr.aria-label]=\"effectiveAriaLabel\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n      fluid\n    />\n  }\n  @if (effectiveHint) {\n    <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n  }\n  @if (showRequired || serverErrors) {\n    <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n      @if (showRequired) {\n        <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n      }\n      @if (serverErrors; as errors) {\n        @for (error of errors; track error) {\n          <small class=\"text-danger block\">{{ error }}</small>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i9.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "component", type: EfClearButtonComponent, selector: "ef-clear-button", inputs: ["ariaLabel", "disabled"], outputs: ["clear"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfInputTextComponent, isStandalone: true, selector: "ef-input-text", inputs: { size: "size", type: "type", maxlength: "maxlength", fluid: ["fluid", "fluid", booleanAttribute], inline: ["inline", "inline", booleanAttribute], autocomplete: "autocomplete", dir: "dir", variant: "variant", prefix: "prefix", suffix: "suffix", value: "value" }, outputs: { valueChangeEvent: "valueChangeEvent" }, host: { listeners: { "focusin": "markFocused($event)" }, properties: { "class.ef-inline": "this.isInline" } }, usesInheritance: true, ngImport: i0, template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  @if (variant === 'comptoir') {\n    @if (prefix || suffix) {\n      <!-- Comptoir variant with prefix/suffix \u2014 wraps the input in\n           an .ef-input-group so the addons share the border + focus\n           ring with the input. -->\n      <div class=\"ef-input-group\" [class.is-invalid]=\"isInvalid\">\n        @if (prefix) {\n          <span class=\"ef-input-addon is-prefix\" aria-hidden=\"true\">{{ prefix }}</span>\n        }\n        <input\n          [id]=\"effectiveId\"\n          [attr.name]=\"name() || null\"\n          [attr.dir]=\"dir || null\"\n          [type]=\"type\"\n          [value]=\"value\"\n          (input)=\"handleInput($any($event.target).value)\"\n          (blur)=\"handleBlur()\"\n          [attr.placeholder]=\"effectivePlaceholder || null\"\n          [attr.maxlength]=\"maxlength ?? null\"\n          [readonly]=\"readonly()\"\n          [disabled]=\"isDisabled()\"\n          [attr.autocomplete]=\"autocomplete ?? null\"\n          [attr.aria-label]=\"effectiveAriaLabel\"\n          [attr.aria-required]=\"required() ? 'true' : null\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n          [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n        />\n        @if (canClear) {\n          <ef-clear-button\n            class=\"ef-group-clear\"\n            [ariaLabel]=\"'action.clear' | translate\"\n            (clear)=\"clearValue()\"\n          />\n        }\n        @if (suffix) {\n          <span class=\"ef-input-addon is-suffix\" aria-hidden=\"true\">{{ suffix }}</span>\n        }\n      </div>\n    } @else {\n      <!-- Comptoir variant \u2014 bare native input (+ optional inline clear). -->\n      <div class=\"ef-input-wrap\">\n        <input\n          class=\"ef-input\"\n          [class.has-clear]=\"canClear\"\n          [id]=\"effectiveId\"\n          [attr.name]=\"name() || null\"\n          [attr.dir]=\"dir || null\"\n          [type]=\"type\"\n          [value]=\"value\"\n          (input)=\"handleInput($any($event.target).value)\"\n          (blur)=\"handleBlur()\"\n          [attr.placeholder]=\"effectivePlaceholder || null\"\n          [attr.maxlength]=\"maxlength ?? null\"\n          [readonly]=\"readonly()\"\n          [disabled]=\"isDisabled()\"\n          [attr.autocomplete]=\"autocomplete ?? null\"\n          [class.is-invalid]=\"isInvalid\"\n          [attr.aria-label]=\"effectiveAriaLabel\"\n          [attr.aria-required]=\"required() ? 'true' : null\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n          [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n        />\n        @if (canClear) {\n          <ef-clear-button\n            class=\"ef-input-clear\"\n            [ariaLabel]=\"'action.clear' | translate\"\n            (clear)=\"clearValue()\"\n          />\n        }\n      </div>\n    }\n  } @else {\n    <!-- PrimeNG variant (default) \u2014 v1 styling. -->\n    <input\n      [id]=\"effectiveId\"\n      [attr.name]=\"name() || null\"\n          [attr.dir]=\"dir || null\"\n      [type]=\"type\"\n      pInputText\n      [pSize]=\"size\"\n      [value]=\"value\"\n      (input)=\"handleInput($any($event.target).value)\"\n      (blur)=\"handleBlur()\"\n      [attr.placeholder]=\"effectivePlaceholder || null\"\n      [attr.maxlength]=\"maxlength ?? null\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"isDisabled()\"\n      [attr.autocomplete]=\"autocomplete ?? null\"\n      [class.ng-invalid]=\"isInvalid\"\n      [class.ng-touched]=\"ngControl?.touched\"\n      [attr.aria-label]=\"effectiveAriaLabel\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n      fluid\n    />\n  }\n  @if (effectiveHint) {\n    <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n  }\n  @if (showRequired || serverErrors) {\n    <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n      @if (showRequired) {\n        <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n      }\n      @if (serverErrors; as errors) {\n        @for (error of errors; track error) {\n          <small class=\"text-danger block\">{{ error }}</small>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i9.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "labelParams", "for", "styleClass", "required"] }, { kind: "component", type: EfClearButtonComponent, selector: "ef-clear-button", inputs: ["ariaLabel", "disabled"], outputs: ["clear"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfInputTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-input-text', standalone: true, imports: [InputTextModule, FormsModule, TranslateModule, EfLabelComponent, EfClearButtonComponent], template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  @if (variant === 'comptoir') {\n    @if (prefix || suffix) {\n      <!-- Comptoir variant with prefix/suffix \u2014 wraps the input in\n           an .ef-input-group so the addons share the border + focus\n           ring with the input. -->\n      <div class=\"ef-input-group\" [class.is-invalid]=\"isInvalid\">\n        @if (prefix) {\n          <span class=\"ef-input-addon is-prefix\" aria-hidden=\"true\">{{ prefix }}</span>\n        }\n        <input\n          [id]=\"effectiveId\"\n          [attr.name]=\"name() || null\"\n          [type]=\"type\"\n          [value]=\"value\"\n          (input)=\"handleInput($any($event.target).value)\"\n          (blur)=\"handleBlur()\"\n          [attr.placeholder]=\"effectivePlaceholder || null\"\n          [attr.maxlength]=\"maxlength ?? null\"\n          [readonly]=\"readonly()\"\n          [disabled]=\"isDisabled()\"\n          [attr.autocomplete]=\"autocomplete ?? null\"\n          [attr.aria-label]=\"effectiveAriaLabel\"\n          [attr.aria-required]=\"required() ? 'true' : null\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n          [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n        />\n        @if (canClear) {\n          <ef-clear-button\n            class=\"ef-group-clear\"\n            [ariaLabel]=\"'action.clear' | translate\"\n            (clear)=\"clearValue()\"\n          />\n        }\n        @if (suffix) {\n          <span class=\"ef-input-addon is-suffix\" aria-hidden=\"true\">{{ suffix }}</span>\n        }\n      </div>\n    } @else {\n      <!-- Comptoir variant \u2014 bare native input (+ optional inline clear). -->\n      <div class=\"ef-input-wrap\">\n        <input\n          class=\"ef-input\"\n          [class.has-clear]=\"canClear\"\n          [id]=\"effectiveId\"\n          [attr.name]=\"name() || null\"\n          [type]=\"type\"\n          [value]=\"value\"\n          (input)=\"handleInput($any($event.target).value)\"\n          (blur)=\"handleBlur()\"\n          [attr.placeholder]=\"effectivePlaceholder || null\"\n          [attr.maxlength]=\"maxlength ?? null\"\n          [readonly]=\"readonly()\"\n          [disabled]=\"isDisabled()\"\n          [attr.autocomplete]=\"autocomplete ?? null\"\n          [class.is-invalid]=\"isInvalid\"\n          [attr.aria-label]=\"effectiveAriaLabel\"\n          [attr.aria-required]=\"required() ? 'true' : null\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n          [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n        />\n        @if (canClear) {\n          <ef-clear-button\n            class=\"ef-input-clear\"\n            [ariaLabel]=\"'action.clear' | translate\"\n            (clear)=\"clearValue()\"\n          />\n        }\n      </div>\n    }\n  } @else {\n    <!-- PrimeNG variant (default) \u2014 v1 styling. -->\n    <input\n      [id]=\"effectiveId\"\n      [attr.name]=\"name() || null\"\n      [type]=\"type\"\n      pInputText\n      [pSize]=\"size\"\n      [value]=\"value\"\n      (input)=\"handleInput($any($event.target).value)\"\n      (blur)=\"handleBlur()\"\n      [attr.placeholder]=\"effectivePlaceholder || null\"\n      [attr.maxlength]=\"maxlength ?? null\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"isDisabled()\"\n      [attr.autocomplete]=\"autocomplete ?? null\"\n      [class.ng-invalid]=\"isInvalid\"\n      [class.ng-touched]=\"ngControl?.touched\"\n      [attr.aria-label]=\"effectiveAriaLabel\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n      fluid\n    />\n  }\n  @if (effectiveHint) {\n    <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n  }\n  @if (showRequired || serverErrors) {\n    <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n      @if (showRequired) {\n        <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n      }\n      @if (serverErrors; as errors) {\n        @for (error of errors; track error) {\n          <small class=\"text-danger block\">{{ error }}</small>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"] }]
+            args: [{ selector: 'ef-input-text', standalone: true, imports: [InputTextModule, FormsModule, TranslateModule, EfLabelComponent, EfClearButtonComponent], template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  @if (variant === 'comptoir') {\n    @if (prefix || suffix) {\n      <!-- Comptoir variant with prefix/suffix \u2014 wraps the input in\n           an .ef-input-group so the addons share the border + focus\n           ring with the input. -->\n      <div class=\"ef-input-group\" [class.is-invalid]=\"isInvalid\">\n        @if (prefix) {\n          <span class=\"ef-input-addon is-prefix\" aria-hidden=\"true\">{{ prefix }}</span>\n        }\n        <input\n          [id]=\"effectiveId\"\n          [attr.name]=\"name() || null\"\n          [attr.dir]=\"dir || null\"\n          [type]=\"type\"\n          [value]=\"value\"\n          (input)=\"handleInput($any($event.target).value)\"\n          (blur)=\"handleBlur()\"\n          [attr.placeholder]=\"effectivePlaceholder || null\"\n          [attr.maxlength]=\"maxlength ?? null\"\n          [readonly]=\"readonly()\"\n          [disabled]=\"isDisabled()\"\n          [attr.autocomplete]=\"autocomplete ?? null\"\n          [attr.aria-label]=\"effectiveAriaLabel\"\n          [attr.aria-required]=\"required() ? 'true' : null\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n          [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n        />\n        @if (canClear) {\n          <ef-clear-button\n            class=\"ef-group-clear\"\n            [ariaLabel]=\"'action.clear' | translate\"\n            (clear)=\"clearValue()\"\n          />\n        }\n        @if (suffix) {\n          <span class=\"ef-input-addon is-suffix\" aria-hidden=\"true\">{{ suffix }}</span>\n        }\n      </div>\n    } @else {\n      <!-- Comptoir variant \u2014 bare native input (+ optional inline clear). -->\n      <div class=\"ef-input-wrap\">\n        <input\n          class=\"ef-input\"\n          [class.has-clear]=\"canClear\"\n          [id]=\"effectiveId\"\n          [attr.name]=\"name() || null\"\n          [attr.dir]=\"dir || null\"\n          [type]=\"type\"\n          [value]=\"value\"\n          (input)=\"handleInput($any($event.target).value)\"\n          (blur)=\"handleBlur()\"\n          [attr.placeholder]=\"effectivePlaceholder || null\"\n          [attr.maxlength]=\"maxlength ?? null\"\n          [readonly]=\"readonly()\"\n          [disabled]=\"isDisabled()\"\n          [attr.autocomplete]=\"autocomplete ?? null\"\n          [class.is-invalid]=\"isInvalid\"\n          [attr.aria-label]=\"effectiveAriaLabel\"\n          [attr.aria-required]=\"required() ? 'true' : null\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n          [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n        />\n        @if (canClear) {\n          <ef-clear-button\n            class=\"ef-input-clear\"\n            [ariaLabel]=\"'action.clear' | translate\"\n            (clear)=\"clearValue()\"\n          />\n        }\n      </div>\n    }\n  } @else {\n    <!-- PrimeNG variant (default) \u2014 v1 styling. -->\n    <input\n      [id]=\"effectiveId\"\n      [attr.name]=\"name() || null\"\n          [attr.dir]=\"dir || null\"\n      [type]=\"type\"\n      pInputText\n      [pSize]=\"size\"\n      [value]=\"value\"\n      (input)=\"handleInput($any($event.target).value)\"\n      (blur)=\"handleBlur()\"\n      [attr.placeholder]=\"effectivePlaceholder || null\"\n      [attr.maxlength]=\"maxlength ?? null\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"isDisabled()\"\n      [attr.autocomplete]=\"autocomplete ?? null\"\n      [class.ng-invalid]=\"isInvalid\"\n      [class.ng-touched]=\"ngControl?.touched\"\n      [attr.aria-label]=\"effectiveAriaLabel\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n      fluid\n    />\n  }\n  @if (effectiveHint) {\n    <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n  }\n  @if (showRequired || serverErrors) {\n    <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n      @if (showRequired) {\n        <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n      }\n      @if (serverErrors; as errors) {\n        @for (error of errors; track error) {\n          <small class=\"text-danger block\">{{ error }}</small>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { size: [{
                 type: Input
             }], type: [{
@@ -11105,6 +11680,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 args: [{ transform: booleanAttribute }]
             }], autocomplete: [{
                 type: Input
+            }], dir: [{
+                type: Input
             }], variant: [{
                 type: Input
             }], prefix: [{
@@ -11118,6 +11695,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Output
             }], value: [{
                 type: Input
+            }], markFocused: [{
+                type: HostListener,
+                args: ['focusin', ['$event']]
             }] } });
 
 /**
@@ -11229,11 +11809,11 @@ class EfCheckboxComponent extends AbstractEfFormControl {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfCheckboxComponent, isStandalone: true, selector: "ef-checkbox", inputs: { value: "value", binary: ["binary", "binary", booleanAttribute], variant: "variant", inline: ["inline", "inline", booleanAttribute], checked: "checked" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.ef-stacked": "this.isStacked" } }, usesInheritance: true, ngImport: i0, template: "@if (!inline && hasLabel) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-checkbox-control\">\n  @if (variant === 'comptoir') {\n    <label class=\"ef-checkbox-native\" [class.is-disabled]=\"isDisabled()\">\n      <input\n        type=\"checkbox\"\n        [id]=\"effectiveId\"\n        [attr.name]=\"name() || null\"\n        [checked]=\"!!checked\"\n        [disabled]=\"isDisabled()\"\n        [class.is-invalid]=\"isInvalid\"\n        [attr.aria-label]=\"effectiveAriaLabel\"\n        [attr.aria-required]=\"required() ? 'true' : null\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n        [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n        (change)=\"handleNativeChange($any($event.target).checked)\"\n      />\n      <span class=\"ef-checkbox-box\" aria-hidden=\"true\"></span>\n      @if (inline && hasLabel) {\n        <span class=\"ef-checkbox-label\">\n          {{ labelKey() ? (labelKey() | translate) : label() }}\n          @if (required()) {\n            <span class=\"ef-checkbox-required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n    </label>\n  } @else {\n    <p-checkbox\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [ngModel]=\"checked\"\n      [ngModelOptions]=\"{standalone: true}\"\n      (onChange)=\"handleChange($event)\"\n      [value]=\"value\"\n      [binary]=\"binary\"\n      [disabled]=\"isDisabled()\"\n      [ariaLabel]=\"effectiveAriaLabel || undefined\"\n    />\n    @if (inline && hasLabel) {\n      <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" styleClass=\"form-label-left cursor-pointer\" />\n    }\n  }\n</div>\n@if (showRequired || serverErrors) {\n  <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.ef-checkbox-control{display:inline-flex;align-items:center;gap:.5rem;min-width:0}:host(.ef-stacked){display:block}:host(.ef-stacked)>.ef-checkbox-control{display:flex;min-height:var(--hit-field)}\n"], dependencies: [{ kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { 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: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfCheckboxComponent, isStandalone: true, selector: "ef-checkbox", inputs: { value: "value", binary: ["binary", "binary", booleanAttribute], variant: "variant", inline: ["inline", "inline", booleanAttribute], checked: "checked" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.ef-stacked": "this.isStacked" } }, usesInheritance: true, ngImport: i0, template: "@if (!inline && hasLabel) {\n  <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-checkbox-control\">\n  @if (variant === 'comptoir') {\n    <label class=\"ef-checkbox-native\" [class.is-disabled]=\"isDisabled()\">\n      <input\n        type=\"checkbox\"\n        [id]=\"effectiveId\"\n        [attr.name]=\"name() || null\"\n        [checked]=\"!!checked\"\n        [disabled]=\"isDisabled()\"\n        [class.is-invalid]=\"isInvalid\"\n        [attr.aria-label]=\"effectiveAriaLabel\"\n        [attr.aria-required]=\"required() ? 'true' : null\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n        [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n        (change)=\"handleNativeChange($any($event.target).checked)\"\n      />\n      <span class=\"ef-checkbox-box\" aria-hidden=\"true\"></span>\n      @if (inline && hasLabel) {\n        <span class=\"ef-checkbox-label\">\n          {{ labelKey() ? (labelKey() | translate) : label() }}\n          @if (required()) {\n            <span class=\"ef-checkbox-required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n    </label>\n  } @else {\n    <p-checkbox\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [ngModel]=\"checked\"\n      [ngModelOptions]=\"{standalone: true}\"\n      (onChange)=\"handleChange($event)\"\n      [value]=\"value\"\n      [binary]=\"binary\"\n      [disabled]=\"isDisabled()\"\n      [ariaLabel]=\"effectiveAriaLabel || undefined\"\n    />\n    @if (inline && hasLabel) {\n      <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" [for]=\"effectiveId\" styleClass=\"form-label-left cursor-pointer\" />\n    }\n  }\n</div>\n@if (showRequired || serverErrors) {\n  <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.ef-checkbox-control{display:inline-flex;align-items:center;gap:.5rem;min-width:0}:host(.ef-stacked){display:block}:host(.ef-stacked)>.ef-checkbox-control{display:flex;min-height:var(--hit-field)}\n"], dependencies: [{ kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { 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: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "labelParams", "for", "styleClass", "required"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-checkbox', standalone: true, imports: [CheckboxModule, FormsModule, TranslateModule, EfLabelComponent], template: "@if (!inline && hasLabel) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-checkbox-control\">\n  @if (variant === 'comptoir') {\n    <label class=\"ef-checkbox-native\" [class.is-disabled]=\"isDisabled()\">\n      <input\n        type=\"checkbox\"\n        [id]=\"effectiveId\"\n        [attr.name]=\"name() || null\"\n        [checked]=\"!!checked\"\n        [disabled]=\"isDisabled()\"\n        [class.is-invalid]=\"isInvalid\"\n        [attr.aria-label]=\"effectiveAriaLabel\"\n        [attr.aria-required]=\"required() ? 'true' : null\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n        [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n        (change)=\"handleNativeChange($any($event.target).checked)\"\n      />\n      <span class=\"ef-checkbox-box\" aria-hidden=\"true\"></span>\n      @if (inline && hasLabel) {\n        <span class=\"ef-checkbox-label\">\n          {{ labelKey() ? (labelKey() | translate) : label() }}\n          @if (required()) {\n            <span class=\"ef-checkbox-required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n    </label>\n  } @else {\n    <p-checkbox\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [ngModel]=\"checked\"\n      [ngModelOptions]=\"{standalone: true}\"\n      (onChange)=\"handleChange($event)\"\n      [value]=\"value\"\n      [binary]=\"binary\"\n      [disabled]=\"isDisabled()\"\n      [ariaLabel]=\"effectiveAriaLabel || undefined\"\n    />\n    @if (inline && hasLabel) {\n      <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" styleClass=\"form-label-left cursor-pointer\" />\n    }\n  }\n</div>\n@if (showRequired || serverErrors) {\n  <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.ef-checkbox-control{display:inline-flex;align-items:center;gap:.5rem;min-width:0}:host(.ef-stacked){display:block}:host(.ef-stacked)>.ef-checkbox-control{display:flex;min-height:var(--hit-field)}\n"] }]
+            args: [{ selector: 'ef-checkbox', standalone: true, imports: [CheckboxModule, FormsModule, TranslateModule, EfLabelComponent], template: "@if (!inline && hasLabel) {\n  <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-checkbox-control\">\n  @if (variant === 'comptoir') {\n    <label class=\"ef-checkbox-native\" [class.is-disabled]=\"isDisabled()\">\n      <input\n        type=\"checkbox\"\n        [id]=\"effectiveId\"\n        [attr.name]=\"name() || null\"\n        [checked]=\"!!checked\"\n        [disabled]=\"isDisabled()\"\n        [class.is-invalid]=\"isInvalid\"\n        [attr.aria-label]=\"effectiveAriaLabel\"\n        [attr.aria-required]=\"required() ? 'true' : null\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n        [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n        (change)=\"handleNativeChange($any($event.target).checked)\"\n      />\n      <span class=\"ef-checkbox-box\" aria-hidden=\"true\"></span>\n      @if (inline && hasLabel) {\n        <span class=\"ef-checkbox-label\">\n          {{ labelKey() ? (labelKey() | translate) : label() }}\n          @if (required()) {\n            <span class=\"ef-checkbox-required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n    </label>\n  } @else {\n    <p-checkbox\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [ngModel]=\"checked\"\n      [ngModelOptions]=\"{standalone: true}\"\n      (onChange)=\"handleChange($event)\"\n      [value]=\"value\"\n      [binary]=\"binary\"\n      [disabled]=\"isDisabled()\"\n      [ariaLabel]=\"effectiveAriaLabel || undefined\"\n    />\n    @if (inline && hasLabel) {\n      <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" [for]=\"effectiveId\" styleClass=\"form-label-left cursor-pointer\" />\n    }\n  }\n</div>\n@if (showRequired || serverErrors) {\n  <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.ef-checkbox-control{display:inline-flex;align-items:center;gap:.5rem;min-width:0}:host(.ef-stacked){display:block}:host(.ef-stacked)>.ef-checkbox-control{display:flex;min-height:var(--hit-field)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], binary: [{
@@ -11318,7 +11898,7 @@ class EfToggleSwitchComponent extends AbstractEfFormControl {
     <p-toggleswitch
       [autofocus]="autofocus"
       [inputId]="effectiveId"
-      [name]="name() || undefined"
+      [name]="$any(name() || undefined)"
       [ngModel]="checked"
       [ngModelOptions]="{ standalone: true }"
       [disabled]="isDisabled()"
@@ -11333,7 +11913,7 @@ class EfToggleSwitchComponent extends AbstractEfFormControl {
         styleClass="form-label-left cursor-pointer"
       />
     }
-  `, isInline: true, styles: [":host(.ef-toggleswitch--row){display:flex;align-items:center;gap:var(--s-3);min-width:0}:host(.ef-toggleswitch--row) p-toggleswitch{flex-shrink:0}:host(.ef-toggleswitch--row) ef-label{display:block;min-width:0;overflow-wrap:anywhere}\n"], dependencies: [{ kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i1$c.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { 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: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }] });
+  `, isInline: true, styles: [":host(.ef-toggleswitch--row){display:flex;align-items:center;gap:var(--s-3);min-width:0}:host(.ef-toggleswitch--row) p-toggleswitch{flex-shrink:0}:host(.ef-toggleswitch--row) ef-label{display:block;min-width:0;overflow-wrap:anywhere}\n"], dependencies: [{ kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i1$c.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { 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: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "labelParams", "for", "styleClass", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfToggleSwitchComponent, decorators: [{
             type: Component,
@@ -11343,7 +11923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
     <p-toggleswitch
       [autofocus]="autofocus"
       [inputId]="effectiveId"
-      [name]="name() || undefined"
+      [name]="$any(name() || undefined)"
       [ngModel]="checked"
       [ngModelOptions]="{ standalone: true }"
       [disabled]="isDisabled()"
@@ -11433,14 +12013,14 @@ class EfDatepickerComponent {
     }
     get showRequired() {
         const ctrl = this.ngControl?.control;
-        return ctrl?.hasError('required') && ctrl?.touched;
+        return !!(ctrl?.hasError('required') && ctrl?.touched);
     }
     get serverErrors() {
         return this.ngControl?.control?.errors?.serverError ?? null;
     }
     get isInvalid() {
         const ctrl = this.ngControl?.control;
-        return ctrl?.invalid && (ctrl?.touched || ctrl?.dirty);
+        return !!(ctrl?.invalid && (ctrl?.touched || ctrl?.dirty));
     }
     writeValue(value) {
         this.value = value;
@@ -11463,11 +12043,11 @@ class EfDatepickerComponent {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfDatepickerComponent, isStandalone: true, selector: "ef-datepicker", inputs: { label: "label", labelKey: "labelKey", inputId: "inputId", name: "name", placeholder: "placeholder", placeholderKey: "placeholderKey", size: "size", required: ["required", "required", booleanAttribute], fluid: ["fluid", "fluid", booleanAttribute], inline: ["inline", "inline", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], showIcon: ["showIcon", "showIcon", booleanAttribute], iconDisplay: "iconDisplay", selectionMode: "selectionMode", dateFormat: "dateFormat", appendTo: "appendTo", showTime: ["showTime", "showTime", booleanAttribute], showButtonBar: ["showButtonBar", "showButtonBar", booleanAttribute], minDate: "minDate", maxDate: "maxDate", autofocus: ["autofocus", "autofocus", booleanAttribute] }, outputs: { dateSelectEvent: "dateSelectEvent" }, host: { properties: { "class.ef-inline": "this.isInline" } }, ngImport: i0, template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-datepicker\n    [autofocus]=\"autofocus\"\n    [inputId]=\"effectiveId\"\n    [name]=\"name\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"handleChange($event)\"\n    (onBlur)=\"handleBlur()\"\n    [placeholder]=\"effectivePlaceholder\"\n    [size]=\"size\"\n    [disabled]=\"isDisabled\"\n    [showIcon]=\"showIcon\"\n    [iconDisplay]=\"iconDisplay\"\n    [selectionMode]=\"selectionMode\"\n    [dateFormat]=\"dateFormat\"\n    [appendTo]=\"appendTo\"\n    [showTime]=\"showTime\"\n    [showButtonBar]=\"showButtonBar\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [fluid]=\"fluid\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i1$d.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { 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: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfDatepickerComponent, isStandalone: true, selector: "ef-datepicker", inputs: { label: "label", labelKey: "labelKey", inputId: "inputId", name: "name", placeholder: "placeholder", placeholderKey: "placeholderKey", size: "size", required: ["required", "required", booleanAttribute], fluid: ["fluid", "fluid", booleanAttribute], inline: ["inline", "inline", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], showIcon: ["showIcon", "showIcon", booleanAttribute], iconDisplay: "iconDisplay", selectionMode: "selectionMode", dateFormat: "dateFormat", appendTo: "appendTo", showTime: ["showTime", "showTime", booleanAttribute], showButtonBar: ["showButtonBar", "showButtonBar", booleanAttribute], minDate: "minDate", maxDate: "maxDate", autofocus: ["autofocus", "autofocus", booleanAttribute] }, outputs: { dateSelectEvent: "dateSelectEvent" }, host: { properties: { "class.ef-inline": "this.isInline" } }, ngImport: i0, template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-datepicker\n    [autofocus]=\"autofocus\"\n    [inputId]=\"effectiveId\"\n    [name]=\"$any(name)\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"handleChange($event)\"\n    (onBlur)=\"handleBlur()\"\n    [placeholder]=\"effectivePlaceholder\"\n    [size]=\"size\"\n    [disabled]=\"isDisabled\"\n    [showIcon]=\"showIcon\"\n    [iconDisplay]=\"iconDisplay\"\n    [selectionMode]=\"selectionMode\"\n    [dateFormat]=\"dateFormat\"\n    [appendTo]=\"appendTo\"\n    [showTime]=\"showTime\"\n    [showButtonBar]=\"showButtonBar\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [fluid]=\"fluid\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i1$d.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { 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: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "labelParams", "for", "styleClass", "required"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-datepicker', standalone: true, imports: [DatePickerModule, FormsModule, TranslateModule, EfLabelComponent], template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-datepicker\n    [autofocus]=\"autofocus\"\n    [inputId]=\"effectiveId\"\n    [name]=\"name\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"handleChange($event)\"\n    (onBlur)=\"handleBlur()\"\n    [placeholder]=\"effectivePlaceholder\"\n    [size]=\"size\"\n    [disabled]=\"isDisabled\"\n    [showIcon]=\"showIcon\"\n    [iconDisplay]=\"iconDisplay\"\n    [selectionMode]=\"selectionMode\"\n    [dateFormat]=\"dateFormat\"\n    [appendTo]=\"appendTo\"\n    [showTime]=\"showTime\"\n    [showButtonBar]=\"showButtonBar\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [fluid]=\"fluid\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"] }]
+            args: [{ selector: 'ef-datepicker', standalone: true, imports: [DatePickerModule, FormsModule, TranslateModule, EfLabelComponent], template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-datepicker\n    [autofocus]=\"autofocus\"\n    [inputId]=\"effectiveId\"\n    [name]=\"$any(name)\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"handleChange($event)\"\n    (onBlur)=\"handleBlur()\"\n    [placeholder]=\"effectivePlaceholder\"\n    [size]=\"size\"\n    [disabled]=\"isDisabled\"\n    [showIcon]=\"showIcon\"\n    [iconDisplay]=\"iconDisplay\"\n    [selectionMode]=\"selectionMode\"\n    [dateFormat]=\"dateFormat\"\n    [appendTo]=\"appendTo\"\n    [showTime]=\"showTime\"\n    [showButtonBar]=\"showButtonBar\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [fluid]=\"fluid\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], labelKey: [{
@@ -11535,6 +12115,17 @@ class EfPasswordComponent extends AbstractEfFormControl {
     toggleMask = true;
     feedback = false;
     autocomplete;
+    /**
+     * Rendering variant, as `ef-input-text`. `'comptoir'` skins the PrimeNG
+     * input to the native `.ef-input` look (--hit-field height, --r-md radius,
+     * 12px padding, --paper-alt fill) so it lines up with the comptoir inputs
+     * beside it; the show/hide toggle becomes a --hit-field square target.
+     * `'primeng'` (default) keeps the stock PrimeNG look.
+     */
+    variant = 'primeng';
+    get fieldStyleClass() {
+        return this.variant === 'comptoir' ? 'ef-password-field ef-password--comptoir' : 'ef-password-field';
+    }
     /**
      * Take focus on load. Bound explicitly rather than left unset: PrimeNG's
      * AutoFocus directive tests `autofocus === false`, and the control declares
@@ -11550,8 +12141,24 @@ class EfPasswordComponent extends AbstractEfFormControl {
     onChange = () => { };
     onTouched = () => { };
     ngControl = inject(NgControl, { self: true, optional: true });
+    host = inject(ElementRef);
     constructor() {
         super();
+        // p-password has no describedby input, so link the hint (and any extra ids)
+        // to the native input here, as the other controls do in their templates.
+        afterEveryRender(() => {
+            const input = this.host.nativeElement.querySelector('input');
+            const ids = this.describedBy(false);
+            if (!input)
+                return;
+            // Write only on change: this runs after every render in the app.
+            if ((input.getAttribute('aria-describedby') || null) === (ids || null))
+                return;
+            if (ids)
+                input.setAttribute('aria-describedby', ids);
+            else
+                input.removeAttribute('aria-describedby');
+        });
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
@@ -11597,11 +12204,11 @@ class EfPasswordComponent extends AbstractEfFormControl {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfPasswordComponent, isStandalone: true, selector: "ef-password", inputs: { size: "size", fluid: ["fluid", "fluid", booleanAttribute], inline: ["inline", "inline", booleanAttribute], toggleMask: ["toggleMask", "toggleMask", booleanAttribute], feedback: ["feedback", "feedback", booleanAttribute], autocomplete: "autocomplete", autofocus: ["autofocus", "autofocus", booleanAttribute] }, outputs: { valueChangeEvent: "valueChangeEvent" }, host: { properties: { "class.ef-inline": "this.isInline" } }, usesInheritance: true, ngImport: i0, template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  <p-password\n    [autofocus]=\"autofocus\"\n    [inputId]=\"effectiveId\"\n    [name]=\"name()\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"handleChange($event)\"\n    (onBlur)=\"handleBlur()\"\n    [toggleMask]=\"toggleMask\"\n    [feedback]=\"feedback\"\n    [placeholder]=\"effectivePlaceholder\"\n    [size]=\"size\"\n    [disabled]=\"isDisabled()\"\n    [attr.autocomplete]=\"autocomplete\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n    [showClear]=\"canClear\"\n    (onClear)=\"clearValue()\"\n    styleClass=\"ef-password-field\"\n    fluid\n  >\n    <ng-template #clearicon>\n      <span class=\"ef-clear\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n          <path d=\"M18 6 6 18M6 6l12 12\" />\n        </svg>\n      </span>\n    </ng-template>\n  </p-password>\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i1$e.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }, { 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: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfPasswordComponent, isStandalone: true, selector: "ef-password", inputs: { size: "size", fluid: ["fluid", "fluid", booleanAttribute], inline: ["inline", "inline", booleanAttribute], toggleMask: ["toggleMask", "toggleMask", booleanAttribute], feedback: ["feedback", "feedback", booleanAttribute], autocomplete: "autocomplete", variant: "variant", autofocus: ["autofocus", "autofocus", booleanAttribute] }, outputs: { valueChangeEvent: "valueChangeEvent" }, host: { properties: { "class.ef-inline": "this.isInline" } }, usesInheritance: true, ngImport: i0, template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  <p-password\n    [autofocus]=\"autofocus\"\n    [inputId]=\"effectiveId\"\n    [name]=\"name()\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"handleChange($event)\"\n    (onBlur)=\"handleBlur()\"\n    [toggleMask]=\"toggleMask\"\n    [feedback]=\"feedback\"\n    [placeholder]=\"effectivePlaceholder\"\n    [size]=\"size\"\n    [disabled]=\"isDisabled()\"\n    [autocomplete]=\"autocomplete\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n    [showClear]=\"canClear\"\n    (onClear)=\"clearValue()\"\n    [styleClass]=\"fieldStyleClass\"\n    fluid\n  >\n    <ng-template #clearicon>\n      <span class=\"ef-clear\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n          <path d=\"M18 6 6 18M6 6l12 12\" />\n        </svg>\n      </span>\n    </ng-template>\n  </p-password>\n  @if (effectiveHint) {\n    <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n  }\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i1$e.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }, { 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: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "labelParams", "for", "styleClass", "required"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfPasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-password', standalone: true, imports: [PasswordModule, FormsModule, TranslateModule, EfLabelComponent], template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  <p-password\n    [autofocus]=\"autofocus\"\n    [inputId]=\"effectiveId\"\n    [name]=\"name()\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"handleChange($event)\"\n    (onBlur)=\"handleBlur()\"\n    [toggleMask]=\"toggleMask\"\n    [feedback]=\"feedback\"\n    [placeholder]=\"effectivePlaceholder\"\n    [size]=\"size\"\n    [disabled]=\"isDisabled()\"\n    [attr.autocomplete]=\"autocomplete\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n    [showClear]=\"canClear\"\n    (onClear)=\"clearValue()\"\n    styleClass=\"ef-password-field\"\n    fluid\n  >\n    <ng-template #clearicon>\n      <span class=\"ef-clear\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n          <path d=\"M18 6 6 18M6 6l12 12\" />\n        </svg>\n      </span>\n    </ng-template>\n  </p-password>\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"] }]
+            args: [{ selector: 'ef-password', standalone: true, imports: [PasswordModule, FormsModule, TranslateModule, EfLabelComponent], template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  <p-password\n    [autofocus]=\"autofocus\"\n    [inputId]=\"effectiveId\"\n    [name]=\"name()\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"handleChange($event)\"\n    (onBlur)=\"handleBlur()\"\n    [toggleMask]=\"toggleMask\"\n    [feedback]=\"feedback\"\n    [placeholder]=\"effectivePlaceholder\"\n    [size]=\"size\"\n    [disabled]=\"isDisabled()\"\n    [autocomplete]=\"autocomplete\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n    [showClear]=\"canClear\"\n    (onClear)=\"clearValue()\"\n    [styleClass]=\"fieldStyleClass\"\n    fluid\n  >\n    <ng-template #clearicon>\n      <span class=\"ef-clear\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\">\n          <path d=\"M18 6 6 18M6 6l12 12\" />\n        </svg>\n      </span>\n    </ng-template>\n  </p-password>\n  @if (effectiveHint) {\n    <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n  }\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { size: [{
                 type: Input
             }], fluid: [{
@@ -11618,6 +12225,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 args: [{ transform: booleanAttribute }]
             }], autocomplete: [{
                 type: Input
+            }], variant: [{
+                type: Input
             }], autofocus: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -11710,11 +12319,11 @@ class EfMultiSelectComponent extends AbstractEfFormControl {
         this.selectedValues = [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfMultiSelectComponent, isStandalone: true, selector: "ef-multi-select", inputs: { optionLabel: "optionLabel", optionValue: "optionValue", options: "options", filteredOptions: "filteredOptions", maxSelectedLabels: "maxSelectedLabels", display: "display", size: "size", selectionLimit: "selectionLimit", filters: "filters", inline: ["inline", "inline", booleanAttribute] }, outputs: { changeEvent: "changeEvent" }, host: { properties: { "class.ef-inline": "this.isInline", "class.ef-required": "this.isRequired" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  <p-multiSelect\n    [id]=\"effectiveId\"\n    [name]=\"name()\"\n    [placeholder]=\"effectivePlaceholder\"\n    [options]=\"filteredOptions\"\n    [optionLabel]=\"optionLabel\"\n    [optionValue]=\"optionValue\"\n    [maxSelectedLabels]=\"maxSelectedLabels\"\n    [ngModel]=\"selectedValues\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"onInternalModelChange($event)\"\n    (onClear)=\"handleClear()\"\n    [disabled]=\"isDisabled()\"\n    [display]=\"display\"\n    [size]=\"size\"\n    [selectionLimit]=\"selectionLimit\"\n    [showClear]=\"showClear()\"\n    fluid\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host:not(.ef-required) ::ng-deep .p-multiselect.ng-invalid.ng-dirty{border-color:var(--p-multiselect-border-color, #d1d5db)}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ 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: MultiSelectModule }, { kind: "component", type: i2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfMultiSelectComponent, isStandalone: true, selector: "ef-multi-select", inputs: { optionLabel: "optionLabel", optionValue: "optionValue", options: "options", filteredOptions: "filteredOptions", maxSelectedLabels: "maxSelectedLabels", display: "display", size: "size", selectionLimit: "selectionLimit", filters: "filters", inline: ["inline", "inline", booleanAttribute] }, outputs: { changeEvent: "changeEvent" }, host: { properties: { "class.ef-inline": "this.isInline", "class.ef-required": "this.isRequired" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  <p-multiSelect\n    [id]=\"effectiveId\"\n    [name]=\"name()\"\n    [placeholder]=\"effectivePlaceholder\"\n    [options]=\"filteredOptions\"\n    [optionLabel]=\"optionLabel\"\n    [optionValue]=\"optionValue\"\n    [maxSelectedLabels]=\"maxSelectedLabels\"\n    [ngModel]=\"selectedValues\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"onInternalModelChange($event)\"\n    (onClear)=\"handleClear()\"\n    [disabled]=\"isDisabled()\"\n    [display]=\"display\"\n    [size]=\"size\"\n    [selectionLimit]=\"selectionLimit\"\n    [showClear]=\"showClear()\"\n    fluid\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host:not(.ef-required) ::ng-deep .p-multiselect.ng-invalid.ng-dirty{border-color:var(--p-multiselect-border-color, #d1d5db)}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ 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: MultiSelectModule }, { kind: "component", type: i2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "labelParams", "for", "styleClass", "required"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-multi-select', standalone: true, imports: [FormsModule, MultiSelectModule, TranslateModule, EfLabelComponent], template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  <p-multiSelect\n    [id]=\"effectiveId\"\n    [name]=\"name()\"\n    [placeholder]=\"effectivePlaceholder\"\n    [options]=\"filteredOptions\"\n    [optionLabel]=\"optionLabel\"\n    [optionValue]=\"optionValue\"\n    [maxSelectedLabels]=\"maxSelectedLabels\"\n    [ngModel]=\"selectedValues\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"onInternalModelChange($event)\"\n    (onClear)=\"handleClear()\"\n    [disabled]=\"isDisabled()\"\n    [display]=\"display\"\n    [size]=\"size\"\n    [selectionLimit]=\"selectionLimit\"\n    [showClear]=\"showClear()\"\n    fluid\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host:not(.ef-required) ::ng-deep .p-multiselect.ng-invalid.ng-dirty{border-color:var(--p-multiselect-border-color, #d1d5db)}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"] }]
+            args: [{ selector: 'ef-multi-select', standalone: true, imports: [FormsModule, MultiSelectModule, TranslateModule, EfLabelComponent], template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  <p-multiSelect\n    [id]=\"effectiveId\"\n    [name]=\"name()\"\n    [placeholder]=\"effectivePlaceholder\"\n    [options]=\"filteredOptions\"\n    [optionLabel]=\"optionLabel\"\n    [optionValue]=\"optionValue\"\n    [maxSelectedLabels]=\"maxSelectedLabels\"\n    [ngModel]=\"selectedValues\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"onInternalModelChange($event)\"\n    (onClear)=\"handleClear()\"\n    [disabled]=\"isDisabled()\"\n    [display]=\"display\"\n    [size]=\"size\"\n    [selectionLimit]=\"selectionLimit\"\n    [showClear]=\"showClear()\"\n    fluid\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}:host{display:block}:host:not(.ef-required) ::ng-deep .p-multiselect.ng-invalid.ng-dirty{border-color:var(--p-multiselect-border-color, #d1d5db)}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { changeEvent: [{
                 type: Output
             }], optionLabel: [{
@@ -11786,11 +12395,11 @@ class EfSelectButtonComponent extends AbstractEfFormControl {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfSelectButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfSelectButtonComponent, isStandalone: true, selector: "ef-selectbutton", inputs: { options: "options", optionLabel: "optionLabel", optionValue: "optionValue", multiple: ["multiple", "multiple", booleanAttribute], allowEmpty: ["allowEmpty", "allowEmpty", booleanAttribute], size: "size", styleClass: "styleClass" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" />\n}\n<p-selectbutton\n  [ngModel]=\"value\"\n  [ngModelOptions]=\"{standalone: true}\"\n  (onChange)=\"handleChange($event)\"\n  [options]=\"options\"\n  [optionLabel]=\"optionLabel\"\n  [optionValue]=\"optionValue\"\n  [multiple]=\"multiple\"\n  [allowEmpty]=\"allowEmpty\"\n  [disabled]=\"isDisabled()\"\n  [size]=\"size\"\n  [styleClass]=\"styleClass\"\n>\n  @if (itemTemplate) {\n    <ng-template let-item pTemplate=\"item\">\n      <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\" />\n    </ng-template>\n  }\n</p-selectbutton>\n", dependencies: [{ 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: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfSelectButtonComponent, isStandalone: true, selector: "ef-selectbutton", inputs: { options: "options", optionLabel: "optionLabel", optionValue: "optionValue", multiple: ["multiple", "multiple", booleanAttribute], allowEmpty: ["allowEmpty", "allowEmpty", booleanAttribute], size: "size", styleClass: "styleClass" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" />\n}\n<p-selectbutton\n  [ngModel]=\"value\"\n  [ngModelOptions]=\"{standalone: true}\"\n  (onChange)=\"handleChange($event)\"\n  [options]=\"options\"\n  [optionLabel]=\"optionLabel\"\n  [optionValue]=\"optionValue\"\n  [multiple]=\"multiple\"\n  [allowEmpty]=\"allowEmpty\"\n  [disabled]=\"isDisabled()\"\n  [size]=\"size\"\n  [styleClass]=\"styleClass\"\n>\n  @if (itemTemplate) {\n    <ng-template let-item pTemplate=\"item\">\n      <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\" />\n    </ng-template>\n  }\n</p-selectbutton>\n", dependencies: [{ 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: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "labelParams", "for", "styleClass", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfSelectButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-selectbutton', standalone: true, imports: [SelectButtonModule, FormsModule, TranslateModule, CommonModule, EfLabelComponent], template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" />\n}\n<p-selectbutton\n  [ngModel]=\"value\"\n  [ngModelOptions]=\"{standalone: true}\"\n  (onChange)=\"handleChange($event)\"\n  [options]=\"options\"\n  [optionLabel]=\"optionLabel\"\n  [optionValue]=\"optionValue\"\n  [multiple]=\"multiple\"\n  [allowEmpty]=\"allowEmpty\"\n  [disabled]=\"isDisabled()\"\n  [size]=\"size\"\n  [styleClass]=\"styleClass\"\n>\n  @if (itemTemplate) {\n    <ng-template let-item pTemplate=\"item\">\n      <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\" />\n    </ng-template>\n  }\n</p-selectbutton>\n" }]
+            args: [{ selector: 'ef-selectbutton', standalone: true, imports: [SelectButtonModule, FormsModule, TranslateModule, CommonModule, EfLabelComponent], template: "@if (labelKey() || label()) {\n  <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" />\n}\n<p-selectbutton\n  [ngModel]=\"value\"\n  [ngModelOptions]=\"{standalone: true}\"\n  (onChange)=\"handleChange($event)\"\n  [options]=\"options\"\n  [optionLabel]=\"optionLabel\"\n  [optionValue]=\"optionValue\"\n  [multiple]=\"multiple\"\n  [allowEmpty]=\"allowEmpty\"\n  [disabled]=\"isDisabled()\"\n  [size]=\"size\"\n  [styleClass]=\"styleClass\"\n>\n  @if (itemTemplate) {\n    <ng-template let-item pTemplate=\"item\">\n      <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\" />\n    </ng-template>\n  }\n</p-selectbutton>\n" }]
         }], ctorParameters: () => [], propDecorators: { options: [{
                 type: Input
             }], optionLabel: [{
@@ -12466,7 +13075,7 @@ class EfChangePasswordComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfChangePasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfChangePasswordComponent, isStandalone: true, selector: "ef-change-password", inputs: { requireCurrent: { classPropertyName: "requireCurrent", publicName: "requireCurrent", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, ngImport: i0, template: "<ef-form-grid>\n  @if (requireCurrent()) {\n    <ef-password\n      class=\"col-12\"\n      name=\"currentPassword\"\n      labelKey=\"ef_change_password_current\"\n      autocomplete=\"current-password\"\n      required\n      (valueChangeEvent)=\"currentPassword.set($event)\"\n    />\n  }\n  <ef-password\n    class=\"col-6\"\n    name=\"newPassword\"\n    labelKey=\"ef_change_password_new\"\n    autocomplete=\"new-password\"\n    required\n    (valueChangeEvent)=\"newPassword.set($event)\"\n  />\n  <ef-password\n    class=\"col-6\"\n    name=\"newPasswordConfirmation\"\n    labelKey=\"ef_change_password_confirm\"\n    autocomplete=\"new-password\"\n    required\n    (valueChangeEvent)=\"confirmation.set($event)\"\n  />\n</ef-form-grid>\n\n@if (validationKeys().length || errors().length) {\n  <ul class=\"ef-change-password__errors\">\n    @for (key of validationKeys(); track $index) {\n      <li>{{ key | translate }}</li>\n    }\n    <!-- Server messages arrive already translated (Identity returns prose,\n         not keys), so they are printed verbatim. -->\n    @for (error of errors(); track $index) {\n      <li>{{ error }}</li>\n    }\n  </ul>\n}\n", styles: [":host{display:grid;gap:var(--s-2, 8px);min-width:0}.ef-change-password__errors{display:grid;gap:4px;margin:0;padding:0;list-style:none;min-width:0;font-size:12px;line-height:1.4;color:var(--st-cancelled-fg, #b42318)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfPasswordComponent, selector: "ef-password", inputs: ["size", "fluid", "inline", "toggleMask", "feedback", "autocomplete", "autofocus"], outputs: ["valueChangeEvent"] }, { kind: "component", type: EfFormGridComponent, selector: "ef-form-grid" }, { 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: EfChangePasswordComponent, isStandalone: true, selector: "ef-change-password", inputs: { requireCurrent: { classPropertyName: "requireCurrent", publicName: "requireCurrent", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, ngImport: i0, template: "<ef-form-grid>\n  @if (requireCurrent()) {\n    <ef-password\n      class=\"col-12\"\n      name=\"currentPassword\"\n      labelKey=\"ef_change_password_current\"\n      autocomplete=\"current-password\"\n      required\n      (valueChangeEvent)=\"currentPassword.set($event)\"\n    />\n  }\n  <ef-password\n    class=\"col-6\"\n    name=\"newPassword\"\n    labelKey=\"ef_change_password_new\"\n    autocomplete=\"new-password\"\n    required\n    (valueChangeEvent)=\"newPassword.set($event)\"\n  />\n  <ef-password\n    class=\"col-6\"\n    name=\"newPasswordConfirmation\"\n    labelKey=\"ef_change_password_confirm\"\n    autocomplete=\"new-password\"\n    required\n    (valueChangeEvent)=\"confirmation.set($event)\"\n  />\n</ef-form-grid>\n\n@if (validationKeys().length || errors().length) {\n  <ul class=\"ef-change-password__errors\">\n    @for (key of validationKeys(); track $index) {\n      <li>{{ key | translate }}</li>\n    }\n    <!-- Server messages arrive already translated (Identity returns prose,\n         not keys), so they are printed verbatim. -->\n    @for (error of errors(); track $index) {\n      <li>{{ error }}</li>\n    }\n  </ul>\n}\n", styles: [":host{display:grid;gap:var(--s-2, 8px);min-width:0}.ef-change-password__errors{display:grid;gap:4px;margin:0;padding:0;list-style:none;min-width:0;font-size:12px;line-height:1.4;color:var(--st-cancelled-fg, #b42318)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfPasswordComponent, selector: "ef-password", inputs: ["size", "fluid", "inline", "toggleMask", "feedback", "autocomplete", "variant", "autofocus"], outputs: ["valueChangeEvent"] }, { kind: "component", type: EfFormGridComponent, selector: "ef-form-grid" }, { 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: EfChangePasswordComponent, decorators: [{
             type: Component,
@@ -12579,7 +13188,7 @@ class EfRadioComponent extends AbstractEfFormControl {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfRadioComponent, isStandalone: true, selector: "ef-radio", inputs: { options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", inline: ["inline", "inline", booleanAttribute], value: "value" }, outputs: { selectionChangeEvent: "selectionChangeEvent" }, host: { properties: { "class.ef-stacked": "this.isStacked" } }, usesInheritance: true, ngImport: i0, template: "@if (hasLabel) {\n  <span class=\"ef-radio-group-label\" [id]=\"labelId\">\n    <ef-label\n      [labelKey]=\"labelKey()\"\n      [label]=\"label()\"\n      [required]=\"required()\"\n      [styleClass]=\"inline ? 'form-label-left' : 'form-label'\"\n    />\n  </span>\n}\n<div\n  class=\"ef-radio-options\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"hasLabel ? labelId : null\"\n  [attr.aria-label]=\"hasLabel ? null : effectiveAriaLabel\"\n  [attr.aria-required]=\"required() ? 'true' : null\"\n  [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n  [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n>\n  @for (opt of options; track $index; let i = $index) {\n    <div class=\"ef-radio-option\">\n      <p-radiobutton\n        [inputId]=\"optionId(i)\"\n        [name]=\"groupName\"\n        [value]=\"optionValueOf(opt)\"\n        [ngModel]=\"value\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        (ngModelChange)=\"handleChange($event)\"\n        [disabled]=\"isOptionDisabled(opt)\"\n      />\n      <label class=\"ef-radio-option-label\" [for]=\"optionId(i)\" [class.is-disabled]=\"isOptionDisabled(opt)\">\n        {{ optionLabelOf(opt) }}\n      </label>\n    </div>\n  }\n</div>\n@if (showRequired || serverErrors) {\n  <div class=\"ef-radio-errors\" [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;min-width:0}.ef-radio-options{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;min-width:0}.ef-radio-option{display:inline-flex;align-items:center;gap:.5rem;min-width:0}.ef-radio-option-label{font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none}.ef-radio-option-label.is-disabled{color:var(--text-mute);cursor:not-allowed}.ef-radio-errors{flex-basis:100%}:host(.ef-stacked){display:block}:host(.ef-stacked)>.ef-radio-group-label{display:block}:host(.ef-stacked)>.ef-radio-options{min-height:var(--hit-field)}\n"], dependencies: [{ kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i1$g.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }, { 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: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfRadioComponent, isStandalone: true, selector: "ef-radio", inputs: { options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", inline: ["inline", "inline", booleanAttribute], value: "value" }, outputs: { selectionChangeEvent: "selectionChangeEvent" }, host: { properties: { "class.ef-stacked": "this.isStacked" } }, usesInheritance: true, ngImport: i0, template: "@if (hasLabel) {\n  <span class=\"ef-radio-group-label\" [id]=\"labelId\">\n    <ef-label\n      [labelKey]=\"labelKey()\"\n      [label]=\"label()\"\n      [required]=\"required()\"\n      [styleClass]=\"inline ? 'form-label-left' : 'form-label'\"\n    />\n  </span>\n}\n<div\n  class=\"ef-radio-options\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"hasLabel ? labelId : null\"\n  [attr.aria-label]=\"hasLabel ? null : effectiveAriaLabel\"\n  [attr.aria-required]=\"required() ? 'true' : null\"\n  [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n  [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n>\n  @for (opt of options; track $index; let i = $index) {\n    <div class=\"ef-radio-option\">\n      <p-radiobutton\n        [inputId]=\"optionId(i)\"\n        [name]=\"groupName\"\n        [value]=\"optionValueOf(opt)\"\n        [ngModel]=\"value\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        (ngModelChange)=\"handleChange($event)\"\n        [disabled]=\"isOptionDisabled(opt)\"\n      />\n      <label class=\"ef-radio-option-label\" [for]=\"optionId(i)\" [class.is-disabled]=\"isOptionDisabled(opt)\">\n        {{ optionLabelOf(opt) }}\n      </label>\n    </div>\n  }\n</div>\n@if (showRequired || serverErrors) {\n  <div class=\"ef-radio-errors\" [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;min-width:0}.ef-radio-options{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;min-width:0}.ef-radio-option{display:inline-flex;align-items:center;gap:.5rem;min-width:0}.ef-radio-option-label{font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none}.ef-radio-option-label.is-disabled{color:var(--text-mute);cursor:not-allowed}.ef-radio-errors{flex-basis:100%}:host(.ef-stacked){display:block}:host(.ef-stacked)>.ef-radio-group-label{display:block}:host(.ef-stacked)>.ef-radio-options{min-height:var(--hit-field)}\n"], dependencies: [{ kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i1$g.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }, { 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: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "labelParams", "for", "styleClass", "required"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfRadioComponent, decorators: [{
             type: Component,
@@ -12649,6 +13258,7 @@ class EfTextareaComponent extends AbstractEfFormControl {
         /* noop */
     };
     ngControl = inject(NgControl, { self: true, optional: true });
+    hostRef = inject(ElementRef);
     constructor() {
         super();
         if (this.ngControl) {
@@ -12685,15 +13295,52 @@ class EfTextareaComponent extends AbstractEfFormControl {
         this.onChange(value);
         this.valueChangeEvent.emit(value);
     }
+    /** Set once the field itself has had focus; see {@link insertAtSelection}. */
+    wasFocused = false;
+    markFocused(event) {
+        // Only the native field counts: focus on the clear button says nothing
+        // about where the user left the caret.
+        if (event.target === this.nativeField())
+            this.wasFocused = true;
+    }
+    /**
+     * Inserts `text` at the caret (replacing a selection), or at the end when
+     * the field was never focused, then puts the caret after it. Emits the
+     * change once, exactly as typing would. Does nothing when read-only or
+     * disabled, and refuses the whole insert when the result would pass
+     * `maxlength` (a cut placeholder token is worse than none).
+     *
+     * The value is written programmatically, so the browser's undo history for
+     * the field is reset and no DOM `input` event fires; the form control
+     * (`onChange`) and `valueChangeEvent` are the contract.
+     */
+    insertAtCursor(text) {
+        if (this.readonly() || this.isDisabled())
+            return;
+        const field = this.nativeField();
+        if (!field)
+            return;
+        const { value, caret } = insertAtSelection(field, text, this.wasFocused);
+        if (this.maxlength != null && value.length > this.maxlength)
+            return;
+        // Write the DOM first so the later [value] binding finds it unchanged
+        // and leaves the caret where we put it.
+        field.value = value;
+        this.handleInput(value);
+        placeCaret(field, caret);
+    }
+    nativeField() {
+        return this.hostRef.nativeElement.querySelector('textarea');
+    }
     handleBlur() {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfTextareaComponent, isStandalone: true, selector: "ef-textarea", inputs: { rows: "rows", maxlength: "maxlength", autofocus: ["autofocus", "autofocus", booleanAttribute], mono: ["mono", "mono", booleanAttribute], value: "value" }, outputs: { valueChangeEvent: "valueChangeEvent" }, usesInheritance: true, ngImport: i0, template: "@if (labelKey() || label()) {\n    <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  <div class=\"ef-textarea-wrap\">\n    <textarea\n        class=\"ef-textarea\"\n        [class.has-clear]=\"canClear\"\n        [class.ef-textarea--mono]=\"mono\"\n        [id]=\"effectiveId\"\n        [attr.name]=\"name() || null\"\n        [rows]=\"rows\"\n        [value]=\"value\"\n        [attr.placeholder]=\"effectivePlaceholder || null\"\n        [attr.maxlength]=\"maxlength ?? null\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"isDisabled()\"\n        [class.is-invalid]=\"isInvalid\"\n        [attr.aria-label]=\"effectiveAriaLabel\"\n        [attr.aria-required]=\"required() ? 'true' : null\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n        [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n        (input)=\"handleInput($any($event.target).value)\"\n        (blur)=\"handleBlur()\"\n    ></textarea>\n    @if (canClear) {\n      <ef-clear-button\n        class=\"ef-textarea-clear\"\n        [ariaLabel]=\"'action.clear' | translate\"\n        (clear)=\"clearValue()\"\n      />\n    }\n  </div>\n    @if (effectiveHint) {\n      <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n    }\n    @if (showRequired || serverErrors) {\n        <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n            @if (showRequired) {\n                <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n            }\n            @if (serverErrors; as errors) {\n                @for (error of errors; track error) {\n                    <small class=\"text-danger block\">{{ error }}</small>\n                }\n            }\n        </div>\n    }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}.ef-textarea.ef-textarea--mono{font-family:var(--font-mono);font-size:12.5px;line-height:1.55}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "component", type: EfClearButtonComponent, selector: "ef-clear-button", inputs: ["ariaLabel", "disabled"], outputs: ["clear"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfTextareaComponent, isStandalone: true, selector: "ef-textarea", inputs: { rows: "rows", maxlength: "maxlength", autofocus: ["autofocus", "autofocus", booleanAttribute], mono: ["mono", "mono", booleanAttribute], value: "value" }, outputs: { valueChangeEvent: "valueChangeEvent" }, host: { listeners: { "focusin": "markFocused($event)" } }, usesInheritance: true, ngImport: i0, template: "@if (labelKey() || label()) {\n    <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  <div class=\"ef-textarea-wrap\">\n    <textarea\n        class=\"ef-textarea\"\n        [class.has-clear]=\"canClear\"\n        [class.ef-textarea--mono]=\"mono\"\n        [id]=\"effectiveId\"\n        [attr.name]=\"name() || null\"\n        [rows]=\"rows\"\n        [value]=\"value\"\n        [attr.placeholder]=\"effectivePlaceholder || null\"\n        [attr.maxlength]=\"maxlength ?? null\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"isDisabled()\"\n        [class.is-invalid]=\"isInvalid\"\n        [attr.aria-label]=\"effectiveAriaLabel\"\n        [attr.aria-required]=\"required() ? 'true' : null\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n        [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n        (input)=\"handleInput($any($event.target).value)\"\n        (blur)=\"handleBlur()\"\n    ></textarea>\n    @if (canClear) {\n      <ef-clear-button\n        class=\"ef-textarea-clear\"\n        [ariaLabel]=\"'action.clear' | translate\"\n        (clear)=\"clearValue()\"\n      />\n    }\n  </div>\n    @if (effectiveHint) {\n      <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n    }\n    @if (showRequired || serverErrors) {\n        <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n            @if (showRequired) {\n                <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n            }\n            @if (serverErrors; as errors) {\n                @for (error of errors; track error) {\n                    <small class=\"text-danger block\">{{ error }}</small>\n                }\n            }\n        </div>\n    }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}.ef-textarea.ef-textarea--mono{font-family:var(--font-mono);font-size:12.5px;line-height:1.55}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "labelParams", "for", "styleClass", "required"] }, { kind: "component", type: EfClearButtonComponent, selector: "ef-clear-button", inputs: ["ariaLabel", "disabled"], outputs: ["clear"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-textarea', standalone: true, imports: [FormsModule, TranslateModule, EfLabelComponent, EfClearButtonComponent], template: "@if (labelKey() || label()) {\n    <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  <div class=\"ef-textarea-wrap\">\n    <textarea\n        class=\"ef-textarea\"\n        [class.has-clear]=\"canClear\"\n        [class.ef-textarea--mono]=\"mono\"\n        [id]=\"effectiveId\"\n        [attr.name]=\"name() || null\"\n        [rows]=\"rows\"\n        [value]=\"value\"\n        [attr.placeholder]=\"effectivePlaceholder || null\"\n        [attr.maxlength]=\"maxlength ?? null\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"isDisabled()\"\n        [class.is-invalid]=\"isInvalid\"\n        [attr.aria-label]=\"effectiveAriaLabel\"\n        [attr.aria-required]=\"required() ? 'true' : null\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n        [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n        (input)=\"handleInput($any($event.target).value)\"\n        (blur)=\"handleBlur()\"\n    ></textarea>\n    @if (canClear) {\n      <ef-clear-button\n        class=\"ef-textarea-clear\"\n        [ariaLabel]=\"'action.clear' | translate\"\n        (clear)=\"clearValue()\"\n      />\n    }\n  </div>\n    @if (effectiveHint) {\n      <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n    }\n    @if (showRequired || serverErrors) {\n        <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n            @if (showRequired) {\n                <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n            }\n            @if (serverErrors; as errors) {\n                @for (error of errors; track error) {\n                    <small class=\"text-danger block\">{{ error }}</small>\n                }\n            }\n        </div>\n    }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}.ef-textarea.ef-textarea--mono{font-family:var(--font-mono);font-size:12.5px;line-height:1.55}\n"] }]
+            args: [{ selector: 'ef-textarea', standalone: true, imports: [FormsModule, TranslateModule, EfLabelComponent, EfClearButtonComponent], template: "@if (labelKey() || label()) {\n    <ef-label [labelKey]=\"labelKey()\" [labelParams]=\"labelParams()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-field-control\">\n  <div class=\"ef-textarea-wrap\">\n    <textarea\n        class=\"ef-textarea\"\n        [class.has-clear]=\"canClear\"\n        [class.ef-textarea--mono]=\"mono\"\n        [id]=\"effectiveId\"\n        [attr.name]=\"name() || null\"\n        [rows]=\"rows\"\n        [value]=\"value\"\n        [attr.placeholder]=\"effectivePlaceholder || null\"\n        [attr.maxlength]=\"maxlength ?? null\"\n        [readonly]=\"readonly()\"\n        [disabled]=\"isDisabled()\"\n        [class.is-invalid]=\"isInvalid\"\n        [attr.aria-label]=\"effectiveAriaLabel\"\n        [attr.aria-required]=\"required() ? 'true' : null\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n        [attr.aria-describedby]=\"describedBy(showRequired || !!serverErrors)\"\n        (input)=\"handleInput($any($event.target).value)\"\n        (blur)=\"handleBlur()\"\n    ></textarea>\n    @if (canClear) {\n      <ef-clear-button\n        class=\"ef-textarea-clear\"\n        [ariaLabel]=\"'action.clear' | translate\"\n        (clear)=\"clearValue()\"\n      />\n    }\n  </div>\n    @if (effectiveHint) {\n      <small class=\"ef-field-hint\" [id]=\"hintId\">{{ effectiveHint }}</small>\n    }\n    @if (showRequired || serverErrors) {\n        <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n            @if (showRequired) {\n                <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n            }\n            @if (serverErrors; as errors) {\n                @for (error of errors; track error) {\n                    <small class=\"text-danger block\">{{ error }}</small>\n                }\n            }\n        </div>\n    }\n</div>\n", styles: [":host([dir]){direction:inherit}:host([dir=rtl]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:rtl}:host([dir=ltr]) .ef-field-control>:not([role=alert]):not(.ef-field-hint){direction:ltr}:host([dir=auto]) .ef-field-control input,:host([dir=auto]) .ef-field-control textarea{unicode-bidi:plaintext}.ef-textarea.ef-textarea--mono{font-family:var(--font-mono);font-size:12.5px;line-height:1.55}\n"] }]
         }], ctorParameters: () => [], propDecorators: { rows: [{
                 type: Input
             }], maxlength: [{
@@ -12708,8 +13355,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 type: Output
             }], value: [{
                 type: Input
+            }], markFocused: [{
+                type: HostListener,
+                args: ['focusin', ['$event']]
             }] } });
 
+let nextId = 0;
+const EF_SEO_DEFAULT_LOCALES = [
+    { code: 'fr', labelKey: 'ef_seo_fields_locale_fr', dir: 'auto' },
+    { code: 'ar', labelKey: 'ef_seo_fields_locale_ar', dir: 'rtl' },
+    { code: 'en', labelKey: 'ef_seo_fields_locale_en', dir: 'ltr' },
+];
+/**
+ * SEO title and description per language, each with a counter against what a
+ * search engine shows (60 / 160), capped at the server's limits (256 / 512),
+ * and the shared `ef-seo-preview` of the French result with the entity's own
+ * title and description as the fallback the shop uses. Card-less: each screen
+ * wraps it in its own `ef-card`.
+ *
+ * The French controls carry the backend names (`seoTitle`, `seoDescription`)
+ * so `[efServerErrors]` links their errors; the others (`seoTitleAr`, ...) are
+ * dictionary entries whose errors are toasted (ADR-010).
+ *
+ * ```html
+ * <ef-seo-fields [seoTitle]="p.seoTitle" ... [previewUrl]="url()" (seoChange)="patch($event)" />
+ * ```
+ */
+class EfSeoFieldsComponent {
+    seoTitle = input('', ...(ngDevMode ? [{ debugName: "seoTitle" }] : /* istanbul ignore next */ []));
+    seoDescription = input('', ...(ngDevMode ? [{ debugName: "seoDescription" }] : /* istanbul ignore next */ []));
+    seoTitleTranslations = input({}, ...(ngDevMode ? [{ debugName: "seoTitleTranslations" }] : /* istanbul ignore next */ []));
+    seoDescriptionTranslations = input({}, ...(ngDevMode ? [{ debugName: "seoDescriptionTranslations" }] : /* istanbul ignore next */ []));
+    /** The entity's own texts, which the shop uses when SEO is empty. */
+    fallbackTitle = input('', ...(ngDevMode ? [{ debugName: "fallbackTitle" }] : /* istanbul ignore next */ []));
+    fallbackDescription = input('', ...(ngDevMode ? [{ debugName: "fallbackDescription" }] : /* istanbul ignore next */ []));
+    /** The page address shown in the preview, computed by the app. */
+    previewUrl = input('', ...(ngDevMode ? [{ debugName: "previewUrl" }] : /* istanbul ignore next */ []));
+    titleMax = input(256, ...(ngDevMode ? [{ debugName: "titleMax" }] : /* istanbul ignore next */ []));
+    descriptionMax = input(512, ...(ngDevMode ? [{ debugName: "descriptionMax" }] : /* istanbul ignore next */ []));
+    titleAdvised = input(60, ...(ngDevMode ? [{ debugName: "titleAdvised" }] : /* istanbul ignore next */ []));
+    descriptionAdvised = input(160, ...(ngDevMode ? [{ debugName: "descriptionAdvised" }] : /* istanbul ignore next */ []));
+    locales = input(EF_SEO_DEFAULT_LOCALES, ...(ngDevMode ? [{ debugName: "locales" }] : /* istanbul ignore next */ []));
+    seoChange = output();
+    text(locale, field) {
+        if (locale === 'fr')
+            return (field === 'title' ? this.seoTitle() : this.seoDescription()) ?? '';
+        const dict = field === 'title' ? this.seoTitleTranslations() : this.seoDescriptionTranslations();
+        return dict?.[locale] ?? '';
+    }
+    /** Id of a counter, which the field it counts points at with `aria-describedby`. */
+    counterId(locale, field) {
+        return `${this.uid}-${this.name(locale, field)}-counter`;
+    }
+    uid = `ef-seo-fields-${nextId++}`;
+    /** French matches the backend property; the others are unique for the label link. */
+    name(locale, field) {
+        const base = field === 'title' ? 'seoTitle' : 'seoDescription';
+        return locale === 'fr' ? base : `${base}${locale.charAt(0).toUpperCase()}${locale.slice(1)}`;
+    }
+    setText(locale, field, value) {
+        if (locale === 'fr') {
+            this.seoChange.emit(field === 'title' ? { seoTitle: value } : { seoDescription: value });
+            return;
+        }
+        const key = field === 'title' ? 'seoTitleTranslations' : 'seoDescriptionTranslations';
+        const next = { ...((field === 'title' ? this.seoTitleTranslations() : this.seoDescriptionTranslations()) ?? {}) };
+        // A cleared field removes the entry, so the shop falls back instead of showing nothing.
+        if (value)
+            next[locale] = value;
+        else
+            delete next[locale];
+        this.seoChange.emit({ [key]: next });
+    }
+    previewTitle = computed(() => (this.seoTitle() || this.fallbackTitle() || '').trim(), ...(ngDevMode ? [{ debugName: "previewTitle" }] : /* istanbul ignore next */ []));
+    previewDescription = computed(() => (this.seoDescription() || this.fallbackDescription() || '').trim(), ...(ngDevMode ? [{ debugName: "previewDescription" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfSeoFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfSeoFieldsComponent, isStandalone: true, selector: "ef-seo-fields", inputs: { seoTitle: { classPropertyName: "seoTitle", publicName: "seoTitle", isSignal: true, isRequired: false, transformFunction: null }, seoDescription: { classPropertyName: "seoDescription", publicName: "seoDescription", isSignal: true, isRequired: false, transformFunction: null }, seoTitleTranslations: { classPropertyName: "seoTitleTranslations", publicName: "seoTitleTranslations", isSignal: true, isRequired: false, transformFunction: null }, seoDescriptionTranslations: { classPropertyName: "seoDescriptionTranslations", publicName: "seoDescriptionTranslations", isSignal: true, isRequired: false, transformFunction: null }, fallbackTitle: { classPropertyName: "fallbackTitle", publicName: "fallbackTitle", isSignal: true, isRequired: false, transformFunction: null }, fallbackDescription: { classPropertyName: "fallbackDescription", publicName: "fallbackDescription", isSignal: true, isRequired: false, transformFunction: null }, previewUrl: { classPropertyName: "previewUrl", publicName: "previewUrl", isSignal: true, isRequired: false, transformFunction: null }, titleMax: { classPropertyName: "titleMax", publicName: "titleMax", isSignal: true, isRequired: false, transformFunction: null }, descriptionMax: { classPropertyName: "descriptionMax", publicName: "descriptionMax", isSignal: true, isRequired: false, transformFunction: null }, titleAdvised: { classPropertyName: "titleAdvised", publicName: "titleAdvised", isSignal: true, isRequired: false, transformFunction: null }, descriptionAdvised: { classPropertyName: "descriptionAdvised", publicName: "descriptionAdvised", isSignal: true, isRequired: false, transformFunction: null }, locales: { classPropertyName: "locales", publicName: "locales", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { seoChange: "seoChange" }, ngImport: i0, template: "<div class=\"seo-body\">\n    <p class=\"seo-note text-mute\">{{ 'ef_seo_fields_fallback_hint' | translate }}</p>\n\n    @for (locale of locales(); track locale.code) {\n        <ef-fieldset variant=\"plain\" [legendKey]=\"locale.labelKey\" [attr.lang]=\"locale.code\">\n            <ef-form-grid>\n                <ef-input-text\n                    class=\"col-12\"\n                    variant=\"comptoir\"\n                    [dir]=\"locale.dir\"\n                    [name]=\"name(locale.code, 'title')\"\n                    [describedByExtra]=\"counterId(locale.code, 'title')\"\n                    labelKey=\"ef_seo_fields_title_label\"\n                    [maxlength]=\"titleMax()\"\n                    [value]=\"text(locale.code, 'title')\"\n                    (valueChangeEvent)=\"setText(locale.code, 'title', $event)\"\n                />\n                <span\n                    class=\"col-12 seo-counter\"\n                    [id]=\"counterId(locale.code, 'title')\"\n                    [attr.data-counter]=\"locale.code + '-title'\"\n                    [class.is-over]=\"text(locale.code, 'title').length > titleAdvised()\"\n                >\n                    <bdi dir=\"ltr\">{{ text(locale.code, 'title').length }} / {{ titleAdvised() }}</bdi>\n                    <span class=\"seo-counter__sr\">\n                        {{ 'ef_seo_fields_counter_hint' | translate: { max: titleAdvised() } }}\n                        @if (text(locale.code, 'title').length > titleAdvised()) {\n                            {{ 'ef_seo_fields_over_hint' | translate: { max: titleAdvised() } }}\n                        }\n                    </span>\n                </span>\n\n                <ef-textarea\n                    class=\"col-12\"\n                    [dir]=\"locale.dir\"\n                    [name]=\"name(locale.code, 'description')\"\n                    [describedByExtra]=\"counterId(locale.code, 'description')\"\n                    labelKey=\"ef_seo_fields_description_label\"\n                    [rows]=\"3\"\n                    [maxlength]=\"descriptionMax()\"\n                    [value]=\"text(locale.code, 'description')\"\n                    (valueChangeEvent)=\"setText(locale.code, 'description', $event)\"\n                />\n                <span\n                    class=\"col-12 seo-counter\"\n                    [id]=\"counterId(locale.code, 'description')\"\n                    [attr.data-counter]=\"locale.code + '-description'\"\n                    [class.is-over]=\"text(locale.code, 'description').length > descriptionAdvised()\"\n                >\n                    <bdi dir=\"ltr\">{{ text(locale.code, 'description').length }} / {{ descriptionAdvised() }}</bdi>\n                    <span class=\"seo-counter__sr\">\n                        {{ 'ef_seo_fields_counter_hint' | translate: { max: descriptionAdvised() } }}\n                        @if (text(locale.code, 'description').length > descriptionAdvised()) {\n                            {{ 'ef_seo_fields_over_hint' | translate: { max: descriptionAdvised() } }}\n                        }\n                    </span>\n                </span>\n            </ef-form-grid>\n        </ef-fieldset>\n    }\n\n    <ef-seo-preview\n        labelKey=\"ef_seo_fields_preview\"\n        contentLang=\"fr\"\n        [pageTitle]=\"previewTitle()\"\n        [url]=\"previewUrl()\"\n        [description]=\"previewDescription()\"\n    />\n</div>\n", styles: [":host{display:block;min-width:0}.seo-body{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);min-width:0}.seo-note{margin:0;font-size:12px}.seo-counter{margin-top:calc(-1 * var(--s-2));font-size:12px;color:var(--text-mute);text-align:end;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.seo-counter.is-over{color:var(--st-pending-fg);font-weight:600}.seo-counter__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfFieldsetComponent, selector: "ef-fieldset", inputs: ["legend", "legendKey", "variant", "toggleable", "collapsed", "styleClass"] }, { kind: "component", type: EfFormGridComponent, selector: "ef-form-grid" }, { kind: "component", type: EfInputTextComponent, selector: "ef-input-text", inputs: ["size", "type", "maxlength", "fluid", "inline", "autocomplete", "dir", "variant", "prefix", "suffix", "value"], outputs: ["valueChangeEvent"] }, { kind: "component", type: EfTextareaComponent, selector: "ef-textarea", inputs: ["rows", "maxlength", "autofocus", "mono", "value"], outputs: ["valueChangeEvent"] }, { kind: "component", type: EfSeoPreviewComponent, selector: "ef-seo-preview", inputs: ["pageTitle", "url", "description", "labelKey", "titleMaxLength", "descriptionMaxLength", "contentLang"] }, { 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: EfSeoFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ef-seo-fields', standalone: true, imports: [TranslateModule, EfFieldsetComponent, EfFormGridComponent, EfInputTextComponent, EfTextareaComponent, EfSeoPreviewComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"seo-body\">\n    <p class=\"seo-note text-mute\">{{ 'ef_seo_fields_fallback_hint' | translate }}</p>\n\n    @for (locale of locales(); track locale.code) {\n        <ef-fieldset variant=\"plain\" [legendKey]=\"locale.labelKey\" [attr.lang]=\"locale.code\">\n            <ef-form-grid>\n                <ef-input-text\n                    class=\"col-12\"\n                    variant=\"comptoir\"\n                    [dir]=\"locale.dir\"\n                    [name]=\"name(locale.code, 'title')\"\n                    [describedByExtra]=\"counterId(locale.code, 'title')\"\n                    labelKey=\"ef_seo_fields_title_label\"\n                    [maxlength]=\"titleMax()\"\n                    [value]=\"text(locale.code, 'title')\"\n                    (valueChangeEvent)=\"setText(locale.code, 'title', $event)\"\n                />\n                <span\n                    class=\"col-12 seo-counter\"\n                    [id]=\"counterId(locale.code, 'title')\"\n                    [attr.data-counter]=\"locale.code + '-title'\"\n                    [class.is-over]=\"text(locale.code, 'title').length > titleAdvised()\"\n                >\n                    <bdi dir=\"ltr\">{{ text(locale.code, 'title').length }} / {{ titleAdvised() }}</bdi>\n                    <span class=\"seo-counter__sr\">\n                        {{ 'ef_seo_fields_counter_hint' | translate: { max: titleAdvised() } }}\n                        @if (text(locale.code, 'title').length > titleAdvised()) {\n                            {{ 'ef_seo_fields_over_hint' | translate: { max: titleAdvised() } }}\n                        }\n                    </span>\n                </span>\n\n                <ef-textarea\n                    class=\"col-12\"\n                    [dir]=\"locale.dir\"\n                    [name]=\"name(locale.code, 'description')\"\n                    [describedByExtra]=\"counterId(locale.code, 'description')\"\n                    labelKey=\"ef_seo_fields_description_label\"\n                    [rows]=\"3\"\n                    [maxlength]=\"descriptionMax()\"\n                    [value]=\"text(locale.code, 'description')\"\n                    (valueChangeEvent)=\"setText(locale.code, 'description', $event)\"\n                />\n                <span\n                    class=\"col-12 seo-counter\"\n                    [id]=\"counterId(locale.code, 'description')\"\n                    [attr.data-counter]=\"locale.code + '-description'\"\n                    [class.is-over]=\"text(locale.code, 'description').length > descriptionAdvised()\"\n                >\n                    <bdi dir=\"ltr\">{{ text(locale.code, 'description').length }} / {{ descriptionAdvised() }}</bdi>\n                    <span class=\"seo-counter__sr\">\n                        {{ 'ef_seo_fields_counter_hint' | translate: { max: descriptionAdvised() } }}\n                        @if (text(locale.code, 'description').length > descriptionAdvised()) {\n                            {{ 'ef_seo_fields_over_hint' | translate: { max: descriptionAdvised() } }}\n                        }\n                    </span>\n                </span>\n            </ef-form-grid>\n        </ef-fieldset>\n    }\n\n    <ef-seo-preview\n        labelKey=\"ef_seo_fields_preview\"\n        contentLang=\"fr\"\n        [pageTitle]=\"previewTitle()\"\n        [url]=\"previewUrl()\"\n        [description]=\"previewDescription()\"\n    />\n</div>\n", styles: [":host{display:block;min-width:0}.seo-body{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);min-width:0}.seo-note{margin:0;font-size:12px}.seo-counter{margin-top:calc(-1 * var(--s-2));font-size:12px;color:var(--text-mute);text-align:end;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.seo-counter.is-over{color:var(--st-pending-fg);font-weight:600}.seo-counter__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"] }]
+        }], propDecorators: { seoTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "seoTitle", required: false }] }], seoDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "seoDescription", required: false }] }], seoTitleTranslations: [{ type: i0.Input, args: [{ isSignal: true, alias: "seoTitleTranslations", required: false }] }], seoDescriptionTranslations: [{ type: i0.Input, args: [{ isSignal: true, alias: "seoDescriptionTranslations", required: false }] }], fallbackTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackTitle", required: false }] }], fallbackDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackDescription", required: false }] }], previewUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewUrl", required: false }] }], titleMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleMax", required: false }] }], descriptionMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionMax", required: false }] }], titleAdvised: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleAdvised", required: false }] }], descriptionAdvised: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionAdvised", required: false }] }], locales: [{ type: i0.Input, args: [{ isSignal: true, alias: "locales", required: false }] }], seoChange: [{ type: i0.Output, args: ["seoChange"] }] } });
+
 /**
  * A button that opens the native file picker and emits the chosen `File`.
  * It never talks to the network: the app uploads the emitted file through its
@@ -13212,7 +13939,7 @@ class EfThemeConfiguratorComponent {
         this.configService.appState.update((state) => ({ ...state, RTL: value }));
     }
     ngOnInit() {
-        this.onPresetChange(this.configService.appState().preset);
+        this.onPresetChange(this.configService.appState().preset ?? 'Lara');
     }
     surfaces = [
         { name: 'slate', palette: { 0: '#ffffff', 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617' } },
@@ -13369,7 +14096,7 @@ class EfThemeConfiguratorComponent {
                             (click)="updateColors($event, 'primary', primaryColor)"
                             [ngClass]="{ 'active-color': primaryColor.name === selectedPrimaryColor() }"
                             [style]="{
-                                'background-color': primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette['500']
+                                'background-color': primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette?.['500']
                             }"
                         ></button>
                     }
@@ -13386,7 +14113,7 @@ class EfThemeConfiguratorComponent {
                             (click)="updateColors($event, 'surface', surface)"
                             [ngClass]="{ 'active-color': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : configService.appState().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
                             [style]="{
-                                'background-color': surface.name === 'noir' ? 'var(--text-color)' : surface?.palette['500']
+                                'background-color': surface.name === 'noir' ? 'var(--text-color)' : surface.palette?.['500']
                             }"
                         ></button>
                     }
@@ -13444,7 +14171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                             (click)="updateColors($event, 'primary', primaryColor)"
                             [ngClass]="{ 'active-color': primaryColor.name === selectedPrimaryColor() }"
                             [style]="{
-                                'background-color': primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette['500']
+                                'background-color': primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette?.['500']
                             }"
                         ></button>
                     }
@@ -13461,7 +14188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                             (click)="updateColors($event, 'surface', surface)"
                             [ngClass]="{ 'active-color': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : configService.appState().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
                             [style]="{
-                                'background-color': surface.name === 'noir' ? 'var(--text-color)' : surface?.palette['500']
+                                'background-color': surface.name === 'noir' ? 'var(--text-color)' : surface.palette?.['500']
                             }"
                         ></button>
                     }
@@ -13618,5 +14345,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { EF_BADGE_BG_COLORS, EF_BADGE_BG_LIGHT_COLORS, EF_BADGE_BORDER_COLORS, EF_BADGE_DEFAULTS, EF_BADGE_TEXT_COLORS, EF_CHART_PALETTE, EF_DATATABLE_ACTIONS_DEFAULTS, EF_DATATABLE_COLUMN_DEFAULTS, EF_DATATABLE_DEFAULTS, EF_DATA_CARD_MOBILE_LAYOUT, EF_STATUS_COLORS, EF_STATUS_COLOR_ALIASES, EfAboutDialogComponent, EfActivationFilterComponent, EfAppMainComponent, EfAppShellComponent, EfAppShellMobileComponent, EfAppTopComponent, EfBadgeComponent, EfBlockUiComponent, EfBlockableDivComponent, EfBottomSheetComponent, EfBuildStampComponent, EfBulkBarComponent, EfButtonComponent, EfButtonGroupComponent, EfCardComponent, EfChangeHistoryComponent, EfChangePasswordComponent, EfChartComponent, EfCheckboxComponent, EfClearButtonComponent, EfColumnHeaderTemplateDirective, EfColumnTemplateDirective, EfCompactPipe, EfConfirmDialogComponent, EfCurrencyPipe, EfDataCardComponent, EfDatatableActionBarComponent, EfDatatableComponent, EfDatepickerAdvancedComponent, EfDatepickerComponent, EfDetailToolbarComponent, EfDialogComponent, EfEmailMetricsCardComponent, EfEmptyStateComponent, EfFabComponent, EfFieldsetComponent, EfFileUploadComponent, EfFilterDrawerComponent, EfFilterPillComponent, EfFormGridComponent, EfIdentityThumbComponent, EfInputNumberComponent, EfInputTextComponent, EfKpiCardComponent, EfLabelComponent, EfModuleRailComponent, EfModuleSideComponent, EfMultiSelectComponent, EfOrderBuilderComponent, EfOrderSummaryComponent, EfOverflowTooltipDirective, EfPagerComponent, EfPasswordComponent, EfPdfPreviewComponent, EfPillGroupComponent, EfPresetPillComponent, EfPriceDisplayComponent, EfProductCatalogueComponent, EfProductCatalogueFilterComponent, EfProductPickerComponent, EfProductTypeaheadComponent, EfProfileChipComponent, EfProfileMenuComponent, EfPulseComponent, EfQuantitySelectorComponent, EfQuantityStepperComponent, EfRadioComponent, EfRankListComponent, EfReadOnlyDirective, EfRowActionsComponent, EfSearchToolbarComponent, EfSelectButtonComponent, EfSelectComponent, EfSeoPreviewComponent, EfServerErrorsDirective, EfSessionIdleDialogComponent, EfShortcutsDialogComponent, EfSkeletonComponent, EfSmartBarComponent, EfStatsComponent, EfStatusChipComponent, EfTabPanelDirective, EfTabsComponent, EfTextareaComponent, EfThemeConfiguratorComponent, EfThemeToggleComponent, EfTimelineComponent, EfToastRegionComponent, EfToggleSwitchComponent, EfToolbarComponent, EfTooltipDirective, EfTotalsComponent, OrderEntityHelper, OrderLineItemHelper, TruncatePipe, buildChartConfig, getColumnAlignment, mergeColumnDefaults, resolveEfStatusColor };
+export { EF_BADGE_BG_COLORS, EF_BADGE_BG_LIGHT_COLORS, EF_BADGE_BORDER_COLORS, EF_BADGE_DEFAULTS, EF_BADGE_TEXT_COLORS, EF_CHART_PALETTE, EF_DATATABLE_ACTIONS_DEFAULTS, EF_DATATABLE_COLUMN_DEFAULTS, EF_DATATABLE_DEFAULTS, EF_DATA_CARD_MOBILE_LAYOUT, EF_HTML_PREVIEW_DEFAULT_TITLE_KEY, EF_SEO_DEFAULT_LOCALES, EF_STATUS_COLORS, EF_STATUS_COLOR_ALIASES, EfAboutDialogComponent, EfActivationFilterComponent, EfAppMainComponent, EfAppShellComponent, EfAppShellMobileComponent, EfAppTopComponent, EfBadgeComponent, EfBlockUiComponent, EfBlockableDivComponent, EfBottomSheetComponent, EfBuildStampComponent, EfBulkBarComponent, EfButtonComponent, EfButtonGroupComponent, EfCardComponent, EfChangeHistoryComponent, EfChangePasswordComponent, EfChartComponent, EfCheckboxComponent, EfClearButtonComponent, EfColumnHeaderTemplateDirective, EfColumnTemplateDirective, EfCompactPipe, EfConfirmDialogComponent, EfCurrencyPipe, EfDataCardComponent, EfDatatableActionBarComponent, EfDatatableComponent, EfDatepickerAdvancedComponent, EfDatepickerComponent, EfDetailToolbarComponent, EfDialogComponent, EfEmailMetricsCardComponent, EfEmptyStateComponent, EfFabComponent, EfFieldsetComponent, EfFileUploadComponent, EfFilterDrawerComponent, EfFilterPillComponent, EfFormGridComponent, EfHtmlPreviewComponent, EfIdentityThumbComponent, EfInputNumberComponent, EfInputTextComponent, EfKpiCardComponent, EfLabelComponent, EfModuleRailComponent, EfModuleSideComponent, EfMultiSelectComponent, EfOrderBuilderComponent, EfOrderSummaryComponent, EfOverflowTooltipDirective, EfPagerComponent, EfPasswordComponent, EfPdfPreviewComponent, EfPillGroupComponent, EfPresetPillComponent, EfPriceDisplayComponent, EfProductCatalogueComponent, EfProductCatalogueFilterComponent, EfProductPickerComponent, EfProductTypeaheadComponent, EfProfileChipComponent, EfProfileMenuComponent, EfPulseComponent, EfQuantitySelectorComponent, EfQuantityStepperComponent, EfRadioComponent, EfRankListComponent, EfReadOnlyDirective, EfRowActionsComponent, EfSearchToolbarComponent, EfSelectButtonComponent, EfSelectComponent, EfSeoFieldsComponent, EfSeoPreviewComponent, EfServerErrorsDirective, EfSessionIdleDialogComponent, EfShortcutsDialogComponent, EfSkeletonComponent, EfSmartBarComponent, EfStatsComponent, EfStatusChipComponent, EfTabPanelDirective, EfTabsComponent, EfTextareaComponent, EfThemeConfiguratorComponent, EfThemeToggleComponent, EfTimelineComponent, EfToastRegionComponent, EfToggleSwitchComponent, EfToolbarComponent, EfTooltipDirective, EfTotalsComponent, OrderEntityHelper, OrderLineItemHelper, TruncatePipe, buildChartConfig, defaultUnitPrice, getColumnAlignment, mergeColumnDefaults, resolveEfStatusColor };
 //# sourceMappingURL=elasticias-ui.mjs.map