@elasticias/ui 1.0.54 → 1.0.55

package/fesm2022/elasticias-ui.mjs

@@ -4281,12 +4281,55 @@ const OP_META = {
     note: { cls: 'op-note' },
 };
 const DEFAULT_META = { cls: 'op-default' };
+/** A path whose last (`notes.ar`) or first (`fr.subject`) segment is two
+ *  lower-case letters; a culture only when the bundle names it. */
+const TRAILING_CULTURE = /^(.+)\.([a-z]{2})$/;
+const LEADING_CULTURE = /^([a-z]{2})\.(.+)$/;
+/**
+ * The i18n key segment of a backend entity type: PascalCase to snake_case,
+ * an acronym kept as one word. `Product` gives `product`, `EmailTemplate`
+ * gives `email_template`, `POSSession` gives `pos_session`; a segment
+ * already in snake_case is kept.
+ */
+function auditEntityKeySegment(entityType) {
+    return entityType
+        .replace(/([a-z0-9])([A-Z])/g, '$1_$2')
+        .replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2')
+        .replace(/[\s.-]+/g, '_')
+        .toLowerCase();
+}
 /**
  * Standardized change-history box. Drop it on any detail screen and feed it the
  * record's audit entries (from `GET /api/audit/{entityType}/{id}` via the NSwag
  * `AuditClient`). Renders a vertical timeline inside an {@link EfCardComponent},
  * resolving operation labels through `audit_op_*` i18n keys and field labels
- * through `audit_field_*` (falling back to the raw field key when unmapped).
+ * through `audit_field_*` (falling back to the humanized field path when
+ * unmapped).
+ *
+ * **Field labels.** For a field path (dots become `_` in the key) the box
+ * tries, in order:
+ *
+ * 1. `audit_field_<entity>_<field>`, when `entityType` is set, with the type
+ *    converted by {@link auditEntityKeySegment} (`EmailTemplate` gives
+ *    `email_template`); the field keeps its camelCase (`htmlBody`), as
+ *    `ChangeDiff` records it;
+ * 2. `audit_field_<field>`;
+ * 3. when the last segment (`notes.ar`, as ChangeDiff writes a
+ *    LocalizedText) or, for older entries, the first segment (`fr.subject`)
+ *    is a known culture: the label of the rest of the path, found by steps 1
+ *    and 2 or humanized, then the culture's name in brackets: "Notes
+ *    olfactives (Arabe)". A culture is known when the app's bundle has
+ *    `ef_localized_input_culture_<xx>`, the key that also names it. The
+ *    bundle, not `EF_CONTENT_CULTURES`, decides, because a history outlives
+ *    the tenant's current culture list: a language the tenant dropped still
+ *    labels its old entries. Any other two-letter segment (`dimensions.cm`)
+ *    is part of the path;
+ * 4. the humanized path (`clientCode` gives "Client code").
+ *
+ * So one `audit_field_product_notes` key labels every language of
+ * `Product.Notes`, and an entity can name a field differently from the
+ * global key used by others. On a V2 detail screen bind
+ * `[entityType]="auditEntityType()"`.
  *
  * ```html
  * <ef-change-history [entries]="auditEntries()" />
@@ -4327,6 +4370,10 @@ class EfChangeHistoryComponent {
      *  or null to keep the raw note. Rendered as plain text (never HTML). A
      *  screen uses it to translate coded notes such as `order_email_resent:order_confirmed`. */
     noteFormatter = input(null, ...(ngDevMode ? [{ debugName: "noteFormatter" }] : /* istanbul ignore next */ []));
+    /** The backend entity type (`ScreenConfig.AUDIT_ENTITY_TYPE`, e.g.
+     *  `EmailTemplate`), for the entity's own `audit_field_<entity>_<field>`
+     *  labels. Unset uses the global keys only. */
+    entityType = input(undefined, ...(ngDevMode ? [{ debugName: "entityType" }] : /* istanbul ignore next */ []));
     /** "Show more" dialog visibility. */
     dialogVisible = signal(false, ...(ngDevMode ? [{ debugName: "dialogVisible" }] : /* istanbul ignore next */ []));
     /** First `previewLimit` rows shown inline in the card. */
@@ -4353,17 +4400,50 @@ class EfChangeHistoryComponent {
             };
         });
     }, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
-    /** Resolve a field key to its label. Adding an `audit_field_<field>` key is
-     *  OPTIONAL — when it's missing the raw field name is humanized
-     *  (`clientCode` → "Client code"), so new entities/fields work with zero
-     *  i18n maintenance. Add a key only for a properly localized (fr/ar) term. */
+    /** Resolve a field path to its label (order in the class docs). Keys are
+     *  OPTIONAL: without one the path is humanized (`clientCode` gives
+     *  "Client code"), so new fields work with zero i18n maintenance. Add a
+     *  key only for a properly localized (fr/ar) term. */
     fieldLabel(field) {
         if (!field)
             return '';
-        // Dotted paths (address.city, contacts.added) → underscore i18n key,
-        // since ngx-translate treats dots as nested lookups.
-        const key = `audit_field_${field.replace(/\./g, '_')}`;
-        return this.resolveLabel(key, field);
+        const exact = this.lookupField(field);
+        if (exact !== null)
+            return exact;
+        // [base, culture code] for a trailing, then a leading, culture segment.
+        const trailing = TRAILING_CULTURE.exec(field);
+        const leading = LEADING_CULTURE.exec(field);
+        const candidates = [];
+        if (trailing)
+            candidates.push([trailing[1], trailing[2]]);
+        if (leading)
+            candidates.push([leading[2], leading[1]]);
+        for (const [base, code] of candidates) {
+            const name = this.cultureName(code);
+            if (name)
+                return `${this.lookupField(base) ?? this.humanize(base)} (${name})`;
+        }
+        return this.humanize(field);
+    }
+    /** The culture's name from `ef_localized_input_culture_<code>`, or null when the bundle does not know it. */
+    cultureName(code) {
+        const key = `ef_localized_input_culture_${code}`;
+        const name = this.translate.instant(key);
+        return name && name !== key ? name : null;
+    }
+    /** The entity key, then the global key, for a path; null when neither exists. */
+    lookupField(path) {
+        // Dotted paths (address.city, contacts.added) become an underscore
+        // key, since ngx-translate treats dots as nested lookups.
+        const field = path.replace(/\./g, '_');
+        const type = this.entityType();
+        const entity = type ? auditEntityKeySegment(type) : '';
+        for (const key of entity ? [`audit_field_${entity}_${field}`, `audit_field_${field}`] : [`audit_field_${field}`]) {
+            const translated = this.translate.instant(key);
+            if (translated && translated !== key)
+                return translated;
+        }
+        return null;
     }
     /** The note as shown: the formatter's text, else the raw note. */
     noteText(note) {
@@ -4416,7 +4496,7 @@ class EfChangeHistoryComponent {
         return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfChangeHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfChangeHistoryComponent, isStandalone: true, selector: "ef-change-history", inputs: { entries: { classPropertyName: "entries", publicName: "entries", isSignal: true, isRequired: false, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, emptyKey: { classPropertyName: "emptyKey", publicName: "emptyKey", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, previewLimit: { classPropertyName: "previewLimit", publicName: "previewLimit", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, startCollapsed: { classPropertyName: "startCollapsed", publicName: "startCollapsed", isSignal: true, isRequired: false, transformFunction: null }, valueLists: { classPropertyName: "valueLists", publicName: "valueLists", isSignal: true, isRequired: false, transformFunction: null }, noteFormatter: { classPropertyName: "noteFormatter", publicName: "noteFormatter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ef-card\n    [titleKey]=\"titleKey()\"\n    [collapsible]=\"collapsible()\"\n    [collapsed]=\"startCollapsed()\"\n>\n    <ng-container head-extra>\n        @if (hasMore()) {\n            <ef-button\n                variant=\"comptoir\"\n                severity=\"ghost\"\n                size=\"small\"\n                icon=\"pi pi-window-maximize\"\n                tooltipKey=\"audit_view_all\"\n                (clickEvent)=\"openDialog($event)\"\n            />\n        }\n    </ng-container>\n\n    <ng-container\n        *ngTemplateOutlet=\"timeline; context: { $implicit: previewRows(), compact: true }\"\n    ></ng-container>\n\n    @if (hasMore()) {\n        <button type=\"button\" class=\"ch-more\" (click)=\"openDialog()\">\n            {{ 'audit_view_all' | translate }} ({{ rows().length }})\n        </button>\n    }\n</ef-card>\n\n<!-- \"Show more\" dialog \u2014 full timeline, roomy + scrollable -->\n<ef-dialog\n    [visible]=\"dialogVisible()\"\n    (visibleChange)=\"dialogVisible.set($event)\"\n    [headerKey]=\"titleKey()\"\n    [defaultActions]=\"false\"\n    size=\"lg\"\n    [modal]=\"true\"\n    position=\"center\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"timeline; context: { $implicit: rows(), compact: false }\"\n    ></ng-container>\n</ef-dialog>\n\n<ng-template #timeline let-items let-compact=\"compact\">\n    @if (items.length === 0) {\n        <p class=\"text-mute small\">{{ emptyKey() | translate }}</p>\n    } @else {\n        <div class=\"timeline\" [class.timeline--compact]=\"compact\">\n            @for (row of items; track $index) {\n                <div class=\"item\">\n                    <span class=\"dot\" [class]=\"row.meta.cls\" aria-hidden=\"true\"></span>\n                    <div class=\"body\">\n                        <div class=\"label\">{{ row.operationLabel }}</div>\n                        <div class=\"meta\">\n                            @if (row.entry.userName) {\n                                <span class=\"strong\">{{ row.entry.userName }}</span> \u00B7\n                            }\n                            {{ formatWhen(row.entry.occurredAt) }}\n                        </div>\n\n                        @if (row.entry.operation === 'status_changed' && (row.entry.fromStatus || row.entry.toStatus)) {\n                            <div class=\"ch-status small\">\n                                <span class=\"text-mute\" dir=\"auto\">{{ valueLabel('status', row.entry.fromStatus) || '\u2014' }}</span>\n                                <i class=\"pi pi-arrow-right\"></i>\n                                <span class=\"strong\" dir=\"auto\">{{ valueLabel('status', row.entry.toStatus) || '\u2014' }}</span>\n                            </div>\n                        }\n\n                        @if (row.entry.changes?.length) {\n                            <ul class=\"ch-changes small\">\n                                @for (c of row.entry.changes; track c.field) {\n                                    <li>\n                                        <span class=\"ch-field\">{{ fieldLabel(c.field) }}</span>\n                                        <span class=\"text-mute\" dir=\"auto\">{{ valueLabel(c.field, c.oldValue) || '\u2014' }}</span>\n                                        <i class=\"pi pi-arrow-right\"></i>\n                                        <span class=\"strong\" dir=\"auto\">{{ valueLabel(c.field, c.newValue) || '\u2014' }}</span>\n                                    </li>\n                                }\n                            </ul>\n                        }\n\n                        @if (row.entry.note) {\n                            <div class=\"ch-note small\">{{ noteText(row.entry.note) }}</div>\n                        }\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [":host{display:block}.dot.op-created{background:var(--st-delivered-fg, #16a34a);border-color:var(--st-delivered-fg, #16a34a)}.dot.op-updated{background:#2563eb;border-color:#2563eb}.dot.op-status{background:#f59e0b;border-color:#f59e0b}.dot.op-deleted{background:#dc2626;border-color:#dc2626}.dot.op-note{background:#64748b;border-color:#64748b}.dot.op-default{background:var(--ink-300, #94a3b8);border-color:var(--ink-300, #94a3b8)}.ch-status{display:flex;align-items:center;gap:6px;margin-top:4px}.item .body{min-width:0}.ch-changes{list-style:none;padding:0;margin:4px 0 0}.ch-changes li{display:flex;align-items:center;gap:6px;padding:1px 0;min-width:0}.ch-field{font-weight:600;min-width:120px}.timeline--compact .ch-changes .ch-field{flex:0 0 auto}.timeline--compact .ch-changes .text-mute,.timeline--compact .ch-changes .strong{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.timeline:not(.timeline--compact) .ch-changes li{flex-wrap:wrap}.timeline:not(.timeline--compact) .ch-changes .text-mute,.timeline:not(.timeline--compact) .ch-changes .strong{overflow-wrap:anywhere}.ch-changes .pi,.ch-status .pi{font-size:10px;opacity:.6}.ch-note{margin-top:4px;padding-left:8px;border-left:2px solid var(--rule-soft, #e2e8f0);color:var(--ink-600, #475569)}.ch-more{margin-top:8px;border:0;background:transparent;cursor:pointer;padding:2px 0;font-size:12px;font-weight:600;color:var(--module, #2563eb)}.ch-more:hover{text-decoration:underline}.ch-changes .text-mute,.ch-changes .strong,.ch-status .text-mute,.ch-status .strong{text-align:start}:host-context([dir=rtl]) .ch-changes .pi-arrow-right,:host-context([dir=rtl]) .ch-status .pi-arrow-right{transform:scaleX(-1)}@media(max-width:767px){.timeline--compact .ch-changes li{flex-wrap:wrap}.timeline--compact .ch-changes .text-mute,.timeline--compact .ch-changes .strong{flex:1 1 auto;overflow:visible;white-space:normal;text-overflow:clip;overflow-wrap:anywhere}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfCardComponent, selector: "ef-card", inputs: ["titleKey", "title", "metaKey", "meta", "tone", "forceHead", "hasFoot", "collapsible", "overflowVisible", "loading", "skeleton", "skeletonRows", "skeletonHeight", "collapsed"], outputs: ["collapsedChange"] }, { kind: "component", type: EfDialogComponent, selector: "ef-dialog", inputs: ["header", "headerKey", "subtitle", "subtitleKey", "visible", "modal", "closable", "draggable", "resizable", "dismissableMask", "closeOnEscape", "severity", "icon", "size", "style", "styleClass", "position", "appendTo", "variant", "actions", "defaultActions", "saveLabelKey", "cancelLabelKey", "saveLabel", "cancelLabel", "saveIcon", "cancelIcon", "saveDisabled", "saveStyleClass", "cancelStyleClass", "saveSeverity", "cancelSeverity"], outputs: ["visibleChange", "showEvent", "hideEvent", "saveAction", "cancelAction", "actionClick"] }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "ariaLabelKey", "variant", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition", "autofocus"], outputs: ["clickEvent"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfChangeHistoryComponent, isStandalone: true, selector: "ef-change-history", inputs: { entries: { classPropertyName: "entries", publicName: "entries", isSignal: true, isRequired: false, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, emptyKey: { classPropertyName: "emptyKey", publicName: "emptyKey", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, previewLimit: { classPropertyName: "previewLimit", publicName: "previewLimit", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, startCollapsed: { classPropertyName: "startCollapsed", publicName: "startCollapsed", isSignal: true, isRequired: false, transformFunction: null }, valueLists: { classPropertyName: "valueLists", publicName: "valueLists", isSignal: true, isRequired: false, transformFunction: null }, noteFormatter: { classPropertyName: "noteFormatter", publicName: "noteFormatter", isSignal: true, isRequired: false, transformFunction: null }, entityType: { classPropertyName: "entityType", publicName: "entityType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ef-card\n    [titleKey]=\"titleKey()\"\n    [collapsible]=\"collapsible()\"\n    [collapsed]=\"startCollapsed()\"\n>\n    <ng-container head-extra>\n        @if (hasMore()) {\n            <ef-button\n                variant=\"comptoir\"\n                severity=\"ghost\"\n                size=\"small\"\n                icon=\"pi pi-window-maximize\"\n                tooltipKey=\"audit_view_all\"\n                (clickEvent)=\"openDialog($event)\"\n            />\n        }\n    </ng-container>\n\n    <ng-container\n        *ngTemplateOutlet=\"timeline; context: { $implicit: previewRows(), compact: true }\"\n    ></ng-container>\n\n    @if (hasMore()) {\n        <button type=\"button\" class=\"ch-more\" (click)=\"openDialog()\">\n            {{ 'audit_view_all' | translate }} ({{ rows().length }})\n        </button>\n    }\n</ef-card>\n\n<!-- \"Show more\" dialog \u2014 full timeline, roomy + scrollable -->\n<ef-dialog\n    [visible]=\"dialogVisible()\"\n    (visibleChange)=\"dialogVisible.set($event)\"\n    [headerKey]=\"titleKey()\"\n    [defaultActions]=\"false\"\n    size=\"lg\"\n    [modal]=\"true\"\n    position=\"center\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"timeline; context: { $implicit: rows(), compact: false }\"\n    ></ng-container>\n</ef-dialog>\n\n<ng-template #timeline let-items let-compact=\"compact\">\n    @if (items.length === 0) {\n        <p class=\"text-mute small\">{{ emptyKey() | translate }}</p>\n    } @else {\n        <div class=\"timeline\" [class.timeline--compact]=\"compact\">\n            @for (row of items; track $index) {\n                <div class=\"item\">\n                    <span class=\"dot\" [class]=\"row.meta.cls\" aria-hidden=\"true\"></span>\n                    <div class=\"body\">\n                        <div class=\"label\">{{ row.operationLabel }}</div>\n                        <div class=\"meta\">\n                            @if (row.entry.userName) {\n                                <span class=\"strong\">{{ row.entry.userName }}</span> \u00B7\n                            }\n                            {{ formatWhen(row.entry.occurredAt) }}\n                        </div>\n\n                        @if (row.entry.operation === 'status_changed' && (row.entry.fromStatus || row.entry.toStatus)) {\n                            <div class=\"ch-status small\">\n                                <span class=\"text-mute\" dir=\"auto\">{{ valueLabel('status', row.entry.fromStatus) || '\u2014' }}</span>\n                                <i class=\"pi pi-arrow-right\"></i>\n                                <span class=\"strong\" dir=\"auto\">{{ valueLabel('status', row.entry.toStatus) || '\u2014' }}</span>\n                            </div>\n                        }\n\n                        @if (row.entry.changes?.length) {\n                            <ul class=\"ch-changes small\">\n                                @for (c of row.entry.changes; track c.field) {\n                                    <li>\n                                        <span class=\"ch-field\">{{ fieldLabel(c.field) }}</span>\n                                        <span class=\"text-mute\" dir=\"auto\">{{ valueLabel(c.field, c.oldValue) || '\u2014' }}</span>\n                                        <i class=\"pi pi-arrow-right\"></i>\n                                        <span class=\"strong\" dir=\"auto\">{{ valueLabel(c.field, c.newValue) || '\u2014' }}</span>\n                                    </li>\n                                }\n                            </ul>\n                        }\n\n                        @if (row.entry.note) {\n                            <div class=\"ch-note small\">{{ noteText(row.entry.note) }}</div>\n                        }\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [":host{display:block}.dot.op-created{background:var(--st-delivered-fg, #16a34a);border-color:var(--st-delivered-fg, #16a34a)}.dot.op-updated{background:#2563eb;border-color:#2563eb}.dot.op-status{background:#f59e0b;border-color:#f59e0b}.dot.op-deleted{background:#dc2626;border-color:#dc2626}.dot.op-note{background:#64748b;border-color:#64748b}.dot.op-default{background:var(--ink-300, #94a3b8);border-color:var(--ink-300, #94a3b8)}.ch-status{display:flex;align-items:center;gap:6px;margin-top:4px}.item .body{min-width:0}.ch-changes{list-style:none;padding:0;margin:4px 0 0}.ch-changes li{display:flex;align-items:center;gap:6px;padding:1px 0;min-width:0}.ch-field{font-weight:600;min-width:120px}.timeline--compact .ch-changes .ch-field{flex:0 0 auto}.timeline--compact .ch-changes .text-mute,.timeline--compact .ch-changes .strong{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.timeline:not(.timeline--compact) .ch-changes li{flex-wrap:wrap}.timeline:not(.timeline--compact) .ch-changes .text-mute,.timeline:not(.timeline--compact) .ch-changes .strong{overflow-wrap:anywhere}.ch-changes .pi,.ch-status .pi{font-size:10px;opacity:.6}.ch-note{margin-top:4px;padding-left:8px;border-left:2px solid var(--rule-soft, #e2e8f0);color:var(--ink-600, #475569)}.ch-more{margin-top:8px;border:0;background:transparent;cursor:pointer;padding:2px 0;font-size:12px;font-weight:600;color:var(--module, #2563eb)}.ch-more:hover{text-decoration:underline}.ch-changes .text-mute,.ch-changes .strong,.ch-status .text-mute,.ch-status .strong{text-align:start}:host-context([dir=rtl]) .ch-changes .pi-arrow-right,:host-context([dir=rtl]) .ch-status .pi-arrow-right{transform:scaleX(-1)}@media(max-width:767px){.timeline--compact .ch-changes li{flex-wrap:wrap}.timeline--compact .ch-changes .text-mute,.timeline--compact .ch-changes .strong{flex:1 1 auto;overflow:visible;white-space:normal;text-overflow:clip;overflow-wrap:anywhere}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfCardComponent, selector: "ef-card", inputs: ["titleKey", "title", "metaKey", "meta", "tone", "forceHead", "hasFoot", "collapsible", "overflowVisible", "loading", "skeleton", "skeletonRows", "skeletonHeight", "collapsed"], outputs: ["collapsedChange"] }, { kind: "component", type: EfDialogComponent, selector: "ef-dialog", inputs: ["header", "headerKey", "subtitle", "subtitleKey", "visible", "modal", "closable", "draggable", "resizable", "dismissableMask", "closeOnEscape", "severity", "icon", "size", "style", "styleClass", "position", "appendTo", "variant", "actions", "defaultActions", "saveLabelKey", "cancelLabelKey", "saveLabel", "cancelLabel", "saveIcon", "cancelIcon", "saveDisabled", "saveStyleClass", "cancelStyleClass", "saveSeverity", "cancelSeverity"], outputs: ["visibleChange", "showEvent", "hideEvent", "saveAction", "cancelAction", "actionClick"] }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "ariaLabelKey", "variant", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition", "autofocus"], outputs: ["clickEvent"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfChangeHistoryComponent, decorators: [{
             type: Component,
@@ -4427,7 +4507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         EfDialogComponent,
                         EfButtonComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ef-card\n    [titleKey]=\"titleKey()\"\n    [collapsible]=\"collapsible()\"\n    [collapsed]=\"startCollapsed()\"\n>\n    <ng-container head-extra>\n        @if (hasMore()) {\n            <ef-button\n                variant=\"comptoir\"\n                severity=\"ghost\"\n                size=\"small\"\n                icon=\"pi pi-window-maximize\"\n                tooltipKey=\"audit_view_all\"\n                (clickEvent)=\"openDialog($event)\"\n            />\n        }\n    </ng-container>\n\n    <ng-container\n        *ngTemplateOutlet=\"timeline; context: { $implicit: previewRows(), compact: true }\"\n    ></ng-container>\n\n    @if (hasMore()) {\n        <button type=\"button\" class=\"ch-more\" (click)=\"openDialog()\">\n            {{ 'audit_view_all' | translate }} ({{ rows().length }})\n        </button>\n    }\n</ef-card>\n\n<!-- \"Show more\" dialog \u2014 full timeline, roomy + scrollable -->\n<ef-dialog\n    [visible]=\"dialogVisible()\"\n    (visibleChange)=\"dialogVisible.set($event)\"\n    [headerKey]=\"titleKey()\"\n    [defaultActions]=\"false\"\n    size=\"lg\"\n    [modal]=\"true\"\n    position=\"center\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"timeline; context: { $implicit: rows(), compact: false }\"\n    ></ng-container>\n</ef-dialog>\n\n<ng-template #timeline let-items let-compact=\"compact\">\n    @if (items.length === 0) {\n        <p class=\"text-mute small\">{{ emptyKey() | translate }}</p>\n    } @else {\n        <div class=\"timeline\" [class.timeline--compact]=\"compact\">\n            @for (row of items; track $index) {\n                <div class=\"item\">\n                    <span class=\"dot\" [class]=\"row.meta.cls\" aria-hidden=\"true\"></span>\n                    <div class=\"body\">\n                        <div class=\"label\">{{ row.operationLabel }}</div>\n                        <div class=\"meta\">\n                            @if (row.entry.userName) {\n                                <span class=\"strong\">{{ row.entry.userName }}</span> \u00B7\n                            }\n                            {{ formatWhen(row.entry.occurredAt) }}\n                        </div>\n\n                        @if (row.entry.operation === 'status_changed' && (row.entry.fromStatus || row.entry.toStatus)) {\n                            <div class=\"ch-status small\">\n                                <span class=\"text-mute\" dir=\"auto\">{{ valueLabel('status', row.entry.fromStatus) || '\u2014' }}</span>\n                                <i class=\"pi pi-arrow-right\"></i>\n                                <span class=\"strong\" dir=\"auto\">{{ valueLabel('status', row.entry.toStatus) || '\u2014' }}</span>\n                            </div>\n                        }\n\n                        @if (row.entry.changes?.length) {\n                            <ul class=\"ch-changes small\">\n                                @for (c of row.entry.changes; track c.field) {\n                                    <li>\n                                        <span class=\"ch-field\">{{ fieldLabel(c.field) }}</span>\n                                        <span class=\"text-mute\" dir=\"auto\">{{ valueLabel(c.field, c.oldValue) || '\u2014' }}</span>\n                                        <i class=\"pi pi-arrow-right\"></i>\n                                        <span class=\"strong\" dir=\"auto\">{{ valueLabel(c.field, c.newValue) || '\u2014' }}</span>\n                                    </li>\n                                }\n                            </ul>\n                        }\n\n                        @if (row.entry.note) {\n                            <div class=\"ch-note small\">{{ noteText(row.entry.note) }}</div>\n                        }\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [":host{display:block}.dot.op-created{background:var(--st-delivered-fg, #16a34a);border-color:var(--st-delivered-fg, #16a34a)}.dot.op-updated{background:#2563eb;border-color:#2563eb}.dot.op-status{background:#f59e0b;border-color:#f59e0b}.dot.op-deleted{background:#dc2626;border-color:#dc2626}.dot.op-note{background:#64748b;border-color:#64748b}.dot.op-default{background:var(--ink-300, #94a3b8);border-color:var(--ink-300, #94a3b8)}.ch-status{display:flex;align-items:center;gap:6px;margin-top:4px}.item .body{min-width:0}.ch-changes{list-style:none;padding:0;margin:4px 0 0}.ch-changes li{display:flex;align-items:center;gap:6px;padding:1px 0;min-width:0}.ch-field{font-weight:600;min-width:120px}.timeline--compact .ch-changes .ch-field{flex:0 0 auto}.timeline--compact .ch-changes .text-mute,.timeline--compact .ch-changes .strong{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.timeline:not(.timeline--compact) .ch-changes li{flex-wrap:wrap}.timeline:not(.timeline--compact) .ch-changes .text-mute,.timeline:not(.timeline--compact) .ch-changes .strong{overflow-wrap:anywhere}.ch-changes .pi,.ch-status .pi{font-size:10px;opacity:.6}.ch-note{margin-top:4px;padding-left:8px;border-left:2px solid var(--rule-soft, #e2e8f0);color:var(--ink-600, #475569)}.ch-more{margin-top:8px;border:0;background:transparent;cursor:pointer;padding:2px 0;font-size:12px;font-weight:600;color:var(--module, #2563eb)}.ch-more:hover{text-decoration:underline}.ch-changes .text-mute,.ch-changes .strong,.ch-status .text-mute,.ch-status .strong{text-align:start}:host-context([dir=rtl]) .ch-changes .pi-arrow-right,:host-context([dir=rtl]) .ch-status .pi-arrow-right{transform:scaleX(-1)}@media(max-width:767px){.timeline--compact .ch-changes li{flex-wrap:wrap}.timeline--compact .ch-changes .text-mute,.timeline--compact .ch-changes .strong{flex:1 1 auto;overflow:visible;white-space:normal;text-overflow:clip;overflow-wrap:anywhere}}\n"] }]
-        }], propDecorators: { entries: [{ type: i0.Input, args: [{ isSignal: true, alias: "entries", required: false }] }], titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], emptyKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyKey", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], previewLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewLimit", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], startCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "startCollapsed", required: false }] }], valueLists: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLists", required: false }] }], noteFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "noteFormatter", required: false }] }] } });
+        }], propDecorators: { entries: [{ type: i0.Input, args: [{ isSignal: true, alias: "entries", required: false }] }], titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], emptyKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyKey", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], previewLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewLimit", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], startCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "startCollapsed", required: false }] }], valueLists: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLists", required: false }] }], noteFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "noteFormatter", required: false }] }], entityType: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityType", required: false }] }] } });
 
 /**
  * Keyboard-navigable product search. Filters products by display name,
@@ -7072,7 +7152,7 @@ class EfOrderBuilderComponent {
         return OrderEntityHelper.calculateTotals(fee > 0 ? { ...order, shippingTotal: fee } : order);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfOrderBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfOrderBuilderComponent, isStandalone: true, selector: "ef-order-builder", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: true, transformFunction: null }, products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: true, transformFunction: null }, customers: { classPropertyName: "customers", publicName: "customers", isSignal: true, isRequired: true, transformFunction: null }, recipient: { classPropertyName: "recipient", publicName: "recipient", isSignal: true, isRequired: false, transformFunction: null }, defaultCallingCode: { classPropertyName: "defaultCallingCode", publicName: "defaultCallingCode", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, countGroupLabels: { classPropertyName: "countGroupLabels", publicName: "countGroupLabels", isSignal: true, isRequired: false, transformFunction: null }, productKeyField: { classPropertyName: "productKeyField", publicName: "productKeyField", isSignal: true, isRequired: false, transformFunction: null }, priceList: { classPropertyName: "priceList", publicName: "priceList", isSignal: true, isRequired: false, transformFunction: null }, backendErrors: { classPropertyName: "backendErrors", publicName: "backendErrors", isSignal: true, isRequired: false, transformFunction: null }, shippingTotal: { classPropertyName: "shippingTotal", publicName: "shippingTotal", isSignal: true, isRequired: false, transformFunction: null }, auditEntries: { classPropertyName: "auditEntries", publicName: "auditEntries", isSignal: true, isRequired: false, transformFunction: null }, auditValueLists: { classPropertyName: "auditValueLists", publicName: "auditValueLists", isSignal: true, isRequired: false, transformFunction: null }, auditNoteFormatter: { classPropertyName: "auditNoteFormatter", publicName: "auditNoteFormatter", isSignal: true, isRequired: false, transformFunction: null }, focusMode: { classPropertyName: "focusMode", publicName: "focusMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { order: "orderChange", openCatalogue: "openCatalogue", orderChanged: "orderChanged", orderValidated: "orderValidated", productsAdded: "productsAdded", focusMode: "focusModeChange" }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: EfProductTypeaheadComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"order-builder\"\n  [class.ob-collapsed]=\"focusMode()\"\n  [class.ob-rail-open]=\"railOpen()\">\n  <div class=\"ob-grid\">\n    <div class=\"ob-main\">\n      <!-- Order header: customer + date + express add (one card) -->\n      <ef-card\n        titleKey=\"order_builder.section_order\"\n        [metaKey]=\"readonly() ? '' : 'order_builder.quick_add_hint'\"\n        [overflowVisible]=\"true\">\n        <div class=\"ob-order-head\">\n          <div class=\"form-grid\">\n            @if (recipient(); as r) {\n              <!-- No client to pick (a storefront order): who it goes to,\n                   read-only, in the customer's place. -->\n              <div class=\"field col-6\">\n                <ef-label labelKey=\"order_builder.recipient\" />\n                <div\n                  class=\"ob-recipient\"\n                  role=\"group\"\n                  [attr.aria-label]=\"'order_builder.recipient' | translate\">\n                  <span class=\"ob-recipient-name\">{{ r.name }}</span>\n                  @if (recipientTel(); as tel) {\n                    <a class=\"ob-recipient-phone\" [href]=\"tel\" dir=\"ltr\">{{ r.phone }}</a>\n                  }\n                  @if (r.city) {\n                    <span class=\"ob-recipient-city\">{{ r.city }}</span>\n                  }\n                  @if (r.address) {\n                    <span class=\"ob-recipient-address\" [title]=\"r.address\">{{ r.address }}</span>\n                  }\n                </div>\n              </div>\n            } @else {\n              <div class=\"field col-6\">\n                <ef-label labelKey=\"label.customer\" for=\"ob-cust\" [required]=\"true\" />\n                <ef-select\n                  inputId=\"ob-cust\"\n                  [options]=\"customers()\"\n                  optionLabel=\"companyName\"\n                  optionValue=\"customerId\"\n                  [ngModel]=\"order().customerId\"\n                  (ngModelChange)=\"updateCustomer($event)\"\n                  [disabled]=\"readonly()\"\n                  [showClear]=\"true\"\n                  [filter]=\"true\"\n                  filterBy=\"companyName\"\n                  filterPlaceholderKey=\"label.search_customer\"\n                  appendTo=\"body\"\n                  placeholderKey=\"label.select_customer\" />\n              </div>\n            }\n            <div class=\"field col-3\">\n              <ef-label labelKey=\"label.order_date\" for=\"ob-date\" [required]=\"true\" />\n              <ef-datepicker-advanced\n                mode=\"field\"\n                selectionMode=\"single\"\n                inputId=\"ob-date\"\n                placeholderKey=\"date_select_date\"\n                [ngModel]=\"order().orderDate\"\n                (ngModelChange)=\"updateOrderDate($event)\"\n                [disabled]=\"readonly()\" />\n            </div>\n          </div>\n\n          @if (!readonly()) {\n            <div class=\"qa-grid\">\n              <div class=\"qa-combo-wrap\">\n                <ef-label labelKey=\"label.article\" />\n                <ef-product-typeahead\n                  [products]=\"products()\"\n                  [productKeyField]=\"productKeyField()\"\n                  placeholderKey=\"label.search_product\"\n                  [currency]=\"currency()\"\n                  [locale]=\"locale()\"\n                  [priceList]=\"priceList()\"\n                  (productSelect)=\"onTypeaheadSelect($event)\"\n                  [showVariants]=\"false\" />\n              </div>\n              <div class=\"qa-price\">\n                <ef-label labelKey=\"label.sale_price\" />\n                <ef-inputnumber\n                  variant=\"comptoir\"\n                  [value]=\"quickAddPrice()\"\n                  (valueChangeEvent)=\"quickAddPrice.set($event ?? 0)\"\n                  [minFractionDigits]=\"2\"\n                  [maxFractionDigits]=\"2\"\n                  [locale]=\"locale()\"\n                  [disabled]=\"readonly()\" />\n              </div>\n              <div class=\"qa-qtyf\">\n                <ef-label labelKey=\"label.quantity\" />\n                <ef-inputnumber\n                  variant=\"comptoir\"\n                  [ngModel]=\"quickAddQuantity()\"\n                  (ngModelChange)=\"quickAddQuantity.set($event)\"\n                  [min]=\"0\"\n                  [maxFractionDigits]=\"4\"\n                  [locale]=\"locale()\"\n                  [disabled]=\"readonly()\"\n                />\n              </div>\n              <div class=\"qa-go\">\n                <!-- Ghost while the preconditions are unmet, tenant once the\n                     line is addable. A disabled control painted in a faded\n                     tenant fill reads as an enabled button that lost its\n                     colour, which is the greyed-out accent the design brief\n                     bans; ghost reads as \"not yet\". -->\n                <ef-button\n                  labelKey=\"action.add\"\n                  icon=\"pi pi-plus\"\n                  variant=\"comptoir\"\n                  size=\"base\"\n                  [severity]=\"quickAddDisabled() ? 'ghost' : 'tenant'\"\n                  [disabled]=\"quickAddDisabled()\"\n                  (clickEvent)=\"addQuickProduct()\" />\n              </div>\n            </div>\n          }\n        </div>\n      </ef-card>\n\n      <!-- Lines.\n\n           ef-data-card owns the panel here instead of sitting inside an\n           ef-card: `.tbl-wrap` already draws a bordered, rounded surface, so\n           nesting it in another one would be a card inside a card. The title\n           and the card's actions move into the head slots it provides.\n\n           The columns are declared in TS (`lineColumns`) so discount and tax\n           follow the document config, and so one definition drives both the\n           desktop table and the mobile cards. Only the article column is\n           elastic; every other column holds a number of known magnitude and\n           gets a fixed track, which keeps the decimals aligned down the\n           table rather than shifting with the longest description. -->\n      <ef-data-card\n        [columns]=\"lineColumns()\"\n        [rows]=\"orderLines()\"\n        trackByField=\"id\"\n        [hidePager]=\"true\"\n        defaultDensity=\"compact\"\n        [reorderable]=\"!readonly()\"\n        [fixedLayout]=\"true\"\n        (rowReorder)=\"reorderLine($event)\"\n        mobileLayout=\"card\">\n\n        <div tbl-head-info class=\"ob-lines-head\">\n          <span class=\"strong\">{{ 'order_builder.lines' | translate }}</span>\n          <span class=\"meta\">\u00B7 {{ orderLines().length }}</span>\n        </div>\n\n        <div tbl-head-actions class=\"head-actions\">\n          @if (config().showCatalogue && !readonly()) {\n            <ef-button\n              labelKey=\"action.open_catalogue\"\n              icon=\"pi pi-box\"\n              severity=\"secondary\"\n              [text]=\"true\"\n              (clickEvent)=\"handleOpenCatalogue()\" />\n          }\n          <ef-button\n            [labelKey]=\"focusMode() ? 'order_builder.show_summary' : 'order_builder.fullscreen'\"\n            icon=\"pi pi-window-maximize\"\n            severity=\"secondary\"\n            [text]=\"true\"\n            (clickEvent)=\"toggleFocus()\" />\n        </div>\n\n        <span empty-state>{{ 'order_builder.empty' | translate }}</span>\n        <span empty-state-mobile>{{ 'order_builder.empty' | translate }}</span>\n\n        <ng-template efColumnTemplate=\"product\" let-item let-i=\"index\">\n          <div class=\"p\">\n            <span class=\"ln\">{{ i + 1 }}</span>\n            <span class=\"pp\">\n              <span class=\"nm\">{{ item.productDescription }}</span>\n            </span>\n          </div>\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"price\" let-item>\n          @if (!readonly() && isEditingCell(item, 'price')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.productUnitPrice\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [minFractionDigits]=\"2\"\n              [maxFractionDigits]=\"2\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'price')\">\n              {{ item.productUnitPrice | number: '1.2-2' : locale() }}\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"qty\" let-item>\n          @if (!readonly() && isEditingCell(item, 'qty')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.quantity\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [maxFractionDigits]=\"4\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'qty')\">\n              {{ item.quantity | number: '1.0-4' : locale() }}\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"discount\" let-item>\n          @if (!readonly() && isEditingCell(item, 'discount')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.discount\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [max]=\"100\"\n              [maxFractionDigits]=\"2\"\n              suffix=\" %\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'discount')\">\n              {{ item.discount | number: '1.0-2' : locale() }} %\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"tax\" let-item>\n          @if (!readonly() && isEditingCell(item, 'tva')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.taxRate\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [max]=\"100\"\n              [maxFractionDigits]=\"2\"\n              suffix=\" %\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'tva')\">\n              {{ (item.taxRate ?? 0) | number: '1.0-2' : locale() }} %\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"subtotal\" let-item>\n          {{ calculateSubtotal(item) | number: '1.2-2' : locale() }}\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"remove\" let-item>\n          <ef-button\n            icon=\"pi pi-trash\"\n            ariaLabelKey=\"common_delete\"\n            severity=\"danger\"\n            [text]=\"true\"\n            styleClass=\"ob-del\"\n            (clickEvent)=\"removeOrderLine(item.id)\" />\n        </ng-template>\n      </ef-data-card>\n\n    </div>\n\n    <!-- CONTEXT RAIL (1/3) -->\n    <aside class=\"ob-rail\">\n      <!-- Totaux (top) -->\n      <ef-card titleKey=\"order_builder.totals\" [meta]=\"currency()\">\n        <div class=\"ob-totals\">\n          <div class=\"row\">\n            <span class=\"lbl\">{{ 'order_builder.gross' | translate }}</span>\n            <span class=\"v\">{{ grossTotal() | number: '1.2-2' : locale() }}</span>\n          </div>\n          <div class=\"row discount\">\n            <span class=\"lbl\">{{ 'order_builder.discount' | translate }}</span>\n            <span class=\"v\">\u2212{{ discountTotal() | number: '1.2-2' : locale() }}</span>\n          </div>\n          <div class=\"row\">\n            <span class=\"lbl\">{{ 'order_builder.tax' | translate }}</span>\n            <span class=\"v\">{{ tvaTotal() | number: '1.2-2' : locale() }}</span>\n          </div>\n          @if (shippingTotal() > 0) {\n            <div class=\"row shipping\">\n              <span class=\"lbl\">{{ 'order_builder.shipping' | translate }}</span>\n              <span class=\"v\">{{ shippingTotal() | number: '1.2-2' : locale() }}</span>\n            </div>\n          }\n          <hr />\n          <div class=\"row grand\">\n            <span class=\"lbl\">{{ 'order_builder.grand_total' | translate }}</span>\n            <span class=\"v\">{{ finalTotal() | number: '1.2-2' : locale() }}<span class=\"cur\">{{ currency() }}</span></span>\n          </div>\n        </div>\n      </ef-card>\n\n      <!-- R\u00E9capitulatif par format -->\n      @if (productsSummary().items.length > 0) {\n        <ef-card titleKey=\"order_builder.recap\" metaKey=\"order_builder.auto\">\n          <div class=\"ob-recap\">\n            <div class=\"cols\">\n              @for (col of recapColumns(); track $index) {\n                <div class=\"grp\">\n                  @for (seg of col; track seg.code) {\n                    <div class=\"seg\">\n                      <span class=\"fmt\">{{ seg.label }}</span>\n                      <span class=\"n\">{{ seg.count | number: '1.0-0' : locale() }}</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n            <div class=\"tot\">\n              <span class=\"l\">{{ 'order_builder.total_units' | translate }}</span>\n              <span class=\"n\">{{ productsSummary().totalCount | number: '1.0-0' : locale() }}</span>\n            </div>\n          </div>\n        </ef-card>\n      }\n\n      <!-- Host cards that belong beside the totals (delivery, notes): a column\n           at desktop width, below the totals in the drawer otherwise. -->\n      <ng-content select=\"[obRail]\" />\n\n      <!-- Historique (optional, component-owned) -->\n      @if (hasAudit()) {\n        <ef-change-history\n          [entries]=\"auditEntries()\"\n          [valueLists]=\"auditValueLists()\"\n          [noteFormatter]=\"auditNoteFormatter()\"\n        />\n      }\n    </aside>\n  </div>\n\n  <!-- Floating summary FAB + backdrop -->\n  <button type=\"button\" class=\"ob-backdrop\" aria-hidden=\"true\" tabindex=\"-1\" (click)=\"toggleRail(false)\"></button>\n  <div class=\"ob-fab\" role=\"status\">\n    <div class=\"ft\">\n      <span class=\"k\">{{ 'order_builder.total_units' | translate }} \u00B7 {{ productsSummary().totalCount }}</span>\n      <span class=\"vv\">{{ finalTotal() | number: '1.2-2' : locale() }}<span class=\"cur\">{{ currency() }}</span></span>\n    </div>\n    <button type=\"button\" class=\"open\" (click)=\"toggleRail(true)\">\n      {{ 'order_builder.summary' | translate }}\n    </button>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .order-builder{display:grid;gap:var(--s-3)}:host .order-builder .head-actions{display:flex;align-items:center;gap:6px}:host .order-builder .form-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(12,minmax(0,1fr))}:host .order-builder .form-grid>.col-3{grid-column:span 3}:host .order-builder .form-grid>.col-4{grid-column:span 4}:host .order-builder .form-grid>.col-5{grid-column:span 5}:host .order-builder .form-grid>.col-6{grid-column:span 6}@media(max-width:767px){:host .order-builder .form-grid>[class*=col-]{grid-column:span 12}}:host .order-builder .field{display:grid;gap:4px}:host .order-builder .field>label{font-size:11px;font-weight:700;color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em}:host .order-builder .ob-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);align-items:start}@media(min-width:1280px){:host .order-builder .ob-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}:host .order-builder .ob-main{display:grid;gap:var(--s-3);min-width:0}:host .order-builder .ob-rail{display:grid;gap:var(--s-3);align-content:start}@media(min-width:1280px){:host .order-builder .ob-rail{position:sticky;top:44px}}:host .order-builder .ob-order-head{display:grid;gap:var(--s-4)}:host .order-builder .ob-recipient{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s-3);row-gap:2px;min-width:0;font-size:13px;line-height:1.45;color:var(--text-soft)}:host .order-builder .ob-recipient>*{flex:0 1 auto;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}:host .order-builder .ob-recipient-name{font-weight:600;color:var(--text)}:host .order-builder .ob-recipient-phone{color:var(--tenant-700);text-decoration:none;font-variant-numeric:tabular-nums}:host .order-builder .ob-recipient-phone:hover{text-decoration:underline}:host .order-builder .ob-recipient-address{flex-basis:100%;color:var(--text-mute)}:host .order-builder .qa-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:end;padding-top:var(--s-3);border-top:1px solid var(--rule-soft)}:host .order-builder .qa-combo-wrap{flex:1 1 260px;min-width:0}:host .order-builder .qa-price{flex:0 1 132px}:host .order-builder .qa-qtyf{flex:0 0 132px}:host .order-builder .qa-go{flex:0 0 auto}@media(max-width:560px){:host .order-builder .qa-combo-wrap,:host .order-builder .qa-price,:host .order-builder .qa-qtyf,:host .order-builder .qa-go{flex:1 1 100%}}:host .order-builder ef-data-card{font-size:13px}:host .order-builder ef-data-card .p{display:flex;align-items:baseline;gap:9px;line-height:1.25}:host .order-builder ef-data-card .p .ln{flex:0 0 auto;min-width:15px;text-align:end;font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--text-soft)}:host .order-builder ef-data-card .p .pp{display:grid;gap:1px;min-width:0}:host .order-builder ef-data-card .p .nm{font-weight:600;letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .order-builder ef-data-card .p .nm em{font-style:normal;color:var(--text-mute);font-weight:600}:host .order-builder ef-data-card ef-inputnumber,:host .order-builder ef-data-card ef-inputnumber .ef-field-control,:host .order-builder ef-data-card ef-inputnumber input{width:100%;min-width:0}:host .order-builder ef-data-card .num,:host .order-builder ef-data-card .total{font-family:var(--font-mono);font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums}:host .order-builder ef-data-card .ln-val{appearance:none;width:100%;margin:0;padding:5px 8px;border:1px solid transparent;border-radius:7px;background:transparent;font:inherit;font-family:var(--font-mono);font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;color:inherit;text-align:end;cursor:text;transition:background .12s ease,border-color .12s ease}:host .order-builder ef-data-card .ln-val:hover:not(:disabled){background:var(--paper);border-color:var(--rule)}:host .order-builder ef-data-card .ln-val:focus-visible{outline:none;background:var(--paper);border-color:var(--tenant, var(--rule))}:host .order-builder ef-data-card .ln-val:disabled{cursor:default;background:transparent;border-color:transparent}:host .order-builder ef-data-card .total{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 85;font-size:13.5px}:host .order-builder ef-data-card .cur{font-size:9.5px;color:var(--text-soft);margin-inline-start:3px}:host .order-builder .ob-lines-head{display:flex;align-items:baseline;gap:6px;min-width:0}:host .order-builder .ob-lines-head .strong{font-weight:700;color:var(--text)}:host .order-builder .ob-lines-head .meta{color:var(--text-soft)}:host .order-builder .ob-del{color:var(--text-soft)}:host .order-builder .ob-del:hover{color:var(--st-cancelled-fg);border-color:var(--st-cancelled-bg)}:host .order-builder .ob-totals{display:grid;gap:6px}:host .order-builder .ob-totals .row{display:flex;justify-content:space-between;align-items:baseline;gap:14px}:host .order-builder .ob-totals .row .lbl{font-size:12px;font-weight:600;color:var(--text-mute)}:host .order-builder .ob-totals .row .v{font-family:var(--font-mono);font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px}:host .order-builder .ob-totals .row.discount .v{color:var(--st-pending-fg)}:host .order-builder .ob-totals hr{border:0;border-top:1px solid var(--rule);margin:5px 0}:host .order-builder .ob-totals .grand .lbl{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 85;font-size:13.5px;color:var(--text)}:host .order-builder .ob-totals .grand .v{font-family:var(--font-display);font-variation-settings:\"opsz\" 96,\"wght\" 700,\"wdth\" 80;font-size:26px;letter-spacing:-.03em;color:var(--text)}:host .order-builder .ob-totals .grand .cur{font-family:var(--font-mono);font-size:.4em;color:var(--text-mute);margin-inline-start:4px}:host .order-builder .ob-recap .cols{display:grid;grid-template-columns:1fr 1fr}:host .order-builder .ob-recap .grp{display:flex;flex-direction:column;gap:3px;min-width:0}:host .order-builder .ob-recap .grp:first-child{padding-inline-end:14px}:host .order-builder .ob-recap .grp+.grp{padding-inline-start:14px;border-inline-start:1px solid var(--rule)}:host .order-builder .ob-recap .seg{display:flex;justify-content:space-between;align-items:baseline;gap:8px}:host .order-builder .ob-recap .seg .fmt{font-size:11.5px;font-weight:700;color:var(--text);letter-spacing:-.005em;min-width:0}:host .order-builder .ob-recap .seg .fmt:after{content:\":\";color:var(--text-soft)}:host .order-builder .ob-recap .seg .n{font-family:var(--font-mono);font-weight:700;font-size:12px;color:var(--text);font-variant-numeric:tabular-nums;flex-shrink:0}:host .order-builder .ob-recap .tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:10px;border-top:1px solid var(--rule)}:host .order-builder .ob-recap .tot .l{font-weight:700;font-size:12px}:host .order-builder .ob-recap .tot .n{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 85;font-size:18px;font-variant-numeric:tabular-nums}:host .order-builder .ob-fab{display:none;position:fixed;inset-inline-end:20px;bottom:calc(var(--app-bottom-bar, 0px) + env(safe-area-inset-bottom,0px) + 20px);z-index:30;align-items:center;gap:10px;box-sizing:border-box;block-size:var(--ef-order-fab-h);--ob-fab-ground: var(--ink-active);--ob-fab-on: var(--paper);background:var(--ob-fab-ground);color:var(--ob-fab-on);border-radius:var(--r-pill);padding-block:0;padding-inline:16px 10px;box-shadow:var(--shadow-3)}:host .order-builder .ob-fab .ft{display:grid;line-height:1.1}:host .order-builder .ob-fab .ft .k{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.65}:host .order-builder .ob-fab .ft .vv{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 82;font-size:16px}:host .order-builder .ob-fab .ft .vv .cur{font-family:var(--font-mono);font-size:.6em;opacity:.7;margin-inline-start:3px}:host .order-builder .ob-fab .open{appearance:none;cursor:pointer;border:0;background:color-mix(in srgb,var(--ob-fab-on) 14%,transparent);color:var(--ob-fab-on);font:inherit;font-size:12px;font-weight:700;border-radius:var(--r-pill);padding:8px 14px;display:inline-flex;align-items:center;gap:6px}:host .order-builder .ob-fab .open:hover{background:color-mix(in srgb,var(--ob-fab-on) 24%,transparent)}:host .order-builder .ob-fab .open:focus-visible{outline:2px solid var(--ob-fab-on);outline-offset:2px}:host .order-builder .ob-backdrop{display:none;position:fixed;inset:0;z-index:38;background:#0f11156b;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}:host .order-builder.ob-collapsed .ob-grid{grid-template-columns:minmax(0,1fr)}:host .order-builder.ob-collapsed .ob-fab{display:flex}:host .order-builder.ob-collapsed .ob-rail{position:fixed;top:0;inset-inline-end:0;height:100dvh;width:min(360px,92vw);z-index:40;background:var(--paper);border-inline-start:1px solid var(--rule);box-shadow:var(--shadow-3);padding:14px;overflow:auto;gap:var(--s-3);transform:translate(101%);transition:transform var(--t-base) var(--ease-out)}[dir=rtl] :host .order-builder.ob-collapsed .ob-rail{transform:translate(-101%)}:host .order-builder.ob-collapsed.ob-rail-open .ob-rail{transform:none}:host .order-builder.ob-collapsed.ob-rail-open .ob-backdrop{display:block}@media(max-width:1279px){:host .order-builder .ob-grid{grid-template-columns:minmax(0,1fr)}:host .order-builder .ob-fab{display:flex}:host .order-builder .ob-rail{position:fixed;top:0;inset-inline-end:0;height:100dvh;width:min(360px,92vw);z-index:40;background:var(--paper);border-inline-start:1px solid var(--rule);box-shadow:var(--shadow-3);padding:14px;overflow:auto;gap:var(--s-3);transform:translate(101%);transition:transform var(--t-base) var(--ease-out)}[dir=rtl] :host .order-builder .ob-rail{transform:translate(-101%)}:host .order-builder.ob-rail-open .ob-rail{transform:none}:host .order-builder.ob-rail-open .ob-backdrop{display:block}}:host ef-data-card .nm,:host ef-data-card .num,:host ef-data-card .ln-val,:host .ob-totals .v{unicode-bidi:plaintext}@media(pointer:coarse){:host .order-builder .ob-fab .open{min-block-size:var(--hit-touch)}:host ef-data-card .ln-val{min-block-size:var(--hit-field)}:host .order-builder .ob-recipient-phone{line-height:var(--hit-touch)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfSelectComponent, selector: "ef-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "group", "optionGroupLabel", "optionGroupChildren", "size", "fluid", "inline", "appendTo", "multiple", "filter", "filterBy", "filterPlaceholder", "filterPlaceholderKey", "autofocusFilter", "autofocus", "editable", "loading", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "multiDisplay", "showToggleAll", "emptyMessage", "emptyMessageKey", "emptyFilterMessage", "emptyFilterMessageKey", "styleClass", "panelStyleClass", "filterByKeys", "variant", "value"], outputs: ["selectionChangeEvent", "filterChangeEvent", "panelShowEvent", "panelHideEvent"] }, { kind: "component", type: EfDatepickerAdvancedComponent, selector: "ef-datepicker-advanced", inputs: ["triggerLabelKey", "triggerLabel", "presets", "activePreset", "start", "end", "allowCustomRange", "allowAllTime", "mode", "selectionMode", "variant", "showTime", "valueFormat"], outputs: ["rangeChange", "opened", "closed"] }, { kind: "component", type: EfInputNumberComponent, selector: "ef-inputnumber", inputs: ["value", "invalid", "format", "showButtons", "buttonLayout", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "prefix", "suffix", "currency", "currencyDisplay", "locale", "localeMatcher", "mode", "useGrouping", "minFractionDigits", "maxFractionDigits", "min", "max", "step", "allowEmpty", "inputSize", "size", "maxlength", "minlength", "pattern", "tabindex", "title", "ariaLabelledBy", "inputStyle", "inputStyleClass", "style", "styleClass", "primeNgVariant", "autofocus", "autocomplete", "fluid", "inline", "variant", "pt", "ptOptions", "dt", "unstyled"], outputs: ["inputEvent", "valueChangeEvent", "focusEvent", "blurEvent", "keyDownEvent", "clearEvent"] }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "labelParams", "for", "styleClass", "required"] }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "ariaLabelKey", "variant", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition", "autofocus"], outputs: ["clickEvent"] }, { kind: "component", type: EfCardComponent, selector: "ef-card", inputs: ["titleKey", "title", "metaKey", "meta", "tone", "forceHead", "hasFoot", "collapsible", "overflowVisible", "loading", "skeleton", "skeletonRows", "skeletonHeight", "collapsed"], outputs: ["collapsedChange"] }, { kind: "component", type: EfChangeHistoryComponent, selector: "ef-change-history", inputs: ["entries", "titleKey", "emptyKey", "limit", "previewLimit", "collapsible", "startCollapsed", "valueLists", "noteFormatter"] }, { kind: "component", type: EfProductTypeaheadComponent, selector: "ef-product-typeahead", inputs: ["products", "productKeyField", "placeholderKey", "disabled", "currency", "locale", "showVariants", "priceList"], outputs: ["productSelect"] }, { kind: "component", type: EfDataCardComponent, selector: "ef-data-card", inputs: ["mobileLayout", "columns", "rows", "trackByField", "pageNumber", "pageSize", "totalCount", "pageSizeOptions", "hidePager", "sort", "loading", "errorMsg", "loadingKey", "rowDoubleClickable", "rowPressed", "rowDisabled", "hasActionsColumn", "rowActionsContext", "showViewAction", "showEditAction", "showDuplicateAction", "showDeleteAction", "rowActionState", "showDensityControl", "showColumnPicker", "showExportControl", "exporting", "screenContext", "searchTerm", "tableKey", "defaultDensity", "reorderable", "fixedLayout"], outputs: ["pageChange", "pageSizeChange", "sortChange", "rowDoubleClick", "rowAction", "exportRequest", "clearSearch", "retry", "rowReorder"] }, { kind: "directive", type: EfColumnTemplateDirective, selector: "[efColumnTemplate]", inputs: ["efColumnTemplate"] }, { kind: "pipe", type: i1$3.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfOrderBuilderComponent, isStandalone: true, selector: "ef-order-builder", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: true, transformFunction: null }, products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: true, transformFunction: null }, customers: { classPropertyName: "customers", publicName: "customers", isSignal: true, isRequired: true, transformFunction: null }, recipient: { classPropertyName: "recipient", publicName: "recipient", isSignal: true, isRequired: false, transformFunction: null }, defaultCallingCode: { classPropertyName: "defaultCallingCode", publicName: "defaultCallingCode", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, countGroupLabels: { classPropertyName: "countGroupLabels", publicName: "countGroupLabels", isSignal: true, isRequired: false, transformFunction: null }, productKeyField: { classPropertyName: "productKeyField", publicName: "productKeyField", isSignal: true, isRequired: false, transformFunction: null }, priceList: { classPropertyName: "priceList", publicName: "priceList", isSignal: true, isRequired: false, transformFunction: null }, backendErrors: { classPropertyName: "backendErrors", publicName: "backendErrors", isSignal: true, isRequired: false, transformFunction: null }, shippingTotal: { classPropertyName: "shippingTotal", publicName: "shippingTotal", isSignal: true, isRequired: false, transformFunction: null }, auditEntries: { classPropertyName: "auditEntries", publicName: "auditEntries", isSignal: true, isRequired: false, transformFunction: null }, auditValueLists: { classPropertyName: "auditValueLists", publicName: "auditValueLists", isSignal: true, isRequired: false, transformFunction: null }, auditNoteFormatter: { classPropertyName: "auditNoteFormatter", publicName: "auditNoteFormatter", isSignal: true, isRequired: false, transformFunction: null }, focusMode: { classPropertyName: "focusMode", publicName: "focusMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { order: "orderChange", openCatalogue: "openCatalogue", orderChanged: "orderChanged", orderValidated: "orderValidated", productsAdded: "productsAdded", focusMode: "focusModeChange" }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: EfProductTypeaheadComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"order-builder\"\n  [class.ob-collapsed]=\"focusMode()\"\n  [class.ob-rail-open]=\"railOpen()\">\n  <div class=\"ob-grid\">\n    <div class=\"ob-main\">\n      <!-- Order header: customer + date + express add (one card) -->\n      <ef-card\n        titleKey=\"order_builder.section_order\"\n        [metaKey]=\"readonly() ? '' : 'order_builder.quick_add_hint'\"\n        [overflowVisible]=\"true\">\n        <div class=\"ob-order-head\">\n          <div class=\"form-grid\">\n            @if (recipient(); as r) {\n              <!-- No client to pick (a storefront order): who it goes to,\n                   read-only, in the customer's place. -->\n              <div class=\"field col-6\">\n                <ef-label labelKey=\"order_builder.recipient\" />\n                <div\n                  class=\"ob-recipient\"\n                  role=\"group\"\n                  [attr.aria-label]=\"'order_builder.recipient' | translate\">\n                  <span class=\"ob-recipient-name\">{{ r.name }}</span>\n                  @if (recipientTel(); as tel) {\n                    <a class=\"ob-recipient-phone\" [href]=\"tel\" dir=\"ltr\">{{ r.phone }}</a>\n                  }\n                  @if (r.city) {\n                    <span class=\"ob-recipient-city\">{{ r.city }}</span>\n                  }\n                  @if (r.address) {\n                    <span class=\"ob-recipient-address\" [title]=\"r.address\">{{ r.address }}</span>\n                  }\n                </div>\n              </div>\n            } @else {\n              <div class=\"field col-6\">\n                <ef-label labelKey=\"label.customer\" for=\"ob-cust\" [required]=\"true\" />\n                <ef-select\n                  inputId=\"ob-cust\"\n                  [options]=\"customers()\"\n                  optionLabel=\"companyName\"\n                  optionValue=\"customerId\"\n                  [ngModel]=\"order().customerId\"\n                  (ngModelChange)=\"updateCustomer($event)\"\n                  [disabled]=\"readonly()\"\n                  [showClear]=\"true\"\n                  [filter]=\"true\"\n                  filterBy=\"companyName\"\n                  filterPlaceholderKey=\"label.search_customer\"\n                  appendTo=\"body\"\n                  placeholderKey=\"label.select_customer\" />\n              </div>\n            }\n            <div class=\"field col-3\">\n              <ef-label labelKey=\"label.order_date\" for=\"ob-date\" [required]=\"true\" />\n              <ef-datepicker-advanced\n                mode=\"field\"\n                selectionMode=\"single\"\n                inputId=\"ob-date\"\n                placeholderKey=\"date_select_date\"\n                [ngModel]=\"order().orderDate\"\n                (ngModelChange)=\"updateOrderDate($event)\"\n                [disabled]=\"readonly()\" />\n            </div>\n          </div>\n\n          @if (!readonly()) {\n            <div class=\"qa-grid\">\n              <div class=\"qa-combo-wrap\">\n                <ef-label labelKey=\"label.article\" />\n                <ef-product-typeahead\n                  [products]=\"products()\"\n                  [productKeyField]=\"productKeyField()\"\n                  placeholderKey=\"label.search_product\"\n                  [currency]=\"currency()\"\n                  [locale]=\"locale()\"\n                  [priceList]=\"priceList()\"\n                  (productSelect)=\"onTypeaheadSelect($event)\"\n                  [showVariants]=\"false\" />\n              </div>\n              <div class=\"qa-price\">\n                <ef-label labelKey=\"label.sale_price\" />\n                <ef-inputnumber\n                  variant=\"comptoir\"\n                  [value]=\"quickAddPrice()\"\n                  (valueChangeEvent)=\"quickAddPrice.set($event ?? 0)\"\n                  [minFractionDigits]=\"2\"\n                  [maxFractionDigits]=\"2\"\n                  [locale]=\"locale()\"\n                  [disabled]=\"readonly()\" />\n              </div>\n              <div class=\"qa-qtyf\">\n                <ef-label labelKey=\"label.quantity\" />\n                <ef-inputnumber\n                  variant=\"comptoir\"\n                  [ngModel]=\"quickAddQuantity()\"\n                  (ngModelChange)=\"quickAddQuantity.set($event)\"\n                  [min]=\"0\"\n                  [maxFractionDigits]=\"4\"\n                  [locale]=\"locale()\"\n                  [disabled]=\"readonly()\"\n                />\n              </div>\n              <div class=\"qa-go\">\n                <!-- Ghost while the preconditions are unmet, tenant once the\n                     line is addable. A disabled control painted in a faded\n                     tenant fill reads as an enabled button that lost its\n                     colour, which is the greyed-out accent the design brief\n                     bans; ghost reads as \"not yet\". -->\n                <ef-button\n                  labelKey=\"action.add\"\n                  icon=\"pi pi-plus\"\n                  variant=\"comptoir\"\n                  size=\"base\"\n                  [severity]=\"quickAddDisabled() ? 'ghost' : 'tenant'\"\n                  [disabled]=\"quickAddDisabled()\"\n                  (clickEvent)=\"addQuickProduct()\" />\n              </div>\n            </div>\n          }\n        </div>\n      </ef-card>\n\n      <!-- Lines.\n\n           ef-data-card owns the panel here instead of sitting inside an\n           ef-card: `.tbl-wrap` already draws a bordered, rounded surface, so\n           nesting it in another one would be a card inside a card. The title\n           and the card's actions move into the head slots it provides.\n\n           The columns are declared in TS (`lineColumns`) so discount and tax\n           follow the document config, and so one definition drives both the\n           desktop table and the mobile cards. Only the article column is\n           elastic; every other column holds a number of known magnitude and\n           gets a fixed track, which keeps the decimals aligned down the\n           table rather than shifting with the longest description. -->\n      <ef-data-card\n        [columns]=\"lineColumns()\"\n        [rows]=\"orderLines()\"\n        trackByField=\"id\"\n        [hidePager]=\"true\"\n        defaultDensity=\"compact\"\n        [reorderable]=\"!readonly()\"\n        [fixedLayout]=\"true\"\n        (rowReorder)=\"reorderLine($event)\"\n        mobileLayout=\"card\">\n\n        <div tbl-head-info class=\"ob-lines-head\">\n          <span class=\"strong\">{{ 'order_builder.lines' | translate }}</span>\n          <span class=\"meta\">\u00B7 {{ orderLines().length }}</span>\n        </div>\n\n        <div tbl-head-actions class=\"head-actions\">\n          @if (config().showCatalogue && !readonly()) {\n            <ef-button\n              labelKey=\"action.open_catalogue\"\n              icon=\"pi pi-box\"\n              severity=\"secondary\"\n              [text]=\"true\"\n              (clickEvent)=\"handleOpenCatalogue()\" />\n          }\n          <ef-button\n            [labelKey]=\"focusMode() ? 'order_builder.show_summary' : 'order_builder.fullscreen'\"\n            icon=\"pi pi-window-maximize\"\n            severity=\"secondary\"\n            [text]=\"true\"\n            (clickEvent)=\"toggleFocus()\" />\n        </div>\n\n        <span empty-state>{{ 'order_builder.empty' | translate }}</span>\n        <span empty-state-mobile>{{ 'order_builder.empty' | translate }}</span>\n\n        <ng-template efColumnTemplate=\"product\" let-item let-i=\"index\">\n          <div class=\"p\">\n            <span class=\"ln\">{{ i + 1 }}</span>\n            <span class=\"pp\">\n              <span class=\"nm\">{{ item.productDescription }}</span>\n            </span>\n          </div>\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"price\" let-item>\n          @if (!readonly() && isEditingCell(item, 'price')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.productUnitPrice\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [minFractionDigits]=\"2\"\n              [maxFractionDigits]=\"2\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'price')\">\n              {{ item.productUnitPrice | number: '1.2-2' : locale() }}\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"qty\" let-item>\n          @if (!readonly() && isEditingCell(item, 'qty')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.quantity\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [maxFractionDigits]=\"4\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'qty')\">\n              {{ item.quantity | number: '1.0-4' : locale() }}\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"discount\" let-item>\n          @if (!readonly() && isEditingCell(item, 'discount')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.discount\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [max]=\"100\"\n              [maxFractionDigits]=\"2\"\n              suffix=\" %\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'discount')\">\n              {{ item.discount | number: '1.0-2' : locale() }} %\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"tax\" let-item>\n          @if (!readonly() && isEditingCell(item, 'tva')) {\n            <ef-inputnumber\n              [(ngModel)]=\"item.taxRate\"\n              (ngModelChange)=\"onFieldChange(item)\"\n              [showClear]=\"false\"\n              [autofocus]=\"true\"\n              (blurEvent)=\"stopEditCell()\"\n              (keyDownEvent)=\"onEditCellKeydown($event)\"\n              [min]=\"0\"\n              [max]=\"100\"\n              [maxFractionDigits]=\"2\"\n              suffix=\" %\"\n              [locale]=\"locale()\"\n              size=\"small\"\n              class=\"!text-end\" />\n          } @else {\n            <button type=\"button\" class=\"ln-val\" [disabled]=\"readonly()\" (click)=\"startEditCell(item, 'tva')\">\n              {{ (item.taxRate ?? 0) | number: '1.0-2' : locale() }} %\n            </button>\n          }\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"subtotal\" let-item>\n          {{ calculateSubtotal(item) | number: '1.2-2' : locale() }}\n        </ng-template>\n\n        <ng-template efColumnTemplate=\"remove\" let-item>\n          <ef-button\n            icon=\"pi pi-trash\"\n            ariaLabelKey=\"common_delete\"\n            severity=\"danger\"\n            [text]=\"true\"\n            styleClass=\"ob-del\"\n            (clickEvent)=\"removeOrderLine(item.id)\" />\n        </ng-template>\n      </ef-data-card>\n\n    </div>\n\n    <!-- CONTEXT RAIL (1/3) -->\n    <aside class=\"ob-rail\">\n      <!-- Totaux (top) -->\n      <ef-card titleKey=\"order_builder.totals\" [meta]=\"currency()\">\n        <div class=\"ob-totals\">\n          <div class=\"row\">\n            <span class=\"lbl\">{{ 'order_builder.gross' | translate }}</span>\n            <span class=\"v\">{{ grossTotal() | number: '1.2-2' : locale() }}</span>\n          </div>\n          <div class=\"row discount\">\n            <span class=\"lbl\">{{ 'order_builder.discount' | translate }}</span>\n            <span class=\"v\">\u2212{{ discountTotal() | number: '1.2-2' : locale() }}</span>\n          </div>\n          <div class=\"row\">\n            <span class=\"lbl\">{{ 'order_builder.tax' | translate }}</span>\n            <span class=\"v\">{{ tvaTotal() | number: '1.2-2' : locale() }}</span>\n          </div>\n          @if (shippingTotal() > 0) {\n            <div class=\"row shipping\">\n              <span class=\"lbl\">{{ 'order_builder.shipping' | translate }}</span>\n              <span class=\"v\">{{ shippingTotal() | number: '1.2-2' : locale() }}</span>\n            </div>\n          }\n          <hr />\n          <div class=\"row grand\">\n            <span class=\"lbl\">{{ 'order_builder.grand_total' | translate }}</span>\n            <span class=\"v\">{{ finalTotal() | number: '1.2-2' : locale() }}<span class=\"cur\">{{ currency() }}</span></span>\n          </div>\n        </div>\n      </ef-card>\n\n      <!-- R\u00E9capitulatif par format -->\n      @if (productsSummary().items.length > 0) {\n        <ef-card titleKey=\"order_builder.recap\" metaKey=\"order_builder.auto\">\n          <div class=\"ob-recap\">\n            <div class=\"cols\">\n              @for (col of recapColumns(); track $index) {\n                <div class=\"grp\">\n                  @for (seg of col; track seg.code) {\n                    <div class=\"seg\">\n                      <span class=\"fmt\">{{ seg.label }}</span>\n                      <span class=\"n\">{{ seg.count | number: '1.0-0' : locale() }}</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n            <div class=\"tot\">\n              <span class=\"l\">{{ 'order_builder.total_units' | translate }}</span>\n              <span class=\"n\">{{ productsSummary().totalCount | number: '1.0-0' : locale() }}</span>\n            </div>\n          </div>\n        </ef-card>\n      }\n\n      <!-- Host cards that belong beside the totals (delivery, notes): a column\n           at desktop width, below the totals in the drawer otherwise. -->\n      <ng-content select=\"[obRail]\" />\n\n      <!-- Historique (optional, component-owned) -->\n      @if (hasAudit()) {\n        <ef-change-history\n          [entries]=\"auditEntries()\"\n          [valueLists]=\"auditValueLists()\"\n          [noteFormatter]=\"auditNoteFormatter()\"\n        />\n      }\n    </aside>\n  </div>\n\n  <!-- Floating summary FAB + backdrop -->\n  <button type=\"button\" class=\"ob-backdrop\" aria-hidden=\"true\" tabindex=\"-1\" (click)=\"toggleRail(false)\"></button>\n  <div class=\"ob-fab\" role=\"status\">\n    <div class=\"ft\">\n      <span class=\"k\">{{ 'order_builder.total_units' | translate }} \u00B7 {{ productsSummary().totalCount }}</span>\n      <span class=\"vv\">{{ finalTotal() | number: '1.2-2' : locale() }}<span class=\"cur\">{{ currency() }}</span></span>\n    </div>\n    <button type=\"button\" class=\"open\" (click)=\"toggleRail(true)\">\n      {{ 'order_builder.summary' | translate }}\n    </button>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host .order-builder{display:grid;gap:var(--s-3)}:host .order-builder .head-actions{display:flex;align-items:center;gap:6px}:host .order-builder .form-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(12,minmax(0,1fr))}:host .order-builder .form-grid>.col-3{grid-column:span 3}:host .order-builder .form-grid>.col-4{grid-column:span 4}:host .order-builder .form-grid>.col-5{grid-column:span 5}:host .order-builder .form-grid>.col-6{grid-column:span 6}@media(max-width:767px){:host .order-builder .form-grid>[class*=col-]{grid-column:span 12}}:host .order-builder .field{display:grid;gap:4px}:host .order-builder .field>label{font-size:11px;font-weight:700;color:var(--text-mute);text-transform:uppercase;letter-spacing:.06em}:host .order-builder .ob-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);align-items:start}@media(min-width:1280px){:host .order-builder .ob-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}:host .order-builder .ob-main{display:grid;gap:var(--s-3);min-width:0}:host .order-builder .ob-rail{display:grid;gap:var(--s-3);align-content:start}@media(min-width:1280px){:host .order-builder .ob-rail{position:sticky;top:44px}}:host .order-builder .ob-order-head{display:grid;gap:var(--s-4)}:host .order-builder .ob-recipient{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s-3);row-gap:2px;min-width:0;font-size:13px;line-height:1.45;color:var(--text-soft)}:host .order-builder .ob-recipient>*{flex:0 1 auto;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}:host .order-builder .ob-recipient-name{font-weight:600;color:var(--text)}:host .order-builder .ob-recipient-phone{color:var(--tenant-700);text-decoration:none;font-variant-numeric:tabular-nums}:host .order-builder .ob-recipient-phone:hover{text-decoration:underline}:host .order-builder .ob-recipient-address{flex-basis:100%;color:var(--text-mute)}:host .order-builder .qa-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:end;padding-top:var(--s-3);border-top:1px solid var(--rule-soft)}:host .order-builder .qa-combo-wrap{flex:1 1 260px;min-width:0}:host .order-builder .qa-price{flex:0 1 132px}:host .order-builder .qa-qtyf{flex:0 0 132px}:host .order-builder .qa-go{flex:0 0 auto}@media(max-width:560px){:host .order-builder .qa-combo-wrap,:host .order-builder .qa-price,:host .order-builder .qa-qtyf,:host .order-builder .qa-go{flex:1 1 100%}}:host .order-builder ef-data-card{font-size:13px}:host .order-builder ef-data-card .p{display:flex;align-items:baseline;gap:9px;line-height:1.25}:host .order-builder ef-data-card .p .ln{flex:0 0 auto;min-width:15px;text-align:end;font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--text-soft)}:host .order-builder ef-data-card .p .pp{display:grid;gap:1px;min-width:0}:host .order-builder ef-data-card .p .nm{font-weight:600;letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .order-builder ef-data-card .p .nm em{font-style:normal;color:var(--text-mute);font-weight:600}:host .order-builder ef-data-card ef-inputnumber,:host .order-builder ef-data-card ef-inputnumber .ef-field-control,:host .order-builder ef-data-card ef-inputnumber input{width:100%;min-width:0}:host .order-builder ef-data-card .num,:host .order-builder ef-data-card .total{font-family:var(--font-mono);font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums}:host .order-builder ef-data-card .ln-val{appearance:none;width:100%;margin:0;padding:5px 8px;border:1px solid transparent;border-radius:7px;background:transparent;font:inherit;font-family:var(--font-mono);font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;color:inherit;text-align:end;cursor:text;transition:background .12s ease,border-color .12s ease}:host .order-builder ef-data-card .ln-val:hover:not(:disabled){background:var(--paper);border-color:var(--rule)}:host .order-builder ef-data-card .ln-val:focus-visible{outline:none;background:var(--paper);border-color:var(--tenant, var(--rule))}:host .order-builder ef-data-card .ln-val:disabled{cursor:default;background:transparent;border-color:transparent}:host .order-builder ef-data-card .total{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 85;font-size:13.5px}:host .order-builder ef-data-card .cur{font-size:9.5px;color:var(--text-soft);margin-inline-start:3px}:host .order-builder .ob-lines-head{display:flex;align-items:baseline;gap:6px;min-width:0}:host .order-builder .ob-lines-head .strong{font-weight:700;color:var(--text)}:host .order-builder .ob-lines-head .meta{color:var(--text-soft)}:host .order-builder .ob-del{color:var(--text-soft)}:host .order-builder .ob-del:hover{color:var(--st-cancelled-fg);border-color:var(--st-cancelled-bg)}:host .order-builder .ob-totals{display:grid;gap:6px}:host .order-builder .ob-totals .row{display:flex;justify-content:space-between;align-items:baseline;gap:14px}:host .order-builder .ob-totals .row .lbl{font-size:12px;font-weight:600;color:var(--text-mute)}:host .order-builder .ob-totals .row .v{font-family:var(--font-mono);font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px}:host .order-builder .ob-totals .row.discount .v{color:var(--st-pending-fg)}:host .order-builder .ob-totals hr{border:0;border-top:1px solid var(--rule);margin:5px 0}:host .order-builder .ob-totals .grand .lbl{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 85;font-size:13.5px;color:var(--text)}:host .order-builder .ob-totals .grand .v{font-family:var(--font-display);font-variation-settings:\"opsz\" 96,\"wght\" 700,\"wdth\" 80;font-size:26px;letter-spacing:-.03em;color:var(--text)}:host .order-builder .ob-totals .grand .cur{font-family:var(--font-mono);font-size:.4em;color:var(--text-mute);margin-inline-start:4px}:host .order-builder .ob-recap .cols{display:grid;grid-template-columns:1fr 1fr}:host .order-builder .ob-recap .grp{display:flex;flex-direction:column;gap:3px;min-width:0}:host .order-builder .ob-recap .grp:first-child{padding-inline-end:14px}:host .order-builder .ob-recap .grp+.grp{padding-inline-start:14px;border-inline-start:1px solid var(--rule)}:host .order-builder .ob-recap .seg{display:flex;justify-content:space-between;align-items:baseline;gap:8px}:host .order-builder .ob-recap .seg .fmt{font-size:11.5px;font-weight:700;color:var(--text);letter-spacing:-.005em;min-width:0}:host .order-builder .ob-recap .seg .fmt:after{content:\":\";color:var(--text-soft)}:host .order-builder .ob-recap .seg .n{font-family:var(--font-mono);font-weight:700;font-size:12px;color:var(--text);font-variant-numeric:tabular-nums;flex-shrink:0}:host .order-builder .ob-recap .tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:10px;border-top:1px solid var(--rule)}:host .order-builder .ob-recap .tot .l{font-weight:700;font-size:12px}:host .order-builder .ob-recap .tot .n{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 85;font-size:18px;font-variant-numeric:tabular-nums}:host .order-builder .ob-fab{display:none;position:fixed;inset-inline-end:20px;bottom:calc(var(--app-bottom-bar, 0px) + env(safe-area-inset-bottom,0px) + 20px);z-index:30;align-items:center;gap:10px;box-sizing:border-box;block-size:var(--ef-order-fab-h);--ob-fab-ground: var(--ink-active);--ob-fab-on: var(--paper);background:var(--ob-fab-ground);color:var(--ob-fab-on);border-radius:var(--r-pill);padding-block:0;padding-inline:16px 10px;box-shadow:var(--shadow-3)}:host .order-builder .ob-fab .ft{display:grid;line-height:1.1}:host .order-builder .ob-fab .ft .k{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.65}:host .order-builder .ob-fab .ft .vv{font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 82;font-size:16px}:host .order-builder .ob-fab .ft .vv .cur{font-family:var(--font-mono);font-size:.6em;opacity:.7;margin-inline-start:3px}:host .order-builder .ob-fab .open{appearance:none;cursor:pointer;border:0;background:color-mix(in srgb,var(--ob-fab-on) 14%,transparent);color:var(--ob-fab-on);font:inherit;font-size:12px;font-weight:700;border-radius:var(--r-pill);padding:8px 14px;display:inline-flex;align-items:center;gap:6px}:host .order-builder .ob-fab .open:hover{background:color-mix(in srgb,var(--ob-fab-on) 24%,transparent)}:host .order-builder .ob-fab .open:focus-visible{outline:2px solid var(--ob-fab-on);outline-offset:2px}:host .order-builder .ob-backdrop{display:none;position:fixed;inset:0;z-index:38;background:#0f11156b;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}:host .order-builder.ob-collapsed .ob-grid{grid-template-columns:minmax(0,1fr)}:host .order-builder.ob-collapsed .ob-fab{display:flex}:host .order-builder.ob-collapsed .ob-rail{position:fixed;top:0;inset-inline-end:0;height:100dvh;width:min(360px,92vw);z-index:40;background:var(--paper);border-inline-start:1px solid var(--rule);box-shadow:var(--shadow-3);padding:14px;overflow:auto;gap:var(--s-3);transform:translate(101%);transition:transform var(--t-base) var(--ease-out)}[dir=rtl] :host .order-builder.ob-collapsed .ob-rail{transform:translate(-101%)}:host .order-builder.ob-collapsed.ob-rail-open .ob-rail{transform:none}:host .order-builder.ob-collapsed.ob-rail-open .ob-backdrop{display:block}@media(max-width:1279px){:host .order-builder .ob-grid{grid-template-columns:minmax(0,1fr)}:host .order-builder .ob-fab{display:flex}:host .order-builder .ob-rail{position:fixed;top:0;inset-inline-end:0;height:100dvh;width:min(360px,92vw);z-index:40;background:var(--paper);border-inline-start:1px solid var(--rule);box-shadow:var(--shadow-3);padding:14px;overflow:auto;gap:var(--s-3);transform:translate(101%);transition:transform var(--t-base) var(--ease-out)}[dir=rtl] :host .order-builder .ob-rail{transform:translate(-101%)}:host .order-builder.ob-rail-open .ob-rail{transform:none}:host .order-builder.ob-rail-open .ob-backdrop{display:block}}:host ef-data-card .nm,:host ef-data-card .num,:host ef-data-card .ln-val,:host .ob-totals .v{unicode-bidi:plaintext}@media(pointer:coarse){:host .order-builder .ob-fab .open{min-block-size:var(--hit-touch)}:host ef-data-card .ln-val{min-block-size:var(--hit-field)}:host .order-builder .ob-recipient-phone{line-height:var(--hit-touch)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfSelectComponent, selector: "ef-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "group", "optionGroupLabel", "optionGroupChildren", "size", "fluid", "inline", "appendTo", "multiple", "filter", "filterBy", "filterPlaceholder", "filterPlaceholderKey", "autofocusFilter", "autofocus", "editable", "loading", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "multiDisplay", "showToggleAll", "emptyMessage", "emptyMessageKey", "emptyFilterMessage", "emptyFilterMessageKey", "styleClass", "panelStyleClass", "filterByKeys", "variant", "value"], outputs: ["selectionChangeEvent", "filterChangeEvent", "panelShowEvent", "panelHideEvent"] }, { kind: "component", type: EfDatepickerAdvancedComponent, selector: "ef-datepicker-advanced", inputs: ["triggerLabelKey", "triggerLabel", "presets", "activePreset", "start", "end", "allowCustomRange", "allowAllTime", "mode", "selectionMode", "variant", "showTime", "valueFormat"], outputs: ["rangeChange", "opened", "closed"] }, { kind: "component", type: EfInputNumberComponent, selector: "ef-inputnumber", inputs: ["value", "invalid", "format", "showButtons", "buttonLayout", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "prefix", "suffix", "currency", "currencyDisplay", "locale", "localeMatcher", "mode", "useGrouping", "minFractionDigits", "maxFractionDigits", "min", "max", "step", "allowEmpty", "inputSize", "size", "maxlength", "minlength", "pattern", "tabindex", "title", "ariaLabelledBy", "inputStyle", "inputStyleClass", "style", "styleClass", "primeNgVariant", "autofocus", "autocomplete", "fluid", "inline", "variant", "pt", "ptOptions", "dt", "unstyled"], outputs: ["inputEvent", "valueChangeEvent", "focusEvent", "blurEvent", "keyDownEvent", "clearEvent"] }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "labelParams", "for", "styleClass", "required"] }, { kind: "component", type: EfButtonComponent, selector: "ef-button", inputs: ["label", "labelKey", "icon", "ariaLabelKey", "variant", "severity", "size", "disabled", "rounded", "outlined", "raised", "text", "loading", "styleClass", "type", "badge", "badgeSeverity", "tooltip", "tooltipKey", "tooltipPosition", "autofocus"], outputs: ["clickEvent"] }, { kind: "component", type: EfCardComponent, selector: "ef-card", inputs: ["titleKey", "title", "metaKey", "meta", "tone", "forceHead", "hasFoot", "collapsible", "overflowVisible", "loading", "skeleton", "skeletonRows", "skeletonHeight", "collapsed"], outputs: ["collapsedChange"] }, { kind: "component", type: EfChangeHistoryComponent, selector: "ef-change-history", inputs: ["entries", "titleKey", "emptyKey", "limit", "previewLimit", "collapsible", "startCollapsed", "valueLists", "noteFormatter", "entityType"] }, { kind: "component", type: EfProductTypeaheadComponent, selector: "ef-product-typeahead", inputs: ["products", "productKeyField", "placeholderKey", "disabled", "currency", "locale", "showVariants", "priceList"], outputs: ["productSelect"] }, { kind: "component", type: EfDataCardComponent, selector: "ef-data-card", inputs: ["mobileLayout", "columns", "rows", "trackByField", "pageNumber", "pageSize", "totalCount", "pageSizeOptions", "hidePager", "sort", "loading", "errorMsg", "loadingKey", "rowDoubleClickable", "rowPressed", "rowDisabled", "hasActionsColumn", "rowActionsContext", "showViewAction", "showEditAction", "showDuplicateAction", "showDeleteAction", "rowActionState", "showDensityControl", "showColumnPicker", "showExportControl", "exporting", "screenContext", "searchTerm", "tableKey", "defaultDensity", "reorderable", "fixedLayout"], outputs: ["pageChange", "pageSizeChange", "sortChange", "rowDoubleClick", "rowAction", "exportRequest", "clearSearch", "retry", "rowReorder"] }, { kind: "directive", type: EfColumnTemplateDirective, selector: "[efColumnTemplate]", inputs: ["efColumnTemplate"] }, { kind: "pipe", type: i1$3.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfOrderBuilderComponent, decorators: [{
             type: Component,
@@ -10016,7 +10096,7 @@ class EfTabsComponent {
         return item.value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfTabsComponent, isStandalone: true, selector: "ef-tabs", inputs: { items: "items", value: "value", variant: "variant", module: "module", overflow: ["overflow", "overflow", booleanAttribute], hideCounts: ["hideCounts", "hideCounts", booleanAttribute], ariaLabel: "ariaLabel", ariaLabelKey: "ariaLabelKey", dirtyLabelKey: "dirtyLabelKey" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.ef-tabs--pill": "variant === 'pill'", "class.ef-tabs--underline": "variant === 'underline'", "class.ef-tabs--overflow": "overflow", "attr.data-module": "module ?? null" } }, queries: [{ propertyName: "panels", predicate: EfTabPanelDirective }], viewQueries: [{ propertyName: "tabEls", predicate: ["tabEl"], descendants: true }], ngImport: i0, template: "<div class=\"ef-tabs__list\" role=\"tablist\" [attr.aria-label]=\"ariaLabelKey ? (ariaLabelKey | translate) : ariaLabel\">\n  @for (item of items; track trackValue($index, item); let i = $index) {\n    <button\n      #tabEl\n      type=\"button\"\n      class=\"ef-tabs__tab\"\n      role=\"tab\"\n      [class.is-active]=\"item.value === value\"\n      [class.is-disabled]=\"!!item.disabled\"\n      [class.is-danger]=\"item.tone === 'danger'\"\n      [attr.id]=\"item.id || null\"\n      [attr.aria-controls]=\"item.panelId || null\"\n      [attr.aria-selected]=\"item.value === value\"\n      [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n      [disabled]=\"item.disabled\"\n      [tabindex]=\"item.value === value ? 0 : -1\"\n      (click)=\"select(item)\"\n      (keydown)=\"onKeydown($event, i)\"\n    >\n      @if (item.icon) {\n        <i class=\"ef-tabs__ico\" [class]=\"item.icon\" aria-hidden=\"true\"></i>\n      }\n      <span class=\"ef-tabs__label\">\n        @if (item.labelKey) {\n          {{ item.labelKey | translate }}\n        } @else {\n          {{ item.label }}\n        }\n      </span>\n      @if (!hideCounts && item.count !== undefined && item.count !== null) {\n        <span class=\"ef-tabs__count\">{{ item.count }}</span>\n      }\n      @if (item.noteKey) {\n        <span class=\"ef-tabs__note\">{{ item.noteKey | translate }}</span>\n      }\n      @if (item.dirty) {\n        <span class=\"ef-tabs__dot\" [attr.aria-label]=\"dirtyLabelKey | translate\"></span>\n      }\n    </button>\n  }\n</div>\n\n@if (hasPanels()) {\n  <div class=\"ef-tabs__panels\" role=\"tabpanel\">\n    @if (activePanel(); as tpl) {\n      <ng-container [ngTemplateOutlet]=\"tpl\"></ng-container>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0}.ef-tabs__list{position:relative;display:flex;align-items:stretch;gap:2px;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.ef-tabs__list>*{flex:0 0 auto}.ef-tabs__panels{display:block;padding-top:var(--s-5);min-width:0;animation:ef-tabs-panel-in var(--t-base, .26s) var(--ease-out, ease-out)}@keyframes ef-tabs-panel-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.ef-tabs__list::-webkit-scrollbar{display:none}.ef-tabs__tab{appearance:none;background:transparent;border:0;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.005em;color:var(--text-mute);cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:color var(--t-fast, .14s) var(--ease-out, ease-out),background-color var(--t-fast, .14s) var(--ease-out, ease-out),border-color var(--t-base, .26s) var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1))}.ef-tabs__tab:focus-visible{outline:0}.ef-tabs__tab.is-disabled,.ef-tabs__tab[disabled]{opacity:.4;cursor:not-allowed}.ef-tabs__ico{font-size:13px;opacity:.75;flex-shrink:0}.ef-tabs__tab.is-active .ef-tabs__ico{opacity:1}.ef-tabs__count{font-family:var(--font-mono);font-size:10.5px;font-weight:700;background:var(--paper);border:1px solid var(--rule);color:var(--text-mute);padding:1px 7px;border-radius:var(--r-pill);min-width:20px;text-align:center;line-height:1.5;font-variant-numeric:tabular-nums}.ef-tabs__dot{width:6px;height:6px;border-radius:50%;background:var(--tenant-500);flex-shrink:0}.ef-tabs__note{font-size:11px;font-weight:500}:host(.ef-tabs--pill) .ef-tabs__list{background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-pill);padding:4px;gap:2px}:host(.ef-tabs--pill) .ef-tabs__tab{min-height:var(--hit, 32px);padding:7px 14px;border-radius:var(--r-pill)}:host(.ef-tabs--pill) .ef-tabs__tab:hover:not(.is-active):not(.is-disabled){color:var(--text)}:host(.ef-tabs--pill) .ef-tabs__tab:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active{background:var(--ink-active, #0f1115);color:var(--paper)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active .ef-tabs__count{background:#ffffff2e;border-color:transparent;color:var(--paper)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active .ef-tabs__dot{background:var(--paper)}:host(.ef-tabs--underline) .ef-tabs__list{display:flex;border-bottom:1px solid var(--rule);padding:0;gap:2px}:host(.ef-tabs--underline) .ef-tabs__tab{min-height:42px;padding:11px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:var(--r-sm) var(--r-sm) 0 0;font-size:13.5px}:host(.ef-tabs--underline) .ef-tabs__tab:hover:not(.is-active):not(.is-disabled){color:var(--text);background:var(--paper)}:host(.ef-tabs--underline) .ef-tabs__tab:focus-visible{background:var(--paper-alt);box-shadow:inset 0 0 0 2px var(--tenant-200)}:host(.ef-tabs--underline) .ef-tabs__tab.is-active{color:var(--text);border-bottom-color:var(--module, var(--ink-active))}:host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__count{background:color-mix(in srgb,var(--module, var(--ink-active)) 14%,var(--paper-alt));border-color:transparent;color:var(--module, var(--ink-active))}:host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__dot{background:var(--module, var(--tenant-500))}.ef-tabs__tab.is-danger,:host(.ef-tabs--pill) .ef-tabs__tab.is-danger:hover:not(.is-active):not(.is-disabled),:host(.ef-tabs--underline) .ef-tabs__tab.is-danger:hover:not(.is-active):not(.is-disabled){color:var(--st-cancelled-fg)}:host(.ef-tabs--pill) .ef-tabs__tab.is-danger.is-active{color:var(--paper);box-shadow:inset 0 0 0 2px var(--st-cancelled-fg)}:host(.ef-tabs--underline) .ef-tabs__tab.is-danger.is-active{color:var(--st-cancelled-fg);border-bottom-color:var(--st-cancelled-fg)}:host(.ef-tabs--pill) .ef-tabs__tab.is-danger.is-active:focus-visible{box-shadow:inset 0 0 0 2px var(--st-cancelled-fg),0 0 0 2px color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent)}:host[data-module=sales]{--module: var(--m-sales)}:host[data-module=purchase]{--module: var(--m-purchase)}:host[data-module=stock]{--module: var(--m-stock)}:host[data-module=pos]{--module: var(--m-pos)}:host[data-module=marketing]{--module: var(--m-marketing)}:host[data-module=store]{--module: var(--m-store)}:host[data-module=finance]{--module: var(--m-finance)}:host[data-module=admin]{--module: var(--m-admin)}:host(.ef-tabs--overflow){position:relative;display:block}:host(.ef-tabs--overflow) .ef-tabs__list{display:flex;width:100%}:host(.ef-tabs--overflow):before,:host(.ef-tabs--overflow):after{content:\"\";position:absolute;top:0;bottom:0;width:36px;pointer-events:none;z-index:2}:host(.ef-tabs--overflow):before{inset-inline-start:0;background:linear-gradient(to right,var(--paper-alt),transparent)}:host(.ef-tabs--overflow):after{inset-inline-end:0;background:linear-gradient(to left,var(--paper-alt),transparent)}[data-theme=dark] :host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__count{background:color-mix(in srgb,var(--module, var(--ink-active)) 28%,transparent)}@media(pointer:coarse){:host(.ef-tabs--pill) .ef-tabs__tab,:host(.ef-tabs--underline) .ef-tabs__tab{min-height:var(--hit-touch)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfTabsComponent, isStandalone: true, selector: "ef-tabs", inputs: { items: "items", value: "value", variant: "variant", module: "module", overflow: ["overflow", "overflow", booleanAttribute], hideCounts: ["hideCounts", "hideCounts", booleanAttribute], ariaLabel: "ariaLabel", ariaLabelKey: "ariaLabelKey", dirtyLabelKey: "dirtyLabelKey" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.ef-tabs--pill": "variant === 'pill'", "class.ef-tabs--underline": "variant === 'underline'", "class.ef-tabs--overflow": "overflow", "attr.data-module": "module ?? null" } }, queries: [{ propertyName: "panels", predicate: EfTabPanelDirective }], viewQueries: [{ propertyName: "tabEls", predicate: ["tabEl"], descendants: true }], ngImport: i0, template: "<div class=\"ef-tabs__list\" role=\"tablist\" [attr.aria-label]=\"ariaLabelKey ? (ariaLabelKey | translate) : ariaLabel\">\n  @for (item of items; track trackValue($index, item); let i = $index) {\n    <button\n      #tabEl\n      type=\"button\"\n      class=\"ef-tabs__tab\"\n      role=\"tab\"\n      [class.is-active]=\"item.value === value\"\n      [class.is-disabled]=\"!!item.disabled\"\n      [class.is-danger]=\"item.tone === 'danger'\"\n      [attr.id]=\"item.id || null\"\n      [attr.aria-controls]=\"item.panelId || null\"\n      [attr.aria-selected]=\"item.value === value\"\n      [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n      [disabled]=\"item.disabled\"\n      [tabindex]=\"item.value === value ? 0 : -1\"\n      (click)=\"select(item)\"\n      (keydown)=\"onKeydown($event, i)\"\n    >\n      @if (item.icon) {\n        <i class=\"ef-tabs__ico\" [class]=\"item.icon\" aria-hidden=\"true\"></i>\n      }\n      <span class=\"ef-tabs__label\">\n        @if (item.labelKey) {\n          {{ item.labelKey | translate }}\n        } @else {\n          {{ item.label }}\n        }\n      </span>\n      @if (!hideCounts && item.count !== undefined && item.count !== null) {\n        <span class=\"ef-tabs__count\">{{ item.count }}</span>\n      }\n      @if (item.noteKey) {\n        <span class=\"ef-tabs__note\">{{ item.noteKey | translate }}</span>\n      }\n      @if (item.badgeKey) {\n        <!-- Whitespace inside, as in the label, so the accessible name\n             reads \"manquant personnalis\u00E9\", not one word. -->\n        <span class=\"ef-tabs__badge\">\n          {{ item.badgeKey | translate }}\n        </span>\n      }\n      @if (item.dirty) {\n        <span class=\"ef-tabs__dot\" [attr.aria-label]=\"dirtyLabelKey | translate\"></span>\n      }\n    </button>\n  }\n</div>\n\n@if (hasPanels()) {\n  <div class=\"ef-tabs__panels\" role=\"tabpanel\">\n    @if (activePanel(); as tpl) {\n      <ng-container [ngTemplateOutlet]=\"tpl\"></ng-container>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0}.ef-tabs__list{position:relative;display:flex;align-items:stretch;gap:2px;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.ef-tabs__list>*{flex:0 0 auto}.ef-tabs__panels{display:block;padding-top:var(--s-5);min-width:0;animation:ef-tabs-panel-in var(--t-base, .26s) var(--ease-out, ease-out)}@keyframes ef-tabs-panel-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.ef-tabs__list::-webkit-scrollbar{display:none}.ef-tabs__tab{appearance:none;background:transparent;border:0;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.005em;color:var(--text-mute);cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:color var(--t-fast, .14s) var(--ease-out, ease-out),background-color var(--t-fast, .14s) var(--ease-out, ease-out),border-color var(--t-base, .26s) var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1))}.ef-tabs__tab:focus-visible{outline:0}.ef-tabs__tab.is-disabled,.ef-tabs__tab[disabled]{opacity:.4;cursor:not-allowed}.ef-tabs__ico{font-size:13px;opacity:.75;flex-shrink:0}.ef-tabs__tab.is-active .ef-tabs__ico{opacity:1}.ef-tabs__count{font-family:var(--font-mono);font-size:10.5px;font-weight:700;background:var(--paper);border:1px solid var(--rule);color:var(--text-mute);padding:1px 7px;border-radius:var(--r-pill);min-width:20px;text-align:center;line-height:1.5;font-variant-numeric:tabular-nums}.ef-tabs__dot{width:6px;height:6px;border-radius:50%;background:var(--tenant-500);flex-shrink:0}.ef-tabs__note{font-size:11px;font-weight:500}.ef-tabs__badge{font-size:10.5px;font-weight:600;line-height:1.5;padding:0 6px;border:1px solid currentColor;border-radius:var(--r-pill);white-space:nowrap}:host(.ef-tabs--pill) .ef-tabs__list{background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-pill);padding:4px;gap:2px}:host(.ef-tabs--pill) .ef-tabs__tab{min-height:var(--hit, 32px);padding:7px 14px;border-radius:var(--r-pill)}:host(.ef-tabs--pill) .ef-tabs__tab:hover:not(.is-active):not(.is-disabled){color:var(--text)}:host(.ef-tabs--pill) .ef-tabs__tab:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active{background:var(--ink-active, #0f1115);color:var(--paper)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active .ef-tabs__count{background:#ffffff2e;border-color:transparent;color:var(--paper)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active .ef-tabs__dot{background:var(--paper)}:host(.ef-tabs--underline) .ef-tabs__list{display:flex;border-bottom:1px solid var(--rule);padding:0;gap:2px}:host(.ef-tabs--underline) .ef-tabs__tab{min-height:42px;padding:11px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:var(--r-sm) var(--r-sm) 0 0;font-size:13.5px}:host(.ef-tabs--underline) .ef-tabs__tab:hover:not(.is-active):not(.is-disabled){color:var(--text);background:var(--paper)}:host(.ef-tabs--underline) .ef-tabs__tab:focus-visible{background:var(--paper-alt);box-shadow:inset 0 0 0 2px var(--tenant-200)}:host(.ef-tabs--underline) .ef-tabs__tab.is-active{color:var(--text);border-bottom-color:var(--module, var(--ink-active))}:host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__count{background:color-mix(in srgb,var(--module, var(--ink-active)) 14%,var(--paper-alt));border-color:transparent;color:var(--module, var(--ink-active))}:host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__dot{background:var(--module, var(--tenant-500))}.ef-tabs__tab.is-danger,:host(.ef-tabs--pill) .ef-tabs__tab.is-danger:hover:not(.is-active):not(.is-disabled),:host(.ef-tabs--underline) .ef-tabs__tab.is-danger:hover:not(.is-active):not(.is-disabled){color:var(--st-cancelled-fg)}:host(.ef-tabs--pill) .ef-tabs__tab.is-danger.is-active{color:var(--paper);box-shadow:inset 0 0 0 2px var(--st-cancelled-fg)}:host(.ef-tabs--underline) .ef-tabs__tab.is-danger.is-active{color:var(--st-cancelled-fg);border-bottom-color:var(--st-cancelled-fg)}:host(.ef-tabs--pill) .ef-tabs__tab.is-danger.is-active:focus-visible{box-shadow:inset 0 0 0 2px var(--st-cancelled-fg),0 0 0 2px color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent)}:host[data-module=sales]{--module: var(--m-sales)}:host[data-module=purchase]{--module: var(--m-purchase)}:host[data-module=stock]{--module: var(--m-stock)}:host[data-module=pos]{--module: var(--m-pos)}:host[data-module=marketing]{--module: var(--m-marketing)}:host[data-module=store]{--module: var(--m-store)}:host[data-module=finance]{--module: var(--m-finance)}:host[data-module=admin]{--module: var(--m-admin)}:host(.ef-tabs--overflow){position:relative;display:block}:host(.ef-tabs--overflow) .ef-tabs__list{display:flex;width:100%}:host(.ef-tabs--overflow):before,:host(.ef-tabs--overflow):after{content:\"\";position:absolute;top:0;bottom:0;width:36px;pointer-events:none;z-index:2}:host(.ef-tabs--overflow):before{inset-inline-start:0;background:linear-gradient(to right,var(--paper-alt),transparent)}:host(.ef-tabs--overflow):after{inset-inline-end:0;background:linear-gradient(to left,var(--paper-alt),transparent)}[data-theme=dark] :host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__count{background:color-mix(in srgb,var(--module, var(--ink-active)) 28%,transparent)}@media(pointer:coarse){:host(.ef-tabs--pill) .ef-tabs__tab,:host(.ef-tabs--underline) .ef-tabs__tab{min-height:var(--hit-touch)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfTabsComponent, decorators: [{
             type: Component,
@@ -10025,7 +10105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         '[class.ef-tabs--underline]': "variant === 'underline'",
                         '[class.ef-tabs--overflow]': 'overflow',
                         '[attr.data-module]': 'module ?? null',
-                    }, template: "<div class=\"ef-tabs__list\" role=\"tablist\" [attr.aria-label]=\"ariaLabelKey ? (ariaLabelKey | translate) : ariaLabel\">\n  @for (item of items; track trackValue($index, item); let i = $index) {\n    <button\n      #tabEl\n      type=\"button\"\n      class=\"ef-tabs__tab\"\n      role=\"tab\"\n      [class.is-active]=\"item.value === value\"\n      [class.is-disabled]=\"!!item.disabled\"\n      [class.is-danger]=\"item.tone === 'danger'\"\n      [attr.id]=\"item.id || null\"\n      [attr.aria-controls]=\"item.panelId || null\"\n      [attr.aria-selected]=\"item.value === value\"\n      [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n      [disabled]=\"item.disabled\"\n      [tabindex]=\"item.value === value ? 0 : -1\"\n      (click)=\"select(item)\"\n      (keydown)=\"onKeydown($event, i)\"\n    >\n      @if (item.icon) {\n        <i class=\"ef-tabs__ico\" [class]=\"item.icon\" aria-hidden=\"true\"></i>\n      }\n      <span class=\"ef-tabs__label\">\n        @if (item.labelKey) {\n          {{ item.labelKey | translate }}\n        } @else {\n          {{ item.label }}\n        }\n      </span>\n      @if (!hideCounts && item.count !== undefined && item.count !== null) {\n        <span class=\"ef-tabs__count\">{{ item.count }}</span>\n      }\n      @if (item.noteKey) {\n        <span class=\"ef-tabs__note\">{{ item.noteKey | translate }}</span>\n      }\n      @if (item.dirty) {\n        <span class=\"ef-tabs__dot\" [attr.aria-label]=\"dirtyLabelKey | translate\"></span>\n      }\n    </button>\n  }\n</div>\n\n@if (hasPanels()) {\n  <div class=\"ef-tabs__panels\" role=\"tabpanel\">\n    @if (activePanel(); as tpl) {\n      <ng-container [ngTemplateOutlet]=\"tpl\"></ng-container>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0}.ef-tabs__list{position:relative;display:flex;align-items:stretch;gap:2px;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.ef-tabs__list>*{flex:0 0 auto}.ef-tabs__panels{display:block;padding-top:var(--s-5);min-width:0;animation:ef-tabs-panel-in var(--t-base, .26s) var(--ease-out, ease-out)}@keyframes ef-tabs-panel-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.ef-tabs__list::-webkit-scrollbar{display:none}.ef-tabs__tab{appearance:none;background:transparent;border:0;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.005em;color:var(--text-mute);cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:color var(--t-fast, .14s) var(--ease-out, ease-out),background-color var(--t-fast, .14s) var(--ease-out, ease-out),border-color var(--t-base, .26s) var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1))}.ef-tabs__tab:focus-visible{outline:0}.ef-tabs__tab.is-disabled,.ef-tabs__tab[disabled]{opacity:.4;cursor:not-allowed}.ef-tabs__ico{font-size:13px;opacity:.75;flex-shrink:0}.ef-tabs__tab.is-active .ef-tabs__ico{opacity:1}.ef-tabs__count{font-family:var(--font-mono);font-size:10.5px;font-weight:700;background:var(--paper);border:1px solid var(--rule);color:var(--text-mute);padding:1px 7px;border-radius:var(--r-pill);min-width:20px;text-align:center;line-height:1.5;font-variant-numeric:tabular-nums}.ef-tabs__dot{width:6px;height:6px;border-radius:50%;background:var(--tenant-500);flex-shrink:0}.ef-tabs__note{font-size:11px;font-weight:500}:host(.ef-tabs--pill) .ef-tabs__list{background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-pill);padding:4px;gap:2px}:host(.ef-tabs--pill) .ef-tabs__tab{min-height:var(--hit, 32px);padding:7px 14px;border-radius:var(--r-pill)}:host(.ef-tabs--pill) .ef-tabs__tab:hover:not(.is-active):not(.is-disabled){color:var(--text)}:host(.ef-tabs--pill) .ef-tabs__tab:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active{background:var(--ink-active, #0f1115);color:var(--paper)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active .ef-tabs__count{background:#ffffff2e;border-color:transparent;color:var(--paper)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active .ef-tabs__dot{background:var(--paper)}:host(.ef-tabs--underline) .ef-tabs__list{display:flex;border-bottom:1px solid var(--rule);padding:0;gap:2px}:host(.ef-tabs--underline) .ef-tabs__tab{min-height:42px;padding:11px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:var(--r-sm) var(--r-sm) 0 0;font-size:13.5px}:host(.ef-tabs--underline) .ef-tabs__tab:hover:not(.is-active):not(.is-disabled){color:var(--text);background:var(--paper)}:host(.ef-tabs--underline) .ef-tabs__tab:focus-visible{background:var(--paper-alt);box-shadow:inset 0 0 0 2px var(--tenant-200)}:host(.ef-tabs--underline) .ef-tabs__tab.is-active{color:var(--text);border-bottom-color:var(--module, var(--ink-active))}:host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__count{background:color-mix(in srgb,var(--module, var(--ink-active)) 14%,var(--paper-alt));border-color:transparent;color:var(--module, var(--ink-active))}:host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__dot{background:var(--module, var(--tenant-500))}.ef-tabs__tab.is-danger,:host(.ef-tabs--pill) .ef-tabs__tab.is-danger:hover:not(.is-active):not(.is-disabled),:host(.ef-tabs--underline) .ef-tabs__tab.is-danger:hover:not(.is-active):not(.is-disabled){color:var(--st-cancelled-fg)}:host(.ef-tabs--pill) .ef-tabs__tab.is-danger.is-active{color:var(--paper);box-shadow:inset 0 0 0 2px var(--st-cancelled-fg)}:host(.ef-tabs--underline) .ef-tabs__tab.is-danger.is-active{color:var(--st-cancelled-fg);border-bottom-color:var(--st-cancelled-fg)}:host(.ef-tabs--pill) .ef-tabs__tab.is-danger.is-active:focus-visible{box-shadow:inset 0 0 0 2px var(--st-cancelled-fg),0 0 0 2px color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent)}:host[data-module=sales]{--module: var(--m-sales)}:host[data-module=purchase]{--module: var(--m-purchase)}:host[data-module=stock]{--module: var(--m-stock)}:host[data-module=pos]{--module: var(--m-pos)}:host[data-module=marketing]{--module: var(--m-marketing)}:host[data-module=store]{--module: var(--m-store)}:host[data-module=finance]{--module: var(--m-finance)}:host[data-module=admin]{--module: var(--m-admin)}:host(.ef-tabs--overflow){position:relative;display:block}:host(.ef-tabs--overflow) .ef-tabs__list{display:flex;width:100%}:host(.ef-tabs--overflow):before,:host(.ef-tabs--overflow):after{content:\"\";position:absolute;top:0;bottom:0;width:36px;pointer-events:none;z-index:2}:host(.ef-tabs--overflow):before{inset-inline-start:0;background:linear-gradient(to right,var(--paper-alt),transparent)}:host(.ef-tabs--overflow):after{inset-inline-end:0;background:linear-gradient(to left,var(--paper-alt),transparent)}[data-theme=dark] :host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__count{background:color-mix(in srgb,var(--module, var(--ink-active)) 28%,transparent)}@media(pointer:coarse){:host(.ef-tabs--pill) .ef-tabs__tab,:host(.ef-tabs--underline) .ef-tabs__tab{min-height:var(--hit-touch)}}\n"] }]
+                    }, template: "<div class=\"ef-tabs__list\" role=\"tablist\" [attr.aria-label]=\"ariaLabelKey ? (ariaLabelKey | translate) : ariaLabel\">\n  @for (item of items; track trackValue($index, item); let i = $index) {\n    <button\n      #tabEl\n      type=\"button\"\n      class=\"ef-tabs__tab\"\n      role=\"tab\"\n      [class.is-active]=\"item.value === value\"\n      [class.is-disabled]=\"!!item.disabled\"\n      [class.is-danger]=\"item.tone === 'danger'\"\n      [attr.id]=\"item.id || null\"\n      [attr.aria-controls]=\"item.panelId || null\"\n      [attr.aria-selected]=\"item.value === value\"\n      [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n      [disabled]=\"item.disabled\"\n      [tabindex]=\"item.value === value ? 0 : -1\"\n      (click)=\"select(item)\"\n      (keydown)=\"onKeydown($event, i)\"\n    >\n      @if (item.icon) {\n        <i class=\"ef-tabs__ico\" [class]=\"item.icon\" aria-hidden=\"true\"></i>\n      }\n      <span class=\"ef-tabs__label\">\n        @if (item.labelKey) {\n          {{ item.labelKey | translate }}\n        } @else {\n          {{ item.label }}\n        }\n      </span>\n      @if (!hideCounts && item.count !== undefined && item.count !== null) {\n        <span class=\"ef-tabs__count\">{{ item.count }}</span>\n      }\n      @if (item.noteKey) {\n        <span class=\"ef-tabs__note\">{{ item.noteKey | translate }}</span>\n      }\n      @if (item.badgeKey) {\n        <!-- Whitespace inside, as in the label, so the accessible name\n             reads \"manquant personnalis\u00E9\", not one word. -->\n        <span class=\"ef-tabs__badge\">\n          {{ item.badgeKey | translate }}\n        </span>\n      }\n      @if (item.dirty) {\n        <span class=\"ef-tabs__dot\" [attr.aria-label]=\"dirtyLabelKey | translate\"></span>\n      }\n    </button>\n  }\n</div>\n\n@if (hasPanels()) {\n  <div class=\"ef-tabs__panels\" role=\"tabpanel\">\n    @if (activePanel(); as tpl) {\n      <ng-container [ngTemplateOutlet]=\"tpl\"></ng-container>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0}.ef-tabs__list{position:relative;display:flex;align-items:stretch;gap:2px;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.ef-tabs__list>*{flex:0 0 auto}.ef-tabs__panels{display:block;padding-top:var(--s-5);min-width:0;animation:ef-tabs-panel-in var(--t-base, .26s) var(--ease-out, ease-out)}@keyframes ef-tabs-panel-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.ef-tabs__list::-webkit-scrollbar{display:none}.ef-tabs__tab{appearance:none;background:transparent;border:0;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.005em;color:var(--text-mute);cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:color var(--t-fast, .14s) var(--ease-out, ease-out),background-color var(--t-fast, .14s) var(--ease-out, ease-out),border-color var(--t-base, .26s) var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1))}.ef-tabs__tab:focus-visible{outline:0}.ef-tabs__tab.is-disabled,.ef-tabs__tab[disabled]{opacity:.4;cursor:not-allowed}.ef-tabs__ico{font-size:13px;opacity:.75;flex-shrink:0}.ef-tabs__tab.is-active .ef-tabs__ico{opacity:1}.ef-tabs__count{font-family:var(--font-mono);font-size:10.5px;font-weight:700;background:var(--paper);border:1px solid var(--rule);color:var(--text-mute);padding:1px 7px;border-radius:var(--r-pill);min-width:20px;text-align:center;line-height:1.5;font-variant-numeric:tabular-nums}.ef-tabs__dot{width:6px;height:6px;border-radius:50%;background:var(--tenant-500);flex-shrink:0}.ef-tabs__note{font-size:11px;font-weight:500}.ef-tabs__badge{font-size:10.5px;font-weight:600;line-height:1.5;padding:0 6px;border:1px solid currentColor;border-radius:var(--r-pill);white-space:nowrap}:host(.ef-tabs--pill) .ef-tabs__list{background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--r-pill);padding:4px;gap:2px}:host(.ef-tabs--pill) .ef-tabs__tab{min-height:var(--hit, 32px);padding:7px 14px;border-radius:var(--r-pill)}:host(.ef-tabs--pill) .ef-tabs__tab:hover:not(.is-active):not(.is-disabled){color:var(--text)}:host(.ef-tabs--pill) .ef-tabs__tab:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active{background:var(--ink-active, #0f1115);color:var(--paper)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active .ef-tabs__count{background:#ffffff2e;border-color:transparent;color:var(--paper)}:host(.ef-tabs--pill) .ef-tabs__tab.is-active .ef-tabs__dot{background:var(--paper)}:host(.ef-tabs--underline) .ef-tabs__list{display:flex;border-bottom:1px solid var(--rule);padding:0;gap:2px}:host(.ef-tabs--underline) .ef-tabs__tab{min-height:42px;padding:11px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:var(--r-sm) var(--r-sm) 0 0;font-size:13.5px}:host(.ef-tabs--underline) .ef-tabs__tab:hover:not(.is-active):not(.is-disabled){color:var(--text);background:var(--paper)}:host(.ef-tabs--underline) .ef-tabs__tab:focus-visible{background:var(--paper-alt);box-shadow:inset 0 0 0 2px var(--tenant-200)}:host(.ef-tabs--underline) .ef-tabs__tab.is-active{color:var(--text);border-bottom-color:var(--module, var(--ink-active))}:host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__count{background:color-mix(in srgb,var(--module, var(--ink-active)) 14%,var(--paper-alt));border-color:transparent;color:var(--module, var(--ink-active))}:host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__dot{background:var(--module, var(--tenant-500))}.ef-tabs__tab.is-danger,:host(.ef-tabs--pill) .ef-tabs__tab.is-danger:hover:not(.is-active):not(.is-disabled),:host(.ef-tabs--underline) .ef-tabs__tab.is-danger:hover:not(.is-active):not(.is-disabled){color:var(--st-cancelled-fg)}:host(.ef-tabs--pill) .ef-tabs__tab.is-danger.is-active{color:var(--paper);box-shadow:inset 0 0 0 2px var(--st-cancelled-fg)}:host(.ef-tabs--underline) .ef-tabs__tab.is-danger.is-active{color:var(--st-cancelled-fg);border-bottom-color:var(--st-cancelled-fg)}:host(.ef-tabs--pill) .ef-tabs__tab.is-danger.is-active:focus-visible{box-shadow:inset 0 0 0 2px var(--st-cancelled-fg),0 0 0 2px color-mix(in srgb,var(--ink-active, #0f1115) 40%,transparent)}:host[data-module=sales]{--module: var(--m-sales)}:host[data-module=purchase]{--module: var(--m-purchase)}:host[data-module=stock]{--module: var(--m-stock)}:host[data-module=pos]{--module: var(--m-pos)}:host[data-module=marketing]{--module: var(--m-marketing)}:host[data-module=store]{--module: var(--m-store)}:host[data-module=finance]{--module: var(--m-finance)}:host[data-module=admin]{--module: var(--m-admin)}:host(.ef-tabs--overflow){position:relative;display:block}:host(.ef-tabs--overflow) .ef-tabs__list{display:flex;width:100%}:host(.ef-tabs--overflow):before,:host(.ef-tabs--overflow):after{content:\"\";position:absolute;top:0;bottom:0;width:36px;pointer-events:none;z-index:2}:host(.ef-tabs--overflow):before{inset-inline-start:0;background:linear-gradient(to right,var(--paper-alt),transparent)}:host(.ef-tabs--overflow):after{inset-inline-end:0;background:linear-gradient(to left,var(--paper-alt),transparent)}[data-theme=dark] :host(.ef-tabs--underline) .ef-tabs__tab.is-active .ef-tabs__count{background:color-mix(in srgb,var(--module, var(--ink-active)) 28%,transparent)}@media(pointer:coarse){:host(.ef-tabs--pill) .ef-tabs__tab,:host(.ef-tabs--underline) .ef-tabs__tab{min-height:var(--hit-touch)}}\n"] }]
         }], propDecorators: { items: [{
                 type: Input,
                 args: [{ required: true }]
@@ -13553,10 +13633,16 @@ function sameText(a, b) {
  * (ADR-050 section 7).
  *
  * - **Cultures** come from `EF_CONTENT_CULTURES` (the ERP provides them from
- *   the tenant profile) unless `cultures` is set. The active tab is local and
- *   starts on the default culture.
- * - **Tabs** carry the `ef_localized_input_missing` note on every culture with
- *   no text, the error tone on the default culture of a `required` field left
+ *   the tenant profile) unless `cultures` is set. The active culture starts
+ *   on the default and is two-way through `[(activeCulture)]`.
+ * - **One tab row for several texts** (an email's subject and body): bind the
+ *   same signal to `[(activeCulture)]` on each and set `[showTabs]="false"`
+ *   on all but one, and list those in the row owner's `[linkedInputs]` so
+ *   the row also shows their error tone, required tone and dirty dot. A new
+ *   set of server errors moves the shared culture to the first culture in
+ *   error in the row's order.
+ * - **Tabs** show the language name only (no "missing" note: an empty culture
+ *   is visible from its empty field), the error tone on the default culture of a `required` field left
  *   empty once the field is touched, changed or its form submitted, and the
  *   dirty dot on cultures edited since the value arrived. Dirty detection
  *   relies on the parent storing the emitted object by reference (the V2
@@ -13583,17 +13669,27 @@ function sameText(a, b) {
  * - **Forms.** A ControlValueAccessor (`[formControl]`, `formControlName`,
  *   `[(ngModel)]`) as well as `[value]` + `(valueChangeEvent)`. With
  *   `required`, the form control reports `required` while the default culture
- *   is empty.
+ *   is empty, and once the field is touched, changed or submitted the default
+ *   culture's field shows `validation.required` and is `aria-invalid`.
  * - **Server errors** (ADR-010) come from the enclosing `[efServerErrors]`
  *   scope. `<name>.<culture>` errors tint that culture's tab, show under its
  *   field while it is active (the field links itself by name) and, from another
  *   tab, show as a hint naming the languages in error; a new set of errors
  *   moves to the first of them. `<name>` errors, or an explicit `[errors]`,
  *   show under the field on every tab, as do errors for a language the field
- *   does not list (`title.xx`). Messages are translated as keys. Keys: `ef_localized_input_errors_in_other`.
+ *   does not list (`title.xx`), prefixed with that language's name (or its
+ *   code) through `ef_localized_input_error_in_culture`. Messages are
+ *   translated as keys. Keys: `ef_localized_input_errors_in_other`,
+ *   `ef_localized_input_error_in_culture`.
+ * - **Counter.** With `advisedLength` it reads as advice through
+ *   `ef_localized_input_counter_advised` (`{{count}}`, `{{max}}`), so 5123 of
+ *   5000 does not look like a cap; with `maxLength` alone it stays `n / max`.
  * - **Spoken limit.** `counterHintKey` is read with the counter (through
  *   `aria-describedby`) and `counterOverKey` is announced politely when the
- *   text passes the limit; both take `{{max}}`.
+ *   text passes the limit; both take `{{max}}`. On a field with several
+ *   cultures the announcement is prefixed with the culture's name through
+ *   `ef_localized_input_error_in_culture`, so `counterOverKey` should not
+ *   name it.
  * - **Names.** Each culture's field is named `<name>.<culture>` (`title.ar`),
  *   the key the backend reports a per-culture error under.
  *
@@ -13604,9 +13700,10 @@ function sameText(a, b) {
  * | `ef_localized_input_culture_fr` | Français | الفرنسية | French |
  * | `ef_localized_input_culture_ar` | Arabe | العربية | Arabic |
  * | `ef_localized_input_culture_en` | Anglais | الإنجليزية | English |
- * | `ef_localized_input_missing` | manquant | غير مكتوب | missing |
  * | `ef_localized_input_cultures` | Langues du texte | لغات النص | Text languages |
  * | `ef_localized_input_errors_in_other` | Erreur dans : | خطأ في: | Error in: |
+ * | `ef_localized_input_counter_advised` | {{count}} / {{max}} conseillés | {{count}} / {{max}} موصى بها | {{count}} / {{max}} advised |
+ * | `ef_localized_input_error_in_culture` | {{culture}} : {{message}} | {{culture}}: {{message}} | {{culture}}: {{message}} |
  * | `ef_localized_input_read_only_hint` | Ce texte se modifie ailleurs. | يُعدَّل هذا النص في مكان آخر. | This text is edited elsewhere. |
  *
  * ```html
@@ -13614,6 +13711,9 @@ function sameText(a, b) {
  *     [value]="product().title" (valueChangeEvent)="patch({ title: $event })"
  *     [advisedLength]="60" [maxLength]="256" />
  *
+ * <ef-localized-input name="subject" labelKey="email_subject" [maxLength]="200" [linkedInputs]="[body]" [(activeCulture)]="culture" ... />
+ * <ef-localized-input #body name="htmlBody" labelKey="email_body" mode="html" [showTabs]="false" [(activeCulture)]="culture" ... />
+ *
  * <ef-localized-input name="title" [readOnlyCultures]="['fr']" ...>
  *     <a read-only-link [routerLink]="catalogLink()">{{ 'store_open_catalog' | translate }}</a>
  * </ef-localized-input>
@@ -13655,6 +13755,42 @@ class EfLocalizedInputComponent {
     errors = input(undefined, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
     /** Overrides the `EF_CONTENT_CULTURES` list for this field. */
     cultures = input(undefined, ...(ngDevMode ? [{ debugName: "cultures" }] : /* istanbul ignore next */ []));
+    /**
+     * The culture on show, two-way (`[(activeCulture)]`). `null` or a culture
+     * the field does not list means the default; the field then writes back
+     * the culture it settled on, so the parent always reads a listed code.
+     * Bind one signal to several inputs to give them one tab row.
+     */
+    activeCulture = model(null, ...(ngDevMode ? [{ debugName: "activeCulture" }] : /* istanbul ignore next */ []));
+    /**
+     * Draws the culture tab row. Off for a field that follows another
+     * field's row through a shared `activeCulture`: its culture is then
+     * named to assistive tech through `aria-describedby` and the hint still
+     * names the cultures in error. List it in the row owner's
+     * `linkedInputs` so the row draws its error tone, required tone and
+     * dirty dot too. Without tabs it never rewrites `activeCulture` to fit
+     * its own culture list (it shows its own fallback instead), and it moves
+     * the shared culture to its first culture in error only when no row
+     * owner links it.
+     */
+    showTabs = input(true, { ...(ngDevMode ? { debugName: "showTabs" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * On the input that draws the shared tab row: the inputs that follow it
+     * (`[showTabs]="false"`), whose `cultureFlags` the row merges into its
+     * tones and dots. A new set of server errors on any of them moves the
+     * shared culture to the first culture in error in this row's order.
+     * Badges stay this input's own. A template reference works forward:
+     * `<ef-localized-input [linkedInputs]="[body]" ... /> <ef-localized-input #body [showTabs]="false" ... />`.
+     */
+    linkedInputs = input([], ...(ngDevMode ? [{ debugName: "linkedInputs" }] : /* istanbul ignore next */ []));
+    /** `html` mode only: the sanitised preview under the source. Off when
+     *  the screen renders its own preview (an email rendered by the server,
+     *  with its tokens filled in). */
+    preview = input(true, { ...(ngDevMode ? { debugName: "preview" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** A badge per culture tab, culture code to i18n key (`{ ar:
+     *  'email_templates_customized' }`): a state of that language worth
+     *  seeing from the tab row. Drawn by the input that shows the tabs. */
+    tabBadges = input({}, ...(ngDevMode ? [{ debugName: "tabBadges" }] : /* istanbul ignore next */ []));
     /** The whole new object, trimmed, with blank cultures removed. */
     valueChangeEvent = output();
     contentCultures = inject(EF_CONTENT_CULTURES);
@@ -13666,6 +13802,9 @@ class EfLocalizedInputComponent {
     /** The editor's chunk failed to load (offline, a stale deploy). */
     richFailed = signal(false, ...(ngDevMode ? [{ debugName: "richFailed" }] : /* istanbul ignore next */ []));
     richHost = viewChild('richHost', { ...(ngDevMode ? { debugName: "richHost" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+    richRef = null;
+    textField = viewChild(EfInputTextComponent, ...(ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []));
+    areaField = viewChild(EfTextareaComponent, ...(ngDevMode ? [{ debugName: "areaField" }] : /* istanbul ignore next */ []));
     /** `rich` without a provided editor renders the html source instead. */
     effectiveMode = computed(() => this.mode() === 'rich' && (!this.richLoader || this.richFailed()) ? 'html' : this.mode(), ...(ngDevMode ? [{ debugName: "effectiveMode" }] : /* istanbul ignore next */ []));
     parentForm = inject(FormGroupDirective, { optional: true }) ?? inject(NgForm, { optional: true });
@@ -13698,17 +13837,22 @@ class EfLocalizedInputComponent {
         const list = this.list();
         return list.some(c => c.code === preferred) ? preferred : (list[0]?.code ?? preferred);
     }, ...(ngDevMode ? [{ debugName: "defaultCode" }] : /* istanbul ignore next */ []));
-    selected = signal(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     active = computed(() => {
         const list = this.list();
-        const code = this.selected();
+        const code = this.activeCulture();
         return list.find(c => c.code === code) ?? list.find(c => c.code === this.defaultCode()) ?? list[0];
     }, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     /** The active culture's code: unlike active(), equal when an equal culture list arrives. */
     activeCode = computed(() => this.active()?.code, ...(ngDevMode ? [{ debugName: "activeCode" }] : /* istanbul ignore next */ []));
-    /** Server messages for the whole field (`title`). */
+    /** Server messages for the whole field (`title`), and those of unlisted
+     *  cultures, translated here (never through the pipe a second time). */
     fieldErrors = computed(() => {
-        const messages = [...(resolveExternalErrors(this.errors(), this.serverErrorsScope, this.name()) ?? []), ...this.unlistedErrors()];
+        this.textsVersion();
+        const t = (key) => this.translateService.instant(key);
+        const messages = [
+            ...(resolveExternalErrors(this.errors(), this.serverErrorsScope, this.name()) ?? []).map(t),
+            ...this.unlistedErrors(),
+        ];
         return messages.length ? messages : null;
     }, ...(ngDevMode ? [{ debugName: "fieldErrors" }] : /* istanbul ignore next */ []));
     /** Every `<name>.<culture>` message the scope holds. */
@@ -13722,39 +13866,89 @@ class EfLocalizedInputComponent {
                 out[c.code] = all[c.code];
         return out;
     }, ...(ngDevMode ? [{ debugName: "cultureErrors" }] : /* istanbul ignore next */ []));
-    /** Messages for a language this field does not list (`title.xx`): shown with the whole field, never dropped. */
+    /** Messages for a language this field does not list (`title.xx`): shown
+     *  with the whole field, never dropped, prefixed with the culture
+     *  (`xx : message`) since no tab says which language they concern. */
     unlistedErrors = computed(() => {
+        this.textsVersion();
+        const t = this.translateService;
         const listed = new Set(this.list().map(c => c.code));
-        return Object.entries(this.allCultureErrors()).flatMap(([code, messages]) => (listed.has(code) ? [] : messages));
+        return Object.entries(this.allCultureErrors()).flatMap(([code, messages]) => {
+            if (listed.has(code))
+                return [];
+            // The culture's name when the bundle has one, else its code.
+            const nameKey = `ef_localized_input_culture_${code}`;
+            const name = t.instant(nameKey);
+            const culture = name && name !== nameKey ? name : code;
+            return messages.map(m => t.instant('ef_localized_input_error_in_culture', { culture, message: t.instant(m) }));
+        });
     }, ...(ngDevMode ? [{ debugName: "unlistedErrors" }] : /* istanbul ignore next */ []));
     /** Bumps when texts change, so translated messages follow the language. */
     textsVersion = signal(0, ...(ngDevMode ? [{ debugName: "textsVersion" }] : /* istanbul ignore next */ []));
-    /** The active language's messages, translated once here for the field below. */
+    /**
+     * The active language's messages, translated once here for the field
+     * below. Without one, a required default culture left empty says so
+     * once the field is touched, changed or submitted (`validation.required`,
+     * the family's message), which also sets `aria-invalid` on it.
+     */
     activeErrors = computed(() => {
         this.textsVersion();
-        const messages = this.cultureErrors()[this.active()?.code ?? ''];
-        return messages?.length ? messages.map(m => this.translateService.instant(m)) : null;
+        const code = this.active()?.code ?? '';
+        const messages = this.cultureErrors()[code];
+        if (messages?.length)
+            return messages.map(m => this.translateService.instant(m));
+        if (this.requiredTone(code)) {
+            return [this.translateService.instant('validation.required')];
+        }
+        return null;
     }, ...(ngDevMode ? [{ debugName: "activeErrors" }] : /* istanbul ignore next */ []));
     /** Cultures with a server error, in tab order. */
     culturesInError = computed(() => this.list().filter(c => this.cultureErrors()[c.code]), ...(ngDevMode ? [{ debugName: "culturesInError" }] : /* istanbul ignore next */ []));
     /** Cultures in error other than the one on show, for the hint under the tabs. */
     errorsElsewhere = computed(() => this.culturesInError().filter(c => c.code !== this.active()?.code), ...(ngDevMode ? [{ debugName: "errorsElsewhere" }] : /* istanbul ignore next */ []));
     /** Changes only when the set of errors does, so a tab the user picked stays picked. */
-    errorSignature = computed(() => JSON.stringify(this.cultureErrors()), ...(ngDevMode ? [{ debugName: "errorSignature" }] : /* istanbul ignore next */ []));
-    tabItems = computed(() => {
+    errorSignature = computed(() => {
+        const own = JSON.stringify(this.cultureErrors());
+        if (!this.showTabs())
+            return own;
+        const linked = this.linkedInputs().map(l => Object.entries(l.cultureFlags()).filter(([, f]) => f.serverError).map(([code]) => code));
+        return JSON.stringify([own, linked]);
+    }, ...(ngDevMode ? [{ debugName: "errorSignature" }] : /* istanbul ignore next */ []));
+    /** How many row owners list this input in their `linkedInputs`. */
+    linkedBy = signal(0, ...(ngDevMode ? [{ debugName: "linkedBy" }] : /* istanbul ignore next */ []));
+    /** Danger tone on the default culture: required, empty, and touched, changed or submitted. */
+    requiredTone(code) {
+        return this.required() && code === this.defaultCode() && !this.cleaned()[code] && this.showErrors();
+    }
+    /**
+     * What this input's tab would show for each culture it lists, read by
+     * the input that draws a shared row (`linkedInputs`). Read-only.
+     */
+    cultureFlags = computed(() => {
         const text = this.cleaned();
         const base = this.baseline();
+        const errors = this.cultureErrors();
+        const out = {};
+        for (const c of this.list()) {
+            const serverError = !!errors[c.code];
+            out[c.code] = {
+                error: serverError || this.requiredTone(c.code),
+                serverError,
+                dirty: (text[c.code] ?? '') !== (base[c.code] ?? ''),
+            };
+        }
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "cultureFlags" }] : /* istanbul ignore next */ []));
+    tabItems = computed(() => {
+        const badges = this.tabBadges() ?? {};
+        const flags = [this.cultureFlags(), ...this.linkedInputs().map(l => l.cultureFlags())];
         return this.list().map(c => {
-            const missing = !text[c.code];
             return {
                 value: c.code,
                 labelKey: c.labelKey,
-                noteKey: missing ? 'ef_localized_input_missing' : undefined,
-                tone: this.cultureErrors()[c.code] ||
-                    (missing && this.required() && c.code === this.defaultCode() && this.showErrors())
-                    ? 'danger'
-                    : undefined,
-                dirty: (text[c.code] ?? '') !== (base[c.code] ?? ''),
+                badgeKey: badges[c.code] || undefined,
+                tone: flags.some(f => f[c.code]?.error) ? 'danger' : undefined,
+                dirty: flags.some(f => f[c.code]?.dirty),
                 id: this.tabId(c.code),
                 panelId: this.panelId,
             };
@@ -13778,8 +13972,35 @@ class EfLocalizedInputComponent {
         : this.activeText().length, ...(ngDevMode ? [{ debugName: "activeLength" }] : /* istanbul ignore next */ []));
     labelId = `${this.uid}-label`;
     counterLimit = computed(() => this.advisedLength() ?? this.maxLength(), ...(ngDevMode ? [{ debugName: "counterLimit" }] : /* istanbul ignore next */ []));
+    /**
+     * The polite over-limit announcement: empty under the limit, else the
+     * `counterOverKey` text, prefixed with the culture's name when the field
+     * has more than one. Its text changes only with the (culture, over)
+     * pair, so typing past the limit is announced once, and a switch to
+     * another language that is also over is announced and names it.
+     */
+    overMessage = computed(() => {
+        this.textsVersion();
+        const key = this.counterOverKey();
+        const limit = this.counterLimit();
+        const culture = this.active();
+        if (!key || limit == null || !culture || this.activeLength() <= limit)
+            return '';
+        const message = this.translateService.instant(key, { max: limit });
+        if (this.list().length < 2)
+            return message;
+        return this.translateService.instant('ef_localized_input_error_in_culture', {
+            culture: this.translateService.instant(culture.labelKey),
+            message,
+        });
+    }, ...(ngDevMode ? [{ debugName: "overMessage" }] : /* istanbul ignore next */ []));
     panelId = `${this.uid}-panel`;
     counterId = `${this.uid}-counter`;
+    /** The culture's name, read with a field that has no tab row. */
+    cultureNameId = `${this.uid}-culture`;
+    /** Extra `aria-describedby` ids for the active field: the counter, and
+     *  the culture's name when no tab says it. */
+    describedByExtra = computed(() => [this.counterLimit() ? this.counterId : null, this.showTabs() ? null : this.cultureNameId].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "describedByExtra" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     touched = () => { };
     constructor() {
@@ -13795,13 +14016,38 @@ class EfLocalizedInputComponent {
             this.defaultCode();
             untracked(() => this.ngControl?.control?.updateValueAndValidity({ emitEvent: false }));
         });
-        // A new set of server errors brings the first language in error into view.
+        // The parent always reads the culture on show, never null or one the
+        // row does not list. Only the input that draws tabs writes it back:
+        // two inputs with different lists would otherwise keep overwriting
+        // each other.
+        effect(() => {
+            const code = this.activeCode();
+            if (this.showTabs() && code && this.activeCulture() !== code)
+                this.activeCulture.set(code);
+        });
+        // A row owner tells the inputs it links, so they leave the error jump to it.
+        effect(onCleanup => {
+            const linked = this.showTabs() ? this.linkedInputs() : [];
+            for (const l of linked)
+                l.linkedBy.update(n => n + 1);
+            onCleanup(() => {
+                for (const l of linked)
+                    l.linkedBy.update(n => n - 1);
+            });
+        });
+        // A new set of server errors brings the first language in error into
+        // view, through activeCulture. The row owner picks it in its own tab
+        // order across itself and its linked inputs; an input without tabs
+        // that no owner links moves it itself.
         effect(() => {
             this.errorSignature();
             untracked(() => {
-                const first = this.culturesInError()[0];
+                if (!this.showTabs() && this.linkedBy() > 0)
+                    return;
+                const linked = this.showTabs() ? this.linkedInputs() : [];
+                const first = this.list().find(c => this.cultureErrors()[c.code] || linked.some(l => l.cultureFlags()[c.code]?.serverError));
                 if (first)
-                    this.selected.set(first.code);
+                    this.activeCulture.set(first.code);
             });
         });
         effect(() => {
@@ -13837,9 +14083,10 @@ class EfLocalizedInputComponent {
     }
     createRich(vcr, type, code) {
         vcr.clear();
+        this.richRef = null;
         const culture = () => this.list().find(c => c.code === code);
         const readOnly = () => this.readOnlyCultures().includes(code);
-        vcr.createComponent(type, {
+        this.richRef = vcr.createComponent(type, {
             bindings: [
                 inputBinding('value', () => this.raw()[code] ?? ''),
                 inputBinding('name', () => `${this.name()}.${code}`),
@@ -13854,11 +14101,40 @@ class EfLocalizedInputComponent {
                 inputBinding('readonly', readOnly),
                 inputBinding('placeholderKey', () => this.placeholderKey()),
                 inputBinding('hintKey', () => (readOnly() ? 'ef_localized_input_read_only_hint' : this.hintKey())),
-                inputBinding('describedByExtra', () => (this.counterLimit() ? this.counterId : '')),
+                inputBinding('describedByExtra', () => this.describedByExtra()),
                 outputBinding('valueChangeEvent', v => this.setText(code, v)),
             ],
         });
     }
+    /**
+     * Inserts `text` (a `{{token}}`) into the culture on show, at the caret,
+     * replacing a selection, or at the end when its field was never entered
+     * or was just recreated by a culture switch; then emits the whole object
+     * once, as typing would. Returns false, and changes nothing, when the
+     * field is disabled, the culture is read-only, the result would pass
+     * `maxLength`, there is no active field (no culture listed), or the
+     * field is the rich editor (which has no insert yet). The field says
+     * nothing itself on a refusal, so the caller should tell the user (a
+     * toast such as "the variable would pass the length limit"); otherwise
+     * a click on a variable silently does nothing.
+     *
+     * On a phone, the focus that follows the insert opens the keyboard.
+     *
+     * A caller tracking "the field last focused" should ignore focus on the
+     * culture tabs (`[role="tab"]`): picking a language is not choosing where
+     * the token goes.
+     */
+    insertAtCaret(text) {
+        const code = this.activeCode();
+        if (!code || this.isDisabled() || this.activeReadOnly())
+            return false;
+        const target = (this.effectiveMode() === 'rich' ? this.richRef?.instance : (this.textField() ?? this.areaField()));
+        if (typeof target?.insertAtCursor !== 'function')
+            return false;
+        const before = this.raw()[code] ?? '';
+        target.insertAtCursor(text);
+        return (this.raw()[code] ?? '') !== before;
+    }
     tabId(code) {
         return `${this.uid}-tab-${code}`;
     }
@@ -13866,7 +14142,7 @@ class EfLocalizedInputComponent {
         return `${this.uid}-${code}`;
     }
     select(code) {
-        this.selected.set(code);
+        this.activeCulture.set(code);
     }
     setText(code, text) {
         this.raw.update(r => ({ ...r, [code]: text }));
@@ -13910,7 +14186,7 @@ class EfLocalizedInputComponent {
         this.cvaDisabled.set(disabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfLocalizedInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfLocalizedInputComponent, isStandalone: true, selector: "ef-localized-input", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, advisedLength: { classPropertyName: "advisedLength", publicName: "advisedLength", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readOnlyCultures: { classPropertyName: "readOnlyCultures", publicName: "readOnlyCultures", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, counterHintKey: { classPropertyName: "counterHintKey", publicName: "counterHintKey", isSignal: true, isRequired: false, transformFunction: null }, counterOverKey: { classPropertyName: "counterOverKey", publicName: "counterOverKey", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, cultures: { classPropertyName: "cultures", publicName: "cultures", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChangeEvent: "valueChangeEvent" }, host: { listeners: { "focusout": "onFocusOut($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfLocalizedInputComponent, isStandalone: true, selector: "ef-localized-input", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, advisedLength: { classPropertyName: "advisedLength", publicName: "advisedLength", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readOnlyCultures: { classPropertyName: "readOnlyCultures", publicName: "readOnlyCultures", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, counterHintKey: { classPropertyName: "counterHintKey", publicName: "counterHintKey", isSignal: true, isRequired: false, transformFunction: null }, counterOverKey: { classPropertyName: "counterOverKey", publicName: "counterOverKey", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, cultures: { classPropertyName: "cultures", publicName: "cultures", isSignal: true, isRequired: false, transformFunction: null }, activeCulture: { classPropertyName: "activeCulture", publicName: "activeCulture", isSignal: true, isRequired: false, transformFunction: null }, showTabs: { classPropertyName: "showTabs", publicName: "showTabs", isSignal: true, isRequired: false, transformFunction: null }, linkedInputs: { classPropertyName: "linkedInputs", publicName: "linkedInputs", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, tabBadges: { classPropertyName: "tabBadges", publicName: "tabBadges", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeCulture: "activeCultureChange", valueChangeEvent: "valueChangeEvent" }, host: { listeners: { "focusout": "onFocusOut($event)" } }, providers: [
             {
                 // A form's required validator reads an empty object as filled (it
                 // checks length), so the field validates its default culture
@@ -13923,7 +14199,7 @@ class EfLocalizedInputComponent {
                     return (control) => injector.get(EfLocalizedInputComponent).validateRequired(control);
                 },
             },
-        ], viewQueries: [{ propertyName: "richHost", first: true, predicate: ["richHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"eli-head\">\n    @if (labelKey()) {\n        <span class=\"eli-label\" [id]=\"labelId\">\n            <ef-label [labelKey]=\"labelKey()\" [for]=\"controlId(active()?.code ?? '')\" [required]=\"required()\" />\n        </span>\n    }\n    <div class=\"eli-tabs\">\n        <ef-tabs\n            variant=\"pill\"\n            [items]=\"tabItems()\"\n            [value]=\"active()?.code ?? null\"\n            [ariaLabelKey]=\"labelKey() || 'ef_localized_input_cultures'\"\n            (valueChange)=\"select($event)\"\n        />\n    </div>\n</div>\n\n<div class=\"eli-panel\" role=\"tabpanel\" [id]=\"panelId\" [attr.aria-labelledby]=\"tabId(active()?.code ?? '')\">\n    @for (c of active() ? [active()!] : []; track c.code) {\n        @switch (effectiveMode()) {\n            @case ('text') {\n                <ef-input-text\n                    [variant]=\"variant() === 'comptoir' ? 'comptoir' : 'primeng'\"\n                    [inputId]=\"controlId(c.code)\"\n                    [name]=\"name() + '.' + c.code\"\n                    [dir]=\"c.dir\"\n                    [lang]=\"c.code\"\n                    [value]=\"activeText()\"\n                    [maxlength]=\"maxLength()\"\n                    [required]=\"required() && c.code === defaultCode()\"\n                    [errors]=\"activeErrors()\"\n                    [disabled]=\"isDisabled()\"\n                    [readonly]=\"activeReadOnly()\"\n                    [placeholderKey]=\"placeholderKey()\"\n                    [hintKey]=\"activeReadOnly() ? 'ef_localized_input_read_only_hint' : hintKey()\"\n                    [describedByExtra]=\"counterLimit() ? counterId : ''\"\n                    (valueChangeEvent)=\"setText(c.code, $event)\"\n                />\n            }\n            @case ('textarea') {\n                <ef-textarea\n                    [inputId]=\"controlId(c.code)\"\n                    [name]=\"name() + '.' + c.code\"\n                    [dir]=\"c.dir\"\n                    [lang]=\"c.code\"\n                    [rows]=\"rows()\"\n                    [value]=\"activeText()\"\n                    [maxlength]=\"maxLength()\"\n                    [required]=\"required() && c.code === defaultCode()\"\n                    [errors]=\"activeErrors()\"\n                    [disabled]=\"isDisabled()\"\n                    [readonly]=\"activeReadOnly()\"\n                    [placeholderKey]=\"placeholderKey()\"\n                    [hintKey]=\"activeReadOnly() ? 'ef_localized_input_read_only_hint' : hintKey()\"\n                    [describedByExtra]=\"counterLimit() ? counterId : ''\"\n                    (valueChangeEvent)=\"setText(c.code, $event)\"\n                />\n            }\n            @case ('rich') {\n                <!-- ef-rich-text, created from EF_RICH_TEXT (see createRich). -->\n                <ng-container #richHost />\n            }\n            @case ('html') {\n                <!-- The source stays ltr for every culture: raw HTML in an rtl\n                     textarea reads reversed (ADR-036). The preview takes the\n                     culture's direction. -->\n                <ef-textarea\n                    mono\n                    dir=\"ltr\"\n                    [inputId]=\"controlId(c.code)\"\n                    [name]=\"name() + '.' + c.code\"\n                    [lang]=\"c.code\"\n                    [rows]=\"rows()\"\n                    [value]=\"activeText()\"\n                    [maxlength]=\"maxLength()\"\n                    [required]=\"required() && c.code === defaultCode()\"\n                    [errors]=\"activeErrors()\"\n                    [disabled]=\"isDisabled()\"\n                    [readonly]=\"activeReadOnly()\"\n                    [placeholderKey]=\"placeholderKey()\"\n                    [hintKey]=\"activeReadOnly() ? 'ef_localized_input_read_only_hint' : hintKey()\"\n                    [describedByExtra]=\"counterLimit() ? counterId : ''\"\n                    (valueChangeEvent)=\"setText(c.code, $event)\"\n                />\n            }\n        }\n    }\n\n    @if (counterLimit(); as limit) {\n        <span class=\"eli-counter\" data-counter [id]=\"counterId\" [class.is-over]=\"activeLength() > limit\">\n            <bdi dir=\"ltr\">{{ activeLength() }} / {{ limit }}</bdi>\n            @if (counterHintKey()) {\n                <span class=\"eli-counter__sr\">{{ counterHintKey() | translate: { max: limit } }}</span>\n            }\n        </span>\n        @if (counterOverKey()) {\n            <!-- Always present, so a screen reader hears the text appear. -->\n            <span class=\"eli-counter__sr\" data-over-message aria-live=\"polite\">\n                @if (activeLength() > limit) {\n                    {{ counterOverKey() | translate: { max: limit } }}\n                }\n            </span>\n        }\n    }\n\n    @if (effectiveMode() === 'html' && activeText().trim()) {\n        @if (active(); as c) {\n            <!-- Angular's default [innerHTML] sanitising strips scripts and handlers. -->\n            <div class=\"eli-preview\" data-preview [attr.dir]=\"c.dir\" [attr.lang]=\"c.code\" [innerHTML]=\"activeText()\"></div>\n        }\n    }\n\n    @if (fieldErrors(); as messages) {\n        <div class=\"eli-errors\" data-field-errors role=\"alert\" aria-live=\"polite\">\n            @for (message of messages; track message) {\n                <small class=\"text-danger block\">{{ message | translate }}</small>\n            }\n        </div>\n    }\n\n    @if (errorsElsewhere(); as others) {\n        @if (others.length) {\n            <small class=\"eli-elsewhere text-danger block\" data-errors-elsewhere role=\"status\">\n                {{ 'ef_localized_input_errors_in_other' | translate }}\n                @for (c of others; track c.code; let last = $last) {\n                    {{ c.labelKey | translate }}{{ last ? '' : ',' }}\n                }\n            </small>\n        }\n    }\n\n    @if (activeReadOnly()) {\n        <div class=\"eli-link\">\n            <ng-content select=\"[read-only-link]\" />\n        </div>\n    }\n</div>\n", styles: [":host{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);min-width:0}.eli-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2);min-width:0}.eli-label{min-width:0}.eli-tabs{min-width:0;max-width:100%;overflow-x:auto}.eli-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);min-width:0}.eli-counter{position:relative;font-size:12px;color:var(--text-mute);text-align:end;font-variant-numeric:tabular-nums}.eli-counter.is-over{color:var(--st-pending-fg);font-weight:600}.eli-counter__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.eli-preview{min-width:0;overflow-x:auto;overflow-wrap:anywhere;padding:var(--s-3);border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper-alt);color:var(--text);font-size:13.5px;line-height:1.55}.eli-link{font-size:12px}@media(max-width:767px){.eli-tabs{--hit: var(--hit-touch);flex:1 1 100%}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "labelParams", "for", "styleClass", "required"] }, { kind: "component", type: EfTabsComponent, selector: "ef-tabs", inputs: ["items", "value", "variant", "module", "overflow", "hideCounts", "ariaLabel", "ariaLabelKey", "dirtyLabelKey"], outputs: ["valueChange"] }, { kind: "component", type: EfInputTextComponent, selector: "ef-input-text", inputs: ["size", "type", "maxlength", "fluid", "inline", "autocomplete", "dir", "lang", "variant", "prefix", "suffix", "value"], outputs: ["valueChangeEvent"] }, { kind: "component", type: EfTextareaComponent, selector: "ef-textarea", inputs: ["rows", "maxlength", "lang", "autofocus", "mono", "value"], outputs: ["valueChangeEvent"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "richHost", first: true, predicate: ["richHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "textField", first: true, predicate: EfInputTextComponent, descendants: true, isSignal: true }, { propertyName: "areaField", first: true, predicate: EfTextareaComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"eli-head\">\n    @if (labelKey()) {\n        <span class=\"eli-label\" [id]=\"labelId\">\n            <ef-label [labelKey]=\"labelKey()\" [for]=\"controlId(active()?.code ?? '')\" [required]=\"required()\" />\n        </span>\n    }\n    @if (showTabs()) {\n        <div class=\"eli-tabs\">\n            <ef-tabs\n                variant=\"pill\"\n                [items]=\"tabItems()\"\n                [value]=\"active()?.code ?? null\"\n                [ariaLabelKey]=\"labelKey() || 'ef_localized_input_cultures'\"\n                (valueChange)=\"select($event)\"\n            />\n        </div>\n    }\n</div>\n\n<!-- Without a tab row the panel is a plain group: a tabpanel would point\n     at a tab that does not exist. -->\n<div\n    class=\"eli-panel\"\n    [id]=\"panelId\"\n    [attr.role]=\"showTabs() ? 'tabpanel' : null\"\n    [attr.aria-labelledby]=\"showTabs() ? tabId(active()?.code ?? '') : null\"\n>\n    @if (!showTabs()) {\n        @if (active(); as c) {\n            <span class=\"eli-sr\" [id]=\"cultureNameId\">{{ c.labelKey | translate }}</span>\n        }\n    }\n    @for (c of active() ? [active()!] : []; track c.code) {\n        @switch (effectiveMode()) {\n            @case ('text') {\n                <ef-input-text\n                    [variant]=\"variant() === 'comptoir' ? 'comptoir' : 'primeng'\"\n                    [inputId]=\"controlId(c.code)\"\n                    [name]=\"name() + '.' + c.code\"\n                    [dir]=\"c.dir\"\n                    [lang]=\"c.code\"\n                    [value]=\"activeText()\"\n                    [maxlength]=\"maxLength()\"\n                    [required]=\"required() && c.code === defaultCode()\"\n                    [errors]=\"activeErrors()\"\n                    [disabled]=\"isDisabled()\"\n                    [readonly]=\"activeReadOnly()\"\n                    [placeholderKey]=\"placeholderKey()\"\n                    [hintKey]=\"activeReadOnly() ? 'ef_localized_input_read_only_hint' : hintKey()\"\n                    [describedByExtra]=\"describedByExtra()\"\n                    (valueChangeEvent)=\"setText(c.code, $event)\"\n                />\n            }\n            @case ('textarea') {\n                <ef-textarea\n                    [inputId]=\"controlId(c.code)\"\n                    [name]=\"name() + '.' + c.code\"\n                    [dir]=\"c.dir\"\n                    [lang]=\"c.code\"\n                    [rows]=\"rows()\"\n                    [value]=\"activeText()\"\n                    [maxlength]=\"maxLength()\"\n                    [required]=\"required() && c.code === defaultCode()\"\n                    [errors]=\"activeErrors()\"\n                    [disabled]=\"isDisabled()\"\n                    [readonly]=\"activeReadOnly()\"\n                    [placeholderKey]=\"placeholderKey()\"\n                    [hintKey]=\"activeReadOnly() ? 'ef_localized_input_read_only_hint' : hintKey()\"\n                    [describedByExtra]=\"describedByExtra()\"\n                    (valueChangeEvent)=\"setText(c.code, $event)\"\n                />\n            }\n            @case ('rich') {\n                <!-- ef-rich-text, created from EF_RICH_TEXT (see createRich). -->\n                <ng-container #richHost />\n            }\n            @case ('html') {\n                <!-- The source stays ltr for every culture: raw HTML in an rtl\n                     textarea reads reversed (ADR-036). The preview takes the\n                     culture's direction. -->\n                <ef-textarea\n                    mono\n                    dir=\"ltr\"\n                    [inputId]=\"controlId(c.code)\"\n                    [name]=\"name() + '.' + c.code\"\n                    [lang]=\"c.code\"\n                    [rows]=\"rows()\"\n                    [value]=\"activeText()\"\n                    [maxlength]=\"maxLength()\"\n                    [required]=\"required() && c.code === defaultCode()\"\n                    [errors]=\"activeErrors()\"\n                    [disabled]=\"isDisabled()\"\n                    [readonly]=\"activeReadOnly()\"\n                    [placeholderKey]=\"placeholderKey()\"\n                    [hintKey]=\"activeReadOnly() ? 'ef_localized_input_read_only_hint' : hintKey()\"\n                    [describedByExtra]=\"describedByExtra()\"\n                    (valueChangeEvent)=\"setText(c.code, $event)\"\n                />\n            }\n        }\n    }\n\n    @if (counterLimit(); as limit) {\n        <span class=\"eli-counter\" data-counter [id]=\"counterId\" [class.is-over]=\"activeLength() > limit\">\n            @if (advisedLength() !== null && advisedLength() !== undefined) {\n                <!-- Advice, worded so (\"5123 / 5000 conseill\u00E9s\"), so it does not\n                     read as a cap. Words around the numbers: the text takes the\n                     page's direction, and an rtl reader meets the count first. -->\n                <span data-counter-text>{{ 'ef_localized_input_counter_advised' | translate: { count: activeLength(), max: limit } }}</span>\n            } @else {\n                <bdi dir=\"ltr\">{{ activeLength() }} / {{ limit }}</bdi>\n            }\n            @if (counterHintKey()) {\n                <span class=\"eli-counter__sr\">{{ counterHintKey() | translate: { max: limit } }}</span>\n            }\n        </span>\n        @if (counterOverKey()) {\n            <!-- Always present, so a screen reader hears the text appear. -->\n            <span class=\"eli-counter__sr\" data-over-message aria-live=\"polite\">{{ overMessage() }}</span>\n        }\n    }\n\n    @if (effectiveMode() === 'html' && preview() && activeText().trim()) {\n        @if (active(); as c) {\n            <!-- Angular's default [innerHTML] sanitising strips scripts and handlers. -->\n            <div class=\"eli-preview\" data-preview [attr.dir]=\"c.dir\" [attr.lang]=\"c.code\" [innerHTML]=\"activeText()\"></div>\n        }\n    }\n\n    @if (fieldErrors(); as messages) {\n        <div class=\"eli-errors\" data-field-errors role=\"alert\" aria-live=\"polite\">\n            @for (message of messages; track message) {\n                <small class=\"text-danger block\">{{ message }}</small>\n            }\n        </div>\n    }\n\n    @if (errorsElsewhere(); as others) {\n        @if (others.length) {\n            <small class=\"eli-elsewhere text-danger block\" data-errors-elsewhere role=\"status\">\n                {{ 'ef_localized_input_errors_in_other' | translate }}\n                @for (c of others; track c.code; let last = $last) {\n                    {{ c.labelKey | translate }}{{ last ? '' : ',' }}\n                }\n            </small>\n        }\n    }\n\n    @if (activeReadOnly()) {\n        <div class=\"eli-link\">\n            <ng-content select=\"[read-only-link]\" />\n        </div>\n    }\n</div>\n", styles: [":host{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);min-width:0}.eli-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2);min-width:0}.eli-label{min-width:0}.eli-tabs{min-width:0;max-width:100%;overflow-x:auto}.eli-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);min-width:0}.eli-counter{position:relative;font-size:12px;color:var(--text-mute);text-align:end;font-variant-numeric:tabular-nums}.eli-counter.is-over{color:var(--st-pending-fg);font-weight:600}.eli-counter__sr,.eli-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.eli-preview{min-width:0;overflow-x:auto;overflow-wrap:anywhere;padding:var(--s-3);border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper-alt);color:var(--text);font-size:13.5px;line-height:1.55}.eli-link{font-size:12px}@media(max-width:767px){.eli-tabs{--hit: var(--hit-touch);flex:1 1 100%}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "labelParams", "for", "styleClass", "required"] }, { kind: "component", type: EfTabsComponent, selector: "ef-tabs", inputs: ["items", "value", "variant", "module", "overflow", "hideCounts", "ariaLabel", "ariaLabelKey", "dirtyLabelKey"], outputs: ["valueChange"] }, { kind: "component", type: EfInputTextComponent, selector: "ef-input-text", inputs: ["size", "type", "maxlength", "fluid", "inline", "autocomplete", "dir", "lang", "variant", "prefix", "suffix", "value"], outputs: ["valueChangeEvent"] }, { kind: "component", type: EfTextareaComponent, selector: "ef-textarea", inputs: ["rows", "maxlength", "lang", "autofocus", "mono", "value"], outputs: ["valueChangeEvent"] }, { 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: EfLocalizedInputComponent, decorators: [{
             type: Component,
@@ -13940,8 +14216,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                                 return (control) => injector.get(EfLocalizedInputComponent).validateRequired(control);
                             },
                         },
-                    ], template: "<div class=\"eli-head\">\n    @if (labelKey()) {\n        <span class=\"eli-label\" [id]=\"labelId\">\n            <ef-label [labelKey]=\"labelKey()\" [for]=\"controlId(active()?.code ?? '')\" [required]=\"required()\" />\n        </span>\n    }\n    <div class=\"eli-tabs\">\n        <ef-tabs\n            variant=\"pill\"\n            [items]=\"tabItems()\"\n            [value]=\"active()?.code ?? null\"\n            [ariaLabelKey]=\"labelKey() || 'ef_localized_input_cultures'\"\n            (valueChange)=\"select($event)\"\n        />\n    </div>\n</div>\n\n<div class=\"eli-panel\" role=\"tabpanel\" [id]=\"panelId\" [attr.aria-labelledby]=\"tabId(active()?.code ?? '')\">\n    @for (c of active() ? [active()!] : []; track c.code) {\n        @switch (effectiveMode()) {\n            @case ('text') {\n                <ef-input-text\n                    [variant]=\"variant() === 'comptoir' ? 'comptoir' : 'primeng'\"\n                    [inputId]=\"controlId(c.code)\"\n                    [name]=\"name() + '.' + c.code\"\n                    [dir]=\"c.dir\"\n                    [lang]=\"c.code\"\n                    [value]=\"activeText()\"\n                    [maxlength]=\"maxLength()\"\n                    [required]=\"required() && c.code === defaultCode()\"\n                    [errors]=\"activeErrors()\"\n                    [disabled]=\"isDisabled()\"\n                    [readonly]=\"activeReadOnly()\"\n                    [placeholderKey]=\"placeholderKey()\"\n                    [hintKey]=\"activeReadOnly() ? 'ef_localized_input_read_only_hint' : hintKey()\"\n                    [describedByExtra]=\"counterLimit() ? counterId : ''\"\n                    (valueChangeEvent)=\"setText(c.code, $event)\"\n                />\n            }\n            @case ('textarea') {\n                <ef-textarea\n                    [inputId]=\"controlId(c.code)\"\n                    [name]=\"name() + '.' + c.code\"\n                    [dir]=\"c.dir\"\n                    [lang]=\"c.code\"\n                    [rows]=\"rows()\"\n                    [value]=\"activeText()\"\n                    [maxlength]=\"maxLength()\"\n                    [required]=\"required() && c.code === defaultCode()\"\n                    [errors]=\"activeErrors()\"\n                    [disabled]=\"isDisabled()\"\n                    [readonly]=\"activeReadOnly()\"\n                    [placeholderKey]=\"placeholderKey()\"\n                    [hintKey]=\"activeReadOnly() ? 'ef_localized_input_read_only_hint' : hintKey()\"\n                    [describedByExtra]=\"counterLimit() ? counterId : ''\"\n                    (valueChangeEvent)=\"setText(c.code, $event)\"\n                />\n            }\n            @case ('rich') {\n                <!-- ef-rich-text, created from EF_RICH_TEXT (see createRich). -->\n                <ng-container #richHost />\n            }\n            @case ('html') {\n                <!-- The source stays ltr for every culture: raw HTML in an rtl\n                     textarea reads reversed (ADR-036). The preview takes the\n                     culture's direction. -->\n                <ef-textarea\n                    mono\n                    dir=\"ltr\"\n                    [inputId]=\"controlId(c.code)\"\n                    [name]=\"name() + '.' + c.code\"\n                    [lang]=\"c.code\"\n                    [rows]=\"rows()\"\n                    [value]=\"activeText()\"\n                    [maxlength]=\"maxLength()\"\n                    [required]=\"required() && c.code === defaultCode()\"\n                    [errors]=\"activeErrors()\"\n                    [disabled]=\"isDisabled()\"\n                    [readonly]=\"activeReadOnly()\"\n                    [placeholderKey]=\"placeholderKey()\"\n                    [hintKey]=\"activeReadOnly() ? 'ef_localized_input_read_only_hint' : hintKey()\"\n                    [describedByExtra]=\"counterLimit() ? counterId : ''\"\n                    (valueChangeEvent)=\"setText(c.code, $event)\"\n                />\n            }\n        }\n    }\n\n    @if (counterLimit(); as limit) {\n        <span class=\"eli-counter\" data-counter [id]=\"counterId\" [class.is-over]=\"activeLength() > limit\">\n            <bdi dir=\"ltr\">{{ activeLength() }} / {{ limit }}</bdi>\n            @if (counterHintKey()) {\n                <span class=\"eli-counter__sr\">{{ counterHintKey() | translate: { max: limit } }}</span>\n            }\n        </span>\n        @if (counterOverKey()) {\n            <!-- Always present, so a screen reader hears the text appear. -->\n            <span class=\"eli-counter__sr\" data-over-message aria-live=\"polite\">\n                @if (activeLength() > limit) {\n                    {{ counterOverKey() | translate: { max: limit } }}\n                }\n            </span>\n        }\n    }\n\n    @if (effectiveMode() === 'html' && activeText().trim()) {\n        @if (active(); as c) {\n            <!-- Angular's default [innerHTML] sanitising strips scripts and handlers. -->\n            <div class=\"eli-preview\" data-preview [attr.dir]=\"c.dir\" [attr.lang]=\"c.code\" [innerHTML]=\"activeText()\"></div>\n        }\n    }\n\n    @if (fieldErrors(); as messages) {\n        <div class=\"eli-errors\" data-field-errors role=\"alert\" aria-live=\"polite\">\n            @for (message of messages; track message) {\n                <small class=\"text-danger block\">{{ message | translate }}</small>\n            }\n        </div>\n    }\n\n    @if (errorsElsewhere(); as others) {\n        @if (others.length) {\n            <small class=\"eli-elsewhere text-danger block\" data-errors-elsewhere role=\"status\">\n                {{ 'ef_localized_input_errors_in_other' | translate }}\n                @for (c of others; track c.code; let last = $last) {\n                    {{ c.labelKey | translate }}{{ last ? '' : ',' }}\n                }\n            </small>\n        }\n    }\n\n    @if (activeReadOnly()) {\n        <div class=\"eli-link\">\n            <ng-content select=\"[read-only-link]\" />\n        </div>\n    }\n</div>\n", styles: [":host{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);min-width:0}.eli-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2);min-width:0}.eli-label{min-width:0}.eli-tabs{min-width:0;max-width:100%;overflow-x:auto}.eli-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);min-width:0}.eli-counter{position:relative;font-size:12px;color:var(--text-mute);text-align:end;font-variant-numeric:tabular-nums}.eli-counter.is-over{color:var(--st-pending-fg);font-weight:600}.eli-counter__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.eli-preview{min-width:0;overflow-x:auto;overflow-wrap:anywhere;padding:var(--s-3);border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper-alt);color:var(--text);font-size:13.5px;line-height:1.55}.eli-link{font-size:12px}@media(max-width:767px){.eli-tabs{--hit: var(--hit-touch);flex:1 1 100%}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], advisedLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "advisedLength", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readOnlyCultures: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnlyCultures", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], counterHintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "counterHintKey", required: false }] }], counterOverKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "counterOverKey", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], cultures: [{ type: i0.Input, args: [{ isSignal: true, alias: "cultures", required: false }] }], valueChangeEvent: [{ type: i0.Output, args: ["valueChangeEvent"] }], richHost: [{ type: i0.ViewChild, args: ['richHost', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
+                    ], template: "<div class=\"eli-head\">\n    @if (labelKey()) {\n        <span class=\"eli-label\" [id]=\"labelId\">\n            <ef-label [labelKey]=\"labelKey()\" [for]=\"controlId(active()?.code ?? '')\" [required]=\"required()\" />\n        </span>\n    }\n    @if (showTabs()) {\n        <div class=\"eli-tabs\">\n            <ef-tabs\n                variant=\"pill\"\n                [items]=\"tabItems()\"\n                [value]=\"active()?.code ?? null\"\n                [ariaLabelKey]=\"labelKey() || 'ef_localized_input_cultures'\"\n                (valueChange)=\"select($event)\"\n            />\n        </div>\n    }\n</div>\n\n<!-- Without a tab row the panel is a plain group: a tabpanel would point\n     at a tab that does not exist. -->\n<div\n    class=\"eli-panel\"\n    [id]=\"panelId\"\n    [attr.role]=\"showTabs() ? 'tabpanel' : null\"\n    [attr.aria-labelledby]=\"showTabs() ? tabId(active()?.code ?? '') : null\"\n>\n    @if (!showTabs()) {\n        @if (active(); as c) {\n            <span class=\"eli-sr\" [id]=\"cultureNameId\">{{ c.labelKey | translate }}</span>\n        }\n    }\n    @for (c of active() ? [active()!] : []; track c.code) {\n        @switch (effectiveMode()) {\n            @case ('text') {\n                <ef-input-text\n                    [variant]=\"variant() === 'comptoir' ? 'comptoir' : 'primeng'\"\n                    [inputId]=\"controlId(c.code)\"\n                    [name]=\"name() + '.' + c.code\"\n                    [dir]=\"c.dir\"\n                    [lang]=\"c.code\"\n                    [value]=\"activeText()\"\n                    [maxlength]=\"maxLength()\"\n                    [required]=\"required() && c.code === defaultCode()\"\n                    [errors]=\"activeErrors()\"\n                    [disabled]=\"isDisabled()\"\n                    [readonly]=\"activeReadOnly()\"\n                    [placeholderKey]=\"placeholderKey()\"\n                    [hintKey]=\"activeReadOnly() ? 'ef_localized_input_read_only_hint' : hintKey()\"\n                    [describedByExtra]=\"describedByExtra()\"\n                    (valueChangeEvent)=\"setText(c.code, $event)\"\n                />\n            }\n            @case ('textarea') {\n                <ef-textarea\n                    [inputId]=\"controlId(c.code)\"\n                    [name]=\"name() + '.' + c.code\"\n                    [dir]=\"c.dir\"\n                    [lang]=\"c.code\"\n                    [rows]=\"rows()\"\n                    [value]=\"activeText()\"\n                    [maxlength]=\"maxLength()\"\n                    [required]=\"required() && c.code === defaultCode()\"\n                    [errors]=\"activeErrors()\"\n                    [disabled]=\"isDisabled()\"\n                    [readonly]=\"activeReadOnly()\"\n                    [placeholderKey]=\"placeholderKey()\"\n                    [hintKey]=\"activeReadOnly() ? 'ef_localized_input_read_only_hint' : hintKey()\"\n                    [describedByExtra]=\"describedByExtra()\"\n                    (valueChangeEvent)=\"setText(c.code, $event)\"\n                />\n            }\n            @case ('rich') {\n                <!-- ef-rich-text, created from EF_RICH_TEXT (see createRich). -->\n                <ng-container #richHost />\n            }\n            @case ('html') {\n                <!-- The source stays ltr for every culture: raw HTML in an rtl\n                     textarea reads reversed (ADR-036). The preview takes the\n                     culture's direction. -->\n                <ef-textarea\n                    mono\n                    dir=\"ltr\"\n                    [inputId]=\"controlId(c.code)\"\n                    [name]=\"name() + '.' + c.code\"\n                    [lang]=\"c.code\"\n                    [rows]=\"rows()\"\n                    [value]=\"activeText()\"\n                    [maxlength]=\"maxLength()\"\n                    [required]=\"required() && c.code === defaultCode()\"\n                    [errors]=\"activeErrors()\"\n                    [disabled]=\"isDisabled()\"\n                    [readonly]=\"activeReadOnly()\"\n                    [placeholderKey]=\"placeholderKey()\"\n                    [hintKey]=\"activeReadOnly() ? 'ef_localized_input_read_only_hint' : hintKey()\"\n                    [describedByExtra]=\"describedByExtra()\"\n                    (valueChangeEvent)=\"setText(c.code, $event)\"\n                />\n            }\n        }\n    }\n\n    @if (counterLimit(); as limit) {\n        <span class=\"eli-counter\" data-counter [id]=\"counterId\" [class.is-over]=\"activeLength() > limit\">\n            @if (advisedLength() !== null && advisedLength() !== undefined) {\n                <!-- Advice, worded so (\"5123 / 5000 conseill\u00E9s\"), so it does not\n                     read as a cap. Words around the numbers: the text takes the\n                     page's direction, and an rtl reader meets the count first. -->\n                <span data-counter-text>{{ 'ef_localized_input_counter_advised' | translate: { count: activeLength(), max: limit } }}</span>\n            } @else {\n                <bdi dir=\"ltr\">{{ activeLength() }} / {{ limit }}</bdi>\n            }\n            @if (counterHintKey()) {\n                <span class=\"eli-counter__sr\">{{ counterHintKey() | translate: { max: limit } }}</span>\n            }\n        </span>\n        @if (counterOverKey()) {\n            <!-- Always present, so a screen reader hears the text appear. -->\n            <span class=\"eli-counter__sr\" data-over-message aria-live=\"polite\">{{ overMessage() }}</span>\n        }\n    }\n\n    @if (effectiveMode() === 'html' && preview() && activeText().trim()) {\n        @if (active(); as c) {\n            <!-- Angular's default [innerHTML] sanitising strips scripts and handlers. -->\n            <div class=\"eli-preview\" data-preview [attr.dir]=\"c.dir\" [attr.lang]=\"c.code\" [innerHTML]=\"activeText()\"></div>\n        }\n    }\n\n    @if (fieldErrors(); as messages) {\n        <div class=\"eli-errors\" data-field-errors role=\"alert\" aria-live=\"polite\">\n            @for (message of messages; track message) {\n                <small class=\"text-danger block\">{{ message }}</small>\n            }\n        </div>\n    }\n\n    @if (errorsElsewhere(); as others) {\n        @if (others.length) {\n            <small class=\"eli-elsewhere text-danger block\" data-errors-elsewhere role=\"status\">\n                {{ 'ef_localized_input_errors_in_other' | translate }}\n                @for (c of others; track c.code; let last = $last) {\n                    {{ c.labelKey | translate }}{{ last ? '' : ',' }}\n                }\n            </small>\n        }\n    }\n\n    @if (activeReadOnly()) {\n        <div class=\"eli-link\">\n            <ng-content select=\"[read-only-link]\" />\n        </div>\n    }\n</div>\n", styles: [":host{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);min-width:0}.eli-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2);min-width:0}.eli-label{min-width:0}.eli-tabs{min-width:0;max-width:100%;overflow-x:auto}.eli-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);min-width:0}.eli-counter{position:relative;font-size:12px;color:var(--text-mute);text-align:end;font-variant-numeric:tabular-nums}.eli-counter.is-over{color:var(--st-pending-fg);font-weight:600}.eli-counter__sr,.eli-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.eli-preview{min-width:0;overflow-x:auto;overflow-wrap:anywhere;padding:var(--s-3);border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper-alt);color:var(--text);font-size:13.5px;line-height:1.55}.eli-link{font-size:12px}@media(max-width:767px){.eli-tabs{--hit: var(--hit-touch);flex:1 1 100%}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], advisedLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "advisedLength", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readOnlyCultures: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnlyCultures", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], counterHintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "counterHintKey", required: false }] }], counterOverKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "counterOverKey", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], cultures: [{ type: i0.Input, args: [{ isSignal: true, alias: "cultures", required: false }] }], activeCulture: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeCulture", required: false }] }, { type: i0.Output, args: ["activeCultureChange"] }], showTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTabs", required: false }] }], linkedInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkedInputs", required: false }] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], tabBadges: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabBadges", required: false }] }], valueChangeEvent: [{ type: i0.Output, args: ["valueChangeEvent"] }], richHost: [{ type: i0.ViewChild, args: ['richHost', { ...{ read: ViewContainerRef }, isSignal: true }] }], textField: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EfInputTextComponent), { isSignal: true }] }], areaField: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EfTextareaComponent), { isSignal: true }] }] } });
 
 /**
  * The content cultures the SEO fields start from, shared with `ef-localized-input`.
@@ -14008,7 +14284,7 @@ class EfSeoFieldsComponent {
         return (seo?.[code]?.trim() || fallback?.[code]?.trim() || '');
     }
     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.1.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 }, 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 }, cultures: { classPropertyName: "cultures", publicName: "cultures", 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    <ef-localized-input\n        name=\"seoTitle\"\n        labelKey=\"ef_seo_fields_title_label\"\n        [value]=\"seoTitle()\"\n        [cultures]=\"cultures()\"\n        [maxLength]=\"titleMax()\"\n        [advisedLength]=\"titleAdvised()\"\n        counterHintKey=\"ef_seo_fields_counter_hint\"\n        counterOverKey=\"ef_seo_fields_over_hint\"\n        (valueChangeEvent)=\"seoChange.emit({ seoTitle: $event })\"\n    />\n\n    <ef-localized-input\n        name=\"seoDescription\"\n        mode=\"textarea\"\n        [rows]=\"3\"\n        labelKey=\"ef_seo_fields_description_label\"\n        [value]=\"seoDescription()\"\n        [cultures]=\"cultures()\"\n        [maxLength]=\"descriptionMax()\"\n        [advisedLength]=\"descriptionAdvised()\"\n        counterHintKey=\"ef_seo_fields_counter_hint\"\n        counterOverKey=\"ef_seo_fields_over_hint\"\n        (valueChangeEvent)=\"seoChange.emit({ seoDescription: $event })\"\n    />\n\n    <ef-seo-preview\n        labelKey=\"ef_seo_fields_preview\"\n        [contentLang]=\"previewCode()\"\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}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLocalizedInputComponent, selector: "ef-localized-input", inputs: ["name", "value", "mode", "rows", "maxLength", "advisedLength", "required", "readOnlyCultures", "labelKey", "placeholderKey", "hintKey", "counterHintKey", "counterOverKey", "variant", "disabled", "errors", "cultures"], 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.1.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 }, 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 }, cultures: { classPropertyName: "cultures", publicName: "cultures", 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    <ef-localized-input\n        name=\"seoTitle\"\n        labelKey=\"ef_seo_fields_title_label\"\n        [value]=\"seoTitle()\"\n        [cultures]=\"cultures()\"\n        [maxLength]=\"titleMax()\"\n        [advisedLength]=\"titleAdvised()\"\n        counterHintKey=\"ef_seo_fields_counter_hint\"\n        counterOverKey=\"ef_seo_fields_over_hint\"\n        (valueChangeEvent)=\"seoChange.emit({ seoTitle: $event })\"\n    />\n\n    <ef-localized-input\n        name=\"seoDescription\"\n        mode=\"textarea\"\n        [rows]=\"3\"\n        labelKey=\"ef_seo_fields_description_label\"\n        [value]=\"seoDescription()\"\n        [cultures]=\"cultures()\"\n        [maxLength]=\"descriptionMax()\"\n        [advisedLength]=\"descriptionAdvised()\"\n        counterHintKey=\"ef_seo_fields_counter_hint\"\n        counterOverKey=\"ef_seo_fields_over_hint\"\n        (valueChangeEvent)=\"seoChange.emit({ seoDescription: $event })\"\n    />\n\n    <ef-seo-preview\n        labelKey=\"ef_seo_fields_preview\"\n        [contentLang]=\"previewCode()\"\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}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLocalizedInputComponent, selector: "ef-localized-input", inputs: ["name", "value", "mode", "rows", "maxLength", "advisedLength", "required", "readOnlyCultures", "labelKey", "placeholderKey", "hintKey", "counterHintKey", "counterOverKey", "variant", "disabled", "errors", "cultures", "activeCulture", "showTabs", "linkedInputs", "preview", "tabBadges"], outputs: ["activeCultureChange", "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,
@@ -14923,5 +15199,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractEfFormControl, EF_BADGE_BG_COLORS, EF_BADGE_BG_LIGHT_COLORS, EF_BADGE_BORDER_COLORS, EF_BADGE_DEFAULTS, EF_BADGE_TEXT_COLORS, EF_CHART_PALETTE, EF_DATATABLE_ACTIONS_DEFAULTS, EF_DATATABLE_COLUMN_DEFAULTS, EF_DATATABLE_DEFAULTS, EF_DATA_CARD_MOBILE_LAYOUT, EF_HTML_PREVIEW_DEFAULT_TITLE_KEY, EF_RICH_TEXT, EF_SEO_DEFAULT_LOCALES, EF_STATUS_COLORS, EF_STATUS_COLOR_ALIASES, EfAboutDialogComponent, EfActivationFilterComponent, EfAppMainComponent, EfAppShellComponent, EfAppShellMobileComponent, EfAppTopComponent, EfBadgeComponent, EfBlockUiComponent, EfBlockableDivComponent, EfBottomSheetComponent, EfBuildStampComponent, EfBulkBarComponent, EfButtonComponent, EfButtonGroupComponent, EfCardComponent, EfChangeHistoryComponent, EfChangePasswordComponent, EfChartComponent, EfCheckboxComponent, EfClearButtonComponent, EfColumnHeaderTemplateDirective, EfColumnTemplateDirective, EfCompactPipe, EfConfirmDialogComponent, EfCurrencyPipe, EfDataCardComponent, EfDatatableActionBarComponent, EfDatatableComponent, EfDatepickerAdvancedComponent, EfDatepickerComponent, EfDetailToolbarComponent, EfDialogComponent, EfEmailMetricsCardComponent, EfEmptyStateComponent, EfFabComponent, EfFieldsetComponent, EfFileUploadComponent, EfFilterDrawerComponent, EfFilterPillComponent, EfFormGridComponent, EfHtmlPreviewComponent, EfIdentityThumbComponent, EfInputNumberComponent, EfInputTextComponent, EfKpiCardComponent, EfLabelComponent, EfLocalizedInputComponent, EfModuleRailComponent, EfModuleSideComponent, EfMultiSelectComponent, EfOrderBuilderComponent, EfOrderSummaryComponent, EfOverflowTooltipDirective, EfPagerComponent, EfPasswordComponent, EfPdfPreviewComponent, EfPillGroupComponent, EfPresetPillComponent, EfPriceDisplayComponent, EfProductCatalogueComponent, EfProductCatalogueFilterComponent, EfProductPickerComponent, EfProductTypeaheadComponent, EfProfileChipComponent, EfProfileMenuComponent, EfPulseComponent, EfQuantitySelectorComponent, EfQuantityStepperComponent, EfRadioComponent, EfRankListComponent, EfReadOnlyDirective, EfRowActionsComponent, EfSearchToolbarComponent, EfSelectButtonComponent, EfSelectComponent, EfSeoFieldsComponent, EfSeoPreviewComponent, EfServerErrorsDirective, EfSessionIdleDialogComponent, EfShortcutsDialogComponent, EfSkeletonComponent, EfSmartBarComponent, EfStatsComponent, EfStatusChipComponent, EfTabPanelDirective, EfTabsComponent, EfTextareaComponent, EfThemeConfiguratorComponent, EfThemeToggleComponent, EfTimelineComponent, EfToastRegionComponent, EfToggleSwitchComponent, EfToolbarComponent, EfTooltipDirective, EfTotalsComponent, OrderEntityHelper, OrderLineItemHelper, TruncatePipe, buildChartConfig, defaultUnitPrice, getColumnAlignment, mergeColumnDefaults, plainTextLength, resolveEfStatusColor };
+export { AbstractEfFormControl, EF_BADGE_BG_COLORS, EF_BADGE_BG_LIGHT_COLORS, EF_BADGE_BORDER_COLORS, EF_BADGE_DEFAULTS, EF_BADGE_TEXT_COLORS, EF_CHART_PALETTE, EF_DATATABLE_ACTIONS_DEFAULTS, EF_DATATABLE_COLUMN_DEFAULTS, EF_DATATABLE_DEFAULTS, EF_DATA_CARD_MOBILE_LAYOUT, EF_HTML_PREVIEW_DEFAULT_TITLE_KEY, EF_RICH_TEXT, EF_SEO_DEFAULT_LOCALES, EF_STATUS_COLORS, EF_STATUS_COLOR_ALIASES, EfAboutDialogComponent, EfActivationFilterComponent, EfAppMainComponent, EfAppShellComponent, EfAppShellMobileComponent, EfAppTopComponent, EfBadgeComponent, EfBlockUiComponent, EfBlockableDivComponent, EfBottomSheetComponent, EfBuildStampComponent, EfBulkBarComponent, EfButtonComponent, EfButtonGroupComponent, EfCardComponent, EfChangeHistoryComponent, EfChangePasswordComponent, EfChartComponent, EfCheckboxComponent, EfClearButtonComponent, EfColumnHeaderTemplateDirective, EfColumnTemplateDirective, EfCompactPipe, EfConfirmDialogComponent, EfCurrencyPipe, EfDataCardComponent, EfDatatableActionBarComponent, EfDatatableComponent, EfDatepickerAdvancedComponent, EfDatepickerComponent, EfDetailToolbarComponent, EfDialogComponent, EfEmailMetricsCardComponent, EfEmptyStateComponent, EfFabComponent, EfFieldsetComponent, EfFileUploadComponent, EfFilterDrawerComponent, EfFilterPillComponent, EfFormGridComponent, EfHtmlPreviewComponent, EfIdentityThumbComponent, EfInputNumberComponent, EfInputTextComponent, EfKpiCardComponent, EfLabelComponent, EfLocalizedInputComponent, EfModuleRailComponent, EfModuleSideComponent, EfMultiSelectComponent, EfOrderBuilderComponent, EfOrderSummaryComponent, EfOverflowTooltipDirective, EfPagerComponent, EfPasswordComponent, EfPdfPreviewComponent, EfPillGroupComponent, EfPresetPillComponent, EfPriceDisplayComponent, EfProductCatalogueComponent, EfProductCatalogueFilterComponent, EfProductPickerComponent, EfProductTypeaheadComponent, EfProfileChipComponent, EfProfileMenuComponent, EfPulseComponent, EfQuantitySelectorComponent, EfQuantityStepperComponent, EfRadioComponent, EfRankListComponent, EfReadOnlyDirective, EfRowActionsComponent, EfSearchToolbarComponent, EfSelectButtonComponent, EfSelectComponent, EfSeoFieldsComponent, EfSeoPreviewComponent, EfServerErrorsDirective, EfSessionIdleDialogComponent, EfShortcutsDialogComponent, EfSkeletonComponent, EfSmartBarComponent, EfStatsComponent, EfStatusChipComponent, EfTabPanelDirective, EfTabsComponent, EfTextareaComponent, EfThemeConfiguratorComponent, EfThemeToggleComponent, EfTimelineComponent, EfToastRegionComponent, EfToggleSwitchComponent, EfToolbarComponent, EfTooltipDirective, EfTotalsComponent, OrderEntityHelper, OrderLineItemHelper, TruncatePipe, auditEntityKeySegment, buildChartConfig, defaultUnitPrice, getColumnAlignment, mergeColumnDefaults, plainTextLength, resolveEfStatusColor };
 //# sourceMappingURL=elasticias-ui.mjs.map