@testgorilla/tgo-ui 2.6.1 → 2.6.2

package/fesm2022/testgorilla-tgo-ui.mjs

@@ -4928,7 +4928,7 @@ class MobileNavbarSideSheetComponent {
         this.menuItemClicked.emit(id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileNavbarSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MobileNavbarSideSheetComponent, isStandalone: true, selector: "ui-mobile-navbar-side-sheet", inputs: { routes: "routes", activedRoute: "activedRoute", email: "email", userName: "userName", menuItems: "menuItems", language: "language", contentTemplateRef: "contentTemplateRef" }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<div class=\"mobile-navbar-container\">\n  <div class=\"user-info\">\n    <span class=\"user-name\">{{ userName }}</span>\n    <span class=\"user-email\">{{ email }}</span>\n  </div>\n\n  <div class=\"routes\">\n    <div *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" class=\"route\"\n         [ngClass]=\"{'active': activedRoute === route.id}\">\n      <span>{{ route.title }}</span>\n    </div>\n  </div>\n  <div class=\"settings\" (click)=\"isOpenSettings = !isOpenSettings\">\n    <span>Settings</span>\n    <ui-icon [applicationTheme]=\"'dark'\" [size]=\"'24'\"\n             [name]=\"isOpenSettings ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"></ui-icon>\n  </div>\n\n  <div *ngIf=\"isOpenSettings\">\n    <button *ngFor=\"let e of menuItems\" mat-menu-item (click)=\"clickMenuItem(e.id)\">\n      <div class=\"menu-item\">\n        <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n        {{ e.text }}\n      </div>\n    </button>\n    <button mat-menu-item (click)=\"logout()\">\n      <mat-icon>power_settings_new</mat-icon>\n      {{ (translationContext + 'LOG_OUT') | uiTranslate : language }}\n    </button>\n  </div>\n\n  <div class=\"bottom-content\">\n    <ng-container *ngTemplateOutlet=\"contentTemplateRef\"></ng-container>\n  </div>\n\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mobile-navbar-container .user-info{padding:0 16px;display:flex;flex-direction:column;margin-bottom:32px}.mobile-navbar-container .user-info .user-name{font-weight:700;font-size:16px;line-height:22px;font-family:ModernGothic,sans-serif}.mobile-navbar-container .user-info .user-email{font-size:12px}.mobile-navbar-container .routes .route{padding:0 16px;width:100%;height:48px;display:flex;justify-content:flex-start;align-items:center;font-size:14px}.mobile-navbar-container .routes .route.active{background-color:#fff2fc;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .settings{height:48px;padding:0 16px;display:flex;font-size:14px;font-weight:700;font-family:ModernGothic,sans-serif;flex-direction:row;align-items:center;gap:16px}.mobile-navbar-container .menu-item{display:flex;align-items:center}.mobile-navbar-container .menu-item ui-icon{margin-right:16px}.mobile-navbar-container .bottom-content{padding:32px 16px;width:calc(100% - 32px);position:absolute;bottom:0;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: AccordionComponentModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MobileNavbarSideSheetComponent, isStandalone: true, selector: "ui-mobile-navbar-side-sheet", inputs: { routes: "routes", activedRoute: "activedRoute", email: "email", userName: "userName", menuItems: "menuItems", language: "language", contentTemplateRef: "contentTemplateRef" }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<div class=\"mobile-navbar-container\">\n  <div class=\"user-info\">\n    <span class=\"user-name\">{{ userName }}</span>\n    <span class=\"user-email\">{{ email }}</span>\n  </div>\n\n  <div class=\"routes\">\n    <div *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" class=\"route\"\n         [ngClass]=\"{'active': activedRoute === route.id}\">\n      <span>{{ route.title }}</span>\n    </div>\n  </div>\n  <div class=\"settings\" (click)=\"isOpenSettings = !isOpenSettings\">\n    <span>Settings</span>\n    <ui-icon [applicationTheme]=\"'dark'\" [size]=\"'24'\"\n             [name]=\"isOpenSettings ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"></ui-icon>\n  </div>\n\n  <div *ngIf=\"isOpenSettings\">\n    <button *ngFor=\"let e of menuItems\" mat-menu-item (click)=\"clickMenuItem(e.id)\">\n      <div class=\"menu-item\">\n        <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n        {{ e.text }}\n      </div>\n    </button>\n    <button mat-menu-item (click)=\"logout()\">\n      <mat-icon>power_settings_new</mat-icon>\n      {{ (translationContext + 'LOG_OUT') | uiTranslate : language }}\n    </button>\n  </div>\n\n  <div class=\"bottom-content\">\n    <ng-container *ngTemplateOutlet=\"contentTemplateRef\"></ng-container>\n  </div>\n\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mobile-navbar-container{padding:16px 12px}.mobile-navbar-container .user-info{padding:0 16px;display:flex;flex-direction:column;margin-bottom:32px}.mobile-navbar-container .user-info .user-name{font-weight:700;font-size:16px;line-height:22px;font-family:ModernGothic,sans-serif}.mobile-navbar-container .user-info .user-email{font-size:12px}.mobile-navbar-container .routes .route{padding:0 16px;width:100%;height:48px;display:flex;justify-content:flex-start;align-items:center;font-size:14px}.mobile-navbar-container .routes .route.active{background-color:#fff2fc;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .settings{height:48px;padding:0 16px;display:flex;font-size:14px;font-weight:700;font-family:ModernGothic,sans-serif;flex-direction:row;align-items:center;gap:16px}.mobile-navbar-container .menu-item{display:flex;align-items:center}.mobile-navbar-container .menu-item ui-icon{margin-right:16px}.mobile-navbar-container .bottom-content{padding:32px 16px;width:calc(100% - 32px);position:absolute;bottom:0;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: AccordionComponentModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileNavbarSideSheetComponent, decorators: [{
             type: Component,
@@ -4943,7 +4943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         AccordionComponentModule,
                         NgIf,
                         NgTemplateOutlet
-                    ], template: "<div class=\"mobile-navbar-container\">\n  <div class=\"user-info\">\n    <span class=\"user-name\">{{ userName }}</span>\n    <span class=\"user-email\">{{ email }}</span>\n  </div>\n\n  <div class=\"routes\">\n    <div *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" class=\"route\"\n         [ngClass]=\"{'active': activedRoute === route.id}\">\n      <span>{{ route.title }}</span>\n    </div>\n  </div>\n  <div class=\"settings\" (click)=\"isOpenSettings = !isOpenSettings\">\n    <span>Settings</span>\n    <ui-icon [applicationTheme]=\"'dark'\" [size]=\"'24'\"\n             [name]=\"isOpenSettings ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"></ui-icon>\n  </div>\n\n  <div *ngIf=\"isOpenSettings\">\n    <button *ngFor=\"let e of menuItems\" mat-menu-item (click)=\"clickMenuItem(e.id)\">\n      <div class=\"menu-item\">\n        <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n        {{ e.text }}\n      </div>\n    </button>\n    <button mat-menu-item (click)=\"logout()\">\n      <mat-icon>power_settings_new</mat-icon>\n      {{ (translationContext + 'LOG_OUT') | uiTranslate : language }}\n    </button>\n  </div>\n\n  <div class=\"bottom-content\">\n    <ng-container *ngTemplateOutlet=\"contentTemplateRef\"></ng-container>\n  </div>\n\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mobile-navbar-container .user-info{padding:0 16px;display:flex;flex-direction:column;margin-bottom:32px}.mobile-navbar-container .user-info .user-name{font-weight:700;font-size:16px;line-height:22px;font-family:ModernGothic,sans-serif}.mobile-navbar-container .user-info .user-email{font-size:12px}.mobile-navbar-container .routes .route{padding:0 16px;width:100%;height:48px;display:flex;justify-content:flex-start;align-items:center;font-size:14px}.mobile-navbar-container .routes .route.active{background-color:#fff2fc;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .settings{height:48px;padding:0 16px;display:flex;font-size:14px;font-weight:700;font-family:ModernGothic,sans-serif;flex-direction:row;align-items:center;gap:16px}.mobile-navbar-container .menu-item{display:flex;align-items:center}.mobile-navbar-container .menu-item ui-icon{margin-right:16px}.mobile-navbar-container .bottom-content{padding:32px 16px;width:calc(100% - 32px);position:absolute;bottom:0;display:flex;justify-content:center;align-items:center}\n"] }]
+                    ], template: "<div class=\"mobile-navbar-container\">\n  <div class=\"user-info\">\n    <span class=\"user-name\">{{ userName }}</span>\n    <span class=\"user-email\">{{ email }}</span>\n  </div>\n\n  <div class=\"routes\">\n    <div *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" class=\"route\"\n         [ngClass]=\"{'active': activedRoute === route.id}\">\n      <span>{{ route.title }}</span>\n    </div>\n  </div>\n  <div class=\"settings\" (click)=\"isOpenSettings = !isOpenSettings\">\n    <span>Settings</span>\n    <ui-icon [applicationTheme]=\"'dark'\" [size]=\"'24'\"\n             [name]=\"isOpenSettings ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"></ui-icon>\n  </div>\n\n  <div *ngIf=\"isOpenSettings\">\n    <button *ngFor=\"let e of menuItems\" mat-menu-item (click)=\"clickMenuItem(e.id)\">\n      <div class=\"menu-item\">\n        <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n        {{ e.text }}\n      </div>\n    </button>\n    <button mat-menu-item (click)=\"logout()\">\n      <mat-icon>power_settings_new</mat-icon>\n      {{ (translationContext + 'LOG_OUT') | uiTranslate : language }}\n    </button>\n  </div>\n\n  <div class=\"bottom-content\">\n    <ng-container *ngTemplateOutlet=\"contentTemplateRef\"></ng-container>\n  </div>\n\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mobile-navbar-container{padding:16px 12px}.mobile-navbar-container .user-info{padding:0 16px;display:flex;flex-direction:column;margin-bottom:32px}.mobile-navbar-container .user-info .user-name{font-weight:700;font-size:16px;line-height:22px;font-family:ModernGothic,sans-serif}.mobile-navbar-container .user-info .user-email{font-size:12px}.mobile-navbar-container .routes .route{padding:0 16px;width:100%;height:48px;display:flex;justify-content:flex-start;align-items:center;font-size:14px}.mobile-navbar-container .routes .route.active{background-color:#fff2fc;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .settings{height:48px;padding:0 16px;display:flex;font-size:14px;font-weight:700;font-family:ModernGothic,sans-serif;flex-direction:row;align-items:center;gap:16px}.mobile-navbar-container .menu-item{display:flex;align-items:center}.mobile-navbar-container .menu-item ui-icon{margin-right:16px}.mobile-navbar-container .bottom-content{padding:32px 16px;width:calc(100% - 32px);position:absolute;bottom:0;display:flex;justify-content:center;align-items:center}\n"] }]
         }], propDecorators: { routes: [{
                 type: Input
             }], activedRoute: [{
@@ -4969,6 +4969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 var ScreenBreakpoints;
 (function (ScreenBreakpoints) {
     ScreenBreakpoints[ScreenBreakpoints["MOBILE"] = 600] = "MOBILE";
+    ScreenBreakpoints[ScreenBreakpoints["TABLET"] = 1023] = "TABLET";
 })(ScreenBreakpoints || (ScreenBreakpoints = {}));
 
 class SideSheetService {
@@ -5143,6 +5144,7 @@ class SideSheetComponent {
          * @memberof SideSheetComponent
          */
         this.applicationTheme = 'light';
+        this.openChange = new EventEmitter();
         this.title = '';
         this.showBackButton = false;
         this.showTitleTooltip = false;
@@ -5156,7 +5158,7 @@ class SideSheetComponent {
         this.setComponentRef();
     }
     setComponentRef() {
-        this.componentRef$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((config) => {
+        this.componentRef$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(config => {
             if (config && config.componentRef && this.container && this.drawer) {
                 this.setConfig(config);
                 this.drawer.toggle();
@@ -5183,12 +5185,15 @@ class SideSheetComponent {
     onClose() {
         this.drawer.toggle();
     }
+    onOpenChange(isOpened) {
+        this.openChange.emit(isOpened);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SideSheetComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: SideSheetService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SideSheetComponent, selector: "ui-side-sheet", inputs: { position: "position", language: "language", applicationTheme: "applicationTheme" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container>\n  <mat-drawer-container class=\"side-sheet-container\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n    <mat-drawer #drawer [mode]=\"'over'\" [autoFocus]=\"false\"  class=\"side-sheet-content\" [position]=\"position\">\n      <div class=\"header\">\n        <div class=\"title\">\n          <ui-button\n            *ngIf=\"showBackButton\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n            [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n            [applicationTheme]=\"applicationTheme\"\n            [tooltip]=\"('COMMON.BACK') | uiTranslate : language\"\n            (click)=\"onClose()\"\n          ></ui-button>\n          <span\n            *ngIf=\"title\"\n            [matTooltip]=\"showTitleTooltip ? title : ''\"\n            [matTooltipClass]=\"applicationTheme\"\n          >{{ title }}</span>\n          <ui-logo *ngIf=\"showLogo\"></ui-logo>\n        </div>\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n          [applicationTheme]=\"applicationTheme\"\n          [tooltip]=\"('COMMON.CLOSE') | uiTranslate : language\"\n          (click)=\"onClose()\"\n        ></ui-button>\n      </div>\n      <ng-container #container></ng-container>\n    </mat-drawer>\n    <mat-drawer-content>\n      <ng-content></ng-content>\n    </mat-drawer-content>\n  </mat-drawer-container>\n</ng-container>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-sheet-container{position:absolute;inset:0;background:transparent}.side-sheet-container ::ng-deep .mat-drawer-backdrop{background-color:#000;opacity:25%}.side-sheet-container .side-sheet-content{width:600px;box-shadow:2px 24px 48px 8px #00000014;padding:0 32px 32px;display:flex;align-items:flex-start;flex-direction:column;z-index:3;background:#f6f6f6}.side-sheet-container .side-sheet-content .header{background:#f6f6f6;padding:32px 0;width:100%;display:flex;top:0;position:sticky;justify-content:center}.side-sheet-container .side-sheet-content .header ui-button{margin-top:-5px}.side-sheet-container .side-sheet-content .header .title{display:flex;justify-content:left;margin-right:8px;width:100%;gap:8px}.side-sheet-container .side-sheet-content .header .title span{line-height:28px;font-size:20px;font-weight:700;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (max-width: 600px){.side-sheet-container .side-sheet-content{padding:0 16px 16px;width:100%}.side-sheet-container .side-sheet-content .header{padding:32px 16px}}.side-sheet-container[theme=dark] .side-sheet-content,.side-sheet-container[theme=light] .side-sheet-content{box-shadow:0 4px 100px #24242414}.side-sheet-container[theme=dark] .side-sheet-content .header .title span,.side-sheet-container[theme=light] .side-sheet-content .header .title span{color:#242424}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i5.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i5.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SideSheetComponent, selector: "ui-side-sheet", inputs: { position: "position", language: "language", applicationTheme: "applicationTheme" }, outputs: { openChange: "openChange" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container>\n  <mat-drawer-container class=\"side-sheet-container\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n    <mat-drawer (closedStart)=\"onOpenChange(false)\" (openedStart)=\"onOpenChange(true)\" #drawer [mode]=\"'over'\" [autoFocus]=\"false\"  class=\"side-sheet-content\" [position]=\"position\">\n      <div class=\"header\">\n        <div class=\"title\">\n          <ui-button\n            *ngIf=\"showBackButton\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n            [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n            [applicationTheme]=\"applicationTheme\"\n            [tooltip]=\"('COMMON.BACK') | uiTranslate : language\"\n            (click)=\"onClose()\"\n          ></ui-button>\n          <span\n            *ngIf=\"title\"\n            [matTooltip]=\"showTitleTooltip ? title : ''\"\n            [matTooltipClass]=\"applicationTheme\"\n          >{{ title }}</span>\n          <ui-logo *ngIf=\"showLogo\"></ui-logo>\n        </div>\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n          [applicationTheme]=\"applicationTheme\"\n          [tooltip]=\"('COMMON.CLOSE') | uiTranslate : language\"\n          (click)=\"onClose()\"\n        ></ui-button>\n      </div>\n      <ng-container #container></ng-container>\n    </mat-drawer>\n    <mat-drawer-content>\n      <ng-content></ng-content>\n    </mat-drawer-content>\n  </mat-drawer-container>\n</ng-container>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-sheet-container{position:absolute;inset:0;background:transparent}.side-sheet-container ::ng-deep .mat-drawer-backdrop{background-color:#000;opacity:25%}.side-sheet-container .side-sheet-content{width:600px;box-shadow:2px 24px 48px 8px #00000014;padding:0 32px 32px;display:flex;align-items:flex-start;flex-direction:column;z-index:3;background:#f6f6f6}.side-sheet-container .side-sheet-content .header{background:#f6f6f6;padding:32px 0;width:100%;display:flex;top:0;position:sticky;justify-content:center}.side-sheet-container .side-sheet-content .header ui-button{margin-top:-5px}.side-sheet-container .side-sheet-content .header .title{display:flex;justify-content:left;margin-right:8px;width:100%;gap:8px}.side-sheet-container .side-sheet-content .header .title span{line-height:28px;font-size:20px;font-weight:700;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (max-width: 600px){.side-sheet-container .side-sheet-content{padding:0 16px 16px;width:100%}.side-sheet-container .side-sheet-content .header{padding:32px 16px}}.side-sheet-container[theme=dark] .side-sheet-content,.side-sheet-container[theme=light] .side-sheet-content{box-shadow:0 4px 100px #24242414}.side-sheet-container[theme=dark] .side-sheet-content .header .title span,.side-sheet-container[theme=light] .side-sheet-content .header .title span{color:#242424}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i5.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i5.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SideSheetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-side-sheet', template: "<ng-container>\n  <mat-drawer-container class=\"side-sheet-container\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n    <mat-drawer #drawer [mode]=\"'over'\" [autoFocus]=\"false\"  class=\"side-sheet-content\" [position]=\"position\">\n      <div class=\"header\">\n        <div class=\"title\">\n          <ui-button\n            *ngIf=\"showBackButton\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n            [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n            [applicationTheme]=\"applicationTheme\"\n            [tooltip]=\"('COMMON.BACK') | uiTranslate : language\"\n            (click)=\"onClose()\"\n          ></ui-button>\n          <span\n            *ngIf=\"title\"\n            [matTooltip]=\"showTitleTooltip ? title : ''\"\n            [matTooltipClass]=\"applicationTheme\"\n          >{{ title }}</span>\n          <ui-logo *ngIf=\"showLogo\"></ui-logo>\n        </div>\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n          [applicationTheme]=\"applicationTheme\"\n          [tooltip]=\"('COMMON.CLOSE') | uiTranslate : language\"\n          (click)=\"onClose()\"\n        ></ui-button>\n      </div>\n      <ng-container #container></ng-container>\n    </mat-drawer>\n    <mat-drawer-content>\n      <ng-content></ng-content>\n    </mat-drawer-content>\n  </mat-drawer-container>\n</ng-container>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-sheet-container{position:absolute;inset:0;background:transparent}.side-sheet-container ::ng-deep .mat-drawer-backdrop{background-color:#000;opacity:25%}.side-sheet-container .side-sheet-content{width:600px;box-shadow:2px 24px 48px 8px #00000014;padding:0 32px 32px;display:flex;align-items:flex-start;flex-direction:column;z-index:3;background:#f6f6f6}.side-sheet-container .side-sheet-content .header{background:#f6f6f6;padding:32px 0;width:100%;display:flex;top:0;position:sticky;justify-content:center}.side-sheet-container .side-sheet-content .header ui-button{margin-top:-5px}.side-sheet-container .side-sheet-content .header .title{display:flex;justify-content:left;margin-right:8px;width:100%;gap:8px}.side-sheet-container .side-sheet-content .header .title span{line-height:28px;font-size:20px;font-weight:700;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (max-width: 600px){.side-sheet-container .side-sheet-content{padding:0 16px 16px;width:100%}.side-sheet-container .side-sheet-content .header{padding:32px 16px}}.side-sheet-container[theme=dark] .side-sheet-content,.side-sheet-container[theme=light] .side-sheet-content{box-shadow:0 4px 100px #24242414}.side-sheet-container[theme=dark] .side-sheet-content .header .title span,.side-sheet-container[theme=light] .side-sheet-content .header .title span{color:#242424}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
+            args: [{ selector: 'ui-side-sheet', template: "<ng-container>\n  <mat-drawer-container class=\"side-sheet-container\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n    <mat-drawer (closedStart)=\"onOpenChange(false)\" (openedStart)=\"onOpenChange(true)\" #drawer [mode]=\"'over'\" [autoFocus]=\"false\"  class=\"side-sheet-content\" [position]=\"position\">\n      <div class=\"header\">\n        <div class=\"title\">\n          <ui-button\n            *ngIf=\"showBackButton\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n            [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n            [applicationTheme]=\"applicationTheme\"\n            [tooltip]=\"('COMMON.BACK') | uiTranslate : language\"\n            (click)=\"onClose()\"\n          ></ui-button>\n          <span\n            *ngIf=\"title\"\n            [matTooltip]=\"showTitleTooltip ? title : ''\"\n            [matTooltipClass]=\"applicationTheme\"\n          >{{ title }}</span>\n          <ui-logo *ngIf=\"showLogo\"></ui-logo>\n        </div>\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n          [applicationTheme]=\"applicationTheme\"\n          [tooltip]=\"('COMMON.CLOSE') | uiTranslate : language\"\n          (click)=\"onClose()\"\n        ></ui-button>\n      </div>\n      <ng-container #container></ng-container>\n    </mat-drawer>\n    <mat-drawer-content>\n      <ng-content></ng-content>\n    </mat-drawer-content>\n  </mat-drawer-container>\n</ng-container>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-sheet-container{position:absolute;inset:0;background:transparent}.side-sheet-container ::ng-deep .mat-drawer-backdrop{background-color:#000;opacity:25%}.side-sheet-container .side-sheet-content{width:600px;box-shadow:2px 24px 48px 8px #00000014;padding:0 32px 32px;display:flex;align-items:flex-start;flex-direction:column;z-index:3;background:#f6f6f6}.side-sheet-container .side-sheet-content .header{background:#f6f6f6;padding:32px 0;width:100%;display:flex;top:0;position:sticky;justify-content:center}.side-sheet-container .side-sheet-content .header ui-button{margin-top:-5px}.side-sheet-container .side-sheet-content .header .title{display:flex;justify-content:left;margin-right:8px;width:100%;gap:8px}.side-sheet-container .side-sheet-content .header .title span{line-height:28px;font-size:20px;font-weight:700;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (max-width: 600px){.side-sheet-container .side-sheet-content{padding:0 16px 16px;width:100%}.side-sheet-container .side-sheet-content .header{padding:32px 16px}}.side-sheet-container[theme=dark] .side-sheet-content,.side-sheet-container[theme=light] .side-sheet-content{box-shadow:0 4px 100px #24242414}.side-sheet-container[theme=dark] .side-sheet-content .header .title span,.side-sheet-container[theme=light] .side-sheet-content .header .title span{color:#242424}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -5200,6 +5205,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], applicationTheme: [{
                 type: Input
+            }], openChange: [{
+                type: Output
             }], drawer: [{
                 type: ViewChild,
                 args: ['drawer']
@@ -5300,8 +5307,12 @@ class NavbarComponent {
         this.logoutEvent = new EventEmitter();
         this.translationContext = 'NAVBAR.';
         this._mobileBreakpoint$ = new ReplaySubject(1);
+        this._tabletBreakpoint$ = new ReplaySubject(1);
         this.mobileBreakpointObs$ = this._mobileBreakpoint$.pipe(startWith(ScreenBreakpoints.MOBILE));
+        this.tabletBreakpointObs$ = this._tabletBreakpoint$.pipe(startWith(ScreenBreakpoints.TABLET));
         this.isMobile$ = this.mobileBreakpointObs$.pipe(switchMap(breakpoint => this.breakpointObserver.observe(`(max-width: ${breakpoint}px)`).pipe(map(v => v.matches))));
+        this.isTablet$ = this.tabletBreakpointObs$.pipe(switchMap(breakpoint => this.breakpointObserver.observe(`(max-width: ${breakpoint}px)`).pipe(map(v => v.matches))));
+        this.isOpened = false;
         if (defaultAppTheme) {
             this.applicationTheme = defaultAppTheme;
         }
@@ -5342,12 +5353,15 @@ class NavbarComponent {
     clickMenuItem(id) {
         this.menuItemClicked.emit(id);
     }
+    onOpenChange(isOpened) {
+        this.isOpened = isOpened;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavbarComponent, deps: [{ token: i1$6.BreakpointObserver }, { token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: SideSheetService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userName: "userName", email: "email", menuItems: "menuItems", language: "language", applicationTheme: "applicationTheme", contentTemplateRef: "contentTemplateRef", mobileBreakpoint: "mobileBreakpoint", isAvatar: "isAvatar" }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<ui-side-sheet [applicationTheme]=\"applicationTheme\" [position]=\"'start'\">\n  <mat-toolbar [attr.theme]=\"applicationTheme\">\n    <div class=\"custom-toolbar row\">\n      <ui-button (click)=\"openMobileMenu()\" *ngIf=\"isMobile$ | async\" [variant]=\"'text'\" [companyColor]=\"'#242424'\"\n                 [applicationTheme]=\"'light'\" [iconName]=\"'Menu-burger-in-line'\" [justIcon]=\"true\"></ui-button>\n      <ui-logo [applicationTheme]=\"applicationTheme\" class=\"logo\" (click)=\"navigate('')\"></ui-logo>\n      <div class=\"navigation row\">\n        <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\"\n           [ngClass]=\"{'active': activedRoute === route.id}\">\n          <span>{{ route.title }}</span>\n        </a>\n      </div>\n      <div class=\"actions\">\n        <ng-content select=\"[actions]\"></ng-content>\n        <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n          <ng-container *ngIf=\"isAvatar; else onlyName\">\n            <ui-avatar [applicationTheme]=\"applicationTheme\" [name]=\"userName\"></ui-avatar>\n          </ng-container>\n\n          <ng-template #onlyName>\n            {{ userName }}\n          </ng-template>\n\n          <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n          <ng-template #newThemeIcon>\n            <ui-icon [size]=\"'24'\"\n                     [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n                     [applicationTheme]=\"applicationTheme\"></ui-icon>\n          </ng-template>\n        </button>\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <ng-content></ng-content>\n\n  <mat-menu #menu=\"matMenu\">\n    <button *ngFor=\"let e of menuItems\" mat-menu-item (click)=\"clickMenuItem(e.id)\">\n      <div class=\"menu-item\">\n        <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n        {{ e.text }}\n      </div>\n    </button>\n    <button mat-menu-item (click)=\"logout()\">\n      <mat-icon>power_settings_new</mat-icon>\n      {{ (translationContext + 'LOG_OUT') | uiTranslate : language }}\n    </button>\n  </mat-menu>\n</ui-side-sheet>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:200px;height:43px;align-self:center;display:flex}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:40px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:80px;padding:0 24px!important;border-bottom:1px solid #D3D3D3}.mat-toolbar[theme=dark] .custom-toolbar ui-logo.logo,.mat-toolbar[theme=light] .custom-toolbar ui-logo.logo{width:200px;margin-left:40px}@media (max-width: 600px){.mat-toolbar[theme=dark] .custom-toolbar ui-logo.logo,.mat-toolbar[theme=light] .custom-toolbar ui-logo.logo{margin:0 auto}}.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .actions{color:#242424}.mat-toolbar[theme=dark] .custom-toolbar .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .custom-toolbar .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] .custom-toolbar .actions .profile-menu,.mat-toolbar[theme=light] .custom-toolbar .actions .profile-menu{margin-right:0}.mat-toolbar[theme=dark] .custom-toolbar ui-icon,.mat-toolbar[theme=light] .custom-toolbar ui-icon{margin-left:8px}.mat-toolbar[theme=dark] .custom-toolbar ui-icon.open,.mat-toolbar[theme=light] .custom-toolbar ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .custom-toolbar .navigation a,.mat-toolbar[theme=light] .custom-toolbar .navigation a{padding:16px 24px}.mat-toolbar[theme=dark] .custom-toolbar .navigation a.active,.mat-toolbar[theme=light] .custom-toolbar .navigation a.active{border-top:unset;border-bottom:2px solid #D410AA}@media (max-width: 600px){.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{height:56px!important;padding:0 16px!important}.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme"], outputs: ["editClick"] }, { kind: "component", type: SideSheetComponent, selector: "ui-side-sheet", inputs: ["position", "language", "applicationTheme"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userName: "userName", email: "email", menuItems: "menuItems", language: "language", applicationTheme: "applicationTheme", contentTemplateRef: "contentTemplateRef", mobileBreakpoint: "mobileBreakpoint", isAvatar: "isAvatar" }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<ui-side-sheet [applicationTheme]=\"applicationTheme\" (openChange)=\"onOpenChange($event)\" [position]=\"(isMobile$ | async) ? 'start' : 'end'\">\n  <mat-toolbar [attr.theme]=\"applicationTheme\">\n    <div class=\"custom-toolbar row\">\n      <ui-logo [applicationTheme]=\"applicationTheme\" class=\"logo\" (click)=\"navigate('')\"></ui-logo>\n      <ui-button (click)=\"openMobileMenu()\" *ngIf=\"isMobile$ | async\" [variant]=\"'text'\" [companyColor]=\"'#242424'\"\n                 [applicationTheme]=\"'light'\" [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\" [justIcon]=\"true\"></ui-button>\n      <div class=\"navigation row\">\n        <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\"\n           [ngClass]=\"{'active': activedRoute === route.id}\">\n          <span>{{ route.title }}</span>\n        </a>\n      </div>\n      <div class=\"actions\">\n        <ng-content select=\"[actions]\"></ng-content>\n        <button mat-button class=\"profile-menu\" *ngIf=\"isTablet$ | async; else pc\" (click)=\"openMobileMenu()\">\n          <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n        </button>\n\n        <ng-template #pc>\n          <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n          </button>\n        </ng-template>\n\n        <ng-template #buttonContent>\n          <ng-container *ngIf=\"isAvatar; else onlyName\">\n            <ui-avatar [applicationTheme]=\"applicationTheme\" [name]=\"userName\"></ui-avatar>\n          </ng-container>\n\n          <ng-template #onlyName>\n            {{ userName }}\n          </ng-template>\n\n          <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n          <ng-template #newThemeIcon>\n            <ui-icon [size]=\"'24'\"\n                     *ngIf=\"!isAvatar\"\n                     [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n                     [applicationTheme]=\"applicationTheme\"></ui-icon>\n          </ng-template>\n        </ng-template>\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <ng-content></ng-content>\n\n  <mat-menu #menu=\"matMenu\">\n    <button *ngFor=\"let e of menuItems\" mat-menu-item (click)=\"clickMenuItem(e.id)\">\n      <div class=\"menu-item\">\n        <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n        {{ e.text }}\n      </div>\n    </button>\n    <button mat-menu-item (click)=\"logout()\">\n      <mat-icon>power_settings_new</mat-icon>\n      {{ (translationContext + 'LOG_OUT') | uiTranslate : language }}\n    </button>\n  </mat-menu>\n</ui-side-sheet>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep .mat-drawer{padding:0!important}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header{padding:16px 16px 16px 24px!important;border-bottom:1px solid #D3D3D3;height:64px}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo{width:100%;margin:0!important;display:flex;justify-content:flex-start}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo img{width:-moz-fit-content;width:fit-content;height:32px}@media (max-width: 1024px) and (min-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px);max-width:320px}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}@media (max-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px)}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}.mat-toolbar{height:80px;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:200px;height:43px;align-self:center;display:flex}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:40px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0 24px!important;border-bottom:1px solid #D3D3D3}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{justify-content:space-between}.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{width:200px;margin-left:40px}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] .actions .profile-menu,.mat-toolbar[theme=light] .actions .profile-menu{margin-right:0}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #D410AA}@media (max-width: 600px){.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{padding:0 16px 0 0!important}.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center;margin:0!important}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme"], outputs: ["editClick"] }, { kind: "component", type: SideSheetComponent, selector: "ui-side-sheet", inputs: ["position", "language", "applicationTheme"], outputs: ["openChange"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ui-side-sheet [applicationTheme]=\"applicationTheme\" [position]=\"'start'\">\n  <mat-toolbar [attr.theme]=\"applicationTheme\">\n    <div class=\"custom-toolbar row\">\n      <ui-button (click)=\"openMobileMenu()\" *ngIf=\"isMobile$ | async\" [variant]=\"'text'\" [companyColor]=\"'#242424'\"\n                 [applicationTheme]=\"'light'\" [iconName]=\"'Menu-burger-in-line'\" [justIcon]=\"true\"></ui-button>\n      <ui-logo [applicationTheme]=\"applicationTheme\" class=\"logo\" (click)=\"navigate('')\"></ui-logo>\n      <div class=\"navigation row\">\n        <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\"\n           [ngClass]=\"{'active': activedRoute === route.id}\">\n          <span>{{ route.title }}</span>\n        </a>\n      </div>\n      <div class=\"actions\">\n        <ng-content select=\"[actions]\"></ng-content>\n        <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n          <ng-container *ngIf=\"isAvatar; else onlyName\">\n            <ui-avatar [applicationTheme]=\"applicationTheme\" [name]=\"userName\"></ui-avatar>\n          </ng-container>\n\n          <ng-template #onlyName>\n            {{ userName }}\n          </ng-template>\n\n          <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n          <ng-template #newThemeIcon>\n            <ui-icon [size]=\"'24'\"\n                     [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n                     [applicationTheme]=\"applicationTheme\"></ui-icon>\n          </ng-template>\n        </button>\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <ng-content></ng-content>\n\n  <mat-menu #menu=\"matMenu\">\n    <button *ngFor=\"let e of menuItems\" mat-menu-item (click)=\"clickMenuItem(e.id)\">\n      <div class=\"menu-item\">\n        <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n        {{ e.text }}\n      </div>\n    </button>\n    <button mat-menu-item (click)=\"logout()\">\n      <mat-icon>power_settings_new</mat-icon>\n      {{ (translationContext + 'LOG_OUT') | uiTranslate : language }}\n    </button>\n  </mat-menu>\n</ui-side-sheet>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:200px;height:43px;align-self:center;display:flex}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:40px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:80px;padding:0 24px!important;border-bottom:1px solid #D3D3D3}.mat-toolbar[theme=dark] .custom-toolbar ui-logo.logo,.mat-toolbar[theme=light] .custom-toolbar ui-logo.logo{width:200px;margin-left:40px}@media (max-width: 600px){.mat-toolbar[theme=dark] .custom-toolbar ui-logo.logo,.mat-toolbar[theme=light] .custom-toolbar ui-logo.logo{margin:0 auto}}.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .actions{color:#242424}.mat-toolbar[theme=dark] .custom-toolbar .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .custom-toolbar .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] .custom-toolbar .actions .profile-menu,.mat-toolbar[theme=light] .custom-toolbar .actions .profile-menu{margin-right:0}.mat-toolbar[theme=dark] .custom-toolbar ui-icon,.mat-toolbar[theme=light] .custom-toolbar ui-icon{margin-left:8px}.mat-toolbar[theme=dark] .custom-toolbar ui-icon.open,.mat-toolbar[theme=light] .custom-toolbar ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .custom-toolbar .navigation a,.mat-toolbar[theme=light] .custom-toolbar .navigation a{padding:16px 24px}.mat-toolbar[theme=dark] .custom-toolbar .navigation a.active,.mat-toolbar[theme=light] .custom-toolbar .navigation a.active{border-top:unset;border-bottom:2px solid #D410AA}@media (max-width: 600px){.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{height:56px!important;padding:0 16px!important}.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"] }]
+            args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ui-side-sheet [applicationTheme]=\"applicationTheme\" (openChange)=\"onOpenChange($event)\" [position]=\"(isMobile$ | async) ? 'start' : 'end'\">\n  <mat-toolbar [attr.theme]=\"applicationTheme\">\n    <div class=\"custom-toolbar row\">\n      <ui-logo [applicationTheme]=\"applicationTheme\" class=\"logo\" (click)=\"navigate('')\"></ui-logo>\n      <ui-button (click)=\"openMobileMenu()\" *ngIf=\"isMobile$ | async\" [variant]=\"'text'\" [companyColor]=\"'#242424'\"\n                 [applicationTheme]=\"'light'\" [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\" [justIcon]=\"true\"></ui-button>\n      <div class=\"navigation row\">\n        <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\"\n           [ngClass]=\"{'active': activedRoute === route.id}\">\n          <span>{{ route.title }}</span>\n        </a>\n      </div>\n      <div class=\"actions\">\n        <ng-content select=\"[actions]\"></ng-content>\n        <button mat-button class=\"profile-menu\" *ngIf=\"isTablet$ | async; else pc\" (click)=\"openMobileMenu()\">\n          <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n        </button>\n\n        <ng-template #pc>\n          <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n            <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n          </button>\n        </ng-template>\n\n        <ng-template #buttonContent>\n          <ng-container *ngIf=\"isAvatar; else onlyName\">\n            <ui-avatar [applicationTheme]=\"applicationTheme\" [name]=\"userName\"></ui-avatar>\n          </ng-container>\n\n          <ng-template #onlyName>\n            {{ userName }}\n          </ng-template>\n\n          <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n          <ng-template #newThemeIcon>\n            <ui-icon [size]=\"'24'\"\n                     *ngIf=\"!isAvatar\"\n                     [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n                     [applicationTheme]=\"applicationTheme\"></ui-icon>\n          </ng-template>\n        </ng-template>\n      </div>\n    </div>\n  </mat-toolbar>\n\n  <ng-content></ng-content>\n\n  <mat-menu #menu=\"matMenu\">\n    <button *ngFor=\"let e of menuItems\" mat-menu-item (click)=\"clickMenuItem(e.id)\">\n      <div class=\"menu-item\">\n        <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n        {{ e.text }}\n      </div>\n    </button>\n    <button mat-menu-item (click)=\"logout()\">\n      <mat-icon>power_settings_new</mat-icon>\n      {{ (translationContext + 'LOG_OUT') | uiTranslate : language }}\n    </button>\n  </mat-menu>\n</ui-side-sheet>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep .mat-drawer{padding:0!important}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header{padding:16px 16px 16px 24px!important;border-bottom:1px solid #D3D3D3;height:64px}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo{width:100%;margin:0!important;display:flex;justify-content:flex-start}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo img{width:-moz-fit-content;width:fit-content;height:32px}@media (max-width: 1024px) and (min-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px);max-width:320px}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}@media (max-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px)}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}.mat-toolbar{height:80px;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:200px;height:43px;align-self:center;display:flex}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:40px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0 24px!important;border-bottom:1px solid #D3D3D3}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{justify-content:space-between}.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{width:200px;margin-left:40px}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] .actions .profile-menu,.mat-toolbar[theme=light] .actions .profile-menu{margin-right:0}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #D410AA}@media (max-width: 600px){.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{padding:0 16px 0 0!important}.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center;margin:0!important}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$6.BreakpointObserver }, { type: undefined, decorators: [{
                     type: Optional
                 }, {