@elasticias/ui 1.0.35 → 1.0.37

package/fesm2022/elasticias-ui.mjs

@@ -66,6 +66,8 @@ import * as i1$f from 'primeng/selectbutton';
 import { SelectButtonModule, SelectButton } from 'primeng/selectbutton';
 import * as i2$5 from 'primeng/table';
 import { TableModule } from 'primeng/table';
+import * as i1$g from 'primeng/radiobutton';
+import { RadioButtonModule } from 'primeng/radiobutton';
 import { updatePreset, updateSurfacePalette, $t } from '@primeng/themes';
 import Aura from '@primeng/themes/aura';
 import Lara from '@primeng/themes/lara';
@@ -7423,6 +7425,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 args: ['document:keydown.escape']
             }] } });
 
+const SIDE_COLLAPSED_KEY = 'ef.shell.side-collapsed';
+function readSideCollapsed() {
+    try {
+        return localStorage.getItem(SIDE_COLLAPSED_KEY) === '1';
+    }
+    catch {
+        return false;
+    }
+}
 /**
  * Top-level Comptoir shell.
  *
@@ -7440,7 +7451,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * - `EfPermissionService` (via the rail / mobile tabs) for visible modules
  * - `EfActiveModuleService` for the active module accent
  *
- * **Desktop / tablet:** rail (64px) + side (240px) + (top + main).
+ * **Desktop / tablet:** rail (64px) + side (240px) + (top + main). The
+ * side folds away from a toggle at the leading edge of the top bar (or
+ * mod+B); the rail never does.
  * **Mobile:** delegates to `<ef-app-shell-mobile>` — top bar + scrollable
  * body + 5-tab bottom bar + FAB slot.
  *
@@ -7461,6 +7474,36 @@ class EfAppShellComponent {
     viewport = this.vp.current;
     isMobile = this.vp.isMobile;
     showSide = computed(() => !this.vp.isMobile(), ...(ngDevMode ? [{ debugName: "showSide" }] : /* istanbul ignore next */ []));
+    /* ── Side panel toggle ───────────────────────────────────────
+         The rail stays; only the 240px module side folds away, for
+         the screens that want the width (a wide grid, the order
+         builder). The toggle sits at the leading edge of the top bar
+         rather than inside the side, so it is still there to bring
+         the side back once it is gone. Remembered per browser: it is
+         a reading preference, not something worth a round trip. */
+    sideCollapsed = signal(readSideCollapsed(), ...(ngDevMode ? [{ debugName: "sideCollapsed" }] : /* istanbul ignore next */ []));
+    toggleSide() {
+        const collapsed = !this.sideCollapsed();
+        this.sideCollapsed.set(collapsed);
+        try {
+            localStorage.setItem(SIDE_COLLAPSED_KEY, collapsed ? '1' : '0');
+        }
+        catch {
+            /* private window or blocked storage: the toggle still works for this visit */
+        }
+    }
+    constructor() {
+        inject(EfShortcutService).register({
+            id: 'shell.toggle-side',
+            keys: 'mod+b',
+            labelKey: 'common_sidebar_toggle',
+            group: 'shortcut_group_general',
+            handler: () => {
+                if (!this.isMobile())
+                    this.toggleSide();
+            },
+        });
+    }
     /* ── Mobile chrome ───────────────────────────────────────────
          Tabs and the module sheet live here rather than in a child
          component: content has to be declared once, in one template,
@@ -7517,7 +7560,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</ef-module-rail>\n\n@if (showSide()) {\n  <ef-module-side class=\"ef-app-shell__side\">\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__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: 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</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    } @else if (showSide()) {\n      <!-- Same leading position, desktop job: show or hide the side panel.\n           Drawn inline because PrimeIcons has no panel glyph. -->\n      <button\n        breadcrumb\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        [attr.title]=\"(sideCollapsed() ? 'common_sidebar_show' : 'common_sidebar_hide') | translate\"\n        (click)=\"toggleSide()\"\n      >\n        <svg width=\"18\" height=\"18\" 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          <path d=\"M9.5 4v16\" />\n        </svg>\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:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;margin-inline-start:-6px;background:transparent;border:0;border-radius:var(--r-md);color:var(--text-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(--rule);color:var(--text)}.ef-app-shell__side-toggle:focus-visible{outline:2px solid var(--module, var(--text));outline-offset:1px}@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: 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,
@@ -7532,8 +7575,8 @@ 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</ef-module-rail>\n\n@if (showSide()) {\n  <ef-module-side class=\"ef-app-shell__side\">\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__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"] }]
-        }], propDecorators: { stripe: [{
+                    }, 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</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    } @else if (showSide()) {\n      <!-- Same leading position, desktop job: show or hide the side panel.\n           Drawn inline because PrimeIcons has no panel glyph. -->\n      <button\n        breadcrumb\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        [attr.title]=\"(sideCollapsed() ? 'common_sidebar_show' : 'common_sidebar_hide') | translate\"\n        (click)=\"toggleSide()\"\n      >\n        <svg width=\"18\" height=\"18\" 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          <path d=\"M9.5 4v16\" />\n        </svg>\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:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;margin-inline-start:-6px;background:transparent;border:0;border-radius:var(--r-md);color:var(--text-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(--rule);color:var(--text)}.ef-app-shell__side-toggle:focus-visible{outline:2px solid var(--module, var(--text));outline-offset:1px}@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
             }] } });
 
@@ -7978,6 +8021,8 @@ class EfProfileChipComponent {
     tone = 'tenant';
     /** Render as a non-interactive container (no hover/focus, no click). */
     readonly = false;
+    /** Avatar only, no name or role: for a trigger that sits in a toolbar. */
+    compact = false;
     clickEvent = new EventEmitter();
     get computedInitial() {
         /* An explicit `initial` is taken verbatim — callers pass real initials
@@ -7996,11 +8041,11 @@ class EfProfileChipComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfProfileChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfProfileChipComponent, isStandalone: true, selector: "ef-profile-chip", inputs: { name: "name", role: "role", roleKey: "roleKey", initial: "initial", tone: "tone", readonly: ["readonly", "readonly", booleanAttribute] }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"ef-profile-chip\"\n  [class.is-tenant]=\"tone === 'tenant'\"\n  [class.is-readonly]=\"readonly\"\n  [attr.aria-label]=\"name || null\"\n  [attr.tabindex]=\"readonly ? -1 : null\"\n  (click)=\"handleClick($event)\"\n>\n  <span class=\"ef-profile-chip__avatar\" aria-hidden=\"true\">{{ computedInitial }}</span>\n  <span class=\"ef-profile-chip__text\">\n    @if (name) {\n      <span class=\"ef-profile-chip__name\">{{ name }}</span>\n    }\n    @if (roleKey || role) {\n      <span class=\"ef-profile-chip__role\">\n        @if (roleKey) {\n          {{ roleKey | translate }}\n        } @else {\n          {{ role }}\n        }\n      </span>\n    }\n  </span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:block}.ef-profile-chip{display:inline-flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:transparent;border:0;border-radius:var(--r-md, 8px);color:var(--text);cursor:pointer;text-align:start;font-family:inherit;transition:background var(--t-fast, .14s) var(--ease-out, ease-out)}.ef-profile-chip:hover:not(.is-readonly){background:color-mix(in srgb,var(--ink-active, #0f1115) 6%,transparent)}.ef-profile-chip:focus-visible{outline:2px solid color-mix(in srgb,var(--tenant-400, #6b7280) 60%,transparent);outline-offset:1px}.ef-profile-chip.is-readonly{cursor:default}.ef-profile-chip__avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;border-radius:var(--r-pill, 999px);background:var(--ink-active, #0f1115);color:var(--paper, #fff);font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 80;font-size:12px;line-height:1;letter-spacing:-.01em}.is-tenant .ef-profile-chip__avatar{background:var(--tenant-500);color:var(--on-tenant)}.ef-profile-chip__text{display:flex;flex-direction:column;min-width:0;font-size:12px;line-height:1.3}.ef-profile-chip__name{font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ef-profile-chip__role{color:var(--text-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfProfileChipComponent, isStandalone: true, selector: "ef-profile-chip", inputs: { name: "name", role: "role", roleKey: "roleKey", initial: "initial", tone: "tone", readonly: ["readonly", "readonly", booleanAttribute], compact: ["compact", "compact", booleanAttribute] }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"ef-profile-chip\"\n  [class.is-tenant]=\"tone === 'tenant'\"\n  [class.is-readonly]=\"readonly\"\n  [class.is-compact]=\"compact\"\n  [attr.aria-label]=\"name || null\"\n  [attr.tabindex]=\"readonly ? -1 : null\"\n  (click)=\"handleClick($event)\"\n>\n  <span class=\"ef-profile-chip__avatar\" aria-hidden=\"true\">{{ computedInitial }}</span>\n  @if (!compact) {\n  <span class=\"ef-profile-chip__text\">\n    @if (name) {\n      <span class=\"ef-profile-chip__name\">{{ name }}</span>\n    }\n    @if (roleKey || role) {\n      <span class=\"ef-profile-chip__role\">\n        @if (roleKey) {\n          {{ roleKey | translate }}\n        } @else {\n          {{ role }}\n        }\n      </span>\n    }\n  </span>\n  }\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:block}.ef-profile-chip{display:inline-flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:transparent;border:0;border-radius:var(--r-md, 8px);color:var(--text);cursor:pointer;text-align:start;font-family:inherit;transition:background var(--t-fast, .14s) var(--ease-out, ease-out)}.ef-profile-chip:hover:not(.is-readonly){background:color-mix(in srgb,var(--ink-active, #0f1115) 6%,transparent)}.ef-profile-chip:focus-visible{outline:2px solid color-mix(in srgb,var(--tenant-400, #6b7280) 60%,transparent);outline-offset:1px}.ef-profile-chip.is-readonly{cursor:default}.ef-profile-chip.is-compact{width:auto;padding:2px;border-radius:var(--r-pill, 999px)}.ef-profile-chip__avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;border-radius:var(--r-pill, 999px);background:var(--ink-active, #0f1115);color:var(--paper, #fff);font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 80;font-size:12px;line-height:1;letter-spacing:-.01em}.is-tenant .ef-profile-chip__avatar{background:var(--tenant-500);color:var(--on-tenant)}.ef-profile-chip__text{display:flex;flex-direction:column;min-width:0;font-size:12px;line-height:1.3}.ef-profile-chip__name{font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ef-profile-chip__role{color:var(--text-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfProfileChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-profile-chip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TranslateModule], template: "<button\n  type=\"button\"\n  class=\"ef-profile-chip\"\n  [class.is-tenant]=\"tone === 'tenant'\"\n  [class.is-readonly]=\"readonly\"\n  [attr.aria-label]=\"name || null\"\n  [attr.tabindex]=\"readonly ? -1 : null\"\n  (click)=\"handleClick($event)\"\n>\n  <span class=\"ef-profile-chip__avatar\" aria-hidden=\"true\">{{ computedInitial }}</span>\n  <span class=\"ef-profile-chip__text\">\n    @if (name) {\n      <span class=\"ef-profile-chip__name\">{{ name }}</span>\n    }\n    @if (roleKey || role) {\n      <span class=\"ef-profile-chip__role\">\n        @if (roleKey) {\n          {{ roleKey | translate }}\n        } @else {\n          {{ role }}\n        }\n      </span>\n    }\n  </span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:block}.ef-profile-chip{display:inline-flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:transparent;border:0;border-radius:var(--r-md, 8px);color:var(--text);cursor:pointer;text-align:start;font-family:inherit;transition:background var(--t-fast, .14s) var(--ease-out, ease-out)}.ef-profile-chip:hover:not(.is-readonly){background:color-mix(in srgb,var(--ink-active, #0f1115) 6%,transparent)}.ef-profile-chip:focus-visible{outline:2px solid color-mix(in srgb,var(--tenant-400, #6b7280) 60%,transparent);outline-offset:1px}.ef-profile-chip.is-readonly{cursor:default}.ef-profile-chip__avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;border-radius:var(--r-pill, 999px);background:var(--ink-active, #0f1115);color:var(--paper, #fff);font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 80;font-size:12px;line-height:1;letter-spacing:-.01em}.is-tenant .ef-profile-chip__avatar{background:var(--tenant-500);color:var(--on-tenant)}.ef-profile-chip__text{display:flex;flex-direction:column;min-width:0;font-size:12px;line-height:1.3}.ef-profile-chip__name{font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ef-profile-chip__role{color:var(--text-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+            args: [{ selector: 'ef-profile-chip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TranslateModule], template: "<button\n  type=\"button\"\n  class=\"ef-profile-chip\"\n  [class.is-tenant]=\"tone === 'tenant'\"\n  [class.is-readonly]=\"readonly\"\n  [class.is-compact]=\"compact\"\n  [attr.aria-label]=\"name || null\"\n  [attr.tabindex]=\"readonly ? -1 : null\"\n  (click)=\"handleClick($event)\"\n>\n  <span class=\"ef-profile-chip__avatar\" aria-hidden=\"true\">{{ computedInitial }}</span>\n  @if (!compact) {\n  <span class=\"ef-profile-chip__text\">\n    @if (name) {\n      <span class=\"ef-profile-chip__name\">{{ name }}</span>\n    }\n    @if (roleKey || role) {\n      <span class=\"ef-profile-chip__role\">\n        @if (roleKey) {\n          {{ roleKey | translate }}\n        } @else {\n          {{ role }}\n        }\n      </span>\n    }\n  </span>\n  }\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:block}.ef-profile-chip{display:inline-flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:transparent;border:0;border-radius:var(--r-md, 8px);color:var(--text);cursor:pointer;text-align:start;font-family:inherit;transition:background var(--t-fast, .14s) var(--ease-out, ease-out)}.ef-profile-chip:hover:not(.is-readonly){background:color-mix(in srgb,var(--ink-active, #0f1115) 6%,transparent)}.ef-profile-chip:focus-visible{outline:2px solid color-mix(in srgb,var(--tenant-400, #6b7280) 60%,transparent);outline-offset:1px}.ef-profile-chip.is-readonly{cursor:default}.ef-profile-chip.is-compact{width:auto;padding:2px;border-radius:var(--r-pill, 999px)}.ef-profile-chip__avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;border-radius:var(--r-pill, 999px);background:var(--ink-active, #0f1115);color:var(--paper, #fff);font-family:var(--font-display);font-variation-settings:\"opsz\" 12,\"wght\" 700,\"wdth\" 80;font-size:12px;line-height:1;letter-spacing:-.01em}.is-tenant .ef-profile-chip__avatar{background:var(--tenant-500);color:var(--on-tenant)}.ef-profile-chip__text{display:flex;flex-direction:column;min-width:0;font-size:12px;line-height:1.3}.ef-profile-chip__name{font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ef-profile-chip__role{color:var(--text-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], propDecorators: { name: [{
                 type: Input
             }], role: [{
@@ -8014,6 +8059,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             }], readonly: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], compact: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], clickEvent: [{
                 type: Output
             }] } });
@@ -8049,6 +8097,8 @@ class EfProfileMenuComponent {
     initial = input('', ...(ngDevMode ? [{ debugName: "initial" }] : /* istanbul ignore next */ []));
     tone = input('tenant', ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** `avatar` is the chip without its text, for the top bar while the
+     *  side panel (and the full chip in its footer) is folded away. */
     variant = input('chip', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     itemSelected = output();
     /** Id of the one expanded group, or null. One at a time: a menu that
@@ -8077,11 +8127,11 @@ class EfProfileMenuComponent {
         popover?.hide();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfProfileMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfProfileMenuComponent, isStandalone: true, selector: "ef-profile-menu", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, initial: { classPropertyName: "initial", publicName: "initial", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "@if (variant() === 'chip') {\n  <ef-profile-chip\n    [name]=\"name()\"\n    [role]=\"chipRole()\"\n    [initial]=\"initial()\"\n    [tone]=\"tone()\"\n    (clickEvent)=\"op.toggle($event)\"\n  />\n  <!-- The popover is reduced to a placement mechanism: `.ef-menu` inside it\n       draws the surface, so `ef-menu-popover` strips PrimeNG's own panel and\n       arrow rather than letting two panels stack. -->\n  <p-popover #op styleClass=\"ef-menu-popover\" appendTo=\"body\">\n    <ng-container *ngTemplateOutlet=\"panel; context: { $implicit: op }\" />\n  </p-popover>\n} @else {\n  <ng-container *ngTemplateOutlet=\"panel\" />\n}\n\n<ng-template #panel let-op>\n  <div class=\"ef-menu\" role=\"menu\" [attr.aria-label]=\"name() || null\">\n    @if (name() || secondary()) {\n      <div class=\"ef-menu__head\">\n        @if (name()) {\n          <span class=\"ef-menu__head-name\">{{ name() }}</span>\n        }\n        @if (secondary()) {\n          <span class=\"ef-menu__head-sub\">{{ secondary() }}</span>\n        }\n      </div>\n    }\n\n    @for (item of items(); track item.id) {\n      @if (item.groupStart) {\n        <div class=\"ef-menu__divider\" role=\"separator\"></div>\n      }\n\n      <button\n        type=\"button\"\n        class=\"ef-menu__item\"\n        role=\"menuitem\"\n        [class.danger]=\"item.severity === 'danger'\"\n        [attr.aria-expanded]=\"item.children?.length ? isExpanded(item.id) : null\"\n        (click)=\"select(item, op)\"\n      >\n        @if (item.icon) {\n          <i [class]=\"'ico ' + item.icon\" aria-hidden=\"true\"></i>\n        }\n        <span class=\"ef-menu__label\">{{ item.labelKey | translate }}</span>\n        @if (item.badge !== undefined && item.badge !== null) {\n          <span class=\"ef-menu__badge\">{{ item.badge }}</span>\n        }\n        @if (item.children?.length) {\n          <i\n            class=\"ef-menu__caret pi\"\n            [class.pi-chevron-down]=\"!isExpanded(item.id)\"\n            [class.pi-chevron-up]=\"isExpanded(item.id)\"\n            aria-hidden=\"true\"\n          ></i>\n        }\n      </button>\n\n      @if (item.children?.length && isExpanded(item.id)) {\n        <div class=\"ef-menu__sublist\" role=\"group\">\n          @for (child of item.children; track child.id) {\n            <button\n              type=\"button\"\n              class=\"ef-menu__item\"\n              role=\"menuitem\"\n              (click)=\"select(child, op)\"\n            >\n              @if (child.icon) {\n                <i [class]=\"'ico ' + child.icon\" aria-hidden=\"true\"></i>\n              }\n              <span class=\"ef-menu__label\">{{ child.labelKey | translate }}</span>\n            </button>\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0}.ef-menu{min-width:232px;max-width:288px;max-height:calc(100vh - 32px);overflow-y:auto}@media(max-width:767px){.ef-menu{min-width:0}.ef-menu__item{min-height:var(--hit-touch);padding-block:0;font-size:14px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: EfProfileChipComponent, selector: "ef-profile-chip", inputs: ["name", "role", "roleKey", "initial", "tone", "readonly"], outputs: ["clickEvent"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfProfileMenuComponent, isStandalone: true, selector: "ef-profile-menu", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, initial: { classPropertyName: "initial", publicName: "initial", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "@if (variant() !== 'list') {\n  <ef-profile-chip\n    [name]=\"name()\"\n    [role]=\"chipRole()\"\n    [initial]=\"initial()\"\n    [tone]=\"tone()\"\n    [compact]=\"variant() === 'avatar'\"\n    (clickEvent)=\"op.toggle($event)\"\n  />\n  <!-- The popover is reduced to a placement mechanism: `.ef-menu` inside it\n       draws the surface, so `ef-menu-popover` strips PrimeNG's own panel and\n       arrow rather than letting two panels stack. -->\n  <p-popover #op styleClass=\"ef-menu-popover\" appendTo=\"body\">\n    <ng-container *ngTemplateOutlet=\"panel; context: { $implicit: op }\" />\n  </p-popover>\n} @else {\n  <ng-container *ngTemplateOutlet=\"panel\" />\n}\n\n<ng-template #panel let-op>\n  <div class=\"ef-menu\" role=\"menu\" [attr.aria-label]=\"name() || null\">\n    @if (name() || secondary()) {\n      <div class=\"ef-menu__head\">\n        @if (name()) {\n          <span class=\"ef-menu__head-name\">{{ name() }}</span>\n        }\n        @if (secondary()) {\n          <span class=\"ef-menu__head-sub\">{{ secondary() }}</span>\n        }\n      </div>\n    }\n\n    @for (item of items(); track item.id) {\n      @if (item.groupStart) {\n        <div class=\"ef-menu__divider\" role=\"separator\"></div>\n      }\n\n      <button\n        type=\"button\"\n        class=\"ef-menu__item\"\n        role=\"menuitem\"\n        [class.danger]=\"item.severity === 'danger'\"\n        [attr.aria-expanded]=\"item.children?.length ? isExpanded(item.id) : null\"\n        (click)=\"select(item, op)\"\n      >\n        @if (item.icon) {\n          <i [class]=\"'ico ' + item.icon\" aria-hidden=\"true\"></i>\n        }\n        <span class=\"ef-menu__label\">{{ item.labelKey | translate }}</span>\n        @if (item.badge !== undefined && item.badge !== null) {\n          <span class=\"ef-menu__badge\">{{ item.badge }}</span>\n        }\n        @if (item.children?.length) {\n          <i\n            class=\"ef-menu__caret pi\"\n            [class.pi-chevron-down]=\"!isExpanded(item.id)\"\n            [class.pi-chevron-up]=\"isExpanded(item.id)\"\n            aria-hidden=\"true\"\n          ></i>\n        }\n      </button>\n\n      @if (item.children?.length && isExpanded(item.id)) {\n        <div class=\"ef-menu__sublist\" role=\"group\">\n          @for (child of item.children; track child.id) {\n            <button\n              type=\"button\"\n              class=\"ef-menu__item\"\n              role=\"menuitem\"\n              (click)=\"select(child, op)\"\n            >\n              @if (child.icon) {\n                <i [class]=\"'ico ' + child.icon\" aria-hidden=\"true\"></i>\n              }\n              <span class=\"ef-menu__label\">{{ child.labelKey | translate }}</span>\n            </button>\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0}.ef-menu{min-width:232px;max-width:288px;max-height:calc(100vh - 32px);overflow-y:auto}@media(max-width:767px){.ef-menu{min-width:0}.ef-menu__item{min-height:var(--hit-touch);padding-block:0;font-size:14px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: EfProfileChipComponent, selector: "ef-profile-chip", inputs: ["name", "role", "roleKey", "initial", "tone", "readonly", "compact"], outputs: ["clickEvent"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfProfileMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-profile-menu', standalone: true, imports: [CommonModule, TranslateModule, PopoverModule, EfProfileChipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (variant() === 'chip') {\n  <ef-profile-chip\n    [name]=\"name()\"\n    [role]=\"chipRole()\"\n    [initial]=\"initial()\"\n    [tone]=\"tone()\"\n    (clickEvent)=\"op.toggle($event)\"\n  />\n  <!-- The popover is reduced to a placement mechanism: `.ef-menu` inside it\n       draws the surface, so `ef-menu-popover` strips PrimeNG's own panel and\n       arrow rather than letting two panels stack. -->\n  <p-popover #op styleClass=\"ef-menu-popover\" appendTo=\"body\">\n    <ng-container *ngTemplateOutlet=\"panel; context: { $implicit: op }\" />\n  </p-popover>\n} @else {\n  <ng-container *ngTemplateOutlet=\"panel\" />\n}\n\n<ng-template #panel let-op>\n  <div class=\"ef-menu\" role=\"menu\" [attr.aria-label]=\"name() || null\">\n    @if (name() || secondary()) {\n      <div class=\"ef-menu__head\">\n        @if (name()) {\n          <span class=\"ef-menu__head-name\">{{ name() }}</span>\n        }\n        @if (secondary()) {\n          <span class=\"ef-menu__head-sub\">{{ secondary() }}</span>\n        }\n      </div>\n    }\n\n    @for (item of items(); track item.id) {\n      @if (item.groupStart) {\n        <div class=\"ef-menu__divider\" role=\"separator\"></div>\n      }\n\n      <button\n        type=\"button\"\n        class=\"ef-menu__item\"\n        role=\"menuitem\"\n        [class.danger]=\"item.severity === 'danger'\"\n        [attr.aria-expanded]=\"item.children?.length ? isExpanded(item.id) : null\"\n        (click)=\"select(item, op)\"\n      >\n        @if (item.icon) {\n          <i [class]=\"'ico ' + item.icon\" aria-hidden=\"true\"></i>\n        }\n        <span class=\"ef-menu__label\">{{ item.labelKey | translate }}</span>\n        @if (item.badge !== undefined && item.badge !== null) {\n          <span class=\"ef-menu__badge\">{{ item.badge }}</span>\n        }\n        @if (item.children?.length) {\n          <i\n            class=\"ef-menu__caret pi\"\n            [class.pi-chevron-down]=\"!isExpanded(item.id)\"\n            [class.pi-chevron-up]=\"isExpanded(item.id)\"\n            aria-hidden=\"true\"\n          ></i>\n        }\n      </button>\n\n      @if (item.children?.length && isExpanded(item.id)) {\n        <div class=\"ef-menu__sublist\" role=\"group\">\n          @for (child of item.children; track child.id) {\n            <button\n              type=\"button\"\n              class=\"ef-menu__item\"\n              role=\"menuitem\"\n              (click)=\"select(child, op)\"\n            >\n              @if (child.icon) {\n                <i [class]=\"'ico ' + child.icon\" aria-hidden=\"true\"></i>\n              }\n              <span class=\"ef-menu__label\">{{ child.labelKey | translate }}</span>\n            </button>\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0}.ef-menu{min-width:232px;max-width:288px;max-height:calc(100vh - 32px);overflow-y:auto}@media(max-width:767px){.ef-menu{min-width:0}.ef-menu__item{min-height:var(--hit-touch);padding-block:0;font-size:14px}}\n"] }]
+            args: [{ selector: 'ef-profile-menu', standalone: true, imports: [CommonModule, TranslateModule, PopoverModule, EfProfileChipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (variant() !== 'list') {\n  <ef-profile-chip\n    [name]=\"name()\"\n    [role]=\"chipRole()\"\n    [initial]=\"initial()\"\n    [tone]=\"tone()\"\n    [compact]=\"variant() === 'avatar'\"\n    (clickEvent)=\"op.toggle($event)\"\n  />\n  <!-- The popover is reduced to a placement mechanism: `.ef-menu` inside it\n       draws the surface, so `ef-menu-popover` strips PrimeNG's own panel and\n       arrow rather than letting two panels stack. -->\n  <p-popover #op styleClass=\"ef-menu-popover\" appendTo=\"body\">\n    <ng-container *ngTemplateOutlet=\"panel; context: { $implicit: op }\" />\n  </p-popover>\n} @else {\n  <ng-container *ngTemplateOutlet=\"panel\" />\n}\n\n<ng-template #panel let-op>\n  <div class=\"ef-menu\" role=\"menu\" [attr.aria-label]=\"name() || null\">\n    @if (name() || secondary()) {\n      <div class=\"ef-menu__head\">\n        @if (name()) {\n          <span class=\"ef-menu__head-name\">{{ name() }}</span>\n        }\n        @if (secondary()) {\n          <span class=\"ef-menu__head-sub\">{{ secondary() }}</span>\n        }\n      </div>\n    }\n\n    @for (item of items(); track item.id) {\n      @if (item.groupStart) {\n        <div class=\"ef-menu__divider\" role=\"separator\"></div>\n      }\n\n      <button\n        type=\"button\"\n        class=\"ef-menu__item\"\n        role=\"menuitem\"\n        [class.danger]=\"item.severity === 'danger'\"\n        [attr.aria-expanded]=\"item.children?.length ? isExpanded(item.id) : null\"\n        (click)=\"select(item, op)\"\n      >\n        @if (item.icon) {\n          <i [class]=\"'ico ' + item.icon\" aria-hidden=\"true\"></i>\n        }\n        <span class=\"ef-menu__label\">{{ item.labelKey | translate }}</span>\n        @if (item.badge !== undefined && item.badge !== null) {\n          <span class=\"ef-menu__badge\">{{ item.badge }}</span>\n        }\n        @if (item.children?.length) {\n          <i\n            class=\"ef-menu__caret pi\"\n            [class.pi-chevron-down]=\"!isExpanded(item.id)\"\n            [class.pi-chevron-up]=\"isExpanded(item.id)\"\n            aria-hidden=\"true\"\n          ></i>\n        }\n      </button>\n\n      @if (item.children?.length && isExpanded(item.id)) {\n        <div class=\"ef-menu__sublist\" role=\"group\">\n          @for (child of item.children; track child.id) {\n            <button\n              type=\"button\"\n              class=\"ef-menu__item\"\n              role=\"menuitem\"\n              (click)=\"select(child, op)\"\n            >\n              @if (child.icon) {\n                <i [class]=\"'ico ' + child.icon\" aria-hidden=\"true\"></i>\n              }\n              <span class=\"ef-menu__label\">{{ child.labelKey | translate }}</span>\n            </button>\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;min-width:0}.ef-menu{min-width:232px;max-width:288px;max-height:calc(100vh - 32px);overflow-y:auto}@media(max-width:767px){.ef-menu{min-width:0}.ef-menu__item{min-height:var(--hit-touch);padding-block:0;font-size:14px}}\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], secondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondary", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], initial: [{ type: i0.Input, args: [{ isSignal: true, alias: "initial", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
 
 class EfBlockUiComponent {
@@ -9394,6 +9444,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * value when ticked, `null` when unticked) — the latter pairs with
  * a parent NgModel array for multi-select scenarios.
  *
+ * Two layouts, set by `inline`:
+ * - `inline` (default) — box with its label to the right, for
+ *   standalone toggles and dense lists.
+ * - `[inline]="false"` — field layout: the label sits above, like
+ *   `ef-select` / `ef-input-text`, and the box is centred in a
+ *   `--hit-base` row so it lines up with the inputs beside it in a
+ *   form grid.
+ *
  * ```html
  * <ef-checkbox
  *   labelKey="catalog.is_active"
@@ -9417,6 +9475,14 @@ class EfCheckboxComponent extends AbstractEfFormControl {
      *                           styled against `.ef-checkbox-native`.
      */
     variant = 'primeng';
+    /** Label beside the box (default). `false` stacks the label above,
+     *  matching the other form fields in a grid row. */
+    inline = true;
+    get isStacked() { return !this.inline; }
+    /** Whether the label renders beside the box (inline layout only). */
+    get hasLabel() {
+        return !!(this.labelKey() || this.label());
+    }
     /** Two-way bindable `[(checked)]`. */
     checked = false;
     checkedChange = new EventEmitter();
@@ -9472,11 +9538,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", checked: "checked" }, outputs: { checkedChange: "checkedChange" }, usesInheritance: true, ngImport: i0, template: "@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 (labelKey() || label()) {\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 (labelKey() || label()) {\n    <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" styleClass=\"form-label-left cursor-pointer\" />\n  }\n}\n@if (showRequired || serverErrors) {\n  <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:.5rem}\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]=\"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" }] });
 }
 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 (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 (labelKey() || label()) {\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 (labelKey() || label()) {\n    <ef-label [labelKey]=\"labelKey()\" [label]=\"label()\" [for]=\"effectiveId\" styleClass=\"form-label-left cursor-pointer\" />\n  }\n}\n@if (showRequired || serverErrors) {\n  <div [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:.5rem}\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]=\"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"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], binary: [{
@@ -9484,6 +9550,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 args: [{ transform: booleanAttribute }]
             }], variant: [{
                 type: Input
+            }], inline: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isStacked: [{
+                type: HostBinding,
+                args: ['class.ef-stacked']
             }], checked: [{
                 type: Input
             }], checkedChange: [{
@@ -11017,6 +11089,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             args: [{ selector: 'ef-change-password', standalone: true, imports: [CommonModule, TranslateModule, EfPasswordComponent, EfFormGridComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ef-form-grid>\n  @if (requireCurrent()) {\n    <ef-password\n      class=\"col-12\"\n      name=\"currentPassword\"\n      labelKey=\"ef_change_password_current\"\n      autocomplete=\"current-password\"\n      required\n      (valueChangeEvent)=\"currentPassword.set($event)\"\n    />\n  }\n  <ef-password\n    class=\"col-6\"\n    name=\"newPassword\"\n    labelKey=\"ef_change_password_new\"\n    autocomplete=\"new-password\"\n    required\n    (valueChangeEvent)=\"newPassword.set($event)\"\n  />\n  <ef-password\n    class=\"col-6\"\n    name=\"newPasswordConfirmation\"\n    labelKey=\"ef_change_password_confirm\"\n    autocomplete=\"new-password\"\n    required\n    (valueChangeEvent)=\"confirmation.set($event)\"\n  />\n</ef-form-grid>\n\n@if (validationKeys().length || errors().length) {\n  <ul class=\"ef-change-password__errors\">\n    @for (key of validationKeys(); track $index) {\n      <li>{{ key | translate }}</li>\n    }\n    <!-- Server messages arrive already translated (Identity returns prose,\n         not keys), so they are printed verbatim. -->\n    @for (error of errors(); track $index) {\n      <li>{{ error }}</li>\n    }\n  </ul>\n}\n", styles: [":host{display:grid;gap:var(--s-2, 8px);min-width:0}.ef-change-password__errors{display:grid;gap:4px;margin:0;padding:0;list-style:none;min-width:0;font-size:12px;line-height:1.4;color:var(--st-cancelled-fg, #b42318)}\n"] }]
         }], propDecorators: { requireCurrent: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireCurrent", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }] } });
 
+/**
+ * Comptoir radio group — one `p-radiobutton` per option, single value.
+ *
+ * Options follow the `ef-select` shape (`options` / `optionLabel` /
+ * `optionValue`, change via `selectionChangeEvent`), so a short select
+ * can become a radio group by swapping the tag.
+ *
+ * Two layouts, set by `inline`, matching `ef-checkbox`:
+ * - `inline` (default) — group label and options on one line.
+ * - `[inline]="false"` — field layout: the label sits above, like
+ *   `ef-select` / `ef-input-text`, and the options sit in a
+ *   `--hit-base` row so they line up with the inputs beside them in a
+ *   form grid.
+ *
+ * Options wrap when the row runs out of width, so a long list never
+ * widens the page on a phone.
+ *
+ * ```html
+ * <ef-radio
+ *   name="clientType"
+ *   labelKey="sales_clients_col_type"
+ *   [inline]="false"
+ *   [options]="context.ref.get('client_type')()"
+ *   optionLabel="label"
+ *   optionValue="code"
+ *   [value]="clientType()"
+ *   (selectionChangeEvent)="patchEntity({ clientType: $event })" />
+ * ```
+ */
+class EfRadioComponent extends AbstractEfFormControl {
+    options = [];
+    /** Property shown as the option's text. */
+    optionLabel = 'label';
+    /** Property used as the value. Unset → the whole option object. */
+    optionValue;
+    /** Property that disables a single option when truthy. */
+    optionDisabled;
+    /** Group label beside the options (default). `false` stacks it above,
+     *  matching the other form fields in a grid row. */
+    inline = true;
+    get isStacked() { return !this.inline; }
+    value = null;
+    selectionChangeEvent = new EventEmitter();
+    onChange = () => { };
+    onTouched = () => { };
+    ngControl = inject(NgControl, { self: true, optional: true });
+    constructor() {
+        super();
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    get hasLabel() {
+        return !!(this.labelKey() || this.label());
+    }
+    /** Shared `name` so the browser treats the options as one group. */
+    get groupName() {
+        return this.name() || this.effectiveId;
+    }
+    get labelId() {
+        return `${this.effectiveId}-label`;
+    }
+    get showRequired() {
+        const ctrl = this.ngControl?.control;
+        return !!(ctrl?.hasError('required') && ctrl?.touched);
+    }
+    get serverErrors() {
+        return this.resolvedExternalErrors() ?? this.ngControl?.control?.errors?.['serverError'] ?? null;
+    }
+    get isInvalid() {
+        if (this.resolvedExternalErrors()?.length)
+            return true;
+        const ctrl = this.ngControl?.control;
+        return !!(ctrl?.invalid && (ctrl?.touched || ctrl?.dirty));
+    }
+    optionValueOf(opt) {
+        return this.optionValue ? opt?.[this.optionValue] : opt;
+    }
+    optionLabelOf(opt) {
+        return opt?.[this.optionLabel] ?? '';
+    }
+    isOptionDisabled(opt) {
+        return this.isDisabled() || (!!this.optionDisabled && !!opt?.[this.optionDisabled]);
+    }
+    optionId(index) {
+        return `${this.effectiveId}-${index}`;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.updateDisabledState(isDisabled);
+    }
+    handleChange(next) {
+        this.value = next;
+        this.onChange(next);
+        this.selectionChangeEvent.emit(next);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfRadioComponent, isStandalone: true, selector: "ef-radio", inputs: { options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", inline: ["inline", "inline", booleanAttribute], value: "value" }, outputs: { selectionChangeEvent: "selectionChangeEvent" }, host: { properties: { "class.ef-stacked": "this.isStacked" } }, usesInheritance: true, ngImport: i0, template: "@if (hasLabel) {\n  <span class=\"ef-radio-group-label\" [id]=\"labelId\">\n    <ef-label\n      [labelKey]=\"labelKey()\"\n      [label]=\"label()\"\n      [required]=\"required()\"\n      [styleClass]=\"inline ? 'form-label-left' : 'form-label'\"\n    />\n  </span>\n}\n<div\n  class=\"ef-radio-options\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"hasLabel ? labelId : null\"\n  [attr.aria-label]=\"hasLabel ? null : effectiveAriaLabel\"\n  [attr.aria-required]=\"required() ? 'true' : null\"\n  [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n  [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n>\n  @for (opt of options; track $index; let i = $index) {\n    <div class=\"ef-radio-option\">\n      <p-radiobutton\n        [inputId]=\"optionId(i)\"\n        [name]=\"groupName\"\n        [value]=\"optionValueOf(opt)\"\n        [ngModel]=\"value\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        (ngModelChange)=\"handleChange($event)\"\n        [disabled]=\"isOptionDisabled(opt)\"\n      />\n      <label class=\"ef-radio-option-label\" [for]=\"optionId(i)\" [class.is-disabled]=\"isOptionDisabled(opt)\">\n        {{ optionLabelOf(opt) }}\n      </label>\n    </div>\n  }\n</div>\n@if (showRequired || serverErrors) {\n  <div class=\"ef-radio-errors\" [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;min-width:0}.ef-radio-options{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;min-width:0}.ef-radio-option{display:inline-flex;align-items:center;gap:.5rem;min-width:0}.ef-radio-option-label{font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none}.ef-radio-option-label.is-disabled{color:var(--text-mute);cursor:not-allowed}.ef-radio-errors{flex-basis:100%}:host(.ef-stacked){display:block}:host(.ef-stacked)>.ef-radio-group-label{display:block}:host(.ef-stacked)>.ef-radio-options{min-height:var(--hit-base)}\n"], dependencies: [{ kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i1$g.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfLabelComponent, selector: "ef-label", inputs: ["label", "labelKey", "for", "styleClass", "required"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfRadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ef-radio', standalone: true, imports: [RadioButtonModule, FormsModule, TranslateModule, EfLabelComponent], template: "@if (hasLabel) {\n  <span class=\"ef-radio-group-label\" [id]=\"labelId\">\n    <ef-label\n      [labelKey]=\"labelKey()\"\n      [label]=\"label()\"\n      [required]=\"required()\"\n      [styleClass]=\"inline ? 'form-label-left' : 'form-label'\"\n    />\n  </span>\n}\n<div\n  class=\"ef-radio-options\"\n  role=\"radiogroup\"\n  [attr.aria-labelledby]=\"hasLabel ? labelId : null\"\n  [attr.aria-label]=\"hasLabel ? null : effectiveAriaLabel\"\n  [attr.aria-required]=\"required() ? 'true' : null\"\n  [attr.aria-invalid]=\"isInvalid ? 'true' : null\"\n  [attr.aria-describedby]=\"(showRequired || serverErrors) ? errorsId : null\"\n>\n  @for (opt of options; track $index; let i = $index) {\n    <div class=\"ef-radio-option\">\n      <p-radiobutton\n        [inputId]=\"optionId(i)\"\n        [name]=\"groupName\"\n        [value]=\"optionValueOf(opt)\"\n        [ngModel]=\"value\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        (ngModelChange)=\"handleChange($event)\"\n        [disabled]=\"isOptionDisabled(opt)\"\n      />\n      <label class=\"ef-radio-option-label\" [for]=\"optionId(i)\" [class.is-disabled]=\"isOptionDisabled(opt)\">\n        {{ optionLabelOf(opt) }}\n      </label>\n    </div>\n  }\n</div>\n@if (showRequired || serverErrors) {\n  <div class=\"ef-radio-errors\" [id]=\"errorsId\" role=\"alert\" aria-live=\"polite\">\n    @if (showRequired) {\n      <small class=\"text-danger\">{{ 'validation.required' | translate }}</small>\n    }\n    @if (serverErrors; as errors) {\n      @for (error of errors; track error) {\n        <small class=\"text-danger block\">{{ error }}</small>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;min-width:0}.ef-radio-options{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;min-width:0}.ef-radio-option{display:inline-flex;align-items:center;gap:.5rem;min-width:0}.ef-radio-option-label{font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none}.ef-radio-option-label.is-disabled{color:var(--text-mute);cursor:not-allowed}.ef-radio-errors{flex-basis:100%}:host(.ef-stacked){display:block}:host(.ef-stacked)>.ef-radio-group-label{display:block}:host(.ef-stacked)>.ef-radio-options{min-height:var(--hit-base)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{
+                type: Input
+            }], optionLabel: [{
+                type: Input
+            }], optionValue: [{
+                type: Input
+            }], optionDisabled: [{
+                type: Input
+            }], inline: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], isStacked: [{
+                type: HostBinding,
+                args: ['class.ef-stacked']
+            }], value: [{
+                type: Input
+            }], selectionChangeEvent: [{
+                type: Output
+            }] } });
+
 /**
  * Native Comptoir textarea — no PrimeNG wrapper. Pairs with the
  * `.ef-textarea` rule in `@elasticias/ui/styles/patterns` (focus
@@ -11882,5 +12085,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, 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, 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