@yuuvis/client-shell 3.0.0-beta.20.1 → 3.0.0-beta.21.0
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-BZUsO5MY.mjs → yuuvis-client-shell-dashboard.component-BD2Xo3VR.mjs} +4 -4
- package/fesm2022/{yuuvis-client-shell-dashboard.component-BZUsO5MY.mjs.map → yuuvis-client-shell-dashboard.component-BD2Xo3VR.mjs.map} +1 -1
- package/fesm2022/{yuuvis-client-shell-settings.component-CWJzbwdP.mjs → yuuvis-client-shell-settings.component-BfiNwFbo.mjs} +10 -10
- package/fesm2022/{yuuvis-client-shell-settings.component-CWJzbwdP.mjs.map → yuuvis-client-shell-settings.component-BfiNwFbo.mjs.map} +1 -1
- package/fesm2022/yuuvis-client-shell-widget-dashboard.mjs +4 -4
- package/fesm2022/yuuvis-client-shell-widget-dashboard.mjs.map +1 -1
- package/fesm2022/yuuvis-client-shell.mjs +59 -60
- package/fesm2022/yuuvis-client-shell.mjs.map +1 -1
- package/package.json +12 -11
- /package/{widget-dashboard/index.d.ts → types/yuuvis-client-shell-widget-dashboard.d.ts} +0 -0
- /package/{index.d.ts → types/yuuvis-client-shell.d.ts} +0 -0
|
@@ -45,7 +45,7 @@ class ManageFlavorsComponent {
|
|
|
45
45
|
this.item = this.#dialogData;
|
|
46
46
|
this.#confirm = inject(ConfirmService);
|
|
47
47
|
this.translate = inject(TranslateService);
|
|
48
|
-
this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : []));
|
|
48
|
+
this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
|
|
49
49
|
this.appliedFlavors = [];
|
|
50
50
|
this.applicableFlavors = [];
|
|
51
51
|
}
|
|
@@ -102,10 +102,10 @@ class ManageFlavorsComponent {
|
|
|
102
102
|
ngOnInit() {
|
|
103
103
|
this.#refreshDmsObject();
|
|
104
104
|
}
|
|
105
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
106
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
105
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ManageFlavorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
106
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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" }] }); }
|
|
107
107
|
}
|
|
108
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
108
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ManageFlavorsComponent, decorators: [{
|
|
109
109
|
type: Component,
|
|
110
110
|
args: [{ selector: 'yuv-manage-flavors', standalone: true, imports: [
|
|
111
111
|
BusyOverlayDirective,
|
|
@@ -167,7 +167,7 @@ class ClientShellService {
|
|
|
167
167
|
constructor() {
|
|
168
168
|
this.#router = inject(Router);
|
|
169
169
|
this.#shell = inject(ShellService);
|
|
170
|
-
this.appHeaderSlots = signal({}, ...(ngDevMode ? [{ debugName: "appHeaderSlots" }] : []));
|
|
170
|
+
this.appHeaderSlots = signal({}, ...(ngDevMode ? [{ debugName: "appHeaderSlots" }] : /* istanbul ignore next */ []));
|
|
171
171
|
this.apps = this.#shell.apps;
|
|
172
172
|
this.#appsEffect = effect(() => {
|
|
173
173
|
const apps = this.apps();
|
|
@@ -178,9 +178,9 @@ class ClientShellService {
|
|
|
178
178
|
this.currentApp.set(app);
|
|
179
179
|
});
|
|
180
180
|
}
|
|
181
|
-
}, ...(ngDevMode ? [{ debugName: "#appsEffect" }] : []));
|
|
182
|
-
this.currentApp = signal(undefined, ...(ngDevMode ? [{ debugName: "currentApp" }] : []));
|
|
183
|
-
this.appHeader = signal(false, ...(ngDevMode ? [{ debugName: "appHeader" }] : []));
|
|
181
|
+
}, ...(ngDevMode ? [{ debugName: "#appsEffect" }] : /* istanbul ignore next */ []));
|
|
182
|
+
this.currentApp = signal(undefined, ...(ngDevMode ? [{ debugName: "currentApp" }] : /* istanbul ignore next */ []));
|
|
183
|
+
this.appHeader = signal(false, ...(ngDevMode ? [{ debugName: "appHeader" }] : /* istanbul ignore next */ []));
|
|
184
184
|
this.#router.events
|
|
185
185
|
.pipe(takeUntilDestroyed(), filter((e) => e instanceof NavigationEnd))
|
|
186
186
|
.subscribe((e) => this.#getAppFromUrl(this.#router.routerState.snapshot.url));
|
|
@@ -211,10 +211,10 @@ class ClientShellService {
|
|
|
211
211
|
const style = window.getComputedStyle(document.getElementsByTagName('body')[0]);
|
|
212
212
|
return vars.reduce((prev, curr) => ({ ...prev, [curr]: style.getPropertyValue(curr) }), {});
|
|
213
213
|
}
|
|
214
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
215
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
214
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ClientShellService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
215
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ClientShellService, providedIn: 'root' }); }
|
|
216
216
|
}
|
|
217
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
217
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ClientShellService, decorators: [{
|
|
218
218
|
type: Injectable,
|
|
219
219
|
args: [{
|
|
220
220
|
providedIn: 'root'
|
|
@@ -222,10 +222,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
222
222
|
}], ctorParameters: () => [] });
|
|
223
223
|
|
|
224
224
|
class ShellLogoComponent {
|
|
225
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
226
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
225
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ShellLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
226
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", 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" }] }); }
|
|
227
227
|
}
|
|
228
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
228
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ShellLogoComponent, decorators: [{
|
|
229
229
|
type: Component,
|
|
230
230
|
args: [{ selector: 'yuv-shell-logo', standalone: true, imports: [MatIconModule, RouterModule, TranslatePipe], host: {
|
|
231
231
|
class: 'shell-logo'
|
|
@@ -256,10 +256,10 @@ class YuvAppHeaderComponent {
|
|
|
256
256
|
this.notificationsSlot = slots['notifications'] || null;
|
|
257
257
|
});
|
|
258
258
|
}
|
|
259
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
260
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
259
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvAppHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
260
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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" }] }); }
|
|
261
261
|
}
|
|
262
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
262
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvAppHeaderComponent, decorators: [{
|
|
263
263
|
type: Component,
|
|
264
264
|
args: [{ selector: 'yuv-app-header', imports: [CommonModule, MatProgressBar, MatIconModule, YuvOverflowHiddenModule, ShellLogoComponent, RouterModule], host: {
|
|
265
265
|
'[class.small-screen]': 'smallScreenLayout()'
|
|
@@ -304,7 +304,7 @@ class SidebarNavComponent {
|
|
|
304
304
|
const notifications = this.newNotifications();
|
|
305
305
|
return (this.#alwaysShowNotifications ||
|
|
306
306
|
!!(notifications && Object.hasOwnProperty.call(notifications, 'count') && notifications.count > 0));
|
|
307
|
-
}, ...(ngDevMode ? [{ debugName: "showNotifications" }] : []));
|
|
307
|
+
}, ...(ngDevMode ? [{ debugName: "showNotifications" }] : /* istanbul ignore next */ []));
|
|
308
308
|
this.app = this.css.currentApp;
|
|
309
309
|
this.newNotifications = toSignal(this.#shellNotifications.shellNotifications$.pipe(map((notifications) => {
|
|
310
310
|
let maxLevel = 'info';
|
|
@@ -313,7 +313,7 @@ class SidebarNavComponent {
|
|
|
313
313
|
return count > 0 ? { maxLevel, count } : undefined;
|
|
314
314
|
})));
|
|
315
315
|
this.#shellApps = this.#shell.apps;
|
|
316
|
-
this.navApps = computed(() => this.#shellApps().filter((a) => !a.options?.hideFromNav), ...(ngDevMode ? [{ debugName: "navApps" }] : []));
|
|
316
|
+
this.navApps = computed(() => this.#shellApps().filter((a) => !a.options?.hideFromNav), ...(ngDevMode ? [{ debugName: "navApps" }] : /* istanbul ignore next */ []));
|
|
317
317
|
this.navMenuItems = computed(() => {
|
|
318
318
|
const currentApp = this.css.currentApp();
|
|
319
319
|
const namespace = this.#shell.shellConfig().shellIconNamespace;
|
|
@@ -325,7 +325,7 @@ class SidebarNavComponent {
|
|
|
325
325
|
active: currentApp?.path === a.path,
|
|
326
326
|
callback: () => void this.#router.navigate([a.path])
|
|
327
327
|
}));
|
|
328
|
-
}, ...(ngDevMode ? [{ debugName: "navMenuItems" }] : []));
|
|
328
|
+
}, ...(ngDevMode ? [{ debugName: "navMenuItems" }] : /* istanbul ignore next */ []));
|
|
329
329
|
this.registerIcons = computed(() => {
|
|
330
330
|
const apps = this.#shellApps();
|
|
331
331
|
const config = this.#shell.shellConfig();
|
|
@@ -342,7 +342,7 @@ class SidebarNavComponent {
|
|
|
342
342
|
: false;
|
|
343
343
|
});
|
|
344
344
|
return allRegistered;
|
|
345
|
-
}, ...(ngDevMode ? [{ debugName: "registerIcons" }] : []));
|
|
345
|
+
}, ...(ngDevMode ? [{ debugName: "registerIcons" }] : /* istanbul ignore next */ []));
|
|
346
346
|
this.translate.onLangChange.subscribe(() => this._setCommands(true));
|
|
347
347
|
window.addEventListener('storage', (evt) => {
|
|
348
348
|
if (evt.key === this.APP_LOGOUT_EVENT_KEY) {
|
|
@@ -387,10 +387,10 @@ class SidebarNavComponent {
|
|
|
387
387
|
ngOnInit() {
|
|
388
388
|
this._setCommands();
|
|
389
389
|
}
|
|
390
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
391
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
390
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SidebarNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
391
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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)}: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{scrollbar-width:none;-ms-overflow-style:none}: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 }); }
|
|
392
392
|
}
|
|
393
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
393
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SidebarNavComponent, decorators: [{
|
|
394
394
|
type: Component,
|
|
395
395
|
args: [{ selector: 'yuv-sidebar-nav', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
396
396
|
TranslatePipe,
|
|
@@ -408,7 +408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
408
408
|
], host: {
|
|
409
409
|
class: 'sidenav',
|
|
410
410
|
'[class.small-screen]': 'smallScreenLayout()'
|
|
411
|
-
}, 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)
|
|
411
|
+
}, 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)}: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{scrollbar-width:none;-ms-overflow-style:none}: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"] }]
|
|
412
412
|
}], ctorParameters: () => [] });
|
|
413
413
|
|
|
414
414
|
class NotificationsPageComponent {
|
|
@@ -419,7 +419,7 @@ class NotificationsPageComponent {
|
|
|
419
419
|
this._focusedIndex = -1;
|
|
420
420
|
this._notificationIDs = [];
|
|
421
421
|
this.notifications = toSignal(this.shellNotifications.shellNotifications$);
|
|
422
|
-
this.notificationsIdEffect = effect(() => (this._notificationIDs = (this.notifications() || []).map((n) => n.id)), ...(ngDevMode ? [{ debugName: "notificationsIdEffect" }] : []));
|
|
422
|
+
this.notificationsIdEffect = effect(() => (this._notificationIDs = (this.notifications() || []).map((n) => n.id)), ...(ngDevMode ? [{ debugName: "notificationsIdEffect" }] : /* istanbul ignore next */ []));
|
|
423
423
|
this.icons = {
|
|
424
424
|
note: YUV_ICONS.notification
|
|
425
425
|
};
|
|
@@ -465,10 +465,10 @@ class NotificationsPageComponent {
|
|
|
465
465
|
fc[0].focus();
|
|
466
466
|
});
|
|
467
467
|
}
|
|
468
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
469
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
468
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NotificationsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
469
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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" }] }); }
|
|
470
470
|
}
|
|
471
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
471
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NotificationsPageComponent, decorators: [{
|
|
472
472
|
type: Component,
|
|
473
473
|
args: [{ selector: 'yuv-notifications', standalone: true, imports: [
|
|
474
474
|
CommonModule,
|
|
@@ -491,10 +491,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
491
491
|
* open dialogs.
|
|
492
492
|
*/
|
|
493
493
|
class DialogTrackingComponent {
|
|
494
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
495
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
494
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DialogTrackingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
495
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: DialogTrackingComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true }); }
|
|
496
496
|
}
|
|
497
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
497
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DialogTrackingComponent, decorators: [{
|
|
498
498
|
type: Component,
|
|
499
499
|
args: [{
|
|
500
500
|
template: ''
|
|
@@ -533,11 +533,11 @@ const closeDialogGuard = (component, currentRoute, nextState) => {
|
|
|
533
533
|
};
|
|
534
534
|
|
|
535
535
|
const clientShellRoutes = [
|
|
536
|
-
{ path: 'dashboard', loadComponent: () => import('./yuuvis-client-shell-dashboard.component-
|
|
536
|
+
{ path: 'dashboard', loadComponent: () => import('./yuuvis-client-shell-dashboard.component-BD2Xo3VR.mjs').then((comp) => comp.DashboardPageComponent) },
|
|
537
537
|
{ path: 'notifications', component: NotificationsPageComponent, outlet: 'aside' },
|
|
538
538
|
// tracking outlet for dialogs
|
|
539
539
|
{ path: 'dialogs/:id', component: DialogTrackingComponent, outlet: 'dt', canDeactivate: [closeDialogGuard] },
|
|
540
|
-
{ path: 'settings', loadComponent: () => import('./yuuvis-client-shell-settings.component-
|
|
540
|
+
{ path: 'settings', loadComponent: () => import('./yuuvis-client-shell-settings.component-BfiNwFbo.mjs').then((comp) => comp.SettingsPageComponent) },
|
|
541
541
|
// default route
|
|
542
542
|
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
|
|
543
543
|
// redirecting route
|
|
@@ -590,25 +590,25 @@ class ClientShellComponent {
|
|
|
590
590
|
this.safeHtmlPipe = inject(SafeHtmlPipe);
|
|
591
591
|
this.showUploadOverlay = false;
|
|
592
592
|
this.busy$ = this.#shell.isBusy$;
|
|
593
|
-
this.apps = input.required(...(ngDevMode ? [{ debugName: "apps" }] : []));
|
|
593
|
+
this.apps = input.required(...(ngDevMode ? [{ debugName: "apps" }] : /* istanbul ignore next */ []));
|
|
594
594
|
// set shell apps from component input
|
|
595
|
-
this.#appsInputEffect = effect(() => untracked(() => this.#shell.setApps(this.apps())), ...(ngDevMode ? [{ debugName: "#appsInputEffect" }] : []));
|
|
595
|
+
this.#appsInputEffect = effect(() => untracked(() => this.#shell.setApps(this.apps())), ...(ngDevMode ? [{ debugName: "#appsInputEffect" }] : /* istanbul ignore next */ []));
|
|
596
596
|
this.checkedForInitialRoute = false;
|
|
597
597
|
this.enableTenantSwitch = false;
|
|
598
598
|
this.smallScreenLayout = this.#device.smallScreenLayout;
|
|
599
|
-
this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
|
|
599
|
+
this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
|
|
600
600
|
/**
|
|
601
601
|
* If set to true, the shell will adapt to small screen sizes (e.g. mobile phones).
|
|
602
602
|
* It also will propagate this setting to other components that might act aupon it.
|
|
603
603
|
* To do so, you can use the `DeviceService` and check for `smallScreenLayout` signal changes.
|
|
604
604
|
*/
|
|
605
|
-
this.supportsSmallScreens = input(false, ...(ngDevMode ? [{ debugName: "supportsSmallScreens" }] : []));
|
|
605
|
+
this.supportsSmallScreens = input(false, ...(ngDevMode ? [{ debugName: "supportsSmallScreens" }] : /* istanbul ignore next */ []));
|
|
606
606
|
this.#shellConfigEffect = effect(() => {
|
|
607
607
|
const cfg = this.config();
|
|
608
608
|
if (cfg) {
|
|
609
609
|
this.#shell.setShellConfig(cfg);
|
|
610
610
|
}
|
|
611
|
-
}, ...(ngDevMode ? [{ debugName: "#shellConfigEffect" }] : []));
|
|
611
|
+
}, ...(ngDevMode ? [{ debugName: "#shellConfigEffect" }] : /* istanbul ignore next */ []));
|
|
612
612
|
this.#layoutSettings.init();
|
|
613
613
|
this.router.events
|
|
614
614
|
.pipe(filter$1((e) => e instanceof NavigationEnd), map$1((e) => e))
|
|
@@ -681,14 +681,13 @@ 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: "21.2.9", ngImport: i0, type: ClientShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
685
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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: { "dragover": "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)}: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{scrollbar-width:none;-ms-overflow-style:none}: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: "21.2.9", ngImport: i0, type: ClientShellComponent, decorators: [{
|
|
688
688
|
type: Component,
|
|
689
689
|
args: [{ selector: 'yuv-client-shell', standalone: true, imports: [
|
|
690
690
|
AsyncPipe,
|
|
691
|
-
TranslatePipe,
|
|
692
691
|
RouterModule,
|
|
693
692
|
YuvMetadataFormDefaultsModule,
|
|
694
693
|
YuvAppHeaderComponent,
|
|
@@ -697,8 +696,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
697
696
|
MatTooltipModule
|
|
698
697
|
], providers: [SafeHtmlPipe], host: {
|
|
699
698
|
'[class.small-screen]': 'smallScreenLayout()',
|
|
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)
|
|
699
|
+
'(dragover)': 'onDragOver($event)'
|
|
700
|
+
}, 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)}: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{scrollbar-width:none;-ms-overflow-style:none}: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"] }]
|
|
702
701
|
}], 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 }] }] } });
|
|
703
702
|
|
|
704
703
|
const provideShellActionButtons = (buttons) => {
|
|
@@ -714,17 +713,17 @@ class YuvAppHeaderSlotDirective {
|
|
|
714
713
|
constructor() {
|
|
715
714
|
this.#tplRef = inject((TemplateRef));
|
|
716
715
|
this.#clientShellService = inject(ClientShellService);
|
|
717
|
-
this.yuvAppHeaderSlot = input.required(...(ngDevMode ? [{ debugName: "yuvAppHeaderSlot" }] : []));
|
|
716
|
+
this.yuvAppHeaderSlot = input.required(...(ngDevMode ? [{ debugName: "yuvAppHeaderSlot" }] : /* istanbul ignore next */ []));
|
|
718
717
|
}
|
|
719
718
|
#tplRef;
|
|
720
719
|
#clientShellService;
|
|
721
720
|
ngOnInit() {
|
|
722
721
|
this.#clientShellService.addAppHeaderSlot(this.yuvAppHeaderSlot(), this.#tplRef);
|
|
723
722
|
}
|
|
724
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
725
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
723
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvAppHeaderSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
724
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: YuvAppHeaderSlotDirective, isStandalone: true, selector: "ng-template[yuvAppHeaderSlot]", inputs: { yuvAppHeaderSlot: { classPropertyName: "yuvAppHeaderSlot", publicName: "yuvAppHeaderSlot", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
726
725
|
}
|
|
727
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
726
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvAppHeaderSlotDirective, decorators: [{
|
|
728
727
|
type: Directive,
|
|
729
728
|
args: [{
|
|
730
729
|
selector: 'ng-template[yuvAppHeaderSlot]'
|
|
@@ -735,11 +734,11 @@ const cmp = [
|
|
|
735
734
|
YuvAppHeaderSlotDirective,
|
|
736
735
|
];
|
|
737
736
|
class YuvClientShellModule {
|
|
738
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
739
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
740
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
737
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvClientShellModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
738
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: YuvClientShellModule, imports: [YuvAppHeaderSlotDirective], exports: [YuvAppHeaderSlotDirective] }); }
|
|
739
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvClientShellModule }); }
|
|
741
740
|
}
|
|
742
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
741
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvClientShellModule, decorators: [{
|
|
743
742
|
type: NgModule,
|
|
744
743
|
args: [{
|
|
745
744
|
imports: [cmp],
|
|
@@ -750,7 +749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
750
749
|
class InertDirective {
|
|
751
750
|
constructor() {
|
|
752
751
|
this.elRef = inject(ElementRef);
|
|
753
|
-
this.inert = input(false, ...(ngDevMode ? [{ debugName: "inert" }] : []));
|
|
752
|
+
this.inert = input(false, ...(ngDevMode ? [{ debugName: "inert" }] : /* istanbul ignore next */ []));
|
|
754
753
|
effect(() => {
|
|
755
754
|
const el = this.elRef.nativeElement;
|
|
756
755
|
if (this.inert())
|
|
@@ -759,10 +758,10 @@ class InertDirective {
|
|
|
759
758
|
el.removeAttribute('inert');
|
|
760
759
|
});
|
|
761
760
|
}
|
|
762
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
763
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
761
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: InertDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
762
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: InertDirective, isStandalone: true, selector: "[inert]", inputs: { inert: { classPropertyName: "inert", publicName: "inert", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
764
763
|
}
|
|
765
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
764
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: InertDirective, decorators: [{
|
|
766
765
|
type: Directive,
|
|
767
766
|
args: [{
|
|
768
767
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -780,10 +779,10 @@ class ShellWidgetsService {
|
|
|
780
779
|
concealShellWidgets(ids) {
|
|
781
780
|
ids.forEach((id) => this.#widgetGridRegistry.removeRegisteredWidget(id));
|
|
782
781
|
}
|
|
783
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
784
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
782
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ShellWidgetsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
783
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ShellWidgetsService, providedIn: 'root' }); }
|
|
785
784
|
}
|
|
786
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
785
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ShellWidgetsService, decorators: [{
|
|
787
786
|
type: Injectable,
|
|
788
787
|
args: [{
|
|
789
788
|
providedIn: 'root'
|