@updevs/components 1.0.0-alpha.11 → 1.0.0-alpha.12

package/fesm2022/updevs-components-layout.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, Directive, Component, NgModule, InjectionToken, Injectable, Inject, TemplateRef, ViewEncapsulation, HostBinding, ContentChild, Input, ChangeDetectorRef, model, signal } from '@angular/core';
-import { BaseComponent, LayoutService, UpdCoreLayoutConfigService, UpdCoreLayoutModule } from '@updevs/sdk/layout';
+import { inject, Directive, Component, NgModule, InjectionToken, Injectable, Inject, TemplateRef, ViewEncapsulation, HostBinding, ContentChild, viewChild, ElementRef, signal, computed, input, model } from '@angular/core';
+import { BaseComponent, LayoutService, UpdCoreLayoutConfigService, PreferencesStorage, UpdCoreLayoutModule } from '@updevs/sdk/layout';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$4 from '@angular/router';
@@ -11,13 +11,17 @@ import * as i1$3 from '@updevs/components/button';
 import { UpdButtonModule } from '@updevs/components/button';
 import * as i2 from '@updevs/components/link';
 import { UpdLinkModule } from '@updevs/components/link';
+import * as i3 from '@updevs/components/dropdown';
+import { UpdDropdownModule } from '@updevs/components/dropdown';
 import * as i1$1 from '@jsverse/transloco';
 import { TranslocoService, TranslocoModule, TranslocoDirective } from '@jsverse/transloco';
+import { TextService } from '@updevs/sdk';
+import { NotificationsService, UpdNotificationsModule } from '@updevs/sdk/notifications';
+import { SecurityStorage, AuthService } from '@updevs/sdk/security';
 import { MenuService } from '@updevs/sdk/routes';
 import { filter, finalize } from 'rxjs';
-import * as i3 from '@angular/forms';
+import * as i3$1 from '@angular/forms';
 import { FormGroup, Validators, FormsModule } from '@angular/forms';
-import { AuthService } from '@updevs/sdk/security';
 import * as i7 from '@updevs/components/form';
 import { DynamicFieldType, UpdFormModule } from '@updevs/components/form';
 import * as i6 from '@updevs/components/card';
@@ -34,7 +38,7 @@ class BasePageComponent extends BaseComponent {
     }
     ngOnDestroy() {
         super.ngOnDestroy();
-        // TODO: clear subheader.
+        this._layoutService.pageHeader.set(undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BasePageComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: BasePageComponent, usesInheritance: true, ngImport: i0 }); }
@@ -88,6 +92,13 @@ var UpDevs$1 = {
 		Prefix: "Copyright",
 		"Symbol": "©",
 		Suffix: "All rights reserved."
+	},
+	NotificationCenter: {
+		Title: "Latest notifications",
+		NoNotifications: "No notifications"
+	},
+	Header: {
+		Search: "Search"
 	}
 };
 var en = {
@@ -116,6 +127,13 @@ var UpDevs = {
 		Prefix: "Copyright",
 		"Symbol": "©",
 		Suffix: "Todos os direitos reservados."
+	},
+	NotificationCenter: {
+		Title: "Últimas notificações",
+		NoNotifications: "Sem notificações"
+	},
+	Header: {
+		Search: "Pesquisar"
 	}
 };
 var pt = {
@@ -301,72 +319,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
 class HeaderComponent extends BaseComponent {
     constructor() {
         super(...arguments);
-        this.wrapperClasses = '';
-        this.style = 'light';
-        this.showSearchBar = true;
-        this.nextThemeIcon = 'moon';
-        this.nextThemeColor = 'black';
-        this.currentNotificationsIcon = 'bell';
-        this.hasNewNotifications = false;
-        this.showNotifications = false;
-        this.showLanguageSwitcher = true; // TODO: add on config.
-        this.showUserMenu = false;
-        this.baseWrapperClasses = 'navbar navbar-expand-md d-none d-lg-flex d-print-none';
+        this.languageSwitcherRef = viewChild('languageSwitcherBtn', { read: ElementRef });
+        this.notificationsRef = viewChild('notificationsBtn', { read: ElementRef });
+        this.loggedUserRef = viewChild('loggedUserBtn', { read: ElementRef });
+        this.isLanguageSwitcherDropdownOpen = false;
+        this.isNotificationsDropdownOpen = false;
+        this.isLoggedUserDropdownOpen = false;
+        this.style = signal('light');
+        this.nextThemeIcon = computed(() => this.currentPreferences()?.isDarkTheme ? 'sun' : 'moon-stars');
+        this.currentNotificationsIcon = computed(() => this.hasNewNotifications() ? 'bell-ringing' : 'bell');
+        this.hasNewNotifications = computed(() => this.currentNotifications().some(n => !n.dateRead));
+        this.languagesOptions = computed(() => {
+            const allLanguagesOptions = [];
+            const availableLanguages = (this.coreLayoutConfigService.config.availableLanguages || {});
+            Object.keys(availableLanguages).forEach(key => {
+                allLanguagesOptions.push({
+                    id: key,
+                    type: 'default',
+                    text: availableLanguages[key],
+                    isActive: this.currentLanguageKey() === key
+                });
+            });
+            return allLanguagesOptions;
+        });
+        this.loggedUserOptions = computed(() => {
+            const userActions = [];
+            this.coreLayoutConfigService.config.loggedUserMenuActions.forEach(act => userActions.push({
+                id: act.id(),
+                text: act.text(),
+                type: 'default',
+                icon: act.iconModel?.()
+            }));
+            return userActions;
+        });
+        this.userInfo = computed(() => this.securityStorage.getUserInfo());
+        this.userIdentification = computed(() => !!this.userInfo() ? this.coreLayoutConfigService.config.getUserName(this.userInfo()) : '');
+        this.userDescription = computed(() => !!this.coreLayoutConfigService.config.getUserDescription
+            ? this.coreLayoutConfigService.config.getUserDescription(this.userInfo())
+            : '');
+        this.shouldBlinkIfNewNotifications = computed(() => !!this.coreLayoutConfigService.config.shouldBlinkIfNewNotifications);
+        this.latestNotifications = computed(() => {
+            const unreadNotifications = this.currentNotifications()
+                .filter(n => !n.dateRead)
+                .sort((a, b) => new Date(b.dateReceived).getTime() - new Date(a.dateReceived).getTime())
+                .slice(0, this.coreLayoutConfigService.config.numberOfLastNotificationsDisplayed);
+            const readNotifications = this.currentNotifications()
+                .filter(n => !!n.dateRead)
+                .sort((a, b) => new Date(b.dateReceived).getTime() - new Date(a.dateReceived).getTime())
+                .slice(0, this.coreLayoutConfigService.config.numberOfLastNotificationsDisplayed);
+            return [
+                ...unreadNotifications,
+                ...readNotifications
+            ].slice(0, this.coreLayoutConfigService.config.numberOfLastNotificationsDisplayed);
+        });
+        this.textService = inject(TextService);
+        this.securityStorage = inject(SecurityStorage);
         this.coreLayoutConfigService = inject(UpdCoreLayoutConfigService);
         this.layoutService = inject(LayoutService);
         this.translocoService = inject(TranslocoService);
+        this.preferencesStorage = inject(PreferencesStorage);
+        this.notificationsService = inject(NotificationsService);
+        this.currentPreferences = this.preferencesStorage.getPreferences();
+        this.currentNotifications = this.notificationsService.notifications;
+        this.currentLanguageKey = signal('');
+        this.wrapperClasses = computed(() => `navbar navbar-expand-md d-none d-lg-flex d-print-none navbar-${this.style()}`);
+        // eslint-disable-next-line @typescript-eslint/member-ordering
+        this.config = computed(() => this.layoutService.mainHeaderConfig());
+    }
+    get classes() {
+        return this.wrapperClasses();
     }
     ngOnInit() {
-        this.updateWrapperClasses();
-        if (this.coreLayoutConfigService.config.showNotificationsButton) {
-            this.setupNotifications();
-        }
-        if (this.coreLayoutConfigService.config.showUserMenu) {
-            this.showUserMenu = true;
+        if (!!this.currentPreferences()?.isDarkTheme) {
+            this.layoutService.setDarkMode();
         }
-    }
-    ngOnChanges(changes) {
-        if (!!changes['style'].currentValue) {
-            this.updateWrapperClasses();
+        if (!!this.currentPreferences()?.currentLanguageCode) {
+            const code = this.currentPreferences().currentLanguageCode;
+            this.currentLanguageKey.set(code);
+            this.translocoService.setActiveLang(code);
         }
     }
     switchTheme() {
-        const isDarkMode = this.nextThemeIcon === 'moon';
-        this.nextThemeIcon = isDarkMode ? 'sun' : 'moon';
-        this.nextThemeColor = isDarkMode ? 'white' : 'black';
-        this.layoutService.toggleDarkMode(isDarkMode);
-    }
-    // TODO: implement.
-    switchLanguage() {
-        const currentLang = this.translocoService.getActiveLang();
-        this.translocoService.setActiveLang(currentLang === 'en' ? 'pt' : 'en');
-    }
-    openNotifications() {
-        this.updateNotificationsIcon();
+        this.layoutService.toggleDarkMode();
+    }
+    switchLanguage(item) {
+        this.currentLanguageKey.set(item.id);
+        this.translocoService.setActiveLang(item.id);
+        this.preferencesStorage.savePreferences({ ...this.currentPreferences(), currentLanguageCode: item.id });
+        this.isLanguageSwitcherDropdownOpen = false;
+    }
+    selectLoggedUserMenuItem(item) {
+        const btn = this.coreLayoutConfigService.config.loggedUserMenuActions.find(b => b.id() === item.id);
+        if (!!btn?.clickFunction) {
+            btn.clickFunction({ data: this.userInfo() });
+        }
     }
-    setupNotifications() {
-        this.showNotifications = true;
+    readNotification(notification) {
+        if (!notification.dateRead) {
+            this.notificationsService.markAsRead(notification.id);
+        }
+        this.notificationsService.clickOnNotification(notification);
     }
-    updateNotificationsIcon() {
-        this.currentNotificationsIcon = this.currentNotificationsIcon === 'bell' ? 'bell-ringing' : 'bell';
-        this.hasNewNotifications = !this.hasNewNotifications;
-    }
-    updateWrapperClasses() {
-        this.wrapperClasses = `${this.baseWrapperClasses} navbar-${this.style}`;
+    removeNotification(notification) {
+        this.notificationsService.removeNotifications(notification.id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HeaderComponent, selector: "upd-header", inputs: { style: "style", showSearchBar: "showSearchBar" }, host: { properties: { "class": "this.wrapperClasses" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"container-xl\">\n    <button class=\"navbar-toggler\" type=\"button\">\n        <span class=\"navbar-toggler-icon\"></span>\n    </button>\n    <div class=\"navbar-nav flex-row order-md-last\">\n        <div class=\"d-none d-md-flex me-3\">\n            <div class=\"nav-item\">\n                <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"switchTheme()\">\n                    <upd-icon [tablerIcon]=\"nextThemeIcon\"></upd-icon>\n                </upd-link>\n            </div>\n            @if (showLanguageSwitcher) {\n                <div class=\"nav-item\">\n                    <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"switchLanguage()\">\n                        <upd-icon tablerIcon=\"flag\"></upd-icon>\n                    </upd-link>\n                </div>\n            }\n            @if (showNotifications) {\n                <div class=\"nav-item dropdown d-none d-md-flex\">\n                    <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"openNotifications()\">\n                        <upd-icon [tablerIcon]=\"currentNotificationsIcon\"></upd-icon>\n                        @if (hasNewNotifications) {\n                            <span class=\"badge bg-red\"></span>\n                        }\n                    </upd-link>\n                    <div class=\"dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card\">\n                        <div class=\"card\">\n                            <div class=\"card-header\">\n                                <h3 class=\"card-title\">Last updates</h3>\n                            </div>\n                            <div class=\"list-group list-group-flush list-group-hoverable\">\n                                <div class=\"list-group-item\">\n                                    <div class=\"row align-items-center\">\n                                        <div class=\"col-auto\"><span\n                                            class=\"status-dot status-dot-animated bg-red d-block\"></span></div>\n                                        <div class=\"col text-truncate\">\n                                            <a href=\"#\" class=\"text-body d-block\">Example 1</a>\n                                            <div class=\"d-block text-muted text-truncate mt-n1\">\n                                                Change deprecated html tags to text decoration classes (#29604)\n                                            </div>\n                                        </div>\n                                        <div class=\"col-auto\">\n                                            <a href=\"#\" class=\"list-group-item-actions\">\n                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon text-muted\"\n                                                    width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                                                    stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\">\n                                                    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n                                                    <path\n                                                        d=\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/>\n                                                </svg>\n                                            </a>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"list-group-item\">\n                                    <div class=\"row align-items-center\">\n                                        <div class=\"col-auto\"><span class=\"status-dot d-block\"></span></div>\n                                        <div class=\"col text-truncate\">\n                                            <a href=\"#\" class=\"text-body d-block\">Example 2</a>\n                                            <div class=\"d-block text-muted text-truncate mt-n1\">\n                                                justify-content:between \u21D2 justify-content:space-between (#29734)\n                                            </div>\n                                        </div>\n                                        <div class=\"col-auto\">\n                                            <a href=\"#\" class=\"list-group-item-actions show\">\n                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon text-yellow\"\n                                                    width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                                                    stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\">\n                                                    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n                                                    <path\n                                                        d=\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/>\n                                                </svg>\n                                            </a>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"list-group-item\">\n                                    <div class=\"row align-items-center\">\n                                        <div class=\"col-auto\"><span class=\"status-dot d-block\"></span></div>\n                                        <div class=\"col text-truncate\">\n                                            <a href=\"#\" class=\"text-body d-block\">Example 3</a>\n                                            <div class=\"d-block text-muted text-truncate mt-n1\">\n                                                Update change-version.js (#29736)\n                                            </div>\n                                        </div>\n                                        <div class=\"col-auto\">\n                                            <a href=\"#\" class=\"list-group-item-actions\">\n                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon text-muted\"\n                                                    width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                                                    stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\">\n                                                    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n                                                    <path\n                                                        d=\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/>\n                                                </svg>\n                                            </a>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"list-group-item\">\n                                    <div class=\"row align-items-center\">\n                                        <div class=\"col-auto\"><span\n                                            class=\"status-dot status-dot-animated bg-green d-block\"></span></div>\n                                        <div class=\"col text-truncate\">\n                                            <a href=\"#\" class=\"text-body d-block\">Example 4</a>\n                                            <div class=\"d-block text-muted text-truncate mt-n1\">\n                                                Regenerate package-lock.json (#29730)\n                                            </div>\n                                        </div>\n                                        <div class=\"col-auto\">\n                                            <a href=\"#\" class=\"list-group-item-actions\">\n                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon text-muted\"\n                                                    width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                                                    stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\">\n                                                    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n                                                    <path\n                                                        d=\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/>\n                                                </svg>\n                                            </a>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            }\n        </div>\n        @if (showUserMenu) {\n            <div class=\"nav-item dropdown\">\n                <a href=\"#\" class=\"nav-link d-flex lh-1 text-reset p-0\" data-bs-toggle=\"dropdown\"\n                    aria-label=\"Open user menu\">\n                    <!--<span class=\"avatar avatar-sm\" style=\"background-image: url(./static/avatars/000m.jpg)\"></span>-->\n                    <span class=\"avatar avatar-sm\"></span>\n                    <div class=\"d-none d-xl-block ps-2\">\n                        <div>Eros Stein</div>\n                        <div class=\"mt-1 small text-muted\">Administrator</div>\n                    </div>\n                </a>\n                <div class=\"dropdown-menu dropdown-menu-end dropdown-menu-arrow\">\n                    <a href=\"#\" class=\"dropdown-item\">Status</a>\n                    <a href=\"./profile.html\" class=\"dropdown-item\">Profile</a>\n                    <a href=\"#\" class=\"dropdown-item\">Feedback</a>\n                    <div class=\"dropdown-divider\"></div>\n                    <a href=\"./settings.html\" class=\"dropdown-item\">Settings</a>\n                    <a href=\"./sign-in.html\" class=\"dropdown-item\">Logout</a>\n                </div>\n            </div>\n        }\n    </div>\n    @if (showSearchBar) {\n        <div class=\"collapse navbar-collapse\">\n            <div>\n                <form autocomplete=\"off\" novalidate>\n                    <div class=\"input-icon\">\n                        <span class=\"input-icon-addon\">\n                            <upd-icon tablerIcon=\"search\"></upd-icon>\n                        </span>\n                        <input type=\"text\" value=\"\" class=\"form-control\" placeholder=\"Search\u2026\">\n                    </div>\n                </form>\n            </div>\n        </div>\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i2.LinkComponent, selector: "upd-link", inputs: ["href", "target", "customClasses", "isNavigation"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HeaderComponent, selector: "upd-header", host: { properties: { "class": "this.classes" } }, viewQueries: [{ propertyName: "languageSwitcherRef", first: true, predicate: ["languageSwitcherBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "notificationsRef", first: true, predicate: ["notificationsBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "loggedUserRef", first: true, predicate: ["loggedUserBtn"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-xl\">\n    <button class=\"navbar-toggler\" type=\"button\">\n        <span class=\"navbar-toggler-icon\"></span>\n    </button>\n    <div class=\"navbar-nav flex-row order-md-last\">\n        <div class=\"d-none d-md-flex me-3\">\n            @if (!!config().showThemeSwitcher) {\n                <div class=\"nav-item\">\n                    <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"switchTheme()\">\n                        <upd-icon [tablerIcon]=\"nextThemeIcon()\"></upd-icon>\n                    </upd-link>\n                </div>\n            }\n            @if (!!config().showLanguageSwitcher && languagesOptions().length > 0) {\n                <div class=\"nav-item\">\n                    <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"isLanguageSwitcherDropdownOpen=true\"\n                      #languageSwitcherBtn>\n                        <upd-icon tablerIcon=\"language\"></upd-icon>\n                    </upd-link>\n                    <upd-dropdown wrapperClasses=\"mt-1\" [isOpen]=\"isLanguageSwitcherDropdownOpen\"\n                        [dropdownReference]=\"languageSwitcherRef()\" [items]=\"languagesOptions()\" [shouldCloseOnOutsideClick]=\"true\"\n                        (isOpenChange)=\"isLanguageSwitcherDropdownOpen = $event\" (selectedItem)=\"switchLanguage($event)\">\n                    </upd-dropdown>\n                </div>\n            }\n            @if (!!config().showNotifications) {\n                <div class=\"nav-item dropdown d-none d-md-flex\">\n                    <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"isNotificationsDropdownOpen = true\"\n                      #notificationsBtn>\n                        <upd-icon [tablerIcon]=\"currentNotificationsIcon()\"></upd-icon>\n                        @if (hasNewNotifications()) {\n                            <span class=\"badge bg-red\" [class.badge-blink]=\"shouldBlinkIfNewNotifications()\"></span>\n                        }\n                    </upd-link>\n                    <upd-dropdown wrapperClasses=\"mt-1 dropdown-menu-card\" [isOpen]=\"isNotificationsDropdownOpen\"\n                        [dropdownReference]=\"notificationsRef()\" [shouldCloseOnOutsideClick]=\"true\"\n                        (isOpenChange)=\"isNotificationsDropdownOpen = $event\" [minWidth]=\"400\" arrowType=\"right\">\n                        <div class=\"card\">\n                            <div class=\"card-header\">\n                                <h3 class=\"card-title\">{{ 'UpDevs.NotificationCenter.Title' | transloco }}</h3>\n                            </div>\n                            @for (notification of latestNotifications(); track notification) {\n                                <div class=\"list-group list-group-flush list-group-hoverable\" (click)=\"readNotification(notification)\">\n                                    <div class=\"list-group-item\">\n                                        <div class=\"row align-items-center\">\n                                            <div class=\"col-auto\">\n                                                @if (!!notification.dateRead) {\n                                                    <span class=\"status-dot d-block\"></span>\n                                                } @else {\n                                                    <span class=\"status-dot status-dot-animated bg-primary d-block\"></span>\n                                                }\n                                            </div>\n                                            <div class=\"col text-truncate\">\n                                                <a href=\"javascript:void(0)\" class=\"text-body d-block\"\n                                                    [class.fw-bold]=\"!notification.dateRead\">\n                                                    {{ textService.getText(notification.title) }}\n                                                </a>\n                                                @if (!!notification.description) {\n                                                    <div class=\"d-block text-secondary text-truncate mt-n1\">\n                                                        {{ textService.getText(notification.description) }}\n                                                    </div>\n                                                }\n                                            </div>\n                                            <div class=\"col-auto\">\n                                                <upd-link [customClasses]=\"['list-group-item-actions']\"\n                                                    (clicked)=\"removeNotification(notification)\">\n                                                    <upd-icon tablerIcon=\"x\"></upd-icon>\n                                                </upd-link>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            } @empty {\n                                <div class=\"empty\">\n                                    <h1 class=\"text-body-tertiary\">{{ 'UpDevs.NotificationCenter.NoNotifications' | transloco }}</h1>\n                                </div>\n                            }\n                        </div>\n                    </upd-dropdown>\n                </div>\n            }\n        </div>\n        @if (!!config().showUserMenu && !!userInfo()) {\n            <div class=\"nav-item dropdown\">\n                <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"isLoggedUserDropdownOpen = true\" #loggedUserBtn>\n                    @if (!!userInfo()!.avatar) {\n                        <span class=\"avatar avatar-sm\" style=\"background-image: url({{userInfo()?.avatar}})\"></span>\n                    }\n\n                    <div class=\"d-none d-xl-block ps-2\">\n                        <div>{{ userIdentification() }}</div>\n                        @if (!!userDescription()) {\n                            <div class=\"mt-1 small text-muted\">{{ userDescription() }}</div>\n                        }\n                    </div>\n                </upd-link>\n                @if (loggedUserOptions().length > 0) {\n                    <upd-dropdown wrapperClasses=\"mt-1\" [isOpen]=\"isLoggedUserDropdownOpen\" [dropdownReference]=\"loggedUserRef()\"\n                        [items]=\"loggedUserOptions()\" [shouldCloseOnOutsideClick]=\"true\" (selectedItem)=\"selectLoggedUserMenuItem($event)\"\n                        (isOpenChange)=\"isLoggedUserDropdownOpen = $event\" arrowType=\"right\">\n                    </upd-dropdown>\n                }\n            </div>\n        }\n    </div>\n    @if (!!config().showSearchBar) {\n        <div class=\"collapse navbar-collapse\">\n            <div class=\"me-2\" [class.w-100]=\"config().shouldUseFullSearchBar\">\n                <form autocomplete=\"off\" novalidate>\n                    <div class=\"input-icon\">\n                        <span class=\"input-icon-addon\">\n                            <upd-icon tablerIcon=\"search\"></upd-icon>\n                        </span>\n                        <input type=\"text\" value=\"\" class=\"form-control\" placeholder=\"{{'UpDevs.Header.Search' | transloco}}...\">\n                    </div>\n                </form>\n            </div>\n        </div>\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i2.LinkComponent, selector: "upd-link", inputs: ["href", "target", "customClasses", "isNavigation"], outputs: ["clicked"] }, { kind: "component", type: i3.DropdownComponent, selector: "upd-dropdown", inputs: ["items", "header", "isOpen", "shouldCloseOnOutsideClick", "arrowType", "wrapperClasses", "elementsExcludedFromOutsideClick", "minHeight", "maxHeight", "minWidth", "maxWidth", "dropdownReference", "dropdownReferencePosition", "textOverflowStrategy"], outputs: ["isOpenChange", "selectedItem", "checkboxChanged"] }, { kind: "pipe", type: i1$1.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-xl\">\n    <button class=\"navbar-toggler\" type=\"button\">\n        <span class=\"navbar-toggler-icon\"></span>\n    </button>\n    <div class=\"navbar-nav flex-row order-md-last\">\n        <div class=\"d-none d-md-flex me-3\">\n            <div class=\"nav-item\">\n                <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"switchTheme()\">\n                    <upd-icon [tablerIcon]=\"nextThemeIcon\"></upd-icon>\n                </upd-link>\n            </div>\n            @if (showLanguageSwitcher) {\n                <div class=\"nav-item\">\n                    <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"switchLanguage()\">\n                        <upd-icon tablerIcon=\"flag\"></upd-icon>\n                    </upd-link>\n                </div>\n            }\n            @if (showNotifications) {\n                <div class=\"nav-item dropdown d-none d-md-flex\">\n                    <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"openNotifications()\">\n                        <upd-icon [tablerIcon]=\"currentNotificationsIcon\"></upd-icon>\n                        @if (hasNewNotifications) {\n                            <span class=\"badge bg-red\"></span>\n                        }\n                    </upd-link>\n                    <div class=\"dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card\">\n                        <div class=\"card\">\n                            <div class=\"card-header\">\n                                <h3 class=\"card-title\">Last updates</h3>\n                            </div>\n                            <div class=\"list-group list-group-flush list-group-hoverable\">\n                                <div class=\"list-group-item\">\n                                    <div class=\"row align-items-center\">\n                                        <div class=\"col-auto\"><span\n                                            class=\"status-dot status-dot-animated bg-red d-block\"></span></div>\n                                        <div class=\"col text-truncate\">\n                                            <a href=\"#\" class=\"text-body d-block\">Example 1</a>\n                                            <div class=\"d-block text-muted text-truncate mt-n1\">\n                                                Change deprecated html tags to text decoration classes (#29604)\n                                            </div>\n                                        </div>\n                                        <div class=\"col-auto\">\n                                            <a href=\"#\" class=\"list-group-item-actions\">\n                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon text-muted\"\n                                                    width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                                                    stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\">\n                                                    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n                                                    <path\n                                                        d=\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/>\n                                                </svg>\n                                            </a>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"list-group-item\">\n                                    <div class=\"row align-items-center\">\n                                        <div class=\"col-auto\"><span class=\"status-dot d-block\"></span></div>\n                                        <div class=\"col text-truncate\">\n                                            <a href=\"#\" class=\"text-body d-block\">Example 2</a>\n                                            <div class=\"d-block text-muted text-truncate mt-n1\">\n                                                justify-content:between \u21D2 justify-content:space-between (#29734)\n                                            </div>\n                                        </div>\n                                        <div class=\"col-auto\">\n                                            <a href=\"#\" class=\"list-group-item-actions show\">\n                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon text-yellow\"\n                                                    width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                                                    stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\">\n                                                    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n                                                    <path\n                                                        d=\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/>\n                                                </svg>\n                                            </a>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"list-group-item\">\n                                    <div class=\"row align-items-center\">\n                                        <div class=\"col-auto\"><span class=\"status-dot d-block\"></span></div>\n                                        <div class=\"col text-truncate\">\n                                            <a href=\"#\" class=\"text-body d-block\">Example 3</a>\n                                            <div class=\"d-block text-muted text-truncate mt-n1\">\n                                                Update change-version.js (#29736)\n                                            </div>\n                                        </div>\n                                        <div class=\"col-auto\">\n                                            <a href=\"#\" class=\"list-group-item-actions\">\n                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon text-muted\"\n                                                    width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                                                    stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\">\n                                                    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n                                                    <path\n                                                        d=\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/>\n                                                </svg>\n                                            </a>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"list-group-item\">\n                                    <div class=\"row align-items-center\">\n                                        <div class=\"col-auto\"><span\n                                            class=\"status-dot status-dot-animated bg-green d-block\"></span></div>\n                                        <div class=\"col text-truncate\">\n                                            <a href=\"#\" class=\"text-body d-block\">Example 4</a>\n                                            <div class=\"d-block text-muted text-truncate mt-n1\">\n                                                Regenerate package-lock.json (#29730)\n                                            </div>\n                                        </div>\n                                        <div class=\"col-auto\">\n                                            <a href=\"#\" class=\"list-group-item-actions\">\n                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon text-muted\"\n                                                    width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                                                    stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\">\n                                                    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n                                                    <path\n                                                        d=\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/>\n                                                </svg>\n                                            </a>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            }\n        </div>\n        @if (showUserMenu) {\n            <div class=\"nav-item dropdown\">\n                <a href=\"#\" class=\"nav-link d-flex lh-1 text-reset p-0\" data-bs-toggle=\"dropdown\"\n                    aria-label=\"Open user menu\">\n                    <!--<span class=\"avatar avatar-sm\" style=\"background-image: url(./static/avatars/000m.jpg)\"></span>-->\n                    <span class=\"avatar avatar-sm\"></span>\n                    <div class=\"d-none d-xl-block ps-2\">\n                        <div>Eros Stein</div>\n                        <div class=\"mt-1 small text-muted\">Administrator</div>\n                    </div>\n                </a>\n                <div class=\"dropdown-menu dropdown-menu-end dropdown-menu-arrow\">\n                    <a href=\"#\" class=\"dropdown-item\">Status</a>\n                    <a href=\"./profile.html\" class=\"dropdown-item\">Profile</a>\n                    <a href=\"#\" class=\"dropdown-item\">Feedback</a>\n                    <div class=\"dropdown-divider\"></div>\n                    <a href=\"./settings.html\" class=\"dropdown-item\">Settings</a>\n                    <a href=\"./sign-in.html\" class=\"dropdown-item\">Logout</a>\n                </div>\n            </div>\n        }\n    </div>\n    @if (showSearchBar) {\n        <div class=\"collapse navbar-collapse\">\n            <div>\n                <form autocomplete=\"off\" novalidate>\n                    <div class=\"input-icon\">\n                        <span class=\"input-icon-addon\">\n                            <upd-icon tablerIcon=\"search\"></upd-icon>\n                        </span>\n                        <input type=\"text\" value=\"\" class=\"form-control\" placeholder=\"Search\u2026\">\n                    </div>\n                </form>\n            </div>\n        </div>\n    }\n</div>\n" }]
-        }], propDecorators: { wrapperClasses: [{
+            args: [{ selector: 'upd-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-xl\">\n    <button class=\"navbar-toggler\" type=\"button\">\n        <span class=\"navbar-toggler-icon\"></span>\n    </button>\n    <div class=\"navbar-nav flex-row order-md-last\">\n        <div class=\"d-none d-md-flex me-3\">\n            @if (!!config().showThemeSwitcher) {\n                <div class=\"nav-item\">\n                    <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"switchTheme()\">\n                        <upd-icon [tablerIcon]=\"nextThemeIcon()\"></upd-icon>\n                    </upd-link>\n                </div>\n            }\n            @if (!!config().showLanguageSwitcher && languagesOptions().length > 0) {\n                <div class=\"nav-item\">\n                    <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"isLanguageSwitcherDropdownOpen=true\"\n                      #languageSwitcherBtn>\n                        <upd-icon tablerIcon=\"language\"></upd-icon>\n                    </upd-link>\n                    <upd-dropdown wrapperClasses=\"mt-1\" [isOpen]=\"isLanguageSwitcherDropdownOpen\"\n                        [dropdownReference]=\"languageSwitcherRef()\" [items]=\"languagesOptions()\" [shouldCloseOnOutsideClick]=\"true\"\n                        (isOpenChange)=\"isLanguageSwitcherDropdownOpen = $event\" (selectedItem)=\"switchLanguage($event)\">\n                    </upd-dropdown>\n                </div>\n            }\n            @if (!!config().showNotifications) {\n                <div class=\"nav-item dropdown d-none d-md-flex\">\n                    <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"isNotificationsDropdownOpen = true\"\n                      #notificationsBtn>\n                        <upd-icon [tablerIcon]=\"currentNotificationsIcon()\"></upd-icon>\n                        @if (hasNewNotifications()) {\n                            <span class=\"badge bg-red\" [class.badge-blink]=\"shouldBlinkIfNewNotifications()\"></span>\n                        }\n                    </upd-link>\n                    <upd-dropdown wrapperClasses=\"mt-1 dropdown-menu-card\" [isOpen]=\"isNotificationsDropdownOpen\"\n                        [dropdownReference]=\"notificationsRef()\" [shouldCloseOnOutsideClick]=\"true\"\n                        (isOpenChange)=\"isNotificationsDropdownOpen = $event\" [minWidth]=\"400\" arrowType=\"right\">\n                        <div class=\"card\">\n                            <div class=\"card-header\">\n                                <h3 class=\"card-title\">{{ 'UpDevs.NotificationCenter.Title' | transloco }}</h3>\n                            </div>\n                            @for (notification of latestNotifications(); track notification) {\n                                <div class=\"list-group list-group-flush list-group-hoverable\" (click)=\"readNotification(notification)\">\n                                    <div class=\"list-group-item\">\n                                        <div class=\"row align-items-center\">\n                                            <div class=\"col-auto\">\n                                                @if (!!notification.dateRead) {\n                                                    <span class=\"status-dot d-block\"></span>\n                                                } @else {\n                                                    <span class=\"status-dot status-dot-animated bg-primary d-block\"></span>\n                                                }\n                                            </div>\n                                            <div class=\"col text-truncate\">\n                                                <a href=\"javascript:void(0)\" class=\"text-body d-block\"\n                                                    [class.fw-bold]=\"!notification.dateRead\">\n                                                    {{ textService.getText(notification.title) }}\n                                                </a>\n                                                @if (!!notification.description) {\n                                                    <div class=\"d-block text-secondary text-truncate mt-n1\">\n                                                        {{ textService.getText(notification.description) }}\n                                                    </div>\n                                                }\n                                            </div>\n                                            <div class=\"col-auto\">\n                                                <upd-link [customClasses]=\"['list-group-item-actions']\"\n                                                    (clicked)=\"removeNotification(notification)\">\n                                                    <upd-icon tablerIcon=\"x\"></upd-icon>\n                                                </upd-link>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            } @empty {\n                                <div class=\"empty\">\n                                    <h1 class=\"text-body-tertiary\">{{ 'UpDevs.NotificationCenter.NoNotifications' | transloco }}</h1>\n                                </div>\n                            }\n                        </div>\n                    </upd-dropdown>\n                </div>\n            }\n        </div>\n        @if (!!config().showUserMenu && !!userInfo()) {\n            <div class=\"nav-item dropdown\">\n                <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"isLoggedUserDropdownOpen = true\" #loggedUserBtn>\n                    @if (!!userInfo()!.avatar) {\n                        <span class=\"avatar avatar-sm\" style=\"background-image: url({{userInfo()?.avatar}})\"></span>\n                    }\n\n                    <div class=\"d-none d-xl-block ps-2\">\n                        <div>{{ userIdentification() }}</div>\n                        @if (!!userDescription()) {\n                            <div class=\"mt-1 small text-muted\">{{ userDescription() }}</div>\n                        }\n                    </div>\n                </upd-link>\n                @if (loggedUserOptions().length > 0) {\n                    <upd-dropdown wrapperClasses=\"mt-1\" [isOpen]=\"isLoggedUserDropdownOpen\" [dropdownReference]=\"loggedUserRef()\"\n                        [items]=\"loggedUserOptions()\" [shouldCloseOnOutsideClick]=\"true\" (selectedItem)=\"selectLoggedUserMenuItem($event)\"\n                        (isOpenChange)=\"isLoggedUserDropdownOpen = $event\" arrowType=\"right\">\n                    </upd-dropdown>\n                }\n            </div>\n        }\n    </div>\n    @if (!!config().showSearchBar) {\n        <div class=\"collapse navbar-collapse\">\n            <div class=\"me-2\" [class.w-100]=\"config().shouldUseFullSearchBar\">\n                <form autocomplete=\"off\" novalidate>\n                    <div class=\"input-icon\">\n                        <span class=\"input-icon-addon\">\n                            <upd-icon tablerIcon=\"search\"></upd-icon>\n                        </span>\n                        <input type=\"text\" value=\"\" class=\"form-control\" placeholder=\"{{'UpDevs.Header.Search' | transloco}}...\">\n                    </div>\n                </form>\n            </div>\n        </div>\n    }\n</div>\n" }]
+        }], propDecorators: { classes: [{
                 type: HostBinding,
                 args: ['class']
-            }], style: [{
-                type: Input
-            }], showSearchBar: [{
-                type: Input
             }] } });
 
 class SidebarComponent extends BaseComponent {
@@ -473,37 +538,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
             }] } });
 
 class PageHeaderComponent {
+    constructor() {
+        this.model = input.required();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: PageHeaderComponent, selector: "upd-page-header", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"page-header d-print-none\">\n    <div class=\"container-xl\">\n        <div class=\"row g-2 align-items-center\">\n            <div class=\"col\">\n                <div class=\"page-pretitle\">\n                    {{ model.titleHeader }}\n                </div>\n                <h2 class=\"page-title\">\n                    {{ model.title }}\n                </h2>\n            </div>\n            @if (model.actionButtons.length > 0) {\n                <div class=\"col-auto ms-auto d-print-none\">\n                    <div class=\"btn-list\">\n                        @for (btn of model.actionButtons; track btn) {\n                            <upd-button [model]=\"btn!\"></upd-button>\n                        }\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1$3.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: PageHeaderComponent, selector: "upd-page-header", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"page-header d-print-none\">\n    <div class=\"container-xl\">\n        <div class=\"row g-2 align-items-center\">\n            <div class=\"col\">\n                <div class=\"page-pretitle\">\n                    {{ model().titleHeader }}\n                </div>\n                <h2 class=\"page-title\">\n                    {{ model().title }}\n                </h2>\n            </div>\n            @if (model().actionButtons.length > 0) {\n                <div class=\"col-auto ms-auto d-print-none\">\n                    <div class=\"btn-list\">\n                        @for (btn of model().actionButtons; track btn) {\n                            <upd-button [model]=\"btn\"></upd-button>\n                        }\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1$3.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-page-header', template: "<div class=\"page-header d-print-none\">\n    <div class=\"container-xl\">\n        <div class=\"row g-2 align-items-center\">\n            <div class=\"col\">\n                <div class=\"page-pretitle\">\n                    {{ model.titleHeader }}\n                </div>\n                <h2 class=\"page-title\">\n                    {{ model.title }}\n                </h2>\n            </div>\n            @if (model.actionButtons.length > 0) {\n                <div class=\"col-auto ms-auto d-print-none\">\n                    <div class=\"btn-list\">\n                        @for (btn of model.actionButtons; track btn) {\n                            <upd-button [model]=\"btn!\"></upd-button>\n                        }\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n</div>\n" }]
-        }], propDecorators: { model: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'upd-page-header', template: "<div class=\"page-header d-print-none\">\n    <div class=\"container-xl\">\n        <div class=\"row g-2 align-items-center\">\n            <div class=\"col\">\n                <div class=\"page-pretitle\">\n                    {{ model().titleHeader }}\n                </div>\n                <h2 class=\"page-title\">\n                    {{ model().title }}\n                </h2>\n            </div>\n            @if (model().actionButtons.length > 0) {\n                <div class=\"col-auto ms-auto d-print-none\">\n                    <div class=\"btn-list\">\n                        @for (btn of model().actionButtons; track btn) {\n                            <upd-button [model]=\"btn\"></upd-button>\n                        }\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n</div>\n" }]
+        }] });
 
 class VerticalSidebarLayoutComponent extends BaseLayout {
-    constructor() {
-        super(...arguments);
-        this.showPageHeader = false;
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        const pHeaderSub = this._layoutService.onPageHeaderChange.subscribe(ph => {
-            this.showPageHeader = !!ph;
-            this.pageHeader = ph;
-            this.changeDetectorRef.detectChanges();
-        });
-        this.addSubscriptions(pHeaderSub);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: VerticalSidebarLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: VerticalSidebarLayoutComponent, selector: "upd-vertical-sidebar-layout", usesInheritance: true, ngImport: i0, template: "<div class=\"page\">\n    <upd-sidebar></upd-sidebar>\n    <upd-header></upd-header>\n\n    <div class=\"page-wrapper\">\n        @if (showPageHeader) {\n            <upd-page-header [model]=\"pageHeader!\"></upd-page-header>\n        }\n        <div class=\"page-body\">\n            <div class=\"container-xl\">\n                <router-outlet></router-outlet>\n            </div>\n        </div>\n        <upd-footer></upd-footer>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: FooterComponent, selector: "upd-footer" }, { kind: "component", type: HeaderComponent, selector: "upd-header", inputs: ["style", "showSearchBar"] }, { kind: "component", type: SidebarComponent, selector: "upd-sidebar" }, { kind: "component", type: PageHeaderComponent, selector: "upd-page-header", inputs: ["model"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: VerticalSidebarLayoutComponent, selector: "upd-vertical-sidebar-layout", usesInheritance: true, ngImport: i0, template: "<div class=\"page\">\n    <upd-sidebar></upd-sidebar>\n    <upd-header></upd-header>\n\n    <div class=\"page-wrapper\">\n        @if (!!_layoutService.pageHeader()) {\n            <upd-page-header [model]=\"_layoutService.pageHeader()!\"></upd-page-header>\n        }\n        <div class=\"page-body\">\n            <div class=\"container-xl\">\n                <router-outlet></router-outlet>\n            </div>\n        </div>\n        <upd-footer></upd-footer>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: FooterComponent, selector: "upd-footer" }, { kind: "component", type: HeaderComponent, selector: "upd-header" }, { kind: "component", type: SidebarComponent, selector: "upd-sidebar" }, { kind: "component", type: PageHeaderComponent, selector: "upd-page-header", inputs: ["model"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: VerticalSidebarLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-vertical-sidebar-layout', encapsulation: ViewEncapsulation.None, template: "<div class=\"page\">\n    <upd-sidebar></upd-sidebar>\n    <upd-header></upd-header>\n\n    <div class=\"page-wrapper\">\n        @if (showPageHeader) {\n            <upd-page-header [model]=\"pageHeader!\"></upd-page-header>\n        }\n        <div class=\"page-body\">\n            <div class=\"container-xl\">\n                <router-outlet></router-outlet>\n            </div>\n        </div>\n        <upd-footer></upd-footer>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'upd-vertical-sidebar-layout', encapsulation: ViewEncapsulation.None, template: "<div class=\"page\">\n    <upd-sidebar></upd-sidebar>\n    <upd-header></upd-header>\n\n    <div class=\"page-wrapper\">\n        @if (!!_layoutService.pageHeader()) {\n            <upd-page-header [model]=\"_layoutService.pageHeader()!\"></upd-page-header>\n        }\n        <div class=\"page-body\">\n            <div class=\"container-xl\">\n                <router-outlet></router-outlet>\n            </div>\n        </div>\n        <upd-footer></upd-footer>\n    </div>\n</div>\n" }]
         }] });
 
 class VerticalSidebarLayoutModule {
@@ -523,7 +575,8 @@ class VerticalSidebarLayoutModule {
             UpdIconsModule,
             UpdCoreLayoutModule,
             UpdButtonModule,
-            UpdLinkModule], exports: [VerticalSidebarLayoutComponent,
+            UpdLinkModule,
+            UpdDropdownModule], exports: [VerticalSidebarLayoutComponent,
             FooterComponent,
             HeaderComponent,
             SidebarComponent,
@@ -535,7 +588,8 @@ class VerticalSidebarLayoutModule {
             UpdIconsModule,
             UpdCoreLayoutModule,
             UpdButtonModule,
-            UpdLinkModule] }); }
+            UpdLinkModule,
+            UpdDropdownModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: VerticalSidebarLayoutModule, decorators: [{
             type: NgModule,
@@ -547,7 +601,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                         UpdIconsModule,
                         UpdCoreLayoutModule,
                         UpdButtonModule,
-                        UpdLinkModule
+                        UpdLinkModule,
+                        UpdDropdownModule
                     ],
                     declarations: [
                         VerticalSidebarLayoutComponent,
@@ -585,6 +640,7 @@ class LoginComponent {
         this.layoutConfigService = inject(UpdLayoutConfigService);
         this.config = this.layoutConfigService.config.securityLayoutConfig.loginPage;
         this.bodyClasses = ['border-top-wide', this.border, 'd-flex', 'flex-column'];
+        this.router = inject(Router);
         this.authService = inject(AuthService);
         this.layoutService = inject(LayoutService);
     }
@@ -646,17 +702,24 @@ class LoginComponent {
         }
     }
     login() {
+        // TODO: handle remember me
         this.isSigningIn.set(true);
         this.authService.login(this.formGroup().value.username, this.formGroup().value.password)
             .pipe(finalize(() => this.isSigningIn.set(false)))
             .subscribe();
     }
+    goToRecoverPasswordPage() {
+        this.router.navigate([this.config.recoverPasswordRoute]).then();
+    }
+    goToSignUpPage() {
+        this.router.navigate([this.config.signUpRoute]).then();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: LoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: LoginComponent, selector: "upd-login", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formGroup: "formGroupChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Login'\">\n    <div class=\"page page-center\">\n        @switch (config.layout) {\n            @case ('centered-box') {\n                <div class=\"container container-tight py-4\">\n                    <ng-container [ngTemplateOutlet]=\"loginCardTpl\"></ng-container>\n                </div>\n            }\n            @case ('box-with-picture') {\n                <div class=\"container container-normal py-4\">\n                    <div class=\"row align-items-center g-4\">\n                        <div class=\"col-lg\">\n                            <div class=\"container-tight\">\n                                <ng-container [ngTemplateOutlet]=\"loginCardTpl\"></ng-container>\n                            </div>\n                        </div>\n                        <div class=\"col-lg d-none d-lg-block\">\n                            <img height=\"300\" class=\"d-block mx-auto upd-right-login-image\" />\n                        </div>\n                    </div>\n                </div>\n            }\n            @case ('cover') {\n                <div class=\"row g-0 flex-fill\">\n                    <div class=\"col-12 col-lg-6 col-xl-4 border-top-wide d-flex flex-column justify-content-center\" [ngClass]=\"border\">\n                        <div class=\"container container-tight my-5 px-lg-5\">\n                            <ng-container [ngTemplateOutlet]=\"headerTpl\"></ng-container>\n\n                            <h2 class=\"h3 text-center mb-3\">\n                                {{ t('Title') }}\n                            </h2>\n\n                            <ng-container [ngTemplateOutlet]=\"loginFormTpl\"></ng-container>\n                            <ng-container [ngTemplateOutlet]=\"socialLoginTpl\"></ng-container>\n                            <ng-container [ngTemplateOutlet]=\"noAccountTpl\"></ng-container>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-lg-6 col-xl-8 d-none d-lg-block\">\n                        <div class=\"bg-cover h-100 min-vh-100 upd-right-login-cover-image\"></div>\n                    </div>\n                </div>\n            }\n        }\n    </div>\n\n    <ng-template #loginCardTpl>\n        <ng-container [ngTemplateOutlet]=\"headerTpl\"></ng-container>\n        <upd-card [removeBorder]=\"true\">\n            <div class=\"p-4\">\n                <h2 class=\"h2 text-center mb-4\">\n                    {{ t('Title') }}\n                </h2>\n                <ng-container [ngTemplateOutlet]=\"loginFormTpl\"></ng-container>\n            </div>\n            <ng-container [ngTemplateOutlet]=\"socialLoginTpl\"></ng-container>\n        </upd-card>\n        <ng-container [ngTemplateOutlet]=\"noAccountTpl\"></ng-container>\n    </ng-template>\n\n    <ng-template #loginFormTpl>\n        <upd-form [rows]=\"formRows\" [hasActionsSection]=\"false\" [(formGroup)]=\"formGroup\"></upd-form>\n        <div class=\"form-footer\">\n            <upd-button [colorStyle]=\"config.signInButtonColor\" (clicked)=\"login()\" [isLoading]=\"isSigningIn()\" customClasses=\"w-100\">\n                {{ t('SignIn') }}\n            </upd-button>\n            <div class=\"d-flex mt-2\">\n                <upd-link class=\"ms-auto\" [customClasses]=\"linkClasses\">{{ t('RecoverPassword') }}</upd-link>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-template #socialLoginTpl>\n        @if (config.socialLoginButtons.length > 0) {\n            <div class=\"hr-text\">\n                {{ t('Or') }}\n            </div>\n            <div class=\"card-body\">\n                <div class=\"row\">\n                    @for (btn of config.socialLoginButtons; track btn) {\n                        <div class=\"col\">\n                            <upd-button [model]=\"btn\"></upd-button>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </ng-template>\n\n    <ng-template #headerTpl>\n        <div class=\"text-center mb-4\">\n            <a href=\".\" class=\"navbar-brand navbar-brand-autodark\">\n                <img height=\"36\" class=\"navbar-brand-image upd-brand-logo\" />\n            </a>\n        </div>\n    </ng-template>\n\n    <ng-template #noAccountTpl>\n        <div class=\"text-center text-muted mt-3\">\n            {{ t('NoAccountYet') }}\n            <upd-link [customClasses]=\"linkClasses\">{{ t('SignUp') }}</upd-link>\n        </div>\n    </ng-template>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$3.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i2.LinkComponent, selector: "upd-link", inputs: ["href", "target", "customClasses", "isNavigation"], outputs: ["clicked"] }, { kind: "component", type: i6.CardComponent, selector: "upd-card", inputs: ["wrapperClasses", "title", "subtitle", "hoverEffect", "state", "type", "imagePosition", "bgColor", "stampIcon", "stampBackground", "statusBackground", "statusPosition", "ribbonBackground", "ribbonStyle", "ribbonIcon", "ribbonText", "rotate", "removeBorder", "useLightHeader", "showHeader", "isFooterTransparent", "footerText", "showProgressBar", "progress", "actions"] }, { kind: "component", type: i7.FormComponent, selector: "upd-form", inputs: ["rows", "layout", "title", "hasActionsSection", "isCard", "isDisabled", "isLoading", "isSaving", "formData", "formGroup"], outputs: ["initialized", "dataLoaded", "submitted", "formDataChange", "formGroupChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: LoginComponent, selector: "upd-login", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formGroup: "formGroupChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Login'\">\n    <div class=\"page page-center\">\n        @switch (config.layout) {\n            @case ('centered-box') {\n                <div class=\"container container-tight py-4\">\n                    <ng-container [ngTemplateOutlet]=\"loginCardTpl\"></ng-container>\n                </div>\n            }\n            @case ('box-with-picture') {\n                <div class=\"container container-normal py-4\">\n                    <div class=\"row align-items-center g-4\">\n                        <div class=\"col-lg\">\n                            <div class=\"container-tight\">\n                                <ng-container [ngTemplateOutlet]=\"loginCardTpl\"></ng-container>\n                            </div>\n                        </div>\n                        <div class=\"col-lg d-none d-lg-block\">\n                            <img height=\"300\" class=\"d-block mx-auto upd-right-login-image\" />\n                        </div>\n                    </div>\n                </div>\n            }\n            @case ('cover') {\n                <div class=\"row g-0 flex-fill\">\n                    <div class=\"col-12 col-lg-6 col-xl-4 border-top-wide d-flex flex-column justify-content-center\"\n                         [ngClass]=\"border\">\n                        <div class=\"container container-tight my-5 px-lg-5\">\n                            <ng-container [ngTemplateOutlet]=\"headerTpl\"></ng-container>\n\n                            <h2 class=\"h3 text-center mb-3\">\n                                {{ t('Title') }}\n                            </h2>\n\n                            <ng-container [ngTemplateOutlet]=\"loginFormTpl\"></ng-container>\n                            <ng-container [ngTemplateOutlet]=\"socialLoginTpl\"></ng-container>\n                            <ng-container [ngTemplateOutlet]=\"noAccountTpl\"></ng-container>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-lg-6 col-xl-8 d-none d-lg-block\">\n                        <div class=\"bg-cover h-100 min-vh-100 upd-right-login-cover-image\"></div>\n                    </div>\n                </div>\n            }\n        }\n    </div>\n\n    <ng-template #loginCardTpl>\n        <ng-container [ngTemplateOutlet]=\"headerTpl\"></ng-container>\n        <upd-card [removeBorder]=\"true\">\n            <div class=\"p-4\">\n                <h2 class=\"h2 text-center mb-4\">\n                    {{ t('Title') }}\n                </h2>\n                <ng-container [ngTemplateOutlet]=\"loginFormTpl\"></ng-container>\n            </div>\n            <ng-container [ngTemplateOutlet]=\"socialLoginTpl\"></ng-container>\n        </upd-card>\n        <ng-container [ngTemplateOutlet]=\"noAccountTpl\"></ng-container>\n    </ng-template>\n\n    <ng-template #loginFormTpl>\n        <upd-form [rows]=\"formRows\" [hasActionsSection]=\"false\" [(formGroup)]=\"formGroup\"></upd-form>\n        <div class=\"form-footer\">\n            <upd-button [colorStyle]=\"config.signInButtonColor\" (clicked)=\"login()\" [isLoading]=\"isSigningIn()\"\n                        customClasses=\"w-100\">\n                {{ t('SignIn') }}\n            </upd-button>\n            @if (!!config.recoverPasswordRoute) {\n                <div class=\"d-flex mt-2\">\n                    <upd-link class=\"ms-auto\" [customClasses]=\"linkClasses\" (clicked)=\"goToRecoverPasswordPage()\">\n                        {{ t('RecoverPassword') }}\n                    </upd-link>\n                </div>\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #socialLoginTpl>\n        @if (config.socialLoginButtons.length > 0) {\n            <div class=\"hr-text\">\n                {{ t('Or') }}\n            </div>\n            <div class=\"card-body\">\n                <div class=\"row\">\n                    @for (btn of config.socialLoginButtons; track btn) {\n                        <div class=\"col\">\n                            <upd-button [model]=\"btn\"></upd-button>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </ng-template>\n\n    <ng-template #headerTpl>\n        <div class=\"text-center mb-4\">\n            <a href=\".\" class=\"navbar-brand navbar-brand-autodark\">\n                <img height=\"36\" class=\"navbar-brand-image upd-brand-logo\" />\n            </a>\n        </div>\n    </ng-template>\n\n    <ng-template #noAccountTpl>\n        @if (!!config.signUpRoute) {\n            <div class=\"text-center text-muted mt-3\">\n                {{ t('NoAccountYet') }}\n                <upd-link [customClasses]=\"linkClasses\" (clicked)=\"goToSignUpPage()\">{{ t('SignUp') }}</upd-link>\n            </div>\n        }\n    </ng-template>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$3.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i2.LinkComponent, selector: "upd-link", inputs: ["href", "target", "customClasses", "isNavigation"], outputs: ["clicked"] }, { kind: "component", type: i6.CardComponent, selector: "upd-card", inputs: ["wrapperClasses", "title", "subtitle", "hoverEffect", "state", "type", "imagePosition", "bgColor", "stampIcon", "stampBackground", "statusBackground", "statusPosition", "ribbonBackground", "ribbonStyle", "ribbonIcon", "ribbonText", "rotate", "removeBorder", "useLightHeader", "showHeader", "isFooterTransparent", "footerText", "showProgressBar", "progress", "actions"] }, { kind: "component", type: i7.FormComponent, selector: "upd-form", inputs: ["rows", "layout", "title", "hasActionsSection", "isCard", "isDisabled", "isLoading", "isSaving", "formData", "formGroup"], outputs: ["initialized", "dataLoaded", "submitted", "formDataChange", "formGroupChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-login', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Login'\">\n    <div class=\"page page-center\">\n        @switch (config.layout) {\n            @case ('centered-box') {\n                <div class=\"container container-tight py-4\">\n                    <ng-container [ngTemplateOutlet]=\"loginCardTpl\"></ng-container>\n                </div>\n            }\n            @case ('box-with-picture') {\n                <div class=\"container container-normal py-4\">\n                    <div class=\"row align-items-center g-4\">\n                        <div class=\"col-lg\">\n                            <div class=\"container-tight\">\n                                <ng-container [ngTemplateOutlet]=\"loginCardTpl\"></ng-container>\n                            </div>\n                        </div>\n                        <div class=\"col-lg d-none d-lg-block\">\n                            <img height=\"300\" class=\"d-block mx-auto upd-right-login-image\" />\n                        </div>\n                    </div>\n                </div>\n            }\n            @case ('cover') {\n                <div class=\"row g-0 flex-fill\">\n                    <div class=\"col-12 col-lg-6 col-xl-4 border-top-wide d-flex flex-column justify-content-center\" [ngClass]=\"border\">\n                        <div class=\"container container-tight my-5 px-lg-5\">\n                            <ng-container [ngTemplateOutlet]=\"headerTpl\"></ng-container>\n\n                            <h2 class=\"h3 text-center mb-3\">\n                                {{ t('Title') }}\n                            </h2>\n\n                            <ng-container [ngTemplateOutlet]=\"loginFormTpl\"></ng-container>\n                            <ng-container [ngTemplateOutlet]=\"socialLoginTpl\"></ng-container>\n                            <ng-container [ngTemplateOutlet]=\"noAccountTpl\"></ng-container>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-lg-6 col-xl-8 d-none d-lg-block\">\n                        <div class=\"bg-cover h-100 min-vh-100 upd-right-login-cover-image\"></div>\n                    </div>\n                </div>\n            }\n        }\n    </div>\n\n    <ng-template #loginCardTpl>\n        <ng-container [ngTemplateOutlet]=\"headerTpl\"></ng-container>\n        <upd-card [removeBorder]=\"true\">\n            <div class=\"p-4\">\n                <h2 class=\"h2 text-center mb-4\">\n                    {{ t('Title') }}\n                </h2>\n                <ng-container [ngTemplateOutlet]=\"loginFormTpl\"></ng-container>\n            </div>\n            <ng-container [ngTemplateOutlet]=\"socialLoginTpl\"></ng-container>\n        </upd-card>\n        <ng-container [ngTemplateOutlet]=\"noAccountTpl\"></ng-container>\n    </ng-template>\n\n    <ng-template #loginFormTpl>\n        <upd-form [rows]=\"formRows\" [hasActionsSection]=\"false\" [(formGroup)]=\"formGroup\"></upd-form>\n        <div class=\"form-footer\">\n            <upd-button [colorStyle]=\"config.signInButtonColor\" (clicked)=\"login()\" [isLoading]=\"isSigningIn()\" customClasses=\"w-100\">\n                {{ t('SignIn') }}\n            </upd-button>\n            <div class=\"d-flex mt-2\">\n                <upd-link class=\"ms-auto\" [customClasses]=\"linkClasses\">{{ t('RecoverPassword') }}</upd-link>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-template #socialLoginTpl>\n        @if (config.socialLoginButtons.length > 0) {\n            <div class=\"hr-text\">\n                {{ t('Or') }}\n            </div>\n            <div class=\"card-body\">\n                <div class=\"row\">\n                    @for (btn of config.socialLoginButtons; track btn) {\n                        <div class=\"col\">\n                            <upd-button [model]=\"btn\"></upd-button>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </ng-template>\n\n    <ng-template #headerTpl>\n        <div class=\"text-center mb-4\">\n            <a href=\".\" class=\"navbar-brand navbar-brand-autodark\">\n                <img height=\"36\" class=\"navbar-brand-image upd-brand-logo\" />\n            </a>\n        </div>\n    </ng-template>\n\n    <ng-template #noAccountTpl>\n        <div class=\"text-center text-muted mt-3\">\n            {{ t('NoAccountYet') }}\n            <upd-link [customClasses]=\"linkClasses\">{{ t('SignUp') }}</upd-link>\n        </div>\n    </ng-template>\n</ng-container>\n" }]
+            args: [{ selector: 'upd-login', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Login'\">\n    <div class=\"page page-center\">\n        @switch (config.layout) {\n            @case ('centered-box') {\n                <div class=\"container container-tight py-4\">\n                    <ng-container [ngTemplateOutlet]=\"loginCardTpl\"></ng-container>\n                </div>\n            }\n            @case ('box-with-picture') {\n                <div class=\"container container-normal py-4\">\n                    <div class=\"row align-items-center g-4\">\n                        <div class=\"col-lg\">\n                            <div class=\"container-tight\">\n                                <ng-container [ngTemplateOutlet]=\"loginCardTpl\"></ng-container>\n                            </div>\n                        </div>\n                        <div class=\"col-lg d-none d-lg-block\">\n                            <img height=\"300\" class=\"d-block mx-auto upd-right-login-image\" />\n                        </div>\n                    </div>\n                </div>\n            }\n            @case ('cover') {\n                <div class=\"row g-0 flex-fill\">\n                    <div class=\"col-12 col-lg-6 col-xl-4 border-top-wide d-flex flex-column justify-content-center\"\n                         [ngClass]=\"border\">\n                        <div class=\"container container-tight my-5 px-lg-5\">\n                            <ng-container [ngTemplateOutlet]=\"headerTpl\"></ng-container>\n\n                            <h2 class=\"h3 text-center mb-3\">\n                                {{ t('Title') }}\n                            </h2>\n\n                            <ng-container [ngTemplateOutlet]=\"loginFormTpl\"></ng-container>\n                            <ng-container [ngTemplateOutlet]=\"socialLoginTpl\"></ng-container>\n                            <ng-container [ngTemplateOutlet]=\"noAccountTpl\"></ng-container>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-lg-6 col-xl-8 d-none d-lg-block\">\n                        <div class=\"bg-cover h-100 min-vh-100 upd-right-login-cover-image\"></div>\n                    </div>\n                </div>\n            }\n        }\n    </div>\n\n    <ng-template #loginCardTpl>\n        <ng-container [ngTemplateOutlet]=\"headerTpl\"></ng-container>\n        <upd-card [removeBorder]=\"true\">\n            <div class=\"p-4\">\n                <h2 class=\"h2 text-center mb-4\">\n                    {{ t('Title') }}\n                </h2>\n                <ng-container [ngTemplateOutlet]=\"loginFormTpl\"></ng-container>\n            </div>\n            <ng-container [ngTemplateOutlet]=\"socialLoginTpl\"></ng-container>\n        </upd-card>\n        <ng-container [ngTemplateOutlet]=\"noAccountTpl\"></ng-container>\n    </ng-template>\n\n    <ng-template #loginFormTpl>\n        <upd-form [rows]=\"formRows\" [hasActionsSection]=\"false\" [(formGroup)]=\"formGroup\"></upd-form>\n        <div class=\"form-footer\">\n            <upd-button [colorStyle]=\"config.signInButtonColor\" (clicked)=\"login()\" [isLoading]=\"isSigningIn()\"\n                        customClasses=\"w-100\">\n                {{ t('SignIn') }}\n            </upd-button>\n            @if (!!config.recoverPasswordRoute) {\n                <div class=\"d-flex mt-2\">\n                    <upd-link class=\"ms-auto\" [customClasses]=\"linkClasses\" (clicked)=\"goToRecoverPasswordPage()\">\n                        {{ t('RecoverPassword') }}\n                    </upd-link>\n                </div>\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #socialLoginTpl>\n        @if (config.socialLoginButtons.length > 0) {\n            <div class=\"hr-text\">\n                {{ t('Or') }}\n            </div>\n            <div class=\"card-body\">\n                <div class=\"row\">\n                    @for (btn of config.socialLoginButtons; track btn) {\n                        <div class=\"col\">\n                            <upd-button [model]=\"btn\"></upd-button>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </ng-template>\n\n    <ng-template #headerTpl>\n        <div class=\"text-center mb-4\">\n            <a href=\".\" class=\"navbar-brand navbar-brand-autodark\">\n                <img height=\"36\" class=\"navbar-brand-image upd-brand-logo\" />\n            </a>\n        </div>\n    </ng-template>\n\n    <ng-template #noAccountTpl>\n        @if (!!config.signUpRoute) {\n            <div class=\"text-center text-muted mt-3\">\n                {{ t('NoAccountYet') }}\n                <upd-link [customClasses]=\"linkClasses\" (clicked)=\"goToSignUpPage()\">{{ t('SignUp') }}</upd-link>\n            </div>\n        }\n    </ng-template>\n</ng-container>\n" }]
         }] });
 
 class OauthCallbackComponent {
@@ -758,18 +821,21 @@ class UpdLayoutModule {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: UpdLayoutModule, imports: [CommonModule,
-            UpdCoreLayoutModule] }); }
+            UpdCoreLayoutModule,
+            UpdNotificationsModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdLayoutModule, providers: [
             UpdLayoutConfigService
         ], imports: [CommonModule,
-            UpdCoreLayoutModule] }); }
+            UpdCoreLayoutModule,
+            UpdNotificationsModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
-                        UpdCoreLayoutModule
+                        UpdCoreLayoutModule,
+                        UpdNotificationsModule
                     ],
                     providers: [
                         UpdLayoutConfigService