@open-rlb/ng-app 3.1.115 → 3.1.117

package/fesm2022/open-rlb-ng-app.mjs

@@ -35,6 +35,7 @@ const RLB_CFG_PAGES = new InjectionToken(`${RLB_CFG}:pages`);
 const RLB_CFG_ENV = new InjectionToken(`${RLB_CFG}:env`);
 const RLB_CFG_AUTH = new InjectionToken(`${RLB_CFG}:auth`);
 const RLB_APP_NAVCOMP = new InjectionToken(`rlb.app.navcomp`);
+const RLB_APP_SIDEBARCOMP = new InjectionToken(`rlb.app.sidebarcomp`);
 const RLB_CFG_ACL = new InjectionToken(`${RLB_CFG}:acl`);
 const RLB_AUTH_URL_HANDLER = new InjectionToken('rlb.auth.urlHandler');
 
@@ -380,6 +381,7 @@ const SidebarActions = createActionGroup({
         SetSearchVisible: props(),
         SetSettingsVisible: props(),
         SetSearchText: props(),
+        SetFooterComponent: props(),
     }
 });
 
@@ -391,7 +393,8 @@ const initialSidebarState = {
     searchVisible: true,
     settingsVisible: true,
     appsVisible: true,
-    searchText: null
+    searchText: null,
+    footerComponent: null
 };
 
 const aclFeatureKey = 'acl';
@@ -1722,7 +1725,6 @@ class CompanyInterceptor {
         this.config = inject(RLB_CFG);
     }
     intercept(req, next) {
-        console.log('HttpInterceptor');
         const authConfig = this.config.auth;
         const isAllowed = authConfig?.allowedUrls?.some(url => req.url.includes(url));
         if (!isAllowed || !authConfig?.enableCompanyInterceptor) {
@@ -1739,7 +1741,6 @@ class CompanyInterceptor {
                 params = params.set(storeKey, value);
             }
         }
-        ;
         const clonedReq = req.clone({ params });
         return next.handle(clonedReq);
     }
@@ -2296,6 +2297,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }] });
 
+class SidebarFooterComponentPipe {
+    constructor() {
+        this.config = inject(RLB_APP_SIDEBARCOMP);
+    }
+    transform(value) {
+        const t = this.config.footer.find(c => c.name === value)?.component;
+        if (!t) {
+            throw new Error(`No component found for name ${value}`);
+        }
+        return t;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarFooterComponentPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: SidebarFooterComponentPipe, isStandalone: true, name: "sidebarFooterComponent" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SidebarFooterComponentPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'sidebarFooterComponent'
+                }]
+        }] });
+
 class RlbRole {
     constructor() {
         this.appsService = inject(AppsService);
@@ -2373,6 +2395,7 @@ class AppTemplateComponent {
         this.sidearHasLogin = this.store.selectSignal((state) => state[sidebarsFeatureKey].loginVisible);
         this.sidearHasSearch = this.store.selectSignal((state) => state[sidebarsFeatureKey].searchVisible);
         this.sidebarItems = this.store.selectSignal((state) => state[sidebarsFeatureKey].items);
+        this.sidebarFooter = this.store.selectSignal((state) => state[sidebarsFeatureKey].footerComponent);
         this.sidearHasSettings = this.store.selectSignal((state) => state[sidebarsFeatureKey].settingsVisible);
         this.sidearAppsVisible = this.store.selectSignal((state) => state[sidebarsFeatureKey].appsVisible);
         this.navVisible = this.store.selectSignal((state) => state[navbarsFeatureKey].visible);
@@ -2424,7 +2447,7 @@ class AppTemplateComponent {
         this.mobileOffcanvas()?.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AppTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AppTemplateComponent, isStandalone: true, selector: "rlb-app-template", inputs: { modalContainerId: { classPropertyName: "modalContainerId", publicName: "modal-container-id", isSignal: true, isRequired: true, transformFunction: null }, breadcrumbInput: { classPropertyName: "breadcrumbInput", publicName: "breadcrumb", isSignal: true, isRequired: false, transformFunction: null }, toastContainerIds: { classPropertyName: "toastContainerIds", publicName: "toast-container-ids", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "mobileOffcanvas", first: true, predicate: ["mobileOffcanvas"], descendants: true, isSignal: true }, { propertyName: "mobileSettingsMenu", first: true, predicate: ["mobileSettingsMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"rlb-app\">\n  @if (navVisible()) {\n    <rlb-navbar [dark]=\"theme() === 'dark'\" [showSideBarToggler]=\"sidebarVisible()\"  expand=\"lg\" class=\"border-bottom py-1 rlb-navbar\">\n      @if (navHeader(); as header) {\n        <a rlb-navbar-brand href=\"#\">\n\n          @if (header.type === 'text') {\n            {{ header.text }}\n          }\n\n          @if (header.type === 'image') {\n            <img\n              [src]=\"header.src\"\n              [alt]=\"header.alt ?? 'Brand'\"\n              [height]=\"header.height ?? 40\"\n            />\n          }\n        </a>\n      }\n      @if (navSearchVisible()) {\n        <rlb-navbar-form>\n          <rlb-input-group class=\"my-1 mx-3\" validate>\n            <rlb-input type=\"search\" class=\"search-input\" placeholder=\"Search\" [(ngModel)]=\"navSearchText\"\n                       (keyup.enter)=\"setNavbarSearchText(navSearchText)\" name=\"search\" size=\"small\">\n              <button after rlb-button outline type=\"submit\" (click)=\"setNavbarSearchText(navSearchText)\" size=\"sm\">\n                <i class=\"bi bi-search\"></i>\n              </button>\n            </rlb-input>\n          </rlb-input-group>\n        </rlb-navbar-form>\n      }\n\n      <!-- MOBILE VIEWS -->\n      <div rlb-custom-navbar-items class=\"d-flex d-lg-none\">\n        @if (isAuthenticated()) {\n          <rlb-fab size=\"sm\" outline toggle=\"offcanvas\" toggle-target=\"mobileMenuOffcanvas\">\n            <i class=\"bi bi-three-dots-vertical\"></i>\n          </rlb-fab>\n\n          <rlb-offcanvas\n            #mobileOffcanvas\n            id=\"mobileMenuOffcanvas\"\n            [placement]=\"'end'\"\n            (statusChange)=\"onMobileMenuStatusChange($event)\"\n          >\n            <rlb-offcanvas-header class=\"border-bottom\">\n              <h5 rlb-offcanvas-title class=\"fw-bold mb-0\">Menu</h5>\n            </rlb-offcanvas-header>\n\n            <rlb-offcanvas-body class=\"p-0 overflow-x-hidden\">\n\n              <!-- Mobile Apps Grid -->\n              @if (navbarHasApps() && apps().length > 1) {\n                <div class=\"border-bottom pb-2\">\n                  <rlb-app-dropdown-selector\n                    mode=\"mobile\"\n                    [apps]=\"apps()\"\n                    [isAuthenticated]=\"isAuthenticated()\"\n                    (appSelected)=\"selectApp($event, 'app')\"\n                  />\n                </div>\n              }\n\n              <!-- Mobile Settings Carousel -->\n              @if (isAuthenticated() || navbarHasSettings()) {\n                <div class=\"pt-2\">\n                  <rlb-settings-dropdown-selector\n                    mode=\"mobile\"\n                    #mobileSettingsMenu\n                    [apps]=\"apps()\"\n                    [isAuthenticated]=\"isAuthenticated()\"\n                    (appSelected)=\"selectApp($event, 'settings')\"\n                  />\n                </div>\n              }\n\n            </rlb-offcanvas-body>\n          </rlb-offcanvas>\n        } @else {\n          <rlb-fab size=\"sm\" (click)=\"loginNav($event)\" [tooltip]=\"('core.account.login') |translate\">\n            <i class=\" bi bi-box-arrow-in-left\"></i>\n          </rlb-fab>\n        }\n\n      </div>\n\n      <rlb-navbar-items>\n        @for (navComponent of navLeftItems(); track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | leftComponent\"></ng-container>\n          </ng-container>\n        }\n      </rlb-navbar-items>\n\n      <rlb-navbar-items class=\"ms-auto align-items-center\">\n        @for (navComponent of navRightItems(); track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | rightComponent\"></ng-container>\n          </ng-container>\n        }\n        @if (separatorVisible() && isAuthenticated()) {\n          <rlb-navbar-separator />\n        }\n\n        <ng-container ngProjectAs=\"rlb-navbar-item\">\n          @if (navbarLayout() == 'default') {\n            @if (navbarHasLogin() && !isAuthenticated()) {\n              <rlb-navbar-item (click)=\"loginNav($event)\">\n                <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') |translate\">\n                  <i class=\" bi bi-box-arrow-in-left\"></i>\n                </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.account.login' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasLogin() && isAuthenticated()) {\n              <rlb-navbar-item [router-link]=\"'/profile'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.title') |translate\">\n                <i class=\"bi bi-person\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.account.title' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasSettings()) {\n              <rlb-navbar-item [router-link]=\"'/settings'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.settings.title') |translate\">\n                <i class=\"bi bi-gear\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.settings.title' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasApps() && apps().length > 1) {\n              <rlb-navbar-item [router-link]=\"'/apps'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') |translate\">\n                <i class=\"bi bi-grid-3x3-gap-fill\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.apps.button' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n          } @else if (navbarLayout() == 'dropdown') {\n            <!-- MODERN DROPDOWN MODE -->\n\n            <!--Unauthenticated Login -->\n            @if (navbarHasLogin() && !isAuthenticated()) {\n              <rlb-navbar-item (click)=\"loginNav($event)\">\n                <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') | translate\">\n                  <i class=\"bi bi-box-arrow-in-left fs-5\"></i>\n                </span>\n                <span class=\"ms-1 d-lg-none\">{{ 'core.account.login' | translate }}</span>\n              </rlb-navbar-item>\n            }\n\n            <!-- Profile & Settings Account Card -->\n            @if (navbarHasSettings() && isAuthenticated()) {\n              <rlb-settings-dropdown-selector\n                [apps]=\"apps()\"\n                [isAuthenticated]=\"isAuthenticated()\"\n                (appSelected)=\"selectApp($event, 'settings')\"\n              />\n            }\n\n            <!-- Apps Launcher -->\n            @if (navbarHasApps() && isAuthenticated() && apps().length > 1) {\n              <rlb-app-dropdown-selector\n                [apps]=\"apps()\"\n                [isAuthenticated]=\"isAuthenticated()\"\n                (appSelected)=\"selectApp($event, 'app')\"\n              />\n            }\n          }\n        </ng-container>\n      </rlb-navbar-items>\n    </rlb-navbar>\n  }\n  <div class=\"rlb-main-wrapper\">\n    @if (sidebarVisible()) {\n      <rlb-sidebar [dark]=\"theme() === 'dark'\" id=\"sidebar\" class=\"rlb-sidebar\">\n        @for (item of sidebarItems(); track $index) {\n          <rlb-sidebar-item\n            *roles=\"item.action\"\n            [icon]=\"item.icon\" [link]=\"item.url\"\n            [title]=\"item.title\" [label]=\"item.label\"\n            [badgeCounter]=\"item.badgeCounter\"\n            (click)=\"onSideBarItemClick(item)\"\n            >\n            {{item.label}}\n            @for (subitem of item.items || []; track $index) {\n              <rlb-sidebar-item\n                *roles=\"subitem.action\"\n                [icon]=\"subitem.icon\"\n                [link]=\"subitem.url\"\n                [title]=\"subitem.title\"\n                [label]=\"subitem.label\"\n                [badgeCounter]=\"subitem.badgeCounter\"\n                (click)=\"onSideBarItemClick(subitem)\"\n                >\n                {{subitem.label}}\n              </rlb-sidebar-item>\n            }\n          </rlb-sidebar-item>\n        }\n      </rlb-sidebar>\n    }\n    <div class=\"rlb-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<!--@if (modalContainerId()) {-->\n<!--  <rlb-modal-container [id]=\"modalContainerId()\" />-->\n<!--}-->\n\n<!--@if (toastContainerIds()) {-->\n<!--  @if (Array.isArray(toastContainerIds())) {-->\n<!--    @for (toastContainerId of toastContainerIds() | asMulti; track toastContainerId) {-->\n<!--      <rlb-toast-container [id]=\"toastContainerId\" />-->\n<!--    }-->\n<!--  } @else {-->\n<!--    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds() | asSingle\" />-->\n<!--  }-->\n<!--}-->\n", styles: [".separator{border-left:1px solid;padding:0 2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: NavbarComponent, selector: "rlb-navbar", inputs: ["dark", "showSideBarToggler", "color", "placement", "expand", "class", "enable-dropdown-toggler"] }, { kind: "directive", type: NavbarBrandDirective, selector: "[rlb-navbar-brand]" }, { kind: "component", type: NavbarFormComponent, selector: "rlb-navbar-form", inputs: ["role", "class"] }, { kind: "component", type: NavbarItemsComponent, selector: "rlb-navbar-items", inputs: ["scroll", "class"], outputs: ["click"] }, { kind: "component", type: NavbarItemComponent, selector: "rlb-navbar-item", inputs: ["disabled", "router-link", "class"], outputs: ["click"] }, { kind: "component", type: NavbarSeparatorComponent, selector: "rlb-navbar-separator", inputs: ["class"] }, { kind: "component", type: SidebarComponent, selector: "rlb-sidebar", inputs: ["dark", "rounded"] }, { kind: "component", type: SidebarItemComponent, selector: "rlb-sidebar-item", inputs: ["title", "icon", "label", "link", "badgeCounter"], outputs: ["click"] }, { kind: "component", type: OffcanvasComponent, selector: "rlb-offcanvas", inputs: ["id", "body-scroll", "scroll-backup", "close-manual", "placement", "responsive"], outputs: ["statusChange"] }, { kind: "component", type: OffcanvasHeaderComponent, selector: "rlb-offcanvas-header", inputs: ["offcanvasId"] }, { kind: "component", type: OffcanvasBodyComponent, selector: "rlb-offcanvas-body" }, { kind: "component", type: RlbFabComponent, selector: "rlb-fab", inputs: ["color", "size", "disabled", "outline", "position"] }, { kind: "component", type: InputGroupComponent, selector: "rlb-input-group", inputs: ["text", "validate", "size"] }, { kind: "component", type: InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "inputId", "extValidation", "enable-validation"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "directive", type: RlbRole, selector: "[roles]", inputs: ["roles"] }, { kind: "component", type: AppDropdownSelectorComponent, selector: "rlb-app-dropdown-selector", inputs: ["mode", "apps", "isAuthenticated"], outputs: ["appSelected"] }, { kind: "component", type: SettingsDropdownSelectorComponent, selector: "rlb-settings-dropdown-selector", inputs: ["mode", "apps", "isAuthenticated"], outputs: ["appSelected"] }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "directive", type: ToggleDirective, selector: "    button[toggle],    a[toggle],    rlb-navbar-item[toggle],    rlb-button-toolbar[toggle],    rlb-fab[toggle],", inputs: ["toggle", "toggle-target", "collapsed", "auto-close"] }, { kind: "pipe", type: i1$4.TranslatePipe, name: "translate" }, { kind: "pipe", type: LeftComponentPipe, name: "leftComponent" }, { kind: "pipe", type: RightComponentPipe, name: "rightComponent" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AppTemplateComponent, isStandalone: true, selector: "rlb-app-template", inputs: { modalContainerId: { classPropertyName: "modalContainerId", publicName: "modal-container-id", isSignal: true, isRequired: true, transformFunction: null }, breadcrumbInput: { classPropertyName: "breadcrumbInput", publicName: "breadcrumb", isSignal: true, isRequired: false, transformFunction: null }, toastContainerIds: { classPropertyName: "toastContainerIds", publicName: "toast-container-ids", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "mobileOffcanvas", first: true, predicate: ["mobileOffcanvas"], descendants: true, isSignal: true }, { propertyName: "mobileSettingsMenu", first: true, predicate: ["mobileSettingsMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"rlb-app\">\n  @if (navVisible()) {\n    <rlb-navbar [dark]=\"theme() === 'dark'\" [showSideBarToggler]=\"sidebarVisible()\"  expand=\"lg\" class=\"border-bottom py-1 rlb-navbar\">\n      @if (navHeader(); as header) {\n        <a rlb-navbar-brand href=\"#\">\n\n          @if (header.type === 'text') {\n            {{ header.text }}\n          }\n\n          @if (header.type === 'image') {\n            <img\n              [src]=\"header.src\"\n              [alt]=\"header.alt ?? 'Brand'\"\n              [height]=\"header.height ?? 40\"\n            />\n          }\n        </a>\n      }\n      @if (navSearchVisible()) {\n        <rlb-navbar-form>\n          <rlb-input-group class=\"my-1 mx-3\" validate>\n            <rlb-input type=\"search\" class=\"search-input\" placeholder=\"Search\" [(ngModel)]=\"navSearchText\"\n                       (keyup.enter)=\"setNavbarSearchText(navSearchText)\" name=\"search\" size=\"small\">\n              <button after rlb-button outline type=\"submit\" (click)=\"setNavbarSearchText(navSearchText)\" size=\"sm\">\n                <i class=\"bi bi-search\"></i>\n              </button>\n            </rlb-input>\n          </rlb-input-group>\n        </rlb-navbar-form>\n      }\n\n      <!-- MOBILE VIEWS -->\n      <div rlb-custom-navbar-items class=\"d-flex d-lg-none\">\n        @if (isAuthenticated()) {\n          <rlb-fab size=\"sm\" outline toggle=\"offcanvas\" toggle-target=\"mobileMenuOffcanvas\">\n            <i class=\"bi bi-three-dots-vertical\"></i>\n          </rlb-fab>\n\n          <rlb-offcanvas\n            #mobileOffcanvas\n            id=\"mobileMenuOffcanvas\"\n            [placement]=\"'end'\"\n            (statusChange)=\"onMobileMenuStatusChange($event)\"\n          >\n            <rlb-offcanvas-header class=\"border-bottom\">\n              <h5 rlb-offcanvas-title class=\"fw-bold mb-0\">Menu</h5>\n            </rlb-offcanvas-header>\n\n            <rlb-offcanvas-body class=\"p-0 overflow-x-hidden\">\n\n              <!-- Mobile Apps Grid -->\n              @if (navbarHasApps() && apps().length > 1) {\n                <div class=\"border-bottom pb-2\">\n                  <rlb-app-dropdown-selector\n                    mode=\"mobile\"\n                    [apps]=\"apps()\"\n                    [isAuthenticated]=\"isAuthenticated()\"\n                    (appSelected)=\"selectApp($event, 'app')\"\n                  />\n                </div>\n              }\n\n              <!-- Mobile Settings Carousel -->\n              @if (isAuthenticated() || navbarHasSettings()) {\n                <div class=\"pt-2\">\n                  <rlb-settings-dropdown-selector\n                    mode=\"mobile\"\n                    #mobileSettingsMenu\n                    [apps]=\"apps()\"\n                    [isAuthenticated]=\"isAuthenticated()\"\n                    (appSelected)=\"selectApp($event, 'settings')\"\n                  />\n                </div>\n              }\n\n            </rlb-offcanvas-body>\n          </rlb-offcanvas>\n        } @else {\n          <rlb-fab size=\"sm\" (click)=\"loginNav($event)\" [tooltip]=\"('core.account.login') |translate\">\n            <i class=\" bi bi-box-arrow-in-left\"></i>\n          </rlb-fab>\n        }\n\n      </div>\n\n      <rlb-navbar-items>\n        @for (navComponent of navLeftItems(); track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | leftComponent\"></ng-container>\n          </ng-container>\n        }\n      </rlb-navbar-items>\n\n      <rlb-navbar-items class=\"ms-auto align-items-center\">\n        @for (navComponent of navRightItems(); track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | rightComponent\"></ng-container>\n          </ng-container>\n        }\n        @if (separatorVisible() && isAuthenticated()) {\n          <rlb-navbar-separator />\n        }\n\n        <ng-container ngProjectAs=\"rlb-navbar-item\">\n          @if (navbarLayout() == 'default') {\n            @if (navbarHasLogin() && !isAuthenticated()) {\n              <rlb-navbar-item (click)=\"loginNav($event)\">\n                <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') |translate\">\n                  <i class=\" bi bi-box-arrow-in-left\"></i>\n                </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.account.login' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasLogin() && isAuthenticated()) {\n              <rlb-navbar-item [router-link]=\"'/profile'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.title') |translate\">\n                <i class=\"bi bi-person\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.account.title' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasSettings()) {\n              <rlb-navbar-item [router-link]=\"'/settings'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.settings.title') |translate\">\n                <i class=\"bi bi-gear\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.settings.title' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasApps() && apps().length > 1) {\n              <rlb-navbar-item [router-link]=\"'/apps'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') |translate\">\n                <i class=\"bi bi-grid-3x3-gap-fill\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.apps.button' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n          } @else if (navbarLayout() == 'dropdown') {\n            <!-- MODERN DROPDOWN MODE -->\n\n            <!--Unauthenticated Login -->\n            @if (navbarHasLogin() && !isAuthenticated()) {\n              <rlb-navbar-item (click)=\"loginNav($event)\">\n                <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') | translate\">\n                  <i class=\"bi bi-box-arrow-in-left fs-5\"></i>\n                </span>\n                <span class=\"ms-1 d-lg-none\">{{ 'core.account.login' | translate }}</span>\n              </rlb-navbar-item>\n            }\n\n            <!-- Profile & Settings Account Card -->\n            @if (navbarHasSettings() && isAuthenticated()) {\n              <rlb-settings-dropdown-selector\n                [apps]=\"apps()\"\n                [isAuthenticated]=\"isAuthenticated()\"\n                (appSelected)=\"selectApp($event, 'settings')\"\n              />\n            }\n\n            <!-- Apps Launcher -->\n            @if (navbarHasApps() && isAuthenticated() && apps().length > 1) {\n              <rlb-app-dropdown-selector\n                [apps]=\"apps()\"\n                [isAuthenticated]=\"isAuthenticated()\"\n                (appSelected)=\"selectApp($event, 'app')\"\n              />\n            }\n          }\n        </ng-container>\n      </rlb-navbar-items>\n    </rlb-navbar>\n  }\n  <div class=\"rlb-main-wrapper\">\n    @if (sidebarVisible()) {\n      <rlb-sidebar [dark]=\"theme() === 'dark'\" id=\"sidebar\" class=\"rlb-sidebar\">\n        @for (item of sidebarItems(); track $index) {\n          <rlb-sidebar-item\n            *roles=\"item.action\"\n            [icon]=\"item.icon\" [link]=\"item.url\"\n            [title]=\"item.title\" [label]=\"item.label\"\n            [badgeCounter]=\"item.badgeCounter\"\n            (click)=\"onSideBarItemClick(item)\"\n            >\n            {{item.label}}\n            @for (subitem of item.items || []; track $index) {\n              <rlb-sidebar-item\n                *roles=\"subitem.action\"\n                [icon]=\"subitem.icon\"\n                [link]=\"subitem.url\"\n                [title]=\"subitem.title\"\n                [label]=\"subitem.label\"\n                [badgeCounter]=\"subitem.badgeCounter\"\n                (click)=\"onSideBarItemClick(subitem)\"\n                >\n                {{subitem.label}}\n              </rlb-sidebar-item>\n            }\n          </rlb-sidebar-item>\n        }\n        @if (sidebarFooter(); as footerName) {\n          <div rlb-sidebar-footer class=\"mt-auto\">\n            <ng-container *ngComponentOutlet=\"footerName | sidebarFooterComponent\"></ng-container>\n          </div>\n        }\n      </rlb-sidebar>\n    }\n    <div class=\"rlb-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<!--@if (modalContainerId()) {-->\n<!--  <rlb-modal-container [id]=\"modalContainerId()\" />-->\n<!--}-->\n\n<!--@if (toastContainerIds()) {-->\n<!--  @if (Array.isArray(toastContainerIds())) {-->\n<!--    @for (toastContainerId of toastContainerIds() | asMulti; track toastContainerId) {-->\n<!--      <rlb-toast-container [id]=\"toastContainerId\" />-->\n<!--    }-->\n<!--  } @else {-->\n<!--    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds() | asSingle\" />-->\n<!--  }-->\n<!--}-->\n", styles: [".separator{border-left:1px solid;padding:0 2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: NavbarComponent, selector: "rlb-navbar", inputs: ["dark", "showSideBarToggler", "color", "placement", "expand", "class", "enable-dropdown-toggler"] }, { kind: "directive", type: NavbarBrandDirective, selector: "[rlb-navbar-brand]" }, { kind: "component", type: NavbarFormComponent, selector: "rlb-navbar-form", inputs: ["role", "class"] }, { kind: "component", type: NavbarItemsComponent, selector: "rlb-navbar-items", inputs: ["scroll", "class"], outputs: ["click"] }, { kind: "component", type: NavbarItemComponent, selector: "rlb-navbar-item", inputs: ["disabled", "router-link", "class"], outputs: ["click"] }, { kind: "component", type: NavbarSeparatorComponent, selector: "rlb-navbar-separator", inputs: ["class"] }, { kind: "component", type: SidebarComponent, selector: "rlb-sidebar", inputs: ["dark", "rounded"] }, { kind: "component", type: SidebarItemComponent, selector: "rlb-sidebar-item", inputs: ["title", "icon", "label", "link", "badgeCounter"], outputs: ["click"] }, { kind: "component", type: OffcanvasComponent, selector: "rlb-offcanvas", inputs: ["id", "body-scroll", "scroll-backup", "close-manual", "placement", "responsive"], outputs: ["statusChange"] }, { kind: "component", type: OffcanvasHeaderComponent, selector: "rlb-offcanvas-header", inputs: ["offcanvasId"] }, { kind: "component", type: OffcanvasBodyComponent, selector: "rlb-offcanvas-body" }, { kind: "component", type: RlbFabComponent, selector: "rlb-fab", inputs: ["color", "size", "disabled", "outline", "position"] }, { kind: "component", type: InputGroupComponent, selector: "rlb-input-group", inputs: ["text", "validate", "size"] }, { kind: "component", type: InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "inputId", "extValidation", "enable-validation"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "directive", type: RlbRole, selector: "[roles]", inputs: ["roles"] }, { kind: "component", type: AppDropdownSelectorComponent, selector: "rlb-app-dropdown-selector", inputs: ["mode", "apps", "isAuthenticated"], outputs: ["appSelected"] }, { kind: "component", type: SettingsDropdownSelectorComponent, selector: "rlb-settings-dropdown-selector", inputs: ["mode", "apps", "isAuthenticated"], outputs: ["appSelected"] }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "directive", type: ToggleDirective, selector: "    button[toggle],    a[toggle],    rlb-navbar-item[toggle],    rlb-button-toolbar[toggle],    rlb-fab[toggle],", inputs: ["toggle", "toggle-target", "collapsed", "auto-close"] }, { kind: "pipe", type: i1$4.TranslatePipe, name: "translate" }, { kind: "pipe", type: LeftComponentPipe, name: "leftComponent" }, { kind: "pipe", type: RightComponentPipe, name: "rightComponent" }, { kind: "pipe", type: SidebarFooterComponentPipe, name: "sidebarFooterComponent" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AppTemplateComponent, decorators: [{
             type: Component,
@@ -2451,12 +2474,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         TooltipDirective,
                         LeftComponentPipe,
                         RightComponentPipe,
+                        SidebarFooterComponentPipe,
                         RlbRole,
                         AppDropdownSelectorComponent,
                         SettingsDropdownSelectorComponent,
                         ButtonComponent,
                         ToggleDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rlb-app\">\n  @if (navVisible()) {\n    <rlb-navbar [dark]=\"theme() === 'dark'\" [showSideBarToggler]=\"sidebarVisible()\"  expand=\"lg\" class=\"border-bottom py-1 rlb-navbar\">\n      @if (navHeader(); as header) {\n        <a rlb-navbar-brand href=\"#\">\n\n          @if (header.type === 'text') {\n            {{ header.text }}\n          }\n\n          @if (header.type === 'image') {\n            <img\n              [src]=\"header.src\"\n              [alt]=\"header.alt ?? 'Brand'\"\n              [height]=\"header.height ?? 40\"\n            />\n          }\n        </a>\n      }\n      @if (navSearchVisible()) {\n        <rlb-navbar-form>\n          <rlb-input-group class=\"my-1 mx-3\" validate>\n            <rlb-input type=\"search\" class=\"search-input\" placeholder=\"Search\" [(ngModel)]=\"navSearchText\"\n                       (keyup.enter)=\"setNavbarSearchText(navSearchText)\" name=\"search\" size=\"small\">\n              <button after rlb-button outline type=\"submit\" (click)=\"setNavbarSearchText(navSearchText)\" size=\"sm\">\n                <i class=\"bi bi-search\"></i>\n              </button>\n            </rlb-input>\n          </rlb-input-group>\n        </rlb-navbar-form>\n      }\n\n      <!-- MOBILE VIEWS -->\n      <div rlb-custom-navbar-items class=\"d-flex d-lg-none\">\n        @if (isAuthenticated()) {\n          <rlb-fab size=\"sm\" outline toggle=\"offcanvas\" toggle-target=\"mobileMenuOffcanvas\">\n            <i class=\"bi bi-three-dots-vertical\"></i>\n          </rlb-fab>\n\n          <rlb-offcanvas\n            #mobileOffcanvas\n            id=\"mobileMenuOffcanvas\"\n            [placement]=\"'end'\"\n            (statusChange)=\"onMobileMenuStatusChange($event)\"\n          >\n            <rlb-offcanvas-header class=\"border-bottom\">\n              <h5 rlb-offcanvas-title class=\"fw-bold mb-0\">Menu</h5>\n            </rlb-offcanvas-header>\n\n            <rlb-offcanvas-body class=\"p-0 overflow-x-hidden\">\n\n              <!-- Mobile Apps Grid -->\n              @if (navbarHasApps() && apps().length > 1) {\n                <div class=\"border-bottom pb-2\">\n                  <rlb-app-dropdown-selector\n                    mode=\"mobile\"\n                    [apps]=\"apps()\"\n                    [isAuthenticated]=\"isAuthenticated()\"\n                    (appSelected)=\"selectApp($event, 'app')\"\n                  />\n                </div>\n              }\n\n              <!-- Mobile Settings Carousel -->\n              @if (isAuthenticated() || navbarHasSettings()) {\n                <div class=\"pt-2\">\n                  <rlb-settings-dropdown-selector\n                    mode=\"mobile\"\n                    #mobileSettingsMenu\n                    [apps]=\"apps()\"\n                    [isAuthenticated]=\"isAuthenticated()\"\n                    (appSelected)=\"selectApp($event, 'settings')\"\n                  />\n                </div>\n              }\n\n            </rlb-offcanvas-body>\n          </rlb-offcanvas>\n        } @else {\n          <rlb-fab size=\"sm\" (click)=\"loginNav($event)\" [tooltip]=\"('core.account.login') |translate\">\n            <i class=\" bi bi-box-arrow-in-left\"></i>\n          </rlb-fab>\n        }\n\n      </div>\n\n      <rlb-navbar-items>\n        @for (navComponent of navLeftItems(); track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | leftComponent\"></ng-container>\n          </ng-container>\n        }\n      </rlb-navbar-items>\n\n      <rlb-navbar-items class=\"ms-auto align-items-center\">\n        @for (navComponent of navRightItems(); track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | rightComponent\"></ng-container>\n          </ng-container>\n        }\n        @if (separatorVisible() && isAuthenticated()) {\n          <rlb-navbar-separator />\n        }\n\n        <ng-container ngProjectAs=\"rlb-navbar-item\">\n          @if (navbarLayout() == 'default') {\n            @if (navbarHasLogin() && !isAuthenticated()) {\n              <rlb-navbar-item (click)=\"loginNav($event)\">\n                <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') |translate\">\n                  <i class=\" bi bi-box-arrow-in-left\"></i>\n                </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.account.login' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasLogin() && isAuthenticated()) {\n              <rlb-navbar-item [router-link]=\"'/profile'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.title') |translate\">\n                <i class=\"bi bi-person\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.account.title' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasSettings()) {\n              <rlb-navbar-item [router-link]=\"'/settings'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.settings.title') |translate\">\n                <i class=\"bi bi-gear\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.settings.title' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasApps() && apps().length > 1) {\n              <rlb-navbar-item [router-link]=\"'/apps'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') |translate\">\n                <i class=\"bi bi-grid-3x3-gap-fill\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.apps.button' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n          } @else if (navbarLayout() == 'dropdown') {\n            <!-- MODERN DROPDOWN MODE -->\n\n            <!--Unauthenticated Login -->\n            @if (navbarHasLogin() && !isAuthenticated()) {\n              <rlb-navbar-item (click)=\"loginNav($event)\">\n                <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') | translate\">\n                  <i class=\"bi bi-box-arrow-in-left fs-5\"></i>\n                </span>\n                <span class=\"ms-1 d-lg-none\">{{ 'core.account.login' | translate }}</span>\n              </rlb-navbar-item>\n            }\n\n            <!-- Profile & Settings Account Card -->\n            @if (navbarHasSettings() && isAuthenticated()) {\n              <rlb-settings-dropdown-selector\n                [apps]=\"apps()\"\n                [isAuthenticated]=\"isAuthenticated()\"\n                (appSelected)=\"selectApp($event, 'settings')\"\n              />\n            }\n\n            <!-- Apps Launcher -->\n            @if (navbarHasApps() && isAuthenticated() && apps().length > 1) {\n              <rlb-app-dropdown-selector\n                [apps]=\"apps()\"\n                [isAuthenticated]=\"isAuthenticated()\"\n                (appSelected)=\"selectApp($event, 'app')\"\n              />\n            }\n          }\n        </ng-container>\n      </rlb-navbar-items>\n    </rlb-navbar>\n  }\n  <div class=\"rlb-main-wrapper\">\n    @if (sidebarVisible()) {\n      <rlb-sidebar [dark]=\"theme() === 'dark'\" id=\"sidebar\" class=\"rlb-sidebar\">\n        @for (item of sidebarItems(); track $index) {\n          <rlb-sidebar-item\n            *roles=\"item.action\"\n            [icon]=\"item.icon\" [link]=\"item.url\"\n            [title]=\"item.title\" [label]=\"item.label\"\n            [badgeCounter]=\"item.badgeCounter\"\n            (click)=\"onSideBarItemClick(item)\"\n            >\n            {{item.label}}\n            @for (subitem of item.items || []; track $index) {\n              <rlb-sidebar-item\n                *roles=\"subitem.action\"\n                [icon]=\"subitem.icon\"\n                [link]=\"subitem.url\"\n                [title]=\"subitem.title\"\n                [label]=\"subitem.label\"\n                [badgeCounter]=\"subitem.badgeCounter\"\n                (click)=\"onSideBarItemClick(subitem)\"\n                >\n                {{subitem.label}}\n              </rlb-sidebar-item>\n            }\n          </rlb-sidebar-item>\n        }\n      </rlb-sidebar>\n    }\n    <div class=\"rlb-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<!--@if (modalContainerId()) {-->\n<!--  <rlb-modal-container [id]=\"modalContainerId()\" />-->\n<!--}-->\n\n<!--@if (toastContainerIds()) {-->\n<!--  @if (Array.isArray(toastContainerIds())) {-->\n<!--    @for (toastContainerId of toastContainerIds() | asMulti; track toastContainerId) {-->\n<!--      <rlb-toast-container [id]=\"toastContainerId\" />-->\n<!--    }-->\n<!--  } @else {-->\n<!--    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds() | asSingle\" />-->\n<!--  }-->\n<!--}-->\n", styles: [".separator{border-left:1px solid;padding:0 2px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rlb-app\">\n  @if (navVisible()) {\n    <rlb-navbar [dark]=\"theme() === 'dark'\" [showSideBarToggler]=\"sidebarVisible()\"  expand=\"lg\" class=\"border-bottom py-1 rlb-navbar\">\n      @if (navHeader(); as header) {\n        <a rlb-navbar-brand href=\"#\">\n\n          @if (header.type === 'text') {\n            {{ header.text }}\n          }\n\n          @if (header.type === 'image') {\n            <img\n              [src]=\"header.src\"\n              [alt]=\"header.alt ?? 'Brand'\"\n              [height]=\"header.height ?? 40\"\n            />\n          }\n        </a>\n      }\n      @if (navSearchVisible()) {\n        <rlb-navbar-form>\n          <rlb-input-group class=\"my-1 mx-3\" validate>\n            <rlb-input type=\"search\" class=\"search-input\" placeholder=\"Search\" [(ngModel)]=\"navSearchText\"\n                       (keyup.enter)=\"setNavbarSearchText(navSearchText)\" name=\"search\" size=\"small\">\n              <button after rlb-button outline type=\"submit\" (click)=\"setNavbarSearchText(navSearchText)\" size=\"sm\">\n                <i class=\"bi bi-search\"></i>\n              </button>\n            </rlb-input>\n          </rlb-input-group>\n        </rlb-navbar-form>\n      }\n\n      <!-- MOBILE VIEWS -->\n      <div rlb-custom-navbar-items class=\"d-flex d-lg-none\">\n        @if (isAuthenticated()) {\n          <rlb-fab size=\"sm\" outline toggle=\"offcanvas\" toggle-target=\"mobileMenuOffcanvas\">\n            <i class=\"bi bi-three-dots-vertical\"></i>\n          </rlb-fab>\n\n          <rlb-offcanvas\n            #mobileOffcanvas\n            id=\"mobileMenuOffcanvas\"\n            [placement]=\"'end'\"\n            (statusChange)=\"onMobileMenuStatusChange($event)\"\n          >\n            <rlb-offcanvas-header class=\"border-bottom\">\n              <h5 rlb-offcanvas-title class=\"fw-bold mb-0\">Menu</h5>\n            </rlb-offcanvas-header>\n\n            <rlb-offcanvas-body class=\"p-0 overflow-x-hidden\">\n\n              <!-- Mobile Apps Grid -->\n              @if (navbarHasApps() && apps().length > 1) {\n                <div class=\"border-bottom pb-2\">\n                  <rlb-app-dropdown-selector\n                    mode=\"mobile\"\n                    [apps]=\"apps()\"\n                    [isAuthenticated]=\"isAuthenticated()\"\n                    (appSelected)=\"selectApp($event, 'app')\"\n                  />\n                </div>\n              }\n\n              <!-- Mobile Settings Carousel -->\n              @if (isAuthenticated() || navbarHasSettings()) {\n                <div class=\"pt-2\">\n                  <rlb-settings-dropdown-selector\n                    mode=\"mobile\"\n                    #mobileSettingsMenu\n                    [apps]=\"apps()\"\n                    [isAuthenticated]=\"isAuthenticated()\"\n                    (appSelected)=\"selectApp($event, 'settings')\"\n                  />\n                </div>\n              }\n\n            </rlb-offcanvas-body>\n          </rlb-offcanvas>\n        } @else {\n          <rlb-fab size=\"sm\" (click)=\"loginNav($event)\" [tooltip]=\"('core.account.login') |translate\">\n            <i class=\" bi bi-box-arrow-in-left\"></i>\n          </rlb-fab>\n        }\n\n      </div>\n\n      <rlb-navbar-items>\n        @for (navComponent of navLeftItems(); track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | leftComponent\"></ng-container>\n          </ng-container>\n        }\n      </rlb-navbar-items>\n\n      <rlb-navbar-items class=\"ms-auto align-items-center\">\n        @for (navComponent of navRightItems(); track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | rightComponent\"></ng-container>\n          </ng-container>\n        }\n        @if (separatorVisible() && isAuthenticated()) {\n          <rlb-navbar-separator />\n        }\n\n        <ng-container ngProjectAs=\"rlb-navbar-item\">\n          @if (navbarLayout() == 'default') {\n            @if (navbarHasLogin() && !isAuthenticated()) {\n              <rlb-navbar-item (click)=\"loginNav($event)\">\n                <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') |translate\">\n                  <i class=\" bi bi-box-arrow-in-left\"></i>\n                </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.account.login' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasLogin() && isAuthenticated()) {\n              <rlb-navbar-item [router-link]=\"'/profile'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.title') |translate\">\n                <i class=\"bi bi-person\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.account.title' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasSettings()) {\n              <rlb-navbar-item [router-link]=\"'/settings'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.settings.title') |translate\">\n                <i class=\"bi bi-gear\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.settings.title' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasApps() && apps().length > 1) {\n              <rlb-navbar-item [router-link]=\"'/apps'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') |translate\">\n                <i class=\"bi bi-grid-3x3-gap-fill\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.apps.button' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n          } @else if (navbarLayout() == 'dropdown') {\n            <!-- MODERN DROPDOWN MODE -->\n\n            <!--Unauthenticated Login -->\n            @if (navbarHasLogin() && !isAuthenticated()) {\n              <rlb-navbar-item (click)=\"loginNav($event)\">\n                <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') | translate\">\n                  <i class=\"bi bi-box-arrow-in-left fs-5\"></i>\n                </span>\n                <span class=\"ms-1 d-lg-none\">{{ 'core.account.login' | translate }}</span>\n              </rlb-navbar-item>\n            }\n\n            <!-- Profile & Settings Account Card -->\n            @if (navbarHasSettings() && isAuthenticated()) {\n              <rlb-settings-dropdown-selector\n                [apps]=\"apps()\"\n                [isAuthenticated]=\"isAuthenticated()\"\n                (appSelected)=\"selectApp($event, 'settings')\"\n              />\n            }\n\n            <!-- Apps Launcher -->\n            @if (navbarHasApps() && isAuthenticated() && apps().length > 1) {\n              <rlb-app-dropdown-selector\n                [apps]=\"apps()\"\n                [isAuthenticated]=\"isAuthenticated()\"\n                (appSelected)=\"selectApp($event, 'app')\"\n              />\n            }\n          }\n        </ng-container>\n      </rlb-navbar-items>\n    </rlb-navbar>\n  }\n  <div class=\"rlb-main-wrapper\">\n    @if (sidebarVisible()) {\n      <rlb-sidebar [dark]=\"theme() === 'dark'\" id=\"sidebar\" class=\"rlb-sidebar\">\n        @for (item of sidebarItems(); track $index) {\n          <rlb-sidebar-item\n            *roles=\"item.action\"\n            [icon]=\"item.icon\" [link]=\"item.url\"\n            [title]=\"item.title\" [label]=\"item.label\"\n            [badgeCounter]=\"item.badgeCounter\"\n            (click)=\"onSideBarItemClick(item)\"\n            >\n            {{item.label}}\n            @for (subitem of item.items || []; track $index) {\n              <rlb-sidebar-item\n                *roles=\"subitem.action\"\n                [icon]=\"subitem.icon\"\n                [link]=\"subitem.url\"\n                [title]=\"subitem.title\"\n                [label]=\"subitem.label\"\n                [badgeCounter]=\"subitem.badgeCounter\"\n                (click)=\"onSideBarItemClick(subitem)\"\n                >\n                {{subitem.label}}\n              </rlb-sidebar-item>\n            }\n          </rlb-sidebar-item>\n        }\n        @if (sidebarFooter(); as footerName) {\n          <div rlb-sidebar-footer class=\"mt-auto\">\n            <ng-container *ngComponentOutlet=\"footerName | sidebarFooterComponent\"></ng-container>\n          </div>\n        }\n      </rlb-sidebar>\n    }\n    <div class=\"rlb-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<!--@if (modalContainerId()) {-->\n<!--  <rlb-modal-container [id]=\"modalContainerId()\" />-->\n<!--}-->\n\n<!--@if (toastContainerIds()) {-->\n<!--  @if (Array.isArray(toastContainerIds())) {-->\n<!--    @for (toastContainerId of toastContainerIds() | asMulti; track toastContainerId) {-->\n<!--      <rlb-toast-container [id]=\"toastContainerId\" />-->\n<!--    }-->\n<!--  } @else {-->\n<!--    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds() | asSingle\" />-->\n<!--  }-->\n<!--}-->\n", styles: [".separator{border-left:1px solid;padding:0 2px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { modalContainerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal-container-id", required: true }] }], breadcrumbInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumb", required: false }] }], toastContainerIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast-container-ids", required: true }] }], mobileOffcanvas: [{ type: i0.ViewChild, args: ['mobileOffcanvas', { isSignal: true }] }], mobileSettingsMenu: [{ type: i0.ViewChild, args: ['mobileSettingsMenu', { isSignal: true }] }] } });
 
 class BaseComponent {
@@ -3464,7 +3488,7 @@ const { selectNavbarState } = navbarsFeature;
 
 const sidebarsFeature = createFeature({
     name: sidebarsFeatureKey,
-    reducer: createReducer(initialSidebarState, on(SidebarActions.setItems, (state, { items }) => ({ ...state, items })), on(SidebarActions.setVisible, (state, { visible }) => ({ ...state, visible })), on(SidebarActions.setLoginVisible, (state, { visible }) => ({ ...state, loginVisible: visible })), on(SidebarActions.setSearchVisible, (state, { visible }) => ({ ...state, searchVisible: visible })), on(SidebarActions.setSettingsVisible, (state, { visible }) => ({ ...state, settingsVisible: visible })), on(SidebarActions.setSearchText, (state, { text }) => ({ ...state, searchText: text })), on(SidebarActions.setAppsVisible, (state, { visible }) => ({ ...state, appsVisible: visible })))
+    reducer: createReducer(initialSidebarState, on(SidebarActions.setItems, (state, { items }) => ({ ...state, items })), on(SidebarActions.setVisible, (state, { visible }) => ({ ...state, visible })), on(SidebarActions.setLoginVisible, (state, { visible }) => ({ ...state, loginVisible: visible })), on(SidebarActions.setSearchVisible, (state, { visible }) => ({ ...state, searchVisible: visible })), on(SidebarActions.setSettingsVisible, (state, { visible }) => ({ ...state, settingsVisible: visible })), on(SidebarActions.setSearchText, (state, { text }) => ({ ...state, searchText: text })), on(SidebarActions.setAppsVisible, (state, { visible }) => ({ ...state, appsVisible: visible })), on(SidebarActions.setFooterComponent, (state, { name }) => ({ ...state, footerComponent: name })))
 });
 const sidebarReducer = sidebarsFeature.reducer;
 const { selectSidebarState } = sidebarsFeature;
@@ -3643,5 +3667,5 @@ function flattenRoutes(routes, parentPath = '') {
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractMdService, AbstractSupportService, AclStore, AppBreadcrumbService, AppContainerComponent, AppContextActions, AppContextActionsInternal, AppLoggerService, AppStorageService, AppTemplateComponent, AppsService, AsMultiPipe, AsSinglePipe, AuthActions, AuthActionsInternal, AuthFeatureService, AuthenticationService, AutolinkPipe, BaseComponent, CmsComponent, CmsPipe, ContentComponent, CookiesService, ErrorManagementService, ErrorModalComponent, KeycloakProfileService, LanguageService, LeftComponentPipe, LocalCacheService, ModalAppsComponent, NavbarActions, NavbarActionsInternal, OauthPasswordService, ParseJwtService, PwaUpdaterService, RLB_APPS, RLB_APP_NAVCOMP, RLB_AUTH_URL_HANDLER, RLB_CFG, RLB_CFG_ACL, RLB_CFG_AUTH, RLB_CFG_CMS, RLB_CFG_ENV, RLB_CFG_I18N, RLB_CFG_PAGES, RLB_INIT_PROVIDER, RightComponentPipe, RlbAppModule, RlbRole, SidebarActions, SidebarActionsInternal, StrapiService, ToastComponent, TokenOauthInterceptor, TranslateBrowserLoader, TruncatePipe, UtilsService, aclFeatureKey, appContextFeatureKey, authsFeatureKey, getDefaultRoutes, initialAclState, initialAppContextState, initialAuthState, initialNavbarState, initialSidebarState, navbarsFeatureKey, oauthGuard, oauthPasswordGuard, permissionGuard, provideApp, provideRlbCodeBrowserOAuth, provideRlbConfig, provideRlbI18n, sidebarsFeatureKey, translateBrowserLoaderFactory, verifyDeactivate };
+export { AbstractMdService, AbstractSupportService, AclStore, AppBreadcrumbService, AppContainerComponent, AppContextActions, AppContextActionsInternal, AppLoggerService, AppStorageService, AppTemplateComponent, AppsService, AsMultiPipe, AsSinglePipe, AuthActions, AuthActionsInternal, AuthFeatureService, AuthenticationService, AutolinkPipe, BaseComponent, CmsComponent, CmsPipe, ContentComponent, CookiesService, ErrorManagementService, ErrorModalComponent, KeycloakProfileService, LanguageService, LeftComponentPipe, LocalCacheService, ModalAppsComponent, NavbarActions, NavbarActionsInternal, OauthPasswordService, ParseJwtService, PwaUpdaterService, RLB_APPS, RLB_APP_NAVCOMP, RLB_APP_SIDEBARCOMP, RLB_AUTH_URL_HANDLER, RLB_CFG, RLB_CFG_ACL, RLB_CFG_AUTH, RLB_CFG_CMS, RLB_CFG_ENV, RLB_CFG_I18N, RLB_CFG_PAGES, RLB_INIT_PROVIDER, RightComponentPipe, RlbAppModule, RlbRole, SidebarActions, SidebarActionsInternal, SidebarFooterComponentPipe, StrapiService, ToastComponent, TokenOauthInterceptor, TranslateBrowserLoader, TruncatePipe, UtilsService, aclFeatureKey, appContextFeatureKey, authsFeatureKey, getDefaultRoutes, initialAclState, initialAppContextState, initialAuthState, initialNavbarState, initialSidebarState, navbarsFeatureKey, oauthGuard, oauthPasswordGuard, permissionGuard, provideApp, provideRlbCodeBrowserOAuth, provideRlbConfig, provideRlbI18n, sidebarsFeatureKey, translateBrowserLoaderFactory, verifyDeactivate };
 //# sourceMappingURL=open-rlb-ng-app.mjs.map