@indice/ng-components 0.2.148-beta → 0.2.151-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2078,16 +2078,18 @@
2078
2078
  this.links = links;
2079
2079
  // tslint:disable-next-line:no-input-rename
2080
2080
  this.sectionLinksPath = 'main';
2081
- this.notificationLinksPath = 'notifications';
2081
+ this.notificationsLinksPath = 'notifications';
2082
2082
  this.allNotificationsLinkPath = 'allNotifications';
2083
+ this.notificationsCounterLinksPath = 'notificationsCounter';
2083
2084
  this.border = true;
2084
2085
  this.showNotifications = false;
2085
2086
  this.showUserNameOnHeader = false;
2086
2087
  this.notificationsMenuVisible = true;
2087
2088
  this.profileMenuVisible = true;
2088
2089
  this.sectionLinks = rxjs.of([]);
2089
- this.notificationLinks = rxjs.of([]);
2090
+ this.notifications = rxjs.of([]);
2090
2091
  this.allNotificationsLink = rxjs.of();
2092
+ this.unreadNotificationsCountObs = rxjs.of(0);
2091
2093
  this.mobileMenuExpanded = false;
2092
2094
  this.userMenuExpanded = false;
2093
2095
  this.notificationsMenuExpanded = false;
@@ -2097,7 +2099,7 @@
2097
2099
  this.statusSub$ = null;
2098
2100
  this.user = null;
2099
2101
  this.avatarName = null;
2100
- this.notificationsCount = 0;
2102
+ this.unreadNotificationsCount = 0;
2101
2103
  }
2102
2104
  ShellHeaderComponent.prototype.ngOnDestroy = function () {
2103
2105
  if (this.routerSub$) {
@@ -2117,8 +2119,10 @@
2117
2119
  this.showNotifications = (_a = this.config) === null || _a === void 0 ? void 0 : _a.showNotifications;
2118
2120
  this.showUserNameOnHeader = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showUserNameOnHeader;
2119
2121
  this.sectionLinks = this.links[this.sectionLinksPath];
2120
- this.notificationLinks = this.links[this.notificationLinksPath];
2122
+ this.notifications = this.links[this.notificationsLinksPath];
2121
2123
  this.allNotificationsLink = this.links[this.allNotificationsLinkPath];
2124
+ this.unreadNotificationsCountObs = this.links[this.notificationsCounterLinksPath];
2125
+ this.getUnreadNotificationsCount();
2122
2126
  this.routerSub$ = this.router.events.pipe(operators.filter(function (event) { return event instanceof i1$1.NavigationStart; })).subscribe(function (event) {
2123
2127
  _this.mobileMenuExpanded = false;
2124
2128
  _this.userMenuExpanded = false;
@@ -2135,9 +2139,6 @@
2135
2139
  // console.log('ShellHeaderComponent user subscription');
2136
2140
  _this.setCurrentUser(user);
2137
2141
  });
2138
- this.notificationLinks.pipe(operators.map(function (notifications) {
2139
- _this.notificationsCount = notifications.filter(function (x) { return !x.isRead; }).length;
2140
- })).subscribe();
2141
2142
  };
2142
2143
  ShellHeaderComponent.prototype.setCurrentUser = function (user) {
2143
2144
  var _a, _b;
@@ -2168,11 +2169,18 @@
2168
2169
  ShellHeaderComponent.prototype.expandNotificationsMenu = function () {
2169
2170
  this.notificationsMenuExpanded = !this.notificationsMenuExpanded;
2170
2171
  this.userMenuExpanded = false;
2172
+ this.getUnreadNotificationsCount();
2173
+ };
2174
+ ShellHeaderComponent.prototype.getUnreadNotificationsCount = function () {
2175
+ var _this = this;
2176
+ this.unreadNotificationsCountObs.subscribe(function (count) {
2177
+ _this.unreadNotificationsCount = count;
2178
+ });
2171
2179
  };
2172
2180
  return ShellHeaderComponent;
2173
2181
  }());
2174
2182
  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 });
2175
- 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 type=\"button\"\r\n 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 *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-gray-100 transform translate-x-1/2 -translate-y-1/2 bg-gray-500 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>\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 } });
2183
+ ShellHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], notificationsLinksPath: ["notifications-links", "notificationsLinksPath"], allNotificationsLinkPath: ["all-notifications", "allNotificationsLinkPath"], notificationsCounterLinksPath: ["notifications-counter", "notificationsCounterLinksPath"], 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 (click)=\"getUnreadNotificationsCount()\">\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 type=\"button\"\r\n 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 *ngIf=\"unreadNotificationsCount > 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-gray-100 transform translate-x-1/2 -translate-y-1/2 bg-gray-500 rounded-full\">{{unreadNotificationsCount}}</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=\"!notifications; 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=\"notifications | 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>\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 } });
2176
2184
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellHeaderComponent, decorators: [{
2177
2185
  type: i0.Component,
2178
2186
  args: [{
@@ -2194,12 +2202,15 @@
2194
2202
  }, propDecorators: { sectionLinksPath: [{
2195
2203
  type: i0.Input,
2196
2204
  args: ['section-links']
2197
- }], notificationLinksPath: [{
2205
+ }], notificationsLinksPath: [{
2198
2206
  type: i0.Input,
2199
- args: ['notification-links']
2207
+ args: ['notifications-links']
2200
2208
  }], allNotificationsLinkPath: [{
2201
2209
  type: i0.Input,
2202
2210
  args: ['all-notifications']
2211
+ }], notificationsCounterLinksPath: [{
2212
+ type: i0.Input,
2213
+ args: ['notifications-counter']
2203
2214
  }], config: [{
2204
2215
  type: i0.Input
2205
2216
  }], border: [{
@@ -2300,7 +2311,7 @@
2300
2311
  return ShellLayoutComponent;
2301
2312
  }());
2302
2313
  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 });
2303
- 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"] }] });
2314
+ 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", "notifications-links", "all-notifications", "notifications-counter", "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"] }] });
2304
2315
  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellLayoutComponent, decorators: [{
2305
2316
  type: i0.Component,
2306
2317
  args: [{