@elasticias/ui 1.0.39 → 1.0.41

package/fesm2022/elasticias-ui.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Pipe, input, Component, output, booleanAttribute, Input, Directive, signal, computed, inject, EventEmitter, Injector, forwardRef, Output, ContentChild, HostBinding, ChangeDetectionStrategy, ElementRef, LOCALE_ID, ViewContainerRef, DestroyRef, ChangeDetectorRef, effect, HostListener, ViewChild, model, InjectionToken, TemplateRef, ContentChildren, viewChild, contentChild, ViewEncapsulation, afterNextRender, ViewChildren, untracked, PLATFORM_ID } from '@angular/core';
-import { NumberUtils, UuidUtils, StorageUtils } from '@elasticias/utils';
+import { NumberUtils, UuidUtils } from '@elasticias/utils';
 import * as i1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i1$3 from '@angular/common';
@@ -22,7 +22,7 @@ import * as i1$6 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import { SCREEN_REF_DATA_SERVICE, ScreenStateEnum } from '@elasticias/screens';
 import { Permissions } from '@elasticias/types';
-import { EfShortcutService, EfViewportService, formatShortcut, EfThemeConfigService, EF_BUILD_INFO, EfPermissionService, EfActiveModuleService, EF_SESSION, EfToastService } from '@elasticias/core';
+import { EfShortcutService, EfViewportService, EF_PREFERENCE_STORE, formatShortcut, efTablePrefsKey, EfThemeConfigService, EF_BUILD_INFO, EfPermissionService, EfActiveModuleService, EF_SESSION, EF_SIDE_COLLAPSED_KEY, EfToastService } from '@elasticias/core';
 import * as i1$7 from 'primeng/fieldset';
 import { FieldsetModule } from 'primeng/fieldset';
 import * as i2$2 from 'primeng/accordion';
@@ -570,6 +570,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 args: [{ transform: booleanAttribute }]
             }] } });
 
+/**
+ * Scopes a read-only state to every descendant `ef-*` form control.
+ *
+ * Drop it on the container that wraps a form and bind whether the current
+ * user lacks write access; descendant controls fold it into their effective
+ * disabled state, so no per-field `[disabled]` binding is needed:
+ *
+ * ```html
+ * <div class="detail-grid" [efReadOnly]="!canWrite()">
+ *   <ef-input-text name="companyName" ... />
+ *   <ef-select     name="clientType"  ... />
+ * </div>
+ * ```
+ *
+ * The input is a signal, so toggling it re-enables the controls under
+ * zoneless change detection (controls read it through `isDisabled`).
+ */
+class EfReadOnlyDirective {
+    /** When true, every descendant ef-* control renders disabled. */
+    readOnly = input(false, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), alias: 'efReadOnly', transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfReadOnlyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: EfReadOnlyDirective, isStandalone: true, selector: "[efReadOnly]", inputs: { readOnly: { classPropertyName: "readOnly", publicName: "efReadOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfReadOnlyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[efReadOnly]',
+                    standalone: true,
+                }]
+        }], propDecorators: { readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "efReadOnly", required: false }] }] } });
+
 /**
  * Scopes a map of server/validation errors to its descendant `ef-*` form
  * controls, which auto-link by their `name` — no per-field `[errors]`
@@ -702,14 +733,16 @@ class AbstractEfFormControl {
     required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** The `[disabled]` input. The **effective** disabled (input OR
-     *  form-driven via CVA) is {@link isDisabled} — bind that in templates. */
+     *  form-driven via CVA, or an enclosing `[efReadOnly]` scope) is {@link isDisabled} — bind that in templates. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Form-driven disabled set by CVA `setDisabledState`, merged with the
      *  `[disabled]` input. Writable signal (the input itself is read-only). */
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
     /** Effective disabled state — the `[disabled]` input OR a reactive-form
      *  `disable()`. Templates/logic should use this, not `disabled()`. */
-    isDisabled = computed(() => this.disabled() || this._cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._cvaDisabled() || (this.readOnlyScope?.readOnly() ?? false), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** Optional enclosing `[efReadOnly]` scope — disables the control when set. */
+    readOnlyScope = inject(EfReadOnlyDirective, { optional: true });
     /** CVA hook for subclasses: `setDisabledState(d) { this.updateDisabledState(d); }`. */
     updateDisabledState(disabled) {
         this._cvaDisabled.set(disabled);
@@ -2604,6 +2637,12 @@ class EfQuantityStepperComponent {
      * When present, it specifies that the component should be disabled
      */
     disabled = false;
+    /** Optional enclosing `[efReadOnly]` scope. */
+    readOnlyScope = inject(EfReadOnlyDirective, { optional: true });
+    /** Effective disabled: the input / CVA state OR a read-only scope. */
+    get isDisabled() {
+        return this.disabled || (this.readOnlyScope?.readOnly() ?? false);
+    }
     /**
      * Callback to invoke when the value changes
      */
@@ -2675,7 +2714,7 @@ class EfQuantityStepperComponent {
                 useExisting: forwardRef(() => EfQuantityStepperComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n  class=\"flex h-12 items-center text-center justify-center gap-2 rounded-full !border !border-gray-200 bg-gray-100 dark:bg-slate-500 p-2\"\n>\n  <ef-inputnumber\n    [(ngModel)]=\"value\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    [minFractionDigits]=\"minFractionDigits\"\n    [maxFractionDigits]=\"maxFractionDigits\"\n    [locale]=\"locale\"\n    [disabled]=\"disabled\"\n    [showButtons]=\"true\"\n    buttonLayout=\"horizontal\"\n    decrementButtonIcon=\"-\"\n    incrementButtonIcon=\"+\"\n    [pt]=\"ptConfig\"\n    (ngModelChange)=\"handleValueChange($event)\"\n    (blurEvent)=\"handleBlur()\"\n  >\n  </ef-inputnumber>\n</div>\n", styles: [""], dependencies: [{ 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: "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div\n  class=\"flex h-12 items-center text-center justify-center gap-2 rounded-full !border !border-gray-200 bg-gray-100 dark:bg-slate-500 p-2\"\n>\n  <ef-inputnumber\n    [(ngModel)]=\"value\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    [minFractionDigits]=\"minFractionDigits\"\n    [maxFractionDigits]=\"maxFractionDigits\"\n    [locale]=\"locale\"\n    [disabled]=\"isDisabled\"\n    [showButtons]=\"true\"\n    buttonLayout=\"horizontal\"\n    decrementButtonIcon=\"-\"\n    incrementButtonIcon=\"+\"\n    [pt]=\"ptConfig\"\n    (ngModelChange)=\"handleValueChange($event)\"\n    (blurEvent)=\"handleBlur()\"\n  >\n  </ef-inputnumber>\n</div>\n", styles: [""], dependencies: [{ 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: "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfQuantityStepperComponent, decorators: [{
             type: Component,
@@ -2685,7 +2724,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                             useExisting: forwardRef(() => EfQuantityStepperComponent),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"flex h-12 items-center text-center justify-center gap-2 rounded-full !border !border-gray-200 bg-gray-100 dark:bg-slate-500 p-2\"\n>\n  <ef-inputnumber\n    [(ngModel)]=\"value\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    [minFractionDigits]=\"minFractionDigits\"\n    [maxFractionDigits]=\"maxFractionDigits\"\n    [locale]=\"locale\"\n    [disabled]=\"disabled\"\n    [showButtons]=\"true\"\n    buttonLayout=\"horizontal\"\n    decrementButtonIcon=\"-\"\n    incrementButtonIcon=\"+\"\n    [pt]=\"ptConfig\"\n    (ngModelChange)=\"handleValueChange($event)\"\n    (blurEvent)=\"handleBlur()\"\n  >\n  </ef-inputnumber>\n</div>\n" }]
+                    ], template: "<div\n  class=\"flex h-12 items-center text-center justify-center gap-2 rounded-full !border !border-gray-200 bg-gray-100 dark:bg-slate-500 p-2\"\n>\n  <ef-inputnumber\n    [(ngModel)]=\"value\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    [minFractionDigits]=\"minFractionDigits\"\n    [maxFractionDigits]=\"maxFractionDigits\"\n    [locale]=\"locale\"\n    [disabled]=\"isDisabled\"\n    [showButtons]=\"true\"\n    buttonLayout=\"horizontal\"\n    decrementButtonIcon=\"-\"\n    incrementButtonIcon=\"+\"\n    [pt]=\"ptConfig\"\n    (ngModelChange)=\"handleValueChange($event)\"\n    (blurEvent)=\"handleBlur()\"\n  >\n  </ef-inputnumber>\n</div>\n" }]
         }], propDecorators: { value: [{
                 type: Input
             }], min: [{
@@ -4280,8 +4319,12 @@ class EfRowActionsComponent {
             return true;
         if (action.visible === false)
             return false;
-        if (action.permission && ctx && !ctx.isGranted(action.permission))
-            return false;
+        if (action.permission && ctx) {
+            // Array.isArray does not narrow a ReadonlyArray out of the union.
+            const required = typeof action.permission === 'string' ? [action.permission] : action.permission;
+            if (!required.every(p => ctx.isGranted(p)))
+                return false;
+        }
         return true;
     }
     /** Stable trackBy across renders. */
@@ -4528,6 +4571,7 @@ class EfDataCardComponent {
          become a list instead, driven by the same column config —
          each column declares (or is given) a role. */
     viewport = inject(EfViewportService);
+    prefs = inject(EF_PREFERENCE_STORE);
     configuredMobileLayout = inject(EF_DATA_CARD_MOBILE_LAYOUT, { optional: true });
     isMobile = this.viewport.isMobile;
     /** Per-screen override of the app-wide default. */
@@ -4881,7 +4925,10 @@ class EfDataCardComponent {
                 labelKey: 'common_duplicate',
                 icon: 'pi pi-copy',
                 kbd: formatShortcut('mod+d'),
-                permission: Permissions.Duplicate,
+                // Saved through create: without Create the row would open
+                // a duplicate form the user cannot save. Hiding the item
+                // also disarms mod+d, which only runs visible items.
+                permission: [Permissions.Duplicate, Permissions.Create],
                 command: () => this.rowAction.emit({ action: 'duplicate', row }),
             });
         }
@@ -5145,14 +5192,17 @@ class EfDataCardComponent {
     }
     storageKey() {
         const key = this.tableKey();
-        return key ? `TABLE_PREFS_${key}` : null;
+        return key ? efTablePrefsKey(key) : null;
     }
     loadPreferences() {
         const key = this.storageKey();
         if (!key)
             return;
         try {
-            const saved = StorageUtils.getLocal(key);
+            const raw = this.prefs.get(key);
+            if (!raw)
+                return;
+            const saved = JSON.parse(raw);
             if (!saved)
                 return;
             if (saved.density)
@@ -5170,10 +5220,10 @@ class EfDataCardComponent {
         if (!key)
             return;
         try {
-            StorageUtils.setLocal(key, {
+            this.prefs.set(key, JSON.stringify({
                 density: this.density(),
                 hiddenColumnIds: this.hiddenColumnIds(),
-            });
+            }));
         }
         catch {
             // Preferences are a convenience; losing them must never break
@@ -7273,7 +7323,8 @@ class EfModuleSideComponent {
         return m.navSections
             .map(section => ({
             ...section,
-            items: section.items.filter(item => this.perms.can(m.id, item.requiredAction ?? 'read')),
+            items: section.items.filter(item => this.perms.can(m.id, item.requiredAction ?? 'read') &&
+                (!item.screenCode || this.perms.canScreen(item.screenCode))),
         }))
             .filter(section => section.items.length > 0);
     }, ...(ngDevMode ? [{ debugName: "visibleSections" }] : /* istanbul ignore next */ []));
@@ -7425,15 +7476,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 args: ['document:keydown.escape']
             }] } });
 
-const SIDE_COLLAPSED_KEY = 'ef.shell.side-collapsed';
-function readSideCollapsed() {
-    try {
-        return localStorage.getItem(SIDE_COLLAPSED_KEY) === '1';
-    }
-    catch {
-        return false;
-    }
-}
 /**
  * Top-level Comptoir shell.
  *
@@ -7481,20 +7523,22 @@ class EfAppShellComponent {
          inside the side, so it is still there to bring the side back
          once it is gone, and in the same spot. Remembered per browser:
          it is a reading preference, not something worth a round trip. */
-    sideCollapsed = signal(readSideCollapsed(), ...(ngDevMode ? [{ debugName: "sideCollapsed" }] : /* istanbul ignore next */ []));
+    prefs = inject(EF_PREFERENCE_STORE);
+    sideCollapsed = signal(this.prefs.get(EF_SIDE_COLLAPSED_KEY) === '1', ...(ngDevMode ? [{ debugName: "sideCollapsed" }] : /* istanbul ignore next */ []));
     /** Shown in the toggle's tooltip: the button is far from the content, the shortcut is not. */
     shortcutHint = formatShortcut('mod+b');
     toggleSide() {
         const collapsed = !this.sideCollapsed();
         this.sideCollapsed.set(collapsed);
-        try {
-            localStorage.setItem(SIDE_COLLAPSED_KEY, collapsed ? '1' : '0');
-        }
-        catch {
-            /* private window or blocked storage: the toggle still works for this visit */
-        }
+        this.prefs.set(EF_SIDE_COLLAPSED_KEY, collapsed ? '1' : '0');
     }
     constructor() {
+        // A store that hydrates after sign in announces the key it filled.
+        this.prefs.changes?.pipe(takeUntilDestroyed()).subscribe((key) => {
+            if (key === EF_SIDE_COLLAPSED_KEY) {
+                this.sideCollapsed.set(this.prefs.get(EF_SIDE_COLLAPSED_KEY) === '1');
+            }
+        });
         inject(EfShortcutService).register({
             id: 'shell.toggle-side',
             keys: 'mod+b',
@@ -7530,7 +7574,8 @@ class EfAppShellComponent {
         return m.navSections
             .map(section => ({
             ...section,
-            items: section.items.filter(item => this.perms.can(m.id, item.requiredAction ?? 'read')),
+            items: section.items.filter(item => this.perms.can(m.id, item.requiredAction ?? 'read') &&
+                (!item.screenCode || this.perms.canScreen(item.screenCode))),
         }))
             .filter(section => section.items.length > 0);
     }, ...(ngDevMode ? [{ debugName: "moduleSections" }] : /* istanbul ignore next */ []));
@@ -8601,6 +8646,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * Custom actions can declare `permission` and `visible` like
  * `EfRowAction`. With `[context]` bound, the toolbar filters them
  * against `ScreenContext.isGranted()` automatically.
+ *
+ * Save and actions flagged `requiresWrite` follow `context.canWrite`,
+ * which `AbstractDetailScreenV2` sets from its own `canWrite()` (Edit on
+ * an existing record, Create on a new one or a duplicate). Binding
+ * `[context]="context"` is all a screen does; it does not pass
+ * `[showSaveAction]` for permissions. Without a context, or with one that
+ * carries no `canWrite`, Save behaves as `[showSaveAction]` alone says.
  */
 class EfDetailToolbarComponent {
     /* ── Inputs ─────────────────────────────────────────────────── */
@@ -8638,12 +8690,17 @@ class EfDetailToolbarComponent {
     /** Custom actions after permission + `visible` filtering. */
     visibleCustomActions = computed(() => {
         const ctx = this.context();
-        return this.customActions().filter((a) => this.isCustomVisible(a, ctx));
+        const canWrite = this.canWrite();
+        return this.customActions().filter((a) => this.isCustomVisible(a, ctx, canWrite));
     }, ...(ngDevMode ? [{ debugName: "visibleCustomActions" }] : /* istanbul ignore next */ []));
     canPrint = computed(() => this.checkStandard(this.showPrintAction(), Permissions.Print), ...(ngDevMode ? [{ debugName: "canPrint" }] : /* istanbul ignore next */ []));
     canDuplicate = computed(() => this.checkStandard(this.showDuplicateAction(), Permissions.Duplicate), ...(ngDevMode ? [{ debugName: "canDuplicate" }] : /* istanbul ignore next */ []));
     canDelete = computed(() => this.checkStandard(this.showDeleteAction(), Permissions.Delete), ...(ngDevMode ? [{ debugName: "canDelete" }] : /* istanbul ignore next */ []));
-    canSave = computed(() => this.showSaveAction(), ...(ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []));
+    /** The bound screen's write state; `true` when unknown (no context,
+     *  or a context no detail abstract has stamped), which keeps the
+     *  toolbar's behaviour for those callers what it always was. */
+    canWrite = computed(() => this.context()?.canWrite?.() ?? true, ...(ngDevMode ? [{ debugName: "canWrite" }] : /* istanbul ignore next */ []));
+    canSave = computed(() => this.showSaveAction() && this.canWrite(), ...(ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []));
     hasStandardActions = computed(() => this.canPrint() ||
         this.canDuplicate() ||
         this.canDelete() ||
@@ -8659,9 +8716,11 @@ class EfDetailToolbarComponent {
         this.customAction.emit(action);
     }
     /* ── Internals ──────────────────────────────────────────────── */
-    isCustomVisible(action, ctx) {
+    isCustomVisible(action, ctx, canWrite) {
         if (action.visible === false)
             return false;
+        if (action.requiresWrite && !canWrite)
+            return false;
         if (action.permission && ctx && !ctx.isGranted(action.permission))
             return false;
         return true;
@@ -8678,7 +8737,9 @@ class EfDetailToolbarComponent {
             case Permissions.Print:
                 return ctx.hasPrintPermission;
             case Permissions.Duplicate:
-                return ctx.hasDuplicatePermission;
+                // A duplicate is saved through create, and duplicate() refuses
+                // without Create; showing it on Duplicate alone gave a dead button.
+                return ctx.hasDuplicatePermission && ctx.hasCreatePermission;
             case Permissions.Delete:
                 return ctx.hasDeletePermission;
         }
@@ -9541,11 +9602,11 @@ class EfCheckboxComponent extends AbstractEfFormControl {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfCheckboxComponent, isStandalone: true, selector: "ef-checkbox", inputs: { value: "value", binary: ["binary", "binary", booleanAttribute], variant: "variant", inline: ["inline", "inline", booleanAttribute], checked: "checked" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.ef-stacked": "this.isStacked" } }, usesInheritance: true, ngImport: i0, template: "@if (!inline && hasLabel) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-checkbox-control\">\n  @if (variant === 'comptoir') {\n    <label class=\"ef-checkbox-native\" [class.is-disabled]=\"disabled\">\n      <input\n        type=\"checkbox\"\n        [id]=\"effectiveId\"\n        [attr.name]=\"name() || null\"\n        [checked]=\"!!checked\"\n        [disabled]=\"isDisabled()\"\n        [class.is-invalid]=\"isInvalid\"\n        [attr.aria-label]=\"effectiveAriaLabel\"\n        [attr.aria-required]=\"required() ? 'true' : null\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n        [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n        (change)=\"handleNativeChange($any($event.target).checked)\"\n      />\n      <span class=\"ef-checkbox-box\" aria-hidden=\"true\"></span>\n      @if (inline && hasLabel) {\n        <span class=\"ef-checkbox-label\">\n          {{ labelKey() ? (labelKey() | translate) : label() }}\n          @if (required()) {\n            <span class=\"ef-checkbox-required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n    </label>\n  } @else {\n    <p-checkbox\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [ngModel]=\"checked\"\n      [ngModelOptions]=\"{standalone: true}\"\n      (onChange)=\"handleChange($event)\"\n      [value]=\"value\"\n      [binary]=\"binary\"\n      [disabled]=\"isDisabled()\"\n      [ariaLabel]=\"effectiveAriaLabel || undefined\"\n    />\n    @if (inline && hasLabel) {\n      <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" styleClass=\"form-label-left cursor-pointer\" />\n    }\n  }\n</div>\n@if (showRequired || serverErrors) {\n  <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.ef-checkbox-control{display:inline-flex;align-items:center;gap:.5rem;min-width:0}:host(.ef-stacked){display:block}:host(.ef-stacked)>.ef-checkbox-control{display:flex;min-height:var(--hit-base)}\n"], dependencies: [{ kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfCheckboxComponent, isStandalone: true, selector: "ef-checkbox", inputs: { value: "value", binary: ["binary", "binary", booleanAttribute], variant: "variant", inline: ["inline", "inline", booleanAttribute], checked: "checked" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.ef-stacked": "this.isStacked" } }, usesInheritance: true, ngImport: i0, template: "@if (!inline && hasLabel) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-checkbox-control\">\n  @if (variant === 'comptoir') {\n    <label class=\"ef-checkbox-native\" [class.is-disabled]=\"isDisabled()\">\n      <input\n        type=\"checkbox\"\n        [id]=\"effectiveId\"\n        [attr.name]=\"name() || null\"\n        [checked]=\"!!checked\"\n        [disabled]=\"isDisabled()\"\n        [class.is-invalid]=\"isInvalid\"\n        [attr.aria-label]=\"effectiveAriaLabel\"\n        [attr.aria-required]=\"required() ? 'true' : null\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n        [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n        (change)=\"handleNativeChange($any($event.target).checked)\"\n      />\n      <span class=\"ef-checkbox-box\" aria-hidden=\"true\"></span>\n      @if (inline && hasLabel) {\n        <span class=\"ef-checkbox-label\">\n          {{ labelKey() ? (labelKey() | translate) : label() }}\n          @if (required()) {\n            <span class=\"ef-checkbox-required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n    </label>\n  } @else {\n    <p-checkbox\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [ngModel]=\"checked\"\n      [ngModelOptions]=\"{standalone: true}\"\n      (onChange)=\"handleChange($event)\"\n      [value]=\"value\"\n      [binary]=\"binary\"\n      [disabled]=\"isDisabled()\"\n      [ariaLabel]=\"effectiveAriaLabel || undefined\"\n    />\n    @if (inline && hasLabel) {\n      <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" styleClass=\"form-label-left cursor-pointer\" />\n    }\n  }\n</div>\n@if (showRequired || serverErrors) {\n  <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.ef-checkbox-control{display:inline-flex;align-items:center;gap:.5rem;min-width:0}:host(.ef-stacked){display:block}:host(.ef-stacked)>.ef-checkbox-control{display:flex;min-height:var(--hit-base)}\n"], dependencies: [{ kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-checkbox', standalone: true, imports: [CheckboxModule, FormsModule, TranslateModule, EfLabelComponent], template: "@if (!inline && hasLabel) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-checkbox-control\">\n  @if (variant === 'comptoir') {\n    <label class=\"ef-checkbox-native\" [class.is-disabled]=\"disabled\">\n      <input\n        type=\"checkbox\"\n        [id]=\"effectiveId\"\n        [attr.name]=\"name() || null\"\n        [checked]=\"!!checked\"\n        [disabled]=\"isDisabled()\"\n        [class.is-invalid]=\"isInvalid\"\n        [attr.aria-label]=\"effectiveAriaLabel\"\n        [attr.aria-required]=\"required() ? 'true' : null\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n        [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n        (change)=\"handleNativeChange($any($event.target).checked)\"\n      />\n      <span class=\"ef-checkbox-box\" aria-hidden=\"true\"></span>\n      @if (inline && hasLabel) {\n        <span class=\"ef-checkbox-label\">\n          {{ labelKey() ? (labelKey() | translate) : label() }}\n          @if (required()) {\n            <span class=\"ef-checkbox-required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n    </label>\n  } @else {\n    <p-checkbox\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [ngModel]=\"checked\"\n      [ngModelOptions]=\"{standalone: true}\"\n      (onChange)=\"handleChange($event)\"\n      [value]=\"value\"\n      [binary]=\"binary\"\n      [disabled]=\"isDisabled()\"\n      [ariaLabel]=\"effectiveAriaLabel || undefined\"\n    />\n    @if (inline && hasLabel) {\n      <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" styleClass=\"form-label-left cursor-pointer\" />\n    }\n  }\n</div>\n@if (showRequired || serverErrors) {\n  <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.ef-checkbox-control{display:inline-flex;align-items:center;gap:.5rem;min-width:0}:host(.ef-stacked){display:block}:host(.ef-stacked)>.ef-checkbox-control{display:flex;min-height:var(--hit-base)}\n"] }]
+            args: [{ selector: 'ef-checkbox', standalone: true, imports: [CheckboxModule, FormsModule, TranslateModule, EfLabelComponent], template: "@if (!inline && hasLabel) {\n  <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" [required]=\"required()\" />\n}\n<div class=\"ef-checkbox-control\">\n  @if (variant === 'comptoir') {\n    <label class=\"ef-checkbox-native\" [class.is-disabled]=\"isDisabled()\">\n      <input\n        type=\"checkbox\"\n        [id]=\"effectiveId\"\n        [attr.name]=\"name() || null\"\n        [checked]=\"!!checked\"\n        [disabled]=\"isDisabled()\"\n        [class.is-invalid]=\"isInvalid\"\n        [attr.aria-label]=\"effectiveAriaLabel\"\n        [attr.aria-required]=\"required() ? 'true' : null\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n        [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n        (change)=\"handleNativeChange($any($event.target).checked)\"\n      />\n      <span class=\"ef-checkbox-box\" aria-hidden=\"true\"></span>\n      @if (inline && hasLabel) {\n        <span class=\"ef-checkbox-label\">\n          {{ labelKey() ? (labelKey() | translate) : label() }}\n          @if (required()) {\n            <span class=\"ef-checkbox-required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n    </label>\n  } @else {\n    <p-checkbox\n      [inputId]=\"effectiveId\"\n      [name]=\"name()\"\n      [ngModel]=\"checked\"\n      [ngModelOptions]=\"{standalone: true}\"\n      (onChange)=\"handleChange($event)\"\n      [value]=\"value\"\n      [binary]=\"binary\"\n      [disabled]=\"isDisabled()\"\n      [ariaLabel]=\"effectiveAriaLabel || undefined\"\n    />\n    @if (inline && hasLabel) {\n      <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" styleClass=\"form-label-left cursor-pointer\" />\n    }\n  }\n</div>\n@if (showRequired || serverErrors) {\n  <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0}.ef-checkbox-control{display:inline-flex;align-items:center;gap:.5rem;min-width:0}:host(.ef-stacked){display:block}:host(.ef-stacked)>.ef-checkbox-control{display:flex;min-height:var(--hit-base)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], binary: [{
@@ -9708,6 +9769,12 @@ class EfDatepickerComponent {
     showButtonBar = false;
     minDate;
     maxDate;
+    /** Optional enclosing `[efReadOnly]` scope. */
+    readOnlyScope = inject(EfReadOnlyDirective, { optional: true });
+    /** Effective disabled: the input / CVA state OR a read-only scope. */
+    get isDisabled() {
+        return this.disabled || (this.readOnlyScope?.readOnly() ?? false);
+    }
     /**
      * Take focus on load. Bound explicitly rather than left unset: PrimeNG's
      * AutoFocus directive tests `autofocus === false`, and the control declares
@@ -9767,11 +9834,11 @@ class EfDatepickerComponent {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfDatepickerComponent, isStandalone: true, selector: "ef-datepicker", inputs: { label: "label", labelKey: "labelKey", inputId: "inputId", name: "name", placeholder: "placeholder", placeholderKey: "placeholderKey", size: "size", required: ["required", "required", booleanAttribute], fluid: ["fluid", "fluid", booleanAttribute], inline: ["inline", "inline", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], showIcon: ["showIcon", "showIcon", booleanAttribute], iconDisplay: "iconDisplay", selectionMode: "selectionMode", dateFormat: "dateFormat", appendTo: "appendTo", showTime: ["showTime", "showTime", booleanAttribute], showButtonBar: ["showButtonBar", "showButtonBar", booleanAttribute], minDate: "minDate", maxDate: "maxDate", autofocus: ["autofocus", "autofocus", booleanAttribute] }, outputs: { dateSelectEvent: "dateSelectEvent" }, host: { properties: { "class.ef-inline": "this.isInline" } }, ngImport: i0, template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-datepicker\n    [autofocus]=\"autofocus\"\n    [inputId]=\"effectiveId\"\n    [name]=\"name\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"handleChange($event)\"\n    (onBlur)=\"handleBlur()\"\n    [placeholder]=\"effectivePlaceholder\"\n    [size]=\"size\"\n    [disabled]=\"disabled\"\n    [showIcon]=\"showIcon\"\n    [iconDisplay]=\"iconDisplay\"\n    [selectionMode]=\"selectionMode\"\n    [dateFormat]=\"dateFormat\"\n    [appendTo]=\"appendTo\"\n    [showTime]=\"showTime\"\n    [showButtonBar]=\"showButtonBar\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [fluid]=\"fluid\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i1$d.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfDatepickerComponent, isStandalone: true, selector: "ef-datepicker", inputs: { label: "label", labelKey: "labelKey", inputId: "inputId", name: "name", placeholder: "placeholder", placeholderKey: "placeholderKey", size: "size", required: ["required", "required", booleanAttribute], fluid: ["fluid", "fluid", booleanAttribute], inline: ["inline", "inline", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], showIcon: ["showIcon", "showIcon", booleanAttribute], iconDisplay: "iconDisplay", selectionMode: "selectionMode", dateFormat: "dateFormat", appendTo: "appendTo", showTime: ["showTime", "showTime", booleanAttribute], showButtonBar: ["showButtonBar", "showButtonBar", booleanAttribute], minDate: "minDate", maxDate: "maxDate", autofocus: ["autofocus", "autofocus", booleanAttribute] }, outputs: { dateSelectEvent: "dateSelectEvent" }, host: { properties: { "class.ef-inline": "this.isInline" } }, ngImport: i0, template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-datepicker\n    [autofocus]=\"autofocus\"\n    [inputId]=\"effectiveId\"\n    [name]=\"name\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"handleChange($event)\"\n    (onBlur)=\"handleBlur()\"\n    [placeholder]=\"effectivePlaceholder\"\n    [size]=\"size\"\n    [disabled]=\"isDisabled\"\n    [showIcon]=\"showIcon\"\n    [iconDisplay]=\"iconDisplay\"\n    [selectionMode]=\"selectionMode\"\n    [dateFormat]=\"dateFormat\"\n    [appendTo]=\"appendTo\"\n    [showTime]=\"showTime\"\n    [showButtonBar]=\"showButtonBar\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [fluid]=\"fluid\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i1$d.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-datepicker', standalone: true, imports: [DatePickerModule, FormsModule, TranslateModule, EfLabelComponent], template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-datepicker\n    [autofocus]=\"autofocus\"\n    [inputId]=\"effectiveId\"\n    [name]=\"name\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"handleChange($event)\"\n    (onBlur)=\"handleBlur()\"\n    [placeholder]=\"effectivePlaceholder\"\n    [size]=\"size\"\n    [disabled]=\"disabled\"\n    [showIcon]=\"showIcon\"\n    [iconDisplay]=\"iconDisplay\"\n    [selectionMode]=\"selectionMode\"\n    [dateFormat]=\"dateFormat\"\n    [appendTo]=\"appendTo\"\n    [showTime]=\"showTime\"\n    [showButtonBar]=\"showButtonBar\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [fluid]=\"fluid\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"] }]
+            args: [{ selector: 'ef-datepicker', standalone: true, imports: [DatePickerModule, FormsModule, TranslateModule, EfLabelComponent], template: "@if (labelKey || label) {\n  <ef-label [labelKey]=\"labelKey\" [label]=\"label\" [for]=\"effectiveId\" [required]=\"required\" />\n}\n<div class=\"ef-field-control\">\n  <p-datepicker\n    [autofocus]=\"autofocus\"\n    [inputId]=\"effectiveId\"\n    [name]=\"name\"\n    [ngModel]=\"value\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (ngModelChange)=\"handleChange($event)\"\n    (onBlur)=\"handleBlur()\"\n    [placeholder]=\"effectivePlaceholder\"\n    [size]=\"size\"\n    [disabled]=\"isDisabled\"\n    [showIcon]=\"showIcon\"\n    [iconDisplay]=\"iconDisplay\"\n    [selectionMode]=\"selectionMode\"\n    [dateFormat]=\"dateFormat\"\n    [appendTo]=\"appendTo\"\n    [showTime]=\"showTime\"\n    [showButtonBar]=\"showButtonBar\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [fluid]=\"fluid\"\n    [class.ng-invalid]=\"isInvalid\"\n    [class.ng-touched]=\"ngControl?.touched\"\n  />\n  @if (showRequired) {\n    <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n  }\n  @if (serverErrors; as errors) {\n    @for (error of errors; track error) {\n      <small class=\"text-danger block\">{{ error }}</small>\n    }\n  }\n</div>\n", styles: [":host{display:block}:host(.ef-inline){display:flex;align-items:baseline;gap:.5rem}:host(.ef-inline)>label{white-space:nowrap;flex-shrink:0}:host(.ef-inline)>.ef-field-control{flex:1;min-width:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], labelKey: [{
@@ -10818,14 +10885,22 @@ class EfSmartBarComponent {
                          only text inside this label is the shortcut hint, so
                          without it a screen reader announced the primary
                          search field of every list screen as "Cmd K". -->
+                    <!-- type="search" fires a native, bubbling 'search' Event
+                         on Enter and on the browser's clear button (Chromium,
+                         WebKit). A host (search) binding hears that DOM event
+                         as well as the output below, so it would receive the
+                         Event as the search text. Stopped here; the output is
+                         the only 'search' that leaves this component. -->
                     <input
                         #searchInput
                         type="search"
+                        enterkeyhint="search"
                         [attr.aria-label]="accessibleLabel()"
                         [placeholder]="(placeholderKey() ? (placeholderKey() | translate) : placeholder())"
                         [ngModel]="searchText()"
                         (ngModelChange)="searchText.set($event)"
                         (keydown.enter)="onSubmit()"
+                        (search)="$event.stopPropagation()"
                     />
                     @if (showKbdHint() && kbdLabel()) {
                         <!-- Decorative, and hidden from the accessibility tree:
@@ -10865,15 +10940,11 @@ class EfSmartBarComponent {
 
             <ng-content select="[drawer]"></ng-content>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, styles: ["input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfSmartBarComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ef-smart-bar',
-                    standalone: true,
-                    imports: [CommonModule, FormsModule, TranslateModule],
-                    template: `
+            args: [{ selector: 'ef-smart-bar', standalone: true, imports: [CommonModule, FormsModule, TranslateModule], template: `
         <div class="screen-search">
             <div class="smart-bar">
                 <label class="search">
@@ -10881,14 +10952,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                          only text inside this label is the shortcut hint, so
                          without it a screen reader announced the primary
                          search field of every list screen as "Cmd K". -->
+                    <!-- type="search" fires a native, bubbling 'search' Event
+                         on Enter and on the browser's clear button (Chromium,
+                         WebKit). A host (search) binding hears that DOM event
+                         as well as the output below, so it would receive the
+                         Event as the search text. Stopped here; the output is
+                         the only 'search' that leaves this component. -->
                     <input
                         #searchInput
                         type="search"
+                        enterkeyhint="search"
                         [attr.aria-label]="accessibleLabel()"
                         [placeholder]="(placeholderKey() ? (placeholderKey() | translate) : placeholder())"
                         [ngModel]="searchText()"
                         (ngModelChange)="searchText.set($event)"
                         (keydown.enter)="onSubmit()"
+                        (search)="$event.stopPropagation()"
                     />
                     @if (showKbdHint() && kbdLabel()) {
                         <!-- Decorative, and hidden from the accessibility tree:
@@ -10928,9 +11007,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 
             <ng-content select="[drawer]"></ng-content>
         </div>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
+    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabelKey", required: false }] }], clearTitleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTitleKey", required: false }] }], searchLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabelKey", required: false }] }], showKbdHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "showKbdHint", required: false }] }], hideClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClear", required: false }] }], hideSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSearch", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], search: [{ type: i0.Output, args: ["search"] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
 
 /**
@@ -12088,5 +12165,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { EF_BADGE_BG_COLORS, EF_BADGE_BG_LIGHT_COLORS, EF_BADGE_BORDER_COLORS, EF_BADGE_DEFAULTS, EF_BADGE_TEXT_COLORS, EF_CHART_PALETTE, EF_DATATABLE_ACTIONS_DEFAULTS, EF_DATATABLE_COLUMN_DEFAULTS, EF_DATATABLE_DEFAULTS, EF_DATA_CARD_MOBILE_LAYOUT, EF_STATUS_COLORS, EF_STATUS_COLOR_ALIASES, EfAboutDialogComponent, EfActivationFilterComponent, EfAppMainComponent, EfAppShellComponent, EfAppShellMobileComponent, EfAppTopComponent, EfBadgeComponent, EfBlockUiComponent, EfBlockableDivComponent, EfBottomSheetComponent, EfBuildStampComponent, EfBulkBarComponent, EfButtonComponent, EfButtonGroupComponent, EfCardComponent, EfChangeHistoryComponent, EfChangePasswordComponent, EfChartComponent, EfCheckboxComponent, EfClearButtonComponent, EfColumnHeaderTemplateDirective, EfColumnTemplateDirective, EfCompactPipe, EfConfirmDialogComponent, EfCurrencyPipe, EfDataCardComponent, EfDatatableActionBarComponent, EfDatatableComponent, EfDatepickerAdvancedComponent, EfDatepickerComponent, EfDetailToolbarComponent, EfDialogComponent, EfEmailMetricsCardComponent, EfEmptyStateComponent, EfFabComponent, EfFieldsetComponent, EfFilterDrawerComponent, EfFilterPillComponent, EfFormGridComponent, EfInputNumberComponent, EfInputTextComponent, EfKpiCardComponent, EfLabelComponent, EfModuleRailComponent, EfModuleSideComponent, EfMultiSelectComponent, EfOrderBuilderComponent, EfOrderSummaryComponent, EfOverflowTooltipDirective, EfPagerComponent, EfPasswordComponent, EfPdfPreviewComponent, EfPillGroupComponent, EfPresetPillComponent, EfPriceDisplayComponent, EfProductCatalogueComponent, EfProductCatalogueFilterComponent, EfProductTypeaheadComponent, EfProfileChipComponent, EfProfileMenuComponent, EfPulseComponent, EfQuantitySelectorComponent, EfQuantityStepperComponent, EfRadioComponent, EfRankListComponent, EfRowActionsComponent, EfSearchToolbarComponent, EfSelectButtonComponent, EfSelectComponent, EfServerErrorsDirective, EfShortcutsDialogComponent, EfSkeletonComponent, EfSmartBarComponent, EfStatsComponent, EfStatusChipComponent, EfTabPanelDirective, EfTabsComponent, EfTextareaComponent, EfThemeConfiguratorComponent, EfThemeToggleComponent, EfTimelineComponent, EfToastRegionComponent, EfToggleSwitchComponent, EfToolbarComponent, EfTooltipDirective, EfTotalsComponent, OrderEntityHelper, OrderLineItemHelper, TruncatePipe, buildChartConfig, getColumnAlignment, mergeColumnDefaults, resolveEfStatusColor };
+export { EF_BADGE_BG_COLORS, EF_BADGE_BG_LIGHT_COLORS, EF_BADGE_BORDER_COLORS, EF_BADGE_DEFAULTS, EF_BADGE_TEXT_COLORS, EF_CHART_PALETTE, EF_DATATABLE_ACTIONS_DEFAULTS, EF_DATATABLE_COLUMN_DEFAULTS, EF_DATATABLE_DEFAULTS, EF_DATA_CARD_MOBILE_LAYOUT, EF_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, EfFilterDrawerComponent, EfFilterPillComponent, EfFormGridComponent, EfInputNumberComponent, EfInputTextComponent, EfKpiCardComponent, EfLabelComponent, EfModuleRailComponent, EfModuleSideComponent, EfMultiSelectComponent, EfOrderBuilderComponent, EfOrderSummaryComponent, EfOverflowTooltipDirective, EfPagerComponent, EfPasswordComponent, EfPdfPreviewComponent, EfPillGroupComponent, EfPresetPillComponent, EfPriceDisplayComponent, EfProductCatalogueComponent, EfProductCatalogueFilterComponent, EfProductTypeaheadComponent, EfProfileChipComponent, EfProfileMenuComponent, EfPulseComponent, EfQuantitySelectorComponent, EfQuantityStepperComponent, EfRadioComponent, EfRankListComponent, EfReadOnlyDirective, EfRowActionsComponent, EfSearchToolbarComponent, EfSelectButtonComponent, EfSelectComponent, EfServerErrorsDirective, EfShortcutsDialogComponent, EfSkeletonComponent, EfSmartBarComponent, EfStatsComponent, EfStatusChipComponent, EfTabPanelDirective, EfTabsComponent, EfTextareaComponent, EfThemeConfiguratorComponent, EfThemeToggleComponent, EfTimelineComponent, EfToastRegionComponent, EfToggleSwitchComponent, EfToolbarComponent, EfTooltipDirective, EfTotalsComponent, OrderEntityHelper, OrderLineItemHelper, TruncatePipe, buildChartConfig, getColumnAlignment, mergeColumnDefaults, resolveEfStatusColor };
 //# sourceMappingURL=elasticias-ui.mjs.map