@yuuvis/client-shell 2.20.1 → 3.0.0-beta.20.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/{yuuvis-client-shell-dashboard.component-H2HguezA.mjs → yuuvis-client-shell-dashboard.component-BZUsO5MY.mjs} +4 -4
- package/fesm2022/{yuuvis-client-shell-dashboard.component-H2HguezA.mjs.map → yuuvis-client-shell-dashboard.component-BZUsO5MY.mjs.map} +1 -1
- package/fesm2022/{yuuvis-client-shell-settings.component-BdT6V3dh.mjs → yuuvis-client-shell-settings.component-CWJzbwdP.mjs} +21 -20
- package/fesm2022/yuuvis-client-shell-settings.component-CWJzbwdP.mjs.map +1 -0
- package/fesm2022/yuuvis-client-shell-widget-dashboard.mjs +5 -6
- package/fesm2022/yuuvis-client-shell-widget-dashboard.mjs.map +1 -1
- package/fesm2022/yuuvis-client-shell.mjs +89 -91
- package/fesm2022/yuuvis-client-shell.mjs.map +1 -1
- package/index.d.ts +155 -12
- package/package.json +7 -7
- package/widget-dashboard/index.d.ts +29 -4
- package/fesm2022/yuuvis-client-shell-settings.component-BdT6V3dh.mjs.map +0 -1
- package/lib/actions/manage-flavors/manage-flavors.action.d.ts +0 -17
- package/lib/actions/manage-flavors/manage-flavors.component.d.ts +0 -18
- package/lib/client-shell.component.d.ts +0 -59
- package/lib/client-shell.module.d.ts +0 -7
- package/lib/components/app-header/app-header-slot.directive.d.ts +0 -10
- package/lib/components/app-header/app-header.component.d.ts +0 -14
- package/lib/components/shell-logo/shell-logo.component.d.ts +0 -5
- package/lib/components/sidebar-nav/sidebar-nav.component.d.ts +0 -35
- package/lib/dialog-tracking.d.ts +0 -11
- package/lib/directives/inert.directive.d.ts +0 -8
- package/lib/lib.routes.d.ts +0 -2
- package/lib/pages/dashboard/dashboard.component.d.ts +0 -5
- package/lib/pages/notifications/notifications.component.d.ts +0 -27
- package/lib/pages/settings/settings.component.d.ts +0 -37
- package/lib/pages/settings/settings.model.d.ts +0 -9
- package/lib/services/client-shell/client-shell.service.d.ts +0 -16
- package/lib/services/shell-action-buttons/provide.shell-action-buttons.d.ts +0 -3
- package/lib/services/shell-action-buttons/shell-action-buttons.interface.d.ts +0 -13
- package/lib/services/shell-widgets/shell-widgets.service.d.ts +0 -9
- package/widget-dashboard/lib/lib.routes.d.ts +0 -2
- package/widget-dashboard/lib/provide.widget-dashboard.d.ts +0 -3
- package/widget-dashboard/lib/widget-dashboard.component.d.ts +0 -12
- package/widget-dashboard/lib/widget-dashboard.interface.d.ts +0 -7
|
@@ -1,36 +1,35 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, signal, Component, effect, untracked, Injectable, InjectionToken, computed, ChangeDetectionStrategy, ElementRef,
|
|
2
|
+
import { inject, signal, Component, effect, untracked, Injectable, InjectionToken, computed, ChangeDetectionStrategy, ElementRef, input, makeEnvironmentProviders, TemplateRef, Directive, NgModule } from '@angular/core';
|
|
3
3
|
import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
|
|
4
|
-
import
|
|
5
|
-
import { DmsService, TranslateService, TranslateModule, SystemType, ConfigService, SafeHtmlPipe, UserService, Utils, LocaleDatePipe, AuthService, UserRoles } from '@yuuvis/client-core';
|
|
4
|
+
import { DmsService, TranslateService, TranslatePipe, SystemType, ConfigService, SafeHtmlPipe, UserService, Utils, LocaleDatePipe, AuthService, UserRoles } from '@yuuvis/client-core';
|
|
6
5
|
import { AbstractContextAction, ACTION_ICON, SelectionRange } from '@yuuvis/client-framework/actions';
|
|
7
6
|
import { ShellService, ShellNotificationsService, CommandPaletteService } from '@yuuvis/client-shell-core';
|
|
8
7
|
import { switchMap, of, tap, filter, debounceTime, map } from 'rxjs';
|
|
9
|
-
import * as
|
|
10
|
-
import { CommonModule, NgTemplateOutlet, NgClass, AsyncPipe } from '@angular/common';
|
|
11
|
-
import * as i3$1 from '@angular/material/button';
|
|
8
|
+
import * as i3 from '@angular/material/button';
|
|
12
9
|
import { MatButtonModule } from '@angular/material/button';
|
|
13
10
|
import * as i1 from '@angular/material/icon';
|
|
14
11
|
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
|
|
15
|
-
import * as
|
|
12
|
+
import * as i4 from '@angular/material/tooltip';
|
|
16
13
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
17
14
|
import { ConfirmService, BusyOverlayDirective, DialogComponent, LightDismissDirective, LayoutSettingsService } from '@yuuvis/client-framework/common';
|
|
18
|
-
import * as i5 from '@yuuvis/client-framework/list';
|
|
15
|
+
import * as i5$1 from '@yuuvis/client-framework/list';
|
|
19
16
|
import { ListItemDirective, YuvListModule } from '@yuuvis/client-framework/list';
|
|
20
17
|
import { DefaultApplyFlavorComponent, FlavorChipComponent } from '@yuuvis/client-framework/object-flavor';
|
|
21
18
|
import { YmtButtonDirective, DeviceService, YmtIconButtonDirective } from '@yuuvis/material';
|
|
19
|
+
import * as i1$1 from '@angular/common';
|
|
20
|
+
import { CommonModule, NgTemplateOutlet, NgClass, AsyncPipe } from '@angular/common';
|
|
22
21
|
import { MatProgressBar } from '@angular/material/progress-bar';
|
|
23
|
-
import * as
|
|
22
|
+
import * as i5 from '@angular/router';
|
|
24
23
|
import { Router, NavigationEnd, RouterModule } from '@angular/router';
|
|
25
24
|
import { SwPush } from '@angular/service-worker';
|
|
26
|
-
import * as i2$
|
|
25
|
+
import * as i2$1 from '@yuuvis/client-framework/metadata-form-defaults';
|
|
27
26
|
import { YuvMetadataFormDefaultsModule } from '@yuuvis/client-framework/metadata-form-defaults';
|
|
28
27
|
import { filter as filter$1, map as map$1, tap as tap$1, catchError, switchMap as switchMap$1 } from 'rxjs/operators';
|
|
29
28
|
import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
|
|
30
|
-
import * as i2
|
|
29
|
+
import * as i2 from '@yuuvis/client-framework/overflow-hidden';
|
|
31
30
|
import { YuvOverflowHiddenModule } from '@yuuvis/client-framework/overflow-hidden';
|
|
32
31
|
import { MatDivider } from '@angular/material/divider';
|
|
33
|
-
import * as
|
|
32
|
+
import * as i1$2 from '@angular/material/menu';
|
|
34
33
|
import { MatMenuModule } from '@angular/material/menu';
|
|
35
34
|
import { OverflowMenuComponent } from '@yuuvis/client-framework/overflow-menu';
|
|
36
35
|
import { CdkTrapFocus } from '@angular/cdk/a11y';
|
|
@@ -46,7 +45,7 @@ class ManageFlavorsComponent {
|
|
|
46
45
|
this.item = this.#dialogData;
|
|
47
46
|
this.#confirm = inject(ConfirmService);
|
|
48
47
|
this.translate = inject(TranslateService);
|
|
49
|
-
this.busy = signal(false);
|
|
48
|
+
this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : []));
|
|
50
49
|
this.appliedFlavors = [];
|
|
51
50
|
this.applicableFlavors = [];
|
|
52
51
|
}
|
|
@@ -70,11 +69,11 @@ class ManageFlavorsComponent {
|
|
|
70
69
|
.confirm({
|
|
71
70
|
title: this.translate.instant('yuv.shell.action.manage-flavors.applicable.button.remove.tooltip'),
|
|
72
71
|
message: this.translate.instant('yuv.object-flavor.flavor.remove.confirm.message', {
|
|
73
|
-
flavor: this.#shell.getFlavorLabel(flavor.id)
|
|
72
|
+
flavor: this.#shell.getFlavorLabel(flavor.id)
|
|
74
73
|
}),
|
|
75
74
|
confirmLabel: this.translate.instant('yuv.shell.action.manage-flavors.button.remove')
|
|
76
75
|
})
|
|
77
|
-
.pipe(switchMap((confirmed) =>
|
|
76
|
+
.pipe(switchMap((confirmed) => confirmed ? this.#shell.removeObjectFlavor(this.item, flavor) : of(undefined)))
|
|
78
77
|
.subscribe((res) => {
|
|
79
78
|
if (res !== undefined)
|
|
80
79
|
this.#dialogRef.close();
|
|
@@ -103,17 +102,16 @@ class ManageFlavorsComponent {
|
|
|
103
102
|
ngOnInit() {
|
|
104
103
|
this.#refreshDmsObject();
|
|
105
104
|
}
|
|
106
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
107
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
105
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ManageFlavorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
106
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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 @if (!f.preventRemove) {\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 }\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;overflow:hidden}: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: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { 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: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: ["headertitle", "headertitel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
108
107
|
}
|
|
109
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
108
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ManageFlavorsComponent, decorators: [{
|
|
110
109
|
type: Component,
|
|
111
110
|
args: [{ selector: 'yuv-manage-flavors', standalone: true, imports: [
|
|
112
|
-
CommonModule,
|
|
113
111
|
BusyOverlayDirective,
|
|
114
112
|
MatIconModule,
|
|
115
113
|
MatTooltipModule,
|
|
116
|
-
|
|
114
|
+
TranslatePipe,
|
|
117
115
|
ListItemDirective,
|
|
118
116
|
FlavorChipComponent,
|
|
119
117
|
DialogComponent,
|
|
@@ -169,7 +167,7 @@ class ClientShellService {
|
|
|
169
167
|
constructor() {
|
|
170
168
|
this.#router = inject(Router);
|
|
171
169
|
this.#shell = inject(ShellService);
|
|
172
|
-
this.appHeaderSlots = signal({});
|
|
170
|
+
this.appHeaderSlots = signal({}, ...(ngDevMode ? [{ debugName: "appHeaderSlots" }] : []));
|
|
173
171
|
this.apps = this.#shell.apps;
|
|
174
172
|
this.#appsEffect = effect(() => {
|
|
175
173
|
const apps = this.apps();
|
|
@@ -180,9 +178,9 @@ class ClientShellService {
|
|
|
180
178
|
this.currentApp.set(app);
|
|
181
179
|
});
|
|
182
180
|
}
|
|
183
|
-
});
|
|
184
|
-
this.currentApp = signal(undefined);
|
|
185
|
-
this.appHeader = signal(false);
|
|
181
|
+
}, ...(ngDevMode ? [{ debugName: "#appsEffect" }] : []));
|
|
182
|
+
this.currentApp = signal(undefined, ...(ngDevMode ? [{ debugName: "currentApp" }] : []));
|
|
183
|
+
this.appHeader = signal(false, ...(ngDevMode ? [{ debugName: "appHeader" }] : []));
|
|
186
184
|
this.#router.events
|
|
187
185
|
.pipe(takeUntilDestroyed(), filter((e) => e instanceof NavigationEnd))
|
|
188
186
|
.subscribe((e) => this.#getAppFromUrl(this.#router.routerState.snapshot.url));
|
|
@@ -213,10 +211,10 @@ class ClientShellService {
|
|
|
213
211
|
const style = window.getComputedStyle(document.getElementsByTagName('body')[0]);
|
|
214
212
|
return vars.reduce((prev, curr) => ({ ...prev, [curr]: style.getPropertyValue(curr) }), {});
|
|
215
213
|
}
|
|
216
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
217
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
214
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ClientShellService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
215
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ClientShellService, providedIn: 'root' }); }
|
|
218
216
|
}
|
|
219
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
217
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ClientShellService, decorators: [{
|
|
220
218
|
type: Injectable,
|
|
221
219
|
args: [{
|
|
222
220
|
providedIn: 'root'
|
|
@@ -224,13 +222,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
224
222
|
}], ctorParameters: () => [] });
|
|
225
223
|
|
|
226
224
|
class ShellLogoComponent {
|
|
227
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
228
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
225
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ShellLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
226
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: ShellLogoComponent, isStandalone: true, selector: "yuv-shell-logo", host: { classAttribute: "shell-logo" }, ngImport: i0, template: "<a halo-offset=\"0\" class=\"shell-logo__to-root\" routerLink=\"/\" [attr.aria-label]=\"'yuv.shell.logo.aria.label' | translate\">\n <mat-icon class=\"shell-logo__icon\" svgIcon=\"shellIcons:app_logo\"></mat-icon>\n</a>\n", styles: [":host.shell-logo{display:block;aspect-ratio:1/1}.shell-logo__to-root{all:unset;cursor:pointer;display:block;height:100%}.shell-logo__icon{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
229
227
|
}
|
|
230
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
228
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ShellLogoComponent, decorators: [{
|
|
231
229
|
type: Component,
|
|
232
|
-
args: [{ selector: 'yuv-shell-logo', standalone: true, imports: [
|
|
233
|
-
|
|
230
|
+
args: [{ selector: 'yuv-shell-logo', standalone: true, imports: [MatIconModule, RouterModule, TranslatePipe], host: {
|
|
231
|
+
class: 'shell-logo'
|
|
234
232
|
}, template: "<a halo-offset=\"0\" class=\"shell-logo__to-root\" routerLink=\"/\" [attr.aria-label]=\"'yuv.shell.logo.aria.label' | translate\">\n <mat-icon class=\"shell-logo__icon\" svgIcon=\"shellIcons:app_logo\"></mat-icon>\n</a>\n", styles: [":host.shell-logo{display:block;aspect-ratio:1/1}.shell-logo__to-root{all:unset;cursor:pointer;display:block;height:100%}.shell-logo__icon{width:100%;height:100%}\n"] }]
|
|
235
233
|
}] });
|
|
236
234
|
|
|
@@ -258,10 +256,10 @@ class YuvAppHeaderComponent {
|
|
|
258
256
|
this.notificationsSlot = slots['notifications'] || null;
|
|
259
257
|
});
|
|
260
258
|
}
|
|
261
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
262
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
259
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvAppHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
260
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: YuvAppHeaderComponent, isStandalone: true, selector: "yuv-app-header", host: { properties: { "class.small-screen": "smallScreenLayout()" } }, ngImport: i0, template: "@let a = app();\n@if (a) {\n <header\n class=\"app-header\"\n [ngClass]=\"{\n 'has-actions': !!actionsSlot,\n 'has-search': !!searchSlot,\n 'has-notifications': !!notificationsSlot\n }\"\n aria-labelledby=\"yuv-app-header\"\n >\n @if (busy$ | async) {\n <mat-progress-bar mode=\"indeterminate\" class=\"progress-bar\"></mat-progress-bar>\n }\n <yuv-shell-logo />\n <yuv-overflow-hidden>\n <ng-template #yuvDefaultSlot>\n <a class=\"name\" [routerLink]=\"app()?.path\">\n <span class=\"title\" id=\"yuv-app-header\">\n {{ a.title }}\n <span class=\"claim\">{{ a.options?.appClaim }}</span>\n </span>\n </a>\n </ng-template>\n </yuv-overflow-hidden>\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 </header>\n}\n", styles: [":host.small-screen .app-header{grid-template-areas:\"actions actions actions search notifications\"}:host.small-screen yuv-shell-logo,:host.small-screen .name{display:none}:host .app-header{position:relative;display:grid;grid-template-columns:var(--yuv-app-header-height, var(--ymt-sizing-6xl)) auto 1fr auto auto;grid-template-rows:var(--yuv-app-header-height, var(--ymt-sizing-6xl));grid-template-areas:\"logo name actions search notifications\";align-items:center;background-color:var(--ymt-bar-surface);color:var(--ymt-on-bar-surface);box-shadow:0 0 0 1px var(--ymt-outline-variant);box-sizing:border-box;padding-inline-end:var(--ymt-spacing-xl)}:host mat-progress-bar{position:absolute;inset-block-end:0}:host .name{grid-area:name;display:inline-block;padding-inline-end:var(--ymt-spacing-3xl);padding-inline-start:var(--ymt-spacing-m);color:currentColor;text-decoration:none;white-space:nowrap;min-width:128px}:host .name .title{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ymt-spacing-2xs);font:var(--ymt-font-app-name);letter-spacing:var(--ymt-font-app-name-tracking);margin:0;line-height:1}:host .name .claim{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host .actions{grid-area:actions}:host .search{grid-area:search}:host .notifications{grid-area:notifications}:host .app-header.has-actions .actions{padding-inline-start:var(--ymt-spacing-xl);padding-inline-end:var(--ymt-spacing-l);border-inline-start:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-inline-end:var(--ymt-outline-width) solid var(--ymt-outline-variant)}:host .app-header.has-search .search{padding-inline-start:var(--ymt-spacing-m)}:host .app-header.has-notifications .notifications{padding-inline-start:var(--ymt-spacing-xl)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: YuvOverflowHiddenModule }, { kind: "component", type: i2.OverflowHiddenComponent, selector: "yuv-overflow-hidden" }, { kind: "component", type: ShellLogoComponent, selector: "yuv-shell-logo" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
|
|
263
261
|
}
|
|
264
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
262
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvAppHeaderComponent, decorators: [{
|
|
265
263
|
type: Component,
|
|
266
264
|
args: [{ selector: 'yuv-app-header', imports: [CommonModule, MatProgressBar, MatIconModule, YuvOverflowHiddenModule, ShellLogoComponent, RouterModule], host: {
|
|
267
265
|
'[class.small-screen]': 'smallScreenLayout()'
|
|
@@ -304,8 +302,9 @@ class SidebarNavComponent {
|
|
|
304
302
|
this.#alwaysShowNotifications = this.#shellNotifications.alwaysShowNotifications;
|
|
305
303
|
this.showNotifications = computed(() => {
|
|
306
304
|
const notifications = this.newNotifications();
|
|
307
|
-
return this.#alwaysShowNotifications ||
|
|
308
|
-
|
|
305
|
+
return (this.#alwaysShowNotifications ||
|
|
306
|
+
!!(notifications && Object.hasOwnProperty.call(notifications, 'count') && notifications.count > 0));
|
|
307
|
+
}, ...(ngDevMode ? [{ debugName: "showNotifications" }] : []));
|
|
309
308
|
this.app = this.css.currentApp;
|
|
310
309
|
this.newNotifications = toSignal(this.#shellNotifications.shellNotifications$.pipe(map((notifications) => {
|
|
311
310
|
let maxLevel = 'info';
|
|
@@ -314,7 +313,7 @@ class SidebarNavComponent {
|
|
|
314
313
|
return count > 0 ? { maxLevel, count } : undefined;
|
|
315
314
|
})));
|
|
316
315
|
this.#shellApps = this.#shell.apps;
|
|
317
|
-
this.navApps = computed(() => this.#shellApps().filter((a) => !a.options?.hideFromNav));
|
|
316
|
+
this.navApps = computed(() => this.#shellApps().filter((a) => !a.options?.hideFromNav), ...(ngDevMode ? [{ debugName: "navApps" }] : []));
|
|
318
317
|
this.navMenuItems = computed(() => {
|
|
319
318
|
const currentApp = this.css.currentApp();
|
|
320
319
|
const namespace = this.#shell.shellConfig().shellIconNamespace;
|
|
@@ -326,7 +325,7 @@ class SidebarNavComponent {
|
|
|
326
325
|
active: currentApp?.path === a.path,
|
|
327
326
|
callback: () => void this.#router.navigate([a.path])
|
|
328
327
|
}));
|
|
329
|
-
});
|
|
328
|
+
}, ...(ngDevMode ? [{ debugName: "navMenuItems" }] : []));
|
|
330
329
|
this.registerIcons = computed(() => {
|
|
331
330
|
const apps = this.#shellApps();
|
|
332
331
|
const config = this.#shell.shellConfig();
|
|
@@ -343,7 +342,7 @@ class SidebarNavComponent {
|
|
|
343
342
|
: false;
|
|
344
343
|
});
|
|
345
344
|
return allRegistered;
|
|
346
|
-
});
|
|
345
|
+
}, ...(ngDevMode ? [{ debugName: "registerIcons" }] : []));
|
|
347
346
|
this.translate.onLangChange.subscribe(() => this._setCommands(true));
|
|
348
347
|
window.addEventListener('storage', (evt) => {
|
|
349
348
|
if (evt.key === this.APP_LOGOUT_EVENT_KEY) {
|
|
@@ -388,13 +387,13 @@ class SidebarNavComponent {
|
|
|
388
387
|
ngOnInit() {
|
|
389
388
|
this._setCommands();
|
|
390
389
|
}
|
|
391
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
392
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
390
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SidebarNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
391
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: SidebarNavComponent, isStandalone: true, selector: "yuv-sidebar-nav", host: { properties: { "class.small-screen": "smallScreenLayout()" }, classAttribute: "sidenav" }, ngImport: i0, template: "<nav class=\"sidenav\" [attr.aria-label]=\"'yuv.shell.side-nav.aria.label' | translate\">\n @let iconsRegistered = registerIcons();\n @let showAppHeader = css.appHeader();\n\n @let a = app();\n @if (smallScreenLayout()) {\n <div class=\"menu\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon>menu</mat-icon>\n </button>\n @if (a) {\n <span class=\"app-label\">{{ a.title }}</span>\n }\n </div>\n\n @if (showNotifications()) {\n <div class=\"notifications\">\n <ng-container *ngTemplateOutlet=\"notificationButton; context: { $implicit: newNotifications() }\"></ng-container>\n </div>\n }\n <mat-menu #menu=\"matMenu\" class=\"sort-menu\" [ariaLabel]=\"'yuv.sort.tooltip' | translate\">\n @for (a of navApps(); track a.path) {\n <button mat-menu-item [routerLink]=\"a.path\">\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 <span>{{ getAppTitle(a) }}</span>\n </button>\n }\n\n <mat-divider></mat-divider>\n\n @for (customButton of customActionButtons; track customButton.iconName) {\n <button mat-menu-item (click)=\"handleCustomActionButtonClick(customButton)\">\n <mat-icon>{{ customButton.iconName }}</mat-icon>\n <span>{{ customButton.tooltip ? (customButton.tooltip | translate) : '' }}</span>\n </button>\n }\n <button mat-menu-item [routerLink]=\"['/settings']\" routerLinkActive=\"active\">\n <mat-icon>settings</mat-icon>\n <span>{{ 'yuv.shell.settings.title' | translate }}</span>\n </button>\n <button mat-menu-item (click)=\"appLogout()\">\n <mat-icon>power_settings_new</mat-icon>\n <span>{{ 'yuv.shell.cmd.logout' | translate }}</span>\n </button>\n </mat-menu>\n } @else {\n <div class=\"logo-container\">\n @if (iconsRegistered && !showAppHeader) {\n <yuv-shell-logo slot=\"shell-logo\" class=\"shell-nav__shell-logo\" />\n }\n </div>\n <div class=\"app-switcher-container\">\n <yuv-overflow-menu [vertical]=\"true\" [menuItems]=\"navMenuItems()\" />\n </div>\n <div class=\"actions-container\">\n @if (showNotifications()) {\n <ng-container *ngTemplateOutlet=\"notificationButton; context: { $implicit: newNotifications() }\"></ng-container>\n }\n @for (customButton of customActionButtons; track customButton.iconName) {\n <button\n class=\"shell-nav__actions-button\"\n ymt-icon-button\n (click)=\"handleCustomActionButtonClick(customButton)\"\n matTooltipPosition=\"after\"\n [matTooltip]=\"customButton.tooltip ? (customButton.tooltip | translate) : ''\"\n >\n <mat-icon>{{ customButton.iconName }}</mat-icon>\n </button>\n }\n <button\n class=\"shell-nav__actions-button\"\n ymt-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\" ymt-icon-button (click)=\"appLogout()\" [matTooltip]=\"'yuv.shell.cmd.logout' | translate\">\n <mat-icon>power_settings_new</mat-icon>\n </button>\n </div>\n }\n</nav>\n\n<ng-template #notificationButton let-note>\n <button\n class=\"shell-nav__actions-button notes {{ note?.maxLevel }}\"\n ymt-icon-button\n [attr.data-count]=\"note ? (note.count < 100 ? note.count : '99+') : null\"\n [ngClass]=\"{ badge: !!note }\"\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 </button>\n</ng-template>\n", styles: [":host{display:block}:host button.badge{--badge-background: var(--mat-sys-primary-container);--badge-color: var(--mat-sys-on-primary-container)}:host button.badge.alert{--badge-background: var(--ymt-danger);--badge-color: var(--ymt-on-danger)}:host button.badge.warning{--badge-background: var(--ymt-warning);--badge-color: var(--ymt-on-warning)}:host button.badge.success{--badge-background: var(--ymt-success);--badge-color: var(--ymt-on-success)}:host button.badge:before{content:attr(data-count);background-color:var(--badge-background);color:var(--badge-color);outline:1px solid var(--badge-color);padding:0 .25em;position:absolute;inset-block-start:0;inset-inline-end:0;max-width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:var(--ymt-font-body-subtle-size);z-index:10;border-radius:var(--ymt-corner-full);pointer-events:none}:host.small-screen nav{display:flex;align-items:center;justify-content:space-between;width:100vw;padding:var(--ymt-sizing-s) var(--ymt-sizing-m);gap:var(--ymt-spacing-s)}:host.small-screen nav .menu{display:flex;align-items:center;gap:var(--ymt-spacing-s);flex:1 1 auto;overflow:hidden}:host.small-screen nav .menu .app-label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host.small-screen nav .notifications{display:flex;align-items:center}:host:not(.small-screen) .sidenav{height:100%;width:var(--yuv-side-nav-width, var(--ymt-sizing-6xl));background:transparent;color:inherit;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:var(--ymt-spacing-m)}:host:not(.small-screen) .sidenav .logo-container{width:100%}:host:not(.small-screen) .sidenav .app-switcher-container{flex:1 1 0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ymt-spacing-xs);scrollbar-width:none;-ms-overflow-style:none}:host:not(.small-screen) .sidenav .app-switcher-container yuv-overflow-menu{height:100%;--menu-item-gap: 18px}:host:not(.small-screen) .sidenav .app-switcher-container::-webkit-scrollbar{display:none}:host:not(.small-screen) .sidenav .actions-container{justify-self:flex-end;border-top:var(--ymt-outline-width) solid var(--ymt-outline-variant);display:flex;flex-direction:column;gap:var(--ymt-spacing-s);padding:var(--ymt-spacing-m) 0}\n"], dependencies: [{ kind: "component", type: ShellLogoComponent, selector: "yuv-shell-logo" }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: OverflowMenuComponent, selector: "yuv-overflow-menu", inputs: ["overflowIcon", "groupLabels", "menuItems", "vertical"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
393
392
|
}
|
|
394
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
393
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SidebarNavComponent, decorators: [{
|
|
395
394
|
type: Component,
|
|
396
395
|
args: [{ selector: 'yuv-sidebar-nav', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
397
|
-
|
|
396
|
+
TranslatePipe,
|
|
398
397
|
ShellLogoComponent,
|
|
399
398
|
YmtIconButtonDirective,
|
|
400
399
|
MatMenuModule,
|
|
@@ -420,7 +419,7 @@ class NotificationsPageComponent {
|
|
|
420
419
|
this._focusedIndex = -1;
|
|
421
420
|
this._notificationIDs = [];
|
|
422
421
|
this.notifications = toSignal(this.shellNotifications.shellNotifications$);
|
|
423
|
-
this.notificationsIdEffect = effect(() => (this._notificationIDs = (this.notifications() || []).map((n) => n.id)));
|
|
422
|
+
this.notificationsIdEffect = effect(() => (this._notificationIDs = (this.notifications() || []).map((n) => n.id)), ...(ngDevMode ? [{ debugName: "notificationsIdEffect" }] : []));
|
|
424
423
|
this.icons = {
|
|
425
424
|
note: YUV_ICONS.notification
|
|
426
425
|
};
|
|
@@ -466,10 +465,10 @@ class NotificationsPageComponent {
|
|
|
466
465
|
fc[0].focus();
|
|
467
466
|
});
|
|
468
467
|
}
|
|
469
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
470
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
468
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NotificationsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
469
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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\">\n <mat-icon>{{ n.icon || 'notifications' }}</mat-icon>\n </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 <button ymt-icon-button icon-button-size=\"small\" (click)=\"remove(n.id)\" matTooltip=\"{{ 'yuv.shell.notifications.button.remove' | translate }}\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n }\n </yuv-list>\n\n <div class=\"actions\">\n <button mat-button [hidden]=\"!notifications()?.length\" (click)=\"removeAll()\">\n {{ 'yuv.shell.notifications.button.remove.all' | translate }}\n <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;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr auto;grid-template-areas:\"title close\" \"list list\" \"actions actions\";gap:var(--ymt-spacing-m);max-width:30vw;min-width:300px;animation:dialogAppear .2s ease-in-out}:host .notifications h2{color:var(--ymt-text-color-subtle);grid-area:title;margin:0;padding:var(--ymt-spacing-m);align-self:center;text-overflow:ellipsis;overflow:hidden}:host .notifications .actions{grid-area:actions;display:flex;justify-content:start;padding:var(--ymt-spacing-xs) var(--ymt-spacing-m);border-block-start:1px solid var(--ymt-outline-variant)}:host .notifications .close{grid-area:close;margin:var(--ymt-spacing-m)}: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-background-color: transparent;--level-color: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:auto 1fr auto;grid-template-areas:\". received actions\" \"icon title actions\" \". description description\" \". meta meta\";row-gap:var(--ymt-spacing-2xs);column-gap:var(--ymt-spacing-xs);align-items:center;padding:var(--ymt-spacing-s) var(--ymt-spacing-xs);padding-inline-start:var(--ymt-spacing-m);border-block-start:1px solid var(--ymt-outline-variant);cursor:default}:host .notifications .note.withRoute{cursor:pointer}:host .notifications .note.alert{--level-background-color: var(--ymt-danger);--level-color: var(--ymt-on-danger)}:host .notifications .note.warning{--level-background-color: var(--ymt-warning);--level-color: var(--ymt-on-warning)}:host .notifications .note.success{--level-background-color: var(--ymt-success);--level-color: var(--ymt-on-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;display:flex;background-color:var(--level-background-color);color:var(--level-color);border-radius:var(--ymt-corner-full);aspect-ratio:1/1;margin-inline-end:var(--ymt-spacing-s);box-shadow:0 0 0 4px var(--level-background-color)}:host .notifications .note .title{font-weight:700;grid-area:title;color:var(--ymt-text-color)}:host .notifications .note .description{grid-area:description;color:var(--ymt-text-color-subtle)}:host .notifications .note .meta{grid-area:meta}:host .notifications .note .received{grid-area:received;font-size:var(--ymt-font-body-subtle-size);color:var(--ymt-text-color-subtle)}:host .notifications .note button{grid-area:actions;color:var(--ymt-text-color-subtle)}@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$1.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: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i5$1.ListComponent, selector: "yuv-list", inputs: ["preventChangeUntil", "multiselect", "selfHandleSelection", "selfHandleClick", "autoSelect", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: i5$1.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
471
470
|
}
|
|
472
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
471
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NotificationsPageComponent, decorators: [{
|
|
473
472
|
type: Component,
|
|
474
473
|
args: [{ selector: 'yuv-notifications', standalone: true, imports: [
|
|
475
474
|
CommonModule,
|
|
@@ -481,22 +480,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
481
480
|
YmtIconButtonDirective,
|
|
482
481
|
CdkTrapFocus,
|
|
483
482
|
YuvListModule,
|
|
484
|
-
|
|
485
|
-
],
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
}] } });
|
|
483
|
+
TranslatePipe
|
|
484
|
+
], host: {
|
|
485
|
+
'(keydown)': 'onKeydown($event)'
|
|
486
|
+
}, 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\">\n <mat-icon>{{ n.icon || 'notifications' }}</mat-icon>\n </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 <button ymt-icon-button icon-button-size=\"small\" (click)=\"remove(n.id)\" matTooltip=\"{{ 'yuv.shell.notifications.button.remove' | translate }}\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n }\n </yuv-list>\n\n <div class=\"actions\">\n <button mat-button [hidden]=\"!notifications()?.length\" (click)=\"removeAll()\">\n {{ 'yuv.shell.notifications.button.remove.all' | translate }}\n <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;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr auto;grid-template-areas:\"title close\" \"list list\" \"actions actions\";gap:var(--ymt-spacing-m);max-width:30vw;min-width:300px;animation:dialogAppear .2s ease-in-out}:host .notifications h2{color:var(--ymt-text-color-subtle);grid-area:title;margin:0;padding:var(--ymt-spacing-m);align-self:center;text-overflow:ellipsis;overflow:hidden}:host .notifications .actions{grid-area:actions;display:flex;justify-content:start;padding:var(--ymt-spacing-xs) var(--ymt-spacing-m);border-block-start:1px solid var(--ymt-outline-variant)}:host .notifications .close{grid-area:close;margin:var(--ymt-spacing-m)}: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-background-color: transparent;--level-color: currentColor;display:grid;grid-template-rows:auto auto auto auto;grid-template-columns:auto 1fr auto;grid-template-areas:\". received actions\" \"icon title actions\" \". description description\" \". meta meta\";row-gap:var(--ymt-spacing-2xs);column-gap:var(--ymt-spacing-xs);align-items:center;padding:var(--ymt-spacing-s) var(--ymt-spacing-xs);padding-inline-start:var(--ymt-spacing-m);border-block-start:1px solid var(--ymt-outline-variant);cursor:default}:host .notifications .note.withRoute{cursor:pointer}:host .notifications .note.alert{--level-background-color: var(--ymt-danger);--level-color: var(--ymt-on-danger)}:host .notifications .note.warning{--level-background-color: var(--ymt-warning);--level-color: var(--ymt-on-warning)}:host .notifications .note.success{--level-background-color: var(--ymt-success);--level-color: var(--ymt-on-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;display:flex;background-color:var(--level-background-color);color:var(--level-color);border-radius:var(--ymt-corner-full);aspect-ratio:1/1;margin-inline-end:var(--ymt-spacing-s);box-shadow:0 0 0 4px var(--level-background-color)}:host .notifications .note .title{font-weight:700;grid-area:title;color:var(--ymt-text-color)}:host .notifications .note .description{grid-area:description;color:var(--ymt-text-color-subtle)}:host .notifications .note .meta{grid-area:meta}:host .notifications .note .received{grid-area:received;font-size:var(--ymt-font-body-subtle-size);color:var(--ymt-text-color-subtle)}:host .notifications .note button{grid-area:actions;color:var(--ymt-text-color-subtle)}@keyframes dialogAppear{0%{opacity:0;transform:translate(calc(var(--ymt-spacing-m) * -1))}to{opacity:1;transform:translate(0)}}\n"] }]
|
|
487
|
+
}] });
|
|
490
488
|
|
|
491
489
|
/**
|
|
492
490
|
* This component will be rendered in an invisible auxillary route and is used to track
|
|
493
491
|
* open dialogs.
|
|
494
492
|
*/
|
|
495
493
|
class DialogTrackingComponent {
|
|
496
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
497
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
494
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DialogTrackingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
495
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: DialogTrackingComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true }); }
|
|
498
496
|
}
|
|
499
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
497
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DialogTrackingComponent, decorators: [{
|
|
500
498
|
type: Component,
|
|
501
499
|
args: [{
|
|
502
500
|
template: ''
|
|
@@ -535,11 +533,11 @@ const closeDialogGuard = (component, currentRoute, nextState) => {
|
|
|
535
533
|
};
|
|
536
534
|
|
|
537
535
|
const clientShellRoutes = [
|
|
538
|
-
{ path: 'dashboard', loadComponent: () => import('./yuuvis-client-shell-dashboard.component-
|
|
536
|
+
{ path: 'dashboard', loadComponent: () => import('./yuuvis-client-shell-dashboard.component-BZUsO5MY.mjs').then((comp) => comp.DashboardPageComponent) },
|
|
539
537
|
{ path: 'notifications', component: NotificationsPageComponent, outlet: 'aside' },
|
|
540
538
|
// tracking outlet for dialogs
|
|
541
539
|
{ path: 'dialogs/:id', component: DialogTrackingComponent, outlet: 'dt', canDeactivate: [closeDialogGuard] },
|
|
542
|
-
{ path: 'settings', loadComponent: () => import('./yuuvis-client-shell-settings.component-
|
|
540
|
+
{ path: 'settings', loadComponent: () => import('./yuuvis-client-shell-settings.component-CWJzbwdP.mjs').then((comp) => comp.SettingsPageComponent) },
|
|
543
541
|
// default route
|
|
544
542
|
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
|
|
545
543
|
// redirecting route
|
|
@@ -592,25 +590,25 @@ class ClientShellComponent {
|
|
|
592
590
|
this.safeHtmlPipe = inject(SafeHtmlPipe);
|
|
593
591
|
this.showUploadOverlay = false;
|
|
594
592
|
this.busy$ = this.#shell.isBusy$;
|
|
595
|
-
this.apps = input.required();
|
|
593
|
+
this.apps = input.required(...(ngDevMode ? [{ debugName: "apps" }] : []));
|
|
596
594
|
// set shell apps from component input
|
|
597
|
-
this.#appsInputEffect = effect(() => untracked(() => this.#shell.setApps(this.apps())));
|
|
595
|
+
this.#appsInputEffect = effect(() => untracked(() => this.#shell.setApps(this.apps())), ...(ngDevMode ? [{ debugName: "#appsInputEffect" }] : []));
|
|
598
596
|
this.checkedForInitialRoute = false;
|
|
599
597
|
this.enableTenantSwitch = false;
|
|
600
598
|
this.smallScreenLayout = this.#device.smallScreenLayout;
|
|
601
|
-
this.config = input();
|
|
599
|
+
this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
|
|
602
600
|
/**
|
|
603
601
|
* If set to true, the shell will adapt to small screen sizes (e.g. mobile phones).
|
|
604
602
|
* It also will propagate this setting to other components that might act aupon it.
|
|
605
603
|
* To do so, you can use the `DeviceService` and check for `smallScreenLayout` signal changes.
|
|
606
604
|
*/
|
|
607
|
-
this.supportsSmallScreens = input(false);
|
|
605
|
+
this.supportsSmallScreens = input(false, ...(ngDevMode ? [{ debugName: "supportsSmallScreens" }] : []));
|
|
608
606
|
this.#shellConfigEffect = effect(() => {
|
|
609
607
|
const cfg = this.config();
|
|
610
608
|
if (cfg) {
|
|
611
609
|
this.#shell.setShellConfig(cfg);
|
|
612
610
|
}
|
|
613
|
-
});
|
|
611
|
+
}, ...(ngDevMode ? [{ debugName: "#shellConfigEffect" }] : []));
|
|
614
612
|
this.#layoutSettings.init();
|
|
615
613
|
this.router.events
|
|
616
614
|
.pipe(filter$1((e) => e instanceof NavigationEnd), map$1((e) => e))
|
|
@@ -636,7 +634,9 @@ class ClientShellComponent {
|
|
|
636
634
|
// do not allow to drop files/images from iframes
|
|
637
635
|
if (event.relatedTarget?.tagName.toLowerCase() === 'iframe')
|
|
638
636
|
return 0;
|
|
639
|
-
return event.dataTransfer
|
|
637
|
+
return event.dataTransfer
|
|
638
|
+
? Array.from(event.dataTransfer.items || []).filter((i) => i.kind === 'file' && i.type).length
|
|
639
|
+
: 0;
|
|
640
640
|
}
|
|
641
641
|
requestSubscription() {
|
|
642
642
|
if (!this.#swPush.isEnabled) {
|
|
@@ -681,14 +681,14 @@ class ClientShellComponent {
|
|
|
681
681
|
this.router.resetConfig(this.router.config);
|
|
682
682
|
this.requestSubscription();
|
|
683
683
|
}
|
|
684
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
685
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
684
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ClientShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
685
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", 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 }, supportsSmallScreens: { classPropertyName: "supportsSmallScreens", publicName: "supportsSmallScreens", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "dracgover": "onDragOver($event)" }, properties: { "class.small-screen": "smallScreenLayout()" } }, providers: [SafeHtmlPipe], ngImport: i0, template: "<yuv-metadata-default-templates></yuv-metadata-default-templates>\n\n<!-- @let iconsRegistered = registerIcons(); -->\n@let showAppHeader = css.appHeader();\n\n<!-- gloabl busy indicator if app header is present, it will deal with busy indication -->\n@if (!showAppHeader && (busy$ | async)) {\n <mat-progress-bar mode=\"indeterminate\" class=\"progress-bar\"></mat-progress-bar>\n}\n@if (showAppHeader) {\n <yuv-app-header> </yuv-app-header>\n}\n<yuv-sidebar-nav></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<!-- dialog tracking outlet -->\n<router-outlet name=\"dt\"></router-outlet>\n", styles: [":host{display:block}:host button.badge{--badge-background: var(--mat-sys-primary-container);--badge-color: var(--mat-sys-on-primary-container)}:host button.badge.alert{--badge-background: var(--ymt-danger);--badge-color: var(--ymt-on-danger)}:host button.badge.warning{--badge-background: var(--ymt-warning);--badge-color: var(--ymt-on-warning)}:host button.badge.success{--badge-background: var(--ymt-success);--badge-color: var(--ymt-on-success)}:host button.badge:before{content:attr(data-count);background-color:var(--badge-background);color:var(--badge-color);outline:1px solid var(--badge-color);padding:0 .25em;position:absolute;inset-block-start:0;inset-inline-end:0;max-width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:var(--ymt-font-body-subtle-size);z-index:10;border-radius:var(--ymt-corner-full);pointer-events:none}:host.small-screen nav{display:flex;align-items:center;justify-content:space-between;width:100vw;padding:var(--ymt-sizing-s) var(--ymt-sizing-m);gap:var(--ymt-spacing-s)}:host.small-screen nav .menu{display:flex;align-items:center;gap:var(--ymt-spacing-s);flex:1 1 auto;overflow:hidden}:host.small-screen nav .menu .app-label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host.small-screen nav .notifications{display:flex;align-items:center}:host:not(.small-screen) .sidenav{height:100%;width:var(--yuv-side-nav-width, var(--ymt-sizing-6xl));background:transparent;color:inherit;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:var(--ymt-spacing-m)}:host:not(.small-screen) .sidenav .logo-container{width:100%}:host:not(.small-screen) .sidenav .app-switcher-container{flex:1 1 0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ymt-spacing-xs);scrollbar-width:none;-ms-overflow-style:none}:host:not(.small-screen) .sidenav .app-switcher-container yuv-overflow-menu{height:100%;--menu-item-gap: 18px}:host:not(.small-screen) .sidenav .app-switcher-container::-webkit-scrollbar{display:none}:host:not(.small-screen) .sidenav .actions-container{justify-self:flex-end;border-top:var(--ymt-outline-width) solid var(--ymt-outline-variant);display:flex;flex-direction:column;gap:var(--ymt-spacing-s);padding:var(--ymt-spacing-m) 0}:host{position:absolute;inset:0;overflow:hidden;background-color:var(--ymt-surface-app);display:grid;grid-template-rows:auto 1fr;grid-template-columns:auto 1fr;grid-template-areas:\"appheader appheader\" \"nav main\"}:host.small-screen{grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"appheader\" \"main\" \"nav\"}:host .progress-bar{position:absolute}:host yuv-app-header{grid-area:appheader}:host yuv-sidebar-nav{grid-area:nav}:host main{grid-area:main;overflow:hidden;color:var(--ymt-text-color)}:host .asideOutlet{position:absolute;inset:0;z-index:1000;background-color:var(--ymt-overlay-backdrop-color)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i5.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: YuvMetadataFormDefaultsModule }, { kind: "component", type: i2$1.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: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
686
686
|
}
|
|
687
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
687
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ClientShellComponent, decorators: [{
|
|
688
688
|
type: Component,
|
|
689
689
|
args: [{ selector: 'yuv-client-shell', standalone: true, imports: [
|
|
690
690
|
AsyncPipe,
|
|
691
|
-
|
|
691
|
+
TranslatePipe,
|
|
692
692
|
RouterModule,
|
|
693
693
|
YuvMetadataFormDefaultsModule,
|
|
694
694
|
YuvAppHeaderComponent,
|
|
@@ -696,12 +696,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
696
696
|
MatProgressBar,
|
|
697
697
|
MatTooltipModule
|
|
698
698
|
], providers: [SafeHtmlPipe], host: {
|
|
699
|
-
'[class.small-screen]': 'smallScreenLayout()'
|
|
699
|
+
'[class.small-screen]': 'smallScreenLayout()',
|
|
700
|
+
'(dracgover)': 'onDragOver($event)'
|
|
700
701
|
}, template: "<yuv-metadata-default-templates></yuv-metadata-default-templates>\n\n<!-- @let iconsRegistered = registerIcons(); -->\n@let showAppHeader = css.appHeader();\n\n<!-- gloabl busy indicator if app header is present, it will deal with busy indication -->\n@if (!showAppHeader && (busy$ | async)) {\n <mat-progress-bar mode=\"indeterminate\" class=\"progress-bar\"></mat-progress-bar>\n}\n@if (showAppHeader) {\n <yuv-app-header> </yuv-app-header>\n}\n<yuv-sidebar-nav></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<!-- dialog tracking outlet -->\n<router-outlet name=\"dt\"></router-outlet>\n", styles: [":host{display:block}:host button.badge{--badge-background: var(--mat-sys-primary-container);--badge-color: var(--mat-sys-on-primary-container)}:host button.badge.alert{--badge-background: var(--ymt-danger);--badge-color: var(--ymt-on-danger)}:host button.badge.warning{--badge-background: var(--ymt-warning);--badge-color: var(--ymt-on-warning)}:host button.badge.success{--badge-background: var(--ymt-success);--badge-color: var(--ymt-on-success)}:host button.badge:before{content:attr(data-count);background-color:var(--badge-background);color:var(--badge-color);outline:1px solid var(--badge-color);padding:0 .25em;position:absolute;inset-block-start:0;inset-inline-end:0;max-width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:var(--ymt-font-body-subtle-size);z-index:10;border-radius:var(--ymt-corner-full);pointer-events:none}:host.small-screen nav{display:flex;align-items:center;justify-content:space-between;width:100vw;padding:var(--ymt-sizing-s) var(--ymt-sizing-m);gap:var(--ymt-spacing-s)}:host.small-screen nav .menu{display:flex;align-items:center;gap:var(--ymt-spacing-s);flex:1 1 auto;overflow:hidden}:host.small-screen nav .menu .app-label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host.small-screen nav .notifications{display:flex;align-items:center}:host:not(.small-screen) .sidenav{height:100%;width:var(--yuv-side-nav-width, var(--ymt-sizing-6xl));background:transparent;color:inherit;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:var(--ymt-spacing-m)}:host:not(.small-screen) .sidenav .logo-container{width:100%}:host:not(.small-screen) .sidenav .app-switcher-container{flex:1 1 0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ymt-spacing-xs);scrollbar-width:none;-ms-overflow-style:none}:host:not(.small-screen) .sidenav .app-switcher-container yuv-overflow-menu{height:100%;--menu-item-gap: 18px}:host:not(.small-screen) .sidenav .app-switcher-container::-webkit-scrollbar{display:none}:host:not(.small-screen) .sidenav .actions-container{justify-self:flex-end;border-top:var(--ymt-outline-width) solid var(--ymt-outline-variant);display:flex;flex-direction:column;gap:var(--ymt-spacing-s);padding:var(--ymt-spacing-m) 0}:host{position:absolute;inset:0;overflow:hidden;background-color:var(--ymt-surface-app);display:grid;grid-template-rows:auto 1fr;grid-template-columns:auto 1fr;grid-template-areas:\"appheader appheader\" \"nav main\"}:host.small-screen{grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"appheader\" \"main\" \"nav\"}:host .progress-bar{position:absolute}:host yuv-app-header{grid-area:appheader}:host yuv-sidebar-nav{grid-area:nav}:host main{grid-area:main;overflow:hidden;color:var(--ymt-text-color)}:host .asideOutlet{position:absolute;inset:0;z-index:1000;background-color:var(--ymt-overlay-backdrop-color)}\n"] }]
|
|
701
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
702
|
-
type: HostListener,
|
|
703
|
-
args: ['dragover', ['$event']]
|
|
704
|
-
}] } });
|
|
702
|
+
}], ctorParameters: () => [], propDecorators: { apps: [{ type: i0.Input, args: [{ isSignal: true, alias: "apps", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], supportsSmallScreens: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportsSmallScreens", required: false }] }] } });
|
|
705
703
|
|
|
706
704
|
const provideShellActionButtons = (buttons) => {
|
|
707
705
|
return makeEnvironmentProviders([
|
|
@@ -716,32 +714,32 @@ class YuvAppHeaderSlotDirective {
|
|
|
716
714
|
constructor() {
|
|
717
715
|
this.#tplRef = inject((TemplateRef));
|
|
718
716
|
this.#clientShellService = inject(ClientShellService);
|
|
719
|
-
this.yuvAppHeaderSlot = input.required();
|
|
717
|
+
this.yuvAppHeaderSlot = input.required(...(ngDevMode ? [{ debugName: "yuvAppHeaderSlot" }] : []));
|
|
720
718
|
}
|
|
721
719
|
#tplRef;
|
|
722
720
|
#clientShellService;
|
|
723
721
|
ngOnInit() {
|
|
724
722
|
this.#clientShellService.addAppHeaderSlot(this.yuvAppHeaderSlot(), this.#tplRef);
|
|
725
723
|
}
|
|
726
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
727
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
724
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvAppHeaderSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
725
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.19", type: YuvAppHeaderSlotDirective, isStandalone: true, selector: "ng-template[yuvAppHeaderSlot]", inputs: { yuvAppHeaderSlot: { classPropertyName: "yuvAppHeaderSlot", publicName: "yuvAppHeaderSlot", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
728
726
|
}
|
|
729
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
727
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvAppHeaderSlotDirective, decorators: [{
|
|
730
728
|
type: Directive,
|
|
731
729
|
args: [{
|
|
732
730
|
selector: 'ng-template[yuvAppHeaderSlot]'
|
|
733
731
|
}]
|
|
734
|
-
}] });
|
|
732
|
+
}], propDecorators: { yuvAppHeaderSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuvAppHeaderSlot", required: true }] }] } });
|
|
735
733
|
|
|
736
734
|
const cmp = [
|
|
737
735
|
YuvAppHeaderSlotDirective,
|
|
738
736
|
];
|
|
739
737
|
class YuvClientShellModule {
|
|
740
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
741
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
742
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
738
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvClientShellModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
739
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: YuvClientShellModule, imports: [YuvAppHeaderSlotDirective], exports: [YuvAppHeaderSlotDirective] }); }
|
|
740
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvClientShellModule }); }
|
|
743
741
|
}
|
|
744
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
742
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvClientShellModule, decorators: [{
|
|
745
743
|
type: NgModule,
|
|
746
744
|
args: [{
|
|
747
745
|
imports: [cmp],
|
|
@@ -752,7 +750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
752
750
|
class InertDirective {
|
|
753
751
|
constructor() {
|
|
754
752
|
this.elRef = inject(ElementRef);
|
|
755
|
-
this.inert = input(false);
|
|
753
|
+
this.inert = input(false, ...(ngDevMode ? [{ debugName: "inert" }] : []));
|
|
756
754
|
effect(() => {
|
|
757
755
|
const el = this.elRef.nativeElement;
|
|
758
756
|
if (this.inert())
|
|
@@ -761,17 +759,17 @@ class InertDirective {
|
|
|
761
759
|
el.removeAttribute('inert');
|
|
762
760
|
});
|
|
763
761
|
}
|
|
764
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
765
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
762
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: InertDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
763
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.19", type: InertDirective, isStandalone: true, selector: "[inert]", inputs: { inert: { classPropertyName: "inert", publicName: "inert", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
766
764
|
}
|
|
767
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
765
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: InertDirective, decorators: [{
|
|
768
766
|
type: Directive,
|
|
769
767
|
args: [{
|
|
770
768
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
771
769
|
selector: '[inert]',
|
|
772
770
|
standalone: true
|
|
773
771
|
}]
|
|
774
|
-
}], ctorParameters: () => [] });
|
|
772
|
+
}], ctorParameters: () => [], propDecorators: { inert: [{ type: i0.Input, args: [{ isSignal: true, alias: "inert", required: false }] }] } });
|
|
775
773
|
|
|
776
774
|
class ShellWidgetsService {
|
|
777
775
|
#widgetGridRegistry = inject(WidgetGridRegistry);
|
|
@@ -782,10 +780,10 @@ class ShellWidgetsService {
|
|
|
782
780
|
concealShellWidgets(ids) {
|
|
783
781
|
ids.forEach((id) => this.#widgetGridRegistry.removeRegisteredWidget(id));
|
|
784
782
|
}
|
|
785
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
786
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
783
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ShellWidgetsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
784
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ShellWidgetsService, providedIn: 'root' }); }
|
|
787
785
|
}
|
|
788
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
786
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ShellWidgetsService, decorators: [{
|
|
789
787
|
type: Injectable,
|
|
790
788
|
args: [{
|
|
791
789
|
providedIn: 'root'
|