@indice/ng-components 0.2.147-beta → 0.2.150-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.
- package/bundles/indice-ng-components.umd.js +14 -11
- package/bundles/indice-ng-components.umd.js.map +1 -1
- package/esm2015/lib/layouts/shell/shell-header/shell-header.component.js +15 -12
- package/esm2015/lib/layouts/shell/shell-layout/shell-layout.component.js +1 -1
- package/esm2015/lib/types.js +1 -1
- package/fesm2015/indice-ng-components.js +15 -12
- package/fesm2015/indice-ng-components.js.map +1 -1
- package/lib/layouts/shell/shell-header/shell-header.component.d.ts +5 -3
- package/lib/types.d.ts +1 -0
- package/package.json +1 -1
|
@@ -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.
|
|
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.
|
|
2090
|
+
this.notifications = rxjs.of([]);
|
|
2090
2091
|
this.allNotificationsLink = rxjs.of();
|
|
2092
|
+
this.notificationsCountLink = rxjs.of(0);
|
|
2091
2093
|
this.mobileMenuExpanded = false;
|
|
2092
2094
|
this.userMenuExpanded = false;
|
|
2093
2095
|
this.notificationsMenuExpanded = false;
|
|
@@ -2117,8 +2119,9 @@
|
|
|
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];
|
|
2122
|
+
this.notifications = this.links[this.notificationsLinksPath];
|
|
2120
2123
|
this.allNotificationsLink = this.links[this.allNotificationsLinkPath];
|
|
2121
|
-
this.
|
|
2124
|
+
this.notificationsCountLink = this.links[this.notificationsCounterLinksPath];
|
|
2122
2125
|
this.getNotificationsCount();
|
|
2123
2126
|
this.routerSub$ = this.router.events.pipe(operators.filter(function (event) { return event instanceof i1$1.NavigationStart; })).subscribe(function (event) {
|
|
2124
2127
|
_this.mobileMenuExpanded = false;
|
|
@@ -2166,18 +2169,15 @@
|
|
|
2166
2169
|
ShellHeaderComponent.prototype.expandNotificationsMenu = function () {
|
|
2167
2170
|
this.notificationsMenuExpanded = !this.notificationsMenuExpanded;
|
|
2168
2171
|
this.userMenuExpanded = false;
|
|
2169
|
-
this.getNotificationsCount();
|
|
2170
2172
|
};
|
|
2171
2173
|
ShellHeaderComponent.prototype.getNotificationsCount = function () {
|
|
2172
2174
|
var _this = this;
|
|
2173
|
-
this.
|
|
2174
|
-
_this.notificationsCount = notifications.filter(function (x) { return !x.isRead; }).length;
|
|
2175
|
-
});
|
|
2175
|
+
this.notificationsCountLink.subscribe(function (count) { return _this.notificationsCount = count; });
|
|
2176
2176
|
};
|
|
2177
2177
|
return ShellHeaderComponent;
|
|
2178
2178
|
}());
|
|
2179
2179
|
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 });
|
|
2180
|
-
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=\"#\" [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\r\n href=\"#\"\r\n (click)=\"getNotificationsCount()\"\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 >\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 <ng-container *ngFor=\"let link of links.profileActions | async\">\r\n <a\r\n 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 >\r\n <span class=\"sr-only\">{{ link.text }}</span>\r\n <i *ngIf=\"link.icon\" [class]=\"link.icon\"></i>\r\n </a>\r\n </ng-container>\r\n\r\n <!-- Profile dropdown -->\r\n <div class=\"ml-2 relative\" (clickOutside)=\"onClickOutsideProfile($event)\" *ngIf=\"profileMenuVisible\">\r\n <div [ngClass]=\"{ 'shell-header-profile': showUserNameOnHeader }\">\r\n <div *ngIf=\"user && showUserNameOnHeader\" class=\"shell-header-profile-userName\">\r\n {{ user.profile.name }}\r\n </div>\r\n <button\r\n 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 >\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\r\n 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 >\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\r\n *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 >\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\r\n [routerLink]=\"link.path\"\r\n [routerLinkActive]=\"['nav-link-profile-active']\"\r\n [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n class=\"nav-link-profile\"\r\n >\r\n {{ link.text }}\r\n </a>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Notifications dropdown -->\r\n <div class=\"ml-2 relative\" (clickOutside)=\"onClickOutsideNotifications($event)\" *ngIf=\"notificationsMenuVisible\">\r\n <!-- Notifications Button -->\r\n <button\r\n 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 >\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\r\n 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 >\r\n <path\r\n 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 />\r\n </svg>\r\n <span\r\n *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\"\r\n >{{ notificationsCount }}</span\r\n >\r\n </span>\r\n </button>\r\n\r\n <div\r\n *ngIf=\"notificationsMenuExpanded\"\r\n [ngClass]=\"\r\n showUserNameOnHeader ? 'shell-header-notifications-dropdown-with-username' : 'shell-header-notifications-dropdown'\r\n \"\r\n role=\"menu\"\r\n aria-orientation=\"vertical\"\r\n aria-labelledby=\"notifications-menu\"\r\n >\r\n <div class=\"max-h-64 overflow-y-auto notification-messages min-h\">\r\n <ng-container *ngIf=\"!notificationLinks; else notificationsDropDown\" class=\"py-5\">\r\n <div class=\"nav-link-notifications hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\r\n </ng-container>\r\n <ng-template #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\" class=\"py-5\">\r\n <div class=\"nav-link-notifications hover:bg-transparent\">\u0394\u03B5\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03BD\u03AD\u03B5\u03C2 \u03B5\u03B9\u03B4\u03BF\u03C0\u03BF\u03B9\u03AE\u03C3\u03B5\u03B9\u03C2</div>\r\n </ng-container>\r\n <ng-container *ngFor=\"let link of obs\">\r\n <li class=\"mb-2\" [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\r\n [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 >\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 </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #loading>\r\n <div class=\"h-32 flex items-center justify-center\">\r\n <div class=\"animate-pulse text-s text-gray-600\">Loading...</div>\r\n </div>\r\n </ng-template>\r\n </ul>\r\n </ng-template>\r\n </div>\r\n <div class=\"p-1 rounded-sm\">\r\n <a [routerLink]=\"(allNotificationsLink | async)?.path\">\r\n <button type=\"button\" 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\r\n 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 >\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\r\n 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 >\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n <!--Heroicon name: outline/x Menu open: \"block\", Menu closed: \"hidden\"-->\r\n <svg\r\n 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 >\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n </div>\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\r\n *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 >\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\"> <i class=\"ms-Icon ms-Icon--Signin mr-2\"></i>\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7 </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 <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\r\n 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 >\r\n <path\r\n 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 />\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\" [attr.href]=\"link.path\" [attr.target]=\"'_blank'\" class=\"nav-link-mobile\">\r\n {{ link.text }}\r\n </a>\r\n <a\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 >\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 } });
|
|
2180
|
+
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)=\"getNotificationsCount()\">\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=\"!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 } });
|
|
2181
2181
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellHeaderComponent, decorators: [{
|
|
2182
2182
|
type: i0.Component,
|
|
2183
2183
|
args: [{
|
|
@@ -2199,12 +2199,15 @@
|
|
|
2199
2199
|
}, propDecorators: { sectionLinksPath: [{
|
|
2200
2200
|
type: i0.Input,
|
|
2201
2201
|
args: ['section-links']
|
|
2202
|
-
}],
|
|
2202
|
+
}], notificationsLinksPath: [{
|
|
2203
2203
|
type: i0.Input,
|
|
2204
|
-
args: ['
|
|
2204
|
+
args: ['notifications-links']
|
|
2205
2205
|
}], allNotificationsLinkPath: [{
|
|
2206
2206
|
type: i0.Input,
|
|
2207
2207
|
args: ['all-notifications']
|
|
2208
|
+
}], notificationsCounterLinksPath: [{
|
|
2209
|
+
type: i0.Input,
|
|
2210
|
+
args: ['notifications-counter']
|
|
2208
2211
|
}], config: [{
|
|
2209
2212
|
type: i0.Input
|
|
2210
2213
|
}], border: [{
|
|
@@ -2305,7 +2308,7 @@
|
|
|
2305
2308
|
return ShellLayoutComponent;
|
|
2306
2309
|
}());
|
|
2307
2310
|
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 });
|
|
2308
|
-
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", "
|
|
2311
|
+
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"] }] });
|
|
2309
2312
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellLayoutComponent, decorators: [{
|
|
2310
2313
|
type: i0.Component,
|
|
2311
2314
|
args: [{
|