@indice/ng-components 0.2.133 → 0.2.134-beta

package/fesm2015/indice-ng-components.js

@@ -3,10 +3,10 @@ import { EventEmitter, PLATFORM_ID, Directive, Inject, Input, Output, Component,
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/router';
-import { NavigationStart, Router, ActivatedRoute, ActivationStart, RouterModule } from '@angular/router';
+import { NavigationStart, Router, ActivationStart, RouterModule } from '@angular/router';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { BehaviorSubject, Subject, of, fromEvent } from 'rxjs';
-import { filter, share, map, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { BehaviorSubject, Subject, of, Observable, fromEvent } from 'rxjs';
+import { filter, map, debounceTime, distinctUntilChanged, startWith, catchError } from 'rxjs/operators';
 import * as i2 from '@indice/ng-auth';
 import { AuthService, IndiceAuthModule } from '@indice/ng-auth';
 
@@ -294,25 +294,30 @@ Icons.SortDesc = 'ms-Icon ms-Icon--Descending';
 Icons.Details = ' ms-Icon ms-Icon--AccountActivity';
 
 class NavLink {
-    constructor(text, path, exact = false, external = false, icon) {
-        this.type = 'router';
+    constructor(text, path, exact = false, external = false, icon, isRead, creationDate) {
+        this.isRead = false;
         this.text = text;
         this.path = path;
         this.exact = exact;
         this.external = external;
         this.icon = icon;
+        this.isRead = isRead;
+        this.creationDate = creationDate;
     }
 }
 class ExternalNavLink extends NavLink {
     constructor(text, path, openInNewTab, icon) {
         super(text, path, true, openInNewTab, icon);
-        this.type = 'external';
     }
 }
 class FragmentNavLink extends NavLink {
     constructor(text, path, icon) {
         super(text, path, true, true, icon);
-        this.type = 'fragment';
+    }
+}
+class NotificationNavLink extends NavLink {
+    constructor(text, path, isRead, creationDate) {
+        super(text, path, true, false, undefined, isRead, creationDate);
     }
 }
 class ViewAction {
@@ -366,6 +371,7 @@ class DefaultShellConfig {
         this.appLogoAlt = 'your app name here';
         this.showHeader = true;
         this.showUserNameOnHeader = false;
+        this.showNotifications = false;
         this.showFooter = true;
         this.fluid = false;
     }
@@ -592,7 +598,7 @@ class ListViewEmptyStateComponent {
     }
 }
 ListViewEmptyStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ListViewEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ListViewEmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: { title: "title", subTitle: ["sub-title", "subTitle"], newItemLabel: ["new-item-label", "newItemLabel"] }, ngImport: i0, template: "<div class=\"p-20\">\n  <div class=\"text-center p-2\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\n    </svg>\n    <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\n    <p class=\"mt-1 text-sm text-gray-500\">\n      {{subTitle}}\n    </p>\n    <div class=\"mt-6\" *ngIf=\"false\">\n      <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\n        <!-- Heroicon name: solid/plus -->\n        <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\n        </svg>\n        {{newItemLabel}}\n      </button>\n    </div>\n  </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ListViewEmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: { title: "title", subTitle: ["sub-title", "subTitle"], newItemLabel: ["new-item-label", "newItemLabel"] }, ngImport: i0, template: "<div class=\"p-20\">\r\n  <div class=\"text-center p-2\">\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\r\n    </svg>\r\n    <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\r\n    <p class=\"mt-1 text-sm text-gray-500\">\r\n      {{subTitle}}\r\n    </p>\r\n    <div class=\"mt-6\" *ngIf=\"false\">\r\n      <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\r\n        <!-- Heroicon name: solid/plus -->\r\n        <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n          <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\r\n        </svg>\r\n        {{newItemLabel}}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ListViewEmptyStateComponent, decorators: [{
             type: Component,
             args: [{
@@ -1388,42 +1394,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImpor
                 type: Output
             }] } });
 
-class NavLinksListComponent {
-    constructor() {
-        // tslint:disable-next-line:no-input-rename
-        this.navLinkClass = 'nav-link';
-        // tslint:disable-next-line:no-input-rename
-        this.navLinkActiveClass = 'nav-link-active';
-        // tslint:disable-next-line:no-input-rename
-        this.containerClass = '';
-    }
-    ngOnInit() {
-    }
-}
-NavLinksListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: NavLinksListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavLinksListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: { links: "links", activeFragment: ["active-fragment", "activeFragment"], navLinkClass: ["link-class", "navLinkClass"], navLinkActiveClass: ["link-active-class", "navLinkActiveClass"], containerClass: ["container-class", "containerClass"] }, ngImport: i0, template: "<div [class]=\"containerClass\">\n  <ng-container *ngFor=\"let link of links | async\">\n    <ng-container [ngSwitch]=\"link.type\">\n      <a *ngSwitchCase=\"'router'\"\n        href=\"#\"\n        [routerLink]=\"[link.path]\"\n        [routerLinkActive]=\"navLinkActiveClass\"\n        [routerLinkActiveOptions]=\"{ exact: link.exact }\"\n        [class]=\"navLinkClass\">\n        {{ link.text }}\n      </a>\n      <a *ngSwitchCase=\"'external'\"\n        [href]=\"link.path\"\n        [attr.target]=\"link.external ? '_blank' : '_self'\"\n        class=\"nav-link\">\n        {{ link.text }}\n      </a>\n      <a *ngSwitchCase=\"'fragment'\"\n        routerLink=\".\"\n        [fragment]=\"link.path\"\n        [class.active]=\"(activeFragment | async) === link.path\"\n        class=\"nav-link\">\n        {{ link.text }}\n      </a>\n    </ng-container>\n  </ng-container>\n</div>\n", directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }], pipes: { "async": i1.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: NavLinksListComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-nav-links-list',
-                    templateUrl: './nav-links-list.component.html'
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { links: [{
-                type: Input
-            }], activeFragment: [{
-                type: Input,
-                args: ['active-fragment']
-            }], navLinkClass: [{
-                type: Input,
-                args: ['link-class']
-            }], navLinkActiveClass: [{
-                type: Input,
-                args: ['link-active-class']
-            }], containerClass: [{
-                type: Input,
-                args: ['container-class']
-            }] } });
-
 const APP_LINKS = new InjectionToken('APP_LINKS');
 const SHELL_CONFIG = new InjectionToken('SHELL_CONFIG');
 
@@ -1674,87 +1644,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ApplicationRef }]; } });
 
 class ShellHeaderComponent {
-    constructor(authService, router, route, config, links) {
+    constructor(authService, router, links) {
         this.authService = authService;
         this.router = router;
-        this.route = route;
-        this.config = config;
         this.links = links;
         // tslint:disable-next-line:no-input-rename
         this.sectionLinksPath = 'main';
-        // tslint:disable-next-line:no-input-rename
-        this.profileMenuVisible = true;
-        // tslint:disable-next-line:no-input-rename
-        this.showUserNameOnHeader = false;
+        this.notificationLinksPath = 'notifications';
+        this.allNotificationsLinkPath = 'allNotifications';
         this.border = true;
+        this.showNotifications = false;
+        this.showUserNameOnHeader = false;
+        this.notificationsMenuVisible = true;
+        this.profileMenuVisible = true;
         this.sectionLinks = of([]);
+        this.notificationLinks = of([]);
+        this.allNotificationsLink = of();
         this.mobileMenuExpanded = false;
         this.userMenuExpanded = false;
+        this.notificationsMenuExpanded = false;
+        this.routeSubject = new Observable();
         this.routerSub$ = null;
         this.userSub$ = null;
         this.statusSub$ = null;
         this.user = null;
         this.avatarName = null;
-        this.activeFragment = null;
-        this.routeSubject = this.router.events.pipe(filter((event) => event instanceof NavigationStart));
+    }
+    ngOnDestroy() {
+        if (this.routerSub$) {
+            this.routerSub$.unsubscribe();
+        }
+        // TODO: check authenticated user here before we start polling server status
+        if (this.statusSub$) {
+            this.statusSub$.unsubscribe();
+        }
+        if (this.userSub$) {
+            this.userSub$.unsubscribe();
+        }
     }
     ngOnInit() {
-        this.activeFragment = this.route.fragment.pipe(share());
+        var _a, _b;
+        this.showNotifications = (_a = this.config) === null || _a === void 0 ? void 0 : _a.showNotifications;
+        this.showUserNameOnHeader = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showUserNameOnHeader;
         this.sectionLinks = this.links[this.sectionLinksPath];
-        this.routerSub$ = this.routeSubject.subscribe((event) => {
+        this.notificationLinks = this.links[this.notificationLinksPath];
+        this.allNotificationsLink = this.links[this.allNotificationsLinkPath];
+        this.routerSub$ = this.router.events.pipe(filter(event => event instanceof NavigationStart)).subscribe(event => {
             this.mobileMenuExpanded = false;
             this.userMenuExpanded = false;
+            this.notificationsMenuExpanded = false;
         });
         this.authService.loadUser().subscribe((user) => {
+            console.log(user);
             this.setCurrentUser(user);
         }, error => {
-            console.error(error);
+            console.log(error);
         });
         // Detect user changes and display / or not user info accordingly...
         this.userSub$ = this.authService.user$.subscribe((user) => {
             // console.log('ShellHeaderComponent user subscription');
             this.setCurrentUser(user);
         });
-        // set current lang if no current value from langs if any
-        if (!this.currentLang && this.langs && this.langs.length > 0) {
-            this.setCurrentLang(this.langs[0]);
-        }
     }
-    ngOnDestroy() {
-        if (this.routerSub$) {
-            this.routerSub$.unsubscribe();
-        }
-        // TODO: check authenticated user here before we start polling server status
-        if (this.statusSub$) {
-            this.statusSub$.unsubscribe();
-        }
-        if (this.userSub$) {
-            this.userSub$.unsubscribe();
+    setCurrentUser(user) {
+        var _a, _b;
+        this.user = user;
+        if (this.user && this.user.profile) {
+            this.avatarName = `${(_a = this.user.profile.given_name) === null || _a === void 0 ? void 0 : _a.charAt(0)}${(_b = this.user.profile.family_name) === null || _b === void 0 ? void 0 : _b.charAt(0)}`;
+            console.log('load user', this.avatarName);
         }
     }
     // tslint:disable-next-line:typedef
-    onClickOutside($event) {
+    onClickOutsideProfile($event) {
         this.userMenuExpanded = false;
     }
+    // tslint:disable-next-line:typedef
+    onClickOutsideNotifications($event) {
+        this.notificationsMenuExpanded = false;
+    }
     signin(event) {
         if (event) {
             event.preventDefault();
         }
         this.authService.signinRedirect();
     }
-    setCurrentUser(user) {
-        var _a, _b;
-        this.user = user;
-        if (this.user && this.user.profile) {
-            this.avatarName = `${(_a = this.user.profile.given_name) === null || _a === void 0 ? void 0 : _a.charAt(0)}${(_b = this.user.profile.family_name) === null || _b === void 0 ? void 0 : _b.charAt(0)}`.toUpperCase();
-        }
+    expandUserMenu() {
+        this.userMenuExpanded = !this.userMenuExpanded;
+        this.notificationsMenuExpanded = false;
     }
-    setCurrentLang(lang) {
-        this.currentLang = lang;
+    expandNotificationsMenu() {
+        this.notificationsMenuExpanded = !this.notificationsMenuExpanded;
+        this.userMenuExpanded = false;
     }
 }
-ShellHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ShellHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
-ShellHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], profileMenuVisible: ["profile-menu", "profileMenuVisible"], showUserNameOnHeader: ["show-userName", "showUserNameOnHeader"], langs: "langs", currentLang: ["current-lang", "currentLang"], border: "border" }, ngImport: i0, template: "<nav>\r\n  <div class=\"shell-header-paddings\">\r\n    <div [class]=\"border ? 'shell-header-border' : ''\">\r\n      <div class=\"shell-header-menu-container\">\r\n        <div class=\"shell-header-logo-container\">\r\n          <div>\r\n            <a href=\"#\" [routerLink]=\"['/']\"><img class=\"app-logo\" [src]=\"config.appLogo\" [alt]=\"config.appLogoAlt\" /></a>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-link-container\">\r\n          <div class=\"shell-header-link-container-inner\">\r\n            <lib-nav-links-list\r\n              [links]=\"sectionLinks\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'nav-link'\"\r\n              [link-active-class]=\"'nav-link-active'\">\r\n            </lib-nav-links-list>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"langs && langs.length > 1 && currentLang\" class=\"shell-header-links-far-container\">\r\n            <button class=\"text-blue-300 hover:text-blue-500\">\r\n                <span>{{currentLang}}</span>\r\n                <i class=\"text-xs ml-1 ms-Icon ms-Icon--ChevronDown\"></i>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"shell-header-md-visible\">\r\n          <div class=\"shell-header-links-far-container\" (clickOutside)=\"onClickOutside($event)\">\r\n\r\n            <lib-nav-links-list [links]=\"links.profileActions\" [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'shell-header-menu-rounded-button'\" [link-active-class]=\"'shell-header-menu-rounded-button-active'\">\r\n            </lib-nav-links-list>\r\n\r\n            <!-- <ng-container *ngFor=\"let link of links.profileActions | async\">\r\n              <a class=\"shell-header-menu-rounded-button\"\r\n                 (clickOutside)=\"onClickOutside($event)\"\r\n                 [attr.href]=\"link.path\"\r\n                 [attr.target]=\"link.external ? '_blank' : '_self'\">\r\n                <span class=\"sr-only\">{{ link.text }}</span>\r\n                <i *ngIf=\"link.icon\" [class]=\"link.icon\"></i>\r\n              </a>\r\n            </ng-container> -->\r\n\r\n            <!-- Profile dropdown -->\r\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-2 relative\" (clickOutside)=\"onClickOutside($event)\">\r\n              <div [ngClass]=\"{'shell-header-profile': showUserNameOnHeader}\">\r\n                <div *ngIf=\"user && showUserNameOnHeader\" class=\"shell-header-profile-userName\">\r\n                  {{ user.profile.name }}\r\n                </div>\r\n                <button type=\"button\" *ngIf=\"user\" (click)=\"userMenuExpanded = !userMenuExpanded\"\r\n                        class=\"shell-header-profile-dropdown-button\"\r\n                        id=\"user-menu\"\r\n                        aria-expanded=\"false\"\r\n                        aria-haspopup=\"true\">\r\n                  <span class=\"sr-only\">Open user menu</span>\r\n                  <span class=\"avatar-container\">\r\n                    <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n                  </span>\r\n                </button>\r\n\r\n                <button type=\"button\"\r\n                        *ngIf=\"!user\"\r\n                        (click)=\"signin(null)\"\r\n                        class=\"shell-header-profile-dropdown-button\"\r\n                        id=\"user-menu\"\r\n                        aria-expanded=\"false\"\r\n                        aria-haspopup=\"true\">\r\n                  <span class=\"sr-only\">sign in</span>\r\n                  <span class=\"avatar-container\">\r\n                    <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n                  </span>\r\n                </button>\r\n\r\n                <div *ngIf=\"userMenuExpanded\"\r\n                     [ngClass]=\"showUserNameOnHeader ? 'shell-header-profile-dropdown-with-username' : 'shell-header-profile-dropdown'\"\r\n                     role=\"menu\"\r\n                     aria-orientation=\"vertical\"\r\n                     aria-labelledby=\"user-menu\">\r\n                     <lib-nav-links-list\r\n                        [links]=\"links.profile\"\r\n                        [active-fragment]=\"activeFragment\"\r\n                        [link-class]=\"'nav-link-profile'\"\r\n                        [link-active-class]=\"'nav-link-profile-active'\">\r\n                    </lib-nav-links-list>\r\n                </div>\r\n\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mobile-menu-button-container\">\r\n          <!-- Mobile menu button -->\r\n          <button type=\"button\"\r\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n                  class=\"mobile-menu-button\"\r\n                  aria-controls=\"mobile-menu\"\r\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n            <span class=\"sr-only\">Open main menu</span>\r\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'hidden':'block h-6 w-6'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\r\n            </svg>\r\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\"\r\n                 [class]=\"mobileMenuExpanded ? 'block h-6 w-6':'hidden'\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Mobile menu, show/hide based on menu state. -->\r\n  <div class=\"mobile-menu-container\" *ngIf=\"mobileMenuExpanded\" id=\"mobile-menu\">\r\n    <lib-nav-links-list\r\n      [links]=\"sectionLinks\"\r\n      [active-fragment]=\"activeFragment\"\r\n      [link-class]=\"'nav-link-mobile'\"\r\n      [link-active-class]=\"'nav-link-mobile-active'\"\r\n      [container-class]=\"'mobile-menu-link-container'\">\r\n    </lib-nav-links-list>\r\n\r\n    <div *ngIf=\"!user\">\r\n      <a href=\"#\" (click)=\"signin($event)\" class=\"nav-link-mobile\">\r\n        <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n      </a>\r\n    </div>\r\n\r\n    <div class=\"mobile-menu-user-info-container\" *ngIf=\"user\">\r\n      <div class=\"mobile-menu-user-info-container-inner\">\r\n        <div class=\"flex-shrink-0\">\r\n          <span class=\"mobile-menu-avatar-container\">\r\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n          </span>\r\n        </div>\r\n        <div class=\"ml-3\">\r\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n        </div>\r\n        <button class=\"mobile-menu-rounded-button\">\r\n          <span class=\"sr-only\">View notifications</span>\r\n          <!-- Heroicon name: outline/bell -->\r\n          <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n               xmlns=\"http://www.w3.org/2000/svg\"\r\n               fill=\"none\"\r\n               viewBox=\"0 0 24 24\"\r\n               stroke=\"currentColor\"\r\n               aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <lib-nav-links-list\r\n          [links]=\"links.profile\"\r\n          [active-fragment]=\"activeFragment\"\r\n          [link-class]=\"'nav-link-mobile'\"\r\n          [link-active-class]=\"'nav-link-mobile-active'\"\r\n          [container-class]=\"'mobile-menu-link-container'\">\r\n      </lib-nav-links-list>\r\n  </div>\r\n</nav>\r\n", components: [{ type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: ["links", "active-fragment", "link-class", "link-active-class", "container-class"] }], directives: [{ type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+ShellHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ShellHeaderComponent, deps: [{ token: AuthService }, { token: Router }, { token: APP_LINKS }], target: i0.ɵɵFactoryTarget.Component });
+ShellHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], notificationLinksPath: ["notification-links", "notificationLinksPath"], allNotificationsLinkPath: ["all-notifications", "allNotificationsLinkPath"], config: "config", border: "border" }, ngImport: i0, template: "<nav>\r\n  <div class=\"shell-header-paddings\">\r\n    <div [class]=\"border ? 'shell-header-border' : ''\">\r\n      <div class=\"shell-header-menu-container\">\r\n        <div class=\"shell-header-links-no-grow-container\">\r\n          <div>\r\n            <a href=\"#\"\r\n               [routerLink]=\"['/']\"><img class=\"app-logo\"\r\n                   [src]=\"config.appLogo\"\r\n                   [alt]=\"config.appLogoAlt\" /></a>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-link-container\">\r\n          <ng-container *ngFor=\"let link of sectionLinks | async\">\r\n            <a href=\"#\"\r\n               [routerLink]=\"[link.path]\"\r\n               [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n               [routerLinkActive]=\"['nav-link-active']\"\r\n               [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n               class=\"nav-link\">\r\n              {{ link.text }}\r\n            </a>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <div class=\"shell-header-md-visible\">\r\n          <div class=\"shell-header-links-no-grow-container\">\r\n\r\n            <ng-container *ngFor=\"let link of links.profileActions | async\">\r\n              <a class=\"shell-header-menu-rounded-button\"\r\n                 (clickOutside)=\"onClickOutsideProfile($event)\"\r\n                 [attr.href]=\"link.path\"\r\n                 [attr.target]=\"link.external ? '_blank' : '_self'\">\r\n                <span class=\"sr-only\">{{ link.text }}</span>\r\n                <i *ngIf=\"link.icon\"\r\n                   [class]=\"link.icon\"></i>\r\n              </a>\r\n            </ng-container>\r\n\r\n            <!-- Profile dropdown -->\r\n            <div class=\"ml-2 relative\"\r\n                 (clickOutside)=\"onClickOutsideProfile($event)\"\r\n                 *ngIf=\"profileMenuVisible\">\r\n              <div [ngClass]=\"{'shell-header-profile': showUserNameOnHeader}\">\r\n                <div *ngIf=\"user && showUserNameOnHeader\"\r\n                     class=\"shell-header-profile-userName\">\r\n                  {{ user.profile.name }}\r\n                </div>\r\n                <button type=\"button\"\r\n                        *ngIf=\"user\"\r\n                        (click)=\"userMenuExpanded = !userMenuExpanded\"\r\n                        class=\"shell-header-profile-dropdown-button\"\r\n                        id=\"user-menu\"\r\n                        aria-expanded=\"false\"\r\n                        aria-haspopup=\"true\">\r\n                  <span class=\"sr-only\">Open user menu</span>\r\n                  <span class=\"avatar-container\">\r\n                    <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n                  </span>\r\n                </button>\r\n\r\n                <button type=\"button\"\r\n                        *ngIf=\"!user\"\r\n                        (click)=\"signin(null)\"\r\n                        class=\"shell-header-profile-dropdown-button\"\r\n                        id=\"user-menu\"\r\n                        aria-expanded=\"false\"\r\n                        aria-haspopup=\"true\">\r\n                  <span class=\"sr-only\">sign in</span>\r\n                  <span class=\"avatar-container\">\r\n                    <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n                  </span>\r\n                </button>\r\n\r\n                <div *ngIf=\"userMenuExpanded\"\r\n                     [ngClass]=\"showUserNameOnHeader ? 'shell-header-profile-dropdown-with-username' : 'shell-header-profile-dropdown'\"\r\n                     role=\"menu\"\r\n                     aria-orientation=\"vertical\"\r\n                     aria-labelledby=\"user-menu\">\r\n                  <!-- <a href=\"#\" class=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\" role=\"menuitem\">\u0391\u03C0\u03BF\u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7</a> -->\r\n                  <ng-container *ngFor=\"let link of links.profile | async\">\r\n                    <!-- <a *ngIf=\"link.external\" [attr.href]=\"link.path\" [attr.target]=\"'_blank'\" class=\"nav-link-profile\">\r\n                      {{ link.text }}\r\n                    </a> -->\r\n                    <a [routerLink]=\"link.path\"\r\n                       [routerLinkActive]=\"['nav-link-profile-active']\"\r\n                       [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n                       class=\"nav-link-profile\">\r\n                      {{ link.text }}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Notifications dropdown -->\r\n            <div class=\"ml-2 relative\"\r\n                 (clickOutside)=\"onClickOutsideNotifications($event)\"\r\n                 *ngIf=\"notificationsMenuVisible\">\r\n              <!-- Notifications Button -->\r\n              <button class=\"mobile-menu-rounded-button bg-transparent\"\r\n                      *ngIf=\"showNotifications\"\r\n                      (click)=\"expandNotificationsMenu()\"\r\n                      id=\"notifications-menu\"\r\n                      aria-expanded=\"false\"\r\n                      aria-haspopup=\"true\">\r\n                <span class=\"sr-only\">View notifications</span>\r\n                <!-- Heroicon name: outline/bell -->\r\n                <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n                     xmlns=\"http://www.w3.org/2000/svg\"\r\n                     fill=\"none\"\r\n                     viewBox=\"0 0 24 24\"\r\n                     stroke=\"currentColor\"\r\n                     aria-hidden=\"true\">\r\n                  <path stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                        stroke-width=\"2\"\r\n                        d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n                </svg>\r\n              </button>\r\n\r\n              <div *ngIf=\"notificationsMenuExpanded\"\r\n                   [ngClass]=\"showUserNameOnHeader ? 'shell-header-notifications-dropdown-with-username' : 'shell-header-notifications-dropdown'\"\r\n                   role=\"menu\"\r\n                   aria-orientation=\"vertical\"\r\n                   aria-labelledby=\"notifications-menu\">\r\n                <div class=\"max-h-64 overflow-y-auto notification-messages min-h\">\r\n                  <ng-container *ngIf=\"!notificationLinks; else notificationsDropDown\"\r\n                                class=\"py-5\">\r\n                    <div class=\"nav-link-notifications hover:bg-transparent\">\r\n                      \u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2\r\n                    </div>\r\n                  </ng-container>\r\n                  <ng-template #notificationsDropDown>\r\n                    <ul class=\"pr-1.5\">\r\n                      <ng-container *ngIf=\"notificationLinks | async as obs; else loading\">\r\n                        <ng-container *ngFor=\"let link of obs\">\r\n\r\n                          <li class=\"mb-2\"\r\n                              [ngClass]=\"{'border-l-2 border-blue-500 bg-blue-50 hover:bg-blue-50': !link.isRead }\">\r\n                              <div class=\"flex justify-between\">\r\n                                <div class=\"flex-grow\">\r\n                                  <a [routerLink]=\"link.path\"\r\n                                     class=\"nav-link-notifications grid\"\r\n                                     [ngClass]=\"!link.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'\">\r\n                                    <div class=\"flex flex-col\">\r\n                                      <div class=\"font-thin tracking-tighter\">\r\n                                        {{ link.creationDate | date: 'EEE, d MMMM' }}\r\n                                      </div>\r\n                                      <div class=\"font-bold\">\r\n                                        {{ link.text }}\r\n                                      </div>\r\n                                    </div>\r\n                                  </a>\r\n                                </div>\r\n                                <!-- <div class=\"flex-none font-thin tracking-tighter\">\r\n                                  <button type=\"button\"\r\n                                          title=\"\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE\"\r\n                                          class=\"text-red-600 hover:text-red-900\">\r\n                                    <span class=\"ms-Icon ms-Icon--Delete\"></span>\r\n                                  </button>\r\n                                </div> -->\r\n                              </div>\r\n                          </li>\r\n\r\n\r\n                        </ng-container>\r\n                      </ng-container>\r\n\r\n                      <ng-template #loading>\r\n                        <div class=\"h-32 flex items-center justify-center\">\r\n                          <div class=\"animate-pulse text-s text-gray-600\">Loading...</div>\r\n                        </div>\r\n                      </ng-template>\r\n\r\n\r\n                    </ul>\r\n                  </ng-template>\r\n                </div>\r\n                <div class=\"p-1 rounded-sm\">\r\n                  <a [routerLink]=\"(allNotificationsLink | async)?.path\">\r\n                    <button type=\"button\"\r\n                            class=\"shell-header-notifications-dropdown-view-all-button\">\u03A0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AE \u03CC\u03BB\u03C9\u03BD</button>\r\n                  </a>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mobile-menu-button-container\">\r\n          <!-- Mobile menu button -->\r\n          <button type=\"button\"\r\n                  (click)=\"mobileMenuExpanded = !mobileMenuExpanded\"\r\n                  class=\"mobile-menu-button\"\r\n                  aria-controls=\"mobile-menu\"\r\n                  [attr.aria-expanded]=\"mobileMenuExpanded\">\r\n            <span class=\"sr-only\">Open main menu</span>\r\n            <!--Heroicon name: outline/menu  Menu open: \"hidden\", Menu closed: \"block\"-->\r\n            <svg class=\"block h-6 w-6\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M4 6h16M4 12h16M4 18h16\" />\r\n            </svg>\r\n            <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n            <svg class=\"hidden h-6 w-6\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Mobile menu, show/hide based on menu state. -->\r\n  <div class=\"mobile-menu-container\"\r\n       *ngIf=\"mobileMenuExpanded\"\r\n       id=\"mobile-menu\">\r\n    <div class=\"mobile-menu-link-container\">\r\n      <ng-container *ngFor=\"let link of sectionLinks | async\">\r\n        <a *ngIf=\"link.external\"\r\n           [attr.href]=\"link.path\"\r\n           [attr.target]=\"'_blank'\"\r\n           class=\"nav-link-mobile\">\r\n          {{ link.text }}\r\n        </a>\r\n        <a *ngIf=\"!link.external\"\r\n           [routerLink]=\"link.path\"\r\n           [routerLinkActive]=\"['nav-link-mobile-active']\"\r\n           [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n           class=\"nav-link-mobile\">\r\n          {{ link.text }}\r\n        </a>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!user\">\r\n        <a href=\"#\"\r\n           (click)=\"signin($event)\"\r\n           class=\"nav-link-mobile\">\r\n          <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7\r\n        </a>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"mobile-menu-user-info-container\"\r\n         *ngIf=\"user\">\r\n      <div class=\"mobile-menu-user-info-container-inner\">\r\n        <div class=\"flex-shrink-0\">\r\n          <span class=\"mobile-menu-avatar-container\">\r\n            <span class=\"mobile-menu-avatar-name\">{{ this.avatarName }}</span>\r\n          </span>\r\n        </div>\r\n        <div class=\"ml-3\">\r\n          <div class=\"mobile-menu-user-name\">{{ user.profile.name }}</div>\r\n          <div class=\"mobile-menu-user-email\">{{ user.profile.email }}</div>\r\n        </div>\r\n        <a [routerLink]=\"(allNotificationsLink | async)?.path\">\r\n          <button class=\"mobile-menu-rounded-button\">\r\n            <span class=\"sr-only\">View notifications</span>\r\n            <!-- Heroicon name: outline/bell -->\r\n            <svg class=\"mobile-menu-rounded-button-icon-style\"\r\n                 xmlns=\"http://www.w3.org/2000/svg\"\r\n                 fill=\"none\"\r\n                 viewBox=\"0 0 24 24\"\r\n                 stroke=\"currentColor\"\r\n                 aria-hidden=\"true\">\r\n              <path stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    stroke-width=\"2\"\r\n                    d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\" />\r\n            </svg>\r\n          </button>\r\n        </a>\r\n      </div>\r\n      <div class=\"mobile-menu-link-container\">\r\n        <ng-container *ngFor=\"let link of links.profile | async\">\r\n          <a *ngIf=\"link.external\"\r\n             [attr.href]=\"link.path\"\r\n             [attr.target]=\"'_blank'\"\r\n             class=\"nav-link-mobile\">\r\n            {{ link.text }}\r\n          </a>\r\n          <a [routerLink]=\"link.path\"\r\n             [routerLinkActive]=\"['nav-link-mobile-active']\"\r\n             [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n             class=\"nav-link-mobile\">\r\n            {{ link.text }}\r\n          </a>\r\n        </ng-container>\r\n        <!-- <a href=\"#\" class=\"block px-3 py-2 rounded-sm text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700\">\u0391\u03C0\u03BF\u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7</a> -->\r\n      </div>\r\n    </div>\r\n  </div>\r\n</nav>", directives: [{ type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1.AsyncPipe, "date": i1.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ShellHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -1768,29 +1752,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImpor
                 }] }, { type: i1$1.Router, decorators: [{
                     type: Inject,
                     args: [Router]
-                }] }, { type: i1$1.ActivatedRoute, decorators: [{
-                    type: Inject,
-                    args: [ActivatedRoute]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [SHELL_CONFIG]
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_LINKS]
                 }] }]; }, propDecorators: { sectionLinksPath: [{
                 type: Input,
                 args: ['section-links']
-            }], profileMenuVisible: [{
+            }], notificationLinksPath: [{
                 type: Input,
-                args: ['profile-menu']
-            }], showUserNameOnHeader: [{
+                args: ['notification-links']
+            }], allNotificationsLinkPath: [{
                 type: Input,
-                args: ['show-userName']
-            }], langs: [{
+                args: ['all-notifications']
+            }], config: [{
                 type: Input
-            }], currentLang: [{
-                type: Input,
-                args: ['current-lang']
             }], border: [{
                 type: Input
             }] } });
@@ -1814,15 +1789,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImpor
                 }] }]; } });
 
 class ShellLayoutComponent {
-    constructor(document, router, location, config, componentLoaderFactory) {
-        this.document = document;
+    constructor(router, location, config, componentLoaderFactory) {
         this.router = router;
         this.location = location;
         this.config = config;
         this.componentLoaderFactory = componentLoaderFactory;
         this.dynamicComponentHosts = null;
-        this.showRightPaneSM = false;
         this.routerSub$ = null;
+        this.showRightPaneSM = false;
         this.activeConfig = new DefaultShellConfig();
         this.loaded = false;
         if (!config) {
@@ -1883,8 +1857,8 @@ class ShellLayoutComponent {
         }
     }
 }
-ShellLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ShellLayoutComponent, deps: [{ token: DOCUMENT }, { token: i1$1.Router }, { token: i1.Location }, { token: SHELL_CONFIG }, { token: ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Component });
-ShellLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div *ngIf=\"loaded\" [style.display]=\"!loaded ? 'none':'block'\" class=\"shell-container active-side-pane\">\r\n\r\n  <div class=\"shell-header-container\" *ngIf=\"activeConfig.showHeader\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\r\n      <ng-container *ngIf=\"activeConfig.customHeaderComponent\">\r\n        <div appDynamicComponentHost =\"Header\"></div>\r\n      </ng-container>\r\n      <lib-shell-header *ngIf=\"!activeConfig.customHeaderComponent\" [langs]=\"activeConfig.langs\" [show-userName]=\"activeConfig.showUserNameOnHeader\"></lib-shell-header>\r\n    </div>\r\n  </div>\r\n\r\n  <main [class]=\"activeConfig.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\r\n      <router-outlet></router-outlet>\r\n    </div>\r\n  </main>\r\n\r\n  <div class=\"shell-footer-container\" *ngIf=\"activeConfig.showFooter\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\r\n      <ng-container *ngIf=\"activeConfig.customFooterComponent\">\r\n        <div appDynamicComponentHost hostName=\"Footer\"></div>\r\n      </ng-container>\r\n      <lib-shell-footer *ngIf=\"!activeConfig.customFooterComponent\"></lib-shell-footer>\r\n    </div>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\" (activate)=\"rightPane.onSidePaneActivated($event)\" (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n\r\n</div>\r\n", components: [{ type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "profile-menu", "show-userName", "langs", "current-lang", "border"] }, { type: ShellFooterComponent, selector: "lib-shell-footer" }, { type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }, { type: ToasterContainerComponent, selector: "lib-toaster-container" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: ["hostName"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
+ShellLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ShellLayoutComponent, deps: [{ token: i1$1.Router }, { token: i1.Location }, { token: SHELL_CONFIG }, { token: ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Component });
+ShellLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0, template: "<div *ngIf=\"loaded\"\r\n     [style.display]=\"!loaded ? 'none':'block'\"\r\n     class=\"shell-container active-side-pane\">\r\n  <div class=\"shell-header-container\"\r\n       *ngIf=\"activeConfig.showHeader\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-header-container-inner-fluid' : 'shell-header-container-inner'\">\r\n\r\n      <ng-container *ngIf=\"activeConfig.customHeaderComponent\">\r\n        <div appDynamicComponentHost=\"Header\"></div>\r\n      </ng-container>\r\n\r\n      <lib-shell-header *ngIf=\"!activeConfig.customHeaderComponent\"\r\n                        [config]=\"activeConfig\"></lib-shell-header>\r\n    </div>\r\n  </div>\r\n\r\n  <main [class]=\"activeConfig.showHeader ? 'shell-content-container' : 'shell-content-container-no-header'\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-content-container-inner-fluid' : 'shell-content-container-inner'\">\r\n      <router-outlet></router-outlet>\r\n    </div>\r\n  </main>\r\n\r\n  <div class=\"shell-footer-container\"\r\n       *ngIf=\"activeConfig.showFooter\">\r\n    <div [class]=\"activeConfig.fluid ? 'shell-footer-container-inner-fluid' : 'shell-footer-container-inner'\">\r\n      <ng-container *ngIf=\"activeConfig.customFooterComponent\">\r\n        <div appDynamicComponentHost\r\n             hostName=\"Footer\"></div>\r\n      </ng-container>\r\n      <lib-shell-footer *ngIf=\"!activeConfig.customFooterComponent\"></lib-shell-footer>\r\n    </div>\r\n  </div>\r\n\r\n  <lib-side-pane #rightPane>\r\n    <router-outlet name=\"rightpane\"\r\n                   (activate)=\"rightPane.onSidePaneActivated($event)\"\r\n                   (deactivate)=\"rightPane.onSidePaneDeactivated($event)\"></router-outlet>\r\n  </lib-side-pane>\r\n\r\n  <lib-toaster-container></lib-toaster-container>\r\n\r\n</div>\r\n", components: [{ type: ShellHeaderComponent, selector: "lib-shell-header", inputs: ["section-links", "notification-links", "all-notifications", "config", "border"] }, { type: ShellFooterComponent, selector: "lib-shell-footer" }, { type: SidePaneComponent, selector: "lib-side-pane", inputs: ["visible"], outputs: ["onComplete"] }, { type: ToasterContainerComponent, selector: "lib-toaster-container" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: ["hostName"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ShellLayoutComponent, decorators: [{
             type: Component,
             args: [{
@@ -1892,10 +1866,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImpor
                     selector: 'lib-shell-layout',
                     templateUrl: './shell-layout.component.html',
                 }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i1$1.Router }, { type: i1.Location }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1.Location }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SHELL_CONFIG]
                 }] }, { type: ComponentLoaderFactory }]; }, propDecorators: { dynamicComponentHosts: [{
@@ -2024,9 +1995,11 @@ class ModelViewLayoutComponent {
     ngOnInit() {
     }
     onSidePaneActivated($event) {
+        //console.log('onSidePaneActivated', $event);
         this.showRightPaneSM = true;
     }
     onSidePaneDeactivated($event) {
+        //console.log('onSidePaneActivated', $event);
         this.showRightPaneSM = false;
     }
     closeSidePane() {
@@ -2153,8 +2126,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImpor
             }] } });
 
 class FormLayoutComponent {
-    constructor(router$) {
-        this.router$ = router$;
+    constructor(_router) {
+        this._router = _router;
         this.title = null;
         // tslint:disable-next-line:no-input-rename
         this.searchPlaceholder = 'αναζήτηση';
@@ -2166,6 +2139,7 @@ class FormLayoutComponent {
         // tslint:disable-next-line:no-output-on-prefix
         this.onSearch = new EventEmitter();
         this.onComplete = new EventEmitter();
+        this.showRightPaneSM = false;
     }
     ngOnInit() {
         var _a;
@@ -2194,10 +2168,10 @@ class FormLayoutComponent {
     }
     routerLinkActionClick(action, relative = false) {
         if (action.outlet) {
-            this.router$.navigate(['', { outlets: { formRightPane: action.link } }]);
+            this._router.navigate(['', { outlets: { formRightPane: action.link } }]);
         }
         else {
-            this.router$.navigate([action.link]);
+            this._router.navigate([action.link]);
         }
     }
 }
@@ -2334,7 +2308,7 @@ class PageNotFoundComponent {
     }
 }
 PageNotFoundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: PageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PageNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: PageNotFoundComponent, selector: "lib-page-not-found", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\" title=\"404 - \u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5!\">\r\n  <div class=\"text-gray-900\">\r\n    <div class=\"max-w-4xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold sm:text-4xl\">\r\n        <span class=\"block\">404</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-800\">\u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5 \u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C0\u03BF\u03C5 \u03B6\u03B7\u03C4\u03AE\u03C3\u03B1\u03C4\u03B5!</p>\r\n      <a href=\"/\"\r\n         class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-sm text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n</lib-view-layout>\r\n", components: [{ type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
+PageNotFoundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: PageNotFoundComponent, selector: "lib-page-not-found", ngImport: i0, template: "<lib-view-layout [show-header]=\"false\"\r\n                 title=\"404 - \u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5!\">\r\n  <div class=\"bg-gray-600 view-container\">\r\n    <div class=\"max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8\">\r\n      <h2 class=\"text-3xl font-extrabold text-white sm:text-4xl\">\r\n        <span class=\"block\">404</span>\r\n      </h2>\r\n      <p class=\"mt-4 text-lg leading-6 text-gray-200\">\u03B4\u03B5\u03BD \u03B2\u03C1\u03AD\u03B8\u03B7\u03BA\u03B5 \u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C0\u03BF\u03C5 \u03B6\u03B7\u03C4\u03AE\u03C3\u03B1\u03C4\u03B5!</p>\r\n      <a href=\"/\"\r\n         class=\"mt-8 inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-sm rounded-sm text-gray-600 bg-white hover:bg-gray-50 sm:w-auto\">\r\n        \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03B5\u03B4\u03CE \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03C3\u03C4\u03C1\u03AD\u03C8\u03B5\u03C4\u03B5\r\n      </a>\r\n    </div>\r\n  </div>\r\n</lib-view-layout>", components: [{ type: ViewLayoutComponent, selector: "lib-view-layout", inputs: ["show-header", "fluid", "title", "icon", "actions", "busy", "search-placeholder", "view", "meta-items"], outputs: ["onAction", "onSearch"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: PageNotFoundComponent, decorators: [{
             type: Component,
             args: [{
@@ -2438,6 +2412,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImpor
                 }]
         }] });
 
+const defaultError = 'Something went wrong';
+class ObsWithStatusPipe {
+    transform(val) {
+        return val.pipe(map((value) => {
+            return {
+                loading: value.type === 'start',
+                error: value.type === 'error' ? defaultError : '',
+                value: value.type ? value.value : value,
+            };
+        }), startWith({ loading: true }), catchError(error => of({ loading: false, error: typeof error === 'string' ? error : defaultError })));
+    }
+}
+ObsWithStatusPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ObsWithStatusPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ObsWithStatusPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ObsWithStatusPipe, name: "obsWithStatus", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0, type: ObsWithStatusPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'obsWithStatus',
+                    pure: false
+                }]
+        }] });
+
 class BaseListComponent {
     constructor(route$, router$) {
         this.route$ = route$;
@@ -3108,7 +3104,7 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         // pipes
         AddressPipe,
         DurationFormatPipe,
-        NavLinksListComponent], imports: [CommonModule,
+        ObsWithStatusPipe], imports: [CommonModule,
         RouterModule,
         IndiceAuthModule], exports: [ClickOutsideDirective,
         DropDownMenuComponent,
@@ -3135,6 +3131,7 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         UnauthorizedComponent,
         AddressPipe,
         DurationFormatPipe,
+        ObsWithStatusPipe,
         CollapsiblePanelComponent,
         SidePaneComponent,
         DatepickerComponent,
@@ -3191,7 +3188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImpor
                         // pipes
                         AddressPipe,
                         DurationFormatPipe,
-                        NavLinksListComponent
+                        ObsWithStatusPipe
                     ],
                     imports: [
                         CommonModule,
@@ -3224,6 +3221,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImpor
                         UnauthorizedComponent,
                         AddressPipe,
                         DurationFormatPipe,
+                        ObsWithStatusPipe,
                         CollapsiblePanelComponent,
                         SidePaneComponent,
                         DatepickerComponent,
@@ -3241,5 +3239,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_LINKS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, ClickOutsideDirective, CollapsiblePanelComponent, ComponentLoaderFactory, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, PageNotFoundComponent, PagerComponent, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleComponent, UnauthorizedComponent, ViewAction, ViewLayoutComponent };
+export { APP_LINKS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, ClickOutsideDirective, CollapsiblePanelComponent, ComponentLoaderFactory, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NotificationNavLink, ObsWithStatusPipe, PageNotFoundComponent, PagerComponent, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleComponent, UnauthorizedComponent, ViewAction, ViewLayoutComponent };
 //# sourceMappingURL=indice-ng-components.js.map