@elasticias/ui 1.0.38 → 1.0.40

package/fesm2022/elasticias-ui.mjs

@@ -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. */
@@ -4881,7 +4924,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 }),
             });
         }
@@ -7273,7 +7319,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 */ []));
@@ -7530,7 +7577,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 */ []));
@@ -7562,7 +7610,7 @@ class EfAppShellComponent {
         this.switcherOpen.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfAppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfAppShellComponent, isStandalone: true, selector: "ef-app-shell", inputs: { stripe: "stripe" }, host: { properties: { "attr.data-viewport": "viewport()" } }, ngImport: i0, template: "<!-- One layout, one declaration per slot.\n     Angular binds projected content to the LAST matching <ng-content> in a\n     template, so declaring the same selector once per viewport branch meant the\n     branch that was actually rendered on a phone received nothing \u2014 every\n     screen came up blank inside working chrome. The layouts differ by CSS and\n     by which chrome is rendered, never by where the content is declared. -->\n\n<ef-module-rail class=\"ef-app-shell__rail\">\n  <ng-content select=\"[logo]\" logo></ng-content>\n\n  <!-- Shows or hides the side panel. In the rail rather than the top bar\n       because the rail never folds: the button keeps one position whether\n       the panel is open or closed, so a second click needs no search.\n       Drawn inline because PrimeIcons has no panel glyph; the divider\n       marks the panel, so it is there while the panel is. -->\n  @if (showSide()) {\n    <button\n      rail-footer\n      type=\"button\"\n      class=\"ef-app-shell__side-toggle\"\n      aria-controls=\"ef-app-shell-side\"\n      [attr.aria-expanded]=\"!sideCollapsed()\"\n      [attr.aria-label]=\"(sideCollapsed() ? 'common_sidebar_show' : 'common_sidebar_hide') | translate\"\n      [pTooltip]=\"((sideCollapsed() ? 'common_sidebar_show' : 'common_sidebar_hide') | translate) + ' \u00B7 ' + shortcutHint\"\n      tooltipPosition=\"right\"\n      (click)=\"toggleSide()\"\n    >\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n           stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"3.5\" />\n        @if (!sideCollapsed()) {\n          <path d=\"M12 4v16\" />\n        }\n      </svg>\n    </button>\n  }\n</ef-module-rail>\n\n@if (showSide()) {\n  <!-- Folded by class rather than by @if: the side-footer slot (identity\n       menu) is projected into it, and the panel animates closed. `inert`\n       takes the hidden links out of the tab order and the a11y tree. -->\n  <ef-module-side\n    id=\"ef-app-shell-side\"\n    class=\"ef-app-shell__side\"\n    [class.is-collapsed]=\"sideCollapsed()\"\n    [attr.inert]=\"sideCollapsed() ? '' : null\"\n  >\n    <ng-content select=\"[side-header-meta]\" side-header-meta></ng-content>\n    <ng-content select=\"[side-footer]\" side-footer></ng-content>\n  </ef-module-side>\n}\n\n<div class=\"ef-app-shell__column\">\n  <ef-app-top>\n    <!-- The menu takes the breadcrumb's slot on a phone: the breadcrumb is\n         hidden there (ef-app-top), so this is the leading position, which is\n         where a menu button belongs and where a thumb reaches. -->\n    @if (isMobile()) {\n      <button\n        breadcrumb\n        type=\"button\"\n        class=\"ef-app-shell__menu\"\n        (click)=\"openSwitcher()\"\n        [attr.aria-label]=\"'common_modules' | translate\"\n      >\n        <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n      </button>\n    }\n    <ng-content select=\"[breadcrumb]\" breadcrumb></ng-content>\n    <ng-content select=\"[search]\" search></ng-content>\n    <ng-content select=\"[actions]\" actions></ng-content>\n  </ef-app-top>\n\n  <ef-app-main [stripe]=\"stripe\">\n    <ng-content></ng-content>\n  </ef-app-main>\n\n  @if (isMobile()) {\n    <nav class=\"ef-app-shell__tabs\" [attr.aria-label]=\"'common_modules' | translate\">\n      @for (module of tabs(); track module.id) {\n        <button\n          type=\"button\"\n          class=\"ef-app-shell__tab\"\n          [class.is-active]=\"activeId() === module.id\"\n          [attr.data-module]=\"module.id\"\n          [attr.aria-current]=\"activeId() === module.id ? 'page' : null\"\n          (click)=\"onSelect(module)\"\n        >\n          <i class=\"ef-app-shell__tab-icon\" [class]=\"module.icon\" aria-hidden=\"true\"></i>\n          <span class=\"ef-app-shell__tab-label\">{{ module.labelKey | translate }}</span>\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<ng-content select=\"[fab]\"></ng-content>\n\n@if (isMobile()) {\n  <ef-bottom-sheet [open]=\"switcherOpen()\" (openChange)=\"onSwitcherChange($event)\">\n    <!-- The screens first: the tab bar already switches modules, so this is\n         the only way to reach anything but a module's default screen. -->\n    @for (section of moduleSections(); track section.id) {\n      @if (section.labelKey) {\n        <h2 class=\"ef-app-shell__sheet-title\">{{ section.labelKey | translate }}</h2>\n      }\n      <ul class=\"ef-app-shell__sheet-list\">\n        @for (item of section.items; track item.id) {\n          <li>\n            <a\n              class=\"ef-app-shell__sheet-item\"\n              [routerLink]=\"item.route\"\n              routerLinkActive=\"is-active\"\n              (click)=\"onNavigate(item)\"\n            >\n              @if (item.icon) {\n                <i [class]=\"item.icon\" aria-hidden=\"true\"></i>\n              }\n              <span>{{ item.labelKey | translate }}</span>\n              @if (item.badge !== undefined && item.badge !== null) {\n                <span class=\"ef-app-shell__sheet-badge\">{{ item.badge }}</span>\n              }\n            </a>\n          </li>\n        }\n      </ul>\n    }\n\n    <h2 class=\"ef-app-shell__sheet-title\">{{ 'common_modules' | translate }}</h2>\n    <ul class=\"ef-app-shell__sheet-list\">\n      @for (module of allVisible(); track module.id) {\n        <li>\n          <button\n            type=\"button\"\n            class=\"ef-app-shell__sheet-item\"\n            [class.is-active]=\"activeId() === module.id\"\n            [attr.data-module]=\"module.id\"\n            (click)=\"onSelect(module)\"\n          >\n            <i [class]=\"module.icon\" aria-hidden=\"true\"></i>\n            <span>{{ module.labelKey | translate }}</span>\n          </button>\n        </li>\n      }\n    </ul>\n\n    <!-- App-level entries that live in the rail on a desktop and have nowhere\n         else to go on a phone: this sheet is the phone's menu. Declared only\n         in the mobile branch, so a desktop simply drops what is projected. -->\n    <div class=\"ef-app-shell__sheet-footer\">\n      <ng-content select=\"[sheet-footer]\" sheet-footer></ng-content>\n    </div>\n  </ef-bottom-sheet>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:row;width:100%;height:100vh;background:var(--paper);color:var(--text);overflow:hidden}.ef-app-shell__column{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.ef-app-shell__side{overflow:hidden;transition:flex-basis var(--t-fast) var(--ease-out),width var(--t-fast) var(--ease-out)}.ef-app-shell__side.is-collapsed{flex-basis:0;width:0;border-right-width:0}.ef-app-shell__side-toggle{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;padding:0;background:transparent;border:0;border-radius:var(--r-md);color:var(--rail-fg-mute);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}.ef-app-shell__side-toggle:hover{background:var(--rail-hover);color:#fff}.ef-app-shell__side-toggle:focus-visible{outline:2px solid color-mix(in srgb,var(--tenant-300, #b87a99) 80%,transparent);outline-offset:2px}@media(prefers-reduced-motion:reduce){.ef-app-shell__side{transition:none}}.ef-app-shell__menu{display:inline-flex;align-items:center;justify-content:center;width:var(--hit-touch);height:var(--hit-touch);background:transparent;border:0;border-radius:var(--r-md);color:var(--text);cursor:pointer;font-size:18px}.ef-app-shell__menu:hover{background:var(--paper-alt)}.ef-app-shell__tabs{flex:0 0 auto;display:flex;align-items:stretch;height:64px;padding-bottom:env(safe-area-inset-bottom);background:var(--paper);border-top:1px solid var(--rule)}.ef-app-shell__tab{position:relative;flex:1 1 0;min-width:0;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:transparent;border:0;color:var(--text-mute);cursor:pointer;padding:6px 4px;transition:color var(--t-fast) var(--ease-out)}.ef-app-shell__tab.is-active{color:var(--text)}.ef-app-shell__tab.is-active:after{content:\"\";position:absolute;top:0;left:50%;transform:translate(-50%);width:28px;height:3px;background:var(--module);border-radius:0 0 var(--r-sm) var(--r-sm)}.ef-app-shell__tab-icon{font-size:18px;line-height:1}.ef-app-shell__tab-label{font-family:var(--font-ui);font-size:10.5px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.ef-app-shell__sheet-title{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);margin:0 0 10px;padding-top:16px;border-top:1px solid var(--rule)}.ef-app-shell__sheet-title:first-child{padding-top:0;border-top:0}.ef-app-shell__sheet-list{list-style:none;margin:0 0 4px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.ef-app-shell__sheet-list+.ef-app-shell__sheet-title{margin-top:8px}.ef-app-shell__sheet-item{display:flex;align-items:center;gap:12px;width:100%;height:var(--hit-touch);padding:0 16px;background:var(--paper-alt);border:0;border-radius:var(--r-md);text-decoration:none;color:var(--text);cursor:pointer;font-family:var(--font-ui);font-size:14px;font-weight:500;text-align:left;transition:background-color var(--t-fast) var(--ease-out)}.ef-app-shell__sheet-item:hover{background:var(--rule)}.ef-app-shell__sheet-item.is-active{border-left:3px solid var(--module);padding-left:13px}@media(max-width:767px){.ef-app-shell__rail{display:none}}.ef-app-shell__sheet-badge{margin-inline-start:auto;font-size:11px;font-weight:700;color:var(--text-mute)}.ef-app-shell__sheet-item.is-active{background:var(--paper);color:var(--text);font-weight:700}.ef-app-shell__sheet-footer{display:grid;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--rule)}.ef-app-shell__sheet-footer:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: EfModuleRailComponent, selector: "ef-module-rail", inputs: ["badges"] }, { kind: "component", type: EfModuleSideComponent, selector: "ef-module-side" }, { kind: "component", type: EfAppTopComponent, selector: "ef-app-top", inputs: ["themeToggle", "logout"] }, { kind: "component", type: EfAppMainComponent, selector: "ef-app-main", inputs: ["stripe"] }, { kind: "component", type: EfBottomSheetComponent, selector: "ef-bottom-sheet", inputs: ["open", "dismissOnBackdrop"], outputs: ["openChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: EfAppShellComponent, isStandalone: true, selector: "ef-app-shell", inputs: { stripe: "stripe" }, host: { properties: { "attr.data-viewport": "viewport()" } }, ngImport: i0, template: "<!-- One layout, one declaration per slot.\n     Angular binds projected content to the LAST matching <ng-content> in a\n     template, so declaring the same selector once per viewport branch meant the\n     branch that was actually rendered on a phone received nothing \u2014 every\n     screen came up blank inside working chrome. The layouts differ by CSS and\n     by which chrome is rendered, never by where the content is declared. -->\n\n<ef-module-rail class=\"ef-app-shell__rail\">\n  <ng-content select=\"[logo]\" logo></ng-content>\n\n  <!-- Shows or hides the side panel. In the rail rather than the top bar\n       because the rail never folds: the button keeps one position whether\n       the panel is open or closed, so a second click needs no search.\n       Drawn inline because PrimeIcons has no panel glyph: the frame with\n       the panel's edge, and a chevron for what a click will do. -->\n  @if (showSide()) {\n    <button\n      rail-footer\n      type=\"button\"\n      class=\"ef-app-shell__side-toggle\"\n      aria-controls=\"ef-app-shell-side\"\n      [attr.aria-expanded]=\"!sideCollapsed()\"\n      [attr.aria-label]=\"(sideCollapsed() ? 'common_sidebar_show' : 'common_sidebar_hide') | translate\"\n      [pTooltip]=\"((sideCollapsed() ? 'common_sidebar_show' : 'common_sidebar_hide') | translate) + ' \u00B7 ' + shortcutHint\"\n      tooltipPosition=\"right\"\n      (click)=\"toggleSide()\"\n    >\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n           stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"3\" />\n        <path d=\"M9 4v16\" />\n        @if (sideCollapsed()) {\n          <path d=\"m13.5 9.5 2.5 2.5-2.5 2.5\" />\n        } @else {\n          <path d=\"m16 9.5-2.5 2.5 2.5 2.5\" />\n        }\n      </svg>\n    </button>\n  }\n</ef-module-rail>\n\n@if (showSide()) {\n  <!-- Folded by class rather than by @if: the side-footer slot (identity\n       menu) is projected into it, and the panel animates closed. `inert`\n       takes the hidden links out of the tab order and the a11y tree. -->\n  <ef-module-side\n    id=\"ef-app-shell-side\"\n    class=\"ef-app-shell__side\"\n    [class.is-collapsed]=\"sideCollapsed()\"\n    [attr.inert]=\"sideCollapsed() ? '' : null\"\n  >\n    <ng-content select=\"[side-header-meta]\" side-header-meta></ng-content>\n    <ng-content select=\"[side-footer]\" side-footer></ng-content>\n  </ef-module-side>\n}\n\n<div class=\"ef-app-shell__column\">\n  <ef-app-top>\n    <!-- The menu takes the breadcrumb's slot on a phone: the breadcrumb is\n         hidden there (ef-app-top), so this is the leading position, which is\n         where a menu button belongs and where a thumb reaches. -->\n    @if (isMobile()) {\n      <button\n        breadcrumb\n        type=\"button\"\n        class=\"ef-app-shell__menu\"\n        (click)=\"openSwitcher()\"\n        [attr.aria-label]=\"'common_modules' | translate\"\n      >\n        <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n      </button>\n    }\n    <ng-content select=\"[breadcrumb]\" breadcrumb></ng-content>\n    <ng-content select=\"[search]\" search></ng-content>\n    <ng-content select=\"[actions]\" actions></ng-content>\n  </ef-app-top>\n\n  <ef-app-main [stripe]=\"stripe\">\n    <ng-content></ng-content>\n  </ef-app-main>\n\n  @if (isMobile()) {\n    <nav class=\"ef-app-shell__tabs\" [attr.aria-label]=\"'common_modules' | translate\">\n      @for (module of tabs(); track module.id) {\n        <button\n          type=\"button\"\n          class=\"ef-app-shell__tab\"\n          [class.is-active]=\"activeId() === module.id\"\n          [attr.data-module]=\"module.id\"\n          [attr.aria-current]=\"activeId() === module.id ? 'page' : null\"\n          (click)=\"onSelect(module)\"\n        >\n          <i class=\"ef-app-shell__tab-icon\" [class]=\"module.icon\" aria-hidden=\"true\"></i>\n          <span class=\"ef-app-shell__tab-label\">{{ module.labelKey | translate }}</span>\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<ng-content select=\"[fab]\"></ng-content>\n\n@if (isMobile()) {\n  <ef-bottom-sheet [open]=\"switcherOpen()\" (openChange)=\"onSwitcherChange($event)\">\n    <!-- The screens first: the tab bar already switches modules, so this is\n         the only way to reach anything but a module's default screen. -->\n    @for (section of moduleSections(); track section.id) {\n      @if (section.labelKey) {\n        <h2 class=\"ef-app-shell__sheet-title\">{{ section.labelKey | translate }}</h2>\n      }\n      <ul class=\"ef-app-shell__sheet-list\">\n        @for (item of section.items; track item.id) {\n          <li>\n            <a\n              class=\"ef-app-shell__sheet-item\"\n              [routerLink]=\"item.route\"\n              routerLinkActive=\"is-active\"\n              (click)=\"onNavigate(item)\"\n            >\n              @if (item.icon) {\n                <i [class]=\"item.icon\" aria-hidden=\"true\"></i>\n              }\n              <span>{{ item.labelKey | translate }}</span>\n              @if (item.badge !== undefined && item.badge !== null) {\n                <span class=\"ef-app-shell__sheet-badge\">{{ item.badge }}</span>\n              }\n            </a>\n          </li>\n        }\n      </ul>\n    }\n\n    <h2 class=\"ef-app-shell__sheet-title\">{{ 'common_modules' | translate }}</h2>\n    <ul class=\"ef-app-shell__sheet-list\">\n      @for (module of allVisible(); track module.id) {\n        <li>\n          <button\n            type=\"button\"\n            class=\"ef-app-shell__sheet-item\"\n            [class.is-active]=\"activeId() === module.id\"\n            [attr.data-module]=\"module.id\"\n            (click)=\"onSelect(module)\"\n          >\n            <i [class]=\"module.icon\" aria-hidden=\"true\"></i>\n            <span>{{ module.labelKey | translate }}</span>\n          </button>\n        </li>\n      }\n    </ul>\n\n    <!-- App-level entries that live in the rail on a desktop and have nowhere\n         else to go on a phone: this sheet is the phone's menu. Declared only\n         in the mobile branch, so a desktop simply drops what is projected. -->\n    <div class=\"ef-app-shell__sheet-footer\">\n      <ng-content select=\"[sheet-footer]\" sheet-footer></ng-content>\n    </div>\n  </ef-bottom-sheet>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:row;width:100%;height:100vh;background:var(--paper);color:var(--text);overflow:hidden}.ef-app-shell__column{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.ef-app-shell__side{overflow:hidden;transition:flex-basis var(--t-fast) var(--ease-out),width var(--t-fast) var(--ease-out)}.ef-app-shell__side.is-collapsed{flex-basis:0;width:0;border-right-width:0}.ef-app-shell__side-toggle{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;padding:0;background:transparent;border:0;border-radius:var(--r-md);color:var(--rail-fg-mute);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}.ef-app-shell__side-toggle:hover{background:var(--rail-hover);color:#fff}.ef-app-shell__side-toggle:focus-visible{outline:2px solid color-mix(in srgb,var(--tenant-300, #b87a99) 80%,transparent);outline-offset:2px}@media(prefers-reduced-motion:reduce){.ef-app-shell__side{transition:none}}.ef-app-shell__menu{display:inline-flex;align-items:center;justify-content:center;width:var(--hit-touch);height:var(--hit-touch);background:transparent;border:0;border-radius:var(--r-md);color:var(--text);cursor:pointer;font-size:18px}.ef-app-shell__menu:hover{background:var(--paper-alt)}.ef-app-shell__tabs{flex:0 0 auto;display:flex;align-items:stretch;height:64px;padding-bottom:env(safe-area-inset-bottom);background:var(--paper);border-top:1px solid var(--rule)}.ef-app-shell__tab{position:relative;flex:1 1 0;min-width:0;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:transparent;border:0;color:var(--text-mute);cursor:pointer;padding:6px 4px;transition:color var(--t-fast) var(--ease-out)}.ef-app-shell__tab.is-active{color:var(--text)}.ef-app-shell__tab.is-active:after{content:\"\";position:absolute;top:0;left:50%;transform:translate(-50%);width:28px;height:3px;background:var(--module);border-radius:0 0 var(--r-sm) var(--r-sm)}.ef-app-shell__tab-icon{font-size:18px;line-height:1}.ef-app-shell__tab-label{font-family:var(--font-ui);font-size:10.5px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.ef-app-shell__sheet-title{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);margin:0 0 10px;padding-top:16px;border-top:1px solid var(--rule)}.ef-app-shell__sheet-title:first-child{padding-top:0;border-top:0}.ef-app-shell__sheet-list{list-style:none;margin:0 0 4px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.ef-app-shell__sheet-list+.ef-app-shell__sheet-title{margin-top:8px}.ef-app-shell__sheet-item{display:flex;align-items:center;gap:12px;width:100%;height:var(--hit-touch);padding:0 16px;background:var(--paper-alt);border:0;border-radius:var(--r-md);text-decoration:none;color:var(--text);cursor:pointer;font-family:var(--font-ui);font-size:14px;font-weight:500;text-align:left;transition:background-color var(--t-fast) var(--ease-out)}.ef-app-shell__sheet-item:hover{background:var(--rule)}.ef-app-shell__sheet-item.is-active{border-left:3px solid var(--module);padding-left:13px}@media(max-width:767px){.ef-app-shell__rail{display:none}}.ef-app-shell__sheet-badge{margin-inline-start:auto;font-size:11px;font-weight:700;color:var(--text-mute)}.ef-app-shell__sheet-item.is-active{background:var(--paper);color:var(--text);font-weight:700}.ef-app-shell__sheet-footer{display:grid;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--rule)}.ef-app-shell__sheet-footer:empty{display:none}:host-context([dir=rtl]) .ef-app-shell__side-toggle svg{transform:scaleX(-1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: EfModuleRailComponent, selector: "ef-module-rail", inputs: ["badges"] }, { kind: "component", type: EfModuleSideComponent, selector: "ef-module-side" }, { kind: "component", type: EfAppTopComponent, selector: "ef-app-top", inputs: ["themeToggle", "logout"] }, { kind: "component", type: EfAppMainComponent, selector: "ef-app-main", inputs: ["stripe"] }, { kind: "component", type: EfBottomSheetComponent, selector: "ef-bottom-sheet", inputs: ["open", "dismissOnBackdrop"], outputs: ["openChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: EfAppShellComponent, decorators: [{
             type: Component,
@@ -7578,7 +7626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         RouterLink,
                     ], host: {
                         '[attr.data-viewport]': 'viewport()',
-                    }, template: "<!-- One layout, one declaration per slot.\n     Angular binds projected content to the LAST matching <ng-content> in a\n     template, so declaring the same selector once per viewport branch meant the\n     branch that was actually rendered on a phone received nothing \u2014 every\n     screen came up blank inside working chrome. The layouts differ by CSS and\n     by which chrome is rendered, never by where the content is declared. -->\n\n<ef-module-rail class=\"ef-app-shell__rail\">\n  <ng-content select=\"[logo]\" logo></ng-content>\n\n  <!-- Shows or hides the side panel. In the rail rather than the top bar\n       because the rail never folds: the button keeps one position whether\n       the panel is open or closed, so a second click needs no search.\n       Drawn inline because PrimeIcons has no panel glyph; the divider\n       marks the panel, so it is there while the panel is. -->\n  @if (showSide()) {\n    <button\n      rail-footer\n      type=\"button\"\n      class=\"ef-app-shell__side-toggle\"\n      aria-controls=\"ef-app-shell-side\"\n      [attr.aria-expanded]=\"!sideCollapsed()\"\n      [attr.aria-label]=\"(sideCollapsed() ? 'common_sidebar_show' : 'common_sidebar_hide') | translate\"\n      [pTooltip]=\"((sideCollapsed() ? 'common_sidebar_show' : 'common_sidebar_hide') | translate) + ' \u00B7 ' + shortcutHint\"\n      tooltipPosition=\"right\"\n      (click)=\"toggleSide()\"\n    >\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n           stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"3.5\" />\n        @if (!sideCollapsed()) {\n          <path d=\"M12 4v16\" />\n        }\n      </svg>\n    </button>\n  }\n</ef-module-rail>\n\n@if (showSide()) {\n  <!-- Folded by class rather than by @if: the side-footer slot (identity\n       menu) is projected into it, and the panel animates closed. `inert`\n       takes the hidden links out of the tab order and the a11y tree. -->\n  <ef-module-side\n    id=\"ef-app-shell-side\"\n    class=\"ef-app-shell__side\"\n    [class.is-collapsed]=\"sideCollapsed()\"\n    [attr.inert]=\"sideCollapsed() ? '' : null\"\n  >\n    <ng-content select=\"[side-header-meta]\" side-header-meta></ng-content>\n    <ng-content select=\"[side-footer]\" side-footer></ng-content>\n  </ef-module-side>\n}\n\n<div class=\"ef-app-shell__column\">\n  <ef-app-top>\n    <!-- The menu takes the breadcrumb's slot on a phone: the breadcrumb is\n         hidden there (ef-app-top), so this is the leading position, which is\n         where a menu button belongs and where a thumb reaches. -->\n    @if (isMobile()) {\n      <button\n        breadcrumb\n        type=\"button\"\n        class=\"ef-app-shell__menu\"\n        (click)=\"openSwitcher()\"\n        [attr.aria-label]=\"'common_modules' | translate\"\n      >\n        <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n      </button>\n    }\n    <ng-content select=\"[breadcrumb]\" breadcrumb></ng-content>\n    <ng-content select=\"[search]\" search></ng-content>\n    <ng-content select=\"[actions]\" actions></ng-content>\n  </ef-app-top>\n\n  <ef-app-main [stripe]=\"stripe\">\n    <ng-content></ng-content>\n  </ef-app-main>\n\n  @if (isMobile()) {\n    <nav class=\"ef-app-shell__tabs\" [attr.aria-label]=\"'common_modules' | translate\">\n      @for (module of tabs(); track module.id) {\n        <button\n          type=\"button\"\n          class=\"ef-app-shell__tab\"\n          [class.is-active]=\"activeId() === module.id\"\n          [attr.data-module]=\"module.id\"\n          [attr.aria-current]=\"activeId() === module.id ? 'page' : null\"\n          (click)=\"onSelect(module)\"\n        >\n          <i class=\"ef-app-shell__tab-icon\" [class]=\"module.icon\" aria-hidden=\"true\"></i>\n          <span class=\"ef-app-shell__tab-label\">{{ module.labelKey | translate }}</span>\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<ng-content select=\"[fab]\"></ng-content>\n\n@if (isMobile()) {\n  <ef-bottom-sheet [open]=\"switcherOpen()\" (openChange)=\"onSwitcherChange($event)\">\n    <!-- The screens first: the tab bar already switches modules, so this is\n         the only way to reach anything but a module's default screen. -->\n    @for (section of moduleSections(); track section.id) {\n      @if (section.labelKey) {\n        <h2 class=\"ef-app-shell__sheet-title\">{{ section.labelKey | translate }}</h2>\n      }\n      <ul class=\"ef-app-shell__sheet-list\">\n        @for (item of section.items; track item.id) {\n          <li>\n            <a\n              class=\"ef-app-shell__sheet-item\"\n              [routerLink]=\"item.route\"\n              routerLinkActive=\"is-active\"\n              (click)=\"onNavigate(item)\"\n            >\n              @if (item.icon) {\n                <i [class]=\"item.icon\" aria-hidden=\"true\"></i>\n              }\n              <span>{{ item.labelKey | translate }}</span>\n              @if (item.badge !== undefined && item.badge !== null) {\n                <span class=\"ef-app-shell__sheet-badge\">{{ item.badge }}</span>\n              }\n            </a>\n          </li>\n        }\n      </ul>\n    }\n\n    <h2 class=\"ef-app-shell__sheet-title\">{{ 'common_modules' | translate }}</h2>\n    <ul class=\"ef-app-shell__sheet-list\">\n      @for (module of allVisible(); track module.id) {\n        <li>\n          <button\n            type=\"button\"\n            class=\"ef-app-shell__sheet-item\"\n            [class.is-active]=\"activeId() === module.id\"\n            [attr.data-module]=\"module.id\"\n            (click)=\"onSelect(module)\"\n          >\n            <i [class]=\"module.icon\" aria-hidden=\"true\"></i>\n            <span>{{ module.labelKey | translate }}</span>\n          </button>\n        </li>\n      }\n    </ul>\n\n    <!-- App-level entries that live in the rail on a desktop and have nowhere\n         else to go on a phone: this sheet is the phone's menu. Declared only\n         in the mobile branch, so a desktop simply drops what is projected. -->\n    <div class=\"ef-app-shell__sheet-footer\">\n      <ng-content select=\"[sheet-footer]\" sheet-footer></ng-content>\n    </div>\n  </ef-bottom-sheet>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:row;width:100%;height:100vh;background:var(--paper);color:var(--text);overflow:hidden}.ef-app-shell__column{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.ef-app-shell__side{overflow:hidden;transition:flex-basis var(--t-fast) var(--ease-out),width var(--t-fast) var(--ease-out)}.ef-app-shell__side.is-collapsed{flex-basis:0;width:0;border-right-width:0}.ef-app-shell__side-toggle{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;padding:0;background:transparent;border:0;border-radius:var(--r-md);color:var(--rail-fg-mute);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}.ef-app-shell__side-toggle:hover{background:var(--rail-hover);color:#fff}.ef-app-shell__side-toggle:focus-visible{outline:2px solid color-mix(in srgb,var(--tenant-300, #b87a99) 80%,transparent);outline-offset:2px}@media(prefers-reduced-motion:reduce){.ef-app-shell__side{transition:none}}.ef-app-shell__menu{display:inline-flex;align-items:center;justify-content:center;width:var(--hit-touch);height:var(--hit-touch);background:transparent;border:0;border-radius:var(--r-md);color:var(--text);cursor:pointer;font-size:18px}.ef-app-shell__menu:hover{background:var(--paper-alt)}.ef-app-shell__tabs{flex:0 0 auto;display:flex;align-items:stretch;height:64px;padding-bottom:env(safe-area-inset-bottom);background:var(--paper);border-top:1px solid var(--rule)}.ef-app-shell__tab{position:relative;flex:1 1 0;min-width:0;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:transparent;border:0;color:var(--text-mute);cursor:pointer;padding:6px 4px;transition:color var(--t-fast) var(--ease-out)}.ef-app-shell__tab.is-active{color:var(--text)}.ef-app-shell__tab.is-active:after{content:\"\";position:absolute;top:0;left:50%;transform:translate(-50%);width:28px;height:3px;background:var(--module);border-radius:0 0 var(--r-sm) var(--r-sm)}.ef-app-shell__tab-icon{font-size:18px;line-height:1}.ef-app-shell__tab-label{font-family:var(--font-ui);font-size:10.5px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.ef-app-shell__sheet-title{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);margin:0 0 10px;padding-top:16px;border-top:1px solid var(--rule)}.ef-app-shell__sheet-title:first-child{padding-top:0;border-top:0}.ef-app-shell__sheet-list{list-style:none;margin:0 0 4px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.ef-app-shell__sheet-list+.ef-app-shell__sheet-title{margin-top:8px}.ef-app-shell__sheet-item{display:flex;align-items:center;gap:12px;width:100%;height:var(--hit-touch);padding:0 16px;background:var(--paper-alt);border:0;border-radius:var(--r-md);text-decoration:none;color:var(--text);cursor:pointer;font-family:var(--font-ui);font-size:14px;font-weight:500;text-align:left;transition:background-color var(--t-fast) var(--ease-out)}.ef-app-shell__sheet-item:hover{background:var(--rule)}.ef-app-shell__sheet-item.is-active{border-left:3px solid var(--module);padding-left:13px}@media(max-width:767px){.ef-app-shell__rail{display:none}}.ef-app-shell__sheet-badge{margin-inline-start:auto;font-size:11px;font-weight:700;color:var(--text-mute)}.ef-app-shell__sheet-item.is-active{background:var(--paper);color:var(--text);font-weight:700}.ef-app-shell__sheet-footer{display:grid;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--rule)}.ef-app-shell__sheet-footer:empty{display:none}\n"] }]
+                    }, template: "<!-- One layout, one declaration per slot.\n     Angular binds projected content to the LAST matching <ng-content> in a\n     template, so declaring the same selector once per viewport branch meant the\n     branch that was actually rendered on a phone received nothing \u2014 every\n     screen came up blank inside working chrome. The layouts differ by CSS and\n     by which chrome is rendered, never by where the content is declared. -->\n\n<ef-module-rail class=\"ef-app-shell__rail\">\n  <ng-content select=\"[logo]\" logo></ng-content>\n\n  <!-- Shows or hides the side panel. In the rail rather than the top bar\n       because the rail never folds: the button keeps one position whether\n       the panel is open or closed, so a second click needs no search.\n       Drawn inline because PrimeIcons has no panel glyph: the frame with\n       the panel's edge, and a chevron for what a click will do. -->\n  @if (showSide()) {\n    <button\n      rail-footer\n      type=\"button\"\n      class=\"ef-app-shell__side-toggle\"\n      aria-controls=\"ef-app-shell-side\"\n      [attr.aria-expanded]=\"!sideCollapsed()\"\n      [attr.aria-label]=\"(sideCollapsed() ? 'common_sidebar_show' : 'common_sidebar_hide') | translate\"\n      [pTooltip]=\"((sideCollapsed() ? 'common_sidebar_show' : 'common_sidebar_hide') | translate) + ' \u00B7 ' + shortcutHint\"\n      tooltipPosition=\"right\"\n      (click)=\"toggleSide()\"\n    >\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n           stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"3\" />\n        <path d=\"M9 4v16\" />\n        @if (sideCollapsed()) {\n          <path d=\"m13.5 9.5 2.5 2.5-2.5 2.5\" />\n        } @else {\n          <path d=\"m16 9.5-2.5 2.5 2.5 2.5\" />\n        }\n      </svg>\n    </button>\n  }\n</ef-module-rail>\n\n@if (showSide()) {\n  <!-- Folded by class rather than by @if: the side-footer slot (identity\n       menu) is projected into it, and the panel animates closed. `inert`\n       takes the hidden links out of the tab order and the a11y tree. -->\n  <ef-module-side\n    id=\"ef-app-shell-side\"\n    class=\"ef-app-shell__side\"\n    [class.is-collapsed]=\"sideCollapsed()\"\n    [attr.inert]=\"sideCollapsed() ? '' : null\"\n  >\n    <ng-content select=\"[side-header-meta]\" side-header-meta></ng-content>\n    <ng-content select=\"[side-footer]\" side-footer></ng-content>\n  </ef-module-side>\n}\n\n<div class=\"ef-app-shell__column\">\n  <ef-app-top>\n    <!-- The menu takes the breadcrumb's slot on a phone: the breadcrumb is\n         hidden there (ef-app-top), so this is the leading position, which is\n         where a menu button belongs and where a thumb reaches. -->\n    @if (isMobile()) {\n      <button\n        breadcrumb\n        type=\"button\"\n        class=\"ef-app-shell__menu\"\n        (click)=\"openSwitcher()\"\n        [attr.aria-label]=\"'common_modules' | translate\"\n      >\n        <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n      </button>\n    }\n    <ng-content select=\"[breadcrumb]\" breadcrumb></ng-content>\n    <ng-content select=\"[search]\" search></ng-content>\n    <ng-content select=\"[actions]\" actions></ng-content>\n  </ef-app-top>\n\n  <ef-app-main [stripe]=\"stripe\">\n    <ng-content></ng-content>\n  </ef-app-main>\n\n  @if (isMobile()) {\n    <nav class=\"ef-app-shell__tabs\" [attr.aria-label]=\"'common_modules' | translate\">\n      @for (module of tabs(); track module.id) {\n        <button\n          type=\"button\"\n          class=\"ef-app-shell__tab\"\n          [class.is-active]=\"activeId() === module.id\"\n          [attr.data-module]=\"module.id\"\n          [attr.aria-current]=\"activeId() === module.id ? 'page' : null\"\n          (click)=\"onSelect(module)\"\n        >\n          <i class=\"ef-app-shell__tab-icon\" [class]=\"module.icon\" aria-hidden=\"true\"></i>\n          <span class=\"ef-app-shell__tab-label\">{{ module.labelKey | translate }}</span>\n        </button>\n      }\n    </nav>\n  }\n</div>\n\n<ng-content select=\"[fab]\"></ng-content>\n\n@if (isMobile()) {\n  <ef-bottom-sheet [open]=\"switcherOpen()\" (openChange)=\"onSwitcherChange($event)\">\n    <!-- The screens first: the tab bar already switches modules, so this is\n         the only way to reach anything but a module's default screen. -->\n    @for (section of moduleSections(); track section.id) {\n      @if (section.labelKey) {\n        <h2 class=\"ef-app-shell__sheet-title\">{{ section.labelKey | translate }}</h2>\n      }\n      <ul class=\"ef-app-shell__sheet-list\">\n        @for (item of section.items; track item.id) {\n          <li>\n            <a\n              class=\"ef-app-shell__sheet-item\"\n              [routerLink]=\"item.route\"\n              routerLinkActive=\"is-active\"\n              (click)=\"onNavigate(item)\"\n            >\n              @if (item.icon) {\n                <i [class]=\"item.icon\" aria-hidden=\"true\"></i>\n              }\n              <span>{{ item.labelKey | translate }}</span>\n              @if (item.badge !== undefined && item.badge !== null) {\n                <span class=\"ef-app-shell__sheet-badge\">{{ item.badge }}</span>\n              }\n            </a>\n          </li>\n        }\n      </ul>\n    }\n\n    <h2 class=\"ef-app-shell__sheet-title\">{{ 'common_modules' | translate }}</h2>\n    <ul class=\"ef-app-shell__sheet-list\">\n      @for (module of allVisible(); track module.id) {\n        <li>\n          <button\n            type=\"button\"\n            class=\"ef-app-shell__sheet-item\"\n            [class.is-active]=\"activeId() === module.id\"\n            [attr.data-module]=\"module.id\"\n            (click)=\"onSelect(module)\"\n          >\n            <i [class]=\"module.icon\" aria-hidden=\"true\"></i>\n            <span>{{ module.labelKey | translate }}</span>\n          </button>\n        </li>\n      }\n    </ul>\n\n    <!-- App-level entries that live in the rail on a desktop and have nowhere\n         else to go on a phone: this sheet is the phone's menu. Declared only\n         in the mobile branch, so a desktop simply drops what is projected. -->\n    <div class=\"ef-app-shell__sheet-footer\">\n      <ng-content select=\"[sheet-footer]\" sheet-footer></ng-content>\n    </div>\n  </ef-bottom-sheet>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:row;width:100%;height:100vh;background:var(--paper);color:var(--text);overflow:hidden}.ef-app-shell__column{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.ef-app-shell__side{overflow:hidden;transition:flex-basis var(--t-fast) var(--ease-out),width var(--t-fast) var(--ease-out)}.ef-app-shell__side.is-collapsed{flex-basis:0;width:0;border-right-width:0}.ef-app-shell__side-toggle{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;padding:0;background:transparent;border:0;border-radius:var(--r-md);color:var(--rail-fg-mute);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}.ef-app-shell__side-toggle:hover{background:var(--rail-hover);color:#fff}.ef-app-shell__side-toggle:focus-visible{outline:2px solid color-mix(in srgb,var(--tenant-300, #b87a99) 80%,transparent);outline-offset:2px}@media(prefers-reduced-motion:reduce){.ef-app-shell__side{transition:none}}.ef-app-shell__menu{display:inline-flex;align-items:center;justify-content:center;width:var(--hit-touch);height:var(--hit-touch);background:transparent;border:0;border-radius:var(--r-md);color:var(--text);cursor:pointer;font-size:18px}.ef-app-shell__menu:hover{background:var(--paper-alt)}.ef-app-shell__tabs{flex:0 0 auto;display:flex;align-items:stretch;height:64px;padding-bottom:env(safe-area-inset-bottom);background:var(--paper);border-top:1px solid var(--rule)}.ef-app-shell__tab{position:relative;flex:1 1 0;min-width:0;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:transparent;border:0;color:var(--text-mute);cursor:pointer;padding:6px 4px;transition:color var(--t-fast) var(--ease-out)}.ef-app-shell__tab.is-active{color:var(--text)}.ef-app-shell__tab.is-active:after{content:\"\";position:absolute;top:0;left:50%;transform:translate(-50%);width:28px;height:3px;background:var(--module);border-radius:0 0 var(--r-sm) var(--r-sm)}.ef-app-shell__tab-icon{font-size:18px;line-height:1}.ef-app-shell__tab-label{font-family:var(--font-ui);font-size:10.5px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.ef-app-shell__sheet-title{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);margin:0 0 10px;padding-top:16px;border-top:1px solid var(--rule)}.ef-app-shell__sheet-title:first-child{padding-top:0;border-top:0}.ef-app-shell__sheet-list{list-style:none;margin:0 0 4px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.ef-app-shell__sheet-list+.ef-app-shell__sheet-title{margin-top:8px}.ef-app-shell__sheet-item{display:flex;align-items:center;gap:12px;width:100%;height:var(--hit-touch);padding:0 16px;background:var(--paper-alt);border:0;border-radius:var(--r-md);text-decoration:none;color:var(--text);cursor:pointer;font-family:var(--font-ui);font-size:14px;font-weight:500;text-align:left;transition:background-color var(--t-fast) var(--ease-out)}.ef-app-shell__sheet-item:hover{background:var(--rule)}.ef-app-shell__sheet-item.is-active{border-left:3px solid var(--module);padding-left:13px}@media(max-width:767px){.ef-app-shell__rail{display:none}}.ef-app-shell__sheet-badge{margin-inline-start:auto;font-size:11px;font-weight:700;color:var(--text-mute)}.ef-app-shell__sheet-item.is-active{background:var(--paper);color:var(--text);font-weight:700}.ef-app-shell__sheet-footer{display:grid;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--rule)}.ef-app-shell__sheet-footer:empty{display:none}:host-context([dir=rtl]) .ef-app-shell__side-toggle svg{transform:scaleX(-1)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { stripe: [{
                 type: Input
             }] } });
@@ -8601,6 +8649,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 +8693,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 +8719,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 +8740,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 +9605,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 +9772,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 +9837,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: [{
@@ -12088,5 +12158,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