@updevs/components 1.0.0-alpha.99 → 1.0.0-beta.1

package/fesm2022/updevs-components-layout.mjs

@@ -40,11 +40,12 @@ class BasePageComponent extends BaseComponent {
         super.ngOnDestroy();
         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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BasePageComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: BasePageComponent, isStandalone: false, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BasePageComponent, decorators: [{
-            type: Directive
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BasePageComponent, decorators: [{
+            type: Directive,
+            args: [{ standalone: false }]
         }] });
 
 class FooterComponent extends BaseComponent {
@@ -83,25 +84,25 @@ class FooterComponent extends BaseComponent {
         const transparentCls = this.isTransparent ? ' footer-transparent' : '';
         this.wrapperClasses = `${this.baseWrapperClasses}${stickyBottomCls}${transparentCls}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: FooterComponent, selector: "upd-footer", host: { properties: { "class": "this.wrapperClasses" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"container-xl\">\n    <div class=\"row text-center align-items-center flex-row-reverse\">\n        <div class=\"col-lg-auto ms-lg-auto\">\n            @if (!!layoutService.rightFooter()) {\n                <ng-container [ngTemplateOutlet]=\"layoutService.rightFooter()!\"></ng-container>\n            }\n\n            @if (links.length > 0) {\n                <ul class=\"list-inline list-inline-dots mb-0\">\n                    @for (link of links; track link) {\n                        <li class=\"list-inline-item\">\n                            <a href=\"{{link.url}}\" target=\"{{link.target}}\" class=\"link-secondary\">\n                                <span [innerHTML]=\"link.text\"></span>\n                            </a>\n                        </li>\n                    }\n                </ul>\n            }\n        </div>\n        <div class=\"col-12 col-lg-auto mt-3 mt-lg-0\">\n            <ul class=\"list-inline list-inline-dots mb-0\">\n                <li class=\"list-inline-item\">\n                    <ng-container *transloco=\"let t; prefix: 'UpDevs.Footer'\">\n                        {{ t('Prefix') }} {{ t('Symbol') }} {{ currentYear }} {{ t('Suffix') }}\n                    </ng-container>\n                </li>\n                @if (!!version) {\n                    <li class=\"list-inline-item\">\n                        {{ version }}\n                    </li>\n                }\n            </ul>\n\n            @if (!!layoutService.leftFooter()) {\n                <ng-container [ngTemplateOutlet]=\"layoutService.leftFooter()!\"></ng-container>\n            }\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FooterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: FooterComponent, isStandalone: false, selector: "upd-footer", host: { properties: { "class": "this.wrapperClasses" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"container-xl\">\n    <div class=\"row text-center align-items-center flex-row-reverse\">\n        <div class=\"col-lg-auto ms-lg-auto\">\n            @if (!!layoutService.rightFooter()) {\n                <ng-container [ngTemplateOutlet]=\"layoutService.rightFooter()!\"></ng-container>\n            }\n\n            @if (links.length > 0) {\n                <ul class=\"list-inline list-inline-dots mb-0\">\n                    @for (link of links; track link) {\n                        <li class=\"list-inline-item\">\n                            <a href=\"{{link.url}}\" target=\"{{link.target}}\" class=\"link-secondary\">\n                                <span [innerHTML]=\"link.text\"></span>\n                            </a>\n                        </li>\n                    }\n                </ul>\n            }\n        </div>\n        <div class=\"col-12 col-lg-auto mt-3 mt-lg-0\">\n            <ul class=\"list-inline list-inline-dots mb-0\">\n                <li class=\"list-inline-item\">\n                    <ng-container *transloco=\"let t; prefix: 'UpDevs.Footer'\">\n                        {{ t('Prefix') }} {{ t('Symbol') }} {{ currentYear }} {{ t('Suffix') }}\n                    </ng-container>\n                </li>\n                @if (!!version) {\n                    <li class=\"list-inline-item\">\n                        {{ version }}\n                    </li>\n                }\n            </ul>\n\n            @if (!!layoutService.leftFooter()) {\n                <ng-container [ngTemplateOutlet]=\"layoutService.leftFooter()!\"></ng-container>\n            }\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-footer', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-xl\">\n    <div class=\"row text-center align-items-center flex-row-reverse\">\n        <div class=\"col-lg-auto ms-lg-auto\">\n            @if (!!layoutService.rightFooter()) {\n                <ng-container [ngTemplateOutlet]=\"layoutService.rightFooter()!\"></ng-container>\n            }\n\n            @if (links.length > 0) {\n                <ul class=\"list-inline list-inline-dots mb-0\">\n                    @for (link of links; track link) {\n                        <li class=\"list-inline-item\">\n                            <a href=\"{{link.url}}\" target=\"{{link.target}}\" class=\"link-secondary\">\n                                <span [innerHTML]=\"link.text\"></span>\n                            </a>\n                        </li>\n                    }\n                </ul>\n            }\n        </div>\n        <div class=\"col-12 col-lg-auto mt-3 mt-lg-0\">\n            <ul class=\"list-inline list-inline-dots mb-0\">\n                <li class=\"list-inline-item\">\n                    <ng-container *transloco=\"let t; prefix: 'UpDevs.Footer'\">\n                        {{ t('Prefix') }} {{ t('Symbol') }} {{ currentYear }} {{ t('Suffix') }}\n                    </ng-container>\n                </li>\n                @if (!!version) {\n                    <li class=\"list-inline-item\">\n                        {{ version }}\n                    </li>\n                }\n            </ul>\n\n            @if (!!layoutService.leftFooter()) {\n                <ng-container [ngTemplateOutlet]=\"layoutService.leftFooter()!\"></ng-container>\n            }\n        </div>\n    </div>\n</div>\n" }]
+            args: [{ standalone: false, selector: 'upd-footer', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-xl\">\n    <div class=\"row text-center align-items-center flex-row-reverse\">\n        <div class=\"col-lg-auto ms-lg-auto\">\n            @if (!!layoutService.rightFooter()) {\n                <ng-container [ngTemplateOutlet]=\"layoutService.rightFooter()!\"></ng-container>\n            }\n\n            @if (links.length > 0) {\n                <ul class=\"list-inline list-inline-dots mb-0\">\n                    @for (link of links; track link) {\n                        <li class=\"list-inline-item\">\n                            <a href=\"{{link.url}}\" target=\"{{link.target}}\" class=\"link-secondary\">\n                                <span [innerHTML]=\"link.text\"></span>\n                            </a>\n                        </li>\n                    }\n                </ul>\n            }\n        </div>\n        <div class=\"col-12 col-lg-auto mt-3 mt-lg-0\">\n            <ul class=\"list-inline list-inline-dots mb-0\">\n                <li class=\"list-inline-item\">\n                    <ng-container *transloco=\"let t; prefix: 'UpDevs.Footer'\">\n                        {{ t('Prefix') }} {{ t('Symbol') }} {{ currentYear }} {{ t('Suffix') }}\n                    </ng-container>\n                </li>\n                @if (!!version) {\n                    <li class=\"list-inline-item\">\n                        {{ version }}\n                    </li>\n                }\n            </ul>\n\n            @if (!!layoutService.leftFooter()) {\n                <ng-container [ngTemplateOutlet]=\"layoutService.leftFooter()!\"></ng-container>\n            }\n        </div>\n    </div>\n</div>\n" }]
         }], propDecorators: { wrapperClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
 class FooterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: FooterModule, declarations: [FooterComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: FooterModule, declarations: [FooterComponent], imports: [CommonModule,
             TranslocoModule], exports: [FooterComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FooterModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FooterModule, imports: [CommonModule,
             TranslocoModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FooterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FooterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -120,20 +121,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
 class HeaderComponent extends BaseComponent {
     constructor() {
         super(...arguments);
-        this.languageSwitcherRef = viewChild('languageSwitcherBtn', { read: ElementRef });
-        this.notificationsRef = viewChild('notificationsBtn', { read: ElementRef });
-        this.loggedUserRef = viewChild('loggedUserBtn', { read: ElementRef });
+        this.languageSwitcherRef = viewChild('languageSwitcherBtn', { ...(ngDevMode ? { debugName: "languageSwitcherRef" } : {}), read: ElementRef });
+        this.notificationsRef = viewChild('notificationsBtn', { ...(ngDevMode ? { debugName: "notificationsRef" } : {}), read: ElementRef });
+        this.loggedUserRef = viewChild('loggedUserBtn', { ...(ngDevMode ? { debugName: "loggedUserRef" } : {}), read: ElementRef });
         this.isLanguageSwitcherDropdownOpen = false;
         this.isNotificationsDropdownOpen = false;
         this.isLoggedUserDropdownOpen = false;
-        this.style = input('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.userInfo = computed(() => this.securityStorage.getUserInfo());
+        this.style = input('light', ...(ngDevMode ? [{ debugName: "style" }] : []));
+        this.nextThemeIcon = computed(() => this.currentPreferences()?.isDarkTheme ? 'sun' : 'moon-stars', ...(ngDevMode ? [{ debugName: "nextThemeIcon" }] : []));
+        this.currentNotificationsIcon = computed(() => this.hasNewNotifications() ? 'bell-ringing' : 'bell', ...(ngDevMode ? [{ debugName: "currentNotificationsIcon" }] : []));
+        this.hasNewNotifications = computed(() => this.currentNotifications().some(n => !n.dateRead), ...(ngDevMode ? [{ debugName: "hasNewNotifications" }] : []));
+        this.userInfo = computed(() => this.securityStorage.getUserInfo(), ...(ngDevMode ? [{ debugName: "userInfo" }] : []));
         this.textService = inject(TextService);
-        this.isSidebarMobileOpen = signal(false);
-        this.shouldBlinkIfNewNotifications = computed(() => !!this.coreLayoutConfigService.config.shouldBlinkIfNewNotifications);
+        this.isSidebarMobileOpen = signal(false, ...(ngDevMode ? [{ debugName: "isSidebarMobileOpen" }] : []));
+        this.shouldBlinkIfNewNotifications = computed(() => !!this.coreLayoutConfigService.config.shouldBlinkIfNewNotifications, ...(ngDevMode ? [{ debugName: "shouldBlinkIfNewNotifications" }] : []));
         this.languagesOptions = computed(() => {
             const allLanguagesOptions = [];
             const availableLanguages = (this.coreLayoutConfigService.config.availableLanguages || {});
@@ -146,7 +147,7 @@ class HeaderComponent extends BaseComponent {
                 });
             });
             return allLanguagesOptions;
-        });
+        }, ...(ngDevMode ? [{ debugName: "languagesOptions" }] : []));
         this.loggedUserOptions = computed(() => {
             const userActions = [];
             this.coreLayoutConfigService.config.loggedUserMenuActions.forEach(act => userActions.push({
@@ -156,11 +157,11 @@ class HeaderComponent extends BaseComponent {
                 icon: act.iconModel?.()
             }));
             return userActions;
-        });
-        this.userIdentification = computed(() => !!this.userInfo() ? this.coreLayoutConfigService.config.getUserName(this.userInfo()) : '');
+        }, ...(ngDevMode ? [{ debugName: "loggedUserOptions" }] : []));
+        this.userIdentification = computed(() => !!this.userInfo() ? this.coreLayoutConfigService.config.getUserName(this.userInfo()) : '', ...(ngDevMode ? [{ debugName: "userIdentification" }] : []));
         this.userDescription = computed(() => !!this.coreLayoutConfigService.config.getUserDescription
             ? this.coreLayoutConfigService.config.getUserDescription(this.userInfo())
-            : '');
+            : '', ...(ngDevMode ? [{ debugName: "userDescription" }] : []));
         this.latestNotifications = computed(() => {
             const unreadNotifications = this.currentNotifications()
                 .filter(n => !n.dateRead)
@@ -174,13 +175,13 @@ class HeaderComponent extends BaseComponent {
                 ...unreadNotifications,
                 ...readNotifications
             ].slice(0, this.coreLayoutConfigService.config.numberOfLastNotificationsDisplayed);
-        });
+        }, ...(ngDevMode ? [{ debugName: "latestNotifications" }] : []));
         this.userInitials = computed(() => {
             const firstChar = this.userIdentification().charAt(0);
             const lastSpaceIndex = this.userIdentification().lastIndexOf(' ');
             const firstAfterLastSpace = lastSpaceIndex !== -1 ? this.userIdentification().charAt(lastSpaceIndex + 1) : '';
             return `${firstChar}${firstAfterLastSpace}`;
-        });
+        }, ...(ngDevMode ? [{ debugName: "userInitials" }] : []));
         this.securityStorage = inject(SecurityStorage);
         this.coreLayoutConfigService = inject(UpdCoreLayoutConfigService);
         this.layoutService = inject(LayoutService);
@@ -189,10 +190,10 @@ class HeaderComponent extends BaseComponent {
         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()}`);
+        this.currentLanguageKey = signal('', ...(ngDevMode ? [{ debugName: "currentLanguageKey" }] : []));
+        this.wrapperClasses = computed(() => `navbar navbar-expand-md d-none d-lg-flex d-print-none navbar-${this.style()}`, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
         // eslint-disable-next-line @typescript-eslint/member-ordering
-        this.config = computed(() => this.layoutService.mainHeaderConfig());
+        this.config = computed(() => this.layoutService.mainHeaderConfig(), ...(ngDevMode ? [{ debugName: "config" }] : []));
     }
     get classes() {
         return this.wrapperClasses();
@@ -235,31 +236,31 @@ class HeaderComponent extends BaseComponent {
     toggleSidebarOnMobile() {
         this.isSidebarMobileOpen.set(!this.isSidebarMobileOpen());
     }
-    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: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, 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\" (click)=\"toggleSidebarOnMobile()\" [attr.aria-expanded]=\"isSidebarMobileOpen()\">\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 && !!userInfo()) {\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                    } @else {\n                        <span class=\"avatar avatar-sm\">{{ userInitials() }}</span>\n                    }\n\n                    <div class=\"d-none d-xl-block px-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 && !!userInfo()) {\n        <div class=\"collapse navbar-collapse\" [class.show]=\"isSidebarMobileOpen()\">\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    } @else {\n        <div></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.DropdownComponent, selector: "upd-dropdown", inputs: ["items", "header", "isOpen", "shouldCloseOnOutsideClick", "arrowType", "wrapperClasses", "elementsExcludedFromOutsideClick", "minHeight", "maxHeight", "minWidth", "maxWidth", "dropdownReference", "dropdownReferencePosition", "textOverflowStrategy"], outputs: ["isOpenChange", "selectedItem", "checkboxChanged"] }, { kind: "component", type: i3.LinkComponent, selector: "upd-link", inputs: ["href", "target", "customClasses", "isNavigation"], outputs: ["clicked"] }, { kind: "pipe", type: i1$1.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: HeaderComponent, isStandalone: false, selector: "upd-header", inputs: { style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, 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\" (click)=\"toggleSidebarOnMobile()\" [attr.aria-expanded]=\"isSidebarMobileOpen()\">\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 && !!userInfo()) {\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                    } @else {\n                        <span class=\"avatar avatar-sm\">{{ userInitials() }}</span>\n                    }\n\n                    <div class=\"d-none d-xl-block px-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 && !!userInfo()) {\n        <div class=\"collapse navbar-collapse\" [class.show]=\"isSidebarMobileOpen()\">\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    } @else {\n        <div></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.DropdownComponent, selector: "upd-dropdown", inputs: ["items", "header", "isOpen", "shouldCloseOnOutsideClick", "arrowType", "wrapperClasses", "elementsExcludedFromOutsideClick", "minHeight", "maxHeight", "minWidth", "maxWidth", "dropdownReference", "dropdownReferencePosition", "textOverflowStrategy"], outputs: ["isOpenChange", "selectedItem", "checkboxChanged"] }, { kind: "component", type: i3.LinkComponent, selector: "upd-link", inputs: ["href", "target", "customClasses", "isNavigation"], outputs: ["clicked"] }, { 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", 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\" (click)=\"toggleSidebarOnMobile()\" [attr.aria-expanded]=\"isSidebarMobileOpen()\">\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 && !!userInfo()) {\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                    } @else {\n                        <span class=\"avatar avatar-sm\">{{ userInitials() }}</span>\n                    }\n\n                    <div class=\"d-none d-xl-block px-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 && !!userInfo()) {\n        <div class=\"collapse navbar-collapse\" [class.show]=\"isSidebarMobileOpen()\">\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    } @else {\n        <div></div>\n    }\n</div>\n" }]
+            args: [{ standalone: false, selector: 'upd-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-xl\">\n    <button class=\"navbar-toggler\" type=\"button\" (click)=\"toggleSidebarOnMobile()\" [attr.aria-expanded]=\"isSidebarMobileOpen()\">\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 && !!userInfo()) {\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                    } @else {\n                        <span class=\"avatar avatar-sm\">{{ userInitials() }}</span>\n                    }\n\n                    <div class=\"d-none d-xl-block px-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 && !!userInfo()) {\n        <div class=\"collapse navbar-collapse\" [class.show]=\"isSidebarMobileOpen()\">\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    } @else {\n        <div></div>\n    }\n</div>\n" }]
         }], propDecorators: { classes: [{
                 type: HostBinding,
                 args: ['class']
-            }] } });
+            }], languageSwitcherRef: [{ type: i0.ViewChild, args: ['languageSwitcherBtn', { ...{ read: ElementRef }, isSignal: true }] }], notificationsRef: [{ type: i0.ViewChild, args: ['notificationsBtn', { ...{ read: ElementRef }, isSignal: true }] }], loggedUserRef: [{ type: i0.ViewChild, args: ['loggedUserBtn', { ...{ read: ElementRef }, isSignal: true }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }] } });
 
 class HeaderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: HeaderModule, declarations: [HeaderComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: HeaderModule, declarations: [HeaderComponent], imports: [CommonModule,
             TranslocoModule,
             UpdIconsModule,
             UpdDropdownModule,
             UpdLinkModule], exports: [HeaderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HeaderModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HeaderModule, imports: [CommonModule,
             TranslocoModule,
             UpdIconsModule,
             UpdDropdownModule,
             UpdLinkModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HeaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HeaderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -351,10 +352,10 @@ class UpdLayoutConfigService {
     constructor(layoutConfig) {
         this.config = new UpdLayoutConfigModel(layoutConfig);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdLayoutConfigService, deps: [{ token: LayoutConstants.defaultOptionsInjectionToken }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdLayoutConfigService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdLayoutConfigService, deps: [{ token: LayoutConstants.defaultOptionsInjectionToken }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdLayoutConfigService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdLayoutConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdLayoutConfigService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -381,32 +382,33 @@ class BaseLayout extends BaseComponent {
             this._layoutService.removeBodyClasses('layout-fluid');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BaseLayout, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: BaseLayout, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BaseLayout, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: BaseLayout, isStandalone: false, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BaseLayout, decorators: [{
-            type: Directive
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BaseLayout, decorators: [{
+            type: Directive,
+            args: [{ standalone: false }]
         }] });
 
 class BlankLayoutComponent extends BaseLayout {
     constructor() {
         super(...arguments);
-        this.config = computed(() => this._layoutService.mainHeaderConfig());
+        this.config = computed(() => this._layoutService.mainHeaderConfig(), ...(ngDevMode ? [{ debugName: "config" }] : []));
     }
     ngOnInit() {
         // Overriding layout fluid from parent.
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BlankLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: BlankLayoutComponent, selector: "upd-blank-layout", usesInheritance: true, ngImport: i0, template: "<div class=\"page\" [class.page-center]=\"_layoutService.isPageCentered()\">\n    @if (!config().shouldHideTopBarIfBlankLayout) {\n        <upd-header [style]=\"'transparent'\"></upd-header>\n    }\n\n    <router-outlet></router-outlet>\n\n    @if (!config().shouldHideFooterIfBlankLayout) {\n        <upd-footer></upd-footer>\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BlankLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: BlankLayoutComponent, isStandalone: false, selector: "upd-blank-layout", usesInheritance: true, ngImport: i0, template: "<div class=\"page\" [class.page-center]=\"_layoutService.isPageCentered()\">\n    @if (!config().shouldHideTopBarIfBlankLayout) {\n        <upd-header [style]=\"'transparent'\"></upd-header>\n    }\n\n    <router-outlet></router-outlet>\n\n    @if (!config().shouldHideFooterIfBlankLayout) {\n        <upd-footer></upd-footer>\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: FooterComponent, selector: "upd-footer" }, { kind: "component", type: HeaderComponent, selector: "upd-header", inputs: ["style"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BlankLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BlankLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-blank-layout', template: "<div class=\"page\" [class.page-center]=\"_layoutService.isPageCentered()\">\n    @if (!config().shouldHideTopBarIfBlankLayout) {\n        <upd-header [style]=\"'transparent'\"></upd-header>\n    }\n\n    <router-outlet></router-outlet>\n\n    @if (!config().shouldHideFooterIfBlankLayout) {\n        <upd-footer></upd-footer>\n    }\n</div>\n" }]
+            args: [{ standalone: false, selector: 'upd-blank-layout', template: "<div class=\"page\" [class.page-center]=\"_layoutService.isPageCentered()\">\n    @if (!config().shouldHideTopBarIfBlankLayout) {\n        <upd-header [style]=\"'transparent'\"></upd-header>\n    }\n\n    <router-outlet></router-outlet>\n\n    @if (!config().shouldHideFooterIfBlankLayout) {\n        <upd-footer></upd-footer>\n    }\n</div>\n" }]
         }] });
 
 class BlankLayoutModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BlankLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: BlankLayoutModule, declarations: [BlankLayoutComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BlankLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: BlankLayoutModule, declarations: [BlankLayoutComponent], imports: [CommonModule,
             RouterOutlet,
             TranslocoPipe,
             UpdDropdownModule,
@@ -414,14 +416,14 @@ class BlankLayoutModule {
             UpdLinkModule,
             FooterModule,
             HeaderModule], exports: [BlankLayoutComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BlankLayoutModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BlankLayoutModule, imports: [CommonModule,
             UpdDropdownModule,
             UpdIconsModule,
             UpdLinkModule,
             FooterModule,
             HeaderModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BlankLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BlankLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -520,15 +522,15 @@ class SidebarComponent extends BaseComponent {
         this.theme = 'dark';
         this.menuItems = [];
         this.isLoggedUserDropdownOpen = false;
-        this.loggedUserRef = viewChild('loggedUserBtn', { read: ElementRef });
+        this.loggedUserRef = viewChild('loggedUserBtn', { ...(ngDevMode ? { debugName: "loggedUserRef" } : {}), read: ElementRef });
         this.textService = inject(TextService);
-        this.isSidebarMobileOpen = signal(false);
-        this.config = computed(() => this.layoutService.mainHeaderConfig());
-        this.userInfo = computed(() => this.securityStorage.getUserInfo());
-        this.userIdentification = computed(() => !!this.userInfo() ? this.coreLayoutConfigService.config.getUserName(this.userInfo()) : '');
+        this.isSidebarMobileOpen = signal(false, ...(ngDevMode ? [{ debugName: "isSidebarMobileOpen" }] : []));
+        this.config = computed(() => this.layoutService.mainHeaderConfig(), ...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.userInfo = computed(() => this.securityStorage.getUserInfo(), ...(ngDevMode ? [{ debugName: "userInfo" }] : []));
+        this.userIdentification = computed(() => !!this.userInfo() ? this.coreLayoutConfigService.config.getUserName(this.userInfo()) : '', ...(ngDevMode ? [{ debugName: "userIdentification" }] : []));
         this.userDescription = computed(() => !!this.coreLayoutConfigService.config.getUserDescription
             ? this.coreLayoutConfigService.config.getUserDescription(this.userInfo())
-            : '');
+            : '', ...(ngDevMode ? [{ debugName: "userDescription" }] : []));
         this.loggedUserOptions = computed(() => {
             const userActions = [];
             this.coreLayoutConfigService.config.loggedUserMenuActions.forEach(act => userActions.push({
@@ -538,13 +540,13 @@ class SidebarComponent extends BaseComponent {
                 icon: act.iconModel?.()
             }));
             return userActions;
-        });
+        }, ...(ngDevMode ? [{ debugName: "loggedUserOptions" }] : []));
         this.userInitials = computed(() => {
             const firstChar = this.userIdentification().charAt(0);
             const lastSpaceIndex = this.userIdentification().lastIndexOf(' ');
             const firstAfterLastSpace = lastSpaceIndex !== -1 ? this.userIdentification().charAt(lastSpaceIndex + 1) : '';
             return `${firstChar}${firstAfterLastSpace}`;
-        });
+        }, ...(ngDevMode ? [{ debugName: "userInitials" }] : []));
         this.currentRoute = '';
         this.menuItemsBackup = [];
         this.router = inject(Router);
@@ -721,39 +723,39 @@ class SidebarComponent extends BaseComponent {
         }
         return undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SidebarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SidebarComponent, selector: "upd-sidebar", host: { properties: { "class": "this.wrapperClasses", "attr.data-bs-theme": "this.theme" } }, viewQueries: [{ propertyName: "loggedUserRef", first: true, predicate: ["loggedUserBtn"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid\">\n    <button class=\"navbar-toggler\" type=\"button\" (click)=\"toggleSidebarOnMobile()\" [attr.aria-expanded]=\"isSidebarMobileOpen()\">\n        <span class=\"navbar-toggler-icon\"></span>\n    </button>\n    <h1 class=\"navbar-brand navbar-brand-autodark\">\n        <a href=\".\">\n            <img width=\"110\" height=\"32\" class=\"navbar-brand-image upd-brand-logo\" />\n        </a>\n    </h1>\n\n    @if (!!config().showUserMenu && !!userInfo()) {\n        <div class=\"navbar-nav flex-row d-lg-none\">\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                    } @else {\n                        <span class=\"avatar avatar-sm\">{{ userInitials() }}</span>\n                    }\n\n                    <div class=\"d-none d-xl-block px-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        </div>\n    }\n\n    <div class=\"collapse navbar-collapse\" [class.show]=\"isSidebarMobileOpen()\">\n        <ul class=\"navbar-nav pt-lg-3\">\n            @for (item of menuItems; track item.id) {\n                <li class=\"nav-item\" [class.dropdown]=\"hasChildren(item)\" [class.active]=\"item.isActive\">\n                    <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n                </li>\n            }\n        </ul>\n    </div>\n</div>\n\n<ng-template #itemTpl let-item=\"menuItem\">\n    <upd-link [isNavigation]=\"true\" (clicked)=\"onMenuItemClick(item)\"\n        [customClasses]=\"getItemClasses(item, 'show', hasChildren(item) ? 'dropdown-toggle':'')\">\n        <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n    </upd-link>\n    @if (hasChildren(item)) {\n        <ng-container [ngTemplateOutlet]=\"childrenTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #linkContent let-item=\"menuItem\">\n    @if (!!item.icon) {\n        <span class=\"nav-link-icon d-md-none d-lg-inline-block\">\n            <upd-icon [model]=\"item.icon\"></upd-icon>\n        </span>\n    }\n    <span class=\"nav-link-title\">{{ textService.getText(item.title) }}</span>\n    @if (item.isLocked) {\n        <upd-icon class=\"ms-auto\" [model]=\"{tablerIcon: 'lock'}\"></upd-icon>\n    }\n</ng-template>\n\n<ng-template #childrenTpl let-item=\"menuItem\">\n    <div class=\"dropdown-menu\" [class.show]=\"item.isActive\">\n        <div class=\"dropdown-menu-columns\">\n            <div class=\"dropdown-menu-column\">\n                @for (child of asMenuItem(item).children; track child.id) {\n                    @if (!hasChildren(child)) {\n                        <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n                            <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n                        </upd-link>\n                    } @else {\n                        <div class=\"dropend\">\n                            <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n                                <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n                            </upd-link>\n                            <div class=\"dropdown-menu\" [class.show]=\"child.isActive\">\n                                @for (grandchild of child.children; track grandchild) {\n                                    <upd-link (clicked)=\"onMenuItemClick(grandchild)\"\n                                        [customClasses]=\"getItemClasses(grandchild, 'active', 'dropdown-item')\">\n                                        <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: grandchild}\">\n                                        </ng-container>\n                                    </upd-link>\n                                }\n                            </div>\n                        </div>\n                    }\n                }\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i3.LinkComponent, selector: "upd-link", inputs: ["href", "target", "customClasses", "isNavigation"], outputs: ["clicked"] }, { kind: "component", type: i2.DropdownComponent, selector: "upd-dropdown", inputs: ["items", "header", "isOpen", "shouldCloseOnOutsideClick", "arrowType", "wrapperClasses", "elementsExcludedFromOutsideClick", "minHeight", "maxHeight", "minWidth", "maxWidth", "dropdownReference", "dropdownReferencePosition", "textOverflowStrategy"], outputs: ["isOpenChange", "selectedItem", "checkboxChanged"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SidebarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: SidebarComponent, isStandalone: false, selector: "upd-sidebar", host: { properties: { "class": "this.wrapperClasses", "attr.data-bs-theme": "this.theme" } }, viewQueries: [{ propertyName: "loggedUserRef", first: true, predicate: ["loggedUserBtn"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid\">\n    <button class=\"navbar-toggler\" type=\"button\" (click)=\"toggleSidebarOnMobile()\" [attr.aria-expanded]=\"isSidebarMobileOpen()\">\n        <span class=\"navbar-toggler-icon\"></span>\n    </button>\n    <h1 class=\"navbar-brand navbar-brand-autodark\">\n        <a href=\".\">\n            <img width=\"110\" height=\"32\" class=\"navbar-brand-image upd-brand-logo\" />\n        </a>\n    </h1>\n\n    @if (!!config().showUserMenu && !!userInfo()) {\n        <div class=\"navbar-nav flex-row d-lg-none\">\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                    } @else {\n                        <span class=\"avatar avatar-sm\">{{ userInitials() }}</span>\n                    }\n\n                    <div class=\"d-none d-xl-block px-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        </div>\n    }\n\n    <div class=\"collapse navbar-collapse\" [class.show]=\"isSidebarMobileOpen()\">\n        <ul class=\"navbar-nav pt-lg-3\">\n            @for (item of menuItems; track item.id) {\n                <li class=\"nav-item\" [class.dropdown]=\"hasChildren(item)\" [class.active]=\"item.isActive\">\n                    <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n                </li>\n            }\n        </ul>\n    </div>\n</div>\n\n<ng-template #itemTpl let-item=\"menuItem\">\n    <upd-link [isNavigation]=\"true\" (clicked)=\"onMenuItemClick(item)\"\n        [customClasses]=\"getItemClasses(item, 'show', hasChildren(item) ? 'dropdown-toggle':'')\">\n        <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n    </upd-link>\n    @if (hasChildren(item)) {\n        <ng-container [ngTemplateOutlet]=\"childrenTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #linkContent let-item=\"menuItem\">\n    @if (!!item.icon) {\n        <span class=\"nav-link-icon d-md-none d-lg-inline-block\">\n            <upd-icon [model]=\"item.icon\"></upd-icon>\n        </span>\n    }\n    <span class=\"nav-link-title\">{{ textService.getText(item.title) }}</span>\n    @if (item.isLocked) {\n        <upd-icon class=\"ms-auto\" [model]=\"{tablerIcon: 'lock'}\"></upd-icon>\n    }\n</ng-template>\n\n<ng-template #childrenTpl let-item=\"menuItem\">\n    <div class=\"dropdown-menu\" [class.show]=\"item.isActive\">\n        <div class=\"dropdown-menu-columns\">\n            <div class=\"dropdown-menu-column\">\n                @for (child of asMenuItem(item).children; track child.id) {\n                    @if (!hasChildren(child)) {\n                        <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n                            <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n                        </upd-link>\n                    } @else {\n                        <div class=\"dropend\">\n                            <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n                                <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n                            </upd-link>\n                            <div class=\"dropdown-menu\" [class.show]=\"child.isActive\">\n                                @for (grandchild of child.children; track grandchild) {\n                                    <upd-link (clicked)=\"onMenuItemClick(grandchild)\"\n                                        [customClasses]=\"getItemClasses(grandchild, 'active', 'dropdown-item')\">\n                                        <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: grandchild}\">\n                                        </ng-container>\n                                    </upd-link>\n                                }\n                            </div>\n                        </div>\n                    }\n                }\n            </div>\n        </div>\n    </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i3.LinkComponent, selector: "upd-link", inputs: ["href", "target", "customClasses", "isNavigation"], outputs: ["clicked"] }, { kind: "component", type: i2.DropdownComponent, selector: "upd-dropdown", inputs: ["items", "header", "isOpen", "shouldCloseOnOutsideClick", "arrowType", "wrapperClasses", "elementsExcludedFromOutsideClick", "minHeight", "maxHeight", "minWidth", "maxWidth", "dropdownReference", "dropdownReferencePosition", "textOverflowStrategy"], outputs: ["isOpenChange", "selectedItem", "checkboxChanged"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-sidebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-fluid\">\n    <button class=\"navbar-toggler\" type=\"button\" (click)=\"toggleSidebarOnMobile()\" [attr.aria-expanded]=\"isSidebarMobileOpen()\">\n        <span class=\"navbar-toggler-icon\"></span>\n    </button>\n    <h1 class=\"navbar-brand navbar-brand-autodark\">\n        <a href=\".\">\n            <img width=\"110\" height=\"32\" class=\"navbar-brand-image upd-brand-logo\" />\n        </a>\n    </h1>\n\n    @if (!!config().showUserMenu && !!userInfo()) {\n        <div class=\"navbar-nav flex-row d-lg-none\">\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                    } @else {\n                        <span class=\"avatar avatar-sm\">{{ userInitials() }}</span>\n                    }\n\n                    <div class=\"d-none d-xl-block px-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        </div>\n    }\n\n    <div class=\"collapse navbar-collapse\" [class.show]=\"isSidebarMobileOpen()\">\n        <ul class=\"navbar-nav pt-lg-3\">\n            @for (item of menuItems; track item.id) {\n                <li class=\"nav-item\" [class.dropdown]=\"hasChildren(item)\" [class.active]=\"item.isActive\">\n                    <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n                </li>\n            }\n        </ul>\n    </div>\n</div>\n\n<ng-template #itemTpl let-item=\"menuItem\">\n    <upd-link [isNavigation]=\"true\" (clicked)=\"onMenuItemClick(item)\"\n        [customClasses]=\"getItemClasses(item, 'show', hasChildren(item) ? 'dropdown-toggle':'')\">\n        <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n    </upd-link>\n    @if (hasChildren(item)) {\n        <ng-container [ngTemplateOutlet]=\"childrenTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #linkContent let-item=\"menuItem\">\n    @if (!!item.icon) {\n        <span class=\"nav-link-icon d-md-none d-lg-inline-block\">\n            <upd-icon [model]=\"item.icon\"></upd-icon>\n        </span>\n    }\n    <span class=\"nav-link-title\">{{ textService.getText(item.title) }}</span>\n    @if (item.isLocked) {\n        <upd-icon class=\"ms-auto\" [model]=\"{tablerIcon: 'lock'}\"></upd-icon>\n    }\n</ng-template>\n\n<ng-template #childrenTpl let-item=\"menuItem\">\n    <div class=\"dropdown-menu\" [class.show]=\"item.isActive\">\n        <div class=\"dropdown-menu-columns\">\n            <div class=\"dropdown-menu-column\">\n                @for (child of asMenuItem(item).children; track child.id) {\n                    @if (!hasChildren(child)) {\n                        <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n                            <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n                        </upd-link>\n                    } @else {\n                        <div class=\"dropend\">\n                            <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n                                <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n                            </upd-link>\n                            <div class=\"dropdown-menu\" [class.show]=\"child.isActive\">\n                                @for (grandchild of child.children; track grandchild) {\n                                    <upd-link (clicked)=\"onMenuItemClick(grandchild)\"\n                                        [customClasses]=\"getItemClasses(grandchild, 'active', 'dropdown-item')\">\n                                        <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: grandchild}\">\n                                        </ng-container>\n                                    </upd-link>\n                                }\n                            </div>\n                        </div>\n                    }\n                }\n            </div>\n        </div>\n    </div>\n</ng-template>\n" }]
+            args: [{ standalone: false, selector: 'upd-sidebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-fluid\">\n    <button class=\"navbar-toggler\" type=\"button\" (click)=\"toggleSidebarOnMobile()\" [attr.aria-expanded]=\"isSidebarMobileOpen()\">\n        <span class=\"navbar-toggler-icon\"></span>\n    </button>\n    <h1 class=\"navbar-brand navbar-brand-autodark\">\n        <a href=\".\">\n            <img width=\"110\" height=\"32\" class=\"navbar-brand-image upd-brand-logo\" />\n        </a>\n    </h1>\n\n    @if (!!config().showUserMenu && !!userInfo()) {\n        <div class=\"navbar-nav flex-row d-lg-none\">\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                    } @else {\n                        <span class=\"avatar avatar-sm\">{{ userInitials() }}</span>\n                    }\n\n                    <div class=\"d-none d-xl-block px-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        </div>\n    }\n\n    <div class=\"collapse navbar-collapse\" [class.show]=\"isSidebarMobileOpen()\">\n        <ul class=\"navbar-nav pt-lg-3\">\n            @for (item of menuItems; track item.id) {\n                <li class=\"nav-item\" [class.dropdown]=\"hasChildren(item)\" [class.active]=\"item.isActive\">\n                    <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n                </li>\n            }\n        </ul>\n    </div>\n</div>\n\n<ng-template #itemTpl let-item=\"menuItem\">\n    <upd-link [isNavigation]=\"true\" (clicked)=\"onMenuItemClick(item)\"\n        [customClasses]=\"getItemClasses(item, 'show', hasChildren(item) ? 'dropdown-toggle':'')\">\n        <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n    </upd-link>\n    @if (hasChildren(item)) {\n        <ng-container [ngTemplateOutlet]=\"childrenTpl\" [ngTemplateOutletContext]=\"{menuItem: item}\"></ng-container>\n    }\n</ng-template>\n\n<ng-template #linkContent let-item=\"menuItem\">\n    @if (!!item.icon) {\n        <span class=\"nav-link-icon d-md-none d-lg-inline-block\">\n            <upd-icon [model]=\"item.icon\"></upd-icon>\n        </span>\n    }\n    <span class=\"nav-link-title\">{{ textService.getText(item.title) }}</span>\n    @if (item.isLocked) {\n        <upd-icon class=\"ms-auto\" [model]=\"{tablerIcon: 'lock'}\"></upd-icon>\n    }\n</ng-template>\n\n<ng-template #childrenTpl let-item=\"menuItem\">\n    <div class=\"dropdown-menu\" [class.show]=\"item.isActive\">\n        <div class=\"dropdown-menu-columns\">\n            <div class=\"dropdown-menu-column\">\n                @for (child of asMenuItem(item).children; track child.id) {\n                    @if (!hasChildren(child)) {\n                        <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n                            <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n                        </upd-link>\n                    } @else {\n                        <div class=\"dropend\">\n                            <upd-link (clicked)=\"onMenuItemClick(child)\" [customClasses]=\"getItemClasses(child, 'active', 'dropdown-item')\">\n                                <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: child}\"></ng-container>\n                            </upd-link>\n                            <div class=\"dropdown-menu\" [class.show]=\"child.isActive\">\n                                @for (grandchild of child.children; track grandchild) {\n                                    <upd-link (clicked)=\"onMenuItemClick(grandchild)\"\n                                        [customClasses]=\"getItemClasses(grandchild, 'active', 'dropdown-item')\">\n                                        <ng-container [ngTemplateOutlet]=\"linkContent\" [ngTemplateOutletContext]=\"{menuItem: grandchild}\">\n                                        </ng-container>\n                                    </upd-link>\n                                }\n                            </div>\n                        </div>\n                    }\n                }\n            </div>\n        </div>\n    </div>\n</ng-template>\n" }]
         }], propDecorators: { wrapperClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], theme: [{
                 type: HostBinding,
                 args: ['attr.data-bs-theme']
-            }] } });
+            }], loggedUserRef: [{ type: i0.ViewChild, args: ['loggedUserBtn', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 class PageHeaderComponent {
     constructor() {
-        this.model = input.required();
+        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
     }
-    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: { 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$4.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", "stopPropagation"], outputs: ["clicked"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: PageHeaderComponent, isStandalone: false, 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$4.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", "stopPropagation"], outputs: ["clicked"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PageHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", 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" }]
-        }] });
+            args: [{ standalone: false, 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: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }] } });
 
 class VerticalSidebarLayoutComponent extends BaseLayout {
-    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 (!!_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$3.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"] }, { kind: "component", type: SidebarComponent, selector: "upd-sidebar" }, { kind: "component", type: PageHeaderComponent, selector: "upd-page-header", inputs: ["model"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: VerticalSidebarLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: VerticalSidebarLayoutComponent, isStandalone: false, 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$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: FooterComponent, selector: "upd-footer" }, { kind: "component", type: HeaderComponent, selector: "upd-header", inputs: ["style"] }, { 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", 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 (!!_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" }]
+            args: [{ standalone: false, 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 {
@@ -762,8 +764,8 @@ class VerticalSidebarLayoutModule {
         translocoService.setTranslation(en$1, 'en');
         translocoService.setTranslation(pt$1, 'pt');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: VerticalSidebarLayoutModule, deps: [{ token: i1$1.TranslocoService }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: VerticalSidebarLayoutModule, declarations: [VerticalSidebarLayoutComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: VerticalSidebarLayoutModule, deps: [{ token: i1$1.TranslocoService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: VerticalSidebarLayoutModule, declarations: [VerticalSidebarLayoutComponent,
             SidebarComponent,
             PageHeaderComponent], imports: [CommonModule,
             RouterModule,
@@ -777,7 +779,7 @@ class VerticalSidebarLayoutModule {
             HeaderModule], exports: [VerticalSidebarLayoutComponent,
             SidebarComponent,
             PageHeaderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: VerticalSidebarLayoutModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: VerticalSidebarLayoutModule, imports: [CommonModule,
             RouterModule,
             TranslocoModule,
             UpdIconsModule,
@@ -788,7 +790,7 @@ class VerticalSidebarLayoutModule {
             FooterModule,
             HeaderModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: VerticalSidebarLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: VerticalSidebarLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -817,19 +819,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
         }], ctorParameters: () => [{ type: i1$1.TranslocoService }] });
 
 class LoggedOutComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: LoggedOutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: LoggedOutComponent, selector: "upd-logged-out", ngImport: i0, template: "<p>logged-out works!</p>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: LoggedOutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: LoggedOutComponent, isStandalone: false, selector: "upd-logged-out", ngImport: i0, template: "<p>logged-out works!</p>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: LoggedOutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: LoggedOutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-logged-out', template: "<p>logged-out works!</p>\n" }]
+            args: [{ standalone: false, selector: 'upd-logged-out', template: "<p>logged-out works!</p>\n" }]
         }] });
 
 class LoginComponent {
     constructor() {
-        this.formGroup = model(new FormGroup({}));
+        this.formGroup = model(new FormGroup({}), ...(ngDevMode ? [{ debugName: "formGroup" }] : []));
         this.formRows = [];
-        this.isSigningIn = signal(false);
+        this.isSigningIn = signal(false, ...(ngDevMode ? [{ debugName: "isSigningIn" }] : []));
         this.layoutConfigService = inject(UpdLayoutConfigService);
         this.config = this.layoutConfigService.config.securityLayoutConfig.loginPage;
         this.bodyClasses = ['border-top-wide', this.border, 'd-flex', 'flex-column'];
@@ -909,21 +911,21 @@ class LoginComponent {
     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    <upd-header [style]=\"'transparent'\"></upd-header>\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    <upd-footer></upd-footer>\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\" (submitted)=\"login()\"></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$4.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", "stopPropagation"], 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: i3.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"] }, { kind: "component", type: FooterComponent, selector: "upd-footer" }, { kind: "component", type: HeaderComponent, selector: "upd-header", inputs: ["style"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: LoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: LoginComponent, isStandalone: false, 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    <upd-header [style]=\"'transparent'\"></upd-header>\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    <upd-footer></upd-footer>\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\" (submitted)=\"login()\"></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$4.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", "stopPropagation"], outputs: ["clicked"] }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i3.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"] }, { kind: "component", type: FooterComponent, selector: "upd-footer" }, { kind: "component", type: HeaderComponent, selector: "upd-header", inputs: ["style"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: LoginComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-login', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Login'\">\n    <upd-header [style]=\"'transparent'\"></upd-header>\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    <upd-footer></upd-footer>\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\" (submitted)=\"login()\"></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" }]
-        }] });
+            args: [{ standalone: false, selector: 'upd-login', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Login'\">\n    <upd-header [style]=\"'transparent'\"></upd-header>\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    <upd-footer></upd-footer>\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\" (submitted)=\"login()\"></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" }]
+        }], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: false }] }, { type: i0.Output, args: ["formGroupChange"] }] } });
 
 class OauthCallbackComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: OauthCallbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: OauthCallbackComponent, selector: "upd-oauth-callback", ngImport: i0, template: "<p>oauth-callback works!</p>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: OauthCallbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: OauthCallbackComponent, isStandalone: false, selector: "upd-oauth-callback", ngImport: i0, template: "<p>oauth-callback works!</p>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: OauthCallbackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: OauthCallbackComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-oauth-callback', template: "<p>oauth-callback works!</p>\n" }]
+            args: [{ standalone: false, selector: 'upd-oauth-callback', template: "<p>oauth-callback works!</p>\n" }]
         }] });
 
 /**
@@ -935,11 +937,11 @@ const routes = [
     { path: 'login', component: LoginComponent }
 ];
 class AuthFlowRoutingModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AuthFlowRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: AuthFlowRoutingModule, imports: [i1$3.RouterModule], exports: [RouterModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AuthFlowRoutingModule, imports: [RouterModule.forRoot(routes, { useHash: true }), RouterModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AuthFlowRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: AuthFlowRoutingModule, imports: [i1$3.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AuthFlowRoutingModule, imports: [RouterModule.forRoot(routes, { useHash: true }), RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AuthFlowRoutingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AuthFlowRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [RouterModule.forRoot(routes, { useHash: true })],
@@ -948,8 +950,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
         }] });
 
 class AuthFlowModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AuthFlowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: AuthFlowModule, declarations: [LoginComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AuthFlowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: AuthFlowModule, declarations: [LoginComponent,
             OauthCallbackComponent,
             LoggedOutComponent], imports: [CommonModule,
             AuthFlowRoutingModule,
@@ -964,7 +966,7 @@ class AuthFlowModule {
             HeaderModule], exports: [LoginComponent,
             OauthCallbackComponent,
             LoggedOutComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AuthFlowModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AuthFlowModule, imports: [CommonModule,
             AuthFlowRoutingModule,
             UpdButtonModule,
             UpdIconsModule,
@@ -975,7 +977,7 @@ class AuthFlowModule {
             FooterModule,
             HeaderModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AuthFlowModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AuthFlowModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1020,17 +1022,17 @@ 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,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: UpdLayoutModule, imports: [CommonModule,
             UpdCoreLayoutModule,
             UpdNotificationsModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdLayoutModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdLayoutModule, providers: [
             UpdLayoutConfigService
         ], imports: [CommonModule,
             UpdCoreLayoutModule,
             UpdNotificationsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [