@yuuvis/client-shell 2.0.15 → 2.1.1

package/fesm2022/yuuvis-client-shell.mjs

@@ -1,65 +1,262 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, effect, Directive, HostListener, Component, ChangeDetectionStrategy, signal, computed, Injectable } from '@angular/core';
-import * as i1 from '@angular/common';
+import { inject, signal, Component, Injectable, ChangeDetectionStrategy, ElementRef, effect, HostListener, input, computed, TemplateRef, Directive, NgModule } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
+import * as i1$1 from '@yuuvis/client-core';
+import { DmsService, TranslateService, TranslateModule, SystemType, Utils, LocaleDatePipe, AuthService, UserService, DeviceService, SafeHtmlPipe, UserRoles } from '@yuuvis/client-core';
+import { AbstractContextAction, ACTION_ICON, SelectionRange } from '@yuuvis/client-framework/actions';
+import { ShellService, ShellNotificationsService, CommandPaletteService } from '@yuuvis/client-shell-core';
+import { switchMap, of, tap, filter, debounceTime } from 'rxjs';
+import * as i1$2 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
-import { toSignal } from '@angular/core/rxjs-interop';
-import * as i3 from '@angular/material/button';
+import * as i4 from '@angular/material/button';
 import { MatButtonModule, MatIconButton } from '@angular/material/button';
-import * as i2 from '@angular/material/icon';
+import * as i1 from '@angular/material/icon';
 import { MatIconModule, MatIconRegistry, MatIcon } from '@angular/material/icon';
+import * as i2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ConfirmService, BusyOverlayDirective, DialogComponent, LightDismissDirective } from '@yuuvis/client-framework/common';
+import * as i4$1 from '@yuuvis/client-framework/list';
+import { ListItemDirective, YuvListModule } from '@yuuvis/client-framework/list';
+import { FlavorChipComponent } from '@yuuvis/client-framework/object-flavor';
+import { YmtButtonDirective } from '@yuuvis/material';
+import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { MatProgressBar } from '@angular/material/progress-bar';
 import * as i2$1 from '@angular/router';
 import { Router, NavigationEnd, RouterModule } from '@angular/router';
 import { SwPush } from '@angular/service-worker';
-import * as i1$1 from '@yuuvis/client-core';
-import { Utils, LocaleDatePipe, TranslateModule, AuthService, UserService, TranslateService, DeviceService, SafeHtmlPipe, UserRoles, DmsService, SystemType } from '@yuuvis/client-core';
-import { ShellNotificationsService, ShellService, CommandPaletteService } from '@yuuvis/client-shell-core';
-import { of, switchMap as switchMap$1, tap as tap$1 } from 'rxjs';
-import { map, shareReplay, tap, filter, catchError, switchMap } from 'rxjs/operators';
-import { CdkTrapFocus } from '@angular/cdk/a11y';
-import { LightDismissDirective, ConfirmService, BusyOverlayDirective, DialogComponent } from '@yuuvis/client-framework/common';
-import { YUV_ICONS, YuvIconComponent } from '@yuuvis/client-framework/icons';
-import * as i4 from '@yuuvis/client-framework/list';
-import { YuvListModule, ListItemDirective } from '@yuuvis/client-framework/list';
+import * as i3 from '@yuuvis/client-framework/metadata-form-defaults';
+import { YuvMetadataFormDefaultsModule } from '@yuuvis/client-framework/metadata-form-defaults';
+import { map, shareReplay, tap as tap$1, filter as filter$1, catchError, switchMap as switchMap$1 } from 'rxjs/operators';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { MatListModule } from '@angular/material/list';
-import * as i1$2 from '@angular/material/sidenav';
+import * as i1$3 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i3$1 from '@yuuvis/client-framework/metadata-form-defaults';
-import { YuvMetadataFormDefaultsModule } from '@yuuvis/client-framework/metadata-form-defaults';
-import { MatProgressBar } from '@angular/material/progress-bar';
-import * as i4$1 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { YUV_ICONS, YuvIconComponent } from '@yuuvis/client-framework/icons';
 import { WidgetGridRegistry } from '@yuuvis/client-framework/widget-grid';
-import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
-import { AbstractContextAction, ACTION_ICON, SelectionRange } from '@yuuvis/client-framework/actions';
-import { FlavorChipComponent } from '@yuuvis/client-framework/object-flavor';
-import { YmtButtonDirective } from '@yuuvis/material';
 
-class InertDirective {
+class ManageFlavorsComponent {
     constructor() {
-        this.elRef = inject(ElementRef);
-        this.inert = input(false);
-        effect(() => {
-            const el = this.elRef.nativeElement;
-            if (this.inert())
-                el.setAttribute('inert', 'true');
-            else
-                el.removeAttribute('inert');
+        this.#shell = inject(ShellService);
+        this.#dmsService = inject(DmsService);
+        this.#dialogData = inject(MAT_DIALOG_DATA);
+        this.#dialogRef = inject((MatDialogRef));
+        this.item = this.#dialogData;
+        this.#confirm = inject(ConfirmService);
+        this.translate = inject(TranslateService);
+        this.busy = signal(false);
+        this.appliedFlavors = [];
+        this.applicableFlavors = [];
+    }
+    #shell;
+    #dmsService;
+    #dialogData;
+    #dialogRef;
+    #confirm;
+    applyFlavor(flavor) {
+        this.busy.set(true);
+        this.#shell.triggerApplyObjectFlavor(this.item, flavor).subscribe(() => {
+            this.#dialogRef.close();
+            this.busy.set(false);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: InertDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.12", type: InertDirective, isStandalone: true, selector: "[inert]", inputs: { inert: { classPropertyName: "inert", publicName: "inert", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    removeFlavor(flavor) {
+        this.busy.set(true);
+        this.#confirm
+            .confirm({
+            message: this.translate.instant('yuv.object-flavor.flavor.remove.confirm.message', {
+                flavor: this.#shell.getFlavorLabel(flavor.id)
+            })
+        })
+            .pipe(switchMap((confirmed) => (confirmed ? this.#shell.removeObjectFlavor(this.item, flavor) : of(undefined))))
+            .subscribe((res) => {
+            if (res !== undefined)
+                this.#dialogRef.close();
+            this.busy.set(false);
+        });
+    }
+    #refreshDmsObject() {
+        this.busy.set(true);
+        this.#dmsService
+            .getDmsObject(this.item.id)
+            .pipe(tap((dmsObject) => {
+            this.item = dmsObject;
+            this.#getAppliedFlavors(this.item);
+        }))
+            .subscribe()
+            .add(() => this.busy.set(false));
+    }
+    #getAppliedFlavors(dmsObject) {
+        const res = this.#shell.getAppliedObjectFlavors(dmsObject);
+        this.appliedFlavors = res.applied;
+        this.applicableFlavors = res.applicable;
+    }
+    cancel() {
+        this.#dialogRef.close();
+    }
+    ngOnInit() {
+        this.#refreshDmsObject();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ManageFlavorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: ManageFlavorsComponent, isStandalone: true, selector: "yuv-manage-flavors", ngImport: i0, template: "<yuv-dialog [headertitel]=\"'yuv.shell.action.manage-flavors.title' | translate\">\n  <main [yuvBusyOverlay]=\"busy()\">\n    <p>{{ 'yuv.shell.action.manage-flavors.text' | translate }}</p>\n    @if (appliedFlavors.length) {\n      <h3>{{ 'yuv.shell.action.manage-flavors.applied.headline' | translate }}</h3>\n      <ul>\n        @for (f of appliedFlavors; track $index) {\n          <li>\n            <yuv-flavor-chip [flavor]=\"f\" yuvListItem></yuv-flavor-chip>\n            <button mat-icon-button [matTooltip]=\"'yuv.shell.action.manage-flavors.applicable.button.remove.tooltip' | translate\" (click)=\"removeFlavor(f)\">\n              <mat-icon>delete_forever</mat-icon>\n            </button>\n          </li>\n        }\n      </ul>\n    }\n    @if (applicableFlavors.length) {\n      <h3>{{ 'yuv.shell.action.manage-flavors.applicable.headline' | translate }}</h3>\n      <ul>\n        @for (f of applicableFlavors; track $index) {\n          <li>\n            <yuv-flavor-chip [flavor]=\"f\" yuvListItem></yuv-flavor-chip>\n            <button mat-icon-button [matTooltip]=\"'yuv.shell.action.manage-flavors.applied.button.apply.tooltip' | translate\" (click)=\"applyFlavor(f)\">\n              <mat-icon>add</mat-icon>\n            </button>\n          </li>\n        }\n      </ul>\n    }\n  </main>\n  <footer>\n    <button  ymtButton=\"secondary\" (click)=\"cancel()\">{{ 'yuv.shell.action.manage-flavors.button.cancel' | translate }}</button>\n  </footer>\n</yuv-dialog>\n", styles: [":host main{display:flex;flex-flow:column;padding:var(--ymt-spacing-m);flex:1;overflow-y:auto}:host main yuv-flavor-chip{border-color:transparent;flex:1}:host main ul{padding:0;margin:0;list-style-type:none}:host main li{display:flex;gap:var(--ymt-spacing-xs);align-items:center;border:1px solid var(--ymt-outline-variant);margin-block-end:2px;padding:var(--ymt-spacing-2xs)}:host footer{flex:0 0 auto;margin-block-start:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "component", type: FlavorChipComponent, selector: "yuv-flavor-chip", inputs: ["flavor", "enableRemove", "enableDescription"], outputs: ["flavorRemove"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: InertDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ManageFlavorsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-manage-flavors', standalone: true, imports: [
+                        CommonModule,
+                        BusyOverlayDirective,
+                        MatIconModule,
+                        MatTooltipModule,
+                        TranslateModule,
+                        ListItemDirective,
+                        FlavorChipComponent,
+                        DialogComponent,
+                        MatButtonModule,
+                        YmtButtonDirective
+                    ], template: "<yuv-dialog [headertitel]=\"'yuv.shell.action.manage-flavors.title' | translate\">\n  <main [yuvBusyOverlay]=\"busy()\">\n    <p>{{ 'yuv.shell.action.manage-flavors.text' | translate }}</p>\n    @if (appliedFlavors.length) {\n      <h3>{{ 'yuv.shell.action.manage-flavors.applied.headline' | translate }}</h3>\n      <ul>\n        @for (f of appliedFlavors; track $index) {\n          <li>\n            <yuv-flavor-chip [flavor]=\"f\" yuvListItem></yuv-flavor-chip>\n            <button mat-icon-button [matTooltip]=\"'yuv.shell.action.manage-flavors.applicable.button.remove.tooltip' | translate\" (click)=\"removeFlavor(f)\">\n              <mat-icon>delete_forever</mat-icon>\n            </button>\n          </li>\n        }\n      </ul>\n    }\n    @if (applicableFlavors.length) {\n      <h3>{{ 'yuv.shell.action.manage-flavors.applicable.headline' | translate }}</h3>\n      <ul>\n        @for (f of applicableFlavors; track $index) {\n          <li>\n            <yuv-flavor-chip [flavor]=\"f\" yuvListItem></yuv-flavor-chip>\n            <button mat-icon-button [matTooltip]=\"'yuv.shell.action.manage-flavors.applied.button.apply.tooltip' | translate\" (click)=\"applyFlavor(f)\">\n              <mat-icon>add</mat-icon>\n            </button>\n          </li>\n        }\n      </ul>\n    }\n  </main>\n  <footer>\n    <button  ymtButton=\"secondary\" (click)=\"cancel()\">{{ 'yuv.shell.action.manage-flavors.button.cancel' | translate }}</button>\n  </footer>\n</yuv-dialog>\n", styles: [":host main{display:flex;flex-flow:column;padding:var(--ymt-spacing-m);flex:1;overflow-y:auto}:host main yuv-flavor-chip{border-color:transparent;flex:1}:host main ul{padding:0;margin:0;list-style-type:none}:host main li{display:flex;gap:var(--ymt-spacing-xs);align-items:center;border:1px solid var(--ymt-outline-variant);margin-block-end:2px;padding:var(--ymt-spacing-2xs)}:host footer{flex:0 0 auto;margin-block-start:var(--ymt-spacing-m)}\n"] }]
+        }] });
+
+class ManageFlavorsAction extends AbstractContextAction {
+    constructor() {
+        super(...arguments);
+        this.#shell = inject(ShellService);
+        this.#dialog = inject(MatDialog);
+        this.translate = inject(TranslateService);
+        this.id = 'yuv.base.manage-flavor';
+        this.label = this.translate.instant('yuv.shell.action.manage-flavor.label');
+        this.description = this.translate.instant('yuv.shell.action.manage-flavor.description');
+        this.priority = 8;
+        this.icon = ACTION_ICON.manageFlavor;
+        this.group = 'common';
+        this.range = SelectionRange.SINGLE_SELECT;
+        this.supports = {
+            types: [SystemType.DOCUMENT]
+        };
+    }
+    #shell;
+    #dialog;
+    isExecutable(items) {
+        const item = items[0];
+        if (!item)
+            return of(false);
+        const applicableFlavors = item.isFolder
+            ? this.#shell.getApplicableFolderFlavors()
+            : item.content
+                ? this.#shell.getApplicableDocumentFlavors(item.content.mimeType)
+                : [];
+        return of(item && !!item.permissions?.writeIndexData && applicableFlavors.length > 0);
+    }
+    run(items) {
+        this.#dialog.open(ManageFlavorsComponent, {
+            width: '400px',
+            maxWidth: '90vw',
+            data: items[0]
+        });
+        return of(true);
+    }
+}
+
+class ClientShellService {
+    #router;
+    #shell;
+    constructor() {
+        this.#router = inject(Router);
+        this.#shell = inject(ShellService);
+        this.appHeaderSlots = signal({});
+        this.apps = this.#shell.apps;
+        this.currentApp = signal(undefined);
+        this.appHeader = signal(false);
+        this.#router.events
+            .pipe(takeUntilDestroyed(), filter((e) => e instanceof NavigationEnd))
+            .subscribe((e) => {
+            this.#getAppFromUrl(this.#router.routerState.snapshot.url);
+        });
+    }
+    #getAppFromUrl(url) {
+        // remove request params
+        if (url.indexOf('?') !== -1)
+            url = url.substring(0, url.indexOf('?'));
+        // remove fragments
+        if (url.indexOf('#') !== -1)
+            url = url.substring(0, url.indexOf('#'));
+        const urlTokens = url.split('/').filter((t) => !!t);
+        // TODO: what about context path
+        const appPath = urlTokens[0];
+        if (this.currentApp()?.path !== appPath) {
+            const app = this.apps().find((a) => a.path === appPath);
+            this.currentApp.set(app);
+            const appData = app?.options;
+            this.appHeader.set(!!appData?.appHeader);
+            this.appHeaderSlots.set({});
+        }
+    }
+    addAppHeaderSlot(slot, tpl) {
+        this.appHeaderSlots.update((curr) => ({ ...curr, [slot]: tpl }));
+    }
+    getCssVars(vars) {
+        // const vars = ['--ymt-spacing-m'];
+        const style = window.getComputedStyle(document.getElementsByTagName('body')[0]);
+        return vars.reduce((prev, curr) => ({ ...prev, [curr]: style.getPropertyValue(curr) }), {});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ClientShellService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ClientShellService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ClientShellService, decorators: [{
+            type: Injectable,
             args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: '[inert]',
-                    standalone: true
+                    providedIn: 'root'
                 }]
         }], ctorParameters: () => [] });
 
+class ShellLogoComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ShellLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.12", type: ShellLogoComponent, isStandalone: true, selector: "yuv-shell-logo", ngImport: i0, template: "<button  routerLink=\"/\" [attr.aria-label]=\"'yuv.shell.logo.aria.label' | translate\">\n    <mat-icon svgIcon=\"shellIcons:app_logo\"></mat-icon>\n</button>", styles: [":host button{width:var(--yuv-app-header-height);height:var(--yuv-app-header-height);border-radius:0;background-color:transparent;border:0;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ShellLogoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-shell-logo', standalone: true, imports: [CommonModule, MatIconModule, TranslateModule], template: "<button  routerLink=\"/\" [attr.aria-label]=\"'yuv.shell.logo.aria.label' | translate\">\n    <mat-icon svgIcon=\"shellIcons:app_logo\"></mat-icon>\n</button>", styles: [":host button{width:var(--yuv-app-header-height);height:var(--yuv-app-header-height);border-radius:0;background-color:transparent;border:0;display:flex;justify-content:center;align-items:center}\n"] }]
+        }] });
+
+class YuvAppHeaderComponent {
+    #clientShellService;
+    #slots;
+    constructor() {
+        this.#clientShellService = inject(ClientShellService);
+        this.actionsSlot = null;
+        this.searchSlot = null;
+        this.notificationsSlot = null;
+        this.app = this.#clientShellService.currentApp;
+        this.#slots = this.#clientShellService.appHeaderSlots;
+        toObservable(this.#slots)
+            .pipe(debounceTime(1), takeUntilDestroyed())
+            .subscribe((slots) => {
+            this.actionsSlot = slots['actions'] || null;
+            this.searchSlot = slots['search'] || null;
+            this.notificationsSlot = slots['notifications'] || null;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvAppHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: YuvAppHeaderComponent, isStandalone: true, selector: "yuv-app-header", ngImport: i0, template: "@let a = app();\n\n@if (a) {\n  <yuv-shell-logo />\n  <div class=\"name\" routerLink=\".\">\n    <div class=\"title\">{{ a.title }}</div>\n    <div class=\"claim\">{{ a.options?.appClaim }}</div>\n  </div>\n  <div class=\"actions\">\n    <ng-container *ngTemplateOutlet=\"actionsSlot\"></ng-container>\n  </div>\n  <div class=\"search\">\n    <ng-container *ngTemplateOutlet=\"searchSlot\"></ng-container>\n  </div>\n  <div class=\"notifications\">\n    <ng-container *ngTemplateOutlet=\"notificationsSlot\"></ng-container>\n  </div>\n}\n", styles: [":host{display:grid;grid-template-columns:var(--yuv-app-header-height) auto 1fr auto auto;grid-template-rows:var(--yuv-app-header-height);grid-template-areas:\"logo name actions search notifications\";align-items:center;background-color:var(--ymt-surface);color:var(--ymt-on-surface);border-block-end:1px solid var(--ymt-outline-variant);box-sizing:border-box;padding-inline-end:var(--ymt-spacing-xl)}:host .logo{grid-area:logo;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .name{grid-area:name;padding-inline-end:var(--ymt-spacing-3xl);padding-inline-start:var(--ymt-spacing-xs)}:host .name .title{font-weight:700}:host .name .claim{font:var(--ymt-font-body-font);color:var(--ymt-text-color-subtle);font-size:var(--ymt-font-body-subtle-size)}:host .actions{grid-area:actions}:host .search{grid-area:search}:host .notifications{grid-area:notifications}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: ShellLogoComponent, selector: "yuv-shell-logo" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvAppHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-app-header', imports: [CommonModule, MatIconModule, ShellLogoComponent, RouterModule], template: "@let a = app();\n\n@if (a) {\n  <yuv-shell-logo />\n  <div class=\"name\" routerLink=\".\">\n    <div class=\"title\">{{ a.title }}</div>\n    <div class=\"claim\">{{ a.options?.appClaim }}</div>\n  </div>\n  <div class=\"actions\">\n    <ng-container *ngTemplateOutlet=\"actionsSlot\"></ng-container>\n  </div>\n  <div class=\"search\">\n    <ng-container *ngTemplateOutlet=\"searchSlot\"></ng-container>\n  </div>\n  <div class=\"notifications\">\n    <ng-container *ngTemplateOutlet=\"notificationsSlot\"></ng-container>\n  </div>\n}\n", styles: [":host{display:grid;grid-template-columns:var(--yuv-app-header-height) auto 1fr auto auto;grid-template-rows:var(--yuv-app-header-height);grid-template-areas:\"logo name actions search notifications\";align-items:center;background-color:var(--ymt-surface);color:var(--ymt-on-surface);border-block-end:1px solid var(--ymt-outline-variant);box-sizing:border-box;padding-inline-end:var(--ymt-spacing-xl)}:host .logo{grid-area:logo;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .name{grid-area:name;padding-inline-end:var(--ymt-spacing-3xl);padding-inline-start:var(--ymt-spacing-xs)}:host .name .title{font-weight:700}:host .name .claim{font:var(--ymt-font-body-font);color:var(--ymt-text-color-subtle);font-size:var(--ymt-font-body-subtle-size)}:host .actions{grid-area:actions}:host .search{grid-area:search}:host .notifications{grid-area:notifications}\n"] }]
+        }], ctorParameters: () => [] });
+
+class SidebarNavComponent {
+    constructor() {
+        this.breakpointObserver = inject(BreakpointObserver);
+        this.isHandset$ = this.breakpointObserver.observe(Breakpoints.Handset).pipe(map((result) => result.matches), shareReplay());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: SidebarNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.12", type: SidebarNavComponent, isStandalone: true, selector: "yuv-sidebar-nav", ngImport: i0, template: "<mat-sidenav-container class=\"sidenav-container\">\n  <mat-sidenav class=\"sidenav\"\n                 attr.role=\"navigation\"\n                 mode=\"side\"\n                 opened>\n    <div class=\"sidenav-content\">\n      <div class=\"app-logo\">\n        <ng-content select=\"yuv-shell-logo\"></ng-content>\n      </div>\n      <div class=\"nav-list\">\n          <ng-content select=\".shell-nav__nav-list\"></ng-content>\n      </div>\n      <div class=\"actions\">\n        <ng-content select=\".shell-nav__actions\"></ng-content>\n      </div>\n    </div>\n  </mat-sidenav>\n  <mat-sidenav-content></mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{--mat-sidenav-container-shape: none}:host{--mat-sidenav-container-width: var(--yuv-navigation-rail-width)}:host{--mat-sidenav-container-divider-color: var(--ymt-outline-variant)}:host{--mat-sidenav-container-background-color: transparent}:host{--mat-sidenav-content-background-color: transparent}:host{--mat-sidenav-container-text-color: var(--ymt-on-surface)}.sidenav-container{height:100%;width:var(--yuv-navigation-rail-width)}.sidenav-container .sidenav .sidenav-content{height:100%;display:flex;flex-flow:column nowrap;justify-content:flex-start;gap:var(--ymt-spacing-2xs)}.sidenav-container .sidenav .sidenav-content .nav-list{flex:1 0 auto;display:flex;flex-flow:column nowrap;align-items:center;gap:var(--ymt-spacing-2xs)}.sidenav-container .sidenav .sidenav-content .actions{flex:0 0 auto;display:flex;flex-flow:column nowrap;align-items:center;margin-bottom:8px;gap:var(--ymt-spacing-2xs)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container{width:100%;height:var(--yuv-navigation-rail-width)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav{width:100%;border:none;border-top:1px solid var(--ymt-outline-variant)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content{flex-flow:row nowrap;height:calc(var(--yuv-navigation-rail-width) - 1px);margin-block-start:0;overflow-y:hidden}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .app-logo{height:100%;width:auto;aspect-ratio:1/1;margin-bottom:0;margin-right:8px}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .nav-list{flex-flow:row nowrap;height:auto}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .actions{flex-flow:row nowrap;margin-bottom:0;margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$3.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$3.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$3.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatIconModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: SidebarNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-sidebar-nav', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, MatToolbarModule, MatButtonModule, MatSidenavModule, MatListModule, MatIconModule], template: "<mat-sidenav-container class=\"sidenav-container\">\n  <mat-sidenav class=\"sidenav\"\n                 attr.role=\"navigation\"\n                 mode=\"side\"\n                 opened>\n    <div class=\"sidenav-content\">\n      <div class=\"app-logo\">\n        <ng-content select=\"yuv-shell-logo\"></ng-content>\n      </div>\n      <div class=\"nav-list\">\n          <ng-content select=\".shell-nav__nav-list\"></ng-content>\n      </div>\n      <div class=\"actions\">\n        <ng-content select=\".shell-nav__actions\"></ng-content>\n      </div>\n    </div>\n  </mat-sidenav>\n  <mat-sidenav-content></mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{--mat-sidenav-container-shape: none}:host{--mat-sidenav-container-width: var(--yuv-navigation-rail-width)}:host{--mat-sidenav-container-divider-color: var(--ymt-outline-variant)}:host{--mat-sidenav-container-background-color: transparent}:host{--mat-sidenav-content-background-color: transparent}:host{--mat-sidenav-container-text-color: var(--ymt-on-surface)}.sidenav-container{height:100%;width:var(--yuv-navigation-rail-width)}.sidenav-container .sidenav .sidenav-content{height:100%;display:flex;flex-flow:column nowrap;justify-content:flex-start;gap:var(--ymt-spacing-2xs)}.sidenav-container .sidenav .sidenav-content .nav-list{flex:1 0 auto;display:flex;flex-flow:column nowrap;align-items:center;gap:var(--ymt-spacing-2xs)}.sidenav-container .sidenav .sidenav-content .actions{flex:0 0 auto;display:flex;flex-flow:column nowrap;align-items:center;margin-bottom:8px;gap:var(--ymt-spacing-2xs)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container{width:100%;height:var(--yuv-navigation-rail-width)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav{width:100%;border:none;border-top:1px solid var(--ymt-outline-variant)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content{flex-flow:row nowrap;height:calc(var(--yuv-navigation-rail-width) - 1px);margin-block-start:0;overflow-y:hidden}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .app-logo{height:100%;width:auto;aspect-ratio:1/1;margin-bottom:0;margin-right:8px}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .nav-list{flex-flow:row nowrap;height:auto}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .actions{flex-flow:row nowrap;margin-bottom:0;margin-right:8px}\n"] }]
+        }] });
+
 class NotificationsPageComponent {
     constructor() {
         this.router = inject(Router);
@@ -115,7 +312,7 @@ class NotificationsPageComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: NotificationsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: NotificationsPageComponent, isStandalone: true, selector: "yuv-notifications", host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div class=\"notifications\" (yuvLightDismiss)=\"close()\" cdkTrapFocus>\n  <h2>{{ 'yuv.shell.notifications.title' | translate }}</h2>\n\n  @if (notifications()?.length) {\n    <yuv-list (itemSelect)=\"itemSelected($event)\" (itemFocus)=\"itemFocused($event)\">\n      @for (n of notifications(); track n.id) {\n        <div class=\"note {{ n.level }}\" [ngClass]=\"{ withRoute: n.targetRoute }\" yuvListItem>\n          <div class=\"icon\"><yuv-icon [svg]=\"n.icon || icons.note\"></yuv-icon></div>\n          <div class=\"received\">{{ n.timestamp | localeDate }}</div>\n          <div class=\"title\">{{ n.title }}</div>\n          <div class=\"description\">{{ n.description }}</div>\n          <div class=\"meta\"></div>\n\n          <div class=\"actions\">\n            <button mat-icon-button (click)=\"remove(n.id)\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      }\n    </yuv-list>\n\n    <div class=\"actions\">\n      <button mat-icon-button [hidden]=\"!notifications()?.length\" class=\"icon secondary\" (click)=\"removeAll()\">\n        {{ 'yuv.shell.notifications.button.remove.all' | translate }}<mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  } @else {\n    <div class=\"empty\">\n      <p>{{ 'yuv.shell.notifications.empty' | translate }}</p>\n    </div>\n  }\n\n  <button mat-icon-button class=\"icon close\" (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n", styles: [":host{height:100%;display:flex}:host .notifications{background-color:var(--ymt-surface-panel);border-inline-end:1px solid var(--ymt-outline-variant);height:100%;overflow:hidden;box-sizing:border-box;padding:var(--ymt-spacing-m);display:grid;grid-template-rows:auto auto 1fr;grid-template-columns:1fr auto;grid-template-areas:\"title close\" \"actions actions\" \"list list\";gap:var(--ymt-spacing-m);max-width:30vw;min-width:300px;box-shadow:8px 0 8px #0000001a;animation:dialogAppear .2s ease-in-out}:host .notifications h2{color:var(--ymt-text-color-subtle);grid-area:title;margin:0;padding:0;align-self:center;text-overflow:ellipsis;overflow:hidden}:host .notifications .actions{grid-area:actions;display:flex;justify-content:end;--icon-size: 18px}:host .notifications .actions button{border-radius:.4em}:host .notifications .close{grid-area:close;--icon-size: 18px}:host .notifications yuv-list,:host .notifications .empty{grid-area:list}:host .notifications .empty{display:grid;align-items:center;justify-content:center;color:var(--ymt-text-color-subtle)}:host .notifications .note{--level-color: transparent;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:auto 1fr auto;grid-template-areas:\"icon received actions\" \"icon title title\" \"icon description description\" \"icon meta meta\";row-gap:var(--ymt-spacing-2xs);column-gap:var(--ymt-spacing-xs);align-items:center;padding:var(--ymt-spacing-xs);padding-inline-start:var(--ymt-spacing-m);margin-block-end:var(--ymt-spacing-xs);background-color:var(--ymt-surface-panel);outline:1px solid var(--ymt-outline-variant);outline-offset:-1px;position:relative;cursor:default}:host .notifications .note.withRoute{cursor:pointer}:host .notifications .note:before{content:\"\";width:4px;position:absolute;left:2px;top:2px;bottom:2px;border-radius:2px;background-color:var(--level-color)}:host .notifications .note.alert{--level-color: var(--ymt-danger)}:host .notifications .note.warning{--level-color: var(--ymt-warning)}:host .notifications .note.success{--level-color: var(--ymt-success)}:host .notifications .note:hover,:host .notifications .note[aria-current=true]{background-color:var(--ymt-focus-background)}:host .notifications .note:hover button,:host .notifications .note[aria-current=true] button{opacity:1}:host .notifications .note .icon{grid-area:icon;color:var(--ymt-text-color-subtle)}:host .notifications .note .title{overflow:hidden;text-overflow:ellipsis;font-weight:700;grid-area:title;color:var(--ymt-text-color)}:host .notifications .note .description{grid-area:description;overflow:hidden;text-overflow:ellipsis}:host .notifications .note .meta{grid-area:meta}:host .notifications .note .received{grid-area:received;color:var(--ymt-text-color-subtle)}:host .notifications .note button{grid-area:actions;padding:0;opacity:0}@keyframes dialogAppear{0%{opacity:0;transform:translate(calc(var(--ymt-spacing-m) * -1))}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: LightDismissDirective, selector: "[yuvLightDismiss]", outputs: ["yuvLightDismiss"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }, { kind: "component", type: YuvIconComponent, selector: "yuv-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i4.ListComponent, selector: "yuv-list", inputs: ["multiselect", "selfHandleSelection", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: i4.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: NotificationsPageComponent, isStandalone: true, selector: "yuv-notifications", host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div class=\"notifications\" (yuvLightDismiss)=\"close()\" cdkTrapFocus>\n  <h2>{{ 'yuv.shell.notifications.title' | translate }}</h2>\n\n  @if (notifications()?.length) {\n    <yuv-list (itemSelect)=\"itemSelected($event)\" (itemFocus)=\"itemFocused($event)\">\n      @for (n of notifications(); track n.id) {\n        <div class=\"note {{ n.level }}\" [ngClass]=\"{ withRoute: n.targetRoute }\" yuvListItem>\n          <div class=\"icon\"><yuv-icon [svg]=\"n.icon || icons.note\"></yuv-icon></div>\n          <div class=\"received\">{{ n.timestamp | localeDate }}</div>\n          <div class=\"title\">{{ n.title }}</div>\n          <div class=\"description\">{{ n.description }}</div>\n          <div class=\"meta\"></div>\n\n          <div class=\"actions\">\n            <button mat-icon-button (click)=\"remove(n.id)\">\n              <mat-icon>delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      }\n    </yuv-list>\n\n    <div class=\"actions\">\n      <button mat-icon-button [hidden]=\"!notifications()?.length\" class=\"icon secondary\" (click)=\"removeAll()\">\n        {{ 'yuv.shell.notifications.button.remove.all' | translate }}<mat-icon>delete</mat-icon>\n      </button>\n    </div>\n  } @else {\n    <div class=\"empty\">\n      <p>{{ 'yuv.shell.notifications.empty' | translate }}</p>\n    </div>\n  }\n\n  <button mat-icon-button class=\"icon close\" (click)=\"close()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n", styles: [":host{height:100%;display:flex}:host .notifications{background-color:var(--ymt-surface-panel);border-inline-end:1px solid var(--ymt-outline-variant);height:100%;overflow:hidden;box-sizing:border-box;padding:var(--ymt-spacing-m);display:grid;grid-template-rows:auto auto 1fr;grid-template-columns:1fr auto;grid-template-areas:\"title close\" \"actions actions\" \"list list\";gap:var(--ymt-spacing-m);max-width:30vw;min-width:300px;box-shadow:8px 0 8px #0000001a;animation:dialogAppear .2s ease-in-out}:host .notifications h2{color:var(--ymt-text-color-subtle);grid-area:title;margin:0;padding:0;align-self:center;text-overflow:ellipsis;overflow:hidden}:host .notifications .actions{grid-area:actions;display:flex;justify-content:end;--icon-size: 18px}:host .notifications .actions button{border-radius:.4em}:host .notifications .close{grid-area:close;--icon-size: 18px}:host .notifications yuv-list,:host .notifications .empty{grid-area:list}:host .notifications .empty{display:grid;align-items:center;justify-content:center;color:var(--ymt-text-color-subtle)}:host .notifications .note{--level-color: transparent;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:auto 1fr auto;grid-template-areas:\"icon received actions\" \"icon title title\" \"icon description description\" \"icon meta meta\";row-gap:var(--ymt-spacing-2xs);column-gap:var(--ymt-spacing-xs);align-items:center;padding:var(--ymt-spacing-xs);padding-inline-start:var(--ymt-spacing-m);margin-block-end:var(--ymt-spacing-xs);background-color:var(--ymt-surface-panel);outline:1px solid var(--ymt-outline-variant);outline-offset:-1px;position:relative;cursor:default}:host .notifications .note.withRoute{cursor:pointer}:host .notifications .note:before{content:\"\";width:4px;position:absolute;left:2px;top:2px;bottom:2px;border-radius:2px;background-color:var(--level-color)}:host .notifications .note.alert{--level-color: var(--ymt-danger)}:host .notifications .note.warning{--level-color: var(--ymt-warning)}:host .notifications .note.success{--level-color: var(--ymt-success)}:host .notifications .note:hover,:host .notifications .note[aria-current=true]{background-color:var(--ymt-focus-background)}:host .notifications .note:hover button,:host .notifications .note[aria-current=true] button{opacity:1}:host .notifications .note .icon{grid-area:icon;color:var(--ymt-text-color-subtle)}:host .notifications .note .title{overflow:hidden;text-overflow:ellipsis;font-weight:700;grid-area:title;color:var(--ymt-text-color)}:host .notifications .note .description{grid-area:description;overflow:hidden;text-overflow:ellipsis}:host .notifications .note .meta{grid-area:meta}:host .notifications .note .received{grid-area:received;color:var(--ymt-text-color-subtle)}:host .notifications .note button{grid-area:actions;padding:0;opacity:0}@keyframes dialogAppear{0%{opacity:0;transform:translate(calc(var(--ymt-spacing-m) * -1))}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: LightDismissDirective, selector: "[yuvLightDismiss]", outputs: ["yuvLightDismiss"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }, { kind: "component", type: YuvIconComponent, selector: "yuv-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i4$1.ListComponent, selector: "yuv-list", inputs: ["multiselect", "selfHandleSelection", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: i4$1.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: NotificationsPageComponent, decorators: [{
             type: Component,
@@ -138,26 +335,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
 const clientShellRoutes = [
     { path: 'dashboard', loadComponent: () => import('./yuuvis-client-shell-dashboard.component-akNayAfe.mjs').then((comp) => comp.DashboardPageComponent) },
     { path: 'notifications', component: NotificationsPageComponent, outlet: 'aside' },
-    { path: 'settings', loadComponent: () => import('./yuuvis-client-shell-settings.component-Dyr0I9Gx.mjs').then((comp) => comp.SettingsPageComponent) },
+    { path: 'settings', loadComponent: () => import('./yuuvis-client-shell-settings.component-ANbgn9LN.mjs').then((comp) => comp.SettingsPageComponent) },
     // default route
     { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
     // redirecting route
     { path: '**', redirectTo: '/' }
 ];
 
-class SidebarNavComponent {
-    constructor() {
-        this.breakpointObserver = inject(BreakpointObserver);
-        this.isHandset$ = this.breakpointObserver.observe(Breakpoints.Handset).pipe(map((result) => result.matches), shareReplay());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: SidebarNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.12", type: SidebarNavComponent, isStandalone: true, selector: "yuv-sidebar-nav", ngImport: i0, template: "<mat-sidenav-container class=\"sidenav-container\">\n  <mat-sidenav class=\"sidenav\"\n                 attr.role=\"navigation\"\n                 mode=\"side\"\n                 opened>\n    <div class=\"sidenav-content\">\n      <div class=\"app-logo\">\n        <ng-content select=\".shell-nav__shell-logo-button\"></ng-content>\n      </div>\n      <div class=\"nav-list\">\n          <ng-content select=\".shell-nav__nav-list\"></ng-content>\n      </div>\n      <div class=\"actions\">\n        <ng-content select=\".shell-nav__actions\"></ng-content>\n      </div>\n    </div>\n  </mat-sidenav>\n  <mat-sidenav-content></mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{--mat-sidenav-container-shape: none}:host{--mat-sidenav-container-width: calc(24px + var(--ymt-spacing-s) + 1px + 16px)}:host{--mat-sidenav-container-divider-color: var(--ymt-outline-variant)}:host{--mat-sidenav-container-background-color: transparent}:host{--mat-sidenav-content-background-color: transparent}:host{--mat-sidenav-container-text-color: var(--ymt-on-surface)}.sidenav-container{height:100%;width:calc(24px + var(--ymt-spacing-s) + 1px + 16px)}.sidenav-container .sidenav .sidenav-content{height:100%;display:flex;flex-flow:column nowrap;justify-content:flex-start;gap:var(--ymt-spacing-2xs)}.sidenav-container .sidenav .sidenav-content .app-logo{height:30px;width:100%;flex:0 0 auto;background-color:var(--ymt-brand);margin-bottom:8px}.sidenav-container .sidenav .sidenav-content .nav-list{flex:1 0 auto;display:flex;flex-flow:column nowrap;align-items:center;gap:var(--ymt-spacing-2xs)}.sidenav-container .sidenav .sidenav-content .actions{flex:0 0 auto;display:flex;flex-flow:column nowrap;align-items:center;margin-bottom:8px;gap:var(--ymt-spacing-2xs)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container{width:100%;height:calc(24px + var(--ymt-spacing-s) + 1px + 16px)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav{width:100%;border:none;border-top:1px solid var(--ymt-outline-variant)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content{flex-flow:row nowrap;height:calc(calc(24px + var(--ymt-spacing-s) + 1px + 16px) - 1px);margin-block-start:0;overflow-y:hidden}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .app-logo{height:100%;width:auto;aspect-ratio:1/1;margin-bottom:0;margin-right:8px}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .nav-list{flex-flow:row nowrap;height:auto}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .actions{flex-flow:row nowrap;margin-bottom:0;margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$2.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatIconModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: SidebarNavComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-sidebar-nav', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, MatToolbarModule, MatButtonModule, MatSidenavModule, MatListModule, MatIconModule], template: "<mat-sidenav-container class=\"sidenav-container\">\n  <mat-sidenav class=\"sidenav\"\n                 attr.role=\"navigation\"\n                 mode=\"side\"\n                 opened>\n    <div class=\"sidenav-content\">\n      <div class=\"app-logo\">\n        <ng-content select=\".shell-nav__shell-logo-button\"></ng-content>\n      </div>\n      <div class=\"nav-list\">\n          <ng-content select=\".shell-nav__nav-list\"></ng-content>\n      </div>\n      <div class=\"actions\">\n        <ng-content select=\".shell-nav__actions\"></ng-content>\n      </div>\n    </div>\n  </mat-sidenav>\n  <mat-sidenav-content></mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{--mat-sidenav-container-shape: none}:host{--mat-sidenav-container-width: calc(24px + var(--ymt-spacing-s) + 1px + 16px)}:host{--mat-sidenav-container-divider-color: var(--ymt-outline-variant)}:host{--mat-sidenav-container-background-color: transparent}:host{--mat-sidenav-content-background-color: transparent}:host{--mat-sidenav-container-text-color: var(--ymt-on-surface)}.sidenav-container{height:100%;width:calc(24px + var(--ymt-spacing-s) + 1px + 16px)}.sidenav-container .sidenav .sidenav-content{height:100%;display:flex;flex-flow:column nowrap;justify-content:flex-start;gap:var(--ymt-spacing-2xs)}.sidenav-container .sidenav .sidenav-content .app-logo{height:30px;width:100%;flex:0 0 auto;background-color:var(--ymt-brand);margin-bottom:8px}.sidenav-container .sidenav .sidenav-content .nav-list{flex:1 0 auto;display:flex;flex-flow:column nowrap;align-items:center;gap:var(--ymt-spacing-2xs)}.sidenav-container .sidenav .sidenav-content .actions{flex:0 0 auto;display:flex;flex-flow:column nowrap;align-items:center;margin-bottom:8px;gap:var(--ymt-spacing-2xs)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container{width:100%;height:calc(24px + var(--ymt-spacing-s) + 1px + 16px)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav{width:100%;border:none;border-top:1px solid var(--ymt-outline-variant)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content{flex-flow:row nowrap;height:calc(calc(24px + var(--ymt-spacing-s) + 1px + 16px) - 1px);margin-block-start:0;overflow-y:hidden}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .app-logo{height:100%;width:auto;aspect-ratio:1/1;margin-bottom:0;margin-right:8px}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .nav-list{flex-flow:row nowrap;height:auto}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .actions{flex-flow:row nowrap;margin-bottom:0;margin-right:8px}\n"] }]
-        }] });
-
 /**
  * Base component for the client shell application. In your apps
  * app.component.ts you can use this component as a base component
@@ -197,6 +381,7 @@ class ClientShellComponent {
         this.auth = inject(AuthService);
         this.userService = inject(UserService);
         this.#shell = inject(ShellService);
+        this.css = inject(ClientShellService);
         this.shellNotifications = inject(ShellNotificationsService);
         this.translate = inject(TranslateService);
         this.commandPalette = inject(CommandPaletteService);
@@ -214,14 +399,15 @@ class ClientShellComponent {
         this.showUploadOverlay = false;
         this.busy$ = this.#shell.isBusy$;
         this.showNotifications = signal(false);
-        this.newNotifications = toSignal(this.shellNotifications.shellNotifications$.pipe(tap((n) => this.showNotifications.set(n.length > 0)), map((notifications) => {
+        this.newNotifications = toSignal(this.shellNotifications.shellNotifications$.pipe(tap$1((n) => this.showNotifications.set(n.length > 0)), map((notifications) => {
             let maxLevel = 'info';
             const count = notifications.filter((n) => !n.seen).length;
             notifications.forEach((n) => (maxLevel = n.level && this._levels[n.level] > this._levels[maxLevel] ? n.level : maxLevel));
             return count > 0 ? { maxLevel, count } : undefined;
         })));
         this.apps = input.required();
-        this.#appsEffect = effect(() => this.#shell.setAppBaseRoutes(this.apps()));
+        this.navApps = computed(() => this.apps().filter(a => !a.options?.hideFromNav));
+        this.#appsEffect = effect(() => this.#shell.setApps(this.apps()));
         this.checkedForInitialRoute = false;
         this.enableTenantSwitch = false;
         this.config = input();
@@ -255,7 +441,7 @@ class ClientShellComponent {
         //   console.log(e);
         // });
         this.router.events
-            .pipe(filter((e) => e instanceof NavigationEnd), map((e) => e))
+            .pipe(filter$1((e) => e instanceof NavigationEnd), map((e) => e))
             .subscribe((e) => this._processRouterNavigationEnd(e));
         this.#device.init();
         this.userService.user$.subscribe((user) => {
@@ -312,7 +498,7 @@ class ClientShellComponent {
             return;
         }
         this.#swPush.messages
-            .pipe(tap((msg) => console.log({ msg })), catchError((error) => {
+            .pipe(tap$1((msg) => console.log({ msg })), catchError((error) => {
             console.log({ error });
             return of(null);
         }))
@@ -336,7 +522,7 @@ class ClientShellComponent {
                 // get persisted routes to decide where to redirect the logged in user to
                 this.auth
                     .getInitialRequestUri()
-                    .pipe(switchMap((res) => this.auth.resetInitialRequestUri().pipe(map((_) => res))))
+                    .pipe(switchMap$1((res) => this.auth.resetInitialRequestUri().pipe(map((_) => res))))
                     .subscribe((res) => {
                     const loginRes = res && !ignoreRoutes.includes(res.uri) ? res : null;
                     if (loginRes)
@@ -358,7 +544,7 @@ class ClientShellComponent {
         this.requestSubscription();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ClientShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: ClientShellComponent, isStandalone: true, selector: "yuv-client-shell", inputs: { apps: { classPropertyName: "apps", publicName: "apps", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:focusin": "onFocusChange($event)", "dragover": "onDragOver($event)" } }, providers: [SafeHtmlPipe], ngImport: i0, template: "<yuv-metadata-default-templates></yuv-metadata-default-templates>\n\n<!-- gloabl busy indicator -->\n@if (busy$ | async) {\n  <mat-progress-bar\n    mode=\"indeterminate\"\n    class=\"progress-bar\"\n  ></mat-progress-bar>\n}\n\n@let iconsRegistered = registerIcons();\n\n<yuv-sidebar-nav class=\"shell-nav\">\n  <button class=\"shell-nav__shell-logo-button\" routerLink=\"/\" routerLinkActive=\"active\" [attr.aria-label]=\"'yuv.shell.logo.aria.label' | translate\">\n    @if (iconsRegistered) {\n      <mat-icon svgIcon=\"shellIcons:app_logo\"></mat-icon>\n    }\n  </button>\n  <ul class=\"shell-nav__nav-list\">\n    @for (a of apps(); track a.path) {\n      <li class=\"shell-nav__nav-list-item\">\n        <button class=\"shell-nav__nav-list-item-button\" mat-icon-button routerLinkActive=\"active\" [routerLink]=\"a.path\" \n        matTooltipPosition=\"after\"\n        [matTooltip]=\"getAppTitle(a)\">\n          @if (a.svgIcon) {\n            @if (iconsRegistered) {\n              <mat-icon [svgIcon]=\"'shellIcons:' + a.iconName\"></mat-icon>\n            }\n          } @else {\n            <mat-icon>{{ a.iconName }}</mat-icon>\n          }\n          <!--@if (getNotifications(a.id)) {\n            <div [ngClass]=\"'badge ' + getNotifications(a.id).maxLevel\">{{ getNotifications(a.id).count }}</div>\n          }-->\n        </button>\n      </li>\n    }\n  </ul>\n  <section class=\"shell-nav__actions\">\n    @if (showNotifications()) {\n      <button\n        class=\"shell-nav__actions-button\"\n        mat-icon-button\n        [routerLink]=\"[{ outlets: { aside: 'notifications' } }]\"\n        routerLinkActive=\"active\"\n        matTooltipPosition=\"after\"\n        [matTooltip]=\"'yuv.shell.notifications.title' | translate\"\n      >\n        <mat-icon>notifications</mat-icon>\n        @if (newNotifications(); as note) {\n          <div class=\"badge {{ note.maxLevel }}\">{{ note.count }}</div>\n        }\n      </button>\n    }\n    <button\n      class=\"shell-nav__actions-button\"\n      mat-icon-button\n      [routerLink]=\"['/settings']\"\n      routerLinkActive=\"active\"\n      [matTooltip]=\"'yuv.shell.settings.title' | translate\"\n    >\n      <mat-icon>settings</mat-icon>\n    </button>\n    <button class=\"shell-nav__actions-button\" mat-icon-button (click)=\"appLogout()\" [matTooltip]=\"'yuv.shell.cmd.logout' | translate\">\n      <mat-icon>power_settings_new</mat-icon>\n    </button>\n  </section>\n</yuv-sidebar-nav>\n\n<main id=\"main-shell_content\" aria-label=\"main shell content\" [inert]=\"asideOutlet.isActivated\">\n  <router-outlet></router-outlet>\n</main>\n\n<!-- outlet for aside modals like notifications -->\n<div class=\"asideOutlet\" [hidden]=\"!asideOutlet.isActivated\">\n  <router-outlet name=\"aside\" #asideOutlet=\"outlet\"></router-outlet>\n</div>\n\n<div id=\"fi\" inert></div>\n", styles: [":host{--mat-sidenav-container-shape: none}:host{--mat-sidenav-container-width: calc(24px + var(--ymt-spacing-s) + 1px + 16px)}:host{--mat-sidenav-container-divider-color: var(--ymt-outline-variant)}:host{--mat-sidenav-container-background-color: transparent}:host{--mat-sidenav-content-background-color: transparent}:host{--mat-sidenav-container-text-color: var(--ymt-on-surface)}.sidenav-container{height:100%;width:calc(24px + var(--ymt-spacing-s) + 1px + 16px)}.sidenav-container .sidenav .sidenav-content{height:100%;display:flex;flex-flow:column nowrap;justify-content:flex-start;gap:var(--ymt-spacing-2xs)}.sidenav-container .sidenav .sidenav-content .app-logo{height:30px;width:100%;flex:0 0 auto;background-color:var(--ymt-brand);margin-bottom:8px}.sidenav-container .sidenav .sidenav-content .nav-list{flex:1 0 auto;display:flex;flex-flow:column nowrap;align-items:center;gap:var(--ymt-spacing-2xs)}.sidenav-container .sidenav .sidenav-content .actions{flex:0 0 auto;display:flex;flex-flow:column nowrap;align-items:center;margin-bottom:8px;gap:var(--ymt-spacing-2xs)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container{width:100%;height:calc(24px + var(--ymt-spacing-s) + 1px + 16px)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav{width:100%;border:none;border-top:1px solid var(--ymt-outline-variant)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content{flex-flow:row nowrap;height:calc(calc(24px + var(--ymt-spacing-s) + 1px + 16px) - 1px);margin-block-start:0;overflow-y:hidden}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .app-logo{height:100%;width:auto;aspect-ratio:1/1;margin-bottom:0;margin-right:8px}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .nav-list{flex-flow:row nowrap;height:auto}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .actions{flex-flow:row nowrap;margin-bottom:0;margin-right:8px}:host{position:absolute;inset:0;overflow:hidden;display:flex;background-color:var(--ymt-surface-frame)}:host .progress-bar{position:absolute}:host .shell-nav{flex:0 0 auto}:host .shell-nav__nav-list{display:contents;list-style:none}:host .shell-nav__nav-list-item{display:inline-block}:host .shell-nav__shell-logo-button{-webkit-user-select:none;user-select:none;display:block;position:relative;box-sizing:border-box;border:none;outline:none;cursor:pointer;height:100%;width:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);padding:0;padding-block:0;background:none}:host .shell-nav__shell-logo-button mat-icon{width:100%;height:100%}:host .shell-nav__actions{display:contents}:host main{flex:1;color:var(--ymt-text-color)}:host .asideOutlet{position:absolute;inset:0;padding-inline-start:calc(24px + var(--ymt-spacing-s) + 1px + 16px)}:host-context([data-screen-size=s][data-screen-orientation=portrait]){flex-flow:column-reverse}:host-context([data-screen-size=s][data-screen-orientation=portrait]) main{overflow:hidden}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .asideOutlet{padding-inline-start:0}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: YuvMetadataFormDefaultsModule }, { kind: "component", type: i3$1.MetadataDefaultTemplatesComponent, selector: "yuv-metadata-default-templates" }, { kind: "component", type: SidebarNavComponent, selector: "yuv-sidebar-nav" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: ClientShellComponent, isStandalone: true, selector: "yuv-client-shell", inputs: { apps: { classPropertyName: "apps", publicName: "apps", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:focusin": "onFocusChange($event)", "dragover": "onDragOver($event)" } }, providers: [SafeHtmlPipe], ngImport: i0, template: "<yuv-metadata-default-templates></yuv-metadata-default-templates>\n\n<!-- gloabl busy indicator -->\n@if (busy$ | async) {\n  <mat-progress-bar mode=\"indeterminate\" class=\"progress-bar\"></mat-progress-bar>\n}\n\n@let iconsRegistered = registerIcons();\n@let showAppHeader = css.appHeader();\n\n@if (showAppHeader) {\n  <yuv-app-header> </yuv-app-header>\n}\n\n<yuv-sidebar-nav class=\"shell-nav\">\n  @if (iconsRegistered && !showAppHeader) {\n    <yuv-shell-logo />\n  }\n  <!-- </button> -->\n  <ul class=\"shell-nav__nav-list\">\n    @for (a of navApps(); track a.path) {\n      <li class=\"shell-nav__nav-list-item\">\n        <button\n          class=\"shell-nav__nav-list-item-button\"\n          mat-icon-button\n          routerLinkActive=\"active\"\n          [routerLink]=\"a.path\"\n          matTooltipPosition=\"after\"\n          [matTooltip]=\"getAppTitle(a)\"\n        >\n          @if (a.svgIcon) {\n            @if (iconsRegistered) {\n              <mat-icon [svgIcon]=\"'shellIcons:' + a.iconName\"></mat-icon>\n            }\n          } @else {\n            <mat-icon>{{ a.iconName }}</mat-icon>\n          }\n          <!--@if (getNotifications(a.id)) {\n            <div [ngClass]=\"'badge ' + getNotifications(a.id).maxLevel\">{{ getNotifications(a.id).count }}</div>\n          }-->\n        </button>\n      </li>\n    }\n  </ul>\n  <section class=\"shell-nav__actions\">\n    @if (showNotifications()) {\n      <button\n        class=\"shell-nav__actions-button\"\n        mat-icon-button\n        [routerLink]=\"[{ outlets: { aside: 'notifications' } }]\"\n        routerLinkActive=\"active\"\n        matTooltipPosition=\"after\"\n        [matTooltip]=\"'yuv.shell.notifications.title' | translate\"\n      >\n        <mat-icon>notifications</mat-icon>\n        @if (newNotifications(); as note) {\n          <div class=\"badge {{ note.maxLevel }}\">{{ note.count }}</div>\n        }\n      </button>\n    }\n    <button\n      class=\"shell-nav__actions-button\"\n      mat-icon-button\n      [routerLink]=\"['/settings']\"\n      routerLinkActive=\"active\"\n      [matTooltip]=\"'yuv.shell.settings.title' | translate\"\n    >\n      <mat-icon>settings</mat-icon>\n    </button>\n    <button class=\"shell-nav__actions-button\" mat-icon-button (click)=\"appLogout()\" [matTooltip]=\"'yuv.shell.cmd.logout' | translate\">\n      <mat-icon>power_settings_new</mat-icon>\n    </button>\n  </section>\n</yuv-sidebar-nav>\n\n<main id=\"main-shell_content\" aria-label=\"main shell content\" [inert]=\"asideOutlet.isActivated\">\n  <router-outlet></router-outlet>\n</main>\n\n<!-- outlet for aside modals like notifications -->\n<div class=\"asideOutlet\" [hidden]=\"!asideOutlet.isActivated\">\n  <router-outlet name=\"aside\" #asideOutlet=\"outlet\"></router-outlet>\n</div>\n\n<div id=\"fi\" inert></div>\n", styles: [":host{--mat-sidenav-container-shape: none}:host{--mat-sidenav-container-width: var(--yuv-navigation-rail-width)}:host{--mat-sidenav-container-divider-color: var(--ymt-outline-variant)}:host{--mat-sidenav-container-background-color: transparent}:host{--mat-sidenav-content-background-color: transparent}:host{--mat-sidenav-container-text-color: var(--ymt-on-surface)}.sidenav-container{height:100%;width:var(--yuv-navigation-rail-width)}.sidenav-container .sidenav .sidenav-content{height:100%;display:flex;flex-flow:column nowrap;justify-content:flex-start;gap:var(--ymt-spacing-2xs)}.sidenav-container .sidenav .sidenav-content .nav-list{flex:1 0 auto;display:flex;flex-flow:column nowrap;align-items:center;gap:var(--ymt-spacing-2xs)}.sidenav-container .sidenav .sidenav-content .actions{flex:0 0 auto;display:flex;flex-flow:column nowrap;align-items:center;margin-bottom:8px;gap:var(--ymt-spacing-2xs)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container{width:100%;height:var(--yuv-navigation-rail-width)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav{width:100%;border:none;border-top:1px solid var(--ymt-outline-variant)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content{flex-flow:row nowrap;height:calc(var(--yuv-navigation-rail-width) - 1px);margin-block-start:0;overflow-y:hidden}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .app-logo{height:100%;width:auto;aspect-ratio:1/1;margin-bottom:0;margin-right:8px}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .nav-list{flex-flow:row nowrap;height:auto}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .actions{flex-flow:row nowrap;margin-bottom:0;margin-right:8px}:host{--yuv-app-header-height: 60px;--yuv-navigation-rail-width: var(--yuv-app-header-height);position:absolute;inset:0;overflow:hidden;background-color:var(--ymt-surface-frame);display:grid;grid-template-rows:auto 1fr;grid-template-columns:auto 1fr;grid-template-areas:\"appheader appheader\" \"nav main\"}:host .progress-bar{position:absolute}:host yuv-app-header{grid-area:appheader}:host .shell-nav{grid-area:nav}:host .shell-nav__nav-list{display:contents;list-style:none}:host .shell-nav__nav-list-item{display:inline-block}:host .shell-nav__actions{display:contents}:host main{grid-area:main;overflow:hidden;color:var(--ymt-text-color)}:host .asideOutlet{position:absolute;inset:0;padding-inline-start:var(--yuv-navigation-rail-width)}:host-context([data-screen-size=s][data-screen-orientation=portrait]){flex-flow:column-reverse}:host-context([data-screen-size=s][data-screen-orientation=portrait]) main{overflow:hidden}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .asideOutlet{padding-inline-start:0}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: YuvMetadataFormDefaultsModule }, { kind: "component", type: i3.MetadataDefaultTemplatesComponent, selector: "yuv-metadata-default-templates" }, { kind: "component", type: YuvAppHeaderComponent, selector: "yuv-app-header" }, { kind: "component", type: SidebarNavComponent, selector: "yuv-sidebar-nav" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ShellLogoComponent, selector: "yuv-shell-logo" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ClientShellComponent, decorators: [{
             type: Component,
@@ -367,12 +553,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
                         TranslateModule,
                         RouterModule,
                         YuvMetadataFormDefaultsModule,
+                        YuvAppHeaderComponent,
                         SidebarNavComponent,
                         MatIconButton,
                         MatIcon,
                         MatProgressBar,
-                        MatTooltipModule
-                    ], providers: [SafeHtmlPipe], template: "<yuv-metadata-default-templates></yuv-metadata-default-templates>\n\n<!-- gloabl busy indicator -->\n@if (busy$ | async) {\n  <mat-progress-bar\n    mode=\"indeterminate\"\n    class=\"progress-bar\"\n  ></mat-progress-bar>\n}\n\n@let iconsRegistered = registerIcons();\n\n<yuv-sidebar-nav class=\"shell-nav\">\n  <button class=\"shell-nav__shell-logo-button\" routerLink=\"/\" routerLinkActive=\"active\" [attr.aria-label]=\"'yuv.shell.logo.aria.label' | translate\">\n    @if (iconsRegistered) {\n      <mat-icon svgIcon=\"shellIcons:app_logo\"></mat-icon>\n    }\n  </button>\n  <ul class=\"shell-nav__nav-list\">\n    @for (a of apps(); track a.path) {\n      <li class=\"shell-nav__nav-list-item\">\n        <button class=\"shell-nav__nav-list-item-button\" mat-icon-button routerLinkActive=\"active\" [routerLink]=\"a.path\" \n        matTooltipPosition=\"after\"\n        [matTooltip]=\"getAppTitle(a)\">\n          @if (a.svgIcon) {\n            @if (iconsRegistered) {\n              <mat-icon [svgIcon]=\"'shellIcons:' + a.iconName\"></mat-icon>\n            }\n          } @else {\n            <mat-icon>{{ a.iconName }}</mat-icon>\n          }\n          <!--@if (getNotifications(a.id)) {\n            <div [ngClass]=\"'badge ' + getNotifications(a.id).maxLevel\">{{ getNotifications(a.id).count }}</div>\n          }-->\n        </button>\n      </li>\n    }\n  </ul>\n  <section class=\"shell-nav__actions\">\n    @if (showNotifications()) {\n      <button\n        class=\"shell-nav__actions-button\"\n        mat-icon-button\n        [routerLink]=\"[{ outlets: { aside: 'notifications' } }]\"\n        routerLinkActive=\"active\"\n        matTooltipPosition=\"after\"\n        [matTooltip]=\"'yuv.shell.notifications.title' | translate\"\n      >\n        <mat-icon>notifications</mat-icon>\n        @if (newNotifications(); as note) {\n          <div class=\"badge {{ note.maxLevel }}\">{{ note.count }}</div>\n        }\n      </button>\n    }\n    <button\n      class=\"shell-nav__actions-button\"\n      mat-icon-button\n      [routerLink]=\"['/settings']\"\n      routerLinkActive=\"active\"\n      [matTooltip]=\"'yuv.shell.settings.title' | translate\"\n    >\n      <mat-icon>settings</mat-icon>\n    </button>\n    <button class=\"shell-nav__actions-button\" mat-icon-button (click)=\"appLogout()\" [matTooltip]=\"'yuv.shell.cmd.logout' | translate\">\n      <mat-icon>power_settings_new</mat-icon>\n    </button>\n  </section>\n</yuv-sidebar-nav>\n\n<main id=\"main-shell_content\" aria-label=\"main shell content\" [inert]=\"asideOutlet.isActivated\">\n  <router-outlet></router-outlet>\n</main>\n\n<!-- outlet for aside modals like notifications -->\n<div class=\"asideOutlet\" [hidden]=\"!asideOutlet.isActivated\">\n  <router-outlet name=\"aside\" #asideOutlet=\"outlet\"></router-outlet>\n</div>\n\n<div id=\"fi\" inert></div>\n", styles: [":host{--mat-sidenav-container-shape: none}:host{--mat-sidenav-container-width: calc(24px + var(--ymt-spacing-s) + 1px + 16px)}:host{--mat-sidenav-container-divider-color: var(--ymt-outline-variant)}:host{--mat-sidenav-container-background-color: transparent}:host{--mat-sidenav-content-background-color: transparent}:host{--mat-sidenav-container-text-color: var(--ymt-on-surface)}.sidenav-container{height:100%;width:calc(24px + var(--ymt-spacing-s) + 1px + 16px)}.sidenav-container .sidenav .sidenav-content{height:100%;display:flex;flex-flow:column nowrap;justify-content:flex-start;gap:var(--ymt-spacing-2xs)}.sidenav-container .sidenav .sidenav-content .app-logo{height:30px;width:100%;flex:0 0 auto;background-color:var(--ymt-brand);margin-bottom:8px}.sidenav-container .sidenav .sidenav-content .nav-list{flex:1 0 auto;display:flex;flex-flow:column nowrap;align-items:center;gap:var(--ymt-spacing-2xs)}.sidenav-container .sidenav .sidenav-content .actions{flex:0 0 auto;display:flex;flex-flow:column nowrap;align-items:center;margin-bottom:8px;gap:var(--ymt-spacing-2xs)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container{width:100%;height:calc(24px + var(--ymt-spacing-s) + 1px + 16px)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav{width:100%;border:none;border-top:1px solid var(--ymt-outline-variant)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content{flex-flow:row nowrap;height:calc(calc(24px + var(--ymt-spacing-s) + 1px + 16px) - 1px);margin-block-start:0;overflow-y:hidden}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .app-logo{height:100%;width:auto;aspect-ratio:1/1;margin-bottom:0;margin-right:8px}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .nav-list{flex-flow:row nowrap;height:auto}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .actions{flex-flow:row nowrap;margin-bottom:0;margin-right:8px}:host{position:absolute;inset:0;overflow:hidden;display:flex;background-color:var(--ymt-surface-frame)}:host .progress-bar{position:absolute}:host .shell-nav{flex:0 0 auto}:host .shell-nav__nav-list{display:contents;list-style:none}:host .shell-nav__nav-list-item{display:inline-block}:host .shell-nav__shell-logo-button{-webkit-user-select:none;user-select:none;display:block;position:relative;box-sizing:border-box;border:none;outline:none;cursor:pointer;height:100%;width:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);padding:0;padding-block:0;background:none}:host .shell-nav__shell-logo-button mat-icon{width:100%;height:100%}:host .shell-nav__actions{display:contents}:host main{flex:1;color:var(--ymt-text-color)}:host .asideOutlet{position:absolute;inset:0;padding-inline-start:calc(24px + var(--ymt-spacing-s) + 1px + 16px)}:host-context([data-screen-size=s][data-screen-orientation=portrait]){flex-flow:column-reverse}:host-context([data-screen-size=s][data-screen-orientation=portrait]) main{overflow:hidden}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .asideOutlet{padding-inline-start:0}\n"] }]
+                        MatTooltipModule,
+                        ShellLogoComponent
+                    ], providers: [SafeHtmlPipe], template: "<yuv-metadata-default-templates></yuv-metadata-default-templates>\n\n<!-- gloabl busy indicator -->\n@if (busy$ | async) {\n  <mat-progress-bar mode=\"indeterminate\" class=\"progress-bar\"></mat-progress-bar>\n}\n\n@let iconsRegistered = registerIcons();\n@let showAppHeader = css.appHeader();\n\n@if (showAppHeader) {\n  <yuv-app-header> </yuv-app-header>\n}\n\n<yuv-sidebar-nav class=\"shell-nav\">\n  @if (iconsRegistered && !showAppHeader) {\n    <yuv-shell-logo />\n  }\n  <!-- </button> -->\n  <ul class=\"shell-nav__nav-list\">\n    @for (a of navApps(); track a.path) {\n      <li class=\"shell-nav__nav-list-item\">\n        <button\n          class=\"shell-nav__nav-list-item-button\"\n          mat-icon-button\n          routerLinkActive=\"active\"\n          [routerLink]=\"a.path\"\n          matTooltipPosition=\"after\"\n          [matTooltip]=\"getAppTitle(a)\"\n        >\n          @if (a.svgIcon) {\n            @if (iconsRegistered) {\n              <mat-icon [svgIcon]=\"'shellIcons:' + a.iconName\"></mat-icon>\n            }\n          } @else {\n            <mat-icon>{{ a.iconName }}</mat-icon>\n          }\n          <!--@if (getNotifications(a.id)) {\n            <div [ngClass]=\"'badge ' + getNotifications(a.id).maxLevel\">{{ getNotifications(a.id).count }}</div>\n          }-->\n        </button>\n      </li>\n    }\n  </ul>\n  <section class=\"shell-nav__actions\">\n    @if (showNotifications()) {\n      <button\n        class=\"shell-nav__actions-button\"\n        mat-icon-button\n        [routerLink]=\"[{ outlets: { aside: 'notifications' } }]\"\n        routerLinkActive=\"active\"\n        matTooltipPosition=\"after\"\n        [matTooltip]=\"'yuv.shell.notifications.title' | translate\"\n      >\n        <mat-icon>notifications</mat-icon>\n        @if (newNotifications(); as note) {\n          <div class=\"badge {{ note.maxLevel }}\">{{ note.count }}</div>\n        }\n      </button>\n    }\n    <button\n      class=\"shell-nav__actions-button\"\n      mat-icon-button\n      [routerLink]=\"['/settings']\"\n      routerLinkActive=\"active\"\n      [matTooltip]=\"'yuv.shell.settings.title' | translate\"\n    >\n      <mat-icon>settings</mat-icon>\n    </button>\n    <button class=\"shell-nav__actions-button\" mat-icon-button (click)=\"appLogout()\" [matTooltip]=\"'yuv.shell.cmd.logout' | translate\">\n      <mat-icon>power_settings_new</mat-icon>\n    </button>\n  </section>\n</yuv-sidebar-nav>\n\n<main id=\"main-shell_content\" aria-label=\"main shell content\" [inert]=\"asideOutlet.isActivated\">\n  <router-outlet></router-outlet>\n</main>\n\n<!-- outlet for aside modals like notifications -->\n<div class=\"asideOutlet\" [hidden]=\"!asideOutlet.isActivated\">\n  <router-outlet name=\"aside\" #asideOutlet=\"outlet\"></router-outlet>\n</div>\n\n<div id=\"fi\" inert></div>\n", styles: [":host{--mat-sidenav-container-shape: none}:host{--mat-sidenav-container-width: var(--yuv-navigation-rail-width)}:host{--mat-sidenav-container-divider-color: var(--ymt-outline-variant)}:host{--mat-sidenav-container-background-color: transparent}:host{--mat-sidenav-content-background-color: transparent}:host{--mat-sidenav-container-text-color: var(--ymt-on-surface)}.sidenav-container{height:100%;width:var(--yuv-navigation-rail-width)}.sidenav-container .sidenav .sidenav-content{height:100%;display:flex;flex-flow:column nowrap;justify-content:flex-start;gap:var(--ymt-spacing-2xs)}.sidenav-container .sidenav .sidenav-content .nav-list{flex:1 0 auto;display:flex;flex-flow:column nowrap;align-items:center;gap:var(--ymt-spacing-2xs)}.sidenav-container .sidenav .sidenav-content .actions{flex:0 0 auto;display:flex;flex-flow:column nowrap;align-items:center;margin-bottom:8px;gap:var(--ymt-spacing-2xs)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container{width:100%;height:var(--yuv-navigation-rail-width)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav{width:100%;border:none;border-top:1px solid var(--ymt-outline-variant)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content{flex-flow:row nowrap;height:calc(var(--yuv-navigation-rail-width) - 1px);margin-block-start:0;overflow-y:hidden}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .app-logo{height:100%;width:auto;aspect-ratio:1/1;margin-bottom:0;margin-right:8px}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .nav-list{flex-flow:row nowrap;height:auto}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .sidenav-container .sidenav .sidenav-content .actions{flex-flow:row nowrap;margin-bottom:0;margin-right:8px}:host{--yuv-app-header-height: 60px;--yuv-navigation-rail-width: var(--yuv-app-header-height);position:absolute;inset:0;overflow:hidden;background-color:var(--ymt-surface-frame);display:grid;grid-template-rows:auto 1fr;grid-template-columns:auto 1fr;grid-template-areas:\"appheader appheader\" \"nav main\"}:host .progress-bar{position:absolute}:host yuv-app-header{grid-area:appheader}:host .shell-nav{grid-area:nav}:host .shell-nav__nav-list{display:contents;list-style:none}:host .shell-nav__nav-list-item{display:inline-block}:host .shell-nav__actions{display:contents}:host main{grid-area:main;overflow:hidden;color:var(--ymt-text-color)}:host .asideOutlet{position:absolute;inset:0;padding-inline-start:var(--yuv-navigation-rail-width)}:host-context([data-screen-size=s][data-screen-orientation=portrait]){flex-flow:column-reverse}:host-context([data-screen-size=s][data-screen-orientation=portrait]) main{overflow:hidden}:host-context([data-screen-size=s][data-screen-orientation=portrait]) .asideOutlet{padding-inline-start:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onFocusChange: [{
                 type: HostListener,
                 args: ['document:focusin', ['$event']]
@@ -381,19 +569,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
                 args: ['dragover', ['$event']]
             }] } });
 
-class AppLogoComponent {
+class YuvAppHeaderSlotDirective {
     constructor() {
-        this.icon = input();
-        this.label = input.required();
+        this.#tplRef = inject((TemplateRef));
+        this.#clientShellService = inject(ClientShellService);
+        this.yuvAppHeaderSlot = input.required();
+    }
+    #tplRef;
+    #clientShellService;
+    ngOnInit() {
+        this.#clientShellService.addAppHeaderSlot(this.yuvAppHeaderSlot(), this.#tplRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: AppLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.12", type: AppLogoComponent, isStandalone: true, selector: "yuv-app-logo", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<span class=\"label\">{{label()}}</span>\n", styles: [":host{--text-color: var(--ymt-on-brand);--icon-color: var(--text-color);--surface-color: var(--ymt-brand);--band-icon-size: 32px;--icon-background-color: transparent;padding:var(--ymt-spacing-xs) calc(var(--ymt-spacing-m)) var(--ymt-spacing-xs) calc(var(--ymt-spacing-m));font:var(--ymt-font-title-small);line-height:1;background-color:var(--surface-color);color:var(--text-color)}:host .label{line-height:1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvAppHeaderSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.12", type: YuvAppHeaderSlotDirective, isStandalone: true, selector: "ng-template[yuvAppHeaderSlot]", inputs: { yuvAppHeaderSlot: { classPropertyName: "yuvAppHeaderSlot", publicName: "yuvAppHeaderSlot", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: AppLogoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-app-logo', standalone: true, imports: [CommonModule], template: "<span class=\"label\">{{label()}}</span>\n", styles: [":host{--text-color: var(--ymt-on-brand);--icon-color: var(--text-color);--surface-color: var(--ymt-brand);--band-icon-size: 32px;--icon-background-color: transparent;padding:var(--ymt-spacing-xs) calc(var(--ymt-spacing-m)) var(--ymt-spacing-xs) calc(var(--ymt-spacing-m));font:var(--ymt-font-title-small);line-height:1;background-color:var(--surface-color);color:var(--text-color)}:host .label{line-height:1em}\n"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvAppHeaderSlotDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[yuvAppHeaderSlot]'
+                }]
+        }] });
+
+const cmp = [
+    YuvAppHeaderSlotDirective,
+];
+class YuvClientShellModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvClientShellModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.12", ngImport: i0, type: YuvClientShellModule, imports: [YuvAppHeaderSlotDirective], exports: [YuvAppHeaderSlotDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvClientShellModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuvClientShellModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [cmp],
+                    exports: [cmp]
+                }]
         }] });
 
+class InertDirective {
+    constructor() {
+        this.elRef = inject(ElementRef);
+        this.inert = input(false);
+        effect(() => {
+            const el = this.elRef.nativeElement;
+            if (this.inert())
+                el.setAttribute('inert', 'true');
+            else
+                el.removeAttribute('inert');
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: InertDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.12", type: InertDirective, isStandalone: true, selector: "[inert]", inputs: { inert: { classPropertyName: "inert", publicName: "inert", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: InertDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[inert]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [] });
+
 class ShellWidgetsService {
     #widgetGridRegistry = inject(WidgetGridRegistry);
     #WIDGET_REGISTRY_BUCKET = 'io.yuuvis.shell.widgets';
@@ -413,130 +649,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
                 }]
         }] });
 
-class ManageFlavorsComponent {
-    constructor() {
-        this.#shell = inject(ShellService);
-        this.#dmsService = inject(DmsService);
-        this.#dialogData = inject(MAT_DIALOG_DATA);
-        this.#dialogRef = inject((MatDialogRef));
-        this.item = this.#dialogData;
-        this.#confirm = inject(ConfirmService);
-        this.translate = inject(TranslateService);
-        this.busy = signal(false);
-        this.appliedFlavors = [];
-        this.applicableFlavors = [];
-    }
-    #shell;
-    #dmsService;
-    #dialogData;
-    #dialogRef;
-    #confirm;
-    applyFlavor(flavor) {
-        this.busy.set(true);
-        this.#shell.triggerApplyObjectFlavor(this.item, flavor).subscribe(() => {
-            this.#dialogRef.close();
-            this.busy.set(false);
-        });
-    }
-    removeFlavor(flavor) {
-        this.busy.set(true);
-        this.#confirm
-            .confirm({
-            message: this.translate.instant('yuv.object-flavor.flavor.remove.confirm.message', {
-                flavor: this.#shell.getFlavorLabel(flavor.id)
-            })
-        })
-            .pipe(switchMap$1((confirmed) => (confirmed ? this.#shell.removeObjectFlavor(this.item, flavor) : of(undefined))))
-            .subscribe((res) => {
-            if (res !== undefined)
-                this.#dialogRef.close();
-            this.busy.set(false);
-        });
-    }
-    #refreshDmsObject() {
-        this.busy.set(true);
-        this.#dmsService
-            .getDmsObject(this.item.id)
-            .pipe(tap$1((dmsObject) => {
-            this.item = dmsObject;
-            this.#getAppliedFlavors(this.item);
-        }))
-            .subscribe()
-            .add(() => this.busy.set(false));
-    }
-    #getAppliedFlavors(dmsObject) {
-        const res = this.#shell.getAppliedObjectFlavors(dmsObject);
-        this.appliedFlavors = res.applied;
-        this.applicableFlavors = res.applicable;
-    }
-    cancel() {
-        this.#dialogRef.close();
-    }
-    ngOnInit() {
-        this.#refreshDmsObject();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ManageFlavorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: ManageFlavorsComponent, isStandalone: true, selector: "yuv-manage-flavors", ngImport: i0, template: "<yuv-dialog [headertitel]=\"'yuv.shell.action.manage-flavors.title' | translate\">\n  <main [yuvBusyOverlay]=\"busy()\">\n    <p>{{ 'yuv.shell.action.manage-flavors.text' | translate }}</p>\n    @if (appliedFlavors.length) {\n      <h3>{{ 'yuv.shell.action.manage-flavors.applied.headline' | translate }}</h3>\n      <ul>\n        @for (f of appliedFlavors; track $index) {\n          <li>\n            <yuv-flavor-chip [flavor]=\"f\" yuvListItem></yuv-flavor-chip>\n            <button mat-icon-button [matTooltip]=\"'yuv.shell.action.manage-flavors.applicable.button.remove.tooltip' | translate\" (click)=\"removeFlavor(f)\">\n              <mat-icon>delete_forever</mat-icon>\n            </button>\n          </li>\n        }\n      </ul>\n    }\n    @if (applicableFlavors.length) {\n      <h3>{{ 'yuv.shell.action.manage-flavors.applicable.headline' | translate }}</h3>\n      <ul>\n        @for (f of applicableFlavors; track $index) {\n          <li>\n            <yuv-flavor-chip [flavor]=\"f\" yuvListItem></yuv-flavor-chip>\n            <button mat-icon-button [matTooltip]=\"'yuv.shell.action.manage-flavors.applied.button.apply.tooltip' | translate\" (click)=\"applyFlavor(f)\">\n              <mat-icon>add</mat-icon>\n            </button>\n          </li>\n        }\n      </ul>\n    }\n  </main>\n  <footer>\n    <button  ymtButton=\"secondary\" (click)=\"cancel()\">{{ 'yuv.shell.action.manage-flavors.button.cancel' | translate }}</button>\n  </footer>\n</yuv-dialog>\n", styles: [":host main{display:flex;flex-flow:column;padding:var(--ymt-spacing-m);flex:1;overflow-y:auto}:host main yuv-flavor-chip{border-color:transparent;flex:1}:host main ul{padding:0;margin:0;list-style-type:none}:host main li{display:flex;gap:var(--ymt-spacing-xs);align-items:center;border:1px solid var(--ymt-outline-variant);margin-block-end:2px;padding:var(--ymt-spacing-2xs)}:host footer{flex:0 0 auto;margin-block-start:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "component", type: FlavorChipComponent, selector: "yuv-flavor-chip", inputs: ["flavor", "enableRemove", "enableDescription"], outputs: ["flavorRemove"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: ManageFlavorsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-manage-flavors', standalone: true, imports: [
-                        CommonModule,
-                        BusyOverlayDirective,
-                        MatIconModule,
-                        MatTooltipModule,
-                        TranslateModule,
-                        ListItemDirective,
-                        FlavorChipComponent,
-                        DialogComponent,
-                        MatButtonModule,
-                        YmtButtonDirective
-                    ], template: "<yuv-dialog [headertitel]=\"'yuv.shell.action.manage-flavors.title' | translate\">\n  <main [yuvBusyOverlay]=\"busy()\">\n    <p>{{ 'yuv.shell.action.manage-flavors.text' | translate }}</p>\n    @if (appliedFlavors.length) {\n      <h3>{{ 'yuv.shell.action.manage-flavors.applied.headline' | translate }}</h3>\n      <ul>\n        @for (f of appliedFlavors; track $index) {\n          <li>\n            <yuv-flavor-chip [flavor]=\"f\" yuvListItem></yuv-flavor-chip>\n            <button mat-icon-button [matTooltip]=\"'yuv.shell.action.manage-flavors.applicable.button.remove.tooltip' | translate\" (click)=\"removeFlavor(f)\">\n              <mat-icon>delete_forever</mat-icon>\n            </button>\n          </li>\n        }\n      </ul>\n    }\n    @if (applicableFlavors.length) {\n      <h3>{{ 'yuv.shell.action.manage-flavors.applicable.headline' | translate }}</h3>\n      <ul>\n        @for (f of applicableFlavors; track $index) {\n          <li>\n            <yuv-flavor-chip [flavor]=\"f\" yuvListItem></yuv-flavor-chip>\n            <button mat-icon-button [matTooltip]=\"'yuv.shell.action.manage-flavors.applied.button.apply.tooltip' | translate\" (click)=\"applyFlavor(f)\">\n              <mat-icon>add</mat-icon>\n            </button>\n          </li>\n        }\n      </ul>\n    }\n  </main>\n  <footer>\n    <button  ymtButton=\"secondary\" (click)=\"cancel()\">{{ 'yuv.shell.action.manage-flavors.button.cancel' | translate }}</button>\n  </footer>\n</yuv-dialog>\n", styles: [":host main{display:flex;flex-flow:column;padding:var(--ymt-spacing-m);flex:1;overflow-y:auto}:host main yuv-flavor-chip{border-color:transparent;flex:1}:host main ul{padding:0;margin:0;list-style-type:none}:host main li{display:flex;gap:var(--ymt-spacing-xs);align-items:center;border:1px solid var(--ymt-outline-variant);margin-block-end:2px;padding:var(--ymt-spacing-2xs)}:host footer{flex:0 0 auto;margin-block-start:var(--ymt-spacing-m)}\n"] }]
-        }] });
-
-class ManageFlavorsAction extends AbstractContextAction {
-    constructor() {
-        super(...arguments);
-        this.#shell = inject(ShellService);
-        this.#dialog = inject(MatDialog);
-        this.translate = inject(TranslateService);
-        this.id = 'yuv.base.manage-flavor';
-        this.label = this.translate.instant('yuv.shell.action.manage-flavor.label');
-        this.description = this.translate.instant('yuv.shell.action.manage-flavor.description');
-        this.priority = 8;
-        this.icon = ACTION_ICON.manageFlavor;
-        this.group = 'common';
-        this.range = SelectionRange.SINGLE_SELECT;
-        this.supports = {
-            types: [SystemType.DOCUMENT]
-        };
-    }
-    #shell;
-    #dialog;
-    isExecutable(items) {
-        const item = items[0];
-        if (!item)
-            return of(false);
-        const applicableFlavors = item.isFolder
-            ? this.#shell.getApplicableFolderFlavors()
-            : item.content
-                ? this.#shell.getApplicableDocumentFlavors(item.content.mimeType)
-                : [];
-        return of(item && !!item.permissions?.writeIndexData && applicableFlavors.length > 0);
-    }
-    run(items) {
-        this.#dialog.open(ManageFlavorsComponent, {
-            width: '400px',
-            maxWidth: '90vw',
-            data: items[0]
-        });
-        return of(true);
-    }
-}
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AppLogoComponent, ClientShellComponent, InertDirective, ManageFlavorsAction, ShellWidgetsService, clientShellRoutes };
+export { ClientShellComponent, InertDirective, ManageFlavorsAction, ShellLogoComponent, ShellWidgetsService, YuvAppHeaderSlotDirective, YuvClientShellModule, clientShellRoutes };
 //# sourceMappingURL=yuuvis-client-shell.mjs.map