@indice/ng-components 0.2.133 → 0.2.136-beta

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,12 +13,14 @@
                     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);
     }
 
@@ -253,16 +255,10 @@
                 r[k] = a[j];
         return r;
     }
-    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 __spreadArray(to, from) {
+        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+            to[j] = from[i];
+        return to;
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -663,36 +659,41 @@
     Icons.Details = ' ms-Icon ms-Icon--AccountActivity';
 
     var NavLink = /** @class */ (function () {
-        function NavLink(text, path, exact, external, icon) {
+        function NavLink(text, path, exact, external, icon, isRead, creationDate) {
             if (exact === void 0) { exact = false; }
             if (external === void 0) { external = false; }
-            this.type = 'router';
+            this.isRead = false;
             this.text = text;
             this.path = path;
             this.exact = exact;
             this.external = external;
             this.icon = icon;
+            this.isRead = isRead;
+            this.creationDate = creationDate;
         }
         return NavLink;
     }());
     var ExternalNavLink = /** @class */ (function (_super) {
         __extends(ExternalNavLink, _super);
         function ExternalNavLink(text, path, openInNewTab, icon) {
-            var _this = _super.call(this, text, path, true, openInNewTab, icon) || this;
-            _this.type = 'external';
-            return _this;
+            return _super.call(this, text, path, true, openInNewTab, icon) || this;
         }
         return ExternalNavLink;
     }(NavLink));
     var FragmentNavLink = /** @class */ (function (_super) {
         __extends(FragmentNavLink, _super);
         function FragmentNavLink(text, path, icon) {
-            var _this = _super.call(this, text, path, true, true, icon) || this;
-            _this.type = 'fragment';
-            return _this;
+            return _super.call(this, text, path, true, true, icon) || 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;
+        }
+        return NotificationNavLink;
+    }(NavLink));
     var ViewAction = /** @class */ (function () {
         function ViewAction(type, key, param, icon, tooltip) {
             this.type = type;
@@ -755,6 +756,7 @@
             this.appLogoAlt = 'your app name here';
             this.showHeader = true;
             this.showUserNameOnHeader = false;
+            this.showNotifications = false;
             this.showFooter = true;
             this.fluid = false;
         }
@@ -987,7 +989,7 @@
         return ListViewEmptyStateComponent;
     }());
     ListViewEmptyStateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ListViewEmptyStateComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ListViewEmptyStateComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    ListViewEmptyStateComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ListViewEmptyStateComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1811,43 +1813,6 @@
                     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\">\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__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 SHELL_CONFIG = new i0.InjectionToken('SHELL_CONFIG');
 
@@ -2103,89 +2068,107 @@
             }], ctorParameters: function () { return [{ type: i0__namespace.ComponentFactoryResolver }, { type: i0__namespace.Injector }, { type: i0__namespace.ApplicationRef }]; } });
 
     var ShellHeaderComponent = /** @class */ (function () {
-        function ShellHeaderComponent(authService, router, route, config, links) {
+        function ShellHeaderComponent(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 = 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; }));
+            this.notificationsCount = 0;
         }
+        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;
-            this.activeFragment = this.route.fragment.pipe(operators.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(function (event) {
+            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.mobileMenuExpanded = false;
                 _this.userMenuExpanded = false;
+                _this.notificationsMenuExpanded = false;
             });
             this.authService.loadUser().subscribe(function (user) {
+                console.log(user);
                 _this.setCurrentUser(user);
             }, function (error) {
-                console.error(error);
+                console.log(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]);
-            }
+            this.notificationLinks.pipe(operators.take(1), operators.map(function (notifications) {
+                _this.notificationsCount = notifications.length;
+            }));
         };
-        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.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);
             }
         };
         // tslint:disable-next-line:typedef
-        ShellHeaderComponent.prototype.onClickOutside = function ($event) {
+        ShellHeaderComponent.prototype.onClickOutsideProfile = 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.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.expandUserMenu = function () {
+            this.userMenuExpanded = !this.userMenuExpanded;
+            this.notificationsMenuExpanded = false;
         };
-        ShellHeaderComponent.prototype.setCurrentLang = function (lang) {
-            this.currentLang = lang;
+        ShellHeaderComponent.prototype.expandNotificationsMenu = function () {
+            this.notificationsMenuExpanded = !this.notificationsMenuExpanded;
+            this.userMenuExpanded = false;
         };
         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: 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"], 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 [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__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"] }] });
+    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                <span class=\"relative inline-block\">\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                  <span \r\n                        class=\"absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-gray-100 transform translate-x-1/2 -translate-y-1/2 bg-gray-500 rounded-full\">99</span>\r\n                  <!-- <span *ngIf=\"notificationsCount > 0\"\r\n                        class=\"absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full\">{{notificationsCount}}</span> -->\r\n                </span>\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 *ngIf=\"obs.length <= 0\"\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-container *ngFor=\"let link of obs\">\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 } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellHeaderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2200,12 +2183,6 @@
                         }] }, { 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]
@@ -2213,17 +2190,14 @@
         }, propDecorators: { sectionLinksPath: [{
                     type: i0.Input,
                     args: ['section-links']
-                }], profileMenuVisible: [{
+                }], notificationLinksPath: [{
                     type: i0.Input,
-                    args: ['profile-menu']
-                }], showUserNameOnHeader: [{
+                    args: ['notification-links']
+                }], allNotificationsLinkPath: [{
                     type: i0.Input,
-                    args: ['show-userName']
-                }], langs: [{
+                    args: ['all-notifications']
+                }], config: [{
                     type: i0.Input
-                }], currentLang: [{
-                    type: i0.Input,
-                    args: ['current-lang']
                 }], border: [{
                     type: i0.Input
                 }] } });
@@ -2250,15 +2224,14 @@
         } });
 
     var ShellLayoutComponent = /** @class */ (function () {
-        function ShellLayoutComponent(document, router, location, config, componentLoaderFactory) {
-            this.document = document;
+        function ShellLayoutComponent(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) {
@@ -2322,8 +2295,8 @@
         };
         return ShellLayoutComponent;
     }());
-    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\" [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__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__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"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellLayoutComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2332,10 +2305,7 @@
                         templateUrl: './shell-layout.component.html',
                     }]
             }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [i1.DOCUMENT]
-                        }] }, { type: i1__namespace$1.Router }, { type: i1__namespace.Location }, { type: undefined, decorators: [{
+            return [{ type: i1__namespace$1.Router }, { type: i1__namespace.Location }, { type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [SHELL_CONFIG]
                         }] }, { type: ComponentLoaderFactory }];
@@ -2466,9 +2436,11 @@
         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 () {
@@ -2598,8 +2570,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 = 'αναζήτηση';
@@ -2611,6 +2583,7 @@
             // 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;
@@ -2640,10 +2613,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;
@@ -2796,7 +2769,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\" 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__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"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: PageNotFoundComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2908,6 +2881,31 @@
                     }]
             }] });
 
+    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$;
@@ -3587,7 +3585,7 @@
             // pipes
             AddressPipe,
             DurationFormatPipe,
-            NavLinksListComponent
+            ObsWithStatusPipe
         ], imports: [i1.CommonModule,
             i1$1.RouterModule,
             i2.IndiceAuthModule], exports: [ClickOutsideDirective,
@@ -3615,6 +3613,7 @@
             UnauthorizedComponent,
             AddressPipe,
             DurationFormatPipe,
+            ObsWithStatusPipe,
             CollapsiblePanelComponent,
             SidePaneComponent,
             DatepickerComponent,
@@ -3671,7 +3670,7 @@
                             // pipes
                             AddressPipe,
                             DurationFormatPipe,
-                            NavLinksListComponent
+                            ObsWithStatusPipe
                         ],
                         imports: [
                             i1.CommonModule,
@@ -3704,6 +3703,7 @@
                             UnauthorizedComponent,
                             AddressPipe,
                             DurationFormatPipe,
+                            ObsWithStatusPipe,
                             CollapsiblePanelComponent,
                             SidePaneComponent,
                             DatepickerComponent,
@@ -3757,7 +3757,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;
@@ -3779,5 +3780,5 @@
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-}));
+})));
 //# sourceMappingURL=indice-ng-components.umd.js.map