@yuuvis/client-shell 2.10.2 → 2.11.0

package/fesm2022/yuuvis-client-shell-settings.component-BaYerqR1.mjs

@@ -0,0 +1,124 @@
+import * as i0 from '@angular/core';
+import { inject, computed, signal, effect, Component } from '@angular/core';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i3 from '@yuuvis/client-core';
+import { UserService, ConfigService, TranslateService, TranslateModule } from '@yuuvis/client-core';
+import * as i1 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
+import * as i3$1 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatSelectModule } from '@angular/material/select';
+import * as i4 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltip } from '@angular/material/tooltip';
+import { ThemeService, DEFAULT_THEME_KEY, HIGH_CONTRAST_THEME_KEY, DEFAULT_THEME } from '@yuuvis/client-framework/common';
+import { ShellService } from '@yuuvis/client-shell-core';
+import { map } from 'rxjs';
+
+class SettingsPageComponent {
+    #themeService;
+    #http;
+    #appSettings;
+    #appSettingsEffect;
+    constructor() {
+        this.userService = inject(UserService);
+        this.config = inject(ConfigService);
+        this.translate = inject(TranslateService);
+        this.shell = inject(ShellService);
+        this.document = inject(DOCUMENT);
+        this.#themeService = inject(ThemeService);
+        this.#http = inject(HttpClient);
+        this.DEFAULT_THEME_KEY = DEFAULT_THEME_KEY;
+        this.HIGH_CONTRAST_THEME_KEY = HIGH_CONTRAST_THEME_KEY;
+        this.DEFAULT_THEME = DEFAULT_THEME;
+        this.disableMode = this.#themeService.disableMode;
+        this.customThemes = this.#themeService.customThemes;
+        this.currentTheme = computed(() => {
+            const ct = this.#themeService.customTheme();
+            return ct ? ct.key : undefined;
+        });
+        this.clientLocales = signal([]);
+        this.clientVersion = signal(undefined);
+        this.clientAboutData = signal(undefined);
+        this.currentMode = this.#themeService.mode;
+        this.user = toSignal(this.userService.user$);
+        this.appSettings = signal([]);
+        this.#appSettings = this.shell.appSettings;
+        this.#appSettingsEffect = effect(() => {
+            const as = this.#appSettings();
+            this.#mapAppSettings(as);
+        });
+        this.translate.onLangChange.pipe(takeUntilDestroyed()).subscribe(() => {
+            this.#mapAppSettings(this.appSettings());
+        });
+    }
+    #mapAppSettings(as) {
+        this.appSettings.set(as.map((appSetting) => {
+            const translatedLabel = this.translate.instant(appSetting.label);
+            const label = translatedLabel && !translatedLabel.startsWith('!missing') ? translatedLabel : appSetting.label;
+            return {
+                ...appSetting,
+                _label: label
+            };
+        }));
+    }
+    changeClientLocale(iso) {
+        this.userService.changeClientLocale(iso);
+    }
+    changeMode({ value }) {
+        if (value && value !== this.currentMode()) {
+            this.#themeService.toggleTheme(value);
+        }
+    }
+    toggleDarkMode() {
+        const root = document.getElementsByTagName('body')[0];
+        root.classList.toggle('dark');
+    }
+    changeCustomTheme({ value }) {
+        this.#themeService.setCustomTheme(value);
+    }
+    ngOnInit() {
+        this.clientVersion.set(this.document.body.getAttribute('data-version') ?? 'dev');
+        this.clientLocales.set(this.config.getClientLocales());
+        this.getAboutData();
+    }
+    getAboutData() {
+        this.#http
+            .get('assets/about.data.json')
+            .pipe(map((response) => ({
+            ...response,
+            libraries: response.libraries
+                ? response.libraries.map((lib) => ({
+                    ...lib,
+                    ...(lib.license !== 'SEE LICENSE IN LICENSE' ? { link: `https://opensource.org/license/${lib.license}` } : {})
+                }))
+                : undefined
+        })))
+            .subscribe({
+            next: (response) => this.clientAboutData.set(response),
+            error: (error) => console.log({ error })
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SettingsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SettingsPageComponent, isStandalone: true, selector: "yuv-settings", ngImport: i0, template: "<header>\n  <h1>{{ 'yuv.shell.settings.title' | translate }}</h1>\n  <span class=\"subhead\">{{ 'yuv.shell.settings.client.version' | translate }}: {{ clientVersion() }}</span>\n</header>\n\n<main>\n  <div class=\"content-container\">\n    <!-- User Info -->\n    @let user = this.user();\n    @if (user) {\n      <section class=\"section user\">\n        <h2 class=\"section__title\">{{ user.title }}</h2>\n        <div class=\"section__body user__data grid\">\n          <div class=\"user__data-entry grid-row\">\n            <span class=\"user__data-entry-key grid-col grid-col-key\"> {{ 'yuv.shell.settings.user.email' | translate }}: </span>\n            <span class=\"user__data-entry-value grid-col grid-col-value\">\n              {{ user.email }}\n            </span>\n          </div>\n          <div class=\"user__data-entry grid-row\">\n            <span class=\"user__data-entry-key grid-col grid-col-key\"> {{ 'yuv.shell.settings.tenant' | translate }}: </span>\n            <span class=\"user__data-entry-value grid-col grid-col-value\">\n              {{ user.tenant }}\n            </span>\n          </div>\n\n          <!--<div class=\"user__data\">{{ 'yuv.shell.settings.user.name' | translate }}: {{ user.username }}</div>\n          <div class=\"user__data-entry\">{{ 'yuv.shell.settings.user.email' | translate }}: {{ user.email }}</div>\n          <div class=\"user__data-entry\">{{ 'yuv.shell.settings.tenant' | translate }}: {{ user.tenant }}</div>-->\n        </div>\n      </section>\n    }\n    <!-- Language Settings -->\n    <section yuvOfflineDisabled class=\"section\">\n      <h2 class=\"section__title\">{{ 'yuv.shell.settings.language' | translate }}</h2>\n      <div class=\"section__body\">\n        <mat-button-toggle-group\n          name=\"language\"\n          [value]=\"translate.currentLang\"\n          (valueChange)=\"changeClientLocale($event)\"\n          [attr.aria-label]=\"'yuv.shell.settings.language' | translate\"\n        >\n          @for (locale of clientLocales(); track locale.iso) {\n            <mat-button-toggle value=\"{{ locale.iso }}\">{{ locale.label }}</mat-button-toggle>\n          }\n        </mat-button-toggle-group>\n      </div>\n    </section>\n\n    <!-- Mode -->\n    @let currentThemeMode = currentMode();\n    <section class=\"section\">\n      <h2 class=\"section__title\">{{ 'yuv.shell.settings.mode' | translate }}</h2>\n      <div class=\"section__body\">\n        <mat-button-toggle-group\n          name=\"mode\"\n          [value]=\"currentThemeMode\"\n          (change)=\"changeMode($event)\"\n          [disabled]=\"disableMode()\"\n          [attr.aria-label]=\"'yuv.shell.settings.mode' | translate\"\n        >\n          <mat-button-toggle value=\"light\">{{ 'yuv.shell.settings.mode.light' | translate }}</mat-button-toggle>\n          <mat-button-toggle value=\"dark\">{{ 'yuv.shell.settings.mode.dark' | translate }}</mat-button-toggle>\n          <mat-button-toggle value=\"system\">{{ 'yuv.shell.settings.mode.system' | translate }}</mat-button-toggle>\n        </mat-button-toggle-group>\n      </div>\n\n      <p></p>\n      <h2 class=\"section__title\">{{ 'yuv.shell.settings.custom.theme' | translate }}</h2>\n      <div class=\"section__body\">\n        <mat-button-toggle-group\n          name=\"custom-theme\"\n          [value]=\"currentTheme()\"\n          (change)=\"changeCustomTheme($event)\"\n          [attr.aria-label]=\"'yuv.shell.settings.custom.theme' | translate\"\n        >\n          <mat-button-toggle [value]=\"DEFAULT_THEME.key\" [matTooltip]=\"DEFAULT_THEME.description | translate\">\n            {{ DEFAULT_THEME.label | translate }}\n          </mat-button-toggle>\n          @for (theme of customThemes(); track theme.key) {\n            <mat-button-toggle [value]=\"theme.key\">{{ theme.label | translate }}</mat-button-toggle>\n          }\n        </mat-button-toggle-group>\n      </div>\n    </section>\n\n    <!-- app settings -->\n    @for (c of appSettings(); track $index) {\n      <section class=\"section\">\n        <h2 class=\"section__title\">{{ c._label }}</h2>\n        <div class=\"section__body\">\n          <ng-container *ngComponentOutlet=\"c.component\"></ng-container>\n        </div>\n      </section>\n    }\n\n    <!-- About Info -->\n    @let libraries = this.clientAboutData()?.libraries;\n    @if (libraries) {\n      <section class=\"section about\">\n        <h2 class=\"section__title\">{{ 'yuv.shell.settings.about.title' | translate }}</h2>\n        <mat-expansion-panel class=\"about__panel\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ 'yuv.shell.settings.dependency-info.title' | translate }}</mat-panel-title>\n            <!--            <mat-panel-description>{{ '' | translate }}</mat-panel-description>-->\n          </mat-expansion-panel-header>\n\n          <ng-template matExpansionPanelContent>\n            <div class=\"about__panel-content\">\n              <table mat-table [dataSource]=\"libraries\" class=\"mat-elevation-z8\">\n                <!-- Name Column -->\n                <ng-container matColumnDef=\"name\">\n                  <th mat-header-cell *matHeaderCellDef>{{ 'yuv.shell.settings.dependency-info.package' | translate }}</th>\n                  <td mat-cell *matCellDef=\"let element\">{{ element.name }}</td>\n                </ng-container>\n\n                <!-- Version Column -->\n                <ng-container matColumnDef=\"version\">\n                  <th mat-header-cell *matHeaderCellDef>{{ 'yuv.shell.settings.dependency-info.version' | translate }}</th>\n                  <td mat-cell *matCellDef=\"let element\">{{ element.version }}</td>\n                </ng-container>\n\n                <!-- License Column -->\n                <ng-container matColumnDef=\"license\">\n                  <th mat-header-cell *matHeaderCellDef>{{ 'yuv.shell.settings.dependency-info.license' | translate }}</th>\n                  <td mat-cell *matCellDef=\"let element\">\n                    @if (element.link) {\n                      <a href=\"{{ element.link }}\" target=\"_blank\">{{ element.license }}</a>\n                    } @else {\n                      {{ element.license }}\n                    }\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"['name', 'version', 'license']\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: ['name', 'version', 'license']\"></tr>\n              </table>\n            </div>\n          </ng-template>\n        </mat-expansion-panel>\n      </section>\n    }\n  </div>\n</main>\n", styles: [":host{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;grid-template-areas:\"header\" \"settings\";height:100%;overflow:hidden;overflow-y:auto}:host header{grid-area:header;padding:var(--ymt-spacing-3xl)}:host header h1{margin:0}:host header .subhead{font:var(--ymt-font-subhead);color:var(--ymt-text-color-subtle)}:host main{grid-area:settings;padding:var(--ymt-spacing-m);padding-right:0;overflow-y:auto;scrollbar-gutter:stable}:host main .content-container{max-width:900px}:host main section{display:flex;flex-flow:column;padding:var(--ymt-spacing-m);margin-bottom:var(--ymt-spacing-l)}:host main .about__panel-content{overflow-x:auto}:host main .grid-row{display:grid;grid-template-columns:minmax(10ch,1fr) 11fr;grid-gap:var(--ymt-spacing-s);grid-template-areas:\"key value\";align-items:baseline}:host main .grid-col-key{font-weight:700;grid-area:key}:host main .grid-col-value{grid-area:value;word-break:break-all}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i3$1.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SettingsPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-settings', standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        MatTooltip,
+                        MatSelectModule,
+                        ReactiveFormsModule,
+                        MatButtonToggleGroup,
+                        MatButtonToggle,
+                        MatExpansionModule,
+                        MatTableModule
+                    ], template: "<header>\n  <h1>{{ 'yuv.shell.settings.title' | translate }}</h1>\n  <span class=\"subhead\">{{ 'yuv.shell.settings.client.version' | translate }}: {{ clientVersion() }}</span>\n</header>\n\n<main>\n  <div class=\"content-container\">\n    <!-- User Info -->\n    @let user = this.user();\n    @if (user) {\n      <section class=\"section user\">\n        <h2 class=\"section__title\">{{ user.title }}</h2>\n        <div class=\"section__body user__data grid\">\n          <div class=\"user__data-entry grid-row\">\n            <span class=\"user__data-entry-key grid-col grid-col-key\"> {{ 'yuv.shell.settings.user.email' | translate }}: </span>\n            <span class=\"user__data-entry-value grid-col grid-col-value\">\n              {{ user.email }}\n            </span>\n          </div>\n          <div class=\"user__data-entry grid-row\">\n            <span class=\"user__data-entry-key grid-col grid-col-key\"> {{ 'yuv.shell.settings.tenant' | translate }}: </span>\n            <span class=\"user__data-entry-value grid-col grid-col-value\">\n              {{ user.tenant }}\n            </span>\n          </div>\n\n          <!--<div class=\"user__data\">{{ 'yuv.shell.settings.user.name' | translate }}: {{ user.username }}</div>\n          <div class=\"user__data-entry\">{{ 'yuv.shell.settings.user.email' | translate }}: {{ user.email }}</div>\n          <div class=\"user__data-entry\">{{ 'yuv.shell.settings.tenant' | translate }}: {{ user.tenant }}</div>-->\n        </div>\n      </section>\n    }\n    <!-- Language Settings -->\n    <section yuvOfflineDisabled class=\"section\">\n      <h2 class=\"section__title\">{{ 'yuv.shell.settings.language' | translate }}</h2>\n      <div class=\"section__body\">\n        <mat-button-toggle-group\n          name=\"language\"\n          [value]=\"translate.currentLang\"\n          (valueChange)=\"changeClientLocale($event)\"\n          [attr.aria-label]=\"'yuv.shell.settings.language' | translate\"\n        >\n          @for (locale of clientLocales(); track locale.iso) {\n            <mat-button-toggle value=\"{{ locale.iso }}\">{{ locale.label }}</mat-button-toggle>\n          }\n        </mat-button-toggle-group>\n      </div>\n    </section>\n\n    <!-- Mode -->\n    @let currentThemeMode = currentMode();\n    <section class=\"section\">\n      <h2 class=\"section__title\">{{ 'yuv.shell.settings.mode' | translate }}</h2>\n      <div class=\"section__body\">\n        <mat-button-toggle-group\n          name=\"mode\"\n          [value]=\"currentThemeMode\"\n          (change)=\"changeMode($event)\"\n          [disabled]=\"disableMode()\"\n          [attr.aria-label]=\"'yuv.shell.settings.mode' | translate\"\n        >\n          <mat-button-toggle value=\"light\">{{ 'yuv.shell.settings.mode.light' | translate }}</mat-button-toggle>\n          <mat-button-toggle value=\"dark\">{{ 'yuv.shell.settings.mode.dark' | translate }}</mat-button-toggle>\n          <mat-button-toggle value=\"system\">{{ 'yuv.shell.settings.mode.system' | translate }}</mat-button-toggle>\n        </mat-button-toggle-group>\n      </div>\n\n      <p></p>\n      <h2 class=\"section__title\">{{ 'yuv.shell.settings.custom.theme' | translate }}</h2>\n      <div class=\"section__body\">\n        <mat-button-toggle-group\n          name=\"custom-theme\"\n          [value]=\"currentTheme()\"\n          (change)=\"changeCustomTheme($event)\"\n          [attr.aria-label]=\"'yuv.shell.settings.custom.theme' | translate\"\n        >\n          <mat-button-toggle [value]=\"DEFAULT_THEME.key\" [matTooltip]=\"DEFAULT_THEME.description | translate\">\n            {{ DEFAULT_THEME.label | translate }}\n          </mat-button-toggle>\n          @for (theme of customThemes(); track theme.key) {\n            <mat-button-toggle [value]=\"theme.key\">{{ theme.label | translate }}</mat-button-toggle>\n          }\n        </mat-button-toggle-group>\n      </div>\n    </section>\n\n    <!-- app settings -->\n    @for (c of appSettings(); track $index) {\n      <section class=\"section\">\n        <h2 class=\"section__title\">{{ c._label }}</h2>\n        <div class=\"section__body\">\n          <ng-container *ngComponentOutlet=\"c.component\"></ng-container>\n        </div>\n      </section>\n    }\n\n    <!-- About Info -->\n    @let libraries = this.clientAboutData()?.libraries;\n    @if (libraries) {\n      <section class=\"section about\">\n        <h2 class=\"section__title\">{{ 'yuv.shell.settings.about.title' | translate }}</h2>\n        <mat-expansion-panel class=\"about__panel\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ 'yuv.shell.settings.dependency-info.title' | translate }}</mat-panel-title>\n            <!--            <mat-panel-description>{{ '' | translate }}</mat-panel-description>-->\n          </mat-expansion-panel-header>\n\n          <ng-template matExpansionPanelContent>\n            <div class=\"about__panel-content\">\n              <table mat-table [dataSource]=\"libraries\" class=\"mat-elevation-z8\">\n                <!-- Name Column -->\n                <ng-container matColumnDef=\"name\">\n                  <th mat-header-cell *matHeaderCellDef>{{ 'yuv.shell.settings.dependency-info.package' | translate }}</th>\n                  <td mat-cell *matCellDef=\"let element\">{{ element.name }}</td>\n                </ng-container>\n\n                <!-- Version Column -->\n                <ng-container matColumnDef=\"version\">\n                  <th mat-header-cell *matHeaderCellDef>{{ 'yuv.shell.settings.dependency-info.version' | translate }}</th>\n                  <td mat-cell *matCellDef=\"let element\">{{ element.version }}</td>\n                </ng-container>\n\n                <!-- License Column -->\n                <ng-container matColumnDef=\"license\">\n                  <th mat-header-cell *matHeaderCellDef>{{ 'yuv.shell.settings.dependency-info.license' | translate }}</th>\n                  <td mat-cell *matCellDef=\"let element\">\n                    @if (element.link) {\n                      <a href=\"{{ element.link }}\" target=\"_blank\">{{ element.license }}</a>\n                    } @else {\n                      {{ element.license }}\n                    }\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"['name', 'version', 'license']\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: ['name', 'version', 'license']\"></tr>\n              </table>\n            </div>\n          </ng-template>\n        </mat-expansion-panel>\n      </section>\n    }\n  </div>\n</main>\n", styles: [":host{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;grid-template-areas:\"header\" \"settings\";height:100%;overflow:hidden;overflow-y:auto}:host header{grid-area:header;padding:var(--ymt-spacing-3xl)}:host header h1{margin:0}:host header .subhead{font:var(--ymt-font-subhead);color:var(--ymt-text-color-subtle)}:host main{grid-area:settings;padding:var(--ymt-spacing-m);padding-right:0;overflow-y:auto;scrollbar-gutter:stable}:host main .content-container{max-width:900px}:host main section{display:flex;flex-flow:column;padding:var(--ymt-spacing-m);margin-bottom:var(--ymt-spacing-l)}:host main .about__panel-content{overflow-x:auto}:host main .grid-row{display:grid;grid-template-columns:minmax(10ch,1fr) 11fr;grid-gap:var(--ymt-spacing-s);grid-template-areas:\"key value\";align-items:baseline}:host main .grid-col-key{font-weight:700;grid-area:key}:host main .grid-col-value{grid-area:value;word-break:break-all}\n"] }]
+        }], ctorParameters: () => [] });
+
+export { SettingsPageComponent };
+//# sourceMappingURL=yuuvis-client-shell-settings.component-BaYerqR1.mjs.map

package/fesm2022/yuuvis-client-shell-settings.component-BaYerqR1.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"yuuvis-client-shell-settings.component-BaYerqR1.mjs","sources":["../../../../../libs/yuuvis/client-shell/src/lib/pages/settings/settings.component.ts","../../../../../libs/yuuvis/client-shell/src/lib/pages/settings/settings.component.html"],"sourcesContent":["import { Component, computed, effect, inject, OnInit, Signal, signal } from '@angular/core';\nimport { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\nimport { ConfigService, TranslateModule, TranslateService, UserService, YuvConfigLanguages, YuvUser } from '@yuuvis/client-core';\n\nimport { CommonModule, DOCUMENT } from '@angular/common';\nimport { HttpClient } from '@angular/common/http';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatButtonToggle, MatButtonToggleChange, MatButtonToggleGroup } from '@angular/material/button-toggle';\nimport { MatExpansionModule } from '@angular/material/expansion';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatTableModule } from '@angular/material/table';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { DEFAULT_THEME, DEFAULT_THEME_KEY, HIGH_CONTRAST_THEME_KEY, ThemeService } from '@yuuvis/client-framework/common';\nimport { ShellAppSettings, ShellService } from '@yuuvis/client-shell-core';\nimport { map } from 'rxjs';\nimport { AboutData } from './settings.model';\n\n@Component({\n  selector: 'yuv-settings',\n  standalone: true,\n  imports: [\n    CommonModule,\n    TranslateModule,\n    MatTooltip,\n    MatSelectModule,\n    ReactiveFormsModule,\n    MatButtonToggleGroup,\n    MatButtonToggle,\n    MatExpansionModule,\n    MatTableModule\n  ],\n  templateUrl: './settings.component.html',\n  styleUrls: ['./settings.component.scss']\n})\nexport class SettingsPageComponent implements OnInit {\n  private userService = inject(UserService);\n  private config = inject(ConfigService);\n  public translate = inject(TranslateService);\n  private shell = inject(ShellService);\n  readonly document = inject(DOCUMENT);\n  readonly #themeService = inject(ThemeService);\n  readonly #http = inject(HttpClient);\n\n  protected readonly DEFAULT_THEME_KEY = DEFAULT_THEME_KEY;\n  protected readonly HIGH_CONTRAST_THEME_KEY = HIGH_CONTRAST_THEME_KEY;\n  protected readonly DEFAULT_THEME = DEFAULT_THEME;\n  disableMode = this.#themeService.disableMode;\n  customThemes = this.#themeService.customThemes;\n  currentTheme = computed(() => {\n    const ct = this.#themeService.customTheme();\n    return ct ? ct.key : undefined;\n  });\n\n  clientLocales = signal<YuvConfigLanguages[]>([]);\n  clientVersion = signal<string | undefined>(undefined);\n  clientAboutData = signal<AboutData | undefined>(undefined);\n  currentMode = this.#themeService.mode;\n\n  user: Signal<YuvUser | undefined> = toSignal(this.userService.user$);\n  appSettings = signal<(ShellAppSettings & { _label: string })[]>([]);\n  #appSettings = this.shell.appSettings;\n  #appSettingsEffect = effect(() => {\n    const as = this.#appSettings();\n    this.#mapAppSettings(as);\n  });\n\n  constructor() {\n    this.translate.onLangChange.pipe(takeUntilDestroyed()).subscribe(() => {\n      this.#mapAppSettings(this.appSettings());\n    });\n  }\n\n  #mapAppSettings(as: ShellAppSettings[]) {\n    this.appSettings.set(\n      as.map((appSetting) => {\n        const translatedLabel = this.translate.instant(appSetting.label);\n        const label = translatedLabel && !translatedLabel.startsWith('!missing') ? translatedLabel : appSetting.label;\n        return {\n          ...appSetting,\n          _label: label\n        };\n      })\n    );\n  }\n\n  changeClientLocale(iso: string) {\n    this.userService.changeClientLocale(iso);\n  }\n\n  changeMode({ value }: MatButtonToggleChange) {\n    if (value && value !== this.currentMode()) {\n      this.#themeService.toggleTheme(value);\n    }\n  }\n\n  toggleDarkMode() {\n    const root = document.getElementsByTagName('body')[0];\n    root.classList.toggle('dark');\n  }\n\n  changeCustomTheme({ value }: MatButtonToggleChange) {\n    this.#themeService.setCustomTheme(value);\n  }\n\n  ngOnInit(): void {\n    this.clientVersion.set(this.document.body.getAttribute('data-version') ?? 'dev');\n\n    this.clientLocales.set(this.config.getClientLocales());\n    this.getAboutData();\n  }\n\n  getAboutData() {\n    this.#http\n      .get('assets/about.data.json')\n      .pipe(\n        map((response: AboutData) => ({\n          ...response,\n          libraries: response.libraries\n            ? response.libraries.map((lib) => ({\n                ...lib,\n                ...(lib.license !== 'SEE LICENSE IN LICENSE' ? { link: `https://opensource.org/license/${lib.license}` } : {})\n              }))\n            : undefined\n        }))\n      )\n      .subscribe({\n        next: (response: AboutData) => this.clientAboutData.set(response),\n        error: (error) => console.log({ error })\n      });\n  }\n}\n","<header>\n  <h1>{{ 'yuv.shell.settings.title' | translate }}</h1>\n  <span class=\"subhead\">{{ 'yuv.shell.settings.client.version' | translate }}: {{ clientVersion() }}</span>\n</header>\n\n<main>\n  <div class=\"content-container\">\n    <!-- User Info -->\n    @let user = this.user();\n    @if (user) {\n      <section class=\"section user\">\n        <h2 class=\"section__title\">{{ user.title }}</h2>\n        <div class=\"section__body user__data grid\">\n          <div class=\"user__data-entry grid-row\">\n            <span class=\"user__data-entry-key grid-col grid-col-key\"> {{ 'yuv.shell.settings.user.email' | translate }}: </span>\n            <span class=\"user__data-entry-value grid-col grid-col-value\">\n              {{ user.email }}\n            </span>\n          </div>\n          <div class=\"user__data-entry grid-row\">\n            <span class=\"user__data-entry-key grid-col grid-col-key\"> {{ 'yuv.shell.settings.tenant' | translate }}: </span>\n            <span class=\"user__data-entry-value grid-col grid-col-value\">\n              {{ user.tenant }}\n            </span>\n          </div>\n\n          <!--<div class=\"user__data\">{{ 'yuv.shell.settings.user.name' | translate }}: {{ user.username }}</div>\n          <div class=\"user__data-entry\">{{ 'yuv.shell.settings.user.email' | translate }}: {{ user.email }}</div>\n          <div class=\"user__data-entry\">{{ 'yuv.shell.settings.tenant' | translate }}: {{ user.tenant }}</div>-->\n        </div>\n      </section>\n    }\n    <!-- Language Settings -->\n    <section yuvOfflineDisabled class=\"section\">\n      <h2 class=\"section__title\">{{ 'yuv.shell.settings.language' | translate }}</h2>\n      <div class=\"section__body\">\n        <mat-button-toggle-group\n          name=\"language\"\n          [value]=\"translate.currentLang\"\n          (valueChange)=\"changeClientLocale($event)\"\n          [attr.aria-label]=\"'yuv.shell.settings.language' | translate\"\n        >\n          @for (locale of clientLocales(); track locale.iso) {\n            <mat-button-toggle value=\"{{ locale.iso }}\">{{ locale.label }}</mat-button-toggle>\n          }\n        </mat-button-toggle-group>\n      </div>\n    </section>\n\n    <!-- Mode -->\n    @let currentThemeMode = currentMode();\n    <section class=\"section\">\n      <h2 class=\"section__title\">{{ 'yuv.shell.settings.mode' | translate }}</h2>\n      <div class=\"section__body\">\n        <mat-button-toggle-group\n          name=\"mode\"\n          [value]=\"currentThemeMode\"\n          (change)=\"changeMode($event)\"\n          [disabled]=\"disableMode()\"\n          [attr.aria-label]=\"'yuv.shell.settings.mode' | translate\"\n        >\n          <mat-button-toggle value=\"light\">{{ 'yuv.shell.settings.mode.light' | translate }}</mat-button-toggle>\n          <mat-button-toggle value=\"dark\">{{ 'yuv.shell.settings.mode.dark' | translate }}</mat-button-toggle>\n          <mat-button-toggle value=\"system\">{{ 'yuv.shell.settings.mode.system' | translate }}</mat-button-toggle>\n        </mat-button-toggle-group>\n      </div>\n\n      <p></p>\n      <h2 class=\"section__title\">{{ 'yuv.shell.settings.custom.theme' | translate }}</h2>\n      <div class=\"section__body\">\n        <mat-button-toggle-group\n          name=\"custom-theme\"\n          [value]=\"currentTheme()\"\n          (change)=\"changeCustomTheme($event)\"\n          [attr.aria-label]=\"'yuv.shell.settings.custom.theme' | translate\"\n        >\n          <mat-button-toggle [value]=\"DEFAULT_THEME.key\" [matTooltip]=\"DEFAULT_THEME.description | translate\">\n            {{ DEFAULT_THEME.label | translate }}\n          </mat-button-toggle>\n          @for (theme of customThemes(); track theme.key) {\n            <mat-button-toggle [value]=\"theme.key\">{{ theme.label | translate }}</mat-button-toggle>\n          }\n        </mat-button-toggle-group>\n      </div>\n    </section>\n\n    <!-- app settings -->\n    @for (c of appSettings(); track $index) {\n      <section class=\"section\">\n        <h2 class=\"section__title\">{{ c._label }}</h2>\n        <div class=\"section__body\">\n          <ng-container *ngComponentOutlet=\"c.component\"></ng-container>\n        </div>\n      </section>\n    }\n\n    <!-- About Info -->\n    @let libraries = this.clientAboutData()?.libraries;\n    @if (libraries) {\n      <section class=\"section about\">\n        <h2 class=\"section__title\">{{ 'yuv.shell.settings.about.title' | translate }}</h2>\n        <mat-expansion-panel class=\"about__panel\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ 'yuv.shell.settings.dependency-info.title' | translate }}</mat-panel-title>\n            <!--            <mat-panel-description>{{ '' | translate }}</mat-panel-description>-->\n          </mat-expansion-panel-header>\n\n          <ng-template matExpansionPanelContent>\n            <div class=\"about__panel-content\">\n              <table mat-table [dataSource]=\"libraries\" class=\"mat-elevation-z8\">\n                <!-- Name Column -->\n                <ng-container matColumnDef=\"name\">\n                  <th mat-header-cell *matHeaderCellDef>{{ 'yuv.shell.settings.dependency-info.package' | translate }}</th>\n                  <td mat-cell *matCellDef=\"let element\">{{ element.name }}</td>\n                </ng-container>\n\n                <!-- Version Column -->\n                <ng-container matColumnDef=\"version\">\n                  <th mat-header-cell *matHeaderCellDef>{{ 'yuv.shell.settings.dependency-info.version' | translate }}</th>\n                  <td mat-cell *matCellDef=\"let element\">{{ element.version }}</td>\n                </ng-container>\n\n                <!-- License Column -->\n                <ng-container matColumnDef=\"license\">\n                  <th mat-header-cell *matHeaderCellDef>{{ 'yuv.shell.settings.dependency-info.license' | translate }}</th>\n                  <td mat-cell *matCellDef=\"let element\">\n                    @if (element.link) {\n                      <a href=\"{{ element.link }}\" target=\"_blank\">{{ element.license }}</a>\n                    } @else {\n                      {{ element.license }}\n                    }\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"['name', 'version', 'license']\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: ['name', 'version', 'license']\"></tr>\n              </table>\n            </div>\n          </ng-template>\n        </mat-expansion-panel>\n      </section>\n    }\n  </div>\n</main>\n"],"names":[],"mappings":"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"}

package/fesm2022/yuuvis-client-shell.mjs

@@ -521,7 +521,7 @@ const clientShellRoutes = [
     { path: 'notifications', component: NotificationsPageComponent, outlet: 'aside' },
     // tracking outlet for dialogs
     { path: 'dialogs/:id', component: DialogTrackingComponent, outlet: 'dt', canDeactivate: [closeDialogGuard] },
-    { path: 'settings', loadComponent: () => import('./yuuvis-client-shell-settings.component-DJ90tY01.mjs').then((comp) => comp.SettingsPageComponent) },
+    { path: 'settings', loadComponent: () => import('./yuuvis-client-shell-settings.component-BaYerqR1.mjs').then((comp) => comp.SettingsPageComponent) },
     // default route
     { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
     // redirecting route

package/lib/assets/i18n/de.json

@@ -19,6 +19,7 @@
 	"yuv.shell.notifications.title": "Benachrichtigungen",
 	"yuv.shell.settings.about.title": "Über",
 	"yuv.shell.settings.client.version": "Client-Version",
+	"yuv.shell.settings.custom.theme": "Themen",
 	"yuv.shell.settings.dependency-info.license": "Lizenz",
 	"yuv.shell.settings.dependency-info.package": "Paket",
 	"yuv.shell.settings.dependency-info.title": "Lizenzhinweise",

package/lib/assets/i18n/en.json

@@ -19,6 +19,7 @@
 	"yuv.shell.notifications.title": "Notifications",
 	"yuv.shell.settings.about.title": "About",
 	"yuv.shell.settings.client.version": "Client version",
+	"yuv.shell.settings.custom.theme": "Themes",
 	"yuv.shell.settings.dependency-info.license": "License",
 	"yuv.shell.settings.dependency-info.package": "Package",
 	"yuv.shell.settings.dependency-info.title": "Licensing notes",

package/lib/pages/settings/settings.component.d.ts

@@ -3,7 +3,6 @@ import { TranslateService, YuvConfigLanguages, YuvUser } from '@yuuvis/client-co
 import { MatButtonToggleChange } from '@angular/material/button-toggle';
 import { ShellAppSettings } from '@yuuvis/client-shell-core';
 import { AboutData } from './settings.model';
-import { LayoutMode } from '@yuuvis/client-framework/common';
 import * as i0 from "@angular/core";
 export declare class SettingsPageComponent implements OnInit {
     #private;
@@ -12,10 +11,16 @@ export declare class SettingsPageComponent implements OnInit {
     translate: TranslateService;
     private shell;
     readonly document: Document;
+    protected readonly DEFAULT_THEME_KEY = "yuv-default";
+    protected readonly HIGH_CONTRAST_THEME_KEY = "yuv-high-contrast";
+    protected readonly DEFAULT_THEME: import("@yuuvis/client-framework/common").CustomThemeSettings;
+    disableMode: Signal<boolean>;
+    customThemes: Signal<import("@yuuvis/client-framework/common").CustomThemeSettings[]>;
+    currentTheme: Signal<string | undefined>;
     clientLocales: import("@angular/core").WritableSignal<YuvConfigLanguages[]>;
     clientVersion: import("@angular/core").WritableSignal<string | undefined>;
     clientAboutData: import("@angular/core").WritableSignal<AboutData | undefined>;
-    currentMode: Signal<LayoutMode>;
+    currentMode: Signal<import("@yuuvis/client-framework/common").Mode>;
     user: Signal<YuvUser | undefined>;
     appSettings: import("@angular/core").WritableSignal<(ShellAppSettings & {
         _label: string;
@@ -24,6 +29,7 @@ export declare class SettingsPageComponent implements OnInit {
     changeClientLocale(iso: string): void;
     changeMode({ value }: MatButtonToggleChange): void;
     toggleDarkMode(): void;
+    changeCustomTheme({ value }: MatButtonToggleChange): void;
     ngOnInit(): void;
     getAboutData(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SettingsPageComponent, never>;

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@yuuvis/client-shell",
-  "version": "2.10.2",
+  "version": "2.11.0",
   "author": "OPTIMAL SYSTEMS GmbH <npm@optimal-systems.de>",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^19.2.1",
     "@angular/core": "^19.2.1",
     "@angular/service-worker": "^19.2.1",
-    "@yuuvis/client-core": "^2.10.2",
-    "@yuuvis/client-shell-core": "^2.10.2",
-    "@yuuvis/client-framework": "^2.10.2"
+    "@yuuvis/client-core": "^2.11.0",
+    "@yuuvis/client-shell-core": "^2.11.0",
+    "@yuuvis/client-framework": "^2.11.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/fesm2022/yuuvis-client-shell-settings.component-DJ90tY01.mjs

@@ -1,102 +0,0 @@
-import * as i0 from '@angular/core';
-import { inject, signal, effect, Component } from '@angular/core';
-import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i3 from '@yuuvis/client-core';
-import { UserService, ConfigService, TranslateService, TranslateModule } from '@yuuvis/client-core';
-import * as i1 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
-import * as i3$1 from '@angular/material/expansion';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatSelectModule } from '@angular/material/select';
-import * as i4 from '@angular/material/table';
-import { MatTableModule } from '@angular/material/table';
-import { ShellService } from '@yuuvis/client-shell-core';
-import { map } from 'rxjs';
-import { LayoutSettingsService } from '@yuuvis/client-framework/common';
-
-class SettingsPageComponent {
-    #layoutSettingsService;
-    #http;
-    #appSettings;
-    #appSettingsEffect;
-    constructor() {
-        this.userService = inject(UserService);
-        this.config = inject(ConfigService);
-        this.translate = inject(TranslateService);
-        this.shell = inject(ShellService);
-        this.document = inject(DOCUMENT);
-        this.#layoutSettingsService = inject(LayoutSettingsService);
-        this.#http = inject(HttpClient);
-        this.clientLocales = signal([]);
-        this.clientVersion = signal(undefined);
-        this.clientAboutData = signal(undefined);
-        this.currentMode = this.#layoutSettingsService.mode;
-        this.user = toSignal(this.userService.user$);
-        this.appSettings = signal([]);
-        this.#appSettings = this.shell.appSettings;
-        this.#appSettingsEffect = effect(() => {
-            const as = this.#appSettings();
-            this.#mapAppSettings(as);
-        });
-        this.translate.onLangChange.pipe(takeUntilDestroyed()).subscribe(() => {
-            this.#mapAppSettings(this.appSettings());
-        });
-    }
-    #mapAppSettings(as) {
-        this.appSettings.set(as.map((appSetting) => {
-            const translatedLabel = this.translate.instant(appSetting.label);
-            const label = translatedLabel && !translatedLabel.startsWith('!missing') ? translatedLabel : appSetting.label;
-            return {
-                ...appSetting,
-                _label: label
-            };
-        }));
-    }
-    changeClientLocale(iso) {
-        this.userService.changeClientLocale(iso);
-    }
-    changeMode({ value }) {
-        if (value && value !== this.currentMode()) {
-            this.#layoutSettingsService.setMode(value);
-            this.#layoutSettingsService.applyLayoutMode(value);
-        }
-    }
-    toggleDarkMode() {
-        const root = document.getElementsByTagName('body')[0];
-        root.classList.toggle('dark');
-    }
-    ngOnInit() {
-        this.clientVersion.set(this.document.body.getAttribute('data-version') ?? 'dev');
-        this.clientLocales.set(this.config.getClientLocales());
-        this.getAboutData();
-    }
-    getAboutData() {
-        this.#http
-            .get('assets/about.data.json')
-            .pipe(map((response) => ({
-            ...response,
-            libraries: response.libraries
-                ? response.libraries.map((lib) => ({
-                    ...lib,
-                    ...(lib.license !== 'SEE LICENSE IN LICENSE' ? { link: `https://opensource.org/license/${lib.license}` } : {})
-                }))
-                : undefined
-        })))
-            .subscribe({
-            next: (response) => this.clientAboutData.set(response),
-            error: (error) => console.log({ error })
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SettingsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SettingsPageComponent, isStandalone: true, selector: "yuv-settings", ngImport: i0, template: "<header>\n  <h1>{{ 'yuv.shell.settings.title' | translate }}</h1>\n  <span class=\"subhead\">{{ 'yuv.shell.settings.client.version' | translate }}: {{ clientVersion() }}</span>\n</header>\n\n<main>\n  <div class=\"content-container\">\n    <!-- User Info -->\n    @let user = this.user();\n    @if (user) {\n      <section class=\"section user\">\n        <h2 class=\"section__title\">{{ user.title }}</h2>\n        <div class=\"section__body user__data grid\">\n          <div class=\"user__data-entry grid-row\">\n            <span class=\"user__data-entry-key grid-col grid-col-key\"> {{ 'yuv.shell.settings.user.email' | translate }}: </span>\n            <span class=\"user__data-entry-value grid-col grid-col-value\">\n              {{ user.email }}\n            </span>\n          </div>\n          <div class=\"user__data-entry grid-row\">\n            <span class=\"user__data-entry-key grid-col grid-col-key\"> {{ 'yuv.shell.settings.tenant' | translate }}: </span>\n            <span class=\"user__data-entry-value grid-col grid-col-value\">\n              {{ user.tenant }}\n            </span>\n          </div>\n\n          <!--<div class=\"user__data\">{{ 'yuv.shell.settings.user.name' | translate }}: {{ user.username }}</div>\n          <div class=\"user__data-entry\">{{ 'yuv.shell.settings.user.email' | translate }}: {{ user.email }}</div>\n          <div class=\"user__data-entry\">{{ 'yuv.shell.settings.tenant' | translate }}: {{ user.tenant }}</div>-->\n        </div>\n      </section>\n    }\n    <!-- Language Settings -->\n    <section yuvOfflineDisabled class=\"section\">\n      <h2 class=\"section__title\">{{ 'yuv.shell.settings.language' | translate }}</h2>\n      <div class=\"section__body\">\n        <mat-button-toggle-group\n          name=\"language\"\n          [value]=\"translate.currentLang\"\n          (valueChange)=\"changeClientLocale($event)\"\n          [attr.aria-label]=\"'yuv.shell.settings.language' | translate\"\n        >\n          @for (locale of clientLocales(); track locale.iso) {\n            <mat-button-toggle value=\"{{ locale.iso }}\">{{ locale.label }}</mat-button-toggle>\n          }\n        </mat-button-toggle-group>\n      </div>\n    </section>\n\n    <!-- Mode -->\n    @let currentThemeMode = currentMode();\n    <section class=\"section\">\n      <h2 class=\"section__title\">{{ 'yuv.shell.settings.mode' | translate }}</h2>\n      <div class=\"section__body\">\n        <mat-button-toggle-group name=\"mode\" [value]=\"currentThemeMode\" (change)=\"changeMode($event)\" [attr.aria-label]=\"'yuv.shell.settings.mode' | translate\">\n          <mat-button-toggle value=\"light\">{{ 'yuv.shell.settings.mode.light' | translate }}</mat-button-toggle>\n          <mat-button-toggle value=\"dark\">{{ 'yuv.shell.settings.mode.dark' | translate }}</mat-button-toggle>\n          <mat-button-toggle value=\"system\">{{ 'yuv.shell.settings.mode.system' | translate }}</mat-button-toggle>\n        </mat-button-toggle-group>\n      </div>\n    </section>\n\n    <!-- app settings -->\n    @for (c of appSettings(); track $index) {\n      <section class=\"section\">\n        <h2 class=\"section__title\">{{ c._label }}</h2>\n        <div class=\"section__body\">\n          <ng-container *ngComponentOutlet=\"c.component\"></ng-container>\n        </div>\n      </section>\n    }\n\n    <!-- About Info -->\n    @let libraries = this.clientAboutData()?.libraries;\n    @if (libraries) {\n      <section class=\"section about\">\n        <h2 class=\"section__title\">{{ 'yuv.shell.settings.about.title' | translate }}</h2>\n        <mat-expansion-panel class=\"about__panel\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ 'yuv.shell.settings.dependency-info.title' | translate }}</mat-panel-title>\n            <!--            <mat-panel-description>{{ '' | translate }}</mat-panel-description>-->\n          </mat-expansion-panel-header>\n\n          <ng-template matExpansionPanelContent>\n            <div class=\"about__panel-content\">\n              <table mat-table [dataSource]=\"libraries\" class=\"mat-elevation-z8\">\n                <!-- Name Column -->\n                <ng-container matColumnDef=\"name\">\n                  <th mat-header-cell *matHeaderCellDef>{{ 'yuv.shell.settings.dependency-info.package' | translate }}</th>\n                  <td mat-cell *matCellDef=\"let element\">{{ element.name }}</td>\n                </ng-container>\n\n                <!-- Version Column -->\n                <ng-container matColumnDef=\"version\">\n                  <th mat-header-cell *matHeaderCellDef>{{ 'yuv.shell.settings.dependency-info.version' | translate }}</th>\n                  <td mat-cell *matCellDef=\"let element\">{{ element.version }}</td>\n                </ng-container>\n\n                <!-- License Column -->\n                <ng-container matColumnDef=\"license\">\n                  <th mat-header-cell *matHeaderCellDef>{{ 'yuv.shell.settings.dependency-info.license' | translate }}</th>\n                  <td mat-cell *matCellDef=\"let element\">\n                    @if (element.link) {\n                      <a href=\"{{ element.link }}\" target=\"_blank\">{{ element.license }}</a>\n                    } @else {\n                      {{ element.license }}\n                    }\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"['name', 'version', 'license']\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: ['name', 'version', 'license']\"></tr>\n              </table>\n            </div>\n          </ng-template>\n        </mat-expansion-panel>\n      </section>\n    }\n  </div>\n</main>\n", styles: [":host{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;grid-template-areas:\"header\" \"settings\";height:100%;overflow:hidden;overflow-y:auto}:host header{grid-area:header;padding:var(--ymt-spacing-3xl)}:host header h1{margin:0}:host header .subhead{font:var(--ymt-font-subhead);color:var(--ymt-text-color-subtle)}:host main{grid-area:settings;padding:var(--ymt-spacing-m);padding-right:0;overflow-y:auto;scrollbar-gutter:stable}:host main .content-container{max-width:900px}:host main section{display:flex;flex-flow:column;padding:var(--ymt-spacing-m);margin-bottom:var(--ymt-spacing-l)}:host main .about__panel-content{overflow-x:auto}:host main .grid-row{display:grid;grid-template-columns:minmax(10ch,1fr) 11fr;grid-gap:var(--ymt-spacing-s);grid-template-areas:\"key value\";align-items:baseline}:host main .grid-col-key{font-weight:700;grid-area:key}:host main .grid-col-value{grid-area:value;word-break:break-all}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i3$1.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SettingsPageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-settings', standalone: true, imports: [CommonModule, TranslateModule, MatSelectModule, ReactiveFormsModule, MatButtonToggleGroup, MatButtonToggle, MatExpansionModule, MatTableModule], template: "<header>\n  <h1>{{ 'yuv.shell.settings.title' | translate }}</h1>\n  <span class=\"subhead\">{{ 'yuv.shell.settings.client.version' | translate }}: {{ clientVersion() }}</span>\n</header>\n\n<main>\n  <div class=\"content-container\">\n    <!-- User Info -->\n    @let user = this.user();\n    @if (user) {\n      <section class=\"section user\">\n        <h2 class=\"section__title\">{{ user.title }}</h2>\n        <div class=\"section__body user__data grid\">\n          <div class=\"user__data-entry grid-row\">\n            <span class=\"user__data-entry-key grid-col grid-col-key\"> {{ 'yuv.shell.settings.user.email' | translate }}: </span>\n            <span class=\"user__data-entry-value grid-col grid-col-value\">\n              {{ user.email }}\n            </span>\n          </div>\n          <div class=\"user__data-entry grid-row\">\n            <span class=\"user__data-entry-key grid-col grid-col-key\"> {{ 'yuv.shell.settings.tenant' | translate }}: </span>\n            <span class=\"user__data-entry-value grid-col grid-col-value\">\n              {{ user.tenant }}\n            </span>\n          </div>\n\n          <!--<div class=\"user__data\">{{ 'yuv.shell.settings.user.name' | translate }}: {{ user.username }}</div>\n          <div class=\"user__data-entry\">{{ 'yuv.shell.settings.user.email' | translate }}: {{ user.email }}</div>\n          <div class=\"user__data-entry\">{{ 'yuv.shell.settings.tenant' | translate }}: {{ user.tenant }}</div>-->\n        </div>\n      </section>\n    }\n    <!-- Language Settings -->\n    <section yuvOfflineDisabled class=\"section\">\n      <h2 class=\"section__title\">{{ 'yuv.shell.settings.language' | translate }}</h2>\n      <div class=\"section__body\">\n        <mat-button-toggle-group\n          name=\"language\"\n          [value]=\"translate.currentLang\"\n          (valueChange)=\"changeClientLocale($event)\"\n          [attr.aria-label]=\"'yuv.shell.settings.language' | translate\"\n        >\n          @for (locale of clientLocales(); track locale.iso) {\n            <mat-button-toggle value=\"{{ locale.iso }}\">{{ locale.label }}</mat-button-toggle>\n          }\n        </mat-button-toggle-group>\n      </div>\n    </section>\n\n    <!-- Mode -->\n    @let currentThemeMode = currentMode();\n    <section class=\"section\">\n      <h2 class=\"section__title\">{{ 'yuv.shell.settings.mode' | translate }}</h2>\n      <div class=\"section__body\">\n        <mat-button-toggle-group name=\"mode\" [value]=\"currentThemeMode\" (change)=\"changeMode($event)\" [attr.aria-label]=\"'yuv.shell.settings.mode' | translate\">\n          <mat-button-toggle value=\"light\">{{ 'yuv.shell.settings.mode.light' | translate }}</mat-button-toggle>\n          <mat-button-toggle value=\"dark\">{{ 'yuv.shell.settings.mode.dark' | translate }}</mat-button-toggle>\n          <mat-button-toggle value=\"system\">{{ 'yuv.shell.settings.mode.system' | translate }}</mat-button-toggle>\n        </mat-button-toggle-group>\n      </div>\n    </section>\n\n    <!-- app settings -->\n    @for (c of appSettings(); track $index) {\n      <section class=\"section\">\n        <h2 class=\"section__title\">{{ c._label }}</h2>\n        <div class=\"section__body\">\n          <ng-container *ngComponentOutlet=\"c.component\"></ng-container>\n        </div>\n      </section>\n    }\n\n    <!-- About Info -->\n    @let libraries = this.clientAboutData()?.libraries;\n    @if (libraries) {\n      <section class=\"section about\">\n        <h2 class=\"section__title\">{{ 'yuv.shell.settings.about.title' | translate }}</h2>\n        <mat-expansion-panel class=\"about__panel\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ 'yuv.shell.settings.dependency-info.title' | translate }}</mat-panel-title>\n            <!--            <mat-panel-description>{{ '' | translate }}</mat-panel-description>-->\n          </mat-expansion-panel-header>\n\n          <ng-template matExpansionPanelContent>\n            <div class=\"about__panel-content\">\n              <table mat-table [dataSource]=\"libraries\" class=\"mat-elevation-z8\">\n                <!-- Name Column -->\n                <ng-container matColumnDef=\"name\">\n                  <th mat-header-cell *matHeaderCellDef>{{ 'yuv.shell.settings.dependency-info.package' | translate }}</th>\n                  <td mat-cell *matCellDef=\"let element\">{{ element.name }}</td>\n                </ng-container>\n\n                <!-- Version Column -->\n                <ng-container matColumnDef=\"version\">\n                  <th mat-header-cell *matHeaderCellDef>{{ 'yuv.shell.settings.dependency-info.version' | translate }}</th>\n                  <td mat-cell *matCellDef=\"let element\">{{ element.version }}</td>\n                </ng-container>\n\n                <!-- License Column -->\n                <ng-container matColumnDef=\"license\">\n                  <th mat-header-cell *matHeaderCellDef>{{ 'yuv.shell.settings.dependency-info.license' | translate }}</th>\n                  <td mat-cell *matCellDef=\"let element\">\n                    @if (element.link) {\n                      <a href=\"{{ element.link }}\" target=\"_blank\">{{ element.license }}</a>\n                    } @else {\n                      {{ element.license }}\n                    }\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"['name', 'version', 'license']\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: ['name', 'version', 'license']\"></tr>\n              </table>\n            </div>\n          </ng-template>\n        </mat-expansion-panel>\n      </section>\n    }\n  </div>\n</main>\n", styles: [":host{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;grid-template-areas:\"header\" \"settings\";height:100%;overflow:hidden;overflow-y:auto}:host header{grid-area:header;padding:var(--ymt-spacing-3xl)}:host header h1{margin:0}:host header .subhead{font:var(--ymt-font-subhead);color:var(--ymt-text-color-subtle)}:host main{grid-area:settings;padding:var(--ymt-spacing-m);padding-right:0;overflow-y:auto;scrollbar-gutter:stable}:host main .content-container{max-width:900px}:host main section{display:flex;flex-flow:column;padding:var(--ymt-spacing-m);margin-bottom:var(--ymt-spacing-l)}:host main .about__panel-content{overflow-x:auto}:host main .grid-row{display:grid;grid-template-columns:minmax(10ch,1fr) 11fr;grid-gap:var(--ymt-spacing-s);grid-template-areas:\"key value\";align-items:baseline}:host main .grid-col-key{font-weight:700;grid-area:key}:host main .grid-col-value{grid-area:value;word-break:break-all}\n"] }]
-        }], ctorParameters: () => [] });
-
-export { SettingsPageComponent };
-//# sourceMappingURL=yuuvis-client-shell-settings.component-DJ90tY01.mjs.map

package/fesm2022/yuuvis-client-shell-settings.component-DJ90tY01.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"yuuvis-client-shell-settings.component-DJ90tY01.mjs","sources":["../../../../../libs/yuuvis/client-shell/src/lib/pages/settings/settings.component.ts","../../../../../libs/yuuvis/client-shell/src/lib/pages/settings/settings.component.html"],"sourcesContent":["import { Component, computed, effect, inject, OnInit, Signal, signal } from '@angular/core';\nimport { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\nimport { AppCacheService, ConfigService, TranslateModule, TranslateService, UserService, YuvConfigLanguages, YuvUser } from '@yuuvis/client-core';\n\nimport { CommonModule, DOCUMENT } from '@angular/common';\nimport { HttpClient } from '@angular/common/http';\nimport { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MatButtonToggle, MatButtonToggleChange, MatButtonToggleGroup } from '@angular/material/button-toggle';\nimport { MatExpansionModule } from '@angular/material/expansion';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatTableModule } from '@angular/material/table';\nimport { ShellAppSettingProperty, ShellAppSettings, ShellService } from '@yuuvis/client-shell-core';\nimport { map, Observable } from 'rxjs';\nimport { AboutData } from './settings.model';\nimport { LayoutMode, LayoutSettingsService } from '@yuuvis/client-framework/common';\n\n@Component({\n  selector: 'yuv-settings',\n  standalone: true,\n  imports: [CommonModule, TranslateModule, MatSelectModule, ReactiveFormsModule, MatButtonToggleGroup, MatButtonToggle, MatExpansionModule, MatTableModule],\n  templateUrl: './settings.component.html',\n  styleUrls: ['./settings.component.scss']\n})\nexport class SettingsPageComponent implements OnInit {\n  private userService = inject(UserService);\n  private config = inject(ConfigService);\n  public translate = inject(TranslateService);\n  private shell = inject(ShellService);\n  readonly document = inject(DOCUMENT);\n  #layoutSettingsService = inject(LayoutSettingsService);\n  #http = inject(HttpClient);\n\n  clientLocales = signal<YuvConfigLanguages[]>([]);\n  clientVersion = signal<string | undefined>(undefined);\n  clientAboutData = signal<AboutData | undefined>(undefined);\n  currentMode = this.#layoutSettingsService.mode;\n\n  user: Signal<YuvUser | undefined> = toSignal(this.userService.user$);\n  appSettings = signal<(ShellAppSettings & { _label: string })[]>([]);\n  #appSettings = this.shell.appSettings;\n  #appSettingsEffect = effect(() => {\n    const as = this.#appSettings();\n    this.#mapAppSettings(as);\n  });\n\n  constructor() {\n    this.translate.onLangChange.pipe(takeUntilDestroyed()).subscribe(() => {\n      this.#mapAppSettings(this.appSettings());\n    });\n  }\n\n  #mapAppSettings(as: ShellAppSettings[]) {\n    this.appSettings.set(\n      as.map((appSetting) => {\n        const translatedLabel = this.translate.instant(appSetting.label);\n        const label = translatedLabel && !translatedLabel.startsWith('!missing') ? translatedLabel : appSetting.label;\n        return {\n          ...appSetting,\n          _label: label\n        };\n      })\n    );\n  }\n\n  changeClientLocale(iso: string) {\n    this.userService.changeClientLocale(iso);\n  }\n\n  changeMode({ value }: MatButtonToggleChange) {\n    if (value && value !== this.currentMode()) {\n      this.#layoutSettingsService.setMode(value);\n      this.#layoutSettingsService.applyLayoutMode(value);\n    }\n  }\n\n  toggleDarkMode() {\n    const root = document.getElementsByTagName('body')[0];\n    root.classList.toggle('dark');\n  }\n\n  ngOnInit(): void {\n    this.clientVersion.set(this.document.body.getAttribute('data-version') ?? 'dev');\n    this.clientLocales.set(this.config.getClientLocales());\n    this.getAboutData();\n  }\n\n  getAboutData() {\n    this.#http\n      .get('assets/about.data.json')\n      .pipe(\n        map((response: AboutData) => ({\n          ...response,\n          libraries: response.libraries\n            ? response.libraries.map((lib) => ({\n                ...lib,\n                ...(lib.license !== 'SEE LICENSE IN LICENSE' ? { link: `https://opensource.org/license/${lib.license}` } : {})\n              }))\n            : undefined\n        }))\n      )\n      .subscribe({\n        next: (response: AboutData) => this.clientAboutData.set(response),\n        error: (error) => console.log({ error })\n      });\n  }\n}\n","<header>\n  <h1>{{ 'yuv.shell.settings.title' | translate }}</h1>\n  <span class=\"subhead\">{{ 'yuv.shell.settings.client.version' | translate }}: {{ clientVersion() }}</span>\n</header>\n\n<main>\n  <div class=\"content-container\">\n    <!-- User Info -->\n    @let user = this.user();\n    @if (user) {\n      <section class=\"section user\">\n        <h2 class=\"section__title\">{{ user.title }}</h2>\n        <div class=\"section__body user__data grid\">\n          <div class=\"user__data-entry grid-row\">\n            <span class=\"user__data-entry-key grid-col grid-col-key\"> {{ 'yuv.shell.settings.user.email' | translate }}: </span>\n            <span class=\"user__data-entry-value grid-col grid-col-value\">\n              {{ user.email }}\n            </span>\n          </div>\n          <div class=\"user__data-entry grid-row\">\n            <span class=\"user__data-entry-key grid-col grid-col-key\"> {{ 'yuv.shell.settings.tenant' | translate }}: </span>\n            <span class=\"user__data-entry-value grid-col grid-col-value\">\n              {{ user.tenant }}\n            </span>\n          </div>\n\n          <!--<div class=\"user__data\">{{ 'yuv.shell.settings.user.name' | translate }}: {{ user.username }}</div>\n          <div class=\"user__data-entry\">{{ 'yuv.shell.settings.user.email' | translate }}: {{ user.email }}</div>\n          <div class=\"user__data-entry\">{{ 'yuv.shell.settings.tenant' | translate }}: {{ user.tenant }}</div>-->\n        </div>\n      </section>\n    }\n    <!-- Language Settings -->\n    <section yuvOfflineDisabled class=\"section\">\n      <h2 class=\"section__title\">{{ 'yuv.shell.settings.language' | translate }}</h2>\n      <div class=\"section__body\">\n        <mat-button-toggle-group\n          name=\"language\"\n          [value]=\"translate.currentLang\"\n          (valueChange)=\"changeClientLocale($event)\"\n          [attr.aria-label]=\"'yuv.shell.settings.language' | translate\"\n        >\n          @for (locale of clientLocales(); track locale.iso) {\n            <mat-button-toggle value=\"{{ locale.iso }}\">{{ locale.label }}</mat-button-toggle>\n          }\n        </mat-button-toggle-group>\n      </div>\n    </section>\n\n    <!-- Mode -->\n    @let currentThemeMode = currentMode();\n    <section class=\"section\">\n      <h2 class=\"section__title\">{{ 'yuv.shell.settings.mode' | translate }}</h2>\n      <div class=\"section__body\">\n        <mat-button-toggle-group name=\"mode\" [value]=\"currentThemeMode\" (change)=\"changeMode($event)\" [attr.aria-label]=\"'yuv.shell.settings.mode' | translate\">\n          <mat-button-toggle value=\"light\">{{ 'yuv.shell.settings.mode.light' | translate }}</mat-button-toggle>\n          <mat-button-toggle value=\"dark\">{{ 'yuv.shell.settings.mode.dark' | translate }}</mat-button-toggle>\n          <mat-button-toggle value=\"system\">{{ 'yuv.shell.settings.mode.system' | translate }}</mat-button-toggle>\n        </mat-button-toggle-group>\n      </div>\n    </section>\n\n    <!-- app settings -->\n    @for (c of appSettings(); track $index) {\n      <section class=\"section\">\n        <h2 class=\"section__title\">{{ c._label }}</h2>\n        <div class=\"section__body\">\n          <ng-container *ngComponentOutlet=\"c.component\"></ng-container>\n        </div>\n      </section>\n    }\n\n    <!-- About Info -->\n    @let libraries = this.clientAboutData()?.libraries;\n    @if (libraries) {\n      <section class=\"section about\">\n        <h2 class=\"section__title\">{{ 'yuv.shell.settings.about.title' | translate }}</h2>\n        <mat-expansion-panel class=\"about__panel\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>{{ 'yuv.shell.settings.dependency-info.title' | translate }}</mat-panel-title>\n            <!--            <mat-panel-description>{{ '' | translate }}</mat-panel-description>-->\n          </mat-expansion-panel-header>\n\n          <ng-template matExpansionPanelContent>\n            <div class=\"about__panel-content\">\n              <table mat-table [dataSource]=\"libraries\" class=\"mat-elevation-z8\">\n                <!-- Name Column -->\n                <ng-container matColumnDef=\"name\">\n                  <th mat-header-cell *matHeaderCellDef>{{ 'yuv.shell.settings.dependency-info.package' | translate }}</th>\n                  <td mat-cell *matCellDef=\"let element\">{{ element.name }}</td>\n                </ng-container>\n\n                <!-- Version Column -->\n                <ng-container matColumnDef=\"version\">\n                  <th mat-header-cell *matHeaderCellDef>{{ 'yuv.shell.settings.dependency-info.version' | translate }}</th>\n                  <td mat-cell *matCellDef=\"let element\">{{ element.version }}</td>\n                </ng-container>\n\n                <!-- License Column -->\n                <ng-container matColumnDef=\"license\">\n                  <th mat-header-cell *matHeaderCellDef>{{ 'yuv.shell.settings.dependency-info.license' | translate }}</th>\n                  <td mat-cell *matCellDef=\"let element\">\n                    @if (element.link) {\n                      <a href=\"{{ element.link }}\" target=\"_blank\">{{ element.license }}</a>\n                    } @else {\n                      {{ element.license }}\n                    }\n                  </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"['name', 'version', 'license']\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: ['name', 'version', 'license']\"></tr>\n              </table>\n            </div>\n          </ng-template>\n        </mat-expansion-panel>\n      </section>\n    }\n  </div>\n</main>\n"],"names":["i2"],"mappings":"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"}