@yuuvis/client-shell 0.6.5

package/fesm2022/yuuvis-client-shell.mjs

@@ -0,0 +1,496 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, effect, Directive, Component, signal, HostListener } from '@angular/core';
+import * as i1 from '@angular/common';
+import { DOCUMENT, CommonModule, NgIf, AsyncPipe } from '@angular/common';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as i2$2 from '@angular/router';
+import { Router, NavigationEnd, RouterModule } from '@angular/router';
+import { SwPush } from '@angular/service-worker';
+import * as i2 from '@yuuvis/client-core';
+import { UserService, ConfigService, TranslateService, TranslateModule, Utils, LocaleDatePipe, AuthService, DeviceService, UserRoles, DmsService } from '@yuuvis/client-core';
+import { MetadataDefaultTemplatesComponent } from '@yuuvis/client-framework/metadata-form';
+import { ShellService, ShellNotificationsService, CommandPaletteService } from '@yuuvis/client-shell-core';
+import * as i2$1 from '@yuuvis/components/icon';
+import { ICONS, YvcIconModule } from '@yuuvis/components/icon';
+import { map, of, tap as tap$1 } from 'rxjs';
+import { tap, map as map$1, filter, catchError, switchMap } from 'rxjs/operators';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { LightDismissDirective, BusyOverlayDirective } from '@yuuvis/client-framework/common';
+import { YUV_ICONS } from '@yuuvis/client-framework/icons';
+import { ListComponent, ListItemDirective } from '@yuuvis/client-framework/list';
+import { AbstractContextAction, ACTION_ICON, SelectionRange } from '@yuuvis/client-framework/actions';
+import { YvcOverlayRef, YvcOverlayService } from '@yuuvis/components/overlay';
+import { FlavorChipComponent } from '@yuuvis/client-framework/object-flavor';
+
+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: "18.2.13", ngImport: i0, type: InertDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", 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: "18.2.13", ngImport: i0, type: InertDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[inert]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [] });
+
+class DashboardPageComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DashboardPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DashboardPageComponent, selector: "yuv-dashboard", ngImport: i0, template: "yuuvis Momentum\n", styles: [":host{display:grid;align-items:center;justify-content:center;height:100%;overflow:hidden;color:var(--text-color-hint);font-size:var(--font-display)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DashboardPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-dashboard', template: "yuuvis Momentum\n", styles: [":host{display:grid;align-items:center;justify-content:center;height:100%;overflow:hidden;color:var(--text-color-hint);font-size:var(--font-display)}\n"] }]
+        }] });
+
+class SettingsPageComponent {
+    constructor() {
+        this.userService = inject(UserService);
+        this.config = inject(ConfigService);
+        this.translate = inject(TranslateService);
+        this.shell = inject(ShellService);
+        this.document = inject(DOCUMENT);
+        this.#fb = inject(FormBuilder);
+        this.clientLocales = signal([]);
+        this.clientVersion = signal(undefined);
+        this.user = toSignal(this.userService.user$);
+        this.appSettingForms$ = this.shell.appSettings$.pipe(map((settings) => settings.map((e) => {
+            const x = {};
+            const fcn = e.properties.map((p) => ({
+                label: this.translate.instant(p.label) || p.label,
+                name: p.name,
+                type: p.type
+            }));
+            e.properties.forEach((p) => {
+                x[p.name] = [p.value];
+            });
+            return {
+                appID: e.appID,
+                label: e.label,
+                formControls: fcn,
+                form: this.#fb.group(x)
+            };
+        })));
+    }
+    #fb;
+    saveAppSettings(appID, form) {
+        this.userService
+            .saveUserSettings({
+            clientAppSettings: {
+                [appID]: form.value
+            }
+        })
+            .subscribe({
+            next: () => {
+                form.markAsPristine();
+            },
+            error: (err) => {
+                console.error('Error saving app settings', err);
+            }
+        });
+    }
+    changeClientLocale(iso) {
+        this.userService.changeClientLocale(iso);
+    }
+    ngOnInit() {
+        this.clientVersion.set(this.document.body.getAttribute('data-version') ?? 'dev');
+        this.clientLocales.set(this.config.getClientLocales());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SettingsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SettingsPageComponent, isStandalone: true, selector: "yuv-settings", ngImport: i0, template: "<header>\n  <h1>{{ 'yuv.shell.settings.title' | translate }}</h1>\n  <h4>{{ 'yuc.shell.settings.client.version' | translate }}: {{ clientVersion() }}</h4>\n</header>\n\n\n<main>@if (user()) {\n  <section class=\"user\">\n    <!-- <yuv-user-avatar class=\"background\" [user]=\"user()\"></yuv-user-avatar> -->\n    <div class=\"user\">\n      <div class=\"meta uname\">{{ user()!.username }}</div>\n      <h2>{{ user()!.title }}</h2>\n      <div class=\"meta uemail\">{{ user()!.email }}</div>\n      <div class=\"meta utenant\">{{ 'yuv.shell.settings.tenant' | translate }}: {{ user()!.tenant }}</div>\n    </div>\n  </section>\n}\n  <!-- language -->\n  <section yuvOfflineDisabled>\n    <div class=\"label\" translate>yuv.shell.settings.language</div>\n    <div class=\"value buttons\">\n      @for (locale of clientLocales(); track locale.iso) {\n        <button class=\"toggle secondary\" (click)=\"changeClientLocale(locale.iso)\" [ngClass]=\"{ active: translate.currentLang === locale.iso }\">\n          {{ locale.label }}\n        </button>\n      }\n    </div>\n  </section>\n\n  <!-- app settings -->\n  <!-- TODO: activate one feature is refined -->\n  <!-- @for (c of appSettingForms$ | async; track $index) {\n    <section>\n      {{ c.label }}\n      <form [formGroup]=\"c.form\" (ngSubmit)=\"saveAppSettings(c.appID, c.form)\">\n        @for (n of c.formControls; track $index) {\n          <label\n            >{{ n.label }}\n\n            @switch (n.type) {\n              @case ('string') {\n                <input type=\"text\" [formControlName]=\"n.name\" />\n              }\n              @case ('number') {\n                <input type=\"number\" [formControlName]=\"n.name\" />\n              }\n            }\n          </label>\n        }\n        <button [ngClass]=\"{ hideen: c.form.untouched }\" [disabled]=\"c.form.invalid\">Save</button>\n      </form>\n    </section>\n  } -->\n</main>\n", styles: [":host{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;grid-template-areas:\"header\" \"settings\";height:100%;overflow:hidden;overflow-y:auto}:host header{grid-area:header;padding:calc(var(--app-pane-padding) * 2)}:host header h1,:host header h4{margin:0}:host header h1{font-size:var(--font-display);font-weight:400}:host header h4{font-size:var(--font-cation);font-weight:400;font-style:italic;color:var(--text-color-caption)}:host main{grid-area:settings;padding:var(--app-pane-padding);overflow-y:auto}:host main section{display:flex;flex-flow:column;padding:var(--app-pane-padding)}:host main section .label{margin-block-end:1em}:host main section .value{display:flex;flex-flow:row wrap;gap:calc(var(--app-pane-padding) / 4)}:host main section.user h2{margin:0 0 1rem;font-weight:400}:host button.active{background-color:var(--color-accent);color:var(--color-accent-tone);pointer-events:none}:host button.color.clear{padding:2px 8px}:host button.color.accent.active{outline:2px solid #fff;outline-offset:-2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SettingsPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-settings', standalone: true, imports: [CommonModule, TranslateModule, ReactiveFormsModule], template: "<header>\n  <h1>{{ 'yuv.shell.settings.title' | translate }}</h1>\n  <h4>{{ 'yuc.shell.settings.client.version' | translate }}: {{ clientVersion() }}</h4>\n</header>\n\n\n<main>@if (user()) {\n  <section class=\"user\">\n    <!-- <yuv-user-avatar class=\"background\" [user]=\"user()\"></yuv-user-avatar> -->\n    <div class=\"user\">\n      <div class=\"meta uname\">{{ user()!.username }}</div>\n      <h2>{{ user()!.title }}</h2>\n      <div class=\"meta uemail\">{{ user()!.email }}</div>\n      <div class=\"meta utenant\">{{ 'yuv.shell.settings.tenant' | translate }}: {{ user()!.tenant }}</div>\n    </div>\n  </section>\n}\n  <!-- language -->\n  <section yuvOfflineDisabled>\n    <div class=\"label\" translate>yuv.shell.settings.language</div>\n    <div class=\"value buttons\">\n      @for (locale of clientLocales(); track locale.iso) {\n        <button class=\"toggle secondary\" (click)=\"changeClientLocale(locale.iso)\" [ngClass]=\"{ active: translate.currentLang === locale.iso }\">\n          {{ locale.label }}\n        </button>\n      }\n    </div>\n  </section>\n\n  <!-- app settings -->\n  <!-- TODO: activate one feature is refined -->\n  <!-- @for (c of appSettingForms$ | async; track $index) {\n    <section>\n      {{ c.label }}\n      <form [formGroup]=\"c.form\" (ngSubmit)=\"saveAppSettings(c.appID, c.form)\">\n        @for (n of c.formControls; track $index) {\n          <label\n            >{{ n.label }}\n\n            @switch (n.type) {\n              @case ('string') {\n                <input type=\"text\" [formControlName]=\"n.name\" />\n              }\n              @case ('number') {\n                <input type=\"number\" [formControlName]=\"n.name\" />\n              }\n            }\n          </label>\n        }\n        <button [ngClass]=\"{ hideen: c.form.untouched }\" [disabled]=\"c.form.invalid\">Save</button>\n      </form>\n    </section>\n  } -->\n</main>\n", styles: [":host{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;grid-template-areas:\"header\" \"settings\";height:100%;overflow:hidden;overflow-y:auto}:host header{grid-area:header;padding:calc(var(--app-pane-padding) * 2)}:host header h1,:host header h4{margin:0}:host header h1{font-size:var(--font-display);font-weight:400}:host header h4{font-size:var(--font-cation);font-weight:400;font-style:italic;color:var(--text-color-caption)}:host main{grid-area:settings;padding:var(--app-pane-padding);overflow-y:auto}:host main section{display:flex;flex-flow:column;padding:var(--app-pane-padding)}:host main section .label{margin-block-end:1em}:host main section .value{display:flex;flex-flow:row wrap;gap:calc(var(--app-pane-padding) / 4)}:host main section.user h2{margin:0 0 1rem;font-weight:400}:host button.active{background-color:var(--color-accent);color:var(--color-accent-tone);pointer-events:none}:host button.color.clear{padding:2px 8px}:host button.color.accent.active{outline:2px solid #fff;outline-offset:-2px}\n"] }]
+        }] });
+
+class NotificationsPageComponent {
+    constructor() {
+        this.router = inject(Router);
+        this.shellNotifications = inject(ShellNotificationsService);
+        this.elRef = inject(ElementRef);
+        this._focusedIndex = -1;
+        this._notificationIDs = [];
+        this.notifications = toSignal(this.shellNotifications.shellNotifications$);
+        this.notificationsIdEffect = effect(() => (this._notificationIDs = (this.notifications() || []).map((n) => n.id)));
+        this.icons = {
+            close: ICONS.clear,
+            trash: YUV_ICONS.trash,
+            note: YUV_ICONS.notification
+        };
+    }
+    onKeydown(event) {
+        switch (event.code) {
+            case 'Delete': {
+                if (this._focusedIndex >= 0)
+                    this.remove(this._notificationIDs[this._focusedIndex]);
+                break;
+            }
+        }
+    }
+    async itemSelected(idx) {
+        const n = this.shellNotifications.getNotificationById(this._notificationIDs[idx[0]]);
+        if (n?.targetRoute) {
+            await this.close();
+            this.router.navigateByUrl(n.targetRoute, { replaceUrl: true });
+            if (n.removeOnTargetRouteNavigated)
+                this.remove(n.id);
+        }
+    }
+    itemFocused(index) {
+        this._focusedIndex = index;
+    }
+    remove(id) {
+        if (id)
+            this.shellNotifications.remove(id);
+    }
+    removeAll() {
+        this.shellNotifications.removeAll();
+    }
+    close() {
+        return this.router.navigate([{ outlets: { aside: null } }], {
+            replaceUrl: true
+        });
+    }
+    ngOnInit() {
+        this.shellNotifications.markAllAsSeen();
+        setTimeout(() => {
+            const fc = Utils.getFocusableChildren(this.elRef.nativeElement);
+            if (fc.length)
+                fc[0].focus();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotificationsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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\"><yvc-icon [svg]=\"n.icon || icons.note\"></yvc-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 (click)=\"remove(n.id)\">\n              <yvc-icon [svg]=\"icons.trash\"></yvc-icon>\n            </button>\n          </div>\n        </div>\n      }\n    </yuv-list>\n\n    <div class=\"actions\">\n      <button [hidden]=\"!notifications()?.length\" class=\"icon secondary\" (click)=\"removeAll()\">\n        {{ 'yuv.shell.notifications.button.remove.all' | translate }}<yvc-icon [svg]=\"icons.trash\"></yvc-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 class=\"icon close\" (click)=\"close()\">\n    <yvc-icon [svg]=\"icons.close\"></yvc-icon>\n  </button>\n</div>\n", styles: [":host{height:100%;display:flex}:host .notifications{background-color:var(--panel-background-lightgrey);border-inline-end:1px solid var(--panel-divider-color);height:100%;overflow:hidden;box-sizing:border-box;padding:var(--app-pane-padding);display:grid;grid-template-rows:auto auto 1fr;grid-template-columns:1fr auto;grid-template-areas:\"title close\" \"actions actions\" \"list list\";gap:var(--app-pane-padding);max-width:30vw;min-width:300px;box-shadow:8px 0 8px #0000001a;animation:dialogAppear .2s ease-in-out}:host .notifications h2{color:var(--text-color-caption);grid-area:title;margin:0;padding:0;align-self:center;font-size:var(--font-title);font-weight:400;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(--text-color-caption)}: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:calc(var(--app-pane-padding) / 4);column-gap:calc(var(--app-pane-padding) / 2);align-items:center;padding:calc(var(--app-pane-padding) / 2);padding-inline-start:var(--app-pane-padding);margin-block-end:calc(var(--app-pane-padding) / 2);background-color:var(--panel-background);outline:1px solid var(--panel-divider-color);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(--color-error)}:host .notifications .note.warning{--level-color: var(--color-warning)}:host .notifications .note.success{--level-color: var(--color-success)}:host .notifications .note:hover,:host .notifications .note[aria-current=true]{background-color:var(--item-focus-background-color)}:host .notifications .note:hover button,:host .notifications .note[aria-current=true] button{opacity:1}:host .notifications .note .icon{grid-area:icon;color:var(--text-color-caption)}:host .notifications .note .title{overflow:hidden;text-overflow:ellipsis;font-weight:700;grid-area:title;color:var(--text-color-body)}: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(--text-color-caption)}:host .notifications .note button{grid-area:actions;padding:0;opacity:0}:host .notifications .note button yvc-icon{width:18px;height:18px}@keyframes dialogAppear{0%{opacity:0;transform:translate(calc(var(--app-pane-padding) * -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: "pipe", type: LocaleDatePipe, name: "localeDate" }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i2$1.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ListComponent, selector: "yuv-list", inputs: ["multiselect", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotificationsPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-notifications', standalone: true, imports: [CommonModule, LightDismissDirective, LocaleDatePipe, YvcIconModule, CdkTrapFocus, ListComponent, ListItemDirective, TranslateModule], 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\"><yvc-icon [svg]=\"n.icon || icons.note\"></yvc-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 (click)=\"remove(n.id)\">\n              <yvc-icon [svg]=\"icons.trash\"></yvc-icon>\n            </button>\n          </div>\n        </div>\n      }\n    </yuv-list>\n\n    <div class=\"actions\">\n      <button [hidden]=\"!notifications()?.length\" class=\"icon secondary\" (click)=\"removeAll()\">\n        {{ 'yuv.shell.notifications.button.remove.all' | translate }}<yvc-icon [svg]=\"icons.trash\"></yvc-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 class=\"icon close\" (click)=\"close()\">\n    <yvc-icon [svg]=\"icons.close\"></yvc-icon>\n  </button>\n</div>\n", styles: [":host{height:100%;display:flex}:host .notifications{background-color:var(--panel-background-lightgrey);border-inline-end:1px solid var(--panel-divider-color);height:100%;overflow:hidden;box-sizing:border-box;padding:var(--app-pane-padding);display:grid;grid-template-rows:auto auto 1fr;grid-template-columns:1fr auto;grid-template-areas:\"title close\" \"actions actions\" \"list list\";gap:var(--app-pane-padding);max-width:30vw;min-width:300px;box-shadow:8px 0 8px #0000001a;animation:dialogAppear .2s ease-in-out}:host .notifications h2{color:var(--text-color-caption);grid-area:title;margin:0;padding:0;align-self:center;font-size:var(--font-title);font-weight:400;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(--text-color-caption)}: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:calc(var(--app-pane-padding) / 4);column-gap:calc(var(--app-pane-padding) / 2);align-items:center;padding:calc(var(--app-pane-padding) / 2);padding-inline-start:var(--app-pane-padding);margin-block-end:calc(var(--app-pane-padding) / 2);background-color:var(--panel-background);outline:1px solid var(--panel-divider-color);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(--color-error)}:host .notifications .note.warning{--level-color: var(--color-warning)}:host .notifications .note.success{--level-color: var(--color-success)}:host .notifications .note:hover,:host .notifications .note[aria-current=true]{background-color:var(--item-focus-background-color)}:host .notifications .note:hover button,:host .notifications .note[aria-current=true] button{opacity:1}:host .notifications .note .icon{grid-area:icon;color:var(--text-color-caption)}:host .notifications .note .title{overflow:hidden;text-overflow:ellipsis;font-weight:700;grid-area:title;color:var(--text-color-body)}: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(--text-color-caption)}:host .notifications .note button{grid-area:actions;padding:0;opacity:0}:host .notifications .note button yvc-icon{width:18px;height:18px}@keyframes dialogAppear{0%{opacity:0;transform:translate(calc(var(--app-pane-padding) * -1))}to{opacity:1;transform:translate(0)}}\n"] }]
+        }], propDecorators: { onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class WebShareTargetPageComponent {
+    constructor() {
+        navigator.serviceWorker.onmessage = (e) => {
+            const file = e.data.file;
+            console.log(file);
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WebShareTargetPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WebShareTargetPageComponent, isStandalone: true, selector: "yuv-web-share-target", ngImport: i0, template: "<p>web-share-target works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WebShareTargetPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-web-share-target', standalone: true, imports: [CommonModule], template: "<p>web-share-target works!</p>\n" }]
+        }], ctorParameters: () => [] });
+
+const clientShellRoutes = [
+    { path: 'dashboard', component: DashboardPageComponent },
+    { path: 'notifications', component: NotificationsPageComponent, outlet: 'aside' },
+    { path: 'settings', component: SettingsPageComponent },
+    { path: 'web-share-target', component: WebShareTargetPageComponent },
+    // default route
+    { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
+    // redirecting route
+    { path: '**', redirectTo: '/' }
+];
+
+class ClientShellComponent {
+    #shell;
+    #device;
+    #swPush;
+    onFocusChange(event) {
+        // console.log('focused: ', document.activeElement);
+    }
+    onDragOver(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.showUploadOverlay = !!this._dragContainsFiles(event);
+    }
+    #appsEffect;
+    #shellConfigEffect;
+    constructor() {
+        this.router = inject(Router);
+        this.auth = inject(AuthService);
+        this.userService = inject(UserService);
+        this.#shell = inject(ShellService);
+        this.shellNotifications = inject(ShellNotificationsService);
+        this.translate = inject(TranslateService);
+        this.commandPalette = inject(CommandPaletteService);
+        this.#device = inject(DeviceService);
+        this.#swPush = inject(SwPush);
+        this.APP_LOGOUT_EVENT_KEY = 'yuv.app.event.logout';
+        this._levels = {
+            info: 0,
+            success: 1,
+            warning: 2,
+            alert: 3
+        };
+        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$1((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.checkedForInitialRoute = false;
+        this.enableTenantSwitch = false;
+        this.config = input();
+        this.#shellConfigEffect = effect(() => {
+            const cfg = this.config();
+            if (cfg) {
+                this.#shell.setShellConfig(cfg);
+            }
+        }, {
+            allowSignalWrites: true
+        });
+        this.shellConfig = this.#shell.shellConfig;
+        this.translate.onLangChange.subscribe(() => this._setCommands(true));
+        // this.router.events.pipe(
+        //   // filter(e => e instanceof NavigationStart)
+        // ).subscribe((e) => {
+        //   console.log(e);
+        // });
+        this.router.events
+            .pipe(filter((e) => e instanceof NavigationEnd), map$1((e) => e))
+            .subscribe((e) => this._processRouterNavigationEnd(e));
+        this.#device.init();
+        this.userService.user$.subscribe((user) => {
+            if (user) {
+                this.checkedForInitialRoute = !(!this.user || this.user.id !== user.id);
+                this.enableTenantSwitch = user.authorities.includes(UserRoles.MULTI_TENANT);
+            }
+            this.user = user;
+        });
+        window.addEventListener('storage', (evt) => {
+            if (evt.key === this.APP_LOGOUT_EVENT_KEY) {
+                this.appLogout(true);
+            }
+        });
+    }
+    openNotifications() {
+        this.router.navigate([{}]);
+    }
+    // getNotifications(id: string) {
+    //   return this.shellNotifications.getNotifications(id);
+    // }
+    _dragContainsFiles(event) {
+        // do not allow to drop files/images from iframes
+        if (event.relatedTarget?.tagName.toLowerCase() === 'iframe')
+            return 0;
+        return event.dataTransfer ? Array.from(event.dataTransfer.items || []).filter((i) => i.kind === 'file' && i.type).length : 0;
+    }
+    _setCommands(update) {
+        const commands = this.apps().map((a, i) => ({
+            id: `nav.app.${i}`,
+            label: this.translate.instant('yuv.shell.cmd.app.open', { title: a.title }),
+            callback: () => this.router.navigate([a.path])
+        }));
+        commands.push({
+            id: `nav.shell.settings`,
+            label: this.translate.instant('yuv.shell.cmd.open.settings'),
+            callback: () => this.router.navigate(['settings'])
+        });
+        commands.push({
+            id: `nav.shell.logout`,
+            label: this.translate.instant('yuv.shell.cmd.logout'),
+            callback: () => this.appLogout()
+        });
+        if (update)
+            this.commandPalette.updateCommands(commands);
+        else
+            this.commandPalette.registerCommands(commands);
+    }
+    requestSubscription() {
+        if (!this.#swPush.isEnabled) {
+            console.log('Notification is not enabled.');
+            return;
+        }
+        this.#swPush.messages
+            .pipe(tap((msg) => console.log({ msg })), catchError((error) => {
+            console.log({ error });
+            return of(null);
+        }))
+            .subscribe();
+    }
+    appLogout(triggeredFromOtherTab) {
+        if (!triggeredFromOtherTab) {
+            // send storage event to logout all other open tabs
+            window.localStorage.setItem(this.APP_LOGOUT_EVENT_KEY, `${Date.now()}`);
+        }
+        this.userService.logout('');
+    }
+    _processRouterNavigationEnd(e) {
+        if (!this.checkedForInitialRoute) {
+            this.checkedForInitialRoute = true;
+            // redirect to the page the user logged out from the last time
+            // but only if current route is not a deep link
+            const ignoreRoutes = ['', 'dashboard', 'index.html'].map((s) => `${Utils.getBaseHref()}${s}`.replace('//', '/'));
+            const currentRoute = this.routeWithBaseHref(this.router.routerState.snapshot.url);
+            if (this.userService.getCurrentUser() && !ignoreRoutes.includes(currentRoute)) {
+                // get persisted routes to decide where to redirect the logged in user to
+                this.auth
+                    .getInitialRequestUri()
+                    .pipe(switchMap((res) => this.auth.resetInitialRequestUri().pipe(map$1((_) => res))))
+                    .subscribe((res) => {
+                    const loginRes = res && !ignoreRoutes.includes(res.uri) ? res : null;
+                    if (loginRes)
+                        this.router.navigateByUrl(loginRes.uri);
+                });
+            }
+        }
+    }
+    routeWithBaseHref(r) {
+        return `${Utils.getBaseHref()}${r}`.replace('//', '/');
+    }
+    ngOnInit() {
+        this.#shell._init();
+        clientShellRoutes.forEach((route) => {
+            this.router.config.push(route);
+        });
+        this.router.resetConfig(this.router.config);
+        this._setCommands();
+        this.requestSubscription();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClientShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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)" } }, ngImport: i0, template: "<yuv-metadata-default-templates></yuv-metadata-default-templates>\n<!-- <yuv-focus-indicator /> -->\n\n<!-- gloabl busy indicator -->\n@if (busy$ | async) {\n  <div class=\"yuv-loader-linear\"></div>\n}\n<nav class=\"apps\" [inert]=\"asideOutlet.isActivated\" [attr.aria-label]=\"'yuv.shell.naviagtion.aria.label' | translate\">\n  <div class=\"app-icon\">\n    <button routerLink=\"/\" routerLinkActive=\"active\" [attr.aria-label]=\"'yuv.shell.logo.aria.label' | translate\">\n      <yvc-icon [svg]=\"shellConfig().icons!.appIcon!\"></yvc-icon>\n    </button>\n  </div>\n  <ul class=\"apps\">\n    @for (a of apps(); track a.path) {\n      <li>\n        <button routerLinkActive=\"active\" [routerLink]=\"a.path\" title=\"{{ a.title }}\">\n          <yvc-icon [svg]=\"a.icon\" title=\"{{ a.title }}\" *ngIf=\"a.icon\"></yvc-icon>\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\n  <section class=\"actions\">\n    @if (showNotifications()) {\n      <button [routerLink]=\"[{ outlets: { aside: 'notifications' } }]\" routerLinkActive=\"active\" title=\"{{ 'yuv.shell.notifications.title' | translate }}\">\n        <yvc-icon [svg]=\"shellConfig().icons!.notifications!\"></yvc-icon>\n        @if (newNotifications(); as note) {\n          <div class=\"badge {{ note.maxLevel }}\">{{ note.count }}</div>\n        }\n      </button>\n    }\n    <button [routerLink]=\"['/settings']\" routerLinkActive=\"active\" title=\"{{ 'yuv.shell.settings.title' | translate }}\">\n      <yvc-icon [svg]=\"shellConfig().icons!.settings!\"></yvc-icon>\n    </button>\n    <button (click)=\"appLogout()\" title=\"{{ 'yuv.shell.cmd.logout' | translate }}\"><yvc-icon [svg]=\"shellConfig().icons!.logout!\"></yvc-icon></button>\n  </section>\n</nav>\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{--client-shell-background-color: var(--main-background);--client-shell-bar-background-color: var(--panel-background);--client-shell-bar-icon-size: 24px;--client-shell-bar-button-padding: calc(var(--app-pane-padding) * .75);--client-shell-bar-width: calc(var(--client-shell-bar-icon-size) + var(--client-shell-bar-button-padding) * 2 + 1px);position:absolute;inset:0;overflow:hidden;display:flex;background-color:var(--client-shell-background-color)}:host .yuv-loader-linear{position:absolute}:host nav{background-color:var(--client-shell-bar-background-color);height:100%;overflow-y:auto;border-inline-end:1px solid var(--panel-divider-color);flex:0 0 auto;display:var(--nav-display, grid);grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"appIcon\" \"apps\" \"actions\"}:host nav button{padding:var(--client-shell-bar-button-padding);border-radius:0;border:0}:host nav button yvc-icon{--icon-size: var(--client-shell-bar-icon-size)}:host nav button.active{color:var(--color-accent)}:host nav .app-icon{grid-area:appIcon}:host nav ul.apps{grid-area:apps;list-style:none;margin:0;padding:0;overflow-y:auto}:host nav ul.apps button{position:relative}:host nav ul.apps button .badge{--badge-color: var(--color-accent);--badge-color-tone: var(--color-accent-tone);position:absolute;background-color:var(--badge-color);color:var(--badge-color-tone);font-size:10px;display:block;padding:1px 2px;border-radius:.25em;line-height:1em;top:calc(var(--app-pane-padding) / 4);right:calc(var(--app-pane-padding) / 4)}:host nav ul.apps button .badge.success{--badge-color: var(--color-success);--badge-color-tone: #fff}:host nav ul.apps button .badge.warning{--badge-color: var(--color-warning);--badge-color-tone: #fff}:host nav ul.apps button .badge.alert{--badge-color: var(--color-error);--badge-color-tone: #fff}:host nav ul.apps li a{display:block;padding:var(--app-pane-padding)}:host nav section.actions{grid-area:actions}:host nav section.actions button{position:relative}:host nav section.actions button .badge{--badge-color: var(--color-accent);--badge-color-tone: var(--color-accent-tone);position:absolute;background-color:var(--badge-color);color:var(--badge-color-tone);font-size:10px;display:block;padding:1px 2px;border-radius:.25em;line-height:1em;top:calc(var(--app-pane-padding) / 4);right:calc(var(--app-pane-padding) / 4)}:host nav section.actions button .badge.success{--badge-color: var(--color-success);--badge-color-tone: #fff}:host nav section.actions button .badge.warning{--badge-color: var(--color-warning);--badge-color-tone: #fff}:host nav section.actions button .badge.alert{--badge-color: var(--color-error);--badge-color-tone: #fff}:host main{flex:1;color:var(--text-color-body)}:host .asideOutlet{position:absolute;inset:0;padding-inline-start:var(--client-shell-bar-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]) nav{height:auto;grid-template-rows:1fr;grid-template-columns:auto 1fr auto;grid-template-areas:\"appIcon apps actions\";border:0;border-block-start:1px solid var(--panel-divider-color)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) nav .app-icon{display:none}:host-context([data-screen-size=s][data-screen-orientation=portrait]) nav ul.apps,:host-context([data-screen-size=s][data-screen-orientation=portrait]) nav section.actions{display:flex}: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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i2$1.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "component", type: MetadataDefaultTemplatesComponent, selector: "yuv-metadata-default-templates" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClientShellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-client-shell', standalone: true, imports: [NgIf, AsyncPipe, TranslateModule, RouterModule, YvcIconModule, MetadataDefaultTemplatesComponent], template: "<yuv-metadata-default-templates></yuv-metadata-default-templates>\n<!-- <yuv-focus-indicator /> -->\n\n<!-- gloabl busy indicator -->\n@if (busy$ | async) {\n  <div class=\"yuv-loader-linear\"></div>\n}\n<nav class=\"apps\" [inert]=\"asideOutlet.isActivated\" [attr.aria-label]=\"'yuv.shell.naviagtion.aria.label' | translate\">\n  <div class=\"app-icon\">\n    <button routerLink=\"/\" routerLinkActive=\"active\" [attr.aria-label]=\"'yuv.shell.logo.aria.label' | translate\">\n      <yvc-icon [svg]=\"shellConfig().icons!.appIcon!\"></yvc-icon>\n    </button>\n  </div>\n  <ul class=\"apps\">\n    @for (a of apps(); track a.path) {\n      <li>\n        <button routerLinkActive=\"active\" [routerLink]=\"a.path\" title=\"{{ a.title }}\">\n          <yvc-icon [svg]=\"a.icon\" title=\"{{ a.title }}\" *ngIf=\"a.icon\"></yvc-icon>\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\n  <section class=\"actions\">\n    @if (showNotifications()) {\n      <button [routerLink]=\"[{ outlets: { aside: 'notifications' } }]\" routerLinkActive=\"active\" title=\"{{ 'yuv.shell.notifications.title' | translate }}\">\n        <yvc-icon [svg]=\"shellConfig().icons!.notifications!\"></yvc-icon>\n        @if (newNotifications(); as note) {\n          <div class=\"badge {{ note.maxLevel }}\">{{ note.count }}</div>\n        }\n      </button>\n    }\n    <button [routerLink]=\"['/settings']\" routerLinkActive=\"active\" title=\"{{ 'yuv.shell.settings.title' | translate }}\">\n      <yvc-icon [svg]=\"shellConfig().icons!.settings!\"></yvc-icon>\n    </button>\n    <button (click)=\"appLogout()\" title=\"{{ 'yuv.shell.cmd.logout' | translate }}\"><yvc-icon [svg]=\"shellConfig().icons!.logout!\"></yvc-icon></button>\n  </section>\n</nav>\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{--client-shell-background-color: var(--main-background);--client-shell-bar-background-color: var(--panel-background);--client-shell-bar-icon-size: 24px;--client-shell-bar-button-padding: calc(var(--app-pane-padding) * .75);--client-shell-bar-width: calc(var(--client-shell-bar-icon-size) + var(--client-shell-bar-button-padding) * 2 + 1px);position:absolute;inset:0;overflow:hidden;display:flex;background-color:var(--client-shell-background-color)}:host .yuv-loader-linear{position:absolute}:host nav{background-color:var(--client-shell-bar-background-color);height:100%;overflow-y:auto;border-inline-end:1px solid var(--panel-divider-color);flex:0 0 auto;display:var(--nav-display, grid);grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"appIcon\" \"apps\" \"actions\"}:host nav button{padding:var(--client-shell-bar-button-padding);border-radius:0;border:0}:host nav button yvc-icon{--icon-size: var(--client-shell-bar-icon-size)}:host nav button.active{color:var(--color-accent)}:host nav .app-icon{grid-area:appIcon}:host nav ul.apps{grid-area:apps;list-style:none;margin:0;padding:0;overflow-y:auto}:host nav ul.apps button{position:relative}:host nav ul.apps button .badge{--badge-color: var(--color-accent);--badge-color-tone: var(--color-accent-tone);position:absolute;background-color:var(--badge-color);color:var(--badge-color-tone);font-size:10px;display:block;padding:1px 2px;border-radius:.25em;line-height:1em;top:calc(var(--app-pane-padding) / 4);right:calc(var(--app-pane-padding) / 4)}:host nav ul.apps button .badge.success{--badge-color: var(--color-success);--badge-color-tone: #fff}:host nav ul.apps button .badge.warning{--badge-color: var(--color-warning);--badge-color-tone: #fff}:host nav ul.apps button .badge.alert{--badge-color: var(--color-error);--badge-color-tone: #fff}:host nav ul.apps li a{display:block;padding:var(--app-pane-padding)}:host nav section.actions{grid-area:actions}:host nav section.actions button{position:relative}:host nav section.actions button .badge{--badge-color: var(--color-accent);--badge-color-tone: var(--color-accent-tone);position:absolute;background-color:var(--badge-color);color:var(--badge-color-tone);font-size:10px;display:block;padding:1px 2px;border-radius:.25em;line-height:1em;top:calc(var(--app-pane-padding) / 4);right:calc(var(--app-pane-padding) / 4)}:host nav section.actions button .badge.success{--badge-color: var(--color-success);--badge-color-tone: #fff}:host nav section.actions button .badge.warning{--badge-color: var(--color-warning);--badge-color-tone: #fff}:host nav section.actions button .badge.alert{--badge-color: var(--color-error);--badge-color-tone: #fff}:host main{flex:1;color:var(--text-color-body)}:host .asideOutlet{position:absolute;inset:0;padding-inline-start:var(--client-shell-bar-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]) nav{height:auto;grid-template-rows:1fr;grid-template-columns:auto 1fr auto;grid-template-areas:\"appIcon apps actions\";border:0;border-block-start:1px solid var(--panel-divider-color)}:host-context([data-screen-size=s][data-screen-orientation=portrait]) nav .app-icon{display:none}:host-context([data-screen-size=s][data-screen-orientation=portrait]) nav ul.apps,:host-context([data-screen-size=s][data-screen-orientation=portrait]) nav section.actions{display:flex}: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']]
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }] } });
+
+class AppLogoComponent {
+    constructor() {
+        this.icon = input();
+        this.label = input.required();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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: "@let ico = icon();\n@if(ico){\n<yvc-icon [svg]=\"ico\"></yvc-icon>\n}<span class=\"label\">{{label()}}</span>", styles: [":host{--band-color: var(--text-color-body);--band-height: var(--client-shell-bar-icon-size);--band-icon-size: 32px;--text-color: var(--main-background);--icon-color: var(--text-color);--icon-background-color: transparent;display:flex;align-items:center;padding:0 calc(var(--app-pane-padding) / 1) 0 calc(var(--app-pane-padding) / 2);height:calc(var(--client-shell-bar-icon-size));font-size:var(--font-caption);line-height:1em;cursor:pointer;background-color:var(--band-color);color:var(--text-color)}:host yvc-icon{--icon-size: var(--band-icon-size);grid-column:2;grid-row:1;border-radius:4px;margin-inline-end:calc(var(--app-pane-padding) / 2);opacity:.5;color:var(--icon-color);background-color:var(--icon-background-color)}:host .label{line-height:1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i2$1.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppLogoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-app-logo', standalone: true, imports: [CommonModule, YvcIconModule], template: "@let ico = icon();\n@if(ico){\n<yvc-icon [svg]=\"ico\"></yvc-icon>\n}<span class=\"label\">{{label()}}</span>", styles: [":host{--band-color: var(--text-color-body);--band-height: var(--client-shell-bar-icon-size);--band-icon-size: 32px;--text-color: var(--main-background);--icon-color: var(--text-color);--icon-background-color: transparent;display:flex;align-items:center;padding:0 calc(var(--app-pane-padding) / 1) 0 calc(var(--app-pane-padding) / 2);height:calc(var(--client-shell-bar-icon-size));font-size:var(--font-caption);line-height:1em;cursor:pointer;background-color:var(--band-color);color:var(--text-color)}:host yvc-icon{--icon-size: var(--band-icon-size);grid-column:2;grid-row:1;border-radius:4px;margin-inline-end:calc(var(--app-pane-padding) / 2);opacity:.5;color:var(--icon-color);background-color:var(--icon-background-color)}:host .label{line-height:1em}\n"] }]
+        }] });
+
+class ManageFlavorsComponent {
+    constructor() {
+        this.#overlayRef = inject(YvcOverlayRef);
+        this.#shell = inject(ShellService);
+        this.#dmsService = inject(DmsService);
+        this.item = this.#overlayRef.data;
+        this.busy = signal(false);
+        this.appliedFlavors = [];
+        this.applicableFlavors = [];
+    }
+    #overlayRef;
+    #shell;
+    #dmsService;
+    applyFlavor(flavor) {
+        this.busy.set(true);
+        this.#shell.triggerApplyObjectFlavor(this.item, flavor).subscribe(() => {
+            this.#overlayRef.close();
+            this.busy.set(false);
+        });
+    }
+    removeFlavor(flavor) {
+        this.busy.set(true);
+        this.#shell.removeObjectFlavor(this.item, flavor).subscribe(() => {
+            this.#overlayRef.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() {
+        if (this.#overlayRef)
+            this.#overlayRef.close();
+    }
+    ngOnInit() {
+        this.#refreshDmsObject();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ManageFlavorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ManageFlavorsComponent, isStandalone: true, selector: "yuv-manage-flavors", ngImport: i0, template: "<header>\n  <h2>{{ 'yuv.shell.action.manage-flavors.title' | translate }}</h2>\n  <p>{{ 'yuv.shell.action.manage-flavors.text' | translate }}</p>\n</header>\n<main [yuvBusyOverlay]=\"busy()\">\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 class=\"secondary\" (click)=\"removeFlavor(f)\">{{ 'yuv.shell.action.manage-flavors.applicable.button.remove' | translate }}</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 class=\"secondary\" (click)=\"applyFlavor(f)\">{{ 'yuv.shell.action.manage-flavors.applied.button.apply' | translate }}</button>\n        </li>\n      }\n    </ul>\n  }\n</main>\n<footer>\n  <button class=\"secondary\" (click)=\"cancel()\">{{ 'yuv.shell.action.manage-flavors.button.cancel' | translate }}</button>\n</footer>\n", styles: [":host{display:flex;flex-flow:column;padding:var(--app-pane-padding)}:host header{flex:0 0 auto}:host header h2{padding:0;font-weight:400;font-size:var(--font-headline);margin:0 0 var(--app-pane-padding) 0}:host header p{max-width:42ch;line-height:1.3em}:host main{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:calc(var(--app-pane-padding) / 2);align-items:center;border:1px solid var(--panel-divider-color);margin-block-end:2px;padding:calc(var(--app-pane-padding) / 4)}:host main li button{padding:calc(var(--app-pane-padding) / 4) calc(var(--app-pane-padding) / 2)}:host footer{flex:0 0 auto;margin-block-start:var(--app-pane-padding)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ManageFlavorsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-manage-flavors', standalone: true, imports: [CommonModule, ListComponent, BusyOverlayDirective, TranslateModule, ListItemDirective, FlavorChipComponent], template: "<header>\n  <h2>{{ 'yuv.shell.action.manage-flavors.title' | translate }}</h2>\n  <p>{{ 'yuv.shell.action.manage-flavors.text' | translate }}</p>\n</header>\n<main [yuvBusyOverlay]=\"busy()\">\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 class=\"secondary\" (click)=\"removeFlavor(f)\">{{ 'yuv.shell.action.manage-flavors.applicable.button.remove' | translate }}</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 class=\"secondary\" (click)=\"applyFlavor(f)\">{{ 'yuv.shell.action.manage-flavors.applied.button.apply' | translate }}</button>\n        </li>\n      }\n    </ul>\n  }\n</main>\n<footer>\n  <button class=\"secondary\" (click)=\"cancel()\">{{ 'yuv.shell.action.manage-flavors.button.cancel' | translate }}</button>\n</footer>\n", styles: [":host{display:flex;flex-flow:column;padding:var(--app-pane-padding)}:host header{flex:0 0 auto}:host header h2{padding:0;font-weight:400;font-size:var(--font-headline);margin:0 0 var(--app-pane-padding) 0}:host header p{max-width:42ch;line-height:1.3em}:host main{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:calc(var(--app-pane-padding) / 2);align-items:center;border:1px solid var(--panel-divider-color);margin-block-end:2px;padding:calc(var(--app-pane-padding) / 4)}:host main li button{padding:calc(var(--app-pane-padding) / 4) calc(var(--app-pane-padding) / 2)}:host footer{flex:0 0 auto;margin-block-start:var(--app-pane-padding)}\n"] }]
+        }] });
+
+class ManageFlavorsAction extends AbstractContextAction {
+    constructor() {
+        super(...arguments);
+        this.#shell = inject(ShellService);
+        this.#overlay = inject(YvcOverlayService);
+        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 = {
+            pattern: '*'
+        };
+    }
+    #shell;
+    #overlay;
+    isExecutable(items) {
+        const item = items[0];
+        return of(item && !!item.permissions?.writeIndexData && !!item.content && this.#shell.getApplicableObjectFlavors(item.content.mimeType).length > 0);
+    }
+    run(items) {
+        this.#overlay.open(ManageFlavorsComponent, items[0], {
+            width: '400px',
+            maxWidth: '90vw',
+        });
+        return of(true);
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AppLogoComponent, ClientShellComponent, InertDirective, ManageFlavorsAction, clientShellRoutes };
+//# sourceMappingURL=yuuvis-client-shell.mjs.map