@elasticias/ui 1.0.38 → 1.0.39

package/fesm2022/elasticias-ui.mjs

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