@elasticias/ui 1.0.37 → 1.0.39

package/fesm2022/elasticias-ui.mjs

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