@elasticias/ui 1.0.52 → 1.0.53

package/fesm2022/elasticias-ui.mjs

@@ -6,16 +6,16 @@ import { ButtonModule } from 'primeng/button';
 import * as i1$3 from '@angular/common';
 import { CommonModule, formatDate, CurrencyPipe, DatePipe, DecimalPipe } from '@angular/common';
 import * as i2$1 from '@angular/forms';
-import { NgControl, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgControl, Validators, FormControl, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import * as i1$2 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import * as i2 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
+import { ObjectUtils, ZIndexUtils } from 'primeng/utils';
 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';
@@ -924,6 +924,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             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 }] }], 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 }] }] } });
 
+/**
+ * Past this many options an `ef-select` whose `filter` is left unset shows
+ * a search box. Eight is about what the panel shows without scrolling;
+ * beyond that, finding a name by scrolling is slower than typing it.
+ */
+const EF_SELECT_FILTER_THRESHOLD = 8;
+/** `filter` keeps "not bound" apart from `false`, which `booleanAttribute`
+ *  folds together, so the threshold applies only when the caller is silent. */
+function optionalBoolean(value) {
+    return value === undefined || value === null ? undefined : booleanAttribute(value);
+}
 /**
  * Comptoir select — wraps PrimeNG `p-select` (single) or `p-multiselect`
  * (multi) and skins it against the `.es` / `.es__panel` patterns lifted
@@ -934,10 +945,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * Elasticias API surface (i18n `*Key` inputs, `selectionChangeEvent`,
  * `filterByKeys`, content-projected templates).
  *
- * The `'comptoir'` variant remains as a lite, no-deps escape hatch
- * (native `<select>` styled via `.ef-select-native`); use the default
- * `'primeng'` variant for any screen that needs filter / multi /
- * group / templating.
+ * Both variants render PrimeNG. `'comptoir'` used to be a native
+ * `<select>`, which opened the operating system's own list (a blank,
+ * checked first row on macOS, no search); it now gets the same `.es`
+ * dropdown, sized for dense rows and appended to `body` so a scrolling
+ * card or table cannot clip its panel.
+ *
+ * The search box turns itself on past `EF_SELECT_FILTER_THRESHOLD`
+ * options unless the caller binds `[filter]` either way.
  *
  * ```html
  * <ef-select
@@ -988,7 +1003,10 @@ class EfSelectComponent extends AbstractEfFormControl {
     /* ── Behavior ────────────────────────────────────────────────── */
     /** Multi-selection — internally swaps `<p-select>` for `<p-multiselect>`. */
     multiple = false;
-    filter = false;
+    /** Show the search box in the panel. Unset (the default) turns it on
+     *  when there are more than `EF_SELECT_FILTER_THRESHOLD` options; bind
+     *  `true` or `false` to decide for the screen. */
+    filter = undefined;
     /** Filter the list against these option fields (string or csv).
      *  PrimeNG default: `optionLabel`. */
     filterBy;
@@ -1009,8 +1027,9 @@ class EfSelectComponent extends AbstractEfFormControl {
      * branch and removes the attribute.
      */
     autofocus = false;
-    /* showClear is inherited from AbstractEfFormControl (default true →
-       clearable by default; PrimeNG only renders the ✕ when a value is set). */
+    /* showClear is inherited from AbstractEfFormControl. Here it is an
+       override only: left unbound, the ✕ follows whether the field is
+       optional (see `effectiveShowClear`). */
     editable = false;
     loading = false;
     /** Virtual-scroll for long lists (>100 items). Pair with
@@ -1045,12 +1064,13 @@ class EfSelectComponent extends AbstractEfFormControl {
      *                           to the canonical `--hit-field` (40px, 48px on touch) trigger
      *                           height (`.es.p-select { min-height: --hit-field }`),
      *                           so it aligns with inputs/buttons in a row.
-     * - `'comptoir'`           — lite native `<select class="ef-select-native">`.
-     *                           No filter / panel / multi / templates; use it for
-     *                           inline / dense contexts that want the plain native
-     *                           control (e.g. table-row editors).
-     * The `.es` dropdown is the default per the design system; opt into
-     * `comptoir` only when a native control is specifically wanted. See ADR-009.
+     * - `'comptoir'`:          the same `p-select` / `p-multiselect`, for dense
+     *                           rows and table-row editors: no 200px minimum width,
+     *                           so it shrinks with its cell, and the panel goes to
+     *                           `body` unless `appendTo` says otherwise. It no
+     *                           longer renders a native `<select>`.
+     * Both share the `--hit-field` height (40px, 48px on a coarse pointer), so a
+     * select lines up with comptoir inputs and buttons in a row. See ADR-009.
      */
     variant = 'primeng';
     get isInline() { return this.inline; }
@@ -1076,6 +1096,10 @@ class EfSelectComponent extends AbstractEfFormControl {
     filteredOptions = [];
     onChange = () => { };
     onTouched = () => { };
+    /** Set once the host binds `[showClear]`, so its value wins over the
+     *  required rule. The inherited signal input cannot tell "bound" from its
+     *  default, but a bound signal input does show up in `ngOnChanges`. */
+    showClearBound = false;
     /** Resolved lazily in ngOnInit to avoid circular DI with NG_VALUE_ACCESSOR */
     ngControl = null;
     injector = inject(Injector);
@@ -1083,6 +1107,69 @@ class EfSelectComponent extends AbstractEfFormControl {
         this.ngControl = this.injector.get(NgControl, null);
         this.applyFilters();
     }
+    /** Whether the panel shows its search box: the bound `filter`, or past
+     *  the threshold when the caller left it unset. */
+    get effectiveFilter() {
+        return this.filter ?? (this.filteredOptions?.length ?? 0) > EF_SELECT_FILTER_THRESHOLD;
+    }
+    /**
+     * Whether the clear ✕ is offered. A bound `[showClear]` decides. Otherwise
+     * only an optional select gets one: on a required select the ✕ would just
+     * lead the user into the "required" error, since clearing is never a valid
+     * answer there.
+     */
+    get effectiveShowClear() {
+        return this.showClearBound ? this.showClear() : !this.isRequiredField;
+    }
+    /**
+     * Required by the `[required]` input or by the bound control: a reactive
+     * `Validators.required`, or any validator (template-driven `required`,
+     * a composed list) that rejects an empty value as required.
+     */
+    get isRequiredField() {
+        if (this.required())
+            return true;
+        const ctrl = this.ngControl?.control;
+        if (!ctrl)
+            return false;
+        if (ctrl.hasValidator(Validators.required))
+            return true;
+        if (!ctrl.validator)
+            return false;
+        try {
+            return !!ctrl.validator(new FormControl(this.multiple ? [] : null))?.['required'];
+        }
+        catch {
+            return false;
+        }
+    }
+    /**
+     * Whether the current value is one of the options, compared the way
+     * PrimeNG compares (`optionValue`, else the whole option or its
+     * `dataKey`). An option whose value is null or '' counts: "Aucune" with a
+     * null id is a real choice and must read as a value, not as the
+     * placeholder.
+     */
+    get hasSelectedOption() {
+        if (this.multiple)
+            return false;
+        const value = this.value ?? null;
+        const key = this.optionValue ? undefined : this.dataKey;
+        return this.flatOptions().some((option) => option != null && ObjectUtils.equals(value, this.optionValueOf(option), key));
+    }
+    /**
+     * The placeholder handed to PrimeNG. Empty while an option is selected:
+     * PrimeNG greys the trigger whenever its label equals the placeholder, so
+     * a selected "Aucune" beside a placeholder "Aucune" rendered as unset.
+     */
+    get triggerPlaceholder() {
+        return this.hasSelectedOption ? '' : this.placeholderText;
+    }
+    /** The overlay target. A comptoir select lives in cards and table rows
+     *  that scroll, which would clip a panel attached in place. */
+    get effectiveAppendTo() {
+        return this.appendTo ?? (this.variant === 'comptoir' ? 'body' : undefined);
+    }
     /* effectiveId / effectivePlaceholder / effectiveAriaLabel /
        errorsId all inherited from AbstractEfFormControl. */
     /**
@@ -1134,7 +1221,12 @@ class EfSelectComponent extends AbstractEfFormControl {
      *  `_patterns.scss` always finds a hook, regardless of what the
      *  consumer passes via `styleClass`. */
     get effectiveStyleClass() {
-        return ['es', this.size === 'small' ? 'es--sm' : null, this.styleClass]
+        return [
+            'es',
+            this.size === 'small' ? 'es--sm' : null,
+            this.variant === 'comptoir' ? 'es--comptoir' : null,
+            this.styleClass,
+        ]
             .filter(Boolean).join(' ');
     }
     get effectivePanelStyleClass() {
@@ -1154,6 +1246,9 @@ class EfSelectComponent extends AbstractEfFormControl {
         return !!(ctrl?.invalid && (ctrl?.touched || ctrl?.dirty));
     }
     ngOnChanges(changes) {
+        if (changes['showClear']) {
+            this.showClearBound = true;
+        }
         if (changes['options'] || changes['filterByKeys']) {
             this.applyFilters();
         }
@@ -1193,26 +1288,14 @@ class EfSelectComponent extends AbstractEfFormControl {
         this.panelHideEvent.emit();
         this.onTouched();
     }
-    /** Comptoir variant — native `<select>` change handler. The empty
-     *  string from the placeholder option becomes `null`; otherwise we
-     *  resolve the value through `optionValue` if provided. */
-    handleNativeSelectChange(rawValue) {
-        if (rawValue === '' || rawValue == null) {
-            this.handleClear();
-            return;
-        }
-        let resolved = rawValue;
-        if (this.optionValue) {
-            // Map the string back to its option's value (which may be a
-            // number, object key, etc. — preserves the original type).
-            const match = this.filteredOptions.find((opt) => String(opt[this.optionValue]) === rawValue);
-            if (match)
-                resolved = match[this.optionValue];
-        }
-        this.value = resolved;
-        this.onChange(resolved);
-        this.onTouched();
-        this.selectionChangeEvent.emit(resolved);
+    optionValueOf(option) {
+        return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option;
+    }
+    flatOptions() {
+        const options = this.filteredOptions ?? [];
+        if (!this.group)
+            return options;
+        return options.flatMap((g) => ObjectUtils.resolveFieldData(g, this.optionGroupChildren) ?? []);
     }
     applyFilters() {
         if (this.options && this.filterByKeys && typeof this.filterByKeys === 'object') {
@@ -1223,11 +1306,11 @@ class EfSelectComponent extends AbstractEfFormControl {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfSelectComponent, isStandalone: true, selector: "ef-select", inputs: { options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", dataKey: "dataKey", group: ["group", "group", booleanAttribute], optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", size: "size", fluid: ["fluid", "fluid", booleanAttribute], inline: ["inline", "inline", booleanAttribute], appendTo: "appendTo", multiple: ["multiple", "multiple", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterBy: "filterBy", filterPlaceholder: "filterPlaceholder", filterPlaceholderKey: "filterPlaceholderKey", autofocusFilter: ["autofocusFilter", "autofocusFilter", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], editable: ["editable", "editable", booleanAttribute], loading: ["loading", "loading", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: "virtualScrollItemSize", scrollHeight: "scrollHeight", multiDisplay: "multiDisplay", showToggleAll: ["showToggleAll", "showToggleAll", booleanAttribute], emptyMessage: "emptyMessage", emptyMessageKey: "emptyMessageKey", emptyFilterMessage: "emptyFilterMessage", emptyFilterMessageKey: "emptyFilterMessageKey", styleClass: "styleClass", panelStyleClass: "panelStyleClass", filterByKeys: "filterByKeys", variant: "variant", value: "value" }, outputs: { selectionChangeEvent: "selectionChangeEvent", filterChangeEvent: "filterChangeEvent", panelShowEvent: "panelShowEvent", panelHideEvent: "panelHideEvent" }, host: { properties: { "class.ef-inline": "this.isInline", "class.ef-select-host": "this.hostClass" } }, providers: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfSelectComponent, isStandalone: true, selector: "ef-select", inputs: { options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", dataKey: "dataKey", group: ["group", "group", booleanAttribute], optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", size: "size", fluid: ["fluid", "fluid", booleanAttribute], inline: ["inline", "inline", booleanAttribute], appendTo: "appendTo", multiple: ["multiple", "multiple", booleanAttribute], filter: ["filter", "filter", optionalBoolean], filterBy: "filterBy", filterPlaceholder: "filterPlaceholder", filterPlaceholderKey: "filterPlaceholderKey", autofocusFilter: ["autofocusFilter", "autofocusFilter", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], editable: ["editable", "editable", booleanAttribute], loading: ["loading", "loading", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: "virtualScrollItemSize", scrollHeight: "scrollHeight", multiDisplay: "multiDisplay", showToggleAll: ["showToggleAll", "showToggleAll", booleanAttribute], emptyMessage: "emptyMessage", emptyMessageKey: "emptyMessageKey", emptyFilterMessage: "emptyFilterMessage", emptyFilterMessageKey: "emptyFilterMessageKey", styleClass: "styleClass", panelStyleClass: "panelStyleClass", filterByKeys: "filterByKeys", variant: "variant", value: "value" }, outputs: { selectionChangeEvent: "selectionChangeEvent", filterChangeEvent: "filterChangeEvent", panelShowEvent: "panelShowEvent", panelHideEvent: "panelHideEvent" }, host: { properties: { "class.ef-inline": "this.isInline", "class.ef-select-host": "this.hostClass" } }, providers: [{
                 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()\" [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" }] });
+            }], 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 (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]=\"effectiveFilter\"\n      [filterPlaceHolder]=\"effectiveFilterPlaceholder\"\n      [autofocusFilter]=\"autofocusFilter\"\n      [autofocus]=\"autofocus\"\n      [filterBy]=\"filterBy ?? optionLabel\"\n      [showClear]=\"effectiveShowClear\"\n      [disabled]=\"isDisabled()\"\n      [appendTo]=\"effectiveAppendTo\"\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 ?? null\"\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]=\"triggerPlaceholder\"\n      [size]=\"size\"\n      [filter]=\"effectiveFilter\"\n      [filterPlaceholder]=\"effectiveFilterPlaceholder\"\n      [filterBy]=\"filterBy ?? optionLabel\"\n      [autofocusFilter]=\"autofocusFilter\"\n      [autofocus]=\"autofocus\"\n      [showClear]=\"effectiveShowClear\"\n      [editable]=\"editable\"\n      [disabled]=\"isDisabled()\"\n      [appendTo]=\"effectiveAppendTo\"\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.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,
@@ -1242,7 +1325,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()\" [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"] }]
+                        }], 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 (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]=\"effectiveFilter\"\n      [filterPlaceHolder]=\"effectiveFilterPlaceholder\"\n      [autofocusFilter]=\"autofocusFilter\"\n      [autofocus]=\"autofocus\"\n      [filterBy]=\"filterBy ?? optionLabel\"\n      [showClear]=\"effectiveShowClear\"\n      [disabled]=\"isDisabled()\"\n      [appendTo]=\"effectiveAppendTo\"\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 ?? null\"\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]=\"triggerPlaceholder\"\n      [size]=\"size\"\n      [filter]=\"effectiveFilter\"\n      [filterPlaceholder]=\"effectiveFilterPlaceholder\"\n      [filterBy]=\"filterBy ?? optionLabel\"\n      [autofocusFilter]=\"autofocusFilter\"\n      [autofocus]=\"autofocus\"\n      [showClear]=\"effectiveShowClear\"\n      [editable]=\"editable\"\n      [disabled]=\"isDisabled()\"\n      [appendTo]=\"effectiveAppendTo\"\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: [{
@@ -1275,7 +1358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 args: [{ transform: booleanAttribute }]
             }], filter: [{
                 type: Input,
-                args: [{ transform: booleanAttribute }]
+                args: [{ transform: optionalBoolean }]
             }], filterBy: [{
                 type: Input
             }], filterPlaceholder: [{
@@ -4712,6 +4795,7 @@ function resolveEfStatusColor(value) {
  * - `[color]` forces a specific Comptoir tone, ignoring metadata.
  * - `[label]` / `[labelKey]` force the text, ignoring reference data.
  * - `[hideDot]` removes the leading ● glyph.
+ * - `metadata.icon` (or `[icon]`) swaps the ● for a PrimeIcons glyph, e.g. `pi-check`.
  * - `[showCode]` displays the raw code (useful for admin screens).
  */
 class EfStatusChipComponent {
@@ -4726,6 +4810,8 @@ class EfStatusChipComponent {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     /** Translation key — preferred when forcing a label. */
     labelKey = input('', ...(ngDevMode ? [{ debugName: "labelKey" }] : /* istanbul ignore next */ []));
+    /** PrimeIcons class (e.g. `pi-check`) shown instead of the ● dot. Overrides `metadata.icon`. */
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     /** Hide the leading ● dot. */
     hideDot = input(false, { ...(ngDevMode ? { debugName: "hideDot" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Render the raw `code` after the label (admin-screen helper). */
@@ -4751,6 +4837,14 @@ class EfStatusChipComponent {
             resolveEfStatusColor(this.code()) ??
             'neutral');
     }, ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
+    /** Leading icon: the `icon` input, else the entry's `metadata.icon`, else none (the ● dot shows). */
+    resolvedIcon = computed(() => {
+        const raw = this.icon() || this.entry()?.metadata?.icon || '';
+        const trimmed = raw.trim();
+        if (!trimmed)
+            return '';
+        return trimmed.startsWith('pi ') || trimmed.startsWith('pi-') ? trimmed : `pi-${trimmed}`;
+    }, ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
     /** Resolved label — labelKey input → label input → reference label → code. */
     resolvedLabel = computed(() => {
         const entry = this.entry();
@@ -4761,12 +4855,12 @@ class EfStatusChipComponent {
         return this.labelKey() || this.entry()?.labelKey || '';
     }, ...(ngDevMode ? [{ debugName: "resolvedLabelKey" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfStatusChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfStatusChipComponent, isStandalone: true, selector: "ef-status-chip", inputs: { referenceKey: { classPropertyName: "referenceKey", publicName: "referenceKey", isSignal: true, isRequired: false, transformFunction: null }, code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", 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 }, hideDot: { classPropertyName: "hideDot", publicName: "hideDot", isSignal: true, isRequired: false, transformFunction: null }, showCode: { classPropertyName: "showCode", publicName: "showCode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"chip\" [class]=\"'chip chip-' + resolvedColor()\">\n  @if (!hideDot()) {\n    <span aria-hidden=\"true\">\u25CF</span>\n  }\n  @if (resolvedLabelKey()) {\n    {{ resolvedLabelKey() | translate }}\n  } @else {\n    {{ resolvedLabel() }}\n  }\n  @if (showCode()) {\n    <span class=\"text-mute\" style=\"margin-inline-start: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;\">\n      {{ code() }}\n    </span>\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfStatusChipComponent, isStandalone: true, selector: "ef-status-chip", inputs: { referenceKey: { classPropertyName: "referenceKey", publicName: "referenceKey", isSignal: true, isRequired: false, transformFunction: null }, code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, hideDot: { classPropertyName: "hideDot", publicName: "hideDot", isSignal: true, isRequired: false, transformFunction: null }, showCode: { classPropertyName: "showCode", publicName: "showCode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"chip\" [class]=\"'chip chip-' + resolvedColor()\">\n  @if (resolvedIcon(); as ico) {\n    <i class=\"pi\" [ngClass]=\"ico\" aria-hidden=\"true\"></i>\n  } @else if (!hideDot()) {\n    <span aria-hidden=\"true\">\u25CF</span>\n  }\n  @if (resolvedLabelKey()) {\n    {{ resolvedLabelKey() | translate }}\n  } @else {\n    {{ resolvedLabel() }}\n  }\n  @if (showCode()) {\n    <span class=\"text-mute\" style=\"margin-inline-start: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;\">\n      {{ code() }}\n    </span>\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle}\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: EfStatusChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-status-chip', standalone: true, imports: [CommonModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"chip\" [class]=\"'chip chip-' + resolvedColor()\">\n  @if (!hideDot()) {\n    <span aria-hidden=\"true\">\u25CF</span>\n  }\n  @if (resolvedLabelKey()) {\n    {{ resolvedLabelKey() | translate }}\n  } @else {\n    {{ resolvedLabel() }}\n  }\n  @if (showCode()) {\n    <span class=\"text-mute\" style=\"margin-inline-start: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;\">\n      {{ code() }}\n    </span>\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle}\n"] }]
-        }], propDecorators: { referenceKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "referenceKey", required: false }] }], code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], hideDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDot", required: false }] }], showCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCode", required: false }] }] } });
+            args: [{ selector: 'ef-status-chip', standalone: true, imports: [CommonModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"chip\" [class]=\"'chip chip-' + resolvedColor()\">\n  @if (resolvedIcon(); as ico) {\n    <i class=\"pi\" [ngClass]=\"ico\" aria-hidden=\"true\"></i>\n  } @else if (!hideDot()) {\n    <span aria-hidden=\"true\">\u25CF</span>\n  }\n  @if (resolvedLabelKey()) {\n    {{ resolvedLabelKey() | translate }}\n  } @else {\n    {{ resolvedLabel() }}\n  }\n  @if (showCode()) {\n    <span class=\"text-mute\" style=\"margin-inline-start: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;\">\n      {{ code() }}\n    </span>\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle}\n"] }]
+        }], propDecorators: { referenceKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "referenceKey", required: false }] }], code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], hideDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDot", required: false }] }], showCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCode", required: false }] }] } });
 
 /** Row-scoped shortcuts, wired once per instance and gated on `open()` so
  *  they're inert until this row's menu is on screen. The action `id` is a
@@ -6364,7 +6458,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                    @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 });
+    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", "icon", "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,
@@ -9274,13 +9368,13 @@ class EfAppMainComponent {
     /** `data-module` value bound to the host. Null when no module is active. */
     moduleId = computed(() => this.activeModule.activeModuleId(), ...(ngDevMode ? [{ debugName: "moduleId" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfAppMainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfAppMainComponent, isStandalone: true, selector: "ef-app-main", inputs: { stripe: ["stripe", "stripe", booleanAttribute] }, host: { properties: { "attr.data-module": "moduleId()" } }, ngImport: i0, template: "@if (stripe) {\n  <div class=\"ef-app-main__stripe\" aria-hidden=\"true\"></div>\n}\n<div class=\"ef-app-main__content\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;background:var(--paper);color:var(--text)}.ef-app-main__stripe{flex:0 0 auto;height:3px;background:var(--module)}.ef-app-main__content{flex:1 1 auto;overflow:auto;padding:var(--s-5) var(--s-6) var(--s-7);display:grid;grid-template-columns:minmax(0,1fr);align-content:start}@media(max-width:767px){.ef-app-main__content{padding:var(--s-4) var(--s-4) var(--s-7)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfAppMainComponent, isStandalone: true, selector: "ef-app-main", inputs: { stripe: ["stripe", "stripe", booleanAttribute] }, host: { properties: { "attr.data-module": "moduleId()" } }, ngImport: i0, template: "@if (stripe) {\n  <div class=\"ef-app-main__stripe\" aria-hidden=\"true\"></div>\n}\n<div class=\"ef-app-main__content\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;background:var(--paper);color:var(--text)}.ef-app-main__stripe{flex:0 0 auto;height:3px;background:var(--module)}.ef-app-main__content{flex:1 1 auto;position:relative;overflow:auto;padding:var(--s-5) var(--s-6) var(--s-7);display:grid;grid-template-columns:minmax(0,1fr);align-content:start}@media(max-width:767px){.ef-app-main__content{padding:var(--s-4) var(--s-4) var(--s-7)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfAppMainComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ef-app-main', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.data-module]': 'moduleId()',
-                    }, template: "@if (stripe) {\n  <div class=\"ef-app-main__stripe\" aria-hidden=\"true\"></div>\n}\n<div class=\"ef-app-main__content\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;background:var(--paper);color:var(--text)}.ef-app-main__stripe{flex:0 0 auto;height:3px;background:var(--module)}.ef-app-main__content{flex:1 1 auto;overflow:auto;padding:var(--s-5) var(--s-6) var(--s-7);display:grid;grid-template-columns:minmax(0,1fr);align-content:start}@media(max-width:767px){.ef-app-main__content{padding:var(--s-4) var(--s-4) var(--s-7)}}\n"] }]
+                    }, template: "@if (stripe) {\n  <div class=\"ef-app-main__stripe\" aria-hidden=\"true\"></div>\n}\n<div class=\"ef-app-main__content\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;background:var(--paper);color:var(--text)}.ef-app-main__stripe{flex:0 0 auto;height:3px;background:var(--module)}.ef-app-main__content{flex:1 1 auto;position:relative;overflow:auto;padding:var(--s-5) var(--s-6) var(--s-7);display:grid;grid-template-columns:minmax(0,1fr);align-content:start}@media(max-width:767px){.ef-app-main__content{padding:var(--s-4) var(--s-4) var(--s-7)}}\n"] }]
         }], propDecorators: { stripe: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -13430,11 +13524,11 @@ class EfSeoFieldsComponent {
     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 });
+    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{position:relative;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"] }]
+            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{position:relative;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"] }] } });
 
 /**