@indice/ng-components 0.2.134-beta → 0.2.135

package/bundles/indice-ng-components.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('@angular/forms'), require('rxjs'), require('rxjs/operators'), require('@indice/ng-auth')) :
     typeof define === 'function' && define.amd ? define('@indice/ng-components', ['exports', '@angular/core', '@angular/common', '@angular/router', '@angular/forms', 'rxjs', 'rxjs/operators', '@indice/ng-auth'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.indice = global.indice || {}, global.indice['ng-components'] = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.forms, global.rxjs, global.rxjs.operators, global.i2));
-}(this, (function (exports, i0, i1, i1$1, forms, rxjs, operators, i2) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.indice = global.indice || {}, global.indice["ng-components"] = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.forms, global.rxjs, global.rxjs.operators, global.i2));
+})(this, (function (exports, i0, i1, i1$1, forms, rxjs, operators, i2) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -13,14 +13,12 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
@@ -255,10 +253,16 @@
                 r[k] = a[j];
         return r;
     }
-    function __spreadArray(to, from) {
-        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-            to[j] = from[i];
-        return to;
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -659,38 +663,44 @@
     Icons.Details = ' ms-Icon ms-Icon--AccountActivity';
 
     var NavLink = /** @class */ (function () {
-        function NavLink(text, path, exact, external, icon, isRead, creationDate) {
+        function NavLink(text, path, exact, external, icon, data) {
             if (exact === void 0) { exact = false; }
             if (external === void 0) { external = false; }
-            this.isRead = false;
+            this.type = 'router';
             this.text = text;
             this.path = path;
             this.exact = exact;
             this.external = external;
             this.icon = icon;
-            this.isRead = isRead;
-            this.creationDate = creationDate;
+            this.data = data;
         }
         return NavLink;
     }());
     var ExternalNavLink = /** @class */ (function (_super) {
         __extends(ExternalNavLink, _super);
         function ExternalNavLink(text, path, openInNewTab, icon) {
-            return _super.call(this, text, path, true, openInNewTab, icon) || this;
+            var _this = _super.call(this, text, path, true, openInNewTab, icon) || this;
+            _this.type = 'external';
+            return _this;
         }
         return ExternalNavLink;
     }(NavLink));
     var FragmentNavLink = /** @class */ (function (_super) {
         __extends(FragmentNavLink, _super);
         function FragmentNavLink(text, path, icon) {
-            return _super.call(this, text, path, true, true, icon) || this;
+            var _this = _super.call(this, text, path, true, true, icon) || this;
+            _this.type = 'fragment';
+            return _this;
         }
         return FragmentNavLink;
     }(NavLink));
     var NotificationNavLink = /** @class */ (function (_super) {
         __extends(NotificationNavLink, _super);
         function NotificationNavLink(text, path, isRead, creationDate) {
-            return _super.call(this, text, path, true, false, undefined, isRead, creationDate) || this;
+            var _this = _super.call(this, text, path, true, false, undefined) || this;
+            _this.isRead = isRead;
+            _this.creationDate = creationDate;
+            return _this;
         }
         return NotificationNavLink;
     }(NavLink));
@@ -756,7 +766,7 @@
             this.appLogoAlt = 'your app name here';
             this.showHeader = true;
             this.showUserNameOnHeader = false;
-            this.showNotifications = false;
+            this.showAlertsOnHeader = false;
             this.showFooter = true;
             this.fluid = false;
         }
@@ -1813,7 +1823,45 @@
                     type: i0.Output
                 }] } });
 
+    var NavLinksListComponent = /** @class */ (function () {
+        function NavLinksListComponent() {
+            // 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 = '';
+        }
+        NavLinksListComponent.prototype.ngOnInit = function () {
+        };
+        return NavLinksListComponent;
+    }());
+    NavLinksListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: NavLinksListComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    NavLinksListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<div [class]=\"containerClass\">\r\n  <ng-container *ngFor=\"let link of links | async\">\r\n    <ng-container [ngSwitch]=\"link.type\">\r\n      <a *ngSwitchCase=\"'router'\"\r\n        href=\"#\"\r\n        [routerLink]=\"[link.path]\"\r\n        [routerLinkActive]=\"navLinkActiveClass\"\r\n        [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n        [class]=\"navLinkClass\">\r\n        {{ link.text }}\r\n      </a>\r\n      <a *ngSwitchCase=\"'external'\"\r\n        [href]=\"link.path\"\r\n        [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n        class=\"nav-link\">\r\n        {{ link.text }}\r\n      </a>\r\n      <a *ngSwitchCase=\"'fragment'\"\r\n        routerLink=\".\"\r\n        [fragment]=\"link.path\"\r\n        [class.active]=\"(activeFragment | async) === link.path\"\r\n        class=\"nav-link\">\r\n        {{ link.text }}\r\n      </a>\r\n    </ng-container>\r\n  </ng-container>\r\n</div>\r\n", directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1__namespace$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }], pipes: { "async": i1__namespace.AsyncPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: NavLinksListComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-nav-links-list',
+                        templateUrl: './nav-links-list.component.html'
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { links: [{
+                    type: i0.Input
+                }], activeFragment: [{
+                    type: i0.Input,
+                    args: ['active-fragment']
+                }], navLinkClass: [{
+                    type: i0.Input,
+                    args: ['link-class']
+                }], navLinkActiveClass: [{
+                    type: i0.Input,
+                    args: ['link-active-class']
+                }], containerClass: [{
+                    type: i0.Input,
+                    args: ['container-class']
+                }] } });
+
     var APP_LINKS = new i0.InjectionToken('APP_LINKS');
+    var APP_NOTIFICATIONS = new i0.InjectionToken('APP_NOTIFICATIONS');
     var SHELL_CONFIG = new i0.InjectionToken('SHELL_CONFIG');
 
     var DynamicComponentHostDirective = /** @class */ (function () {
@@ -2067,104 +2115,161 @@
                 args: [{ providedIn: 'root' }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ComponentFactoryResolver }, { type: i0__namespace.Injector }, { type: i0__namespace.ApplicationRef }]; } });
 
+    var NotificationsIndicatorComponent = /** @class */ (function () {
+        function NotificationsIndicatorComponent(notifications) {
+            this.notifications = notifications;
+            this.menuExpanded = false;
+            this.unreadCount = 0;
+            this.items = [];
+            this.inboxAction = undefined;
+            this.newArrival = false;
+        }
+        NotificationsIndicatorComponent.prototype.ngOnDestroy = function () {
+            if (this.notificationsSub$) {
+                this.notificationsSub$.unsubscribe();
+            }
+        };
+        NotificationsIndicatorComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.notificationsSub$ = this.notifications.messages.subscribe(function (result) {
+                if (result.items) {
+                    _this.newArrival = true;
+                    _this.unreadCount = result.count;
+                    _this.items = result.items;
+                    setTimeout(function () { _this.newArrival = false; }, 1000);
+                }
+            });
+        };
+        NotificationsIndicatorComponent.prototype.toggleMenu = function () {
+            this.menuExpanded = !this.menuExpanded;
+            this.unreadCount = 0;
+        };
+        NotificationsIndicatorComponent.prototype.doInboxAction = function () {
+            if (this.notifications.inboxAction) {
+                this.notifications.inboxAction();
+            }
+            else {
+                this.menuExpanded = true;
+            }
+            this.unreadCount = 0;
+        };
+        // this.notificationsSub$ = this.links.notifications?.pipe(map(result => {
+        //   this.allItemsLink = result.allNotifications;
+        //   this.items = result.items;
+        //   this.unreadCount = result.count;
+        // }));
+        // [this.notificationsLinksPath] as Observable<NotificationNavLink[]>;
+        // this.allNotificationsLink = this.links[this.allNotificationsLinkPath] as Observable<NavLink>;
+        // this.unreadNotificationsCountObs = this.links[this.notificationsCounterLinksPath] as Observable<number>;
+        // this.getUnreadNotificationsCount();
+        // tslint:disable-next-line:typedef
+        NotificationsIndicatorComponent.prototype.onClickOutside = function ($event) {
+            this.menuExpanded = false;
+        };
+        return NotificationsIndicatorComponent;
+    }());
+    NotificationsIndicatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: NotificationsIndicatorComponent, deps: [{ token: APP_NOTIFICATIONS }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    NotificationsIndicatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator", ngImport: i0__namespace, template: "<div class=\"relative\"\r\n(clickOutside)=\"onClickOutside($event)\">\r\n  <!-- Notifications Button -->\r\n  <button type=\"button\"\r\n          (click)=\"doInboxAction()\"\r\n          aria-expanded=\"false\"\r\n          aria-haspopup=\"true\">\r\n    <span class=\"sr-only\">View notifications</span>\r\n    <span class=\"avatar-container\">\r\n      <span class=\"avatar-text\">\r\n        <i class=\"ms-Icon\"\r\n          [class.ms-Icon--MessageFill]=\"unreadCount > 0\"\r\n          [class.text-sky-400]=\"unreadCount > 0\"\r\n          [class.animate-notification]=\"newArrival\"\r\n          [class.ms-Icon--Message]=\"unreadCount === 0\">\r\n        </i>\r\n      </span>\r\n      <span\r\n        *ngIf=\"unreadCount > 0\"\r\n        [class.animate-pulse]=\"newArrival\"\r\n        class=\"absolute top-0 right-0 inline-flex items-center justify-center -mt-1 ml-1 text-xs leading-none text-gray-100 ordinal\">\r\n        {{ unreadCount }}\r\n      </span>\r\n    </span>\r\n  </button>\r\n\r\n  <!-- Notifications dropdown -->\r\n  <div *ngIf=\"menuExpanded\" class=\"header-notifications-dropdown-with-username\" role=\"menu\" aria-orientation=\"vertical\" aria-labelledby=\"messages-menu\">\r\n    <div class=\"max-h-64 overflow-y-auto notification-messages min-h\">\r\n      <ng-container *ngIf=\"!items; else messagesDropDown\" class=\"py-5\">\r\n        <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\r\n      </ng-container>\r\n      <ng-template #messagesDropDown>\r\n        <ul class=\"pr-1.5\">\r\n          <ng-container *ngIf=\"items; else loading\">\r\n            <ng-container *ngIf=\"items.length <= 0\" class=\"py-5\">\r\n              <div class=\"notifications-nav-link hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let message of items\">\r\n              <li class=\"mb-2\" [ngClass]=\"{ 'border-l-2 border-blue-500 bg-blue-50 hover:bg-blue-50': !message.data.isRead }\">\r\n                <div class=\"flex justify-between\">\r\n                  <div class=\"flex-grow\">\r\n                    <a\r\n                      [routerLink]=\"message.path\"\r\n                      class=\"notifications-nav-link grid\"\r\n                      [ngClass]=\"!message.data.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'\"\r\n                    >\r\n                      <div class=\"flex flex-col\">\r\n                        <div class=\"font-thin tracking-tighter\">\r\n                          {{ message.data.creationDate | date: \"EEE, d MMMM\" }}\r\n                        </div>\r\n                        <div class=\"font-bold\">\r\n                          {{ message.data.text }}\r\n                        </div>\r\n                      </div>\r\n                    </a>\r\n                  </div>\r\n                </div>\r\n              </li>\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        </ul>\r\n      </ng-template>\r\n    </div>\r\n    <div class=\"p-1 rounded-sm\">\r\n      <a [routerLink]=\"'/messages'\">\r\n        <button type=\"button\" class=\"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", styles: [".notifications-nav-link{@apply block py-3 pl-3 pr-2 text-xs text-gray-700 hover:bg-gray-50;}.header-notifications{@apply flex gap-3 items-center;}.header-notifications-dropdown-button{@apply max-w-xs focus:outline-none rounded-full flex items-center text-sm ring-1 ring-blue-300 focus:ring-offset-1 focus:ring-offset-blue-800 focus:ring-blue-400 transition ease-in duration-100;}.header-notifications-dropdown{@apply z-50 origin-top-right absolute right-0 pt-3 pl-2 mt-2 w-80 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;}.header-notifications-dropdown-with-username{@apply z-50 origin-top-right absolute right-0 pt-3 pl-1.5 mt-1 w-80 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;}.header-notifications-dropdown-view-all-button{@apply items-center align-text-bottom font-medium w-full px-2.5 py-2.5 text-xs text-gray-600 focus:outline-none;}.notification-messages::-webkit-scrollbar{width:7px;height:7px;background:transparent;cursor:pointer}.notification-messages::-webkit-scrollbar-thumb{@apply bg-gray-600;}.notification-messages::-webkit-scrollbar-thumb:hover{@apply bg-gray-700;}\n"], directives: [{ type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "date": i1__namespace.DatePipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: NotificationsIndicatorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-notifications-indicator',
+                        templateUrl: './notifications-indicator.component.html',
+                        styleUrls: ['./notifications-indicator.component.scss']
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [APP_NOTIFICATIONS]
+                        }] }];
+        } });
+
     var ShellHeaderComponent = /** @class */ (function () {
-        function ShellHeaderComponent(authService, router, links) {
+        function ShellHeaderComponent(authService, router, route, config, 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';
-            this.notificationLinksPath = 'notifications';
-            this.allNotificationsLinkPath = 'allNotifications';
-            this.border = true;
-            this.showNotifications = false;
-            this.showUserNameOnHeader = false;
-            this.notificationsMenuVisible = true;
+            // tslint:disable-next-line:no-input-rename
             this.profileMenuVisible = true;
+            // tslint:disable-next-line:no-input-rename
+            this.showUserNameOnHeader = false;
+            // tslint:disable-next-line:no-input-rename
+            this.showAlerts = false;
+            this.border = true;
             this.sectionLinks = rxjs.of([]);
-            this.notificationLinks = rxjs.of([]);
-            this.allNotificationsLink = rxjs.of();
             this.mobileMenuExpanded = false;
             this.userMenuExpanded = false;
-            this.notificationsMenuExpanded = false;
-            this.routeSubject = new rxjs.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(operators.filter(function (event) { return event instanceof i1$1.NavigationStart; }));
         }
-        ShellHeaderComponent.prototype.ngOnDestroy = function () {
-            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();
-            }
-        };
         ShellHeaderComponent.prototype.ngOnInit = function () {
             var _this = this;
-            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.activeFragment = this.route.fragment.pipe(operators.share());
             this.sectionLinks = this.links[this.sectionLinksPath];
-            this.notificationLinks = this.links[this.notificationLinksPath];
-            this.allNotificationsLink = this.links[this.allNotificationsLinkPath];
-            this.routerSub$ = this.router.events.pipe(operators.filter(function (event) { return event instanceof i1$1.NavigationStart; })).subscribe(function (event) {
+            this.routerSub$ = this.routeSubject.subscribe(function (event) {
                 _this.mobileMenuExpanded = false;
                 _this.userMenuExpanded = false;
-                _this.notificationsMenuExpanded = false;
             });
             this.authService.loadUser().subscribe(function (user) {
-                console.log(user);
                 _this.setCurrentUser(user);
             }, function (error) {
-                console.log(error);
+                console.error(error);
             });
             // Detect user changes and display / or not user info accordingly...
             this.userSub$ = this.authService.user$.subscribe(function (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]);
+            }
         };
-        ShellHeaderComponent.prototype.setCurrentUser = function (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);
+        ShellHeaderComponent.prototype.ngOnDestroy = function () {
+            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();
             }
         };
         // tslint:disable-next-line:typedef
-        ShellHeaderComponent.prototype.onClickOutsideProfile = function ($event) {
+        ShellHeaderComponent.prototype.onClickOutside = function ($event) {
             this.userMenuExpanded = false;
         };
-        // tslint:disable-next-line:typedef
-        ShellHeaderComponent.prototype.onClickOutsideNotifications = function ($event) {
-            this.notificationsMenuExpanded = false;
-        };
         ShellHeaderComponent.prototype.signin = function (event) {
             if (event) {
                 event.preventDefault();
             }
             this.authService.signinRedirect();
         };
-        ShellHeaderComponent.prototype.expandUserMenu = function () {
-            this.userMenuExpanded = !this.userMenuExpanded;
-            this.notificationsMenuExpanded = false;
+        ShellHeaderComponent.prototype.setCurrentUser = function (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();
+            }
         };
-        ShellHeaderComponent.prototype.expandNotificationsMenu = function () {
-            this.notificationsMenuExpanded = !this.notificationsMenuExpanded;
-            this.userMenuExpanded = false;
+        ShellHeaderComponent.prototype.setCurrentLang = function (lang) {
+            this.currentLang = lang;
         };
         return ShellHeaderComponent;
     }());
-    ShellHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellHeaderComponent, deps: [{ token: i2.AuthService }, { token: i1$1.Router }, { token: APP_LINKS }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ShellHeaderComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1__namespace.AsyncPipe, "date": i1__namespace.DatePipe } });
+    ShellHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellHeaderComponent, deps: [{ token: i2.AuthService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: SHELL_CONFIG }, { token: APP_LINKS }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ShellHeaderComponent.ɵcmp = i0__namespace.ɵɵ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"], showAlerts: ["show-alerts", "showAlerts"], langs: "langs", currentLang: ["current-lang", "currentLang"], border: "border" }, ngImport: i0__namespace, 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\r\n              [links]=\"links.profileActions\"\r\n              [active-fragment]=\"activeFragment\"\r\n              [link-class]=\"'shell-header-menu-rounded-button'\"\r\n              [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            <!-- Username -->\r\n            <div *ngIf=\"profileMenuVisible\" class=\"ml-2 relative\">\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              </div>\r\n            </div>\r\n\r\n            <!-- Notifications dropdown -->\r\n            <div *ngIf=\"showAlerts && user\" class=\"ml-2\">\r\n              <lib-notifications-indicator></lib-notifications-indicator>\r\n            </div>\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                <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"] }, { type: NotificationsIndicatorComponent, selector: "lib-notifications-indicator" }], directives: [{ type: i1__namespace$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellHeaderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2179,6 +2284,12 @@
                         }] }, { type: i1__namespace$1.Router, decorators: [{
                             type: i0.Inject,
                             args: [i1$1.Router]
+                        }] }, { type: i1__namespace$1.ActivatedRoute, decorators: [{
+                            type: i0.Inject,
+                            args: [i1$1.ActivatedRoute]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [SHELL_CONFIG]
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [APP_LINKS]
@@ -2186,14 +2297,20 @@
         }, propDecorators: { sectionLinksPath: [{
                     type: i0.Input,
                     args: ['section-links']
-                }], notificationLinksPath: [{
+                }], profileMenuVisible: [{
                     type: i0.Input,
-                    args: ['notification-links']
-                }], allNotificationsLinkPath: [{
+                    args: ['profile-menu']
+                }], showUserNameOnHeader: [{
                     type: i0.Input,
-                    args: ['all-notifications']
-                }], config: [{
+                    args: ['show-userName']
+                }], showAlerts: [{
+                    type: i0.Input,
+                    args: ['show-alerts']
+                }], langs: [{
                     type: i0.Input
+                }], currentLang: [{
+                    type: i0.Input,
+                    args: ['current-lang']
                 }], border: [{
                     type: i0.Input
                 }] } });
@@ -2220,14 +2337,15 @@
         } });
 
     var ShellLayoutComponent = /** @class */ (function () {
-        function ShellLayoutComponent(router, location, config, componentLoaderFactory) {
+        function ShellLayoutComponent(document, router, location, config, componentLoaderFactory) {
+            this.document = document;
             this.router = router;
             this.location = location;
             this.config = config;
             this.componentLoaderFactory = componentLoaderFactory;
             this.dynamicComponentHosts = null;
-            this.routerSub$ = null;
             this.showRightPaneSM = false;
+            this.routerSub$ = null;
             this.activeConfig = new DefaultShellConfig();
             this.loaded = false;
             if (!config) {
@@ -2291,8 +2409,8 @@
         };
         return ShellLayoutComponent;
     }());
-    ShellLayoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellLayoutComponent, deps: [{ token: i1__namespace$1.Router }, { token: i1__namespace.Location }, { token: SHELL_CONFIG }, { token: ComponentLoaderFactory }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ShellLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: ["hostName"] }, { type: i1__namespace$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
+    ShellLayoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellLayoutComponent, deps: [{ token: i1.DOCUMENT }, { token: i1__namespace$1.Router }, { token: i1__namespace.Location }, { token: SHELL_CONFIG }, { token: ComponentLoaderFactory }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ShellLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ShellLayoutComponent, selector: "lib-shell-layout", viewQueries: [{ propertyName: "dynamicComponentHosts", predicate: DynamicComponentHostDirective, descendants: true }], ngImport: i0__namespace, 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\"\r\n        [langs]=\"activeConfig.langs\"\r\n        [show-userName]=\"activeConfig.showUserNameOnHeader\"\r\n        [show-alerts]=\"activeConfig.showAlertsOnHeader\"></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", "show-alerts", "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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicComponentHostDirective, selector: "[appDynamicComponentHost]", inputs: ["hostName"] }, { type: i1__namespace$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellLayoutComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2301,7 +2419,10 @@
                         templateUrl: './shell-layout.component.html',
                     }]
             }], ctorParameters: function () {
-            return [{ type: i1__namespace$1.Router }, { type: i1__namespace.Location }, { type: undefined, decorators: [{
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.DOCUMENT]
+                        }] }, { type: i1__namespace$1.Router }, { type: i1__namespace.Location }, { type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [SHELL_CONFIG]
                         }] }, { type: ComponentLoaderFactory }];
@@ -2432,11 +2553,9 @@
         ModelViewLayoutComponent.prototype.ngOnInit = function () {
         };
         ModelViewLayoutComponent.prototype.onSidePaneActivated = function ($event) {
-            //console.log('onSidePaneActivated', $event);
             this.showRightPaneSM = true;
         };
         ModelViewLayoutComponent.prototype.onSidePaneDeactivated = function ($event) {
-            //console.log('onSidePaneActivated', $event);
             this.showRightPaneSM = false;
         };
         ModelViewLayoutComponent.prototype.closeSidePane = function () {
@@ -2566,8 +2685,8 @@
                 }] } });
 
     var FormLayoutComponent = /** @class */ (function () {
-        function FormLayoutComponent(_router) {
-            this._router = _router;
+        function FormLayoutComponent(router$) {
+            this.router$ = router$;
             this.title = null;
             // tslint:disable-next-line:no-input-rename
             this.searchPlaceholder = 'αναζήτηση';
@@ -2579,7 +2698,6 @@
             // tslint:disable-next-line:no-output-on-prefix
             this.onSearch = new i0.EventEmitter();
             this.onComplete = new i0.EventEmitter();
-            this.showRightPaneSM = false;
         }
         FormLayoutComponent.prototype.ngOnInit = function () {
             var _a;
@@ -2609,10 +2727,10 @@
         FormLayoutComponent.prototype.routerLinkActionClick = function (action, relative) {
             if (relative === void 0) { 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]);
             }
         };
         return FormLayoutComponent;
@@ -2765,7 +2883,7 @@
         return PageNotFoundComponent;
     }());
     PageNotFoundComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: PageNotFoundComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    PageNotFoundComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: PageNotFoundComponent, selector: "lib-page-not-found", ngImport: i0__namespace, 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"] }] });
+    PageNotFoundComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: PageNotFoundComponent, selector: "lib-page-not-found", ngImport: i0__namespace, 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"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: PageNotFoundComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2877,31 +2995,6 @@
                     }]
             }] });
 
-    var defaultError = 'Something went wrong';
-    var ObsWithStatusPipe = /** @class */ (function () {
-        function ObsWithStatusPipe() {
-        }
-        ObsWithStatusPipe.prototype.transform = function (val) {
-            return val.pipe(operators.map(function (value) {
-                return {
-                    loading: value.type === 'start',
-                    error: value.type === 'error' ? defaultError : '',
-                    value: value.type ? value.value : value,
-                };
-            }), operators.startWith({ loading: true }), operators.catchError(function (error) { return rxjs.of({ loading: false, error: typeof error === 'string' ? error : defaultError }); }));
-        };
-        return ObsWithStatusPipe;
-    }());
-    ObsWithStatusPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ObsWithStatusPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    ObsWithStatusPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ObsWithStatusPipe, name: "obsWithStatus", pure: false });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ObsWithStatusPipe, decorators: [{
-                type: i0.Pipe,
-                args: [{
-                        name: 'obsWithStatus',
-                        pure: false
-                    }]
-            }] });
-
     var BaseListComponent = /** @class */ (function () {
         function BaseListComponent(route$, router$) {
             this.route$ = route$;
@@ -3581,7 +3674,8 @@
             // pipes
             AddressPipe,
             DurationFormatPipe,
-            ObsWithStatusPipe
+            NavLinksListComponent,
+            NotificationsIndicatorComponent
         ], imports: [i1.CommonModule,
             i1$1.RouterModule,
             i2.IndiceAuthModule], exports: [ClickOutsideDirective,
@@ -3609,7 +3703,6 @@
             UnauthorizedComponent,
             AddressPipe,
             DurationFormatPipe,
-            ObsWithStatusPipe,
             CollapsiblePanelComponent,
             SidePaneComponent,
             DatepickerComponent,
@@ -3666,7 +3759,8 @@
                             // pipes
                             AddressPipe,
                             DurationFormatPipe,
-                            ObsWithStatusPipe
+                            NavLinksListComponent,
+                            NotificationsIndicatorComponent
                         ],
                         imports: [
                             i1.CommonModule,
@@ -3699,7 +3793,6 @@
                             UnauthorizedComponent,
                             AddressPipe,
                             DurationFormatPipe,
-                            ObsWithStatusPipe,
                             CollapsiblePanelComponent,
                             SidePaneComponent,
                             DatepickerComponent,
@@ -3718,6 +3811,7 @@
      */
 
     exports.APP_LINKS = APP_LINKS;
+    exports.APP_NOTIFICATIONS = APP_NOTIFICATIONS;
     exports.AddressPipe = AddressPipe;
     exports.AuthCallbackComponent = AuthCallbackComponent;
     exports.AuthRenewComponent = AuthRenewComponent;
@@ -3753,8 +3847,8 @@
     exports.ModelViewLayoutComponent = ModelViewLayoutComponent;
     exports.NULL_TOAST = NULL_TOAST;
     exports.NavLink = NavLink;
+    exports.NavLinksListComponent = NavLinksListComponent;
     exports.NotificationNavLink = NotificationNavLink;
-    exports.ObsWithStatusPipe = ObsWithStatusPipe;
     exports.PageNotFoundComponent = PageNotFoundComponent;
     exports.PagerComponent = PagerComponent;
     exports.RouterViewAction = RouterViewAction;
@@ -3776,5 +3870,5 @@
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=indice-ng-components.umd.js.map