@open-rlb/ng-app 3.1.60 → 3.1.61

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

@@ -1,7 +1,7 @@
 import * as i1$2 from '@angular/common/http';
 import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, Optional, inject, EventEmitter, importProvidersFrom, makeStateKey, makeEnvironmentProviders, Pipe, Input, Component, input, output, viewChild, PLATFORM_ID, TemplateRef, ViewContainerRef, effect, Directive, NgModule, model, isDevMode, provideAppInitializer } from '@angular/core';
+import { InjectionToken, Injectable, Inject, Optional, inject, EventEmitter, importProvidersFrom, makeStateKey, makeEnvironmentProviders, Pipe, Input, Component, input, output, viewChild, TemplateRef, ViewContainerRef, effect, Directive, PLATFORM_ID, NgModule, model, isDevMode, provideAppInitializer } from '@angular/core';
 import * as i2 from '@angular/router';
 import { NavigationEnd, Router, RoutesRecognized, RouterModule, provideRouter } from '@angular/router';
 import * as i1$4 from '@angular/service-worker';
@@ -2086,6 +2086,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
             args: [{ selector: 'rlb-app-dropdown-selector', standalone: false, template: "@if (mode() === 'desktop') {\n  <rlb-navbar-dropdown-item dropdown>\n    <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') | translate\">\n      <i class=\"bi bi-grid-3x3-gap-fill fs-5\"></i>\n    </span>\n    <rlb-dropdown-container placement=\"right\">\n\n      <div style=\"width: 320px;\">\n        <ng-container *ngTemplateOutlet=\"appGrid\"></ng-container>\n      </div>\n\n    </rlb-dropdown-container>\n  </rlb-navbar-dropdown-item>\n} @else {\n  <ng-container *ngTemplateOutlet=\"appGrid\"></ng-container>\n}\n\n<ng-template #appGrid>\n  <div class=\"row row-cols-3 g-2 p-3\">\n    @for (app of apps(); track app.id) {\n      @if (app.core) {\n        <div class=\"col\">\n          <button rlb-button outline class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-center\"\n                  [disabled]=\"!app.enabled && (app.core.auth && !(isAuth()))\" (click)=\"selectApp(app)\">\n            <i [ngClass]=\"['fs-3', 'mb-1', app.core.icon || 'bi bi-app']\"></i>\n            <span class=\"small text-truncate w-100\" [title]=\"app.core.title | translate\">\n              {{ app.core.title | translate }}\n            </span>\n          </button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], apps: [{ type: i0.Input, args: [{ isSignal: true, alias: "apps", required: true }] }], isAuth: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAuth", required: true }] }], appSelected: [{ type: i0.Output, args: ["appSelected"] }] } });
 
+class RlbRole {
+    constructor() {
+        this.appsService = inject(AppsService);
+        this.templateRef = inject((TemplateRef));
+        this.viewContainer = inject(ViewContainerRef);
+        this.action = input(undefined, { ...(ngDevMode ? { debugName: "action" } : /* istanbul ignore next */ {}), alias: 'roles' });
+        // Effect automatically re-runs if store.resources or inputs change
+        effect(() => {
+            const action = this.action();
+            // If no action is provided, it's a public element -> Grant access automatically
+            const hasPerm = !action ? true : this.appsService.checkPermissionInCurrentApp(action);
+            this.viewContainer.clear();
+            if (hasPerm) {
+                this.viewContainer.createEmbeddedView(this.templateRef);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: RlbRole, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.3", type: RlbRole, isStandalone: false, selector: "[roles]", inputs: { action: { classPropertyName: "action", publicName: "roles", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: RlbRole, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[roles]',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [], propDecorators: { action: [{ type: i0.Input, args: [{ isSignal: true, alias: "roles", required: false }] }] } });
+
 class LeftComponentPipe {
     constructor(config) {
         this.config = config;
@@ -2247,11 +2275,11 @@ class AppTemplateComponent {
         this.mobileOffcanvas()?.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: AppTemplateComponent, deps: [{ token: RLB_CFG_ENV }, { token: i1$1.Store }, { token: AppsService }, { token: AuthenticationService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: AppTemplateComponent, isStandalone: false, selector: "rlb-app-template", inputs: { modalContainerId: ["modal-container-id", "modalContainerId"], toastContainerIds: ["toast-container-ids", "toastContainerIds"] }, 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$ | async) {\n    <rlb-navbar [dark]=\"theme === 'dark'\" [showSideBarToggler]=\"(sidebarVisible$ | async)\"  expand=\"lg\" class=\"border-bottom py-1 rlb-navbar\">\n      @if (navHeader$ | async; 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$ | async) {\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        <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$ | async) && apps.length > 1) {\n              <div class=\"border-bottom pb-2\">\n                <rlb-app-dropdown-selector\n                  mode=\"mobile\"\n                  [apps]=\"apps\"\n                  [isAuth]=\"isAuth$ | async\"\n                  (appSelected)=\"selectApp($event, 'app')\"\n                />\n              </div>\n            }\n\n            <!-- Mobile Settings Carousel -->\n            @if (((navbarHasLogin$ | async) && (isAuth$ | async)) || (navbarHasSettings$ | async)) {\n              <div class=\"pt-2\">\n                <rlb-settings-dropdown-selector\n                  mode=\"mobile\"\n                  #mobileSettingsMenu\n                  [apps]=\"apps\"\n                  [isAuth]=\"isAuth$ | async\"\n                  [navbarHasLogin]=\"navbarHasLogin$ | async\"\n                  [navbarHasSettings]=\"navbarHasSettings$ | async\"\n                  (appSelected)=\"selectApp($event, 'settings')\"\n                />\n              </div>\n            }\n\n          </rlb-offcanvas-body>\n        </rlb-offcanvas>\n      </div>\n\n      <rlb-navbar-items>\n        @for (navComponent of navLeftItems$ | async; 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$ | async; track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | rightComponent\"></ng-container>\n          </ng-container>\n        }\n        @if ((separatorVisible$ | async)) {\n          <rlb-navbar-separator />\n        }\n\n        <ng-container ngProjectAs=\"rlb-navbar-item\">\n          @if ((navbarLayout$ | async) == 'default') {\n            @if ((navbarHasLogin$ | async) && !(isAuth$ | async)) {\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$ | async) && (isAuth$ | async)) {\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$ | async) {\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$ | async) && 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$ | async) == 'dropdown') {\n            <!-- MODERN DROPDOWN MODE -->\n\n            <!--Unauthenticated Login -->\n            @if ((navbarHasLogin$ | async) && !(isAuth$ | async)) {\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 (((navbarHasLogin$ | async) && (isAuth$ | async)) || (navbarHasSettings$ | async)) {\n              <rlb-settings-dropdown-selector\n                [apps]=\"apps\"\n                [isAuth]=\"isAuth$ | async\"\n                [navbarHasLogin]=\"navbarHasLogin$ | async\"\n                [navbarHasSettings]=\"navbarHasSettings$ | async\"\n                (appSelected)=\"selectApp($event, 'settings')\"\n              />\n            }\n\n            <!-- Apps Launcher -->\n            @if ((navbarHasApps$ | async) && apps.length > 1) {\n              <rlb-app-dropdown-selector\n                [apps]=\"apps\"\n                [isAuth]=\"isAuth$ | async\"\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$ | async)) {\n      <rlb-sidebar [dark]=\"theme === 'dark'\" id=\"sidebar\" class=\"rlb-sidebar\">\n        @for (item of  (sidebarItems$ | async); track $index) {\n          <rlb-sidebar-item\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                [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 (toastContainerIds.constructor.name === 'Array') {\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: "directive", type: i1$6.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "before-text", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "id", "extValidation", "enable-validation"] }, { kind: "component", type: i2$1.InputGroupComponent, selector: "rlb-input-group", inputs: ["text", "validate", "size"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: i2$1.RlbFabComponent, selector: "rlb-fab", inputs: ["color", "size", "disabled", "outline", "position"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "directive", type: i2$1.NavbarBrandDirective, selector: "[rlb-navbar-brand]" }, { kind: "directive", type: i2$1.NavbarCustomItemsDirective, selector: "[rlb-custom-navbar-items]" }, { kind: "component", type: i2$1.NavbarComponent, selector: "rlb-navbar", inputs: ["dark", "showSideBarToggler", "color", "placement", "expand", "class", "enable-dropdown-toggler"] }, { kind: "component", type: i2$1.NavbarFormComponent, selector: "rlb-navbar-form", inputs: ["role", "class"] }, { kind: "component", type: i2$1.NavbarItemsComponent, selector: "rlb-navbar-items", inputs: ["scroll", "class"], outputs: ["click"] }, { kind: "component", type: i2$1.NavbarItemComponent, selector: "rlb-navbar-item", inputs: ["disabled", "router-link", "class"], outputs: ["click"] }, { kind: "component", type: i2$1.NavbarSeparatorComponent, selector: "rlb-navbar-separator", inputs: ["class"] }, { kind: "component", type: i2$1.OffcanvasComponent, selector: "rlb-offcanvas", inputs: ["id", "body-scroll", "scroll-backup", "close-manual", "placement", "responsive"], outputs: ["statusChange"] }, { kind: "component", type: i2$1.OffcanvasHeaderComponent, selector: "rlb-offcanvas-header", inputs: ["offcanvasId"] }, { kind: "component", type: i2$1.OffcanvasBodyComponent, selector: "rlb-offcanvas-body" }, { kind: "directive", type: i2$1.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: "component", type: i2$1.SidebarComponent, selector: "rlb-sidebar", inputs: ["dark", "rounded"] }, { kind: "component", type: i2$1.SidebarItemComponent, selector: "rlb-sidebar-item", inputs: ["title", "icon", "label", "link", "badgeCounter"], outputs: ["click"] }, { kind: "component", type: i2$1.ModalContainerComponent, selector: "rlb-modal-container", inputs: ["id"] }, { kind: "component", type: i2$1.ToastContainerComponent, selector: "rlb-toast-container", inputs: ["id"] }, { kind: "component", type: SettingsDropdownSelectorComponent, selector: "rlb-settings-dropdown-selector", inputs: ["mode", "apps", "navbarHasSettings", "navbarHasLogin", "isAuth"], outputs: ["appSelected"] }, { kind: "component", type: AppDropdownSelectorComponent, selector: "rlb-app-dropdown-selector", inputs: ["mode", "apps", "isAuth"], outputs: ["appSelected"] }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsMultiPipe, name: "asMulti" }, { kind: "pipe", type: AsSinglePipe, name: "asSingle" }, { kind: "pipe", type: LeftComponentPipe, name: "leftComponent" }, { kind: "pipe", type: RightComponentPipe, name: "rightComponent" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: AppTemplateComponent, isStandalone: false, selector: "rlb-app-template", inputs: { modalContainerId: ["modal-container-id", "modalContainerId"], toastContainerIds: ["toast-container-ids", "toastContainerIds"] }, 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$ | async) {\n    <rlb-navbar [dark]=\"theme === 'dark'\" [showSideBarToggler]=\"(sidebarVisible$ | async)\"  expand=\"lg\" class=\"border-bottom py-1 rlb-navbar\">\n      @if (navHeader$ | async; 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$ | async) {\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        <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$ | async) && apps.length > 1) {\n              <div class=\"border-bottom pb-2\">\n                <rlb-app-dropdown-selector\n                  mode=\"mobile\"\n                  [apps]=\"apps\"\n                  [isAuth]=\"isAuth$ | async\"\n                  (appSelected)=\"selectApp($event, 'app')\"\n                />\n              </div>\n            }\n\n            <!-- Mobile Settings Carousel -->\n            @if (((navbarHasLogin$ | async) && (isAuth$ | async)) || (navbarHasSettings$ | async)) {\n              <div class=\"pt-2\">\n                <rlb-settings-dropdown-selector\n                  mode=\"mobile\"\n                  #mobileSettingsMenu\n                  [apps]=\"apps\"\n                  [isAuth]=\"isAuth$ | async\"\n                  [navbarHasLogin]=\"navbarHasLogin$ | async\"\n                  [navbarHasSettings]=\"navbarHasSettings$ | async\"\n                  (appSelected)=\"selectApp($event, 'settings')\"\n                />\n              </div>\n            }\n\n          </rlb-offcanvas-body>\n        </rlb-offcanvas>\n      </div>\n\n      <rlb-navbar-items>\n        @for (navComponent of navLeftItems$ | async; 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$ | async; track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | rightComponent\"></ng-container>\n          </ng-container>\n        }\n        @if ((separatorVisible$ | async)) {\n          <rlb-navbar-separator />\n        }\n\n        <ng-container ngProjectAs=\"rlb-navbar-item\">\n          @if ((navbarLayout$ | async) == 'default') {\n            @if ((navbarHasLogin$ | async) && !(isAuth$ | async)) {\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$ | async) && (isAuth$ | async)) {\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$ | async) {\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$ | async) && 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$ | async) == 'dropdown') {\n            <!-- MODERN DROPDOWN MODE -->\n\n            <!--Unauthenticated Login -->\n            @if ((navbarHasLogin$ | async) && !(isAuth$ | async)) {\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 (((navbarHasLogin$ | async) && (isAuth$ | async)) || (navbarHasSettings$ | async)) {\n              <rlb-settings-dropdown-selector\n                [apps]=\"apps\"\n                [isAuth]=\"isAuth$ | async\"\n                [navbarHasLogin]=\"navbarHasLogin$ | async\"\n                [navbarHasSettings]=\"navbarHasSettings$ | async\"\n                (appSelected)=\"selectApp($event, 'settings')\"\n              />\n            }\n\n            <!-- Apps Launcher -->\n            @if ((navbarHasApps$ | async) && apps.length > 1) {\n              <rlb-app-dropdown-selector\n                [apps]=\"apps\"\n                [isAuth]=\"isAuth$ | async\"\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$ | async)) {\n      <rlb-sidebar [dark]=\"theme === 'dark'\" id=\"sidebar\" class=\"rlb-sidebar\">\n        @for (item of  (sidebarItems$ | async); 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                [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 (toastContainerIds.constructor.name === 'Array') {\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: "directive", type: i1$6.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "before-text", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "id", "extValidation", "enable-validation"] }, { kind: "component", type: i2$1.InputGroupComponent, selector: "rlb-input-group", inputs: ["text", "validate", "size"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: i2$1.RlbFabComponent, selector: "rlb-fab", inputs: ["color", "size", "disabled", "outline", "position"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "directive", type: i2$1.NavbarBrandDirective, selector: "[rlb-navbar-brand]" }, { kind: "directive", type: i2$1.NavbarCustomItemsDirective, selector: "[rlb-custom-navbar-items]" }, { kind: "component", type: i2$1.NavbarComponent, selector: "rlb-navbar", inputs: ["dark", "showSideBarToggler", "color", "placement", "expand", "class", "enable-dropdown-toggler"] }, { kind: "component", type: i2$1.NavbarFormComponent, selector: "rlb-navbar-form", inputs: ["role", "class"] }, { kind: "component", type: i2$1.NavbarItemsComponent, selector: "rlb-navbar-items", inputs: ["scroll", "class"], outputs: ["click"] }, { kind: "component", type: i2$1.NavbarItemComponent, selector: "rlb-navbar-item", inputs: ["disabled", "router-link", "class"], outputs: ["click"] }, { kind: "component", type: i2$1.NavbarSeparatorComponent, selector: "rlb-navbar-separator", inputs: ["class"] }, { kind: "component", type: i2$1.OffcanvasComponent, selector: "rlb-offcanvas", inputs: ["id", "body-scroll", "scroll-backup", "close-manual", "placement", "responsive"], outputs: ["statusChange"] }, { kind: "component", type: i2$1.OffcanvasHeaderComponent, selector: "rlb-offcanvas-header", inputs: ["offcanvasId"] }, { kind: "component", type: i2$1.OffcanvasBodyComponent, selector: "rlb-offcanvas-body" }, { kind: "directive", type: i2$1.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: "component", type: i2$1.SidebarComponent, selector: "rlb-sidebar", inputs: ["dark", "rounded"] }, { kind: "component", type: i2$1.SidebarItemComponent, selector: "rlb-sidebar-item", inputs: ["title", "icon", "label", "link", "badgeCounter"], outputs: ["click"] }, { kind: "component", type: i2$1.ModalContainerComponent, selector: "rlb-modal-container", inputs: ["id"] }, { kind: "component", type: i2$1.ToastContainerComponent, selector: "rlb-toast-container", inputs: ["id"] }, { kind: "component", type: SettingsDropdownSelectorComponent, selector: "rlb-settings-dropdown-selector", inputs: ["mode", "apps", "navbarHasSettings", "navbarHasLogin", "isAuth"], outputs: ["appSelected"] }, { kind: "component", type: AppDropdownSelectorComponent, selector: "rlb-app-dropdown-selector", inputs: ["mode", "apps", "isAuth"], outputs: ["appSelected"] }, { kind: "directive", type: RlbRole, selector: "[roles]", inputs: ["roles"] }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsMultiPipe, name: "asMulti" }, { kind: "pipe", type: AsSinglePipe, name: "asSingle" }, { kind: "pipe", type: LeftComponentPipe, name: "leftComponent" }, { kind: "pipe", type: RightComponentPipe, name: "rightComponent" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: AppTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-app-template', standalone: false, template: "<div class=\"rlb-app\">\n  @if (navVisible$ | async) {\n    <rlb-navbar [dark]=\"theme === 'dark'\" [showSideBarToggler]=\"(sidebarVisible$ | async)\"  expand=\"lg\" class=\"border-bottom py-1 rlb-navbar\">\n      @if (navHeader$ | async; 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$ | async) {\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        <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$ | async) && apps.length > 1) {\n              <div class=\"border-bottom pb-2\">\n                <rlb-app-dropdown-selector\n                  mode=\"mobile\"\n                  [apps]=\"apps\"\n                  [isAuth]=\"isAuth$ | async\"\n                  (appSelected)=\"selectApp($event, 'app')\"\n                />\n              </div>\n            }\n\n            <!-- Mobile Settings Carousel -->\n            @if (((navbarHasLogin$ | async) && (isAuth$ | async)) || (navbarHasSettings$ | async)) {\n              <div class=\"pt-2\">\n                <rlb-settings-dropdown-selector\n                  mode=\"mobile\"\n                  #mobileSettingsMenu\n                  [apps]=\"apps\"\n                  [isAuth]=\"isAuth$ | async\"\n                  [navbarHasLogin]=\"navbarHasLogin$ | async\"\n                  [navbarHasSettings]=\"navbarHasSettings$ | async\"\n                  (appSelected)=\"selectApp($event, 'settings')\"\n                />\n              </div>\n            }\n\n          </rlb-offcanvas-body>\n        </rlb-offcanvas>\n      </div>\n\n      <rlb-navbar-items>\n        @for (navComponent of navLeftItems$ | async; 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$ | async; track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | rightComponent\"></ng-container>\n          </ng-container>\n        }\n        @if ((separatorVisible$ | async)) {\n          <rlb-navbar-separator />\n        }\n\n        <ng-container ngProjectAs=\"rlb-navbar-item\">\n          @if ((navbarLayout$ | async) == 'default') {\n            @if ((navbarHasLogin$ | async) && !(isAuth$ | async)) {\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$ | async) && (isAuth$ | async)) {\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$ | async) {\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$ | async) && 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$ | async) == 'dropdown') {\n            <!-- MODERN DROPDOWN MODE -->\n\n            <!--Unauthenticated Login -->\n            @if ((navbarHasLogin$ | async) && !(isAuth$ | async)) {\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 (((navbarHasLogin$ | async) && (isAuth$ | async)) || (navbarHasSettings$ | async)) {\n              <rlb-settings-dropdown-selector\n                [apps]=\"apps\"\n                [isAuth]=\"isAuth$ | async\"\n                [navbarHasLogin]=\"navbarHasLogin$ | async\"\n                [navbarHasSettings]=\"navbarHasSettings$ | async\"\n                (appSelected)=\"selectApp($event, 'settings')\"\n              />\n            }\n\n            <!-- Apps Launcher -->\n            @if ((navbarHasApps$ | async) && apps.length > 1) {\n              <rlb-app-dropdown-selector\n                [apps]=\"apps\"\n                [isAuth]=\"isAuth$ | async\"\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$ | async)) {\n      <rlb-sidebar [dark]=\"theme === 'dark'\" id=\"sidebar\" class=\"rlb-sidebar\">\n        @for (item of  (sidebarItems$ | async); track $index) {\n          <rlb-sidebar-item\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                [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 (toastContainerIds.constructor.name === 'Array') {\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"] }]
+            args: [{ selector: 'rlb-app-template', standalone: false, template: "<div class=\"rlb-app\">\n  @if (navVisible$ | async) {\n    <rlb-navbar [dark]=\"theme === 'dark'\" [showSideBarToggler]=\"(sidebarVisible$ | async)\"  expand=\"lg\" class=\"border-bottom py-1 rlb-navbar\">\n      @if (navHeader$ | async; 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$ | async) {\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        <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$ | async) && apps.length > 1) {\n              <div class=\"border-bottom pb-2\">\n                <rlb-app-dropdown-selector\n                  mode=\"mobile\"\n                  [apps]=\"apps\"\n                  [isAuth]=\"isAuth$ | async\"\n                  (appSelected)=\"selectApp($event, 'app')\"\n                />\n              </div>\n            }\n\n            <!-- Mobile Settings Carousel -->\n            @if (((navbarHasLogin$ | async) && (isAuth$ | async)) || (navbarHasSettings$ | async)) {\n              <div class=\"pt-2\">\n                <rlb-settings-dropdown-selector\n                  mode=\"mobile\"\n                  #mobileSettingsMenu\n                  [apps]=\"apps\"\n                  [isAuth]=\"isAuth$ | async\"\n                  [navbarHasLogin]=\"navbarHasLogin$ | async\"\n                  [navbarHasSettings]=\"navbarHasSettings$ | async\"\n                  (appSelected)=\"selectApp($event, 'settings')\"\n                />\n              </div>\n            }\n\n          </rlb-offcanvas-body>\n        </rlb-offcanvas>\n      </div>\n\n      <rlb-navbar-items>\n        @for (navComponent of navLeftItems$ | async; 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$ | async; track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | rightComponent\"></ng-container>\n          </ng-container>\n        }\n        @if ((separatorVisible$ | async)) {\n          <rlb-navbar-separator />\n        }\n\n        <ng-container ngProjectAs=\"rlb-navbar-item\">\n          @if ((navbarLayout$ | async) == 'default') {\n            @if ((navbarHasLogin$ | async) && !(isAuth$ | async)) {\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$ | async) && (isAuth$ | async)) {\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$ | async) {\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$ | async) && 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$ | async) == 'dropdown') {\n            <!-- MODERN DROPDOWN MODE -->\n\n            <!--Unauthenticated Login -->\n            @if ((navbarHasLogin$ | async) && !(isAuth$ | async)) {\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 (((navbarHasLogin$ | async) && (isAuth$ | async)) || (navbarHasSettings$ | async)) {\n              <rlb-settings-dropdown-selector\n                [apps]=\"apps\"\n                [isAuth]=\"isAuth$ | async\"\n                [navbarHasLogin]=\"navbarHasLogin$ | async\"\n                [navbarHasSettings]=\"navbarHasSettings$ | async\"\n                (appSelected)=\"selectApp($event, 'settings')\"\n              />\n            }\n\n            <!-- Apps Launcher -->\n            @if ((navbarHasApps$ | async) && apps.length > 1) {\n              <rlb-app-dropdown-selector\n                [apps]=\"apps\"\n                [isAuth]=\"isAuth$ | async\"\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$ | async)) {\n      <rlb-sidebar [dark]=\"theme === 'dark'\" id=\"sidebar\" class=\"rlb-sidebar\">\n        @for (item of  (sidebarItems$ | async); 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                [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 (toastContainerIds.constructor.name === 'Array') {\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: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [RLB_CFG_ENV]
@@ -2445,33 +2473,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 args: ['toast-container-ids']
             }] } });
 
-class RlbRole {
-    constructor() {
-        this.appsService = inject(AppsService);
-        this.templateRef = inject((TemplateRef));
-        this.viewContainer = inject(ViewContainerRef);
-        this.action = input(undefined, { ...(ngDevMode ? { debugName: "action" } : /* istanbul ignore next */ {}), alias: 'roles' });
-        // Effect automatically re-runs if store.resources or inputs change
-        effect(() => {
-            const action = this.action() || '';
-            const hasPerm = this.appsService.checkPermissionInCurrentApp(action);
-            this.viewContainer.clear();
-            if (hasPerm) {
-                this.viewContainer.createEmbeddedView(this.templateRef);
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: RlbRole, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.3", type: RlbRole, isStandalone: false, selector: "[roles]", inputs: { action: { classPropertyName: "action", publicName: "roles", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: RlbRole, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[roles]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [], propDecorators: { action: [{ type: i0.Input, args: [{ isSignal: true, alias: "roles", required: false }] }] } });
-
 class RlbAppModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: RlbAppModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: RlbAppModule, declarations: [