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

package/fesm2022/updevs-components-layout.mjs

@@ -0,0 +1,785 @@
+import * as i0 from '@angular/core';
+import { inject, Directive, Component, NgModule, InjectionToken, Injectable, Inject, TemplateRef, ViewEncapsulation, HostBinding, ContentChild, Input, ChangeDetectorRef, model, signal } from '@angular/core';
+import { BaseComponent, LayoutService, UpdCoreLayoutConfigService, UpdCoreLayoutModule } from '@updevs/sdk/layout';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$4 from '@angular/router';
+import { Router, NavigationStart, RouterModule } from '@angular/router';
+import * as i1$2 from '@updevs/icons';
+import { UpdIconsModule } from '@updevs/icons';
+import * as i1$3 from '@updevs/components/button';
+import { UpdButtonModule } from '@updevs/components/button';
+import * as i2 from '@updevs/components/link';
+import { UpdLinkModule } from '@updevs/components/link';
+import * as i1$1 from '@jsverse/transloco';
+import { TranslocoService, TranslocoModule, TranslocoDirective } from '@jsverse/transloco';
+import { MenuService } from '@updevs/sdk/routes';
+import { filter, finalize } from 'rxjs';
+import * as i3 from '@angular/forms';
+import { FormGroup, Validators, FormsModule } from '@angular/forms';
+import { AuthService } from '@updevs/sdk/security';
+import * as i7 from '@updevs/components/form';
+import { DynamicFieldType, UpdFormModule } from '@updevs/components/form';
+import * as i6 from '@updevs/components/card';
+import { UpdCardModule } from '@updevs/components/card';
+
+/**
+ * Basic page structure.
+ */
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+class BasePageComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this._layoutService = inject(LayoutService);
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        // TODO: clear subheader.
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BasePageComponent, decorators: [{
+            type: Directive
+        }] });
+
+class BlankLayoutComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BlankLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: BlankLayoutComponent, selector: "upd-blank-layout", ngImport: i0, template: "<p>blank-layout works!</p>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BlankLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-blank-layout', template: "<p>blank-layout works!</p>\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], exports: [BlankLayoutComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BlankLayoutModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BlankLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule
+                    ],
+                    declarations: [
+                        BlankLayoutComponent
+                    ],
+                    exports: [
+                        BlankLayoutComponent
+                    ]
+                }]
+        }] });
+
+var UpDevs$1 = {
+	Login: {
+		Title: "Login",
+		NoAccountYet: "Don't have an account?",
+		SignUp: "Sign-up",
+		SignIn: "Sign-in",
+		RecoverPassword: "Recover my password",
+		RememberMe: "Remember me on this device",
+		Or: "or",
+		Email: "Email",
+		Password: "Password"
+	},
+	Footer: {
+		Prefix: "Copyright",
+		"Symbol": "©",
+		Suffix: "All rights reserved."
+	}
+};
+var en = {
+	UpDevs: UpDevs$1
+};
+
+var en$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    UpDevs: UpDevs$1,
+    default: en
+});
+
+var UpDevs = {
+	Login: {
+		Title: "Login",
+		NoAccountYet: "Não tem conta?",
+		SignUp: "Cadastre-se",
+		SignIn: "Entrar",
+		RecoverPassword: "Recuperar minha senha",
+		RememberMe: "Lembrar",
+		Or: "ou",
+		Email: "Email",
+		Password: "Senha"
+	},
+	Footer: {
+		Prefix: "Copyright",
+		"Symbol": "©",
+		Suffix: "Todos os direitos reservados."
+	}
+};
+var pt = {
+	UpDevs: UpDevs
+};
+
+var pt$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    UpDevs: UpDevs,
+    default: pt
+});
+
+/**
+ * Configuration of the login page layout.
+ */
+class LoginPageConfigModel {
+    constructor(init) {
+        /**
+         * Buttons used for social login (google, facebook, etc).
+         */
+        this.socialLoginButtons = [];
+        Object.assign(this, init);
+        this.layout = init?.layout || 'centered-box';
+        this.borderColor = init?.borderColor || 'primary';
+        this.signInButtonColor = init?.signInButtonColor || 'primary';
+        this.linksColor = init?.linksColor || this.signInButtonColor;
+        if (init?.socialLoginButtons) {
+            this.socialLoginButtons = init.socialLoginButtons;
+        }
+    }
+}
+
+/**
+ * Configuration for the pages related to the security.
+ */
+class SecurityLayoutConfigModel {
+    constructor(init) {
+        this.loginPage = new LoginPageConfigModel(init?.loginPage);
+    }
+}
+
+/**
+ * Layout configuration.
+ */
+class UpdLayoutConfigModel {
+    constructor(init) {
+        if (init?.mainLogo === undefined) {
+            // this.mainLogo = LogoConstants.defaultLogo; // TODO: add images
+        }
+        if (init?.smallLogo === undefined) {
+            // this.smallLogo = LogoConstants.smallLogo;
+        }
+        if (init?.loggedOutBackground === undefined) {
+            // this.loggedOutBackground = ImageConstants.loggedOutBackground;
+        }
+        this.menuTitle = init?.menuTitle || 'UpDevs';
+        this.showNotificationsButton = init?.showNotificationsButton || true;
+        this.showUserMenu = init?.showUserMenu || true;
+        this.displayReportErrorButton = init?.displayReportErrorButton || false;
+        this.useFluidLayout = init?.useFluidLayout || false;
+        this.securityLayoutConfig = new SecurityLayoutConfigModel(init?.securityLayoutConfig);
+    }
+}
+
+/**
+ * Layout constants.
+ */
+class LayoutConstants {
+    /**
+     * Key to inject the default configuration.
+     */
+    static { this.defaultOptionsKey = 'upd-layout-default-options'; }
+    /**
+     * Injection token for the default configuration.
+     */
+    static { this.defaultOptionsInjectionToken = new InjectionToken(LayoutConstants.defaultOptionsKey); }
+}
+
+/**
+ * Layout configuration data.
+ */
+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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdLayoutConfigService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LayoutConstants.defaultOptionsInjectionToken]
+                }] }] });
+
+/**
+ * Basic layout structure.
+ */
+class BaseLayout extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this._layoutConfigService = inject(UpdLayoutConfigService);
+        this._layoutService = inject(LayoutService);
+    }
+    ngOnInit() {
+        if (this._layoutConfigService.config.useFluidLayout) {
+            this._layoutService.addBodyClasses('layout-fluid');
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this._layoutConfigService.config.useFluidLayout) {
+            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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BaseLayout, decorators: [{
+            type: Directive
+        }] });
+
+class FooterCopyrightDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FooterCopyrightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: FooterCopyrightDirective, selector: "[updFooterCopyright]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FooterCopyrightDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[updFooterCopyright]'
+                }]
+        }] });
+
+class FooterComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.wrapperClasses = '';
+        /**
+         * Whether the footer will always be shown.
+         */
+        this.isSticky = false;
+        /**
+         * Whether the footer is transparent or not.
+         */
+        this.isTransparent = true;
+        /**
+         * Links.
+         */
+        this.links = [];
+        /**
+         * Current year.
+         */
+        this.currentYear = new Date().getFullYear();
+        this.baseWrapperClasses = 'footer d-print-none';
+    }
+    ngOnInit() {
+        this.updateWrapperClasses();
+    }
+    ngOnChanges(changes) {
+        if (!!changes['isSticky'].currentValue || !!changes['isTransparent'].currentValue) {
+            this.updateWrapperClasses();
+        }
+    }
+    updateWrapperClasses() {
+        const stickyBottomCls = this.isSticky ? ' sticky-bottom' : '';
+        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" } }, queries: [{ propertyName: "footerCopyrightTemplate", first: true, predicate: FooterCopyrightDirective, descendants: true, read: TemplateRef, static: true }], 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 (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            @if (!!footerCopyrightTemplate) {\n                <ng-container [ngTemplateOutlet]=\"footerCopyrightTemplate\"></ng-container>\n            } @else {\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        </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: [{
+            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 (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            @if (!!footerCopyrightTemplate) {\n                <ng-container [ngTemplateOutlet]=\"footerCopyrightTemplate\"></ng-container>\n            } @else {\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        </div>\n    </div>\n</div>\n" }]
+        }], propDecorators: { wrapperClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], footerCopyrightTemplate: [{
+                type: ContentChild,
+                args: [FooterCopyrightDirective, { read: TemplateRef, static: true }]
+            }] } });
+
+class HeaderComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.wrapperClasses = '';
+        this.style = 'light';
+        this.showSearchBar = true;
+        this.nextThemeIcon = 'moon';
+        this.nextThemeColor = 'black';
+        this.currentNotificationsIcon = 'bell';
+        this.hasNewNotifications = false;
+        this.showNotifications = false;
+        this.showLanguageSwitcher = true; // TODO: add on config.
+        this.showUserMenu = false;
+        this.baseWrapperClasses = 'navbar navbar-expand-md d-none d-lg-flex d-print-none';
+        this.coreLayoutConfigService = inject(UpdCoreLayoutConfigService);
+        this.layoutService = inject(LayoutService);
+        this.translocoService = inject(TranslocoService);
+    }
+    ngOnInit() {
+        this.updateWrapperClasses();
+        if (this.coreLayoutConfigService.config.showNotificationsButton) {
+            this.setupNotifications();
+        }
+        if (this.coreLayoutConfigService.config.showUserMenu) {
+            this.showUserMenu = true;
+        }
+    }
+    ngOnChanges(changes) {
+        if (!!changes['style'].currentValue) {
+            this.updateWrapperClasses();
+        }
+    }
+    switchTheme() {
+        const isDarkMode = this.nextThemeIcon === 'moon';
+        this.nextThemeIcon = isDarkMode ? 'sun' : 'moon';
+        this.nextThemeColor = isDarkMode ? 'white' : 'black';
+        this.layoutService.toggleDarkMode(isDarkMode);
+    }
+    // TODO: implement.
+    switchLanguage() {
+        const currentLang = this.translocoService.getActiveLang();
+        this.translocoService.setActiveLang(currentLang === 'en' ? 'pt' : 'en');
+    }
+    openNotifications() {
+        this.updateNotificationsIcon();
+    }
+    setupNotifications() {
+        this.showNotifications = true;
+    }
+    updateNotificationsIcon() {
+        this.currentNotificationsIcon = this.currentNotificationsIcon === 'bell' ? 'bell-ringing' : 'bell';
+        this.hasNewNotifications = !this.hasNewNotifications;
+    }
+    updateWrapperClasses() {
+        this.wrapperClasses = `${this.baseWrapperClasses} navbar-${this.style}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: HeaderComponent, selector: "upd-header", inputs: { style: "style", showSearchBar: "showSearchBar" }, host: { properties: { "class": "this.wrapperClasses" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"container-xl\">\n    <button class=\"navbar-toggler\" type=\"button\">\n        <span class=\"navbar-toggler-icon\"></span>\n    </button>\n    <div class=\"navbar-nav flex-row order-md-last\">\n        <div class=\"d-none d-md-flex me-3\">\n            <div class=\"nav-item\">\n                <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"switchTheme()\">\n                    <upd-icon [tablerIcon]=\"nextThemeIcon\"></upd-icon>\n                </upd-link>\n            </div>\n            @if (showLanguageSwitcher) {\n                <div class=\"nav-item\">\n                    <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"switchLanguage()\">\n                        <upd-icon tablerIcon=\"flag\"></upd-icon>\n                    </upd-link>\n                </div>\n            }\n            @if (showNotifications) {\n                <div class=\"nav-item dropdown d-none d-md-flex\">\n                    <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"openNotifications()\">\n                        <upd-icon [tablerIcon]=\"currentNotificationsIcon\"></upd-icon>\n                        @if (hasNewNotifications) {\n                            <span class=\"badge bg-red\"></span>\n                        }\n                    </upd-link>\n                    <div class=\"dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card\">\n                        <div class=\"card\">\n                            <div class=\"card-header\">\n                                <h3 class=\"card-title\">Last updates</h3>\n                            </div>\n                            <div class=\"list-group list-group-flush list-group-hoverable\">\n                                <div class=\"list-group-item\">\n                                    <div class=\"row align-items-center\">\n                                        <div class=\"col-auto\"><span\n                                            class=\"status-dot status-dot-animated bg-red d-block\"></span></div>\n                                        <div class=\"col text-truncate\">\n                                            <a href=\"#\" class=\"text-body d-block\">Example 1</a>\n                                            <div class=\"d-block text-muted text-truncate mt-n1\">\n                                                Change deprecated html tags to text decoration classes (#29604)\n                                            </div>\n                                        </div>\n                                        <div class=\"col-auto\">\n                                            <a href=\"#\" class=\"list-group-item-actions\">\n                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon text-muted\"\n                                                    width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                                                    stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\">\n                                                    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n                                                    <path\n                                                        d=\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/>\n                                                </svg>\n                                            </a>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"list-group-item\">\n                                    <div class=\"row align-items-center\">\n                                        <div class=\"col-auto\"><span class=\"status-dot d-block\"></span></div>\n                                        <div class=\"col text-truncate\">\n                                            <a href=\"#\" class=\"text-body d-block\">Example 2</a>\n                                            <div class=\"d-block text-muted text-truncate mt-n1\">\n                                                justify-content:between \u21D2 justify-content:space-between (#29734)\n                                            </div>\n                                        </div>\n                                        <div class=\"col-auto\">\n                                            <a href=\"#\" class=\"list-group-item-actions show\">\n                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon text-yellow\"\n                                                    width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                                                    stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\">\n                                                    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n                                                    <path\n                                                        d=\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/>\n                                                </svg>\n                                            </a>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"list-group-item\">\n                                    <div class=\"row align-items-center\">\n                                        <div class=\"col-auto\"><span class=\"status-dot d-block\"></span></div>\n                                        <div class=\"col text-truncate\">\n                                            <a href=\"#\" class=\"text-body d-block\">Example 3</a>\n                                            <div class=\"d-block text-muted text-truncate mt-n1\">\n                                                Update change-version.js (#29736)\n                                            </div>\n                                        </div>\n                                        <div class=\"col-auto\">\n                                            <a href=\"#\" class=\"list-group-item-actions\">\n                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon text-muted\"\n                                                    width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                                                    stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\">\n                                                    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n                                                    <path\n                                                        d=\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/>\n                                                </svg>\n                                            </a>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"list-group-item\">\n                                    <div class=\"row align-items-center\">\n                                        <div class=\"col-auto\"><span\n                                            class=\"status-dot status-dot-animated bg-green d-block\"></span></div>\n                                        <div class=\"col text-truncate\">\n                                            <a href=\"#\" class=\"text-body d-block\">Example 4</a>\n                                            <div class=\"d-block text-muted text-truncate mt-n1\">\n                                                Regenerate package-lock.json (#29730)\n                                            </div>\n                                        </div>\n                                        <div class=\"col-auto\">\n                                            <a href=\"#\" class=\"list-group-item-actions\">\n                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon text-muted\"\n                                                    width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                                                    stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\">\n                                                    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n                                                    <path\n                                                        d=\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/>\n                                                </svg>\n                                            </a>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            }\n        </div>\n        @if (showUserMenu) {\n            <div class=\"nav-item dropdown\">\n                <a href=\"#\" class=\"nav-link d-flex lh-1 text-reset p-0\" data-bs-toggle=\"dropdown\"\n                    aria-label=\"Open user menu\">\n                    <!--<span class=\"avatar avatar-sm\" style=\"background-image: url(./static/avatars/000m.jpg)\"></span>-->\n                    <span class=\"avatar avatar-sm\"></span>\n                    <div class=\"d-none d-xl-block ps-2\">\n                        <div>Eros Stein</div>\n                        <div class=\"mt-1 small text-muted\">Administrator</div>\n                    </div>\n                </a>\n                <div class=\"dropdown-menu dropdown-menu-end dropdown-menu-arrow\">\n                    <a href=\"#\" class=\"dropdown-item\">Status</a>\n                    <a href=\"./profile.html\" class=\"dropdown-item\">Profile</a>\n                    <a href=\"#\" class=\"dropdown-item\">Feedback</a>\n                    <div class=\"dropdown-divider\"></div>\n                    <a href=\"./settings.html\" class=\"dropdown-item\">Settings</a>\n                    <a href=\"./sign-in.html\" class=\"dropdown-item\">Logout</a>\n                </div>\n            </div>\n        }\n    </div>\n    @if (showSearchBar) {\n        <div class=\"collapse navbar-collapse\">\n            <div>\n                <form autocomplete=\"off\" novalidate>\n                    <div class=\"input-icon\">\n                        <span class=\"input-icon-addon\">\n                            <upd-icon tablerIcon=\"search\"></upd-icon>\n                        </span>\n                        <input type=\"text\" value=\"\" class=\"form-control\" placeholder=\"Search\u2026\">\n                    </div>\n                </form>\n            </div>\n        </div>\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i2.LinkComponent, selector: "upd-link", inputs: ["href", "target", "customClasses", "isNavigation"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-xl\">\n    <button class=\"navbar-toggler\" type=\"button\">\n        <span class=\"navbar-toggler-icon\"></span>\n    </button>\n    <div class=\"navbar-nav flex-row order-md-last\">\n        <div class=\"d-none d-md-flex me-3\">\n            <div class=\"nav-item\">\n                <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"switchTheme()\">\n                    <upd-icon [tablerIcon]=\"nextThemeIcon\"></upd-icon>\n                </upd-link>\n            </div>\n            @if (showLanguageSwitcher) {\n                <div class=\"nav-item\">\n                    <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"switchLanguage()\">\n                        <upd-icon tablerIcon=\"flag\"></upd-icon>\n                    </upd-link>\n                </div>\n            }\n            @if (showNotifications) {\n                <div class=\"nav-item dropdown d-none d-md-flex\">\n                    <upd-link [isNavigation]=\"true\" [customClasses]=\"['px-0']\" (clicked)=\"openNotifications()\">\n                        <upd-icon [tablerIcon]=\"currentNotificationsIcon\"></upd-icon>\n                        @if (hasNewNotifications) {\n                            <span class=\"badge bg-red\"></span>\n                        }\n                    </upd-link>\n                    <div class=\"dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card\">\n                        <div class=\"card\">\n                            <div class=\"card-header\">\n                                <h3 class=\"card-title\">Last updates</h3>\n                            </div>\n                            <div class=\"list-group list-group-flush list-group-hoverable\">\n                                <div class=\"list-group-item\">\n                                    <div class=\"row align-items-center\">\n                                        <div class=\"col-auto\"><span\n                                            class=\"status-dot status-dot-animated bg-red d-block\"></span></div>\n                                        <div class=\"col text-truncate\">\n                                            <a href=\"#\" class=\"text-body d-block\">Example 1</a>\n                                            <div class=\"d-block text-muted text-truncate mt-n1\">\n                                                Change deprecated html tags to text decoration classes (#29604)\n                                            </div>\n                                        </div>\n                                        <div class=\"col-auto\">\n                                            <a href=\"#\" class=\"list-group-item-actions\">\n                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon text-muted\"\n                                                    width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                                                    stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\">\n                                                    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n                                                    <path\n                                                        d=\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/>\n                                                </svg>\n                                            </a>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"list-group-item\">\n                                    <div class=\"row align-items-center\">\n                                        <div class=\"col-auto\"><span class=\"status-dot d-block\"></span></div>\n                                        <div class=\"col text-truncate\">\n                                            <a href=\"#\" class=\"text-body d-block\">Example 2</a>\n                                            <div class=\"d-block text-muted text-truncate mt-n1\">\n                                                justify-content:between \u21D2 justify-content:space-between (#29734)\n                                            </div>\n                                        </div>\n                                        <div class=\"col-auto\">\n                                            <a href=\"#\" class=\"list-group-item-actions show\">\n                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon text-yellow\"\n                                                    width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                                                    stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\">\n                                                    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n                                                    <path\n                                                        d=\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/>\n                                                </svg>\n                                            </a>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"list-group-item\">\n                                    <div class=\"row align-items-center\">\n                                        <div class=\"col-auto\"><span class=\"status-dot d-block\"></span></div>\n                                        <div class=\"col text-truncate\">\n                                            <a href=\"#\" class=\"text-body d-block\">Example 3</a>\n                                            <div class=\"d-block text-muted text-truncate mt-n1\">\n                                                Update change-version.js (#29736)\n                                            </div>\n                                        </div>\n                                        <div class=\"col-auto\">\n                                            <a href=\"#\" class=\"list-group-item-actions\">\n                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon text-muted\"\n                                                    width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                                                    stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\">\n                                                    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n                                                    <path\n                                                        d=\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/>\n                                                </svg>\n                                            </a>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"list-group-item\">\n                                    <div class=\"row align-items-center\">\n                                        <div class=\"col-auto\"><span\n                                            class=\"status-dot status-dot-animated bg-green d-block\"></span></div>\n                                        <div class=\"col text-truncate\">\n                                            <a href=\"#\" class=\"text-body d-block\">Example 4</a>\n                                            <div class=\"d-block text-muted text-truncate mt-n1\">\n                                                Regenerate package-lock.json (#29730)\n                                            </div>\n                                        </div>\n                                        <div class=\"col-auto\">\n                                            <a href=\"#\" class=\"list-group-item-actions\">\n                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon text-muted\"\n                                                    width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\"\n                                                    stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\"\n                                                    stroke-linejoin=\"round\">\n                                                    <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n                                                    <path\n                                                        d=\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"/>\n                                                </svg>\n                                            </a>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            }\n        </div>\n        @if (showUserMenu) {\n            <div class=\"nav-item dropdown\">\n                <a href=\"#\" class=\"nav-link d-flex lh-1 text-reset p-0\" data-bs-toggle=\"dropdown\"\n                    aria-label=\"Open user menu\">\n                    <!--<span class=\"avatar avatar-sm\" style=\"background-image: url(./static/avatars/000m.jpg)\"></span>-->\n                    <span class=\"avatar avatar-sm\"></span>\n                    <div class=\"d-none d-xl-block ps-2\">\n                        <div>Eros Stein</div>\n                        <div class=\"mt-1 small text-muted\">Administrator</div>\n                    </div>\n                </a>\n                <div class=\"dropdown-menu dropdown-menu-end dropdown-menu-arrow\">\n                    <a href=\"#\" class=\"dropdown-item\">Status</a>\n                    <a href=\"./profile.html\" class=\"dropdown-item\">Profile</a>\n                    <a href=\"#\" class=\"dropdown-item\">Feedback</a>\n                    <div class=\"dropdown-divider\"></div>\n                    <a href=\"./settings.html\" class=\"dropdown-item\">Settings</a>\n                    <a href=\"./sign-in.html\" class=\"dropdown-item\">Logout</a>\n                </div>\n            </div>\n        }\n    </div>\n    @if (showSearchBar) {\n        <div class=\"collapse navbar-collapse\">\n            <div>\n                <form autocomplete=\"off\" novalidate>\n                    <div class=\"input-icon\">\n                        <span class=\"input-icon-addon\">\n                            <upd-icon tablerIcon=\"search\"></upd-icon>\n                        </span>\n                        <input type=\"text\" value=\"\" class=\"form-control\" placeholder=\"Search\u2026\">\n                    </div>\n                </form>\n            </div>\n        </div>\n    }\n</div>\n" }]
+        }], propDecorators: { wrapperClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], style: [{
+                type: Input
+            }], showSearchBar: [{
+                type: Input
+            }] } });
+
+class SidebarComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.wrapperClasses = 'navbar navbar-vertical navbar-expand-lg';
+        this.theme = 'dark';
+        this.menuItems = [];
+        this.router = inject(Router);
+        this.menuService = inject(MenuService);
+    }
+    ngOnInit() {
+        this.menuItems = this.menuService.generateMenu();
+        const routerSub = this.router.events.pipe(filter(event => event instanceof NavigationStart)).subscribe(event => this.updateActiveRoute(event.url));
+        this.updateActiveRoute(this.router.url);
+        this.addSubscriptions(routerSub);
+    }
+    onMenuItemClick(item) {
+        if (item.isLocked) {
+            if (!!item.lockedClickFunction) {
+                item.lockedClickFunction();
+            }
+            return;
+        }
+        this.resetMenuState(this.menuItems);
+        item.isActive = true;
+        this.updateParents(item);
+        if (!!item.clickFunction) {
+            item.clickFunction();
+            return;
+        }
+        if ((item.children?.length || 0) > 0) {
+            return;
+        }
+        this.router.navigate(item.getFullPath()).then();
+    }
+    hasChildren(item) {
+        return (item.children?.length || 0) > 0;
+    }
+    asMenuItem(item) {
+        return item;
+    }
+    getItemClasses(item, activeClass, ...classes) {
+        return [
+            ...classes,
+            item.isActive ? activeClass : '',
+            item.isLocked ? 'disabled' : ''
+        ];
+    }
+    findActiveNode(item, fullPath) {
+        if (item.fullPath === fullPath) {
+            return item;
+        }
+        else if (item.children.length > 0) {
+            let result;
+            for (let i = 0; !result && i < item.children.length; i++) {
+                result = this.findActiveNode(item.children[i], fullPath);
+            }
+            return result;
+        }
+        return undefined;
+    }
+    updateActiveRoute(newPath) {
+        this.resetMenuState(this.menuItems);
+        let item;
+        for (const mi of this.menuItems) {
+            item = this.findActiveNode(mi, newPath);
+            if (!!item) {
+                break;
+            }
+        }
+        while (!!item) {
+            item.isActive = true;
+            item = item.parent;
+        }
+    }
+    resetMenuState(items) {
+        items.forEach(i => {
+            i.isActive = false;
+            if (i.children.length > 0) {
+                this.resetMenuState(i.children);
+            }
+        });
+    }
+    updateParents(menuItem) {
+        let item = menuItem;
+        while (!!item) {
+            item.isActive = true;
+            item = item.parent;
+        }
+    }
+    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" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid\">\n    <button class=\"navbar-toggler\" type=\"button\">\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    <div class=\"collapse navbar-collapse\">\n        <ul class=\"navbar-nav pt-lg-3\">\n            @for (item of menuItems; track item) {\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\">{{ 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) {\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: i2.LinkComponent, selector: "upd-link", inputs: ["href", "target", "customClasses", "isNavigation"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", 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\">\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    <div class=\"collapse navbar-collapse\">\n        <ul class=\"navbar-nav pt-lg-3\">\n            @for (item of menuItems; track item) {\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\">{{ 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) {\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']
+            }] } });
+
+class PageHeaderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: PageHeaderComponent, selector: "upd-page-header", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"page-header d-print-none\">\n    <div class=\"container-xl\">\n        <div class=\"row g-2 align-items-center\">\n            <div class=\"col\">\n                <div class=\"page-pretitle\">\n                    {{ model.titleHeader }}\n                </div>\n                <h2 class=\"page-title\">\n                    {{ model.title }}\n                </h2>\n            </div>\n            @if (model.actionButtons.length > 0) {\n                <div class=\"col-auto ms-auto d-print-none\">\n                    <div class=\"btn-list\">\n                        @for (btn of model.actionButtons; track btn) {\n                            <upd-button [model]=\"btn!\"></upd-button>\n                        }\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1$3.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PageHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-page-header', template: "<div class=\"page-header d-print-none\">\n    <div class=\"container-xl\">\n        <div class=\"row g-2 align-items-center\">\n            <div class=\"col\">\n                <div class=\"page-pretitle\">\n                    {{ model.titleHeader }}\n                </div>\n                <h2 class=\"page-title\">\n                    {{ model.title }}\n                </h2>\n            </div>\n            @if (model.actionButtons.length > 0) {\n                <div class=\"col-auto ms-auto d-print-none\">\n                    <div class=\"btn-list\">\n                        @for (btn of model.actionButtons; track btn) {\n                            <upd-button [model]=\"btn!\"></upd-button>\n                        }\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n</div>\n" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class VerticalSidebarLayoutComponent extends BaseLayout {
+    constructor() {
+        super(...arguments);
+        this.showPageHeader = false;
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        const pHeaderSub = this._layoutService.onPageHeaderChange.subscribe(ph => {
+            this.showPageHeader = !!ph;
+            this.pageHeader = ph;
+            this.changeDetectorRef.detectChanges();
+        });
+        this.addSubscriptions(pHeaderSub);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: VerticalSidebarLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: VerticalSidebarLayoutComponent, selector: "upd-vertical-sidebar-layout", usesInheritance: true, ngImport: i0, template: "<div class=\"page\">\n    <upd-sidebar></upd-sidebar>\n    <upd-header></upd-header>\n\n    <div class=\"page-wrapper\">\n        @if (showPageHeader) {\n            <upd-page-header [model]=\"pageHeader!\"></upd-page-header>\n        }\n        <div class=\"page-body\">\n            <div class=\"container-xl\">\n                <router-outlet></router-outlet>\n            </div>\n        </div>\n        <upd-footer></upd-footer>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: FooterComponent, selector: "upd-footer" }, { kind: "component", type: HeaderComponent, selector: "upd-header", inputs: ["style", "showSearchBar"] }, { kind: "component", type: SidebarComponent, selector: "upd-sidebar" }, { kind: "component", type: PageHeaderComponent, selector: "upd-page-header", inputs: ["model"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: VerticalSidebarLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-vertical-sidebar-layout', encapsulation: ViewEncapsulation.None, template: "<div class=\"page\">\n    <upd-sidebar></upd-sidebar>\n    <upd-header></upd-header>\n\n    <div class=\"page-wrapper\">\n        @if (showPageHeader) {\n            <upd-page-header [model]=\"pageHeader!\"></upd-page-header>\n        }\n        <div class=\"page-body\">\n            <div class=\"container-xl\">\n                <router-outlet></router-outlet>\n            </div>\n        </div>\n        <upd-footer></upd-footer>\n    </div>\n</div>\n" }]
+        }] });
+
+class VerticalSidebarLayoutModule {
+    constructor(translocoService) {
+        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,
+            FooterComponent,
+            HeaderComponent,
+            SidebarComponent,
+            PageHeaderComponent,
+            FooterCopyrightDirective], imports: [CommonModule,
+            RouterModule,
+            TranslocoModule,
+            UpdIconsModule,
+            UpdCoreLayoutModule,
+            UpdButtonModule,
+            UpdLinkModule], exports: [VerticalSidebarLayoutComponent,
+            FooterComponent,
+            HeaderComponent,
+            SidebarComponent,
+            PageHeaderComponent,
+            FooterCopyrightDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: VerticalSidebarLayoutModule, imports: [CommonModule,
+            RouterModule,
+            TranslocoModule,
+            UpdIconsModule,
+            UpdCoreLayoutModule,
+            UpdButtonModule,
+            UpdLinkModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: VerticalSidebarLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        TranslocoModule,
+                        UpdIconsModule,
+                        UpdCoreLayoutModule,
+                        UpdButtonModule,
+                        UpdLinkModule
+                    ],
+                    declarations: [
+                        VerticalSidebarLayoutComponent,
+                        FooterComponent,
+                        HeaderComponent,
+                        SidebarComponent,
+                        PageHeaderComponent,
+                        FooterCopyrightDirective
+                    ],
+                    exports: [
+                        VerticalSidebarLayoutComponent,
+                        FooterComponent,
+                        HeaderComponent,
+                        SidebarComponent,
+                        PageHeaderComponent,
+                        FooterCopyrightDirective
+                    ]
+                }]
+        }], 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: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: LoggedOutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-logged-out', template: "<p>logged-out works!</p>\n" }]
+        }] });
+
+class LoginComponent {
+    constructor() {
+        this.formGroup = model(new FormGroup({}));
+        this.formRows = [];
+        this.isSigningIn = signal(false);
+        this.layoutConfigService = inject(UpdLayoutConfigService);
+        this.config = this.layoutConfigService.config.securityLayoutConfig.loginPage;
+        this.bodyClasses = ['border-top-wide', this.border, 'd-flex', 'flex-column'];
+        this.authService = inject(AuthService);
+        this.layoutService = inject(LayoutService);
+    }
+    get border() {
+        return `border-${this.config.borderColor}`;
+    }
+    get linkClasses() {
+        return [`link-${this.config.linksColor}`];
+    }
+    get boxBgColor() {
+        return this.config.bgColor || (!!this.config.bgStyle ? `bg-${this.config.bgStyle}` : '') || 'bg-white';
+    }
+    ngOnInit() {
+        this.layoutService.addBodyClasses(this.boxBgColor);
+        if (this.config.layout !== 'cover') {
+            this.layoutService.addBodyClasses(...this.bodyClasses);
+        }
+        this.formRows = [
+            {
+                fields: [
+                    {
+                        name: 'username',
+                        type: DynamicFieldType.Input,
+                        colSize: { default: 12 },
+                        label: { text: 'UpDevs.Login.Email', isTranslated: false },
+                        validators: [Validators.required, Validators.minLength(3)]
+                    }
+                ]
+            },
+            {
+                fields: [
+                    {
+                        name: 'password',
+                        type: DynamicFieldType.Input,
+                        inputType: 'password',
+                        colSize: { default: 12 },
+                        label: { text: 'UpDevs.Login.Password', isTranslated: false },
+                        validators: [Validators.required, Validators.minLength(3)]
+                    }
+                ]
+            },
+            {
+                fields: [
+                    {
+                        name: 'rememberMe',
+                        type: DynamicFieldType.Checkbox,
+                        colSize: { default: 12 },
+                        label: { text: 'UpDevs.Login.RememberMe', isTranslated: false },
+                        initValue: false
+                    }
+                ]
+            }
+        ];
+    }
+    ngOnDestroy() {
+        this.layoutService.removeBodyClasses(this.boxBgColor);
+        if (this.config.layout !== 'cover') {
+            this.layoutService.removeBodyClasses(...this.bodyClasses);
+        }
+    }
+    login() {
+        this.isSigningIn.set(true);
+        this.authService.login(this.formGroup().value.username, this.formGroup().value.password)
+            .pipe(finalize(() => this.isSigningIn.set(false)))
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: LoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: LoginComponent, selector: "upd-login", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formGroup: "formGroupChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Login'\">\n    <div class=\"page page-center\">\n        @switch (config.layout) {\n            @case ('centered-box') {\n                <div class=\"container container-tight py-4\">\n                    <ng-container [ngTemplateOutlet]=\"loginCardTpl\"></ng-container>\n                </div>\n            }\n            @case ('box-with-picture') {\n                <div class=\"container container-normal py-4\">\n                    <div class=\"row align-items-center g-4\">\n                        <div class=\"col-lg\">\n                            <div class=\"container-tight\">\n                                <ng-container [ngTemplateOutlet]=\"loginCardTpl\"></ng-container>\n                            </div>\n                        </div>\n                        <div class=\"col-lg d-none d-lg-block\">\n                            <img height=\"300\" class=\"d-block mx-auto upd-right-login-image\" />\n                        </div>\n                    </div>\n                </div>\n            }\n            @case ('cover') {\n                <div class=\"row g-0 flex-fill\">\n                    <div class=\"col-12 col-lg-6 col-xl-4 border-top-wide d-flex flex-column justify-content-center\" [ngClass]=\"border\">\n                        <div class=\"container container-tight my-5 px-lg-5\">\n                            <ng-container [ngTemplateOutlet]=\"headerTpl\"></ng-container>\n\n                            <h2 class=\"h3 text-center mb-3\">\n                                {{ t('Title') }}\n                            </h2>\n\n                            <ng-container [ngTemplateOutlet]=\"loginFormTpl\"></ng-container>\n                            <ng-container [ngTemplateOutlet]=\"socialLoginTpl\"></ng-container>\n                            <ng-container [ngTemplateOutlet]=\"noAccountTpl\"></ng-container>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-lg-6 col-xl-8 d-none d-lg-block\">\n                        <div class=\"bg-cover h-100 min-vh-100 upd-right-login-cover-image\"></div>\n                    </div>\n                </div>\n            }\n        }\n    </div>\n\n    <ng-template #loginCardTpl>\n        <ng-container [ngTemplateOutlet]=\"headerTpl\"></ng-container>\n        <upd-card [removeBorder]=\"true\">\n            <div class=\"p-4\">\n                <h2 class=\"h2 text-center mb-4\">\n                    {{ t('Title') }}\n                </h2>\n                <ng-container [ngTemplateOutlet]=\"loginFormTpl\"></ng-container>\n            </div>\n            <ng-container [ngTemplateOutlet]=\"socialLoginTpl\"></ng-container>\n        </upd-card>\n        <ng-container [ngTemplateOutlet]=\"noAccountTpl\"></ng-container>\n    </ng-template>\n\n    <ng-template #loginFormTpl>\n        <upd-form [rows]=\"formRows\" [hasActionsSection]=\"false\" [(formGroup)]=\"formGroup\"></upd-form>\n        <div class=\"form-footer\">\n            <upd-button [colorStyle]=\"config.signInButtonColor\" (clicked)=\"login()\" [isLoading]=\"isSigningIn()\" customClasses=\"w-100\">\n                {{ t('SignIn') }}\n            </upd-button>\n            <div class=\"d-flex mt-2\">\n                <upd-link class=\"ms-auto\" [customClasses]=\"linkClasses\">{{ t('RecoverPassword') }}</upd-link>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-template #socialLoginTpl>\n        @if (config.socialLoginButtons.length > 0) {\n            <div class=\"hr-text\">\n                {{ t('Or') }}\n            </div>\n            <div class=\"card-body\">\n                <div class=\"row\">\n                    @for (btn of config.socialLoginButtons; track btn) {\n                        <div class=\"col\">\n                            <upd-button [model]=\"btn\"></upd-button>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </ng-template>\n\n    <ng-template #headerTpl>\n        <div class=\"text-center mb-4\">\n            <a href=\".\" class=\"navbar-brand navbar-brand-autodark\">\n                <img height=\"36\" class=\"navbar-brand-image upd-brand-logo\" />\n            </a>\n        </div>\n    </ng-template>\n\n    <ng-template #noAccountTpl>\n        <div class=\"text-center text-muted mt-3\">\n            {{ t('NoAccountYet') }}\n            <upd-link [customClasses]=\"linkClasses\">{{ t('SignUp') }}</upd-link>\n        </div>\n    </ng-template>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$3.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i2.LinkComponent, selector: "upd-link", inputs: ["href", "target", "customClasses", "isNavigation"], outputs: ["clicked"] }, { kind: "component", type: i6.CardComponent, selector: "upd-card", inputs: ["wrapperClasses", "title", "subtitle", "hoverEffect", "state", "type", "imagePosition", "bgColor", "stampIcon", "stampBackground", "statusBackground", "statusPosition", "ribbonBackground", "ribbonStyle", "ribbonIcon", "ribbonText", "rotate", "removeBorder", "useLightHeader", "showHeader", "isFooterTransparent", "footerText", "showProgressBar", "progress", "actions"] }, { kind: "component", type: i7.FormComponent, selector: "upd-form", inputs: ["rows", "layout", "title", "hasActionsSection", "isCard", "isDisabled", "isLoading", "isSaving", "formData", "formGroup"], outputs: ["initialized", "dataLoaded", "submitted", "formDataChange", "formGroupChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: LoginComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-login', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Login'\">\n    <div class=\"page page-center\">\n        @switch (config.layout) {\n            @case ('centered-box') {\n                <div class=\"container container-tight py-4\">\n                    <ng-container [ngTemplateOutlet]=\"loginCardTpl\"></ng-container>\n                </div>\n            }\n            @case ('box-with-picture') {\n                <div class=\"container container-normal py-4\">\n                    <div class=\"row align-items-center g-4\">\n                        <div class=\"col-lg\">\n                            <div class=\"container-tight\">\n                                <ng-container [ngTemplateOutlet]=\"loginCardTpl\"></ng-container>\n                            </div>\n                        </div>\n                        <div class=\"col-lg d-none d-lg-block\">\n                            <img height=\"300\" class=\"d-block mx-auto upd-right-login-image\" />\n                        </div>\n                    </div>\n                </div>\n            }\n            @case ('cover') {\n                <div class=\"row g-0 flex-fill\">\n                    <div class=\"col-12 col-lg-6 col-xl-4 border-top-wide d-flex flex-column justify-content-center\" [ngClass]=\"border\">\n                        <div class=\"container container-tight my-5 px-lg-5\">\n                            <ng-container [ngTemplateOutlet]=\"headerTpl\"></ng-container>\n\n                            <h2 class=\"h3 text-center mb-3\">\n                                {{ t('Title') }}\n                            </h2>\n\n                            <ng-container [ngTemplateOutlet]=\"loginFormTpl\"></ng-container>\n                            <ng-container [ngTemplateOutlet]=\"socialLoginTpl\"></ng-container>\n                            <ng-container [ngTemplateOutlet]=\"noAccountTpl\"></ng-container>\n                        </div>\n                    </div>\n                    <div class=\"col-12 col-lg-6 col-xl-8 d-none d-lg-block\">\n                        <div class=\"bg-cover h-100 min-vh-100 upd-right-login-cover-image\"></div>\n                    </div>\n                </div>\n            }\n        }\n    </div>\n\n    <ng-template #loginCardTpl>\n        <ng-container [ngTemplateOutlet]=\"headerTpl\"></ng-container>\n        <upd-card [removeBorder]=\"true\">\n            <div class=\"p-4\">\n                <h2 class=\"h2 text-center mb-4\">\n                    {{ t('Title') }}\n                </h2>\n                <ng-container [ngTemplateOutlet]=\"loginFormTpl\"></ng-container>\n            </div>\n            <ng-container [ngTemplateOutlet]=\"socialLoginTpl\"></ng-container>\n        </upd-card>\n        <ng-container [ngTemplateOutlet]=\"noAccountTpl\"></ng-container>\n    </ng-template>\n\n    <ng-template #loginFormTpl>\n        <upd-form [rows]=\"formRows\" [hasActionsSection]=\"false\" [(formGroup)]=\"formGroup\"></upd-form>\n        <div class=\"form-footer\">\n            <upd-button [colorStyle]=\"config.signInButtonColor\" (clicked)=\"login()\" [isLoading]=\"isSigningIn()\" customClasses=\"w-100\">\n                {{ t('SignIn') }}\n            </upd-button>\n            <div class=\"d-flex mt-2\">\n                <upd-link class=\"ms-auto\" [customClasses]=\"linkClasses\">{{ t('RecoverPassword') }}</upd-link>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-template #socialLoginTpl>\n        @if (config.socialLoginButtons.length > 0) {\n            <div class=\"hr-text\">\n                {{ t('Or') }}\n            </div>\n            <div class=\"card-body\">\n                <div class=\"row\">\n                    @for (btn of config.socialLoginButtons; track btn) {\n                        <div class=\"col\">\n                            <upd-button [model]=\"btn\"></upd-button>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </ng-template>\n\n    <ng-template #headerTpl>\n        <div class=\"text-center mb-4\">\n            <a href=\".\" class=\"navbar-brand navbar-brand-autodark\">\n                <img height=\"36\" class=\"navbar-brand-image upd-brand-logo\" />\n            </a>\n        </div>\n    </ng-template>\n\n    <ng-template #noAccountTpl>\n        <div class=\"text-center text-muted mt-3\">\n            {{ t('NoAccountYet') }}\n            <upd-link [customClasses]=\"linkClasses\">{{ t('SignUp') }}</upd-link>\n        </div>\n    </ng-template>\n</ng-container>\n" }]
+        }] });
+
+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: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: OauthCallbackComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-oauth-callback', template: "<p>oauth-callback works!</p>\n" }]
+        }] });
+
+/**
+ * Auth flow routes.
+ */
+const routes = [
+    { path: 'oauth/callback', component: OauthCallbackComponent },
+    { path: 'logged-out', component: LoggedOutComponent },
+    { 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$4.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] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AuthFlowRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forRoot(routes, { useHash: true })],
+                    exports: [RouterModule]
+                }]
+        }] });
+
+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,
+            OauthCallbackComponent,
+            LoggedOutComponent], imports: [CommonModule,
+            AuthFlowRoutingModule,
+            UpdButtonModule,
+            UpdIconsModule,
+            FormsModule,
+            TranslocoDirective,
+            UpdLinkModule,
+            UpdCardModule,
+            UpdFormModule], exports: [LoginComponent,
+            OauthCallbackComponent,
+            LoggedOutComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AuthFlowModule, imports: [CommonModule,
+            AuthFlowRoutingModule,
+            UpdButtonModule,
+            UpdIconsModule,
+            FormsModule,
+            UpdLinkModule,
+            UpdCardModule,
+            UpdFormModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AuthFlowModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        AuthFlowRoutingModule,
+                        UpdButtonModule,
+                        UpdIconsModule,
+                        FormsModule,
+                        TranslocoDirective,
+                        UpdLinkModule,
+                        UpdCardModule,
+                        UpdFormModule
+                    ],
+                    declarations: [
+                        LoginComponent,
+                        OauthCallbackComponent,
+                        LoggedOutComponent
+                    ],
+                    exports: [
+                        LoginComponent,
+                        OauthCallbackComponent,
+                        LoggedOutComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Layout module.
+ */
+class UpdLayoutModule {
+    /**
+     * Sets up the layout module with the provided configuration.
+     * @param config Configuration (See: #updsee[p:abstractions, i:UpdCoreLayoutConfig]).
+     */
+    static forRoot(config) {
+        return {
+            ngModule: UpdLayoutModule,
+            providers: [
+                { provide: LayoutConstants.defaultOptionsInjectionToken, useValue: config }
+            ]
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: UpdLayoutModule, imports: [CommonModule,
+            UpdCoreLayoutModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdLayoutModule, providers: [
+            UpdLayoutConfigService
+        ], imports: [CommonModule,
+            UpdCoreLayoutModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        UpdCoreLayoutModule
+                    ],
+                    providers: [
+                        UpdLayoutConfigService
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AuthFlowModule, AuthFlowRoutingModule, BasePageComponent, BlankLayoutComponent, BlankLayoutModule, FooterComponent, FooterCopyrightDirective, HeaderComponent, LoggedOutComponent, LoginComponent, OauthCallbackComponent, PageHeaderComponent, SidebarComponent, UpdLayoutConfigService, UpdLayoutModule, VerticalSidebarLayoutComponent, VerticalSidebarLayoutModule, routes };
+//# sourceMappingURL=updevs-components-layout.mjs.map