@indice/ng-components 0.2.125 → 0.2.128-beta

package/README.md

@@ -1,4 +1,4 @@
-# INDICE ANGULAR Components
-
-Indice common components for Angular 2+
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.14.
+# INDICE ANGULAR Components
+
+Indice common components for Angular 2+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.14.

package/_styles.css

@@ -105,6 +105,14 @@
     @apply block px-4 py-2 text-xs text-blue-300 shadow-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
 
+  .nav-link-notifications {
+    @apply block py-3 pl-3 pr-2 text-xs text-gray-700 hover:bg-gray-50;
+  }
+
+  .nav-link-notifications-active {
+    @apply block py-3 pl-3 pr-2 text-xs text-blue-300 shadow-sm;
+  }
+
   .nav-link-mobile-active {
     @apply bg-gray-900 text-blue-300 block px-3 py-2 rounded-sm text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
@@ -130,8 +138,8 @@
     @apply antialiased font-sans bg-gray-100;
   }
 
-  .shell-header-container {
-    @apply bg-gradient-to-r from-gray-900 to-gray-800 pb-24 sm:pb-28 z-50;
+    .shell-header-container {
+    @apply bg-gradient-to-r from-gray-900 to-gray-800 pb-24 sm:pb-32 z-50;
   }
 
   .shell-header-container-inner {
@@ -143,7 +151,7 @@
   }
 
   .shell-content-container {
-    @apply mx-auto -mt-28;
+    @apply -mt-24 sm:-mt-32 ;
   }
 
   .shell-content-container-no-header {
@@ -213,6 +221,47 @@
     @apply z-50 origin-top-right absolute right-0 mt-24 w-48 rounded-sm shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
   }
 
+  .shell-header-profile-dropdown-with-username {
+    @apply z-50 origin-top-right absolute right-0 mt-36 w-48 rounded-sm shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
+  }
+
+  .shell-header-notifications {
+    @apply flex gap-3 items-center;
+  }
+
+  .shell-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;
+  }
+
+  .shell-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;
+  }
+
+  .shell-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;
+
+  }
+
+  .shell-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;
+    /* or add it to the track */
+  }
+
+  .notification-messages::-webkit-scrollbar-thumb {
+    @apply bg-gray-600;
+
+    &:hover {
+      @apply bg-gray-700;
+    }
+  }
 
   .mobile-menu-button-container {
     @apply -mr-2 flex sm:hidden;
@@ -255,7 +304,7 @@
   }
 
   .mobile-menu-rounded-button {
-    @apply ml-auto bg-gray-800 flex-shrink-0 p-1 text-gray-400 rounded-full hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white;
+    @apply ml-auto bg-gray-800 flex-shrink-0 p-1 text-gray-400 rounded-full hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-offset-blue-800 focus:ring-blue-400 focus:ring-white;
   }
 
   .mobile-menu-rounded-button-icon-style {
@@ -355,15 +404,15 @@
   }
 
   .view-container-fluid {
-    @apply sm:px-0 ;
+    @apply sm:px-0;
   }
 
   .view-layout-paddings {
-    @apply pt-6 pb-4 sm:py-6;
+    @apply py-6 sm:py-10;
   }
 
   .view-layout-title-container {
-    @apply flex text-white flex-row justify-start ;
+    @apply flex flex-row justify-start ;
   }
 
   .view-layout-title-container-inner {

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: [{
@@ -2066,27 +2068,29 @@
             }], ctorParameters: function () { return [{ type: i0__namespace.ComponentFactoryResolver }, { type: i0__namespace.Injector }, { type: i0__namespace.ApplicationRef }]; } });
 
     var ShellHeaderComponent = /** @class */ (function () {
-        function ShellHeaderComponent(authService, router, config, links) {
+        function ShellHeaderComponent(authService, router, links) {
             this.authService = authService;
             this.router = router;
-            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.border = true;
+            this.showNotifications = false;
+            this.showUserNameOnHeader = false;
+            this.notificationsMenuVisible = true;
+            this.profileMenuVisible = true;
             this.sectionLinks = rxjs.of([]);
+            this.notificationLinks = 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.routeSubject = this.router.events.pipe(operators.filter(function (event) { return event instanceof i1$1.NavigationStart; }));
         }
         ShellHeaderComponent.prototype.ngOnDestroy = function () {
             console.log(this.showUserNameOnHeader);
@@ -2101,21 +2105,23 @@
                 this.userSub$.unsubscribe();
             }
         };
-        ShellHeaderComponent.prototype.scroll = function (el) {
-            el.scrollIntoView({ behavior: 'smooth' });
-        };
         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.sectionLinks = this.links[this.sectionLinksPath];
-            this.routerSub$ = this.routeSubject.subscribe(function (event) {
+            this.notificationLinks = this.links[this.notificationLinksPath];
+            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) {
@@ -2123,28 +2129,40 @@
                 _this.setCurrentUser(user);
             });
         };
+        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();
-                // console.log('load user', this.avatarName);
-            }
+        ShellHeaderComponent.prototype.expandUserMenu = function () {
+            this.userMenuExpanded = !this.userMenuExpanded;
+            this.notificationsMenuExpanded = false;
+        };
+        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: 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"], 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=\"#\" [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          <ng-container *ngFor=\"let link of sectionLinks | async\">\r\n            <ng-container [ngSwitch]=\"link.type\">\r\n              <a *ngSwitchCase=\"'router'\"\r\n                href=\"#\"\r\n                [routerLink]=\"[link.path]\"\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              <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                [routerLinkActive]=\"['nav-link-active']\"\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\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)=\"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\"\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)=\"onClickOutside($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                  <ng-container *ngFor=\"let link of links.profile | async\">\r\n                    <a [routerLink]=\"link.path\" [routerLinkActive]=\"['nav-link-profile-active']\"\r\n                       [routerLinkActiveOptions]=\"{ exact: link.exact }\" 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          </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\" *ngIf=\"mobileMenuExpanded\" 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\"  [attr.href]=\"link.path\" [attr.target]=\"'_blank'\" class=\"nav-link-mobile\">\r\n          {{ link.text }}\r\n        </a>\r\n        <a *ngIf=\"!link.external\"  [routerLink]=\"link.path\" [routerLinkActive]=\"['nav-link-mobile-active']\" [routerLinkActiveOptions]=\"{ exact: link.exact }\" 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=\"#\" (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      </ng-container>\r\n    </div>\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 class=\"mobile-menu-link-container\">\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-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      </div>\r\n    </div>\r\n  </div>\r\n</nav>\r\n", 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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 } });
+    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"], 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\" [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          <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\" [routerLinkActive]=\"['nav-link-profile-active']\"\r\n                       [routerLinkActiveOptions]=\"{ exact: link.exact }\" 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\">\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 #notificationsDropDown\r\n                                    *ngFor=\"let link of notificationLinks | async\">\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                          <a [routerLink]=\"link.path\"\r\n                             [routerLinkActive]=\"['nav-link-notifications-active']\"\r\n                             [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n                             class=\"nav-link-notifications grid grid-row\"\r\n                             [ngClass]=\"!link.isRead ? ' hover:bg-blue-50' : 'border-b border-gray-100'\">\r\n                            <span class=\"font-bold\">\r\n                              {{ link.text }}\r\n                            </span>\r\n                            <span class=\"font-thin tracking-tighter\">\r\n                              {{ link.creationDate | date: 'EEE, d MMMM' }}\r\n                            </span>\r\n                          </a>\r\n                        </li>\r\n                      </ng-container>\r\n                    </ul>\r\n                  </ng-template>\r\n                </div>\r\n                <div class=\"p-1 rounded-sm\">\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                </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\"  [attr.href]=\"link.path\" [attr.target]=\"'_blank'\" class=\"nav-link-mobile\">\r\n          {{ link.text }}\r\n        </a>\r\n        <a *ngIf=\"!link.external\"  [routerLink]=\"link.path\" [routerLinkActive]=\"['nav-link-mobile-active']\" [routerLinkActiveOptions]=\"{ exact: link.exact }\" 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=\"#\" (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      </ng-container>\r\n    </div>\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 class=\"mobile-menu-link-container\">\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-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>\r\n", 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: [{
@@ -2159,9 +2177,6 @@
                         }] }, { type: i1__namespace$1.Router, decorators: [{
                             type: i0.Inject,
                             args: [i1$1.Router]
-                        }] }, { type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [SHELL_CONFIG]
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [APP_LINKS]
@@ -2169,12 +2184,11 @@
         }, propDecorators: { sectionLinksPath: [{
                     type: i0.Input,
                     args: ['section-links']
-                }], profileMenuVisible: [{
+                }], notificationLinksPath: [{
                     type: i0.Input,
-                    args: ['profile-menu']
-                }], showUserNameOnHeader: [{
-                    type: i0.Input,
-                    args: ['show-userName']
+                    args: ['notification-links']
+                }], config: [{
+                    type: i0.Input
                 }], border: [{
                     type: i0.Input
                 }] } });
@@ -2201,15 +2215,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) {
@@ -2273,8 +2286,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\" [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", "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", "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: [{
@@ -2283,10 +2296,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 }];
@@ -2551,8 +2561,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 = 'αναζήτηση';
@@ -2564,6 +2574,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;
@@ -2593,10 +2604,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;
@@ -3708,6 +3719,7 @@
     exports.ModelViewLayoutComponent = ModelViewLayoutComponent;
     exports.NULL_TOAST = NULL_TOAST;
     exports.NavLink = NavLink;
+    exports.NotificationNavLink = NotificationNavLink;
     exports.PageNotFoundComponent = PageNotFoundComponent;
     exports.PagerComponent = PagerComponent;
     exports.RouterViewAction = RouterViewAction;
@@ -3729,5 +3741,5 @@
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-}));
+})));
 //# sourceMappingURL=indice-ng-components.umd.js.map