@elasticias/ui 1.0.7 → 1.0.9

package/fesm2022/elasticias-ui.mjs

@@ -5481,11 +5481,11 @@ class EfAppTopComponent {
     navItem = this.active.activeNavItem;
     hasBreadcrumb = computed(() => this.module() != null, ...(ngDevMode ? [{ debugName: "hasBreadcrumb" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EfAppTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EfAppTopComponent, isStandalone: true, selector: "ef-app-top", inputs: { themeToggle: { classPropertyName: "themeToggle", publicName: "themeToggle", isSignal: true, isRequired: false, transformFunction: null }, logout: { classPropertyName: "logout", publicName: "logout", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ef-app-top__slot ef-app-top__slot--breadcrumb\">\n  <ng-content select=\"[breadcrumb]\"></ng-content>\n  @if (hasBreadcrumb()) {\n    <nav class=\"ef-app-top__crumb\" aria-label=\"breadcrumb\">\n      <span class=\"ef-app-top__crumb-dot\" [attr.data-module]=\"module()!.id\" aria-hidden=\"true\"></span>\n      <span class=\"ef-app-top__crumb-root\">{{ module()!.labelKey | translate }}</span>\n      @if (navItem(); as item) {\n        <span class=\"ef-app-top__crumb-sep\" aria-hidden=\"true\">/</span>\n        <span class=\"ef-app-top__crumb-leaf\">{{ item.labelKey | translate }}</span>\n      }\n    </nav>\n  }\n</div>\n\n<div class=\"ef-app-top__slot ef-app-top__slot--actions\">\n  <ng-content select=\"[actions]\"></ng-content>\n  @if (themeToggle()) {\n    <ef-theme-toggle />\n  }\n  @if (logout() && session) {\n    <button\n      type=\"button\"\n      class=\"ef-app-top__logout\"\n      [attr.aria-label]=\"'common_logout' | translate\"\n      [attr.title]=\"'common_logout' | translate\"\n      (click)=\"signOut()\"\n    >\n      <i class=\"pi pi-sign-out\" aria-hidden=\"true\"></i>\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center;gap:16px;flex:0 0 auto;height:48px;padding:0 20px;background:var(--paper-alt);border-bottom:1px solid var(--rule);color:var(--text)}.ef-app-top__slot{display:flex;align-items:center;gap:8px;min-width:0}.ef-app-top__slot--actions{justify-content:flex-end;gap:12px}.ef-app-top__crumb{display:inline-flex;align-items:center;gap:8px;font-family:Manrope,system-ui,sans-serif;font-size:13px;letter-spacing:.01em;line-height:1;color:var(--text-mute)}.ef-app-top__crumb-dot{width:8px;height:8px;border-radius:999px;background:var(--m-admin);flex-shrink:0}.ef-app-top__crumb-dot[data-module=sales]{background:var(--m-sales)}.ef-app-top__crumb-dot[data-module=purchase]{background:var(--m-purchase)}.ef-app-top__crumb-dot[data-module=stock]{background:var(--m-stock)}.ef-app-top__crumb-dot[data-module=pos]{background:var(--m-pos)}.ef-app-top__crumb-dot[data-module=marketing]{background:var(--m-marketing)}.ef-app-top__crumb-dot[data-module=store]{background:var(--m-store)}.ef-app-top__crumb-dot[data-module=finance]{background:var(--m-finance)}.ef-app-top__crumb-dot[data-module=admin]{background:var(--m-admin)}.ef-app-top__crumb-root{font-weight:600;color:var(--text)}.ef-app-top__crumb-sep{color:var(--text-soft)}.ef-app-top__crumb-leaf{color:var(--text-mute)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfThemeToggleComponent, selector: "ef-theme-toggle", inputs: ["darkIcon", "lightIcon", "ariaLabelKey"] }, { 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: EfAppTopComponent, isStandalone: true, selector: "ef-app-top", inputs: { themeToggle: { classPropertyName: "themeToggle", publicName: "themeToggle", isSignal: true, isRequired: false, transformFunction: null }, logout: { classPropertyName: "logout", publicName: "logout", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ef-app-top__slot ef-app-top__slot--breadcrumb\">\n  <ng-content select=\"[breadcrumb]\"></ng-content>\n  @if (hasBreadcrumb()) {\n    <nav class=\"ef-app-top__crumb\" aria-label=\"breadcrumb\">\n      <span class=\"ef-app-top__crumb-dot\" [attr.data-module]=\"module()!.id\" aria-hidden=\"true\"></span>\n      <span class=\"ef-app-top__crumb-root\">{{ module()!.labelKey | translate }}</span>\n      @if (navItem(); as item) {\n        <span class=\"ef-app-top__crumb-sep\" aria-hidden=\"true\">/</span>\n        <span class=\"ef-app-top__crumb-leaf\">{{ item.labelKey | translate }}</span>\n      }\n    </nav>\n  }\n</div>\n\n<div class=\"ef-app-top__slot ef-app-top__slot--actions\">\n  <ng-content select=\"[actions]\"></ng-content>\n  @if (themeToggle()) {\n    <ef-theme-toggle />\n  }\n  @if (logout() && session) {\n    <button\n      type=\"button\"\n      class=\"ef-app-top__logout\"\n      [attr.aria-label]=\"'common_logout' | translate\"\n      [attr.title]=\"'common_logout' | translate\"\n      (click)=\"signOut()\"\n    >\n      <i class=\"pi pi-sign-out\" aria-hidden=\"true\"></i>\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center;gap:16px;flex:0 0 auto;height:48px;padding:0 20px;background:var(--paper-alt);border-bottom:1px solid var(--rule);color:var(--text)}.ef-app-top__slot{display:flex;align-items:center;gap:8px;min-width:0}.ef-app-top__slot--actions{justify-content:flex-end;gap:12px}.ef-app-top__crumb{display:inline-flex;align-items:center;gap:8px;font-family:Manrope,system-ui,sans-serif;font-size:13px;letter-spacing:.01em;line-height:1;color:var(--text-mute)}.ef-app-top__crumb-dot{width:8px;height:8px;border-radius:999px;background:var(--m-admin);flex-shrink:0}.ef-app-top__crumb-dot[data-module=sales]{background:var(--m-sales)}.ef-app-top__crumb-dot[data-module=purchase]{background:var(--m-purchase)}.ef-app-top__crumb-dot[data-module=stock]{background:var(--m-stock)}.ef-app-top__crumb-dot[data-module=pos]{background:var(--m-pos)}.ef-app-top__crumb-dot[data-module=marketing]{background:var(--m-marketing)}.ef-app-top__crumb-dot[data-module=store]{background:var(--m-store)}.ef-app-top__crumb-dot[data-module=finance]{background:var(--m-finance)}.ef-app-top__crumb-dot[data-module=admin]{background:var(--m-admin)}.ef-app-top__crumb-root{font-weight:600;color:var(--text)}.ef-app-top__crumb-sep{color:var(--text-soft)}.ef-app-top__crumb-leaf{color:var(--text-mute)}@media(max-width:767px){:host{grid-template-columns:auto minmax(0,1fr);gap:8px;padding:0 12px}.ef-app-top__crumb{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: EfThemeToggleComponent, selector: "ef-theme-toggle", inputs: ["darkIcon", "lightIcon", "ariaLabelKey"] }, { 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: EfAppTopComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ef-app-top', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TranslateModule, EfThemeToggleComponent], template: "<div class=\"ef-app-top__slot ef-app-top__slot--breadcrumb\">\n  <ng-content select=\"[breadcrumb]\"></ng-content>\n  @if (hasBreadcrumb()) {\n    <nav class=\"ef-app-top__crumb\" aria-label=\"breadcrumb\">\n      <span class=\"ef-app-top__crumb-dot\" [attr.data-module]=\"module()!.id\" aria-hidden=\"true\"></span>\n      <span class=\"ef-app-top__crumb-root\">{{ module()!.labelKey | translate }}</span>\n      @if (navItem(); as item) {\n        <span class=\"ef-app-top__crumb-sep\" aria-hidden=\"true\">/</span>\n        <span class=\"ef-app-top__crumb-leaf\">{{ item.labelKey | translate }}</span>\n      }\n    </nav>\n  }\n</div>\n\n<div class=\"ef-app-top__slot ef-app-top__slot--actions\">\n  <ng-content select=\"[actions]\"></ng-content>\n  @if (themeToggle()) {\n    <ef-theme-toggle />\n  }\n  @if (logout() && session) {\n    <button\n      type=\"button\"\n      class=\"ef-app-top__logout\"\n      [attr.aria-label]=\"'common_logout' | translate\"\n      [attr.title]=\"'common_logout' | translate\"\n      (click)=\"signOut()\"\n    >\n      <i class=\"pi pi-sign-out\" aria-hidden=\"true\"></i>\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center;gap:16px;flex:0 0 auto;height:48px;padding:0 20px;background:var(--paper-alt);border-bottom:1px solid var(--rule);color:var(--text)}.ef-app-top__slot{display:flex;align-items:center;gap:8px;min-width:0}.ef-app-top__slot--actions{justify-content:flex-end;gap:12px}.ef-app-top__crumb{display:inline-flex;align-items:center;gap:8px;font-family:Manrope,system-ui,sans-serif;font-size:13px;letter-spacing:.01em;line-height:1;color:var(--text-mute)}.ef-app-top__crumb-dot{width:8px;height:8px;border-radius:999px;background:var(--m-admin);flex-shrink:0}.ef-app-top__crumb-dot[data-module=sales]{background:var(--m-sales)}.ef-app-top__crumb-dot[data-module=purchase]{background:var(--m-purchase)}.ef-app-top__crumb-dot[data-module=stock]{background:var(--m-stock)}.ef-app-top__crumb-dot[data-module=pos]{background:var(--m-pos)}.ef-app-top__crumb-dot[data-module=marketing]{background:var(--m-marketing)}.ef-app-top__crumb-dot[data-module=store]{background:var(--m-store)}.ef-app-top__crumb-dot[data-module=finance]{background:var(--m-finance)}.ef-app-top__crumb-dot[data-module=admin]{background:var(--m-admin)}.ef-app-top__crumb-root{font-weight:600;color:var(--text)}.ef-app-top__crumb-sep{color:var(--text-soft)}.ef-app-top__crumb-leaf{color:var(--text-mute)}\n"] }]
+            args: [{ selector: 'ef-app-top', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TranslateModule, EfThemeToggleComponent], template: "<div class=\"ef-app-top__slot ef-app-top__slot--breadcrumb\">\n  <ng-content select=\"[breadcrumb]\"></ng-content>\n  @if (hasBreadcrumb()) {\n    <nav class=\"ef-app-top__crumb\" aria-label=\"breadcrumb\">\n      <span class=\"ef-app-top__crumb-dot\" [attr.data-module]=\"module()!.id\" aria-hidden=\"true\"></span>\n      <span class=\"ef-app-top__crumb-root\">{{ module()!.labelKey | translate }}</span>\n      @if (navItem(); as item) {\n        <span class=\"ef-app-top__crumb-sep\" aria-hidden=\"true\">/</span>\n        <span class=\"ef-app-top__crumb-leaf\">{{ item.labelKey | translate }}</span>\n      }\n    </nav>\n  }\n</div>\n\n<div class=\"ef-app-top__slot ef-app-top__slot--actions\">\n  <ng-content select=\"[actions]\"></ng-content>\n  @if (themeToggle()) {\n    <ef-theme-toggle />\n  }\n  @if (logout() && session) {\n    <button\n      type=\"button\"\n      class=\"ef-app-top__logout\"\n      [attr.aria-label]=\"'common_logout' | translate\"\n      [attr.title]=\"'common_logout' | translate\"\n      (click)=\"signOut()\"\n    >\n      <i class=\"pi pi-sign-out\" aria-hidden=\"true\"></i>\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center;gap:16px;flex:0 0 auto;height:48px;padding:0 20px;background:var(--paper-alt);border-bottom:1px solid var(--rule);color:var(--text)}.ef-app-top__slot{display:flex;align-items:center;gap:8px;min-width:0}.ef-app-top__slot--actions{justify-content:flex-end;gap:12px}.ef-app-top__crumb{display:inline-flex;align-items:center;gap:8px;font-family:Manrope,system-ui,sans-serif;font-size:13px;letter-spacing:.01em;line-height:1;color:var(--text-mute)}.ef-app-top__crumb-dot{width:8px;height:8px;border-radius:999px;background:var(--m-admin);flex-shrink:0}.ef-app-top__crumb-dot[data-module=sales]{background:var(--m-sales)}.ef-app-top__crumb-dot[data-module=purchase]{background:var(--m-purchase)}.ef-app-top__crumb-dot[data-module=stock]{background:var(--m-stock)}.ef-app-top__crumb-dot[data-module=pos]{background:var(--m-pos)}.ef-app-top__crumb-dot[data-module=marketing]{background:var(--m-marketing)}.ef-app-top__crumb-dot[data-module=store]{background:var(--m-store)}.ef-app-top__crumb-dot[data-module=finance]{background:var(--m-finance)}.ef-app-top__crumb-dot[data-module=admin]{background:var(--m-admin)}.ef-app-top__crumb-root{font-weight:600;color:var(--text)}.ef-app-top__crumb-sep{color:var(--text-soft)}.ef-app-top__crumb-leaf{color:var(--text-mute)}@media(max-width:767px){:host{grid-template-columns:auto minmax(0,1fr);gap:8px;padding:0 12px}.ef-app-top__crumb{display:none}}\n"] }]
         }], propDecorators: { themeToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeToggle", required: false }] }], logout: [{ type: i0.Input, args: [{ isSignal: true, alias: "logout", required: false }] }] } });
 
 /**
@@ -5622,6 +5622,29 @@ class EfAppShellComponent {
     /** Five tabs is what fits a phone; the rest live in the sheet. */
     tabs = computed(() => this.perms.visibleModules().slice(0, 5), ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
     allVisible = this.perms.visibleModules;
+    /**
+     * The screens inside the active module, for the mobile sheet.
+     *
+     * On a phone the side nav is not rendered, and the tab bar switches
+     * modules — so without this there was no way to reach any screen except
+     * the module's default one. Same filtering as `ef-module-side`, because
+     * it answers the same question.
+     */
+    moduleSections = computed(() => {
+        const m = this.active.activeModule();
+        if (!m)
+            return [];
+        return m.navSections
+            .map(section => ({
+            ...section,
+            items: section.items.filter(item => this.perms.can(m.id, item.requiredAction ?? 'read')),
+        }))
+            .filter(section => section.items.length > 0);
+    }, ...(ngDevMode ? [{ debugName: "moduleSections" }] : /* istanbul ignore next */ []));
+    onNavigate(item) {
+        this.router.navigateByUrl(item.route);
+        this.switcherOpen.set(false);
+    }
     openSwitcher() {
         this.switcherOpen.set(true);
     }
@@ -5633,7 +5656,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    <ng-content select=\"[breadcrumb]\" breadcrumb></ng-content>\n    <ng-content select=\"[search]\" search></ng-content>\n    @if (isMobile()) {\n      <button\n        actions\n        type=\"button\"\n        class=\"ef-app-shell__menu\"\n        (click)=\"openSwitcher()\"\n        [attr.aria-label]=\"'modules.all' | translate\"\n      >\n        <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n      </button>\n    }\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]=\"'modules.all' | 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    <h2 class=\"ef-app-shell__sheet-title\">{{ 'modules.all' | 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  </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:Manrope,system-ui,sans-serif;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-family:Bricolage Grotesque,system-ui,sans-serif;font-variation-settings:\"opsz\" 96,\"wght\" 600,\"wdth\" 95;font-size:22px;letter-spacing:-.025em;margin:0 0 12px;color:var(--text)}.ef-app-shell__sheet-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap: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);color:var(--text);cursor:pointer;font-family:Manrope,system-ui,sans-serif;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}}\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: "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  <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  </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:Manrope,system-ui,sans-serif;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:Manrope,system-ui,sans-serif;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}\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,
@@ -5645,9 +5668,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         EfAppMainComponent,
                         EfBottomSheetComponent,
                         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  <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    <ng-content select=\"[breadcrumb]\" breadcrumb></ng-content>\n    <ng-content select=\"[search]\" search></ng-content>\n    @if (isMobile()) {\n      <button\n        actions\n        type=\"button\"\n        class=\"ef-app-shell__menu\"\n        (click)=\"openSwitcher()\"\n        [attr.aria-label]=\"'modules.all' | translate\"\n      >\n        <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n      </button>\n    }\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]=\"'modules.all' | 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    <h2 class=\"ef-app-shell__sheet-title\">{{ 'modules.all' | 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  </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:Manrope,system-ui,sans-serif;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-family:Bricolage Grotesque,system-ui,sans-serif;font-variation-settings:\"opsz\" 96,\"wght\" 600,\"wdth\" 95;font-size:22px;letter-spacing:-.025em;margin:0 0 12px;color:var(--text)}.ef-app-shell__sheet-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap: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);color:var(--text);cursor:pointer;font-family:Manrope,system-ui,sans-serif;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}}\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</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  </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:Manrope,system-ui,sans-serif;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:Manrope,system-ui,sans-serif;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}\n"] }]
         }], propDecorators: { stripe: [{
                 type: Input
             }] } });