@zambon-dev/ui 0.0.0-stage → 0.0.1-bootstrap.0

package/fesm2022/zambon-dev-ui-shared.mjs

@@ -0,0 +1,1802 @@
+import * as i0 from '@angular/core';
+import { ChangeDetectionStrategy, Component, InjectionToken, inject, Injectable, viewChild, signal, HostListener, input, output, NgModule, ViewChild, DOCUMENT, computed, Input, Pipe, model } from '@angular/core';
+import * as i1 from '@angular/router';
+import { RouterModule, Router, ActivatedRoute } from '@angular/router';
+import { AuthService, APP_CONFIG, TabService, Tab, TabsComponent, ButtonFiltersComponent, TabViewBase, ButtonComponent, FrameworkViewType, DefaultTabViewComponent, FRAMEWORK_VIEW_TYPE, ModalBase, ChildList, ButtonRefreshComponent } from '@zambon-dev/ui/framework';
+import { SidebarService, toSidebarMenuOpenMode, SidebarMenuOpenMode, ModalComponent, SidebarComponent, DataGridDataset, RibbonGroupComponent, DataGridComponent, CatalogSelectComponent, FormGroupComponent, FormInputGroupComponent, DataProviderService } from '@zambon-dev/ui/library';
+import { TranslateService, TranslatePipe, TranslateLoader, provideTranslateService } from '@ngx-translate/core';
+import { map, catchError, interval, mergeMap, tap, of, take, BehaviorSubject, Subject, takeUntil, finalize, shareReplay, switchMap } from 'rxjs';
+import { HttpClient, HttpBackend } from '@angular/common/http';
+import { JwtHelperService, JwtInterceptor } from '@auth0/angular-jwt';
+import { HubConnectionState, HubConnectionBuilder } from '@microsoft/signalr';
+import { AsyncPipe, JsonPipe, DatePipe } from '@angular/common';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as i1$1 from '@angular/forms';
+import { FormBuilder, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader';
+
+class LoginLayoutComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: LoginLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: LoginLayoutComponent, isStandalone: true, selector: "shared-login-layout", ngImport: i0, template: "<div class=\"background\"></div>\r\n\r\n<div class=\"container\">\r\n  <router-outlet></router-outlet>\r\n</div>\r\n", styles: ["@layer properties;:host{display:block;height:100vh}.background{position:fixed;z-index:-50;height:100vh;width:100%;overflow:hidden}.background,.background:before{background-image:url(/background.jpg);background-size:cover;background-attachment:fixed}.background:before,.background:after{position:absolute;inset:0;--tw-content: \"\";content:var(--tw-content)}.background:before{--tw-blur: blur(var(--blur-sm, 8px));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.background:after{background-color:color-mix(in srgb,#fff 30%,transparent)}@supports (color: color-mix(in lab,red,red)){.background:after{background-color:color-mix(in oklab,var(--color-white, #fff) 30%,transparent)}}.background *{z-index:10}.container{position:absolute;top:50%;left:50%;--tw-translate-x: -50% ;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}@property --tw-content{syntax: \"*\"; inherits: false; initial-value: \"\";}@property --tw-blur{syntax: \"*\"; inherits: false;}@property --tw-brightness{syntax: \"*\"; inherits: false;}@property --tw-contrast{syntax: \"*\"; inherits: false;}@property --tw-grayscale{syntax: \"*\"; inherits: false;}@property --tw-hue-rotate{syntax: \"*\"; inherits: false;}@property --tw-invert{syntax: \"*\"; inherits: false;}@property --tw-opacity{syntax: \"*\"; inherits: false;}@property --tw-saturate{syntax: \"*\"; inherits: false;}@property --tw-sepia{syntax: \"*\"; inherits: false;}@property --tw-drop-shadow{syntax: \"*\"; inherits: false;}@property --tw-drop-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-drop-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-drop-shadow-size{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-content: \"\";--tw-blur: initial;--tw-brightness: initial;--tw-contrast: initial;--tw-grayscale: initial;--tw-hue-rotate: initial;--tw-invert: initial;--tw-opacity: initial;--tw-saturate: initial;--tw-sepia: initial;--tw-drop-shadow: initial;--tw-drop-shadow-color: initial;--tw-drop-shadow-alpha: 100%;--tw-drop-shadow-size: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: LoginLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shared-login-layout', imports: [RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"background\"></div>\r\n\r\n<div class=\"container\">\r\n  <router-outlet></router-outlet>\r\n</div>\r\n", styles: ["@layer properties;:host{display:block;height:100vh}.background{position:fixed;z-index:-50;height:100vh;width:100%;overflow:hidden}.background,.background:before{background-image:url(/background.jpg);background-size:cover;background-attachment:fixed}.background:before,.background:after{position:absolute;inset:0;--tw-content: \"\";content:var(--tw-content)}.background:before{--tw-blur: blur(var(--blur-sm, 8px));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.background:after{background-color:color-mix(in srgb,#fff 30%,transparent)}@supports (color: color-mix(in lab,red,red)){.background:after{background-color:color-mix(in oklab,var(--color-white, #fff) 30%,transparent)}}.background *{z-index:10}.container{position:absolute;top:50%;left:50%;--tw-translate-x: -50% ;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}@property --tw-content{syntax: \"*\"; inherits: false; initial-value: \"\";}@property --tw-blur{syntax: \"*\"; inherits: false;}@property --tw-brightness{syntax: \"*\"; inherits: false;}@property --tw-contrast{syntax: \"*\"; inherits: false;}@property --tw-grayscale{syntax: \"*\"; inherits: false;}@property --tw-hue-rotate{syntax: \"*\"; inherits: false;}@property --tw-invert{syntax: \"*\"; inherits: false;}@property --tw-opacity{syntax: \"*\"; inherits: false;}@property --tw-saturate{syntax: \"*\"; inherits: false;}@property --tw-sepia{syntax: \"*\"; inherits: false;}@property --tw-drop-shadow{syntax: \"*\"; inherits: false;}@property --tw-drop-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-drop-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-drop-shadow-size{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-content: \"\";--tw-blur: initial;--tw-brightness: initial;--tw-contrast: initial;--tw-grayscale: initial;--tw-hue-rotate: initial;--tw-invert: initial;--tw-opacity: initial;--tw-saturate: initial;--tw-sepia: initial;--tw-drop-shadow: initial;--tw-drop-shadow-color: initial;--tw-drop-shadow-alpha: 100%;--tw-drop-shadow-size: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+/** First segment of the route that hosts embedded external content. */
+const EXTERNAL_CONTENT_ROUTE_PATH = 'external-content';
+class ExternalContentConfigs {
+    /**
+     * Origins an embedded menu item may point at, for example `['https://reports.example.com']`.
+     * Empty — the default — allows any `http`/`https` origin.
+     *
+     * Populating it is the single highest-value control here after the scheme check: it narrows a
+     * compromised menu row from "frame anything on the internet" to "frame one of our report hosts".
+     */
+    allowedOrigins = [];
+    /** Milliseconds to wait for the frame's first `load` before hinting that framing may be refused. */
+    slowFrameHintDelay = 5000;
+    constructor(options = {}) {
+        Object.assign(this, options);
+    }
+}
+const EXTERNAL_CONTENT_CONFIGS = new InjectionToken('Embedded external content configuration', {
+    providedIn: 'root',
+    factory: () => new ExternalContentConfigs(),
+});
+
+class AuthenticationService extends AuthService {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Variables
+    adminAction = 'AdministrativeMaster';
+    config = inject(APP_CONFIG);
+    BASE_URL = `${this.config.BASE_URL}/Authentication`;
+    http = inject(HttpClient);
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super(inject(JwtHelperService), inject(TabService));
+    }
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    authenticate(model) {
+        return this.http.post(`${this.BASE_URL}/SignIn`, model).pipe(map((res) => {
+            this.setStorage('username', res.username, model.rememberMe);
+            this.setStorage('token', res.token, model.rememberMe);
+            this.setStorage('refreshToken', res.refreshToken, model.rememberMe);
+            this.setStorage('userInfo', window.btoa(JSON.stringify(res)), model.rememberMe);
+        }), catchError((error) => interval(1000).pipe(mergeMap(() => {
+            switch (error.status) {
+                case 401:
+                    throw 'InvalidUsernamePassword';
+                default:
+                    throw 'InternalServerError';
+            }
+        }))));
+    }
+    getActions() {
+        return this.http.post(`${this.BASE_URL}/GetActions`, {});
+    }
+    getUserInfo() {
+        const userInfo = this.userInfo;
+        if (userInfo) {
+            return JSON.parse(window.atob(userInfo));
+        }
+        return null;
+    }
+    tryRefreshToken() {
+        return this.http
+            .post(`${this.BASE_URL}/RefreshToken`, {
+            username: this.username ?? '',
+            refreshToken: this.refreshToken ?? '',
+        })
+            .pipe(tap((res) => {
+            this.setStorage('token', res.token);
+            this.setStorage('refreshToken', res.refreshToken);
+            this.setStorage('userInfo', window.btoa(JSON.stringify(res)));
+        }), map((res) => res.token ?? ''));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: AuthenticationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: AuthenticationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: AuthenticationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Remembers which external destination sits behind an embedded tab's `/external-content/:menuID`
+ * route, and resolves it back when the view is created.
+ *
+ * The destination never travels in the route, so the id has to be resolved to a URL somehow. That
+ * happens in three steps, cheapest first:
+ *
+ * 1. the in-memory registry — the item was clicked in this browsing session;
+ * 2. `sessionStorage` — the user pressed F5 on the embedded tab;
+ * 3. the application's `SidebarService.getMenuFromUrl()` — a cold deep link.
+ *
+ * Step 3 reuses the abstract hook every application already implements, so nothing new is required
+ * of a consumer: an application whose menu endpoint cannot resolve `/external-content/:id` simply
+ * gets the unavailable state on a cold deep link, which is the documented behaviour.
+ */
+class ExternalContentService {
+    //#region Variables
+    maxEntries = 20;
+    storageKey = 'zambon.externalContent';
+    registry = new Map();
+    sidebarService = inject(SidebarService);
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Public methods
+    /** Resolves the destination behind an embedded tab, or `undefined` when it cannot be recovered. */
+    find(menuID) {
+        const known = this.registry.get(menuID) ?? this.readFromStorage(menuID);
+        if (known) {
+            return of(known);
+        }
+        return this.sidebarService.getMenuFromUrl(`/${EXTERNAL_CONTENT_ROUTE_PATH}/${menuID}`).pipe(take(1), map((menu) => (!!menu && !!menu.url ? this.toEntry(menu) : undefined)), 
+        // A menu endpoint that does not know this route shape answers 404, which is an expected
+        // outcome here rather than a failure: the view falls back to its unavailable state.
+        catchError(() => of(undefined)));
+    }
+    /** Remembers a menu so its embedded tab survives a page refresh. */
+    register(menu) {
+        const entry = this.toEntry(menu);
+        this.registry.set(entry.id, entry);
+        this.writeToStorage(entry);
+    }
+    //#endregion
+    //#region Private methods
+    readAllFromStorage() {
+        try {
+            const raw = window.sessionStorage.getItem(this.storageKey);
+            if (!raw) {
+                return [];
+            }
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            // A poisoned or unavailable storage entry must never take the application down; the view
+            // degrades to asking the user to reopen the item from the menu.
+            return [];
+        }
+    }
+    readFromStorage(menuID) {
+        const entry = this.readAllFromStorage().find((candidate) => candidate?.id === menuID);
+        if (!!entry && !!entry.url) {
+            this.registry.set(entry.id, entry);
+            return entry;
+        }
+        return undefined;
+    }
+    toEntry(menu) {
+        return {
+            id: menu.id,
+            label: menu.label,
+            url: menu.url ?? '',
+        };
+    }
+    writeToStorage(entry) {
+        try {
+            const entries = [
+                entry,
+                ...this.readAllFromStorage().filter((candidate) => candidate?.id !== entry.id),
+            ].slice(0, this.maxEntries);
+            window.sessionStorage.setItem(this.storageKey, JSON.stringify(entries));
+        }
+        catch {
+            // Storage can be unavailable (private mode, blocked site data). Losing refresh support is
+            // acceptable; failing the click is not.
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ExternalContentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ExternalContentService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ExternalContentService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Resolves the runtime placeholders in an external menu URL, and vets the result before it is
+ * handed to the browser.
+ *
+ * Placeholder syntax is `{name}`, case-sensitive, drawn from a **closed** set:
+ *
+ * | Token        | Source                                              |
+ * |--------------|-----------------------------------------------------|
+ * | `{email}`    | `ICurrentUserInfo.email`                            |
+ * | `{language}` | `TranslateService.currentLang`, then `defaultLang`  |
+ * | `{userId}`   | `ICurrentUserInfo.userID`                           |
+ * | `{userName}` | `ICurrentUserInfo.username`                         |
+ *
+ * The set is closed by construction rather than reflected off the stored user info, and that is a
+ * security property, not a style choice: `AuthenticationService` persists the entire sign-in
+ * response under `userInfo`, tokens included, so a reflective implementation would let a menu URL
+ * configured as `?t={token}` hand the JWT to a third party. No authentication token is ever
+ * substituted.
+ */
+class ExternalUrlResolverService {
+    //#region Variables
+    authenticationService = inject(AuthenticationService);
+    translate = inject(TranslateService);
+    /** Placeholder grammar, used only to *detect* tokens this version does not know. */
+    unknownPlaceholderPattern = /\{[A-Za-z][A-Za-z0-9_]*\}/g;
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Public methods
+    /**
+     * Whether `url` is an absolute `http`/`https` address.
+     *
+     * Rejects relative paths, malformed values, protocol-relative `//host/path` (which throws
+     * without a base), and the schemes that would execute rather than navigate: `javascript:`,
+     * `data:`, `blob:`, `file:`.
+     */
+    isAllowed(url) {
+        let parsed;
+        try {
+            parsed = new URL(url);
+        }
+        catch {
+            return false;
+        }
+        return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+    }
+    /**
+     * Substitutes every known placeholder, URL-encoding each value.
+     *
+     * Because every value is percent-encoded, a placeholder must occupy one *whole* value — a full
+     * path segment, or a full query-parameter value. Encoding is what stops a display name that
+     * contains `&` from injecting an extra query parameter into the destination.
+     *
+     * A known placeholder with no value becomes an empty string; an unrecognized `{…}` is left
+     * exactly as configured, so a report URL that legitimately contains braces is not corrupted.
+     */
+    resolve(url) {
+        if (!url || url.indexOf('{') === -1) {
+            return url;
+        }
+        const values = this.getPlaceholderValues();
+        let resolved = url;
+        values.forEach((value, token) => {
+            if (resolved.indexOf(token) === -1) {
+                return;
+            }
+            if (value.length === 0) {
+                console.warn(`External URL placeholder ${token} has no value for the current user; substituting an empty string.`, url);
+            }
+            // split/join rather than String.replace: replace() interprets `$&` and `$1` in the
+            // replacement text, and without a global regex it would only swap the first occurrence.
+            resolved = resolved.split(token).join(encodeURIComponent(value));
+        });
+        this.warnAboutUnknownPlaceholders(url, resolved);
+        return resolved;
+    }
+    //#endregion
+    //#region Private methods
+    getPlaceholderValues() {
+        const user = this.authenticationService.getUserInfo();
+        return new Map([
+            ['{email}', user?.email ?? ''],
+            ['{language}', this.translate.currentLang || this.translate.defaultLang || ''],
+            ['{userId}', user?.userID?.toString() ?? ''],
+            ['{userName}', user?.username ?? ''],
+        ]);
+    }
+    warnAboutUnknownPlaceholders(url, resolved) {
+        const unknown = resolved.match(this.unknownPlaceholderPattern) ?? [];
+        if (unknown.length > 0) {
+            console.warn(`External URL contains unrecognized placeholders and was left as configured: ${unknown.join(', ')}`, url);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ExternalUrlResolverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ExternalUrlResolverService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ExternalUrlResolverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Streams top-bar notifications from a SignalR hub.
+ *
+ * The hub is configured via `AppConfig.notificationsEnabled` and `AppConfig.notificationsUrl`.
+ * When enabled, {@link start} opens a connection (authenticated with the current JWT) and
+ * listens for the server to push the notification list via the `ReceiveNotifications` client
+ * method. Consuming apps do not interact with this service directly — the top bar drives it.
+ */
+class NotificationsService {
+    //#region Variables
+    authService = inject(AuthService);
+    config = inject(APP_CONFIG);
+    connection;
+    notifications$ = new BehaviorSubject([]);
+    //#endregion
+    //#region Properties
+    /** Whether the notifications feature is enabled (toggled on and given a hub URL). */
+    get isEnabled() {
+        return this.config.notificationsEnabled && this.config.notificationsUrl.length > 0;
+    }
+    //#endregion
+    //#region Public methods
+    /** Emits the current list of notifications. */
+    getNotifications() {
+        return this.notifications$.asObservable();
+    }
+    /** Emits the number of unread notifications. */
+    getUnreadCount() {
+        return this.notifications$.pipe(map((notifications) => notifications.filter((n) => !n.isRead).length));
+    }
+    /** Marks every notification as read and notifies the hub. */
+    markAllAsRead() {
+        this.notifications$.next(this.notifications$.value.map((n) => ({ ...n, isRead: true })));
+        if (this.connection?.state === HubConnectionState.Connected) {
+            this.connection.invoke('MarkAllAsRead').catch((error) => {
+                console.error('Failed to mark notifications as read on the hub.', error);
+            });
+        }
+    }
+    /** Marks a single notification as read (optimistically; the server reconciles on the next push). */
+    markAsRead(notification) {
+        this.notifications$.next(this.notifications$.value.map((n) => (n === notification ? { ...n, isRead: true } : n)));
+    }
+    /** Opens the SignalR connection and starts receiving notifications. Idempotent and a no-op when disabled. */
+    start() {
+        if (!this.isEnabled || !!this.connection) {
+            return;
+        }
+        this.connection = new HubConnectionBuilder()
+            .withUrl(this.config.notificationsUrl, {
+            accessTokenFactory: () => this.authService.token ?? '',
+        })
+            .withAutomaticReconnect()
+            .build();
+        this.connection.on('ReceiveNotifications', (notifications) => {
+            this.notifications$.next(notifications ?? []);
+        });
+        this.connection.start().catch((error) => {
+            console.error('Failed to connect to the notifications hub.', error);
+        });
+    }
+    /** Closes the SignalR connection. */
+    async stop() {
+        if (this.connection) {
+            await this.connection.stop();
+            this.connection = undefined;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: NotificationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: NotificationsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: NotificationsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class OperationsHistoryService {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Variables
+    config = inject(APP_CONFIG);
+    http = inject(HttpClient);
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    list(controllerName, entityID, serviceHistoryID, parameters) {
+        return this.http.post(`${this.config.BASE_URL}/${controllerName}/${entityID}/Audit/${serviceHistoryID}`, parameters);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: OperationsHistoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: OperationsHistoryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: OperationsHistoryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class ServicesHistoryService {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Variables
+    config = inject(APP_CONFIG);
+    http = inject(HttpClient);
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    list(controllerName, entityID, parameters) {
+        return this.http.post(`${this.config.BASE_URL}/${controllerName}/${entityID}/Audit`, parameters);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ServicesHistoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ServicesHistoryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ServicesHistoryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class BrandComponent {
+    //#region Variables
+    config = inject(APP_CONFIG);
+    //#endregion
+    //#region Properties
+    get appName() {
+        return this.config.appName;
+    }
+    get companyName() {
+        return this.config.companyName;
+    }
+    get logoUrl() {
+        return this.config.logoUrl;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BrandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: BrandComponent, isStandalone: true, selector: "shared-brand", ngImport: i0, template: "<div class=\"brand\">\r\n  @if (logoUrl) {\r\n    <img class=\"brand-logo\" [src]=\"logoUrl\" [alt]=\"appName\" />\r\n  }\r\n\r\n  <div class=\"brand-text\">\r\n    <span class=\"brand-app\">{{ appName }}</span>\r\n    @if (companyName) {\r\n      <span class=\"brand-company\">{{ companyName }}</span>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer properties;.brand{display:flex;min-width:0px;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.brand .brand-app{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.brand .brand-company{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-stone-500, oklch(55.3% .013 58.071))}.brand .brand-logo{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;object-fit:contain}.brand .brand-text{display:flex;min-width:0px;flex-direction:column;--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25)}@media(max-width:767px){.brand .brand-text{display:none}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BrandComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shared-brand', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"brand\">\r\n  @if (logoUrl) {\r\n    <img class=\"brand-logo\" [src]=\"logoUrl\" [alt]=\"appName\" />\r\n  }\r\n\r\n  <div class=\"brand-text\">\r\n    <span class=\"brand-app\">{{ appName }}</span>\r\n    @if (companyName) {\r\n      <span class=\"brand-company\">{{ companyName }}</span>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer properties;.brand{display:flex;min-width:0px;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.brand .brand-app{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.brand .brand-company{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-stone-500, oklch(55.3% .013 58.071))}.brand .brand-logo{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;object-fit:contain}.brand .brand-text{display:flex;min-width:0px;flex-direction:column;--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25)}@media(max-width:767px){.brand .brand-text{display:none}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class EnvironmentBadgeComponent {
+    //#region Variables
+    config = inject(APP_CONFIG);
+    //#endregion
+    //#region Properties
+    /** CSS modifier class for the current environment, falling back to a neutral style. */
+    get badgeClass() {
+        const colorByEnvironment = {
+            DEV: 'env-dev',
+            QA: 'env-qa',
+            STG: 'env-stg',
+        };
+        return colorByEnvironment[this.environment] ?? 'env-neutral';
+    }
+    /** Normalized environment key (uppercase, trimmed). */
+    get environment() {
+        return (this.config.environment ?? '').trim().toUpperCase();
+    }
+    /** The badge is hidden in production and when no environment is configured. */
+    get isVisible() {
+        return this.environment.length > 0 && this.environment !== 'PROD';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: EnvironmentBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: EnvironmentBadgeComponent, isStandalone: true, selector: "shared-environment-badge", ngImport: i0, template: "@if (isVisible) {\r\n  <span class=\"env-badge {{ badgeClass }}\">\r\n    <span class=\"env-dot\"></span>\r\n    <span class=\"env-label\">{{ environment }}</span>\r\n  </span>\r\n}\r\n", styles: ["@layer properties;.env-badge{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:.325rem;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);text-transform:uppercase;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-inset: inset}.env-badge .env-dot{height:calc(var(--spacing, .25rem) * 1.5);width:calc(var(--spacing, .25rem) * 1.5);flex-shrink:0;border-radius:calc(infinity * 1px)}.env-badge.env-dev{background-color:var(--color-blue-50, oklch(97% .014 254.604));color:var(--color-blue-700, oklch(48.8% .243 264.376));--tw-ring-color: color-mix(in srgb, oklch(54.6% .245 262.881) 20%, transparent)}@supports (color: color-mix(in lab,red,red)){.env-badge.env-dev{--tw-ring-color: color-mix(in oklab, var(--color-blue-600, oklch(54.6% .245 262.881)) 20%, transparent)}}.env-badge.env-dev .env-dot{background-color:var(--color-blue-500, oklch(62.3% .214 259.815))}.env-badge.env-neutral{background-color:var(--color-stone-100, oklch(97% .001 106.424));color:var(--color-stone-600, oklch(44.4% .011 73.639));--tw-ring-color: color-mix(in srgb, oklch(55.3% .013 58.071) 20%, transparent)}@supports (color: color-mix(in lab,red,red)){.env-badge.env-neutral{--tw-ring-color: color-mix(in oklab, var(--color-stone-500, oklch(55.3% .013 58.071)) 20%, transparent)}}.env-badge.env-neutral .env-dot{background-color:var(--color-stone-500, oklch(55.3% .013 58.071))}.env-badge.env-qa{background-color:var(--color-amber-50, oklch(98.7% .022 95.277));color:var(--color-amber-700, oklch(55.5% .163 48.998));--tw-ring-color: color-mix(in srgb, oklch(66.6% .179 58.318) 20%, transparent)}@supports (color: color-mix(in lab,red,red)){.env-badge.env-qa{--tw-ring-color: color-mix(in oklab, var(--color-amber-600, oklch(66.6% .179 58.318)) 20%, transparent)}}.env-badge.env-qa .env-dot{background-color:var(--color-amber-500, oklch(76.9% .188 70.08))}.env-badge.env-stg{background-color:var(--color-violet-50, oklch(96.9% .016 293.756));color:var(--color-violet-700, oklch(49.1% .27 292.581));--tw-ring-color: color-mix(in srgb, oklch(54.1% .281 293.009) 20%, transparent)}@supports (color: color-mix(in lab,red,red)){.env-badge.env-stg{--tw-ring-color: color-mix(in oklab, var(--color-violet-600, oklch(54.1% .281 293.009)) 20%, transparent)}}.env-badge.env-stg .env-dot{background-color:var(--color-violet-500, oklch(60.6% .25 292.717))}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-tracking: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: EnvironmentBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shared-environment-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isVisible) {\r\n  <span class=\"env-badge {{ badgeClass }}\">\r\n    <span class=\"env-dot\"></span>\r\n    <span class=\"env-label\">{{ environment }}</span>\r\n  </span>\r\n}\r\n", styles: ["@layer properties;.env-badge{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:.325rem;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);text-transform:uppercase;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-inset: inset}.env-badge .env-dot{height:calc(var(--spacing, .25rem) * 1.5);width:calc(var(--spacing, .25rem) * 1.5);flex-shrink:0;border-radius:calc(infinity * 1px)}.env-badge.env-dev{background-color:var(--color-blue-50, oklch(97% .014 254.604));color:var(--color-blue-700, oklch(48.8% .243 264.376));--tw-ring-color: color-mix(in srgb, oklch(54.6% .245 262.881) 20%, transparent)}@supports (color: color-mix(in lab,red,red)){.env-badge.env-dev{--tw-ring-color: color-mix(in oklab, var(--color-blue-600, oklch(54.6% .245 262.881)) 20%, transparent)}}.env-badge.env-dev .env-dot{background-color:var(--color-blue-500, oklch(62.3% .214 259.815))}.env-badge.env-neutral{background-color:var(--color-stone-100, oklch(97% .001 106.424));color:var(--color-stone-600, oklch(44.4% .011 73.639));--tw-ring-color: color-mix(in srgb, oklch(55.3% .013 58.071) 20%, transparent)}@supports (color: color-mix(in lab,red,red)){.env-badge.env-neutral{--tw-ring-color: color-mix(in oklab, var(--color-stone-500, oklch(55.3% .013 58.071)) 20%, transparent)}}.env-badge.env-neutral .env-dot{background-color:var(--color-stone-500, oklch(55.3% .013 58.071))}.env-badge.env-qa{background-color:var(--color-amber-50, oklch(98.7% .022 95.277));color:var(--color-amber-700, oklch(55.5% .163 48.998));--tw-ring-color: color-mix(in srgb, oklch(66.6% .179 58.318) 20%, transparent)}@supports (color: color-mix(in lab,red,red)){.env-badge.env-qa{--tw-ring-color: color-mix(in oklab, var(--color-amber-600, oklch(66.6% .179 58.318)) 20%, transparent)}}.env-badge.env-qa .env-dot{background-color:var(--color-amber-500, oklch(76.9% .188 70.08))}.env-badge.env-stg{background-color:var(--color-violet-50, oklch(96.9% .016 293.756));color:var(--color-violet-700, oklch(49.1% .27 292.581));--tw-ring-color: color-mix(in srgb, oklch(54.1% .281 293.009) 20%, transparent)}@supports (color: color-mix(in lab,red,red)){.env-badge.env-stg{--tw-ring-color: color-mix(in oklab, var(--color-violet-600, oklch(54.1% .281 293.009)) 20%, transparent)}}.env-badge.env-stg .env-dot{background-color:var(--color-violet-500, oklch(60.6% .25 292.717))}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-tracking: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class NotificationsComponent {
+    //#region ViewChilds, Inputs, Outputs
+    dropdown = viewChild('dropdown', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropdown" }] : /* istanbul ignore next */ []));
+    //#endregion
+    //#region Variables
+    notificationsService = inject(NotificationsService);
+    router = inject(Router);
+    notifications$ = this.notificationsService.getNotifications();
+    // A signal rather than a field: the panel is also closed from a window click handler, which
+    // is not a binding on this view and so marks nothing.
+    showDropdown = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDropdown" }] : /* istanbul ignore next */ []));
+    unreadCount$ = this.notificationsService.getUnreadCount();
+    //#endregion
+    //#region Properties
+    /** Whether the notifications feature is enabled; when false the bell is not rendered. */
+    get isEnabled() {
+        return this.notificationsService.isEnabled;
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    ngOnInit() {
+        this.notificationsService.start();
+    }
+    //#endregion
+    //#region Event handlers
+    onDropdownClick() {
+        this.showDropdown.update((isShown) => !isShown);
+    }
+    onMarkAllAsRead() {
+        this.notificationsService.markAllAsRead();
+    }
+    onNotificationClick(notification) {
+        this.notificationsService.markAsRead(notification);
+        this.showDropdown.set(false);
+        const url = notification.callToActionUrl;
+        if (!url) {
+            return;
+        }
+        if (/^https?:\/\//i.test(url)) {
+            window.open(url, '_blank', 'noopener');
+        }
+        else {
+            this.router.navigateByUrl(url);
+        }
+    }
+    //#endregion
+    //#region Private methods
+    documentClick(event) {
+        if (this.showDropdown()) {
+            let target = event.target;
+            while (target !== null && target.tagName?.toUpperCase() !== 'BODY') {
+                if (target === this.dropdown()?.nativeElement) {
+                    return;
+                }
+                target = target.parentElement;
+            }
+            this.showDropdown.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: NotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: NotificationsComponent, isStandalone: true, selector: "shared-notifications", host: { listeners: { "window:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isEnabled) {\r\n  <div #dropdown class=\"notifications\">\r\n    <button\r\n      class=\"btn gray-300 notifications-toggle\"\r\n      type=\"button\"\r\n      (click)=\"onDropdownClick()\"\r\n      [attr.aria-label]=\"'TopBar-Notifications-Title' | translate\"\r\n    >\r\n      <i class=\"fa-solid fa-bell\"></i>\r\n      @if (unreadCount$ | async; as count) {\r\n        <span class=\"notifications-badge\">{{ count }}</span>\r\n      }\r\n    </button>\r\n\r\n    @if (showDropdown()) {\r\n      <div class=\"notifications-panel\">\r\n        @let items = (notifications$ | async) ?? [];\r\n\r\n        <div class=\"notifications-header\">\r\n          <span>{{ 'TopBar-Notifications-Title' | translate }}</span>\r\n          @if (items.length > 0) {\r\n            <button type=\"button\" class=\"notifications-mark-all\" (click)=\"onMarkAllAsRead()\">\r\n              {{ 'TopBar-Notifications-MarkAllRead' | translate }}\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        @if (items.length > 0) {\r\n          <ul class=\"notifications-list\">\r\n            @for (item of items; track $index) {\r\n              <li class=\"notifications-item\" [class.unread]=\"!item.isRead\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"notifications-item-btn\"\r\n                  [class.has-cta]=\"!!item.callToActionUrl\"\r\n                  (click)=\"onNotificationClick(item)\"\r\n                >\r\n                  <span class=\"notifications-item-icon\"><i class=\"{{ item.icon }}\"></i></span>\r\n                  <span class=\"notifications-item-body\">\r\n                    <span class=\"notifications-item-title\">{{ item.title }}</span>\r\n                    <span class=\"notifications-item-description\">{{ item.description }}</span>\r\n                  </span>\r\n                  @if (item.callToActionUrl) {\r\n                    <i class=\"notifications-item-cta fa-solid fa-chevron-right\"></i>\r\n                  }\r\n                </button>\r\n              </li>\r\n            }\r\n          </ul>\r\n        } @else {\r\n          <div class=\"notifications-empty\">{{ 'TopBar-Notifications-Empty' | translate }}</div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["@layer properties;.notifications{position:relative}.notifications .notifications-badge{position:absolute;top:calc(var(--spacing, .25rem) * -1);right:calc(var(--spacing, .25rem) * -1);height:calc(var(--spacing, .25rem) * 4);min-width:calc(var(--spacing, .25rem) * 4);border-radius:calc(infinity * 1px);padding-inline:var(--spacing, .25rem);display:flex;align-items:center;justify-content:center;font-size:10px;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);background-color:var(--color-red-600, oklch(57.7% .245 27.325));color:var(--color-white, #fff)}.notifications .notifications-empty{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 6);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-stone-500, oklch(55.3% .013 58.071))}.notifications .notifications-header{display:flex;align-items:center;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-stone-200, oklch(92.3% .003 48.717));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.notifications .notifications-list{max-height:calc(var(--spacing, .25rem) * 80);overflow-y:auto}.notifications .notifications-list .notifications-item{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-stone-100, oklch(97% .001 106.424))}.notifications .notifications-list .notifications-item:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0px}.notifications .notifications-list .notifications-item.unread{background-color:color-mix(in srgb,#e6f4ff 60%,transparent)}@supports (color: color-mix(in lab,red,red)){.notifications .notifications-list .notifications-item.unread{background-color:color-mix(in oklab,var(--color-primary-50, #e6f4ff) 60%,transparent)}}.notifications .notifications-list .notifications-item .notifications-item-body{display:flex;min-width:0px;flex:1;flex-direction:column}.notifications .notifications-list .notifications-item .notifications-item-btn{display:flex;width:100%;cursor:pointer;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 2.5);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left}@media(hover:hover){.notifications .notifications-list .notifications-item .notifications-item-btn:hover{background-color:var(--color-stone-50, oklch(98.5% .001 106.423))}}.notifications .notifications-list .notifications-item .notifications-item-cta{margin-top:var(--spacing, .25rem);flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-stone-400, oklch(70.9% .01 56.259))}.notifications .notifications-list .notifications-item .notifications-item-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-stone-500, oklch(55.3% .013 58.071))}.notifications .notifications-list .notifications-item .notifications-item-icon{margin-top:calc(var(--spacing, .25rem) * .5);display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:var(--color-stone-100, oklch(97% .001 106.424));font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-stone-600, oklch(44.4% .011 73.639))}.notifications .notifications-list .notifications-item .notifications-item-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--color-stone-800, oklch(26.8% .007 34.298))}.notifications .notifications-mark-all{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--color-primary-400, #006bb6)}@media(hover:hover){.notifications .notifications-mark-all:hover{color:var(--color-primary-500, #005794)}}.notifications .notifications-panel{position:absolute;top:100%;right:0;z-index:50;margin-top:var(--spacing, .25rem);width:calc(var(--spacing, .25rem) * 80);max-width:90vw;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-stone-200, oklch(92.3% .003 48.717));background-color:var(--color-white, #fff);--tw-shadow: 0 0 4px 0 var(--tw-shadow-color, rgba(0,0,0,.2)), 0 3px 20px 0 var(--tw-shadow-color, rgba(0,0,0,.19));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.notifications .notifications-toggle{position:relative}.notifications .notifications-toggle i{margin-right:0}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-font-weight: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: NotificationsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shared-notifications', imports: [AsyncPipe, TranslatePipe], template: "@if (isEnabled) {\r\n  <div #dropdown class=\"notifications\">\r\n    <button\r\n      class=\"btn gray-300 notifications-toggle\"\r\n      type=\"button\"\r\n      (click)=\"onDropdownClick()\"\r\n      [attr.aria-label]=\"'TopBar-Notifications-Title' | translate\"\r\n    >\r\n      <i class=\"fa-solid fa-bell\"></i>\r\n      @if (unreadCount$ | async; as count) {\r\n        <span class=\"notifications-badge\">{{ count }}</span>\r\n      }\r\n    </button>\r\n\r\n    @if (showDropdown()) {\r\n      <div class=\"notifications-panel\">\r\n        @let items = (notifications$ | async) ?? [];\r\n\r\n        <div class=\"notifications-header\">\r\n          <span>{{ 'TopBar-Notifications-Title' | translate }}</span>\r\n          @if (items.length > 0) {\r\n            <button type=\"button\" class=\"notifications-mark-all\" (click)=\"onMarkAllAsRead()\">\r\n              {{ 'TopBar-Notifications-MarkAllRead' | translate }}\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        @if (items.length > 0) {\r\n          <ul class=\"notifications-list\">\r\n            @for (item of items; track $index) {\r\n              <li class=\"notifications-item\" [class.unread]=\"!item.isRead\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"notifications-item-btn\"\r\n                  [class.has-cta]=\"!!item.callToActionUrl\"\r\n                  (click)=\"onNotificationClick(item)\"\r\n                >\r\n                  <span class=\"notifications-item-icon\"><i class=\"{{ item.icon }}\"></i></span>\r\n                  <span class=\"notifications-item-body\">\r\n                    <span class=\"notifications-item-title\">{{ item.title }}</span>\r\n                    <span class=\"notifications-item-description\">{{ item.description }}</span>\r\n                  </span>\r\n                  @if (item.callToActionUrl) {\r\n                    <i class=\"notifications-item-cta fa-solid fa-chevron-right\"></i>\r\n                  }\r\n                </button>\r\n              </li>\r\n            }\r\n          </ul>\r\n        } @else {\r\n          <div class=\"notifications-empty\">{{ 'TopBar-Notifications-Empty' | translate }}</div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["@layer properties;.notifications{position:relative}.notifications .notifications-badge{position:absolute;top:calc(var(--spacing, .25rem) * -1);right:calc(var(--spacing, .25rem) * -1);height:calc(var(--spacing, .25rem) * 4);min-width:calc(var(--spacing, .25rem) * 4);border-radius:calc(infinity * 1px);padding-inline:var(--spacing, .25rem);display:flex;align-items:center;justify-content:center;font-size:10px;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);background-color:var(--color-red-600, oklch(57.7% .245 27.325));color:var(--color-white, #fff)}.notifications .notifications-empty{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 6);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-stone-500, oklch(55.3% .013 58.071))}.notifications .notifications-header{display:flex;align-items:center;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-stone-200, oklch(92.3% .003 48.717));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.notifications .notifications-list{max-height:calc(var(--spacing, .25rem) * 80);overflow-y:auto}.notifications .notifications-list .notifications-item{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-stone-100, oklch(97% .001 106.424))}.notifications .notifications-list .notifications-item:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0px}.notifications .notifications-list .notifications-item.unread{background-color:color-mix(in srgb,#e6f4ff 60%,transparent)}@supports (color: color-mix(in lab,red,red)){.notifications .notifications-list .notifications-item.unread{background-color:color-mix(in oklab,var(--color-primary-50, #e6f4ff) 60%,transparent)}}.notifications .notifications-list .notifications-item .notifications-item-body{display:flex;min-width:0px;flex:1;flex-direction:column}.notifications .notifications-list .notifications-item .notifications-item-btn{display:flex;width:100%;cursor:pointer;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 2.5);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left}@media(hover:hover){.notifications .notifications-list .notifications-item .notifications-item-btn:hover{background-color:var(--color-stone-50, oklch(98.5% .001 106.423))}}.notifications .notifications-list .notifications-item .notifications-item-cta{margin-top:var(--spacing, .25rem);flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-stone-400, oklch(70.9% .01 56.259))}.notifications .notifications-list .notifications-item .notifications-item-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-stone-500, oklch(55.3% .013 58.071))}.notifications .notifications-list .notifications-item .notifications-item-icon{margin-top:calc(var(--spacing, .25rem) * .5);display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:var(--color-stone-100, oklch(97% .001 106.424));font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-stone-600, oklch(44.4% .011 73.639))}.notifications .notifications-list .notifications-item .notifications-item-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--color-stone-800, oklch(26.8% .007 34.298))}.notifications .notifications-mark-all{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--color-primary-400, #006bb6)}@media(hover:hover){.notifications .notifications-mark-all:hover{color:var(--color-primary-500, #005794)}}.notifications .notifications-panel{position:absolute;top:100%;right:0;z-index:50;margin-top:var(--spacing, .25rem);width:calc(var(--spacing, .25rem) * 80);max-width:90vw;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-stone-200, oklch(92.3% .003 48.717));background-color:var(--color-white, #fff);--tw-shadow: 0 0 4px 0 var(--tw-shadow-color, rgba(0,0,0,.2)), 0 3px 20px 0 var(--tw-shadow-color, rgba(0,0,0,.19));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.notifications .notifications-toggle{position:relative}.notifications .notifications-toggle i{margin-right:0}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-font-weight: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { dropdown: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }], documentClick: [{
+                type: HostListener,
+                args: ['window:click', ['$event']]
+            }] } });
+
+class LanguageSelectorComponent {
+    //#region ViewChilds, Inputs, Outputs
+    dropdown = viewChild('dropdown', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropdown" }] : /* istanbul ignore next */ []));
+    /** When true, the toggle shows the current language's flag (light-gray button) instead of text. */
+    showFlag = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showFlag" }] : /* istanbul ignore next */ []));
+    title = input('LanguageSelector-Title', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    //#endregion
+    //#region Variables
+    translate = inject(TranslateService);
+    languages = this.translate.getLangs();
+    // A signal rather than a field: the list is also closed from a window click handler, which
+    // is not a binding on this view and so marks nothing.
+    showDropdown = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDropdown" }] : /* istanbul ignore next */ []));
+    /**
+     * `TranslateService.currentLang` is a plain field. The flag on the toggle and the tick beside
+     * the chosen entry are read from it, and switching language changed neither until something
+     * else happened to refresh this view. Mirrored from the service's own event instead.
+     */
+    currentLang = toSignal(this.translate.onLangChange.pipe(map((event) => event.lang)), { initialValue: this.translate.currentLang });
+    //#endregion
+    //#region Properties
+    get selectedLanguage() {
+        return this.currentLang();
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Event handlers
+    onDropdownClick() {
+        this.showDropdown.update((isShown) => !isShown);
+    }
+    onSelectLanguage(language) {
+        localStorage.setItem('language', language);
+        this.translate.use(language);
+        this.showDropdown.set(false);
+    }
+    //#endregion
+    //#region Public methods
+    //#endregion
+    //#region Private methods
+    documentClick(event) {
+        if (this.showDropdown()) {
+            let target = event.target;
+            while (target !== null && target.tagName?.toUpperCase() !== 'BODY') {
+                if (target === this.dropdown()?.nativeElement) {
+                    return;
+                }
+                target = target.parentElement;
+            }
+            this.showDropdown.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: LanguageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: LanguageSelectorComponent, isStandalone: true, selector: "shared-language-selector", inputs: { showFlag: { classPropertyName: "showFlag", publicName: "showFlag", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #dropdown class=\"dropdown right\" [class.show]=\"showDropdown()\">\r\n  <button\r\n    class=\"btn\"\r\n    type=\"button\"\r\n    (click)=\"onDropdownClick()\"\r\n    [class.gray-300]=\"showFlag()\"\r\n    [class.lang-flag-toggle]=\"showFlag()\"\r\n    [attr.aria-label]=\"showFlag() ? (title() | translate) : null\"\r\n  >\r\n    @if (showFlag()) {\r\n      <span class=\"flag flag-{{ selectedLanguage }}\"></span>\r\n    } @else {\r\n      {{ title() | translate }}\r\n    }\r\n  </button>\r\n\r\n  <ul>\r\n    @for (lang of languages; track lang) {\r\n      <li>\r\n        <button\r\n          type=\"button\"\r\n          class=\"dropdown-item\"\r\n          [class.selected]=\"lang === selectedLanguage\"\r\n          (click)=\"onSelectLanguage(lang)\"\r\n        >\r\n          <span class=\"flag flag-{{ lang }}\"></span>\r\n          <span class=\"dropdown-label\">{{ 'Language-' + lang | translate }}</span>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: ["@layer properties;.dropdown .btn{width:100%;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.dropdown .flag{display:inline-block;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;border-radius:var(--radius-xs, .125rem);background-size:cover;background-position:center;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: color-mix(in srgb, #000 10%, transparent)}@supports (color: color-mix(in lab,red,red)){.dropdown .flag{--tw-ring-color: color-mix(in oklab, var(--color-black, #000) 10%, transparent)}}.dropdown .flag.flag-en{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 76 40\"%3E%3Crect width=\"76\" height=\"40\" fill=\"%23b22234\"/%3E%3Cg fill=\"%23fff\"%3E%3Crect y=\"3\" width=\"76\" height=\"3\"/%3E%3Crect y=\"9\" width=\"76\" height=\"3\"/%3E%3Crect y=\"15\" width=\"76\" height=\"3\"/%3E%3Crect y=\"22\" width=\"76\" height=\"3\"/%3E%3Crect y=\"28\" width=\"76\" height=\"3\"/%3E%3Crect y=\"34\" width=\"76\" height=\"3\"/%3E%3C/g%3E%3Crect width=\"30\" height=\"22\" fill=\"%233c3b6e\"/%3E%3C/svg%3E')}.dropdown .flag.flag-pt{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 70 49\"%3E%3Crect width=\"70\" height=\"49\" fill=\"%23009c3b\"/%3E%3Cpath d=\"M35 6L64 24.5L35 43L6 24.5Z\" fill=\"%23ffdf00\"/%3E%3Ccircle cx=\"35\" cy=\"24.5\" r=\"9.8\" fill=\"%23002776\"/%3E%3C/svg%3E')}.dropdown .lang-flag-toggle{display:flex;height:calc(var(--spacing, .25rem) * 9);width:auto;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:0px;padding-inline:calc(var(--spacing, .25rem) * 2.5)}.dropdown .lang-flag-toggle:after{border-top-color:currentColor;margin-left:.325rem}.dropdown ul{z-index:50;margin-top:var(--spacing, .25rem);min-width:11rem;padding:var(--spacing, .25rem);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-stone-200, oklch(92.3% .003 48.717));background-color:var(--color-white, #fff);--tw-backdrop-blur: ;-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);--tw-shadow: 0 0 4px 0 var(--tw-shadow-color, rgba(0,0,0,.2)), 0 3px 20px 0 var(--tw-shadow-color, rgba(0,0,0,.19));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.dropdown ul .dropdown-item{display:flex;width:100%;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);-webkit-user-select:none;user-select:none;text-align:left;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-stone-700, oklch(37.4% .01 67.558))}@media(hover:hover){.dropdown ul .dropdown-item:hover{background-color:var(--color-stone-100, oklch(97% .001 106.424))}}@media(hover:hover){.dropdown ul .dropdown-item:hover{color:var(--color-stone-700, oklch(37.4% .01 67.558))}}.dropdown ul .dropdown-item:focus{background-color:var(--color-stone-100, oklch(97% .001 106.424))}.dropdown ul .dropdown-item:focus{--tw-outline-style: none;outline-style:none}@media(forced-colors:active){.dropdown ul .dropdown-item:focus{outline:2px solid transparent;outline-offset:2px}}.dropdown ul .dropdown-item:active{background-color:var(--color-stone-200, oklch(92.3% .003 48.717))}.dropdown ul .dropdown-item:active{color:var(--color-stone-700, oklch(37.4% .01 67.558))}.dropdown ul .dropdown-item.selected{background-color:var(--color-primary-50, #e6f4ff);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-primary-700, #002f50)}.dropdown ul .dropdown-item.selected:hover{background-color:var(--color-primary-100, #9acaed)}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-backdrop-blur{syntax: \"*\"; inherits: false;}@property --tw-backdrop-brightness{syntax: \"*\"; inherits: false;}@property --tw-backdrop-contrast{syntax: \"*\"; inherits: false;}@property --tw-backdrop-grayscale{syntax: \"*\"; inherits: false;}@property --tw-backdrop-hue-rotate{syntax: \"*\"; inherits: false;}@property --tw-backdrop-invert{syntax: \"*\"; inherits: false;}@property --tw-backdrop-opacity{syntax: \"*\"; inherits: false;}@property --tw-backdrop-saturate{syntax: \"*\"; inherits: false;}@property --tw-backdrop-sepia{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-border-style: solid;--tw-backdrop-blur: initial;--tw-backdrop-brightness: initial;--tw-backdrop-contrast: initial;--tw-backdrop-grayscale: initial;--tw-backdrop-hue-rotate: initial;--tw-backdrop-invert: initial;--tw-backdrop-opacity: initial;--tw-backdrop-saturate: initial;--tw-backdrop-sepia: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: LanguageSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shared-language-selector', imports: [TranslatePipe], template: "<div #dropdown class=\"dropdown right\" [class.show]=\"showDropdown()\">\r\n  <button\r\n    class=\"btn\"\r\n    type=\"button\"\r\n    (click)=\"onDropdownClick()\"\r\n    [class.gray-300]=\"showFlag()\"\r\n    [class.lang-flag-toggle]=\"showFlag()\"\r\n    [attr.aria-label]=\"showFlag() ? (title() | translate) : null\"\r\n  >\r\n    @if (showFlag()) {\r\n      <span class=\"flag flag-{{ selectedLanguage }}\"></span>\r\n    } @else {\r\n      {{ title() | translate }}\r\n    }\r\n  </button>\r\n\r\n  <ul>\r\n    @for (lang of languages; track lang) {\r\n      <li>\r\n        <button\r\n          type=\"button\"\r\n          class=\"dropdown-item\"\r\n          [class.selected]=\"lang === selectedLanguage\"\r\n          (click)=\"onSelectLanguage(lang)\"\r\n        >\r\n          <span class=\"flag flag-{{ lang }}\"></span>\r\n          <span class=\"dropdown-label\">{{ 'Language-' + lang | translate }}</span>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: ["@layer properties;.dropdown .btn{width:100%;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.dropdown .flag{display:inline-block;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;border-radius:var(--radius-xs, .125rem);background-size:cover;background-position:center;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: color-mix(in srgb, #000 10%, transparent)}@supports (color: color-mix(in lab,red,red)){.dropdown .flag{--tw-ring-color: color-mix(in oklab, var(--color-black, #000) 10%, transparent)}}.dropdown .flag.flag-en{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 76 40\"%3E%3Crect width=\"76\" height=\"40\" fill=\"%23b22234\"/%3E%3Cg fill=\"%23fff\"%3E%3Crect y=\"3\" width=\"76\" height=\"3\"/%3E%3Crect y=\"9\" width=\"76\" height=\"3\"/%3E%3Crect y=\"15\" width=\"76\" height=\"3\"/%3E%3Crect y=\"22\" width=\"76\" height=\"3\"/%3E%3Crect y=\"28\" width=\"76\" height=\"3\"/%3E%3Crect y=\"34\" width=\"76\" height=\"3\"/%3E%3C/g%3E%3Crect width=\"30\" height=\"22\" fill=\"%233c3b6e\"/%3E%3C/svg%3E')}.dropdown .flag.flag-pt{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 70 49\"%3E%3Crect width=\"70\" height=\"49\" fill=\"%23009c3b\"/%3E%3Cpath d=\"M35 6L64 24.5L35 43L6 24.5Z\" fill=\"%23ffdf00\"/%3E%3Ccircle cx=\"35\" cy=\"24.5\" r=\"9.8\" fill=\"%23002776\"/%3E%3C/svg%3E')}.dropdown .lang-flag-toggle{display:flex;height:calc(var(--spacing, .25rem) * 9);width:auto;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:0px;padding-inline:calc(var(--spacing, .25rem) * 2.5)}.dropdown .lang-flag-toggle:after{border-top-color:currentColor;margin-left:.325rem}.dropdown ul{z-index:50;margin-top:var(--spacing, .25rem);min-width:11rem;padding:var(--spacing, .25rem);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-stone-200, oklch(92.3% .003 48.717));background-color:var(--color-white, #fff);--tw-backdrop-blur: ;-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);--tw-shadow: 0 0 4px 0 var(--tw-shadow-color, rgba(0,0,0,.2)), 0 3px 20px 0 var(--tw-shadow-color, rgba(0,0,0,.19));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.dropdown ul .dropdown-item{display:flex;width:100%;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);-webkit-user-select:none;user-select:none;text-align:left;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-stone-700, oklch(37.4% .01 67.558))}@media(hover:hover){.dropdown ul .dropdown-item:hover{background-color:var(--color-stone-100, oklch(97% .001 106.424))}}@media(hover:hover){.dropdown ul .dropdown-item:hover{color:var(--color-stone-700, oklch(37.4% .01 67.558))}}.dropdown ul .dropdown-item:focus{background-color:var(--color-stone-100, oklch(97% .001 106.424))}.dropdown ul .dropdown-item:focus{--tw-outline-style: none;outline-style:none}@media(forced-colors:active){.dropdown ul .dropdown-item:focus{outline:2px solid transparent;outline-offset:2px}}.dropdown ul .dropdown-item:active{background-color:var(--color-stone-200, oklch(92.3% .003 48.717))}.dropdown ul .dropdown-item:active{color:var(--color-stone-700, oklch(37.4% .01 67.558))}.dropdown ul .dropdown-item.selected{background-color:var(--color-primary-50, #e6f4ff);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-primary-700, #002f50)}.dropdown ul .dropdown-item.selected:hover{background-color:var(--color-primary-100, #9acaed)}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-backdrop-blur{syntax: \"*\"; inherits: false;}@property --tw-backdrop-brightness{syntax: \"*\"; inherits: false;}@property --tw-backdrop-contrast{syntax: \"*\"; inherits: false;}@property --tw-backdrop-grayscale{syntax: \"*\"; inherits: false;}@property --tw-backdrop-hue-rotate{syntax: \"*\"; inherits: false;}@property --tw-backdrop-invert{syntax: \"*\"; inherits: false;}@property --tw-backdrop-opacity{syntax: \"*\"; inherits: false;}@property --tw-backdrop-saturate{syntax: \"*\"; inherits: false;}@property --tw-backdrop-sepia{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-border-style: solid;--tw-backdrop-blur: initial;--tw-backdrop-brightness: initial;--tw-backdrop-contrast: initial;--tw-backdrop-grayscale: initial;--tw-backdrop-hue-rotate: initial;--tw-backdrop-invert: initial;--tw-backdrop-opacity: initial;--tw-backdrop-saturate: initial;--tw-backdrop-sepia: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { dropdown: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }], showFlag: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFlag", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], documentClick: [{
+                type: HostListener,
+                args: ['window:click', ['$event']]
+            }] } });
+
+class UserProfileComponent {
+    //#region Variables
+    authenticationService = inject(AuthenticationService);
+    // A signal rather than a field: the top bar renders the name and the avatar, and this is
+    // only filled in ngOnInit -- after the first pass has already been and gone.
+    user = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
+    //#endregion
+    //#region Properties
+    /** Up to two uppercase initials derived from the user's name, used when no picture is set. */
+    get initials() {
+        const parts = this.name
+            .trim()
+            .split(/\s+/)
+            .filter((p) => p.length > 0);
+        if (parts.length === 0) {
+            return '';
+        }
+        const first = parts[0].charAt(0);
+        const last = parts.length > 1 ? parts[parts.length - 1].charAt(0) : '';
+        return (first + last).toUpperCase();
+    }
+    get name() {
+        return this.user()?.name ?? '';
+    }
+    get pictureUrl() {
+        return this.user()?.pictureUrl;
+    }
+    get position() {
+        return this.user()?.position ?? '';
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    ngOnInit() {
+        this.user.set(this.authenticationService.getUserInfo());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UserProfileComponent, isStandalone: true, selector: "shared-user-profile", ngImport: i0, template: "<div class=\"user-profile\">\r\n  <div class=\"user-text\">\r\n    <span class=\"user-name\">{{ name }}</span>\r\n    @if (position) {\r\n      <span class=\"user-position\">{{ position }}</span>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"user-avatar\">\r\n    @if (pictureUrl) {\r\n      <img class=\"user-avatar-img\" [src]=\"pictureUrl\" [alt]=\"name\" />\r\n    } @else {\r\n      <span class=\"user-avatar-initials\">{{ initials }}</span>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer properties;@media(max-width:767px){:host{display:none}}.user-profile{display:flex;height:calc(var(--spacing, .25rem) * 9);min-width:0px;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 2);-webkit-user-select:none;user-select:none;background-color:color-mix(in srgb,#000 5%,transparent);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}@supports (color: color-mix(in lab,red,red)){.user-profile{background-color:color-mix(in oklab,var(--color-black, #000) 5%,transparent)}}@media(hover:hover){.user-profile:hover{background-color:color-mix(in srgb,#000 10%,transparent)}@supports (color: color-mix(in lab,red,red)){.user-profile:hover{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}}.user-profile .user-avatar{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;border-radius:calc(infinity * 1px);background-color:var(--color-primary-500, #005794);color:var(--color-white, #fff)}.user-profile .user-avatar-img{height:100%;width:100%;object-fit:cover}.user-profile .user-avatar-initials{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);text-transform:uppercase}.user-profile .user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--color-stone-800, oklch(26.8% .007 34.298))}.user-profile .user-position{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);color:var(--color-stone-500, oklch(55.3% .013 58.071))}.user-profile .user-text{display:flex;min-width:0px;flex-direction:column;text-align:right}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UserProfileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shared-user-profile', template: "<div class=\"user-profile\">\r\n  <div class=\"user-text\">\r\n    <span class=\"user-name\">{{ name }}</span>\r\n    @if (position) {\r\n      <span class=\"user-position\">{{ position }}</span>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"user-avatar\">\r\n    @if (pictureUrl) {\r\n      <img class=\"user-avatar-img\" [src]=\"pictureUrl\" [alt]=\"name\" />\r\n    } @else {\r\n      <span class=\"user-avatar-initials\">{{ initials }}</span>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["@layer properties;@media(max-width:767px){:host{display:none}}.user-profile{display:flex;height:calc(var(--spacing, .25rem) * 9);min-width:0px;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 2);-webkit-user-select:none;user-select:none;background-color:color-mix(in srgb,#000 5%,transparent);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}@supports (color: color-mix(in lab,red,red)){.user-profile{background-color:color-mix(in oklab,var(--color-black, #000) 5%,transparent)}}@media(hover:hover){.user-profile:hover{background-color:color-mix(in srgb,#000 10%,transparent)}@supports (color: color-mix(in lab,red,red)){.user-profile:hover{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}}.user-profile .user-avatar{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;border-radius:calc(infinity * 1px);background-color:var(--color-primary-500, #005794);color:var(--color-white, #fff)}.user-profile .user-avatar-img{height:100%;width:100%;object-fit:cover}.user-profile .user-avatar-initials{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);text-transform:uppercase}.user-profile .user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--color-stone-800, oklch(26.8% .007 34.298))}.user-profile .user-position{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);color:var(--color-stone-500, oklch(55.3% .013 58.071))}.user-profile .user-text{display:flex;min-width:0px;flex-direction:column;text-align:right}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class TopBarComponent {
+    //#region ViewChilds, Inputs, Outputs
+    /** Emitted when the logout button is clicked. */
+    logout = output();
+    //#endregion
+    //#region Event handlers
+    onLogoutClick() {
+        this.logout.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TopBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: TopBarComponent, isStandalone: true, selector: "shared-top-bar", outputs: { logout: "logout" }, ngImport: i0, template: "<div class=\"top-bar\">\r\n  <div class=\"top-bar-section top-bar-start\">\r\n    <shared-brand></shared-brand>\r\n    <shared-environment-badge></shared-environment-badge>\r\n  </div>\r\n\r\n  <div class=\"top-bar-section top-bar-end\">\r\n    <shared-notifications></shared-notifications>\r\n    <shared-language-selector [showFlag]=\"true\"></shared-language-selector>\r\n\r\n    <!-- Theme switch slot (deferred \u2014 see 2026-07-23-top-bar-update-design.md) -->\r\n\r\n    <shared-user-profile></shared-user-profile>\r\n\r\n    <button\r\n      class=\"btn gray-300 top-bar-logout\"\r\n      type=\"button\"\r\n      (click)=\"onLogoutClick()\"\r\n      [attr.aria-label]=\"'Main-Logout' | translate\"\r\n    >\r\n      <i class=\"fa-solid fa-arrow-right-from-bracket\"></i>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".top-bar{display:flex;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}.top-bar .top-bar-end{flex-shrink:0}.top-bar .top-bar-section{display:flex;min-width:0px;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.top-bar .top-bar-start{min-width:0px}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: BrandComponent, selector: "shared-brand" }, { kind: "component", type: EnvironmentBadgeComponent, selector: "shared-environment-badge" }, { kind: "component", type: LanguageSelectorComponent, selector: "shared-language-selector", inputs: ["showFlag", "title"] }, { kind: "component", type: NotificationsComponent, selector: "shared-notifications" }, { kind: "component", type: UserProfileComponent, selector: "shared-user-profile" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TopBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shared-top-bar', imports: [
+                        BrandComponent,
+                        EnvironmentBadgeComponent,
+                        LanguageSelectorComponent,
+                        NotificationsComponent,
+                        TranslatePipe,
+                        UserProfileComponent,
+                    ], template: "<div class=\"top-bar\">\r\n  <div class=\"top-bar-section top-bar-start\">\r\n    <shared-brand></shared-brand>\r\n    <shared-environment-badge></shared-environment-badge>\r\n  </div>\r\n\r\n  <div class=\"top-bar-section top-bar-end\">\r\n    <shared-notifications></shared-notifications>\r\n    <shared-language-selector [showFlag]=\"true\"></shared-language-selector>\r\n\r\n    <!-- Theme switch slot (deferred \u2014 see 2026-07-23-top-bar-update-design.md) -->\r\n\r\n    <shared-user-profile></shared-user-profile>\r\n\r\n    <button\r\n      class=\"btn gray-300 top-bar-logout\"\r\n      type=\"button\"\r\n      (click)=\"onLogoutClick()\"\r\n      [attr.aria-label]=\"'Main-Logout' | translate\"\r\n    >\r\n      <i class=\"fa-solid fa-arrow-right-from-bracket\"></i>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".top-bar{display:flex;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}.top-bar .top-bar-end{flex-shrink:0}.top-bar .top-bar-section{display:flex;min-width:0px;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.top-bar .top-bar-start{min-width:0px}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { logout: [{ type: i0.Output, args: ["logout"] }] } });
+
+class MainLayoutComponent {
+    //#region ViewChilds, Inputs, Outputs
+    logoutModal = viewChild('logoutModal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "logoutModal" }] : /* istanbul ignore next */ []));
+    //#endregion
+    //#region Variables
+    authenticationService = inject(AuthenticationService);
+    destroy$ = new Subject();
+    externalContentService = inject(ExternalContentService);
+    externalUrlResolverService = inject(ExternalUrlResolverService);
+    router = inject(Router);
+    sidebarService = inject(SidebarService);
+    tabService = inject(TabService);
+    /** Application version (from AppConfig) projected into the sidebar footer. */
+    appVersion = inject(APP_CONFIG).version;
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    ngOnInit() {
+        const url = this.router.url;
+        if (url !== '/' && !this.tabService.isUrlOpen(url)) {
+            this.sidebarService
+                .getMenuFromUrl(url)
+                .pipe(take(1))
+                .subscribe({
+                next: (item) => {
+                    if (item) {
+                        this.tabService.updateTabTitle(url, item.label);
+                    }
+                },
+                // A deep-linked title is best-effort. Menu endpoints answer 404 for a URL they do not
+                // know -- the embedded-content route among them -- and that must not surface as an
+                // unhandled rejection.
+                error: () => undefined,
+            });
+        }
+        this.sidebarService.menuExternalUrlSelected
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((item) => this.openExternalMenu(item));
+        this.sidebarService.menuUrlSelected.pipe(takeUntil(this.destroy$)).subscribe((item) => {
+            const tab = new Tab({
+                title: item.label,
+                url: item.url,
+            });
+            this.tabService.openTab(tab);
+        });
+    }
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    onLogoutClick() {
+        this.logoutModal()?.toggleModal();
+    }
+    onLogoutConfirm() {
+        this.authenticationService.signOut();
+        this.router.navigate(['/login']);
+    }
+    //#endregion
+    //#region Private methods
+    openExternalMenu(item) {
+        const rawUrl = item.url ?? '';
+        if (rawUrl.length === 0) {
+            return;
+        }
+        if (toSidebarMenuOpenMode(item.openMode) === SidebarMenuOpenMode.ExternalEmbedded) {
+            // The tab has to be a real Angular route, so the destination travels by menu id and is
+            // resolved by ExternalContentComponent. A `?url=` query string would collapse every
+            // embedded tab into one -- TabService and CustomReuseStrategy key tabs on path segments
+            // only -- and would also let anyone frame an arbitrary site inside our own chrome.
+            this.externalContentService.register(item);
+            const tab = new Tab({
+                title: item.label,
+                url: `/${EXTERNAL_CONTENT_ROUTE_PATH}/${item.id}`,
+            });
+            this.tabService.openTab(tab);
+            return;
+        }
+        const url = this.externalUrlResolverService.resolve(rawUrl);
+        if (!this.externalUrlResolverService.isAllowed(url)) {
+            console.error(`Sidebar menu "${item.label}" points to an unsupported external address and was not opened.`, url);
+            return;
+        }
+        window.open(url, '_blank', 'noopener,noreferrer');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MainLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: MainLayoutComponent, isStandalone: true, selector: "shared-main-layout", viewQueries: [{ propertyName: "logoutModal", first: true, predicate: ["logoutModal"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"main-container\">\r\n  <div class=\"sidebar-region\">\r\n    <lib-sidebar>\r\n      @if (appVersion) {\r\n        <span>v{{ appVersion }}</span>\r\n      }\r\n    </lib-sidebar>\r\n  </div>\r\n\r\n  <shared-top-bar class=\"toolbar\" (logout)=\"onLogoutClick()\"></shared-top-bar>\r\n\r\n  <div class=\"content\">\r\n    <framework-tabs>\r\n      <router-outlet></router-outlet>\r\n    </framework-tabs>\r\n  </div>\r\n</div>\r\n\r\n<lib-modal #logoutModal position=\"top\" size=\"xl\" [closeButtonText]=\"'Main-Logout-Modal-Message-Cancel' | translate\">\r\n  <div body>\r\n    <h5>{{ 'Main-Logout-Modal-Message' | translate }}</h5>\r\n  </div>\r\n  <div footer>\r\n    <button type=\"button\" class=\"btn red-600\" (click)=\"onLogoutConfirm()\">\r\n      {{ 'Main-Logout-Modal-Message-Confirm' | translate }}\r\n    </button>\r\n  </div>\r\n</lib-modal>\r\n", styles: ["@charset \"UTF-8\";@layer properties;.main-container{display:grid;height:100vh;max-height:100vh;width:100vw;max-width:100%;background:var(--app-backdrop);grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:\"toolbar toolbar\" \"sidebar content\"}.main-container .sidebar-region{padding:calc(var(--spacing, .25rem) * 3);grid-area:sidebar}.main-container .toolbar{display:flex;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-stone-300, oklch(86.9% .005 56.366));background-color:color-mix(in srgb,#fff 90%,transparent);padding:calc(var(--spacing, .25rem) * 2);--tw-shadow: 0 0 4px 0 var(--tw-shadow-color, rgba(0,0,0,.2)), 0 3px 20px 0 var(--tw-shadow-color, rgba(0,0,0,.19));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);grid-area:toolbar}@supports (color: color-mix(in lab,red,red)){.main-container .toolbar{background-color:color-mix(in oklab,var(--color-white, #fff) 90%,transparent)}}.main-container .content{padding-inline:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 2);grid-area:content}.main-container framework-tabs{height:100%}lib-modal h5{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "lib-modal", inputs: ["closeButtonText", "dialog", "modalProcessing", "position", "size", "title"], outputs: ["closeButtonTextChange", "modalProcessingChange", "closed"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidebarComponent, selector: "lib-sidebar" }, { kind: "component", type: TabsComponent, selector: "framework-tabs" }, { kind: "component", type: TopBarComponent, selector: "shared-top-bar", outputs: ["logout"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MainLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shared-main-layout', imports: [ModalComponent, RouterModule, SidebarComponent, TabsComponent, TopBarComponent, TranslatePipe], template: "<div class=\"main-container\">\r\n  <div class=\"sidebar-region\">\r\n    <lib-sidebar>\r\n      @if (appVersion) {\r\n        <span>v{{ appVersion }}</span>\r\n      }\r\n    </lib-sidebar>\r\n  </div>\r\n\r\n  <shared-top-bar class=\"toolbar\" (logout)=\"onLogoutClick()\"></shared-top-bar>\r\n\r\n  <div class=\"content\">\r\n    <framework-tabs>\r\n      <router-outlet></router-outlet>\r\n    </framework-tabs>\r\n  </div>\r\n</div>\r\n\r\n<lib-modal #logoutModal position=\"top\" size=\"xl\" [closeButtonText]=\"'Main-Logout-Modal-Message-Cancel' | translate\">\r\n  <div body>\r\n    <h5>{{ 'Main-Logout-Modal-Message' | translate }}</h5>\r\n  </div>\r\n  <div footer>\r\n    <button type=\"button\" class=\"btn red-600\" (click)=\"onLogoutConfirm()\">\r\n      {{ 'Main-Logout-Modal-Message-Confirm' | translate }}\r\n    </button>\r\n  </div>\r\n</lib-modal>\r\n", styles: ["@charset \"UTF-8\";@layer properties;.main-container{display:grid;height:100vh;max-height:100vh;width:100vw;max-width:100%;background:var(--app-backdrop);grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:\"toolbar toolbar\" \"sidebar content\"}.main-container .sidebar-region{padding:calc(var(--spacing, .25rem) * 3);grid-area:sidebar}.main-container .toolbar{display:flex;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-stone-300, oklch(86.9% .005 56.366));background-color:color-mix(in srgb,#fff 90%,transparent);padding:calc(var(--spacing, .25rem) * 2);--tw-shadow: 0 0 4px 0 var(--tw-shadow-color, rgba(0,0,0,.2)), 0 3px 20px 0 var(--tw-shadow-color, rgba(0,0,0,.19));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);grid-area:toolbar}@supports (color: color-mix(in lab,red,red)){.main-container .toolbar{background-color:color-mix(in oklab,var(--color-white, #fff) 90%,transparent)}}.main-container .content{padding-inline:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 2);grid-area:content}.main-container framework-tabs{height:100%}lib-modal h5{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { logoutModal: [{ type: i0.ViewChild, args: ['logoutModal', { isSignal: true }] }] } });
+
+class LoginComponent {
+    //#region ViewChilds, Inputs, Outputs
+    username = viewChild('username', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "username" }] : /* istanbul ignore next */ []));
+    //#endregion
+    //#region Variables
+    form;
+    // A signal holding one object, replaced rather than edited: every one of these is rendered --
+    // the validation banner, the button's spinner, its success tick -- and each is written from
+    // inside the authentication stream, where nothing marks this view.
+    formState = signal({
+        error: null,
+        loading: false,
+        success: false,
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formState" }] : /* istanbul ignore next */ []));
+    authenticationService = inject(AuthenticationService);
+    formBuilder = inject(FormBuilder);
+    router = inject(Router);
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    ngOnInit() {
+        this.form = this.formBuilder.group({
+            password: ['', Validators.required],
+            rememberMe: [false, { nonNullable: true }],
+            username: ['', Validators.required],
+        });
+    }
+    //#endregion
+    //#region Event handlers
+    onSubmit() {
+        this.form.markAllAsTouched();
+        if (this.form.valid) {
+            this.form.disable();
+            this.formState.update((state) => ({ ...state, error: null, loading: true }));
+            this.authenticationService
+                .authenticate({
+                username: this.form.get('username')?.value.toString() ?? '',
+                password: this.form.get('password')?.value.toString() ?? '',
+                rememberMe: this.form.get('rememberMe')?.value ?? false,
+            })
+                .pipe(tap(() => this.formState.update((state) => ({ ...state, success: true }))), finalize(() => this.formState.update((state) => ({ ...state, loading: false }))))
+                .subscribe({
+                next: () => {
+                    const params = new URLSearchParams(window.location.search);
+                    this.router.navigate([params.get('returnUrl') ?? '/']);
+                },
+                error: (e) => {
+                    this.form.enable();
+                    this.form.controls['password'].setValue('');
+                    this.form.controls['password'].markAsUntouched();
+                    this.username()?.nativeElement.focus();
+                    const error = e === 'InvalidUsernamePassword' ? 'invalid' : 'internalServerError';
+                    this.formState.update((state) => ({ ...state, error }));
+                },
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: LoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: LoginComponent, isStandalone: true, selector: "shared-login", viewQueries: [{ propertyName: "username", first: true, predicate: ["username"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"content\">\r\n  <div class=\"login\">\r\n    <div class=\"logo-container\">\r\n      <div class=\"logo\">\r\n        <img src=\"/logo-login.png\" alt=\"Logo\" />\r\n      </div>\r\n    </div>\r\n\r\n    <h3 class=\"title\">{{ 'Login-Title' | translate }}</h3>\r\n\r\n    <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\r\n      <div class=\"validations\" [class.hidden]=\"!formState().error\">\r\n        @if (formState().error === 'invalid') {\r\n          <div>\r\n            {{ 'Login-Errors-Invalid' | translate }}\r\n          </div>\r\n        }\r\n        @if (formState().error === 'internalServerError') {\r\n          <div>\r\n            {{ 'Login-Errors-InternalServerError' | translate }}\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"input-group inline\">\r\n        <input\r\n          type=\"text\"\r\n          #username\r\n          id=\"username\"\r\n          formControlName=\"username\"\r\n          class=\"form-input peer\"\r\n          [placeholder]=\"'Login-Username' | translate\"\r\n        />\r\n\r\n        <div class=\"input-group-text\">\r\n          <label for=\"username\">\r\n            <i class=\"fas fa-user fa-fw\"></i>\r\n          </label>\r\n        </div>\r\n\r\n        <div class=\"validations\">\r\n          @if (form.get('username')?.hasError('required')) {\r\n            <span>{{ 'Login-Username-Required' | translate }}</span>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"input-group inline\">\r\n        <input\r\n          type=\"password\"\r\n          id=\"password\"\r\n          formControlName=\"password\"\r\n          class=\"form-input\"\r\n          [placeholder]=\"'Login-Password' | translate\"\r\n        />\r\n\r\n        <div class=\"input-group-text\">\r\n          <label for=\"password\">\r\n            <i class=\"fas fa-key fa-fw\"></i>\r\n          </label>\r\n        </div>\r\n\r\n        <div class=\"validations\">\r\n          @if (form.get('password')?.hasError('required')) {\r\n            <span>{{ 'Login-Password-Required' | translate }}</span>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"options\">\r\n        <div>\r\n          <input class=\"form-input\" id=\"rememberMe\" formControlName=\"rememberMe\" type=\"checkbox\" />\r\n          <label for=\"rememberMe\">{{ 'Login-RememberMe' | translate }}</label>\r\n        </div>\r\n\r\n        <shared-language-selector></shared-language-selector>\r\n      </div>\r\n\r\n      <div class=\"buttons\">\r\n        <button\r\n          type=\"submit\"\r\n          class=\"btn\"\r\n          [class.loading]=\"formState().loading && !formState().success && !formState().error\"\r\n          [class.error]=\"formState().error\"\r\n          [class.success]=\"formState().success\"\r\n        >\r\n          @if (!formState().loading) {\r\n            <i class=\"fas fa-sign-in-alt fa-fw\"></i>\r\n          }\r\n          {{ 'Login-SignIn' | translate }}\r\n        </button>\r\n      </div>\r\n    </form>\r\n  </div>\r\n\r\n  <div class=\"footer\">\r\n    <span [innerHTML]=\"'Login-Copyright' | translate\"></span>\r\n    <span class=\"design\">{{ 'Login-DesignBy' | translate }}</span>\r\n  </div>\r\n</div>\r\n", styles: ["@layer properties;:host{display:block}.content{margin-inline:auto;width:calc(10 / 12 * 100%);border-radius:var(--radius-lg, .5rem);--tw-shadow: 0 4px 8px 0 var(--tw-shadow-color, rgba(0,0,0,.2)), 0 6px 20px 0 var(--tw-shadow-color, rgba(0,0,0,.19));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media(width>=48rem){.content{width:calc(8 / 12 * 100%)}}@media(width>=80rem){.content{width:calc(5 / 12 * 100%)}}:where(.content>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.content>:not(:last-child)){border-color:var(--color-zinc-400, oklch(70.5% .015 286.067))}.content .login{position:relative;z-index:10;margin-top:calc(var(--spacing, .25rem) * 20);border-top-left-radius:var(--radius-lg, .5rem);border-top-right-radius:var(--radius-lg, .5rem);background-color:color-mix(in srgb,#fff 60%,transparent);padding-inline:calc(var(--spacing, .25rem) * 6);padding-top:calc(var(--spacing, .25rem) * 20);padding-bottom:calc(var(--spacing, .25rem) * 6);--tw-backdrop-blur: blur(var(--blur-md, 12px));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}@supports (color: color-mix(in lab,red,red)){.content .login{background-color:color-mix(in oklab,var(--color-white, #fff) 60%,transparent)}}.content .login .logo-container{margin-top:calc(var(--spacing, .25rem) * -40);margin-right:auto;margin-bottom:calc(var(--spacing, .25rem) * 4);margin-left:auto;width:fit-content;border-radius:var(--radius-3xl, 1.5rem);padding:calc(var(--spacing, .25rem) * 2);background-color:var(--color-white, #fff);--tw-shadow: 0 4px 8px 0 var(--tw-shadow-color, rgba(0,0,0,.2)), 0 6px 20px 0 var(--tw-shadow-color, rgba(0,0,0,.19));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.content .login .logo-container .logo{width:fit-content;border-radius:var(--radius-3xl, 1.5rem);padding:calc(var(--spacing, .25rem) * 2);border-style:var(--tw-border-style);border-width:2px;border-color:var(--color-amber-300, oklch(87.9% .169 91.605))}.content .login .logo-container .logo img{height:calc(var(--spacing, .25rem) * 40);min-width:fit-content}.content .login .title{padding-bottom:calc(var(--spacing, .25rem) * 5);text-align:center;font-size:var(--text-3xl, 1.875rem);line-height:var(--tw-leading, var(--text-3xl--line-height, 1.2 ));--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700)}.content .login form>.validations{text-align:center;--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);color:var(--color-red-500, oklch(63.7% .237 25.331))}.content .login form>.validations:after{margin-inline:auto;margin-bottom:calc(var(--spacing, .25rem) * 2);display:block;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-red-500, oklch(63.7% .237 25.331));--tw-content: \"\";content:var(--tw-content);animation:separator 1s ease-in-out forwards}.content .login form .options{margin-bottom:calc(var(--spacing, .25rem) * 3);display:flex;flex-direction:row;flex-wrap:wrap-reverse;justify-content:space-between}.content .login form .options shared-language-selector{margin-bottom:calc(var(--spacing, .25rem) * 3);width:100%}@media(width>=40rem){.content .login form .options shared-language-selector{margin-bottom:0}}@media(width>=40rem){.content .login form .options shared-language-selector{width:auto}}.content .login form .buttons{display:flex;justify-content:center;gap:calc(var(--spacing, .25rem) * 4)}.content .footer{border-bottom-right-radius:var(--radius-lg, .5rem);border-bottom-left-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);background-color:color-mix(in srgb,oklch(92.9% .013 255.508) 60%,transparent);--tw-backdrop-blur: blur(var(--blur-md, 12px));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-tight, -.025em);letter-spacing:var(--tracking-tight, -.025em);display:flex;flex-wrap:wrap;justify-content:space-between}@supports (color: color-mix(in lab,red,red)){.content .footer{background-color:color-mix(in oklab,var(--color-slate-200, oklch(92.9% .013 255.508)) 60%,transparent)}}@keyframes separator{0%{width:0}to{width:100%}}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-backdrop-blur{syntax: \"*\"; inherits: false;}@property --tw-backdrop-brightness{syntax: \"*\"; inherits: false;}@property --tw-backdrop-contrast{syntax: \"*\"; inherits: false;}@property --tw-backdrop-grayscale{syntax: \"*\"; inherits: false;}@property --tw-backdrop-hue-rotate{syntax: \"*\"; inherits: false;}@property --tw-backdrop-invert{syntax: \"*\"; inherits: false;}@property --tw-backdrop-opacity{syntax: \"*\"; inherits: false;}@property --tw-backdrop-saturate{syntax: \"*\"; inherits: false;}@property --tw-backdrop-sepia{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-content{syntax: \"*\"; inherits: false; initial-value: \"\";}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-divide-y-reverse: 0;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-backdrop-blur: initial;--tw-backdrop-brightness: initial;--tw-backdrop-contrast: initial;--tw-backdrop-grayscale: initial;--tw-backdrop-hue-rotate: initial;--tw-backdrop-invert: initial;--tw-backdrop-opacity: initial;--tw-backdrop-saturate: initial;--tw-backdrop-sepia: initial;--tw-font-weight: initial;--tw-content: \"\";--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: LanguageSelectorComponent, selector: "shared-language-selector", inputs: ["showFlag", "title"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: LoginComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shared-login', imports: [LanguageSelectorComponent, ReactiveFormsModule, RouterModule, TranslatePipe], template: "<div class=\"content\">\r\n  <div class=\"login\">\r\n    <div class=\"logo-container\">\r\n      <div class=\"logo\">\r\n        <img src=\"/logo-login.png\" alt=\"Logo\" />\r\n      </div>\r\n    </div>\r\n\r\n    <h3 class=\"title\">{{ 'Login-Title' | translate }}</h3>\r\n\r\n    <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\r\n      <div class=\"validations\" [class.hidden]=\"!formState().error\">\r\n        @if (formState().error === 'invalid') {\r\n          <div>\r\n            {{ 'Login-Errors-Invalid' | translate }}\r\n          </div>\r\n        }\r\n        @if (formState().error === 'internalServerError') {\r\n          <div>\r\n            {{ 'Login-Errors-InternalServerError' | translate }}\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"input-group inline\">\r\n        <input\r\n          type=\"text\"\r\n          #username\r\n          id=\"username\"\r\n          formControlName=\"username\"\r\n          class=\"form-input peer\"\r\n          [placeholder]=\"'Login-Username' | translate\"\r\n        />\r\n\r\n        <div class=\"input-group-text\">\r\n          <label for=\"username\">\r\n            <i class=\"fas fa-user fa-fw\"></i>\r\n          </label>\r\n        </div>\r\n\r\n        <div class=\"validations\">\r\n          @if (form.get('username')?.hasError('required')) {\r\n            <span>{{ 'Login-Username-Required' | translate }}</span>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"input-group inline\">\r\n        <input\r\n          type=\"password\"\r\n          id=\"password\"\r\n          formControlName=\"password\"\r\n          class=\"form-input\"\r\n          [placeholder]=\"'Login-Password' | translate\"\r\n        />\r\n\r\n        <div class=\"input-group-text\">\r\n          <label for=\"password\">\r\n            <i class=\"fas fa-key fa-fw\"></i>\r\n          </label>\r\n        </div>\r\n\r\n        <div class=\"validations\">\r\n          @if (form.get('password')?.hasError('required')) {\r\n            <span>{{ 'Login-Password-Required' | translate }}</span>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"options\">\r\n        <div>\r\n          <input class=\"form-input\" id=\"rememberMe\" formControlName=\"rememberMe\" type=\"checkbox\" />\r\n          <label for=\"rememberMe\">{{ 'Login-RememberMe' | translate }}</label>\r\n        </div>\r\n\r\n        <shared-language-selector></shared-language-selector>\r\n      </div>\r\n\r\n      <div class=\"buttons\">\r\n        <button\r\n          type=\"submit\"\r\n          class=\"btn\"\r\n          [class.loading]=\"formState().loading && !formState().success && !formState().error\"\r\n          [class.error]=\"formState().error\"\r\n          [class.success]=\"formState().success\"\r\n        >\r\n          @if (!formState().loading) {\r\n            <i class=\"fas fa-sign-in-alt fa-fw\"></i>\r\n          }\r\n          {{ 'Login-SignIn' | translate }}\r\n        </button>\r\n      </div>\r\n    </form>\r\n  </div>\r\n\r\n  <div class=\"footer\">\r\n    <span [innerHTML]=\"'Login-Copyright' | translate\"></span>\r\n    <span class=\"design\">{{ 'Login-DesignBy' | translate }}</span>\r\n  </div>\r\n</div>\r\n", styles: ["@layer properties;:host{display:block}.content{margin-inline:auto;width:calc(10 / 12 * 100%);border-radius:var(--radius-lg, .5rem);--tw-shadow: 0 4px 8px 0 var(--tw-shadow-color, rgba(0,0,0,.2)), 0 6px 20px 0 var(--tw-shadow-color, rgba(0,0,0,.19));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media(width>=48rem){.content{width:calc(8 / 12 * 100%)}}@media(width>=80rem){.content{width:calc(5 / 12 * 100%)}}:where(.content>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.content>:not(:last-child)){border-color:var(--color-zinc-400, oklch(70.5% .015 286.067))}.content .login{position:relative;z-index:10;margin-top:calc(var(--spacing, .25rem) * 20);border-top-left-radius:var(--radius-lg, .5rem);border-top-right-radius:var(--radius-lg, .5rem);background-color:color-mix(in srgb,#fff 60%,transparent);padding-inline:calc(var(--spacing, .25rem) * 6);padding-top:calc(var(--spacing, .25rem) * 20);padding-bottom:calc(var(--spacing, .25rem) * 6);--tw-backdrop-blur: blur(var(--blur-md, 12px));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}@supports (color: color-mix(in lab,red,red)){.content .login{background-color:color-mix(in oklab,var(--color-white, #fff) 60%,transparent)}}.content .login .logo-container{margin-top:calc(var(--spacing, .25rem) * -40);margin-right:auto;margin-bottom:calc(var(--spacing, .25rem) * 4);margin-left:auto;width:fit-content;border-radius:var(--radius-3xl, 1.5rem);padding:calc(var(--spacing, .25rem) * 2);background-color:var(--color-white, #fff);--tw-shadow: 0 4px 8px 0 var(--tw-shadow-color, rgba(0,0,0,.2)), 0 6px 20px 0 var(--tw-shadow-color, rgba(0,0,0,.19));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.content .login .logo-container .logo{width:fit-content;border-radius:var(--radius-3xl, 1.5rem);padding:calc(var(--spacing, .25rem) * 2);border-style:var(--tw-border-style);border-width:2px;border-color:var(--color-amber-300, oklch(87.9% .169 91.605))}.content .login .logo-container .logo img{height:calc(var(--spacing, .25rem) * 40);min-width:fit-content}.content .login .title{padding-bottom:calc(var(--spacing, .25rem) * 5);text-align:center;font-size:var(--text-3xl, 1.875rem);line-height:var(--tw-leading, var(--text-3xl--line-height, 1.2 ));--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700)}.content .login form>.validations{text-align:center;--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);color:var(--color-red-500, oklch(63.7% .237 25.331))}.content .login form>.validations:after{margin-inline:auto;margin-bottom:calc(var(--spacing, .25rem) * 2);display:block;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-red-500, oklch(63.7% .237 25.331));--tw-content: \"\";content:var(--tw-content);animation:separator 1s ease-in-out forwards}.content .login form .options{margin-bottom:calc(var(--spacing, .25rem) * 3);display:flex;flex-direction:row;flex-wrap:wrap-reverse;justify-content:space-between}.content .login form .options shared-language-selector{margin-bottom:calc(var(--spacing, .25rem) * 3);width:100%}@media(width>=40rem){.content .login form .options shared-language-selector{margin-bottom:0}}@media(width>=40rem){.content .login form .options shared-language-selector{width:auto}}.content .login form .buttons{display:flex;justify-content:center;gap:calc(var(--spacing, .25rem) * 4)}.content .footer{border-bottom-right-radius:var(--radius-lg, .5rem);border-bottom-left-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);background-color:color-mix(in srgb,oklch(92.9% .013 255.508) 60%,transparent);--tw-backdrop-blur: blur(var(--blur-md, 12px));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-tight, -.025em);letter-spacing:var(--tracking-tight, -.025em);display:flex;flex-wrap:wrap;justify-content:space-between}@supports (color: color-mix(in lab,red,red)){.content .footer{background-color:color-mix(in oklab,var(--color-slate-200, oklch(92.9% .013 255.508)) 60%,transparent)}}@keyframes separator{0%{width:0}to{width:100%}}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-backdrop-blur{syntax: \"*\"; inherits: false;}@property --tw-backdrop-brightness{syntax: \"*\"; inherits: false;}@property --tw-backdrop-contrast{syntax: \"*\"; inherits: false;}@property --tw-backdrop-grayscale{syntax: \"*\"; inherits: false;}@property --tw-backdrop-hue-rotate{syntax: \"*\"; inherits: false;}@property --tw-backdrop-invert{syntax: \"*\"; inherits: false;}@property --tw-backdrop-opacity{syntax: \"*\"; inherits: false;}@property --tw-backdrop-saturate{syntax: \"*\"; inherits: false;}@property --tw-backdrop-sepia{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-content{syntax: \"*\"; inherits: false; initial-value: \"\";}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-divide-y-reverse: 0;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-backdrop-blur: initial;--tw-backdrop-brightness: initial;--tw-backdrop-contrast: initial;--tw-backdrop-grayscale: initial;--tw-backdrop-hue-rotate: initial;--tw-backdrop-invert: initial;--tw-backdrop-opacity: initial;--tw-backdrop-saturate: initial;--tw-backdrop-sepia: initial;--tw-font-weight: initial;--tw-content: \"\";--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { username: [{ type: i0.ViewChild, args: ['username', { isSignal: true }] }] } });
+
+const routes = [
+    {
+        path: '',
+        component: LoginLayoutComponent,
+        children: [
+            { path: '', redirectTo: 'login', pathMatch: 'full' },
+            { path: 'login', component: LoginComponent },
+        ],
+    },
+];
+class SharedAuthModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SharedAuthModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: SharedAuthModule, imports: [i1.RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SharedAuthModule, imports: [RouterModule.forChild(routes)] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SharedAuthModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes)],
+                }]
+        }] });
+
+class AuthGuard {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Variables
+    authenticationService = inject(AuthenticationService);
+    router = inject(Router);
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    canActivate(_, state) {
+        if (!this.authenticationService.isAuthenticated) {
+            this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
+            return false;
+        }
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: AuthGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: AuthGuard, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: AuthGuard, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AuthInterceptor {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Variables
+    authenticationService = inject(AuthenticationService);
+    config = inject(APP_CONFIG);
+    jwtInterceptor = inject(JwtInterceptor);
+    refreshToken$;
+    router = inject(Router);
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    intercept(request, next) {
+        if (request.url.indexOf(this.config.BASE_URL) >= 0 &&
+            !this.jwtInterceptor.isDisallowedRoute(request) &&
+            this.authenticationService.isTokenExpired) {
+            if (!this.refreshToken$) {
+                this.refreshToken$ = this.authenticationService.tryRefreshToken().pipe(shareReplay(), tap(() => {
+                    this.refreshToken$ = undefined;
+                }));
+            }
+            return this.refreshToken$.pipe(switchMap((token) => {
+                return next.handle(request.clone({ setHeaders: { authorization: `Bearer ${token}` } }));
+            }), catchError((err) => {
+                if (err.status === 401) {
+                    this.authenticationService.signOut();
+                    this.router.navigate(['/login']);
+                }
+                throw err;
+            }));
+        }
+        return next.handle(request);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: AuthInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: AuthInterceptor });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: AuthInterceptor, decorators: [{
+            type: Injectable
+        }] });
+
+// No strategy on purpose: Angular never inherits `changeDetection`, so one declared here would
+// describe a class that is never instantiated, while every subclass compiles to whatever it
+// declares -- which in v22 means OnPush. Correctness comes from the state below notifying
+// Angular, never from this decorator. See docs/guides/reactivity.md.
+class FiltersBase {
+    //#region ViewChilds, Inputs, Outputs
+    buttonFilters;
+    //#endregion
+    //#region Variables
+    destroy$ = new Subject();
+    filterForm;
+    formBuilder = inject(FormBuilder);
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    ngOnInit() {
+        this.filterForm = this.formSetup();
+    }
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    setFilters(filters) {
+        this.filterForm.patchValue(filters);
+        setTimeout(() => {
+            if (this.buttonFilters) {
+                this.buttonFilters.setFilters(filters);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FiltersBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: FiltersBase, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "buttonFilters", first: true, predicate: ButtonFiltersComponent, descendants: true }], ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FiltersBase, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], propDecorators: { buttonFilters: [{
+                type: ViewChild,
+                args: [ButtonFiltersComponent]
+            }] } });
+
+class OperationsHistoryDataset extends DataGridDataset {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Variables
+    columns = [{ field: '', headerName: '' }];
+    controllerName;
+    operationsHistoryService = inject(OperationsHistoryService);
+    _serviceID;
+    //#endregion
+    //#region Properties
+    set serviceId(value) {
+        if (this._serviceID !== value) {
+            this._serviceID = value;
+            this.refresh();
+        }
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+        this.configs.hideColumnHeaders = true;
+        this.configs.showMessageOnEmpty = false;
+    }
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    getData(params) {
+        this.configs.showMessageOnEmpty = !!this._serviceID;
+        return !!this.parentEntityId && !!this.controllerName && !!this._serviceID
+            ? this.operationsHistoryService.list(this.controllerName, this.parentEntityId, this._serviceID, params)
+            : of([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: OperationsHistoryDataset, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: OperationsHistoryDataset });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: OperationsHistoryDataset, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class ServicesHistoryDataset extends DataGridDataset {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Variables
+    columns = [{ field: '', headerName: '' }];
+    controllerName;
+    servicesHistoryService = inject(ServicesHistoryService);
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+        this.configs.hideColumnHeaders = true;
+        this.configs.rowHeight = 52;
+    }
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    getData(params) {
+        return !!this.parentEntityId && !!this.controllerName
+            ? this.servicesHistoryService.list(this.controllerName, this.parentEntityId, this.withUtcPeriod(params))
+            : of([]);
+    }
+    //#endregion
+    //#region Private methods
+    /**
+     * Widens the picked dates to whole local days and sends them as UTC instants.
+     *
+     * A date input yields `YYYY-MM-DD` -- no time, no zone -- while the history stores UTC instants
+     * and the backend compares what it is given. Sent as they are, "from the 5th to the 5th" is the
+     * single instant at midnight and matches nothing, and in a zone behind UTC it does not even
+     * cover the right day.
+     *
+     * Done here rather than in the filter form because the form is what the modal shows: reopening
+     * it patches these values straight back into the fields, which have to keep reading as the dates
+     * the person picked. This is the boundary where the request is built, so it is also the last
+     * point that sees every caller.
+     */
+    withUtcPeriod(params) {
+        const filters = params.filters;
+        if (!filters?.['changedOnFrom'] && !filters?.['changedOnTo']) {
+            return params;
+        }
+        const converted = { ...filters };
+        if (filters['changedOnFrom']) {
+            converted['changedOnFrom'] = ServicesHistoryDataset.toUtcInstant(filters['changedOnFrom'], 'start');
+        }
+        if (filters['changedOnTo']) {
+            converted['changedOnTo'] = ServicesHistoryDataset.toUtcInstant(filters['changedOnTo'], 'end');
+        }
+        return { ...params, filters: converted };
+    }
+    /**
+     * The UTC wall clock of one end of a local day, written without a zone designator.
+     *
+     * Without one on purpose. `DateTime.TryParse` on the server reads a trailing `Z` as an instant
+     * and hands back the *machine's* local time for it, so the same request would mean different
+     * things on a server in UTC and one in UTC-3, and the stored column is plain UTC either way.
+     * Dropping the designator leaves the numbers alone, which is what the column holds.
+     */
+    static toUtcInstant(value, edge) {
+        const [year, month, day] = value.split('-').map(Number);
+        // Left alone when it is not the date input's own format: a value set from somewhere else is
+        // already whatever its caller meant.
+        if ([year, month, day].some((part) => Number.isNaN(part))) {
+            return value;
+        }
+        const instant = edge === 'start' ? new Date(year, month - 1, day, 0, 0, 0, 0) : new Date(year, month - 1, day, 23, 59, 59, 999);
+        return instant.toISOString().replace(/Z$/, '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ServicesHistoryDataset, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ServicesHistoryDataset });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ServicesHistoryDataset, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/**
+ * Displays an external destination inside an application tab.
+ *
+ * Routed as `/external-content/:menuID` — the destination itself never travels in the URL, so no
+ * one can hand-craft a link that makes the application frame an arbitrary site.
+ *
+ * A `TabViewBase` like any other screen, so its actions live in the ribbon rather than in a
+ * bar of its own: it must be routed under `DefaultTabViewComponent`, which is what renders the
+ * `#ribbon` template this view publishes. Use the exported `externalContentRoutes`.
+ */
+class ExternalContentComponent extends TabViewBase {
+    //#region ViewChilds, Inputs, Outputs
+    //#endregion
+    //#region Variables
+    // Signals, every one: this whole screen is decided after the first paint, by a lookup that
+    // resolves, a frame that loads or fails to, and a timeout that gives up waiting. None of
+    // those is a binding on this view, so as fields they changed nothing on screen.
+    frameUrl = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frameUrl" }] : /* istanbul ignore next */ []));
+    isBlocked = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBlocked" }] : /* istanbul ignore next */ []));
+    isFrameLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFrameLoading" }] : /* istanbul ignore next */ []));
+    isInsecure = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInsecure" }] : /* istanbul ignore next */ []));
+    isSlow = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSlow" }] : /* istanbul ignore next */ []));
+    isUnavailable = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isUnavailable" }] : /* istanbul ignore next */ []));
+    label = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    resolvedUrl = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedUrl" }] : /* istanbul ignore next */ []));
+    activatedRoute = inject(ActivatedRoute);
+    configs = inject(EXTERNAL_CONTENT_CONFIGS);
+    document = inject(DOCUMENT);
+    externalContentService = inject(ExternalContentService);
+    externalUrlResolverService = inject(ExternalUrlResolverService);
+    sanitizer = inject(DomSanitizer);
+    slowHintTimeout;
+    tabService = inject(TabService);
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+    }
+    ngOnDestroy() {
+        this.clearSlowHint();
+        super.ngOnDestroy();
+    }
+    ngOnInit() {
+        const menuID = Number(this.activatedRoute.snapshot.paramMap.get('menuID'));
+        if (!menuID) {
+            this.isUnavailable.set(true);
+            this.loading = false;
+            return;
+        }
+        this.externalContentService
+            .find(menuID)
+            .pipe(take(1), takeUntil(this.destroy$))
+            .subscribe((entry) => this.show(entry));
+    }
+    //#endregion
+    //#region Event handlers
+    onFrameLoad() {
+        this.clearSlowHint();
+        this.isFrameLoading.set(false);
+        this.isSlow.set(false);
+    }
+    onOpenInNewTab() {
+        window.open(this.resolvedUrl(), '_blank', 'noopener,noreferrer');
+    }
+    onReload() {
+        const url = this.frameUrl();
+        if (!url || this.isFrameLoading()) {
+            return;
+        }
+        // The frame is cross-origin, so its location cannot be touched from here: destroying the
+        // element and building a new one is the only way to make it navigate again. That also clears
+        // the previous render, which is the point -- otherwise a reload leaves the old content on
+        // screen and the user cannot tell whether anything happened.
+        //
+        // The rebuild has to wait for a macrotask, not a microtask. Angular coalesces changes within a
+        // change-detection cycle, so setting frameUrl back before the next tick means @if sees the
+        // value go A -> undefined -> A and never toggles: the element is never destroyed, nothing
+        // navigates, no `load` ever fires, and the view spins until the timeout gives up. Yielding to
+        // a timeout lets a cycle run with the frame unmounted, which is what really tears it down.
+        this.frameUrl.set(undefined);
+        this.isFrameLoading.set(true);
+        setTimeout(() => this.displayFrame(url));
+    }
+    //#endregion
+    //#region Public methods
+    //#endregion
+    //#region Private methods
+    clearSlowHint() {
+        if (this.slowHintTimeout !== undefined) {
+            clearTimeout(this.slowHintTimeout);
+            this.slowHintTimeout = undefined;
+        }
+    }
+    isMixedContent(url) {
+        // A browser refuses to embed an http:// frame in an https:// page, unconditionally: an iframe
+        // is active mixed content. Nothing on this side can permit it -- no attribute, no header, and
+        // not CSP, which only ever restricts further. Left alone the frame renders empty, so this is
+        // checked up front to say so instead.
+        //
+        // Unlike a site refusing to be framed, this one IS knowable before trying: both protocols are
+        // in hand. `new URL` cannot throw here -- isAllowed has already parsed the same string -- and
+        // it normalises the scheme's case, which a prefix test would not.
+        return this.document.location.protocol === 'https:' && new URL(url).protocol === 'http:';
+    }
+    isOriginAllowed(url) {
+        if (this.configs.allowedOrigins.length === 0) {
+            return true;
+        }
+        try {
+            return this.configs.allowedOrigins.indexOf(new URL(url).origin) !== -1;
+        }
+        catch {
+            return false;
+        }
+    }
+    show(entry) {
+        // TabViewBase starts every screen loading so its ribbon buttons begin disabled; every exit
+        // from here has to clear it or they never become usable.
+        this.loading = false;
+        if (!entry || !entry.url) {
+            this.isUnavailable.set(true);
+            return;
+        }
+        this.label.set(entry.label);
+        // MainLayoutComponent only resolves a deep-linked title through getMenuFromUrl, and a Tab
+        // starts with isTitleLoading true, so a tab re-created by TabsComponent after a refresh would
+        // spin forever if nothing set its title. Setting it here is idempotent.
+        this.tabService.updateActiveTabRootTitle(entry.label);
+        // Order matters: resolve, then validate, then trust. What we vet has to be exactly what the
+        // browser receives, and a placeholder is substituted before the scheme can be inspected.
+        const url = this.externalUrlResolverService.resolve(entry.url);
+        if (!this.externalUrlResolverService.isAllowed(url) || !this.isOriginAllowed(url)) {
+            console.error(`Embedded menu item "${entry.label}" points to an address that is not allowed and was not displayed.`, url);
+            this.isBlocked.set(true);
+            return;
+        }
+        // Set before the mixed-content check, not after: that state still offers 'open in a new
+        // browser tab', and the button reads this to decide whether it has anywhere to go.
+        this.resolvedUrl.set(url);
+        if (this.isMixedContent(url)) {
+            this.isInsecure.set(true);
+            return;
+        }
+        // Trusted once, into a field. From a getter or a pipe this would hand back a new
+        // SafeResourceUrl on every change-detection pass, and Angular would re-set the iframe's src
+        // and reload the destination each time.
+        this.displayFrame(this.sanitizer.bypassSecurityTrustResourceUrl(url));
+    }
+    displayFrame(url) {
+        this.isFrameLoading.set(true);
+        this.frameUrl.set(url);
+        this.startSlowHint();
+    }
+    startSlowHint() {
+        this.clearSlowHint();
+        // Not detection, and it must never be turned into one: whether a site refuses to be framed
+        // (X-Frame-Options, CSP frame-ancestors) is not observable from JavaScript. A refused frame
+        // usually fires `load` immediately and renders the browser's own error page, in which case
+        // this hint never appears -- the ribbon's "open in a new browser tab" button is the actual
+        // way out, and it is always present.
+        this.slowHintTimeout = setTimeout(() => {
+            // Stop claiming it is loading. A destination that never reports `load` -- a refused frame
+            // among them -- would otherwise spin forever and keep the actions disabled; hand the
+            // controls back and let the hint do the explaining.
+            this.isFrameLoading.set(false);
+            this.isSlow.set(true);
+        }, this.configs.slowFrameHintDelay);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ExternalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: ExternalContentComponent, isStandalone: true, selector: "shared-external-content", usesInheritance: true, ngImport: i0, template: "<!-- Published to DefaultTabViewComponent through TabViewService, so the actions sit in the\r\n     application's ribbon like every other screen's. -->\r\n<ng-template #ribbon>\r\n  <lib-ribbon-group [label]=\"'RibbonGroup-Page' | translate\">\r\n    <!-- Same icon and label as framework-button-refresh, so reloading a report reads as the\r\n             same action as refreshing a grid. `loading` is what spins it while the frame loads. -->\r\n    <framework-button\r\n      icon=\"fa-sync-alt\"\r\n      label=\"Button-Refresh\"\r\n      [disabled]=\"!resolvedUrl() || isInsecure()\"\r\n      [loading]=\"isFrameLoading()\"\r\n      (action)=\"onReload()\"\r\n    >\r\n    </framework-button>\r\n\r\n    <framework-button\r\n      icon=\"fa-arrow-up-right-from-square\"\r\n      label=\"ExternalContent-OpenInNewTab\"\r\n      [disabled]=\"!resolvedUrl()\"\r\n      (action)=\"onOpenInNewTab()\"\r\n    >\r\n    </framework-button>\r\n  </lib-ribbon-group>\r\n</ng-template>\r\n\r\n@if (isUnavailable()) {\r\n  <div class=\"external-content-message\">\r\n    <i class=\"fa-solid fa-link-slash\"></i>\r\n    <span class=\"external-content-message-title\">{{ 'ExternalContent-Unavailable-Title' | translate }}</span>\r\n    <span>{{ 'ExternalContent-Unavailable-Message' | translate }}</span>\r\n  </div>\r\n} @else if (isInsecure()) {\r\n  <div class=\"external-content-message\">\r\n    <i class=\"fa-solid fa-shield-halved\"></i>\r\n    <span class=\"external-content-message-title\">{{ 'ExternalContent-Insecure-Title' | translate }}</span>\r\n    <span>{{ 'ExternalContent-Insecure-Message' | translate }}</span>\r\n  </div>\r\n} @else if (isBlocked()) {\r\n  <div class=\"external-content-message\">\r\n    <i class=\"fa-solid fa-triangle-exclamation\"></i>\r\n    <span class=\"external-content-message-title\">{{ 'ExternalContent-Blocked-Title' | translate }}</span>\r\n    <span>{{ 'ExternalContent-Blocked-Message' | translate }}</span>\r\n  </div>\r\n} @else {\r\n  @if (isSlow()) {\r\n    <div class=\"external-content-hint\">{{ 'ExternalContent-SlowHint' | translate }}</div>\r\n  }\r\n  @if (frameUrl() || isFrameLoading()) {\r\n    <!--\r\n            The container stays mounted across a reload, which briefly clears frameUrl, so the panel\r\n            does not flicker out and back. What goes away is the frame itself, on purpose.\r\n\r\n            sandbox and referrerpolicy are STATIC attributes on purpose. Angular rejects `sandbox`\r\n            as a binding on an <iframe> outright (NG0910) \u2014 it may only be a static attribute \u2014 and\r\n            the whole element then fails to render.\r\n\r\n            The token list is fixed for every destination, and deliberately not configurable per\r\n            menu item:\r\n            - allow-same-origin keeps the frame in the destination's own origin so its cookies and\r\n              storage work; without it an SSO'd report will not render. It grants no access to ours,\r\n              provided the destination is cross-origin -- never point an embedded item at this\r\n              application's own origin, use an internal route for that.\r\n            - allow-top-navigation is absent on purpose: a framed site must not be able to navigate\r\n              the whole application away.\r\n            - allow-popups-to-escape-sandbox keeps print and download popups usable.\r\n        -->\r\n    <div class=\"external-content-frame-container\">\r\n      @if (isFrameLoading()) {\r\n        <div class=\"external-content-loading\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n            <path\r\n              class=\"opacity-75\"\r\n              fill=\"currentColor\"\r\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\r\n            ></path>\r\n          </svg>\r\n\r\n          <span>{{ 'Loading' | translate }}</span>\r\n        </div>\r\n      }\r\n      @if (frameUrl()) {\r\n        <iframe\r\n          class=\"external-content-frame\"\r\n          sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads\"\r\n          referrerpolicy=\"strict-origin-when-cross-origin\"\r\n          [src]=\"frameUrl()\"\r\n          [attr.title]=\"label() | translate\"\r\n          (load)=\"onFrameLoad()\"\r\n        >\r\n        </iframe>\r\n      }\r\n    </div>\r\n  }\r\n}\r\n", styles: ["@layer properties;:host{display:flex;flex-grow:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;min-height:0}.external-content-hint{flex:none;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));border-color:var(--color-amber-300, oklch(87.9% .169 91.605));background-color:var(--color-amber-100, oklch(96.2% .059 95.617));color:var(--color-amber-900, oklch(41.4% .112 45.904))}.external-content-frame-container{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in srgb,oklch(87.2% .01 258.338) 90%,transparent);background-color:var(--color-white, #fff);position:relative;display:flex;flex-grow:1;overflow:hidden;min-height:0}@supports (color: color-mix(in lab,red,red)){.external-content-frame-container{border-color:color-mix(in oklab,var(--color-gray-300, oklch(87.2% .01 258.338)) 90%,transparent)}}.external-content-loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2);background-color:var(--color-white, #fff);color:var(--color-gray-500, oklch(55.1% .027 264.364))}.external-content-loading svg{height:calc(var(--spacing, .25rem) * 6);min-height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);min-width:calc(var(--spacing, .25rem) * 6);animation:var(--animate-spin, spin 1s linear infinite)}.external-content-frame{width:100%;flex-grow:1;border-style:var(--tw-border-style);border-width:0px;min-height:0}.external-content-message{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in srgb,oklch(87.2% .01 258.338) 90%,transparent);background-color:var(--color-white, #fff);display:flex;flex-grow:1;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 6);text-align:center}@supports (color: color-mix(in lab,red,red)){.external-content-message{border-color:color-mix(in oklab,var(--color-gray-300, oklch(87.2% .01 258.338)) 90%,transparent)}}.external-content-message i{font-size:var(--text-4xl, 2.25rem);line-height:var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));opacity:40%}.external-content-message .external-content-message-title{font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@keyframes spin{to{transform:rotate(360deg)}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "framework-button", inputs: ["color", "icon", "label"], outputs: ["action"] }, { kind: "component", type: RibbonGroupComponent, selector: "lib-ribbon-group", inputs: ["label"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ExternalContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shared-external-content', imports: [ButtonComponent, RibbonGroupComponent, TranslatePipe], template: "<!-- Published to DefaultTabViewComponent through TabViewService, so the actions sit in the\r\n     application's ribbon like every other screen's. -->\r\n<ng-template #ribbon>\r\n  <lib-ribbon-group [label]=\"'RibbonGroup-Page' | translate\">\r\n    <!-- Same icon and label as framework-button-refresh, so reloading a report reads as the\r\n             same action as refreshing a grid. `loading` is what spins it while the frame loads. -->\r\n    <framework-button\r\n      icon=\"fa-sync-alt\"\r\n      label=\"Button-Refresh\"\r\n      [disabled]=\"!resolvedUrl() || isInsecure()\"\r\n      [loading]=\"isFrameLoading()\"\r\n      (action)=\"onReload()\"\r\n    >\r\n    </framework-button>\r\n\r\n    <framework-button\r\n      icon=\"fa-arrow-up-right-from-square\"\r\n      label=\"ExternalContent-OpenInNewTab\"\r\n      [disabled]=\"!resolvedUrl()\"\r\n      (action)=\"onOpenInNewTab()\"\r\n    >\r\n    </framework-button>\r\n  </lib-ribbon-group>\r\n</ng-template>\r\n\r\n@if (isUnavailable()) {\r\n  <div class=\"external-content-message\">\r\n    <i class=\"fa-solid fa-link-slash\"></i>\r\n    <span class=\"external-content-message-title\">{{ 'ExternalContent-Unavailable-Title' | translate }}</span>\r\n    <span>{{ 'ExternalContent-Unavailable-Message' | translate }}</span>\r\n  </div>\r\n} @else if (isInsecure()) {\r\n  <div class=\"external-content-message\">\r\n    <i class=\"fa-solid fa-shield-halved\"></i>\r\n    <span class=\"external-content-message-title\">{{ 'ExternalContent-Insecure-Title' | translate }}</span>\r\n    <span>{{ 'ExternalContent-Insecure-Message' | translate }}</span>\r\n  </div>\r\n} @else if (isBlocked()) {\r\n  <div class=\"external-content-message\">\r\n    <i class=\"fa-solid fa-triangle-exclamation\"></i>\r\n    <span class=\"external-content-message-title\">{{ 'ExternalContent-Blocked-Title' | translate }}</span>\r\n    <span>{{ 'ExternalContent-Blocked-Message' | translate }}</span>\r\n  </div>\r\n} @else {\r\n  @if (isSlow()) {\r\n    <div class=\"external-content-hint\">{{ 'ExternalContent-SlowHint' | translate }}</div>\r\n  }\r\n  @if (frameUrl() || isFrameLoading()) {\r\n    <!--\r\n            The container stays mounted across a reload, which briefly clears frameUrl, so the panel\r\n            does not flicker out and back. What goes away is the frame itself, on purpose.\r\n\r\n            sandbox and referrerpolicy are STATIC attributes on purpose. Angular rejects `sandbox`\r\n            as a binding on an <iframe> outright (NG0910) \u2014 it may only be a static attribute \u2014 and\r\n            the whole element then fails to render.\r\n\r\n            The token list is fixed for every destination, and deliberately not configurable per\r\n            menu item:\r\n            - allow-same-origin keeps the frame in the destination's own origin so its cookies and\r\n              storage work; without it an SSO'd report will not render. It grants no access to ours,\r\n              provided the destination is cross-origin -- never point an embedded item at this\r\n              application's own origin, use an internal route for that.\r\n            - allow-top-navigation is absent on purpose: a framed site must not be able to navigate\r\n              the whole application away.\r\n            - allow-popups-to-escape-sandbox keeps print and download popups usable.\r\n        -->\r\n    <div class=\"external-content-frame-container\">\r\n      @if (isFrameLoading()) {\r\n        <div class=\"external-content-loading\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n            <path\r\n              class=\"opacity-75\"\r\n              fill=\"currentColor\"\r\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\r\n            ></path>\r\n          </svg>\r\n\r\n          <span>{{ 'Loading' | translate }}</span>\r\n        </div>\r\n      }\r\n      @if (frameUrl()) {\r\n        <iframe\r\n          class=\"external-content-frame\"\r\n          sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads\"\r\n          referrerpolicy=\"strict-origin-when-cross-origin\"\r\n          [src]=\"frameUrl()\"\r\n          [attr.title]=\"label() | translate\"\r\n          (load)=\"onFrameLoad()\"\r\n        >\r\n        </iframe>\r\n      }\r\n    </div>\r\n  }\r\n}\r\n", styles: ["@layer properties;:host{display:flex;flex-grow:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;min-height:0}.external-content-hint{flex:none;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));border-color:var(--color-amber-300, oklch(87.9% .169 91.605));background-color:var(--color-amber-100, oklch(96.2% .059 95.617));color:var(--color-amber-900, oklch(41.4% .112 45.904))}.external-content-frame-container{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in srgb,oklch(87.2% .01 258.338) 90%,transparent);background-color:var(--color-white, #fff);position:relative;display:flex;flex-grow:1;overflow:hidden;min-height:0}@supports (color: color-mix(in lab,red,red)){.external-content-frame-container{border-color:color-mix(in oklab,var(--color-gray-300, oklch(87.2% .01 258.338)) 90%,transparent)}}.external-content-loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2);background-color:var(--color-white, #fff);color:var(--color-gray-500, oklch(55.1% .027 264.364))}.external-content-loading svg{height:calc(var(--spacing, .25rem) * 6);min-height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);min-width:calc(var(--spacing, .25rem) * 6);animation:var(--animate-spin, spin 1s linear infinite)}.external-content-frame{width:100%;flex-grow:1;border-style:var(--tw-border-style);border-width:0px;min-height:0}.external-content-message{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in srgb,oklch(87.2% .01 258.338) 90%,transparent);background-color:var(--color-white, #fff);display:flex;flex-grow:1;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 6);text-align:center}@supports (color: color-mix(in lab,red,red)){.external-content-message{border-color:color-mix(in oklab,var(--color-gray-300, oklch(87.2% .01 258.338)) 90%,transparent)}}.external-content-message i{font-size:var(--text-4xl, 2.25rem);line-height:var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));opacity:40%}.external-content-message .external-content-message-title{font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@keyframes spin{to{transform:rotate(360deg)}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Route table for embedded external content. Spread it into `MainLayoutComponent`'s children:
+ *
+ * ```ts
+ * { path: '', component: MainLayoutComponent, canActivate: [AuthGuard], children: [
+ *   ...externalContentRoutes,
+ *   // the application's own features
+ * ] }
+ * ```
+ *
+ * Three things about the shape are load-bearing and must not be "simplified" away:
+ *
+ * - The path is nested one segment per route. `RouteHelper.getRouteURL` and
+ *   `CustomReuseStrategy.getUrlFromRoute` collect segments walking up the parent chain and then
+ *   reverse the flat list, so a route declared `'external-content/:menuID'` rebuilds as
+ *   `/:menuID/external-content` and every tab URL is wrong.
+ * - `DefaultTabViewComponent` hosts the view. It is what renders the `#ribbon` template the
+ *   component publishes, so dropping it leaves the Reload and Open-in-a-new-browser-tab actions
+ *   with nowhere to appear.
+ * - `FRAMEWORK_VIEW_TYPE` must be present. `TabsComponent` re-creates the tab after a page refresh
+ *   by looking for a `Details` or `List` view in the activated route tree, and navigates to `/`
+ *   when it finds neither — the embedded tab would vanish on F5.
+ */
+const externalContentRoutes = [
+    {
+        path: EXTERNAL_CONTENT_ROUTE_PATH,
+        children: [
+            {
+                path: ':menuID',
+                component: DefaultTabViewComponent,
+                data: { [FRAMEWORK_VIEW_TYPE]: FrameworkViewType.List },
+                children: [{ path: '', component: ExternalContentComponent }],
+            },
+        ],
+    },
+];
+
+class OperationsHistoryModalComponent extends ModalBase {
+    //#region ViewChilds, Inputs, Outputs
+    modal = viewChild(ModalComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modal" }] : /* istanbul ignore next */ []));
+    newValues = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "newValues" }] : /* istanbul ignore next */ []));
+    oldValues = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "oldValues" }] : /* istanbul ignore next */ []));
+    //#endregion
+    //#region Variables
+    //#endregion
+    //#region Properties
+    /** Delegates to the inner modal; a signal query, so it re-runs once that child resolves. */
+    isModalShown = computed(() => this.modal()?.isOpen() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isModalShown" }] : /* istanbul ignore next */ []));
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    toggle() {
+        this.modal()?.toggleModal();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: OperationsHistoryModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: OperationsHistoryModalComponent, isStandalone: true, selector: "shared-operations-history-modal", inputs: { newValues: { classPropertyName: "newValues", publicName: "newValues", isSignal: true, isRequired: false, transformFunction: null }, oldValues: { classPropertyName: "oldValues", publicName: "oldValues", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "modal", first: true, predicate: ModalComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<lib-modal size=\"6xl\" [title]=\"'OperationsHistory-Modal-Title' | translate\">\r\n  <div body>\r\n    <pre>{{ oldValues() | json }}</pre>\r\n    <pre>{{ newValues() | json }}</pre>\r\n  </div>\r\n</lib-modal>\r\n", styles: ["div[body]{display:flex;flex-direction:row}div[body] pre{width:50%;flex-grow:1;overflow-x:auto;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "lib-modal", inputs: ["closeButtonText", "dialog", "modalProcessing", "position", "size", "title"], outputs: ["closeButtonTextChange", "modalProcessingChange", "closed"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: OperationsHistoryModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shared-operations-history-modal', imports: [JsonPipe, ModalComponent, TranslatePipe], template: "<lib-modal size=\"6xl\" [title]=\"'OperationsHistory-Modal-Title' | translate\">\r\n  <div body>\r\n    <pre>{{ oldValues() | json }}</pre>\r\n    <pre>{{ newValues() | json }}</pre>\r\n  </div>\r\n</lib-modal>\r\n", styles: ["div[body]{display:flex;flex-direction:row}div[body] pre{width:50%;flex-grow:1;overflow-x:auto;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { modal: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ModalComponent), { isSignal: true }] }], newValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "newValues", required: false }] }], oldValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "oldValues", required: false }] }] } });
+
+class OperationsHistoryChildListComponent extends ChildList {
+    //#region ViewChilds, Inputs, Outputs
+    modal = viewChild(OperationsHistoryModalComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modal" }] : /* istanbul ignore next */ []));
+    operationTemplate = viewChild('operationTemplate', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operationTemplate" }] : /* istanbul ignore next */ []));
+    set controllerName(value) {
+        this.dataGridDataset.controllerName = value;
+    }
+    /**
+     * Filters to send with the list.
+     *
+     * The audit view applies its filters to the services grid and hands the same set here, because
+     * one of them -- whether to list only the audited record's own operations -- belongs to this
+     * list. The rest mean nothing to it, and the backend reads only what it recognises.
+     *
+     * `setFilters` refreshes the grid itself. With no service selected the dataset answers with an
+     * empty list rather than calling the backend, so a refresh then costs nothing.
+     */
+    set filters(value) {
+        this.dataGridDataset.setFilters(value);
+    }
+    set serviceID(value) {
+        this.dataGridDataset.serviceId = value;
+    }
+    //#endregion
+    //#region Variables
+    // Signals: both are bound into the modal and are filled when a row is picked, which the grid
+    // reports through a callback rather than a binding on this view.
+    selectedNewValues = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedNewValues" }] : /* istanbul ignore next */ []));
+    selectedOldValues = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedOldValues" }] : /* istanbul ignore next */ []));
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    ngAfterViewInit() {
+        this.dataGridDataset.columns[0].template = this.operationTemplate();
+    }
+    //#endregion
+    //#region Event handlers
+    openModal() {
+        const modal = this.modal();
+        if (modal && !modal.isModalShown()) {
+            modal.toggle();
+        }
+    }
+    //#endregion
+    //#region Public methods
+    selectedRowChanged() {
+        super.selectedRowChanged();
+        if (this.dataGridDataset.hasSelectedRows) {
+            const key = this.dataGridDataset.selectedRowKeys[0];
+            const data = this.dataGridDataset.getRowData(key);
+            this.selectedOldValues.set(JSON.parse(data.oldValues?.trim() ?? ''));
+            this.selectedNewValues.set(JSON.parse(data.newValues?.trim() ?? ''));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: OperationsHistoryChildListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: OperationsHistoryChildListComponent, isStandalone: true, selector: "shared-operations-history-child-list", inputs: { controllerName: "controllerName", filters: "filters", serviceID: "serviceID" }, providers: [{ provide: DataGridDataset, useClass: OperationsHistoryDataset }], viewQueries: [{ propertyName: "modal", first: true, predicate: OperationsHistoryModalComponent, descendants: true, isSignal: true }, { propertyName: "operationTemplate", first: true, predicate: ["operationTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<lib-data-grid [lazyLoadRows]=\"true\"> </lib-data-grid>\r\n\r\n<ng-template #operationTemplate let-rowData=\"rowData\">\r\n  <div\r\n    class=\"operation-content\"\r\n    role=\"button\"\r\n    tabindex=\"0\"\r\n    (click)=\"openModal()\"\r\n    (keydown.enter)=\"openModal()\"\r\n    (keydown.space)=\"openModal(); $event.preventDefault()\"\r\n  >\r\n    <span\r\n      class=\"operation\"\r\n      [class.added]=\"rowData.operationType === 'Added'\"\r\n      [class.deleted]=\"rowData.operationType === 'Deleted'\"\r\n      [class.modified]=\"rowData.operationType === 'Modified'\"\r\n      [class.unchanged]=\"rowData.operationType === 'Unchanged'\"\r\n    >\r\n      {{ rowData.operationType }}\r\n    </span>\r\n    {{ rowData.entityName }}\r\n  </div>\r\n</ng-template>\r\n\r\n<shared-operations-history-modal [newValues]=\"selectedNewValues()\" [oldValues]=\"selectedOldValues()\">\r\n</shared-operations-history-modal>\r\n", styles: ["@layer properties;:host{width:100%;max-width:100%;min-width:100%}lib-data-grid{height:100%}lib-data-grid ::ng-deep .body lib-data-grid-row{padding:0!important}.operation-content{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.operation-content .operation{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.operation-content .operation.added{color:var(--color-green-700, oklch(52.7% .154 150.069))}.operation-content .operation.deleted{color:var(--color-red-700, oklch(50.5% .213 27.518))}.operation-content .operation.modified{color:var(--color-blue-700, oklch(48.8% .243 264.376))}.operation-content .operation.unchanged{color:var(--color-gray-700, oklch(37.3% .034 259.733))}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: DataGridComponent, selector: "lib-data-grid", inputs: ["disabled", "lazyLoadRows", "showButtons"] }, { kind: "component", type: OperationsHistoryModalComponent, selector: "shared-operations-history-modal", inputs: ["newValues", "oldValues"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: OperationsHistoryChildListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shared-operations-history-child-list', imports: [DataGridComponent, OperationsHistoryModalComponent], providers: [{ provide: DataGridDataset, useClass: OperationsHistoryDataset }], template: "<lib-data-grid [lazyLoadRows]=\"true\"> </lib-data-grid>\r\n\r\n<ng-template #operationTemplate let-rowData=\"rowData\">\r\n  <div\r\n    class=\"operation-content\"\r\n    role=\"button\"\r\n    tabindex=\"0\"\r\n    (click)=\"openModal()\"\r\n    (keydown.enter)=\"openModal()\"\r\n    (keydown.space)=\"openModal(); $event.preventDefault()\"\r\n  >\r\n    <span\r\n      class=\"operation\"\r\n      [class.added]=\"rowData.operationType === 'Added'\"\r\n      [class.deleted]=\"rowData.operationType === 'Deleted'\"\r\n      [class.modified]=\"rowData.operationType === 'Modified'\"\r\n      [class.unchanged]=\"rowData.operationType === 'Unchanged'\"\r\n    >\r\n      {{ rowData.operationType }}\r\n    </span>\r\n    {{ rowData.entityName }}\r\n  </div>\r\n</ng-template>\r\n\r\n<shared-operations-history-modal [newValues]=\"selectedNewValues()\" [oldValues]=\"selectedOldValues()\">\r\n</shared-operations-history-modal>\r\n", styles: ["@layer properties;:host{width:100%;max-width:100%;min-width:100%}lib-data-grid{height:100%}lib-data-grid ::ng-deep .body lib-data-grid-row{padding:0!important}.operation-content{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.operation-content .operation{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.operation-content .operation.added{color:var(--color-green-700, oklch(52.7% .154 150.069))}.operation-content .operation.deleted{color:var(--color-red-700, oklch(50.5% .213 27.518))}.operation-content .operation.modified{color:var(--color-blue-700, oklch(48.8% .243 264.376))}.operation-content .operation.unchanged{color:var(--color-gray-700, oklch(37.3% .034 259.733))}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { modal: [{ type: i0.ViewChild, args: [i0.forwardRef(() => OperationsHistoryModalComponent), { isSignal: true }] }], operationTemplate: [{ type: i0.ViewChild, args: ['operationTemplate', { isSignal: true }] }], controllerName: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], serviceID: [{
+                type: Input
+            }] } });
+
+/**
+ * Pipe that bypasses Angular's built-in HTML sanitization.
+ *
+ * **WARNING: This pipe introduces XSS (Cross-Site Scripting) risk.**
+ * It marks the provided HTML string as trusted, meaning Angular will
+ * render it without any sanitization. Malicious content such as
+ * `<script>` tags, inline event handlers (`onerror`, `onclick`, etc.),
+ * and `javascript:` URLs will be executed in the user's browser.
+ *
+ * ### Safe usage
+ * - Server-rendered HTML from **trusted, internal APIs** that never
+ *   include user-generated content (e.g., admin-authored rich text
+ *   that is sanitized server-side before storage).
+ * - Static HTML snippets defined in application code.
+ *
+ * ### Unsafe usage (DO NOT use for these)
+ * - Any value that originates from user input (form fields, query
+ *   params, URL fragments, file uploads).
+ * - Third-party API responses whose content you do not control.
+ * - Database fields that may contain unsanitized user submissions.
+ *
+ * @example
+ * // Safe — trusted server content
+ * <div [innerHTML]="trustedServerHtml | bypassHtmlSanitizer"></div>
+ *
+ * // UNSAFE — user-provided content (use Angular’s default sanitization instead)
+ * <div [innerHTML]="comment.body | bypassHtmlSanitizer"></div>  // ❌ XSS risk
+ * <div [innerHTML]="comment.body"></div>                        // ✅ Angular sanitizes automatically
+ */
+class BypassHtmlSanitizerPipe {
+    sanitizer = inject(DomSanitizer);
+    transform(html) {
+        return this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BypassHtmlSanitizerPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: BypassHtmlSanitizerPipe, isStandalone: true, name: "bypassHtmlSanitizer" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: BypassHtmlSanitizerPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'bypassHtmlSanitizer',
+                }]
+        }] });
+
+class EnumLabelPipe {
+    transform(value, enumType) {
+        if (value === undefined || enumType === undefined) {
+            return '';
+        }
+        const keys = Object.keys(enumType).filter((key) => !isNaN(Number(enumType[key])));
+        const values = keys.map((key) => enumType[key]);
+        const index = values.indexOf(value);
+        if (index >= 0) {
+            return keys[index];
+        }
+        return '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: EnumLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: EnumLabelPipe, isStandalone: true, name: "enumLabel" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: EnumLabelPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'enumLabel',
+                }]
+        }] });
+
+class UtcDatePipe {
+    static timeZoneMarker = /(?:Z|[+-]\d{2}:?\d{2})$/i;
+    transform(value) {
+        if (!value) {
+            return null;
+        }
+        const newDate = new Date(value);
+        if (Number.isNaN(newDate.getTime())) {
+            return null;
+        }
+        // A value that declares its zone has already been parsed as the right instant.
+        if (typeof value === 'string' && UtcDatePipe.timeZoneMarker.test(value.trim())) {
+            return newDate;
+        }
+        // The API serializes UTC values without a timezone marker, so Date parses them as local time.
+        // Shifting by the offset re-reads those parts as UTC, which keeps both the time and the day
+        // correct on either side of Greenwich.
+        return new Date(newDate.getTime() - newDate.getTimezoneOffset() * 60000);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UtcDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: UtcDatePipe, isStandalone: true, name: "utcDate" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UtcDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'utcDate',
+                }]
+        }] });
+
+class ServicesHistoryChildListComponent extends ChildList {
+    //#region ViewChilds, Inputs, Outputs
+    serviceTemplate = viewChild('serviceTemplate', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "serviceTemplate" }] : /* istanbul ignore next */ []));
+    set controllerName(value) {
+        this.dataGridDataset.controllerName = value;
+    }
+    /** Re-emits the grid's own filter changes, for a sibling list that has to follow them. */
+    filtersChanged = output();
+    //#endregion
+    //#region Variables
+    // A signal: it is bound into the operations list beside this one, and both the row callback
+    // and the grid's load event write it from outside any binding on this view.
+    selectedServiceID = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedServiceID" }] : /* istanbul ignore next */ []));
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    ngAfterViewInit() {
+        this.dataGridDataset.columns[0].template = this.serviceTemplate();
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.dataGridDataset.filtersChanged
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((filters) => this.filtersChanged.emit(filters));
+        // Reloading clears the grid's selection but would leave the last chosen service behind, and
+        // the operations list beside it still showing that service's rows -- a service the new filters
+        // may not even list any more. Dropped here so the two panels never disagree.
+        this.dataGridDataset.loadStarted.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.selectedServiceID.set(undefined);
+        });
+    }
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    selectedRowChanged() {
+        super.selectedRowChanged();
+        if (this.dataGridDataset.hasSelectedRows) {
+            const selectedKey = this.dataGridDataset.selectedRowKeys[0];
+            this.selectedServiceID.set(this.dataGridDataset.getRowID(selectedKey));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ServicesHistoryChildListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: ServicesHistoryChildListComponent, isStandalone: true, selector: "shared-services-history-child-list", inputs: { controllerName: "controllerName" }, outputs: { filtersChanged: "filtersChanged" }, viewQueries: [{ propertyName: "serviceTemplate", first: true, predicate: ["serviceTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<lib-data-grid [lazyLoadRows]=\"true\"> </lib-data-grid>\r\n\r\n<ng-template #serviceTemplate let-rowData=\"rowData\">\r\n  <div class=\"service-content\">\r\n    <div class=\"icon\">\r\n      <i class=\"fa-solid fa-circle fa-lg\"></i>\r\n    </div>\r\n    <div class=\"information\">\r\n      <div class=\"service-name\">\r\n        {{ rowData.name }}\r\n      </div>\r\n      <div class=\"details\">\r\n        <span class=\"datetime\"\r\n          ><i class=\"fa-solid fa-clock\"></i>\r\n          {{ rowData.changedOn | utcDate | date: ('Format-DateTime' | translate) }}</span\r\n        >\r\n        <span class=\"user\"><i class=\"fa-solid fa-user\"></i> {{ rowData.changedByName }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@layer properties;:host{width:100%;max-width:100%;min-width:100%}lib-data-grid{height:100%}lib-data-grid ::ng-deep .body lib-data-grid-row{padding:0!important}.service-content{display:flex;flex-grow:1;overflow:hidden;padding-inline:calc(var(--spacing, .25rem) * 3)}.service-content .icon{position:relative;margin-right:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;color:var(--color-blue-500, oklch(62.3% .214 259.815))}.service-content .icon:before,.service-content .icon:after{position:absolute;left:50%;margin-left:calc(var(--spacing, .25rem) * -1);height:50%;width:calc(var(--spacing, .25rem) * 2);background-color:color-mix(in srgb,oklch(86.9% .022 252.894) 50%,transparent);--tw-content: \"\";content:var(--tw-content)}@supports (color: color-mix(in lab,red,red)){.service-content .icon:before,.service-content .icon:after{background-color:color-mix(in oklab,var(--color-slate-300, oklch(86.9% .022 252.894)) 50%,transparent)}}.service-content .icon:before{top:0}.service-content .icon:after{top:50%}.service-content .icon i{z-index:1}.service-content .information{display:flex;flex-grow:1;flex-direction:column;overflow:hidden;padding-block:var(--spacing, .25rem)}.service-content .information .service-name{--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700)}.service-content .information .details{display:flex;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.service-content .information .details i{color:var(--color-slate-400, oklch(70.4% .04 256.788))}.service-content .information .details .datetime{margin-right:calc(var(--spacing, .25rem) * 3)}.service-content .information .details .user{overflow:hidden;text-overflow:ellipsis}@property --tw-content{syntax: \"*\"; inherits: false; initial-value: \"\";}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-content: \"\";--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: DataGridComponent, selector: "lib-data-grid", inputs: ["disabled", "lazyLoadRows", "showButtons"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: UtcDatePipe, name: "utcDate" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ServicesHistoryChildListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shared-services-history-child-list', imports: [DataGridComponent, DatePipe, UtcDatePipe, TranslatePipe], template: "<lib-data-grid [lazyLoadRows]=\"true\"> </lib-data-grid>\r\n\r\n<ng-template #serviceTemplate let-rowData=\"rowData\">\r\n  <div class=\"service-content\">\r\n    <div class=\"icon\">\r\n      <i class=\"fa-solid fa-circle fa-lg\"></i>\r\n    </div>\r\n    <div class=\"information\">\r\n      <div class=\"service-name\">\r\n        {{ rowData.name }}\r\n      </div>\r\n      <div class=\"details\">\r\n        <span class=\"datetime\"\r\n          ><i class=\"fa-solid fa-clock\"></i>\r\n          {{ rowData.changedOn | utcDate | date: ('Format-DateTime' | translate) }}</span\r\n        >\r\n        <span class=\"user\"><i class=\"fa-solid fa-user\"></i> {{ rowData.changedByName }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@layer properties;:host{width:100%;max-width:100%;min-width:100%}lib-data-grid{height:100%}lib-data-grid ::ng-deep .body lib-data-grid-row{padding:0!important}.service-content{display:flex;flex-grow:1;overflow:hidden;padding-inline:calc(var(--spacing, .25rem) * 3)}.service-content .icon{position:relative;margin-right:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;color:var(--color-blue-500, oklch(62.3% .214 259.815))}.service-content .icon:before,.service-content .icon:after{position:absolute;left:50%;margin-left:calc(var(--spacing, .25rem) * -1);height:50%;width:calc(var(--spacing, .25rem) * 2);background-color:color-mix(in srgb,oklch(86.9% .022 252.894) 50%,transparent);--tw-content: \"\";content:var(--tw-content)}@supports (color: color-mix(in lab,red,red)){.service-content .icon:before,.service-content .icon:after{background-color:color-mix(in oklab,var(--color-slate-300, oklch(86.9% .022 252.894)) 50%,transparent)}}.service-content .icon:before{top:0}.service-content .icon:after{top:50%}.service-content .icon i{z-index:1}.service-content .information{display:flex;flex-grow:1;flex-direction:column;overflow:hidden;padding-block:var(--spacing, .25rem)}.service-content .information .service-name{--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700)}.service-content .information .details{display:flex;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.service-content .information .details i{color:var(--color-slate-400, oklch(70.4% .04 256.788))}.service-content .information .details .datetime{margin-right:calc(var(--spacing, .25rem) * 3)}.service-content .information .details .user{overflow:hidden;text-overflow:ellipsis}@property --tw-content{syntax: \"*\"; inherits: false; initial-value: \"\";}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-content: \"\";--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { serviceTemplate: [{ type: i0.ViewChild, args: ['serviceTemplate', { isSignal: true }] }], controllerName: [{
+                type: Input
+            }], filtersChanged: [{ type: i0.Output, args: ["filtersChanged"] }] } });
+
+class ServicesHistoryFilterComponent extends FiltersBase {
+    //#region ViewChilds, Inputs, Outputs
+    /**
+     * Catalog that resolves the people who can appear as the author of a change.
+     *
+     * There is no such catalog in this library -- who a user is belongs to the application -- so the
+     * author filter is offered only when one is supplied.
+     */
+    usersCatalogEndpoint = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "usersCatalogEndpoint" }] : /* istanbul ignore next */ []));
+    //#endregion
+    //#region Variables
+    //#endregion
+    //#region Properties
+    hasUsersCatalog = computed(() => !!this.usersCatalogEndpoint(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasUsersCatalog" }] : /* istanbul ignore next */ []));
+    get changedOnFromControl() {
+        return this.filterForm.get('changedOnFrom');
+    }
+    get changedOnToControl() {
+        return this.filterForm.get('changedOnTo');
+    }
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    ngOnInit() {
+        super.ngOnInit();
+        // A range that reads backwards returns nothing and explains nothing, so the bound that did not
+        // just change follows the one that did, rather than leaving the person to spot it.
+        this.changedOnFromControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((from) => {
+            const to = this.changedOnToControl.value;
+            if (!!from && !!to && to < from) {
+                this.changedOnToControl.setValue(from);
+            }
+        });
+        this.changedOnToControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((to) => {
+            const from = this.changedOnFromControl.value;
+            if (!!from && !!to && to < from) {
+                this.changedOnFromControl.setValue(to);
+            }
+        });
+    }
+    //#endregion
+    //#region Event handlers
+    //#endregion
+    //#region Public methods
+    //#endregion
+    //#region Private methods
+    /**
+     * The control names are the filter names the backend reads, case insensitively: `name`,
+     * `changedByID`, `changedOnFrom`, `changedOnTo` and `onlyCurrentEntity` reach `AuditFilters` in
+     * ZWebAPI. The two dates are sent as picked and turned into UTC instants by
+     * {@link ServicesHistoryDataset}, which is the boundary where the request is built.
+     */
+    formSetup() {
+        return this.formBuilder.group({
+            changedByID: [null],
+            changedOnFrom: [null],
+            changedOnTo: [null],
+            name: [null],
+            onlyCurrentEntity: [false, { nonNullable: true }],
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ServicesHistoryFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: ServicesHistoryFilterComponent, isStandalone: true, selector: "shared-services-history-filter", inputs: { usersCatalogEndpoint: { classPropertyName: "usersCatalogEndpoint", publicName: "usersCatalogEndpoint", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<framework-button-filters modalSize=\"2xl\" modalTitle=\"ServicesHistory-Filters-Title\" [formGroup]=\"filterForm\">\r\n  <lib-form-group label=\"ServicesHistory-FormGroup-Service\">\r\n    <lib-form-input-group controlName=\"name\" label=\"ServicesHistory-Field-Name\" [autofocus]=\"true\" [maxLength]=\"200\">\r\n    </lib-form-input-group>\r\n\r\n    @if (hasUsersCatalog()) {\r\n      <lib-catalog-select\r\n        controlName=\"changedByID\"\r\n        displayControlName=\"changedByName\"\r\n        label=\"ServicesHistory-Field-ChangedBy\"\r\n        [readOnly]=\"false\"\r\n        [searchEndpoint]=\"usersCatalogEndpoint()!\"\r\n      >\r\n      </lib-catalog-select>\r\n    }\r\n  </lib-form-group>\r\n\r\n  <lib-form-group label=\"ServicesHistory-FormGroup-Period\">\r\n    <lib-form-input-group controlName=\"changedOnFrom\" label=\"ServicesHistory-Field-ChangedOnFrom\" [type]=\"'date'\">\r\n    </lib-form-input-group>\r\n\r\n    <lib-form-input-group controlName=\"changedOnTo\" label=\"ServicesHistory-Field-ChangedOnTo\" [type]=\"'date'\">\r\n    </lib-form-input-group>\r\n  </lib-form-group>\r\n\r\n  <lib-form-group label=\"ServicesHistory-FormGroup-Operations\">\r\n    <lib-form-input-group\r\n      controlName=\"onlyCurrentEntity\"\r\n      label=\"ServicesHistory-Field-OnlyCurrentEntity\"\r\n      notes=\"ServicesHistory-Field-OnlyCurrentEntity-Notes\"\r\n      [type]=\"'checkbox'\"\r\n    >\r\n    </lib-form-input-group>\r\n  </lib-form-group>\r\n</framework-button-filters>\r\n", styles: [""], dependencies: [{ kind: "component", type: ButtonFiltersComponent, selector: "framework-button-filters", inputs: ["modalSize", "modalTitle", "validateFormFunction"] }, { kind: "component", type: CatalogSelectComponent, selector: "lib-catalog-select", inputs: ["autofocus", "controlName", "displayControlName", "displayProperty", "entriesList", "filters", "label", "maxEntries", "minimumLengthSearch", "notes", "readOnly", "searchable", "searchEndpoint", "validations", "valueProperty"] }, { kind: "component", type: FormGroupComponent, selector: "lib-form-group", inputs: ["shouldExpand", "label"] }, { kind: "component", type: FormInputGroupComponent, selector: "lib-form-input-group", inputs: ["autofocus", "alignContent", "controlName", "fixedValue", "format", "label", "isDisabled", "isFullHeight", "maxLength", "min", "notes", "readOnly", "rows", "showLabel", "step", "template", "type", "validations"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ServicesHistoryFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shared-services-history-filter', imports: [
+                        ButtonFiltersComponent,
+                        CatalogSelectComponent,
+                        FormGroupComponent,
+                        FormInputGroupComponent,
+                        FormsModule,
+                        ReactiveFormsModule,
+                    ], template: "<framework-button-filters modalSize=\"2xl\" modalTitle=\"ServicesHistory-Filters-Title\" [formGroup]=\"filterForm\">\r\n  <lib-form-group label=\"ServicesHistory-FormGroup-Service\">\r\n    <lib-form-input-group controlName=\"name\" label=\"ServicesHistory-Field-Name\" [autofocus]=\"true\" [maxLength]=\"200\">\r\n    </lib-form-input-group>\r\n\r\n    @if (hasUsersCatalog()) {\r\n      <lib-catalog-select\r\n        controlName=\"changedByID\"\r\n        displayControlName=\"changedByName\"\r\n        label=\"ServicesHistory-Field-ChangedBy\"\r\n        [readOnly]=\"false\"\r\n        [searchEndpoint]=\"usersCatalogEndpoint()!\"\r\n      >\r\n      </lib-catalog-select>\r\n    }\r\n  </lib-form-group>\r\n\r\n  <lib-form-group label=\"ServicesHistory-FormGroup-Period\">\r\n    <lib-form-input-group controlName=\"changedOnFrom\" label=\"ServicesHistory-Field-ChangedOnFrom\" [type]=\"'date'\">\r\n    </lib-form-input-group>\r\n\r\n    <lib-form-input-group controlName=\"changedOnTo\" label=\"ServicesHistory-Field-ChangedOnTo\" [type]=\"'date'\">\r\n    </lib-form-input-group>\r\n  </lib-form-group>\r\n\r\n  <lib-form-group label=\"ServicesHistory-FormGroup-Operations\">\r\n    <lib-form-input-group\r\n      controlName=\"onlyCurrentEntity\"\r\n      label=\"ServicesHistory-Field-OnlyCurrentEntity\"\r\n      notes=\"ServicesHistory-Field-OnlyCurrentEntity-Notes\"\r\n      [type]=\"'checkbox'\"\r\n    >\r\n    </lib-form-input-group>\r\n  </lib-form-group>\r\n</framework-button-filters>\r\n" }]
+        }], propDecorators: { usersCatalogEndpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "usersCatalogEndpoint", required: false }] }] } });
+
+class ServicesHistoryViewComponent extends TabViewBase {
+    //#region ViewChilds, Inputs, Outputs
+    // Models rather than inputs: the constructor fills the first two from route data when a host
+    // has not bound them, and the entity id arrives from the data provider's stream.
+    controllerName = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controllerName" }] : /* istanbul ignore next */ []));
+    entityID = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "entityID" }] : /* istanbul ignore next */ []));
+    /**
+     * Catalog resolving the people who can appear as the author of a change, for the filter.
+     *
+     * Supplied through the route's `usersCatalogEndpoint` data, or bound directly. Without it the
+     * author filter is not offered -- see {@link ServicesHistoryFilterComponent}.
+     */
+    usersCatalogEndpoint = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "usersCatalogEndpoint" }] : /* istanbul ignore next */ []));
+    //#endregion
+    //#region Variables
+    /**
+     * The filters applied to the services grid, forwarded to the operations grid.
+     *
+     * Only `onlyCurrentEntity` means anything to the operations list, and the backend reads only what
+     * it recognises, so the set is passed whole rather than picked apart here: a filter added later
+     * then reaches both lists without this having to learn about it.
+     */
+    operationsFilters = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operationsFilters" }] : /* istanbul ignore next */ []));
+    activatedRoute = inject(ActivatedRoute);
+    dataProviderService = inject(DataProviderService, { optional: true });
+    //#endregion
+    //#region Properties
+    //#endregion
+    //#region Constructor and Angular life cycle methods
+    constructor() {
+        super();
+        if (this.activatedRoute.snapshot.data['controllerName']) {
+            this.controllerName.set(this.activatedRoute.snapshot.data['controllerName']);
+        }
+        if (this.activatedRoute.snapshot.data['usersCatalogEndpoint']) {
+            this.usersCatalogEndpoint.set(this.activatedRoute.snapshot.data['usersCatalogEndpoint']);
+        }
+        if (this.dataProviderService) {
+            this.dataProviderService
+                .getModel$()
+                .pipe(take(1))
+                .subscribe((model) => {
+                this.entityID.set(model.id);
+            });
+        }
+    }
+    //#endregion
+    //#region Event handlers
+    onFiltersChanged(filters) {
+        this.operationsFilters.set(filters);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ServicesHistoryViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: ServicesHistoryViewComponent, isStandalone: true, selector: "shared-services-history-view", inputs: { controllerName: { classPropertyName: "controllerName", publicName: "controllerName", isSignal: true, isRequired: false, transformFunction: null }, entityID: { classPropertyName: "entityID", publicName: "entityID", isSignal: true, isRequired: false, transformFunction: null }, usersCatalogEndpoint: { classPropertyName: "usersCatalogEndpoint", publicName: "usersCatalogEndpoint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { controllerName: "controllerNameChange", entityID: "entityIDChange", usersCatalogEndpoint: "usersCatalogEndpointChange" }, providers: [{ provide: DataGridDataset, useClass: ServicesHistoryDataset }], usesInheritance: true, ngImport: i0, template: "<ng-template #ribbon>\r\n  <lib-ribbon-group [label]=\"'RibbonGroup-General' | translate\">\r\n    <framework-button-refresh></framework-button-refresh>\r\n\r\n    <shared-services-history-filter [usersCatalogEndpoint]=\"usersCatalogEndpoint()\"> </shared-services-history-filter>\r\n  </lib-ribbon-group>\r\n</ng-template>\r\n\r\n<div class=\"history-container\">\r\n  <div class=\"service-history-container\">\r\n    <shared-services-history-child-list\r\n      #service\r\n      [controllerName]=\"controllerName()\"\r\n      (filtersChanged)=\"onFiltersChanged($event)\"\r\n    >\r\n    </shared-services-history-child-list>\r\n  </div>\r\n\r\n  <div class=\"operations-history-container\">\r\n    <shared-operations-history-child-list\r\n      [controllerName]=\"controllerName()\"\r\n      [filters]=\"operationsFilters()\"\r\n      [serviceID]=\"service.selectedServiceID()\"\r\n    >\r\n    </shared-operations-history-child-list>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-grow:1;overflow:hidden}.history-container{display:flex;flex-grow:1;overflow:hidden;padding:calc(var(--spacing, .25rem) * 2)}.history-container .service-history-container,.history-container .operations-history-container{display:flex;flex-grow:1;overflow:hidden}.history-container .service-history-container lib-data-grid,.history-container .operations-history-container lib-data-grid{flex-grow:1}.history-container .service-history-container{width:calc(2 / 6 * 100%);padding-right:var(--spacing, .25rem)}.history-container .service-history-container ::ng-deep lib-data-grid-row:first-child .icon:before{display:none}.history-container .service-history-container ::ng-deep lib-data-grid-row:last-child .icon:after{display:none}.history-container .operations-history-container{width:calc(4 / 6 * 100%);padding-left:var(--spacing, .25rem)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: ButtonRefreshComponent, selector: "framework-button-refresh" }, { kind: "component", type: OperationsHistoryChildListComponent, selector: "shared-operations-history-child-list", inputs: ["controllerName", "filters", "serviceID"] }, { kind: "component", type: RibbonGroupComponent, selector: "lib-ribbon-group", inputs: ["label"] }, { kind: "component", type: ServicesHistoryChildListComponent, selector: "shared-services-history-child-list", inputs: ["controllerName"], outputs: ["filtersChanged"] }, { kind: "component", type: ServicesHistoryFilterComponent, selector: "shared-services-history-filter", inputs: ["usersCatalogEndpoint"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ServicesHistoryViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shared-services-history-view', imports: [
+                        ButtonRefreshComponent,
+                        OperationsHistoryChildListComponent,
+                        RibbonGroupComponent,
+                        ServicesHistoryChildListComponent,
+                        ServicesHistoryFilterComponent,
+                        TranslatePipe,
+                    ], providers: [{ provide: DataGridDataset, useClass: ServicesHistoryDataset }], template: "<ng-template #ribbon>\r\n  <lib-ribbon-group [label]=\"'RibbonGroup-General' | translate\">\r\n    <framework-button-refresh></framework-button-refresh>\r\n\r\n    <shared-services-history-filter [usersCatalogEndpoint]=\"usersCatalogEndpoint()\"> </shared-services-history-filter>\r\n  </lib-ribbon-group>\r\n</ng-template>\r\n\r\n<div class=\"history-container\">\r\n  <div class=\"service-history-container\">\r\n    <shared-services-history-child-list\r\n      #service\r\n      [controllerName]=\"controllerName()\"\r\n      (filtersChanged)=\"onFiltersChanged($event)\"\r\n    >\r\n    </shared-services-history-child-list>\r\n  </div>\r\n\r\n  <div class=\"operations-history-container\">\r\n    <shared-operations-history-child-list\r\n      [controllerName]=\"controllerName()\"\r\n      [filters]=\"operationsFilters()\"\r\n      [serviceID]=\"service.selectedServiceID()\"\r\n    >\r\n    </shared-operations-history-child-list>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-grow:1;overflow:hidden}.history-container{display:flex;flex-grow:1;overflow:hidden;padding:calc(var(--spacing, .25rem) * 2)}.history-container .service-history-container,.history-container .operations-history-container{display:flex;flex-grow:1;overflow:hidden}.history-container .service-history-container lib-data-grid,.history-container .operations-history-container lib-data-grid{flex-grow:1}.history-container .service-history-container{width:calc(2 / 6 * 100%);padding-right:var(--spacing, .25rem)}.history-container .service-history-container ::ng-deep lib-data-grid-row:first-child .icon:before{display:none}.history-container .service-history-container ::ng-deep lib-data-grid-row:last-child .icon:after{display:none}.history-container .operations-history-container{width:calc(4 / 6 * 100%);padding-left:var(--spacing, .25rem)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { controllerName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controllerName", required: false }] }, { type: i0.Output, args: ["controllerNameChange"] }], entityID: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityID", required: false }] }, { type: i0.Output, args: ["entityIDChange"] }], usersCatalogEndpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "usersCatalogEndpoint", required: false }] }, { type: i0.Output, args: ["usersCatalogEndpointChange"] }] } });
+
+const ZAMBON_SHARED_I18N_ASSET_PATH = 'assets/i18n/zambon-dev/shared';
+const ZAMBON_SHARED_I18N_ASSET = {
+    glob: '**/*.json',
+    input: 'node_modules/@zambon-dev/ui/i18n/shared',
+    output: ZAMBON_SHARED_I18N_ASSET_PATH,
+};
+const ZAMBON_SHARED_I18N_RESOURCES = [
+    { prefix: `/${ZAMBON_SHARED_I18N_ASSET_PATH}/external-content/`, suffix: '.json' },
+    { prefix: `/${ZAMBON_SHARED_I18N_ASSET_PATH}/language-selector/`, suffix: '.json' },
+    { prefix: `/${ZAMBON_SHARED_I18N_ASSET_PATH}/login/`, suffix: '.json' },
+    { prefix: `/${ZAMBON_SHARED_I18N_ASSET_PATH}/operations-history/`, suffix: '.json' },
+    { prefix: `/${ZAMBON_SHARED_I18N_ASSET_PATH}/services-history/`, suffix: '.json' },
+    { prefix: `/${ZAMBON_SHARED_I18N_ASSET_PATH}/top-bar/`, suffix: '.json' },
+];
+function createZambonSharedTranslateLoader(httpBackend, appResources = []) {
+    return new MultiTranslateHttpLoader(httpBackend, [...ZAMBON_SHARED_I18N_RESOURCES, ...appResources]);
+}
+function provideZambonSharedTranslateLoader(appResources = []) {
+    return {
+        provide: TranslateLoader,
+        useFactory: (httpBackend) => createZambonSharedTranslateLoader(httpBackend, appResources),
+        deps: [HttpBackend],
+    };
+}
+function provideZambonSharedTranslateService(config = {}) {
+    return provideTranslateService({
+        defaultLanguage: config.defaultLanguage,
+        loader: provideZambonSharedTranslateLoader(config.appResources),
+    });
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AuthGuard, AuthInterceptor, AuthenticationService, BrandComponent, BypassHtmlSanitizerPipe, EXTERNAL_CONTENT_CONFIGS, EXTERNAL_CONTENT_ROUTE_PATH, EnumLabelPipe, EnvironmentBadgeComponent, ExternalContentComponent, ExternalContentConfigs, ExternalContentService, ExternalUrlResolverService, FiltersBase, LoginLayoutComponent, MainLayoutComponent, NotificationsComponent, NotificationsService, OperationsHistoryChildListComponent, OperationsHistoryDataset, OperationsHistoryModalComponent, OperationsHistoryService, ServicesHistoryChildListComponent, ServicesHistoryDataset, ServicesHistoryFilterComponent, ServicesHistoryService, ServicesHistoryViewComponent, SharedAuthModule, TopBarComponent, UserProfileComponent, UtcDatePipe, ZAMBON_SHARED_I18N_ASSET, ZAMBON_SHARED_I18N_ASSET_PATH, ZAMBON_SHARED_I18N_RESOURCES, createZambonSharedTranslateLoader, externalContentRoutes, provideZambonSharedTranslateLoader, provideZambonSharedTranslateService };
+//# sourceMappingURL=zambon-dev-ui-shared.mjs.map