@indice/ng-components 0.2.143-beta → 0.2.144-beta

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

@@ -2071,49 +2071,11 @@
                 args: [{ providedIn: 'root' }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ComponentFactoryResolver }, { type: i0__namespace.Injector }, { type: i0__namespace.ApplicationRef }]; } });
 
-    var NotificationsService = /** @class */ (function () {
-        function NotificationsService(links) {
-            this.links = links;
-            this.unreadCountSubject$ = new rxjs.ReplaySubject(1);
-            this._notificationLinks = rxjs.of([]);
-            this.notificationLinksPath = 'notifications';
-            this._notificationLinks = this.links[this.notificationLinksPath];
-        }
-        NotificationsService.prototype.getMessagesObs = function () {
-            return this._notificationLinks;
-        };
-        NotificationsService.prototype.getUnreadCount = function (breakCache) {
-            var _this = this;
-            if (breakCache === void 0) { breakCache = false; }
-            if (breakCache) {
-                this._notificationLinks.pipe(operators.map(function (notifications) {
-                    return notifications.filter(function (x) { return !x.isRead; }).length;
-                })).subscribe(function (res) { return _this.unreadCountSubject$.next(res); });
-            }
-            return this.unreadCountSubject$.asObservable();
-        };
-        return NotificationsService;
-    }());
-    NotificationsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: NotificationsService, deps: [{ token: APP_LINKS }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    NotificationsService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: NotificationsService, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: NotificationsService, decorators: [{
-                type: i0.Injectable,
-                args: [{
-                        providedIn: 'root'
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [APP_LINKS]
-                        }] }];
-        } });
-
     var ShellHeaderComponent = /** @class */ (function () {
-        function ShellHeaderComponent(authService, router, links, _notifications) {
+        function ShellHeaderComponent(authService, router, links) {
             this.authService = authService;
             this.router = router;
             this.links = links;
-            this._notifications = _notifications;
             // tslint:disable-next-line:no-input-rename
             this.sectionLinksPath = 'main';
             this.notificationLinksPath = 'notifications';
@@ -2156,9 +2118,8 @@
             this.showUserNameOnHeader = (_b = this.config) === null || _b === void 0 ? void 0 : _b.showUserNameOnHeader;
             this.sectionLinks = this.links[this.sectionLinksPath];
             this.allNotificationsLink = this.links[this.allNotificationsLinkPath];
-            this.notificationLinks = this._notifications.getMessagesObs();
-            this._notifications.getUnreadCount(true)
-                .subscribe(function (unreadCount) { return (_this.notificationsCount = unreadCount); });
+            this.notificationLinks = this.links[this.notificationLinksPath];
+            this.getNotificationsCount();
             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;
@@ -2206,9 +2167,15 @@
             this.notificationsMenuExpanded = !this.notificationsMenuExpanded;
             this.userMenuExpanded = false;
         };
+        ShellHeaderComponent.prototype.getNotificationsCount = function () {
+            var _this = this;
+            this.notificationLinks.pipe(operators.take(1)).subscribe(function (notifications) {
+                _this.notificationsCount = notifications.filter(function (x) { return !x.isRead; }).length;
+            });
+        };
         return ShellHeaderComponent;
     }());
-    ShellHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellHeaderComponent, deps: [{ token: i2.AuthService }, { token: i1$1.Router }, { token: APP_LINKS }, { token: NotificationsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ShellHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellHeaderComponent, deps: [{ token: i2.AuthService }, { token: i1$1.Router }, { token: APP_LINKS }], target: i0__namespace.ɵɵFactoryTarget.Component });
     ShellHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.1", type: ShellHeaderComponent, selector: "lib-shell-header", inputs: { sectionLinksPath: ["section-links", "sectionLinksPath"], notificationLinksPath: ["notification-links", "notificationLinksPath"], allNotificationsLinkPath: ["all-notifications", "allNotificationsLinkPath"], config: "config", border: "border" }, ngImport: i0__namespace, template: "<nav>\r\n  <div class=\"shell-header-paddings\">\r\n    <div [class]=\"border ? 'shell-header-border' : ''\">\r\n      <div class=\"shell-header-menu-container\">\r\n        <div class=\"shell-header-links-no-grow-container\">\r\n          <div>\r\n            <a href=\"#\"\r\n               [routerLink]=\"['/']\"><img class=\"app-logo\"\r\n                   [src]=\"config.appLogo\"\r\n                   [alt]=\"config.appLogoAlt\" /></a>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shell-header-link-container\">\r\n          <ng-container *ngFor=\"let link of sectionLinks | async\">\r\n            <a href=\"#\"\r\n               [routerLink]=\"[link.path]\"\r\n               [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n               [routerLinkActive]=\"['nav-link-active']\"\r\n               [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n               class=\"nav-link\">\r\n              {{ link.text }}\r\n            </a>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <div class=\"shell-header-md-visible\">\r\n          <div class=\"shell-header-links-no-grow-container\">\r\n\r\n            <ng-container *ngFor=\"let link of links.profileActions | async\">\r\n              <a class=\"shell-header-menu-rounded-button\"\r\n                 (clickOutside)=\"onClickOutsideProfile($event)\"\r\n                 [attr.href]=\"link.path\"\r\n                 [attr.target]=\"link.external ? '_blank' : '_self'\">\r\n                <span class=\"sr-only\">{{ link.text }}</span>\r\n                <i *ngIf=\"link.icon\"\r\n                   [class]=\"link.icon\"></i>\r\n              </a>\r\n            </ng-container>\r\n\r\n            <!-- Profile dropdown -->\r\n            <div class=\"ml-2 relative\"\r\n                 (clickOutside)=\"onClickOutsideProfile($event)\"\r\n                 *ngIf=\"profileMenuVisible\">\r\n              <div [ngClass]=\"{'shell-header-profile': showUserNameOnHeader}\">\r\n                <div *ngIf=\"user && showUserNameOnHeader\"\r\n                     class=\"shell-header-profile-userName\">\r\n                  {{ user.profile.name }}\r\n                </div>\r\n                <button type=\"button\"\r\n                        *ngIf=\"user\"\r\n                        (click)=\"userMenuExpanded = !userMenuExpanded\"\r\n                        class=\"shell-header-profile-dropdown-button\"\r\n                        id=\"user-menu\"\r\n                        aria-expanded=\"false\"\r\n                        aria-haspopup=\"true\">\r\n                  <span class=\"sr-only\">Open user menu</span>\r\n                  <span class=\"avatar-container\">\r\n                    <span class=\"avatar-text\">{{this.avatarName}}</span>\r\n                  </span>\r\n                </button>\r\n\r\n                <button type=\"button\"\r\n                        *ngIf=\"!user\"\r\n                        (click)=\"signin(null)\"\r\n                        class=\"shell-header-profile-dropdown-button\"\r\n                        id=\"user-menu\"\r\n                        aria-expanded=\"false\"\r\n                        aria-haspopup=\"true\">\r\n                  <span class=\"sr-only\">sign in</span>\r\n                  <span class=\"avatar-container\">\r\n                    <span class=\"avatar-text\"><i class=\"ms-Icon ms-Icon--Signin\"></i></span>\r\n                  </span>\r\n                </button>\r\n\r\n                <div *ngIf=\"userMenuExpanded\"\r\n                     [ngClass]=\"showUserNameOnHeader ? 'shell-header-profile-dropdown-with-username' : 'shell-header-profile-dropdown'\"\r\n                     role=\"menu\"\r\n                     aria-orientation=\"vertical\"\r\n                     aria-labelledby=\"user-menu\">\r\n                  <!-- <a href=\"#\" class=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\" role=\"menuitem\">\u0391\u03C0\u03BF\u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7</a> -->\r\n                  <ng-container *ngFor=\"let link of links.profile | async\">\r\n                    <!-- <a *ngIf=\"link.external\" [attr.href]=\"link.path\" [attr.target]=\"'_blank'\" class=\"nav-link-profile\">\r\n                      {{ link.text }}\r\n                    </a> -->\r\n                    <a [routerLink]=\"link.path\"\r\n                       [routerLinkActive]=\"['nav-link-profile-active']\"\r\n                       [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n                       class=\"nav-link-profile\">\r\n                      {{ link.text }}\r\n                    </a>\r\n                  </ng-container>\r\n                </div>\r\n\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Notifications dropdown -->\r\n            <div class=\"ml-2 relative\"\r\n                 (clickOutside)=\"onClickOutsideNotifications($event)\"\r\n                 *ngIf=\"notificationsMenuVisible\">\r\n              <!-- Notifications Button -->\r\n              <button 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 } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.1", ngImport: i0__namespace, type: ShellHeaderComponent, decorators: [{
                 type: i0.Component,
@@ -2227,9 +2194,6 @@
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [APP_LINKS]
-                        }] }, { type: NotificationsService, decorators: [{
-                            type: i0.Inject,
-                            args: [NotificationsService]
                         }] }];
         }, propDecorators: { sectionLinksPath: [{
                     type: i0.Input,
@@ -3582,7 +3546,7 @@
         IndiceComponentsModule.forRoot = function () {
             return {
                 ngModule: IndiceComponentsModule,
-                providers: [ToasterService, NotificationsService]
+                providers: [ToasterService]
             };
         };
         return IndiceComponentsModule;