@sumaris-net/ngx-components 1.22.11-rc4 → 1.22.11-rc5

package/bundles/sumaris-net.ngx-components.umd.js

@@ -1173,7 +1173,7 @@
         else {
             throw new Error('Invalid argument \'threshold\'. Expected value unit: \'px\' or \'%\' ');
         }
-        return rxjs.fromEvent(element, 'scroll')
+        return rxjs.merge(rxjs.fromEvent(element, 'scroll'), rxjs.timer(250))
             .pipe(operators.filter(function () { return isEnd(); }));
     }
 
@@ -30289,7 +30289,7 @@
         AbstractUserEventService.prototype.watchAll = function (offset, size, sortBy, sortDirection, filter, options) {
             return this.watchPage({ offset: offset, size: size, sortBy: sortBy, sortDirection: sortDirection }, filter, options);
         };
-        AbstractUserEventService.prototype.watchPage = function (page, filter, options) {
+        AbstractUserEventService.prototype.watchPage = function (page, filter, opts) {
             var _this = this;
             var _a;
             var now = this._debug && Date.now();
@@ -30306,7 +30306,7 @@
                     filter.recipients = [recipient];
                 }
             }
-            var withContent = (options === null || options === void 0 ? void 0 : options.withContent) === true;
+            var withContent = (opts === null || opts === void 0 ? void 0 : opts.withContent) === true;
             return this.mutableWatchQuery({
                 queryName: withContent ? 'LoadAllWithContent' : 'LoadAll',
                 query: withContent ? this.queries.loadAllWithContent : this.queries.loadAll,
@@ -30319,7 +30319,8 @@
                 },
                 arrayFieldName: 'data',
                 error: { code: SocialErrorCodes.LOAD_USER_EVENTS_ERROR, message: 'SOCIAL.ERROR.LOAD_USER_EVENTS_ERROR' },
-                fetchPolicy: (options === null || options === void 0 ? void 0 : options.fetchPolicy) || 'cache-first'
+                fetchPolicy: (opts === null || opts === void 0 ? void 0 : opts.fetchPolicy) || 'cache-first',
+                insertFilterFn: filter && filter.asFilterFn()
             })
                 .pipe(operators.map(function (res) {
                 var data = ((res === null || res === void 0 ? void 0 : res.data) || []).map(function (value) { return _this.processUserEvent(value, _this); });
@@ -30329,12 +30330,77 @@
                 }
                 // Must re-order because of listenChanges result will add new event at the end
                 data = EntityUtils.sort(data, page.sortBy, page.sortDirection);
-                return {
+                var result = {
                     data: data,
                     total: toNumber(res === null || res === void 0 ? void 0 : res.total, data.length)
                 };
+                // Add fetch more capability, if total was fetched
+                if (isNotNil(res.total)) {
+                    var nextOffset_1 = (page.offset || 0) + data.length;
+                    if (nextOffset_1 < result.total) {
+                        result.fetchMore = function (_) { return _this.loadPage(Object.assign(Object.assign({}, page), { offset: nextOffset_1 }), filter, Object.assign(Object.assign({}, opts), { fetchPolicy: 'no-cache' })); };
+                    }
+                }
+                return result;
             }));
         };
+        AbstractUserEventService.prototype.loadPage = function (page, filter, opts) {
+            var _a;
+            return __awaiter(this, void 0, void 0, function () {
+                var now, recipient, withContent, res, data, result, nextOffset_2;
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            now = this._debug && Date.now();
+                            if (!filter)
+                                filter = this.defaultFilter();
+                            console.debug(this._logPrefix + "Loading user events...", filter);
+                            filter = this.asFilter(filter);
+                            // Force recipient to current issuer, if not admin and not specified
+                            if (isEmptyArray(filter === null || filter === void 0 ? void 0 : filter.recipients) || !this.accountService.isAdmin()) {
+                                recipient = this.defaultRecipient();
+                                if (!((_a = filter === null || filter === void 0 ? void 0 : filter.recipients) === null || _a === void 0 ? void 0 : _a.includes(recipient))) {
+                                    console.warn('[user-events-service] Force user event filter.recipient=' + recipient);
+                                    filter.recipients = [recipient];
+                                }
+                            }
+                            withContent = (opts === null || opts === void 0 ? void 0 : opts.withContent) === true;
+                            return [4 /*yield*/, this.graphql.query({
+                                    query: withContent ? this.queries.loadAllWithContent : this.queries.loadAll,
+                                    variables: {
+                                        page: Object.assign(Object.assign({ sortBy: 'creationDate' }, page), {
+                                            // @ts-ignore
+                                            sortDirection: (page.sortDirection || 'desc').toUpperCase()
+                                        }),
+                                        filter: filter && filter.asPodObject()
+                                    },
+                                    error: { code: SocialErrorCodes.LOAD_USER_EVENTS_ERROR, message: 'SOCIAL.ERROR.LOAD_USER_EVENTS_ERROR' },
+                                    fetchPolicy: opts === null || opts === void 0 ? void 0 : opts.fetchPolicy
+                                })];
+                        case 1:
+                            res = _b.sent();
+                            data = ((res === null || res === void 0 ? void 0 : res.data) || []).map(function (value) { return _this.processUserEvent(value, _this); });
+                            if (now)
+                                console.debug("" + this._logPrefix + data.length + " user events loaded in " + (Date.now() - now) + "ms");
+                            // Must re-order because of listenChanges result will add new event at the end
+                            data = EntityUtils.sort(data, page.sortBy, page.sortDirection);
+                            result = {
+                                data: data,
+                                total: toNumber(res === null || res === void 0 ? void 0 : res.total, data.length)
+                            };
+                            // Add fetch more capability, if total was fetched
+                            if (isNotNil(res.total)) {
+                                nextOffset_2 = (page.offset || 0) + data.length;
+                                if (nextOffset_2 < result.total) {
+                                    result.fetchMore = function (_) { return _this.loadPage(Object.assign(Object.assign({}, page), { offset: nextOffset_2 }), filter, opts); };
+                                }
+                            }
+                            return [2 /*return*/, result];
+                    }
+                });
+            });
+        };
         AbstractUserEventService.prototype.add = function (entity) {
             // TODO set an id !!!!!!!!!!!!!!!!!!!!!!!!!
             entity = this.processUserEvent(entity);
@@ -30805,24 +30871,43 @@
     ]; };
 
     var UserEventNotificationList = /** @class */ (function () {
-        function UserEventNotificationList(cd, popoverController, userEventService) {
+        function UserEventNotificationList(cd, popoverController, settings, userEventService) {
+            var _a;
             this.cd = cd;
             this.popoverController = popoverController;
+            this.settings = settings;
             this.userEventService = userEventService;
-            this.debug = false;
-            this.userEvents = new rxjs.BehaviorSubject(undefined);
             this.subscriptions = new rxjs.Subscription();
+            this._fetchingMore = false;
+            this.debug = false;
+            this.pageSize = 10;
+            this.sortBy = 'creationDate';
+            this.sortDirection = 'desc';
+            this.enableInfiniteScroll = true;
+            this.$items = new rxjs.BehaviorSubject(undefined);
+            this.$itemCount = new rxjs.BehaviorSubject(undefined);
+            this.mobile = ((_a = this.settings) === null || _a === void 0 ? void 0 : _a.mobile) || false;
         }
+        Object.defineProperty(UserEventNotificationList.prototype, "canFetchMore", {
+            get: function () {
+                return !!this._fetchMoreFn;
+            },
+            enumerable: false,
+            configurable: true
+        });
         UserEventNotificationList.prototype.ngOnInit = function () {
             var _this = this;
             // Watch all user events
             if (this.userEventService) {
                 this.subscriptions.add(this.userEventService
-                    .watchAll(0, 10, 'creationDate', 'desc', undefined)
+                    .watchAll(0, this.pageSize, this.sortBy, this.sortDirection, this.filter)
                     .subscribe(function (result) {
+                    var _a;
                     if (_this.debug)
                         console.debug("[user-event-notification-list] receiving " + result.total + " user events", result.data);
-                    _this.userEvents.next(result.data);
+                    _this.$items.next(result.data);
+                    _this.$itemCount.next(result.total || ((_a = result.data) === null || _a === void 0 ? void 0 : _a.length) || 0);
+                    _this._fetchMoreFn = result.fetchMore;
                     _this.markForCheck();
                 }));
                 // Listen changes
@@ -30852,9 +30937,9 @@
                 return;
             (_a = this.readEvent) === null || _a === void 0 ? void 0 : _a.emit(userEvent);
         };
-        UserEventNotificationList.prototype.readAll = function (event) {
+        UserEventNotificationList.prototype.markAllAsRead = function (event) {
             var _a;
-            var unreadUserEvents = (this.userEvents.value || []).filter(function (value) { return !value.readDate; });
+            var unreadUserEvents = (this.$items.value || []).filter(function (value) { return !value.readDate; });
             if (!unreadUserEvents.length)
                 return;
             (_a = this.readEvents) === null || _a === void 0 ? void 0 : _a.emit(unreadUserEvents);
@@ -30893,6 +30978,70 @@
         UserEventNotificationList.prototype.dismiss = function () {
             this.popoverController.dismiss();
         };
+        UserEventNotificationList.prototype.fetchMore = function (event) {
+            var _a;
+            return __awaiter(this, void 0, void 0, function () {
+                var result, data, err_2;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!this._fetchMoreFn || this._fetchingMore)
+                                return [2 /*return*/];
+                            console.debug('[user-event-notification-list] Fetching more notifications...', event);
+                            this._fetchingMore = true;
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 3, 4, 5]);
+                            return [4 /*yield*/, this._fetchMoreFn()];
+                        case 2:
+                            result = _b.sent();
+                            data = __spread((this.$items.value || []), result.data);
+                            // Remove duplication (e.g. when new user event was added by subscription)
+                            data = removeDuplicatesFromArray(data, 'id');
+                            this.$items.next(data);
+                            this.$itemCount.next(result.total || ((_a = result.data) === null || _a === void 0 ? void 0 : _a.length) || 0);
+                            this._fetchMoreFn = result.fetchMore;
+                            return [3 /*break*/, 5];
+                        case 3:
+                            err_2 = _b.sent();
+                            console.error(err_2);
+                            this._fetchMoreFn = undefined;
+                            return [3 /*break*/, 5];
+                        case 4:
+                            this.markForCheck();
+                            this._fetchingMore = false;
+                            return [7 /*endfinally*/];
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        UserEventNotificationList.prototype._initInfiniteScroll = function (threshold) {
+            return __awaiter(this, void 0, void 0, function () {
+                var panel, scrollEnd$;
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (this._fetchMoreSubscription)
+                                this._fetchMoreSubscription.unsubscribe();
+                            threshold = threshold || (this.mobile ? '15%' : '2%');
+                            return [4 /*yield*/, waitFor(function () { return !!_this.ionContent; })];
+                        case 1:
+                            _b.sent();
+                            return [4 /*yield*/, this.ionContent.getScrollElement()];
+                        case 2:
+                            panel = _b.sent();
+                            scrollEnd$ = fromScrollEndEvent(panel, threshold);
+                            // Trigger fetch more, end end scroll reached
+                            this._fetchMoreSubscription = scrollEnd$
+                                .subscribe(function () { return _this.fetchMore(); });
+                            this.subscriptions.add(this._fetchMoreSubscription);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         UserEventNotificationList.prototype.markForCheck = function () {
             this.cd.markForCheck();
         };
@@ -30901,21 +31050,30 @@
     UserEventNotificationList.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-user-event-notification-list',
-                    template: "\n<ion-list class=\"ion-list-popover\">\n\n  <ion-row class=\"ion-list-header column\">\n    <ion-col>\n      <ion-label>{{titleI18n | translate}}</ion-label>\n    </ion-col>\n    <ion-col class=\"top-action\" *ngIf=\"userEvents|async|isNotEmptyArray\">\n      <ion-text color=\"primary\">\n        <a (click)=\"readAll($event)\">{{'SOCIAL.USER_EVENT.NOTIFICATION.READ_ALL' | translate}}</a>\n      </ion-text>\n    </ion-col>\n  </ion-row>\n\n  <ion-item *ngIf=\"userEvents|async|isEmptyArray\" lines=\"none\">\n    <ion-text color=\"dark\" class=\"text-italic\">{{'SOCIAL.USER_EVENT.NOTIFICATION.EMPTY' | translate}}</ion-text>\n  </ion-item>\n  <ion-item\n    *ngFor=\"let userEvent of userEvents | async\"\n    (click)=\"click($event, userEvent)\"\n  >\n\n    <ion-avatar slot=\"start\">\n\n      <img *ngIf=\"userEvent.avatar; else avatarIcon\" src=\"{{ userEvent.avatar }}\">\n\n      <ng-template #avatarIcon>\n        <app-icon\n          *ngIf=\"userEvent.avatarIcon\"\n          [ref]=\"userEvent.avatarIcon\"\n          height=\"40\"\n          width=\"40\"\n        ></app-icon>\n      </ng-template>\n\n    </ion-avatar>\n\n    <ion-grid class=\"ion-no-margin ion-no-padding message\">\n      <ion-row>\n        <ion-col>\n          <p [class.unread]=\"!userEvent.readDate\" [innerHTML]=\"userEvent.message\"></p>\n        </ion-col>\n      </ion-row>\n      <ion-row *ngIf=\"userEvent.actions?.length\">\n        <ion-col>\n          <span *ngFor=\"let action of userEvent.actions\" class=\"action\">\n            <a (click)=\"executeAction($event, action, userEvent)\" [title]=\"action.title|translate\">\n              <app-icon *ngIf=\"action.iconRef\" slot=\"start\" height=\"20\" width=\"20\" [ref]=\"action.iconRef\"></app-icon>\n              {{ action.name | translate }}\n            </a>\n          </span>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <app-icon\n            *ngIf=\"userEvent.icon\"\n            [ref]=\"userEvent.icon\"\n            height=\"16\"\n            width=\"16\"\n            style=\"vertical-align: sub; margin-right: 3px\"\n          ></app-icon>\n          <small>\n            <span>{{userEvent.creationDate|dateFromNow}}</span>\n            <span style=\"color: gray\">{{ ' | ' + (userEvent.creationDate|dateFormat:{time:true}) }}</span>\n          </small>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </ion-item>\n\n  <ion-row class=\"ion-list-footer column\">\n  </ion-row>\n\n</ion-list>\n",
+                    template: "<ion-content>\n  <ion-list class=\"ion-list-popover\">\n\n    <ion-row class=\"ion-list-header column\">\n      <ion-col>\n        <ion-label>{{titleI18n | translate}}</ion-label>\n      </ion-col>\n      <ion-col class=\"top-action\" *ngIf=\"$items|async|isNotEmptyArray\">\n        <ion-text color=\"primary\">\n          <a (click)=\"markAllAsRead($event)\">{{'SOCIAL.USER_EVENT.NOTIFICATION.READ_ALL' | translate}}</a>\n        </ion-text>\n      </ion-col>\n    </ion-row>\n\n    <ion-item\n      *ngFor=\"let userEvent of $items | async; last as last\"\n      [lines]=\"last ? 'none' : undefined\"\n      (click)=\"click($event, userEvent)\"\n    >\n\n      <ion-avatar slot=\"start\">\n\n        <img *ngIf=\"userEvent.avatar; else avatarIcon\" src=\"{{ userEvent.avatar }}\">\n\n        <ng-template #avatarIcon>\n          <app-icon\n            *ngIf=\"userEvent.avatarIcon\"\n            [ref]=\"userEvent.avatarIcon\"\n            height=\"40\"\n            width=\"40\"\n          ></app-icon>\n        </ng-template>\n\n      </ion-avatar>\n\n      <ion-grid class=\"ion-no-margin ion-no-padding message\">\n        <ion-row>\n          <ion-col>\n            <p [class.unread]=\"!userEvent.readDate\" [innerHTML]=\"userEvent.message\"></p>\n          </ion-col>\n        </ion-row>\n        <ion-row *ngIf=\"userEvent.actions?.length\">\n          <ion-col>\n            <span *ngFor=\"let action of userEvent.actions\" class=\"action\">\n              <a (click)=\"executeAction($event, action, userEvent)\" [title]=\"action.title|translate\">\n                <app-icon *ngIf=\"action.iconRef\" slot=\"start\" height=\"20\" width=\"20\" [ref]=\"action.iconRef\"></app-icon>\n                {{ action.name | translate }}\n              </a>\n            </span>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <app-icon\n              *ngIf=\"userEvent.icon\"\n              [ref]=\"userEvent.icon\"\n              height=\"16\"\n              width=\"16\"\n              style=\"vertical-align: sub; margin-right: 3px\"\n            ></app-icon>\n            <small>\n              <span>{{userEvent.creationDate|dateFromNow}}</span>\n              <span style=\"color: gray\">{{ ' | ' + (userEvent.creationDate|dateFormat:{time:true}) }}</span>\n            </small>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </ion-item>\n\n    <!-- loading -->\n    <ion-item *ngIf=\"!($items|async); else noResult\" lines=\"none\" disabled>\n      <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n    </ion-item>\n\n    <!-- no result -->\n    <ng-template #noResult>\n      <ion-item *ngIf=\"$items|async|isEmptyArray\" lines=\"none\">\n        <ion-text color=\"dark\" class=\"text-italic\">{{'SOCIAL.USER_EVENT.NOTIFICATION.EMPTY' | translate}}</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <!-- More item -->\n    <ion-item *ngIf=\"canFetchMore\" (ngInit)=\"_initInfiniteScroll()\" lines=\"none\" disabled>\n      <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n    </ion-item>\n\n<!--    <ion-infinite-scroll #infiniteScroll-->\n<!--                         [disabled]=\"!canFetchMore\"-->\n<!--                         [threshold]=\"mobile ? '10%' : '2%'\" position=\"bottom\"-->\n<!--                         (ionInfinite)=\"loadMore($event)\">-->\n<!--      <ion-infinite-scroll-content-->\n<!--        loadingSpinner=\"circles\"-->\n<!--        [loadingText]=\"'COMMON.LOADING_DOTS'|translate\">-->\n<!--      </ion-infinite-scroll-content>-->\n<!--    </ion-infinite-scroll>-->\n\n    <!-- footer -->\n    <ion-row *ngIf=\"$itemCount|async; let count\"\n              class=\"ion-list-footer column\">\n      <ion-col>\n        <ion-text class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n      </ion-col>\n    </ion-row>\n\n  </ion-list>\n</ion-content>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host(.popover-viewport){overflow-y:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.unread{font-weight:700}.message{font-size:.9em}.message p{margin-top:5px;margin-bottom:5px}.top-action{text-align:end;margin-right:8px}.top-action a{cursor:pointer;color:var(--ion-color-contrast)}.top-action a:hover{text-decoration:underline}.action a{margin-right:10px;cursor:pointer}.action app-icon{vertical-align:middle}"]
+                    styles: [":host(.popover-viewport){overflow-y:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-height:calc(90vh - 20px)}.unread{font-weight:700}.message{font-size:.9em}.message p{margin-top:5px;margin-bottom:5px}.top-action{text-align:end;margin-right:8px}.top-action a{cursor:pointer;color:var(--ion-color-contrast)}.top-action a:hover{text-decoration:underline}.action a{margin-right:10px;cursor:pointer}.action app-icon{vertical-align:middle}"]
                 },] }
     ];
     UserEventNotificationList.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef },
         { type: i1$5.PopoverController },
+        { type: LocalSettingsService, decorators: [{ type: i0.Optional }] },
         { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [USER_EVENT_SERVICE,] }] }
     ]; };
     UserEventNotificationList.propDecorators = {
         debug: [{ type: i0.Input }],
+        mobile: [{ type: i0.Input }],
         titleI18n: [{ type: i0.Input }],
+        pageSize: [{ type: i0.Input }],
+        sortBy: [{ type: i0.Input }],
+        sortDirection: [{ type: i0.Input }],
+        filter: [{ type: i0.Input }],
+        enableInfiniteScroll: [{ type: i0.Input }],
         readEvent: [{ type: i0.Output }],
-        readEvents: [{ type: i0.Output }]
+        readEvents: [{ type: i0.Output }],
+        ionContent: [{ type: i0.ViewChild, args: [i1$5.IonContent,] }],
+        ionItems: [{ type: i0.ViewChildren, args: [i1$5.IonItem,] }]
     };
 
     var AppUserEventNotificationIcon = /** @class */ (function () {
@@ -34072,8 +34230,35 @@
                 });
             });
         };
-        UserEventTestService.prototype.watchAll = function (offset, size, sortBy, sortDirection, filter, options) {
-            return rxjs.of({ data: this.userEvents });
+        UserEventTestService.prototype.watchAll = function (offset, size, sortBy, sortDirection, filter, opts) {
+            var _this = this;
+            var _a;
+            var data = (this.userEvents || []).slice(offset || 0, offset + size);
+            var total = ((_a = this.userEvents) === null || _a === void 0 ? void 0 : _a.length) || 0;
+            var res = { data: data, total: total };
+            // Must re-order because of listenChanges result will add new event at the end
+            data = EntityUtils.sort(data, sortBy, sortDirection);
+            // Add fetch more
+            var nextOffset = offset + data.length;
+            if (nextOffset < res.total) {
+                res.fetchMore = function (_) { return _this.loadAll(nextOffset, size, sortBy, sortDirection, filter, Object.assign(Object.assign({}, opts), { fetchPolicy: 'no-cache' })); };
+            }
+            return rxjs.of(res);
+        };
+        UserEventTestService.prototype.loadAll = function (offset, size, sortBy, sortDirection, filter, opts) {
+            var _this = this;
+            var _a;
+            var data = (this.userEvents || []).slice(offset || 0, offset + size);
+            var total = ((_a = this.userEvents) === null || _a === void 0 ? void 0 : _a.length) || 0;
+            var res = { data: data, total: total };
+            // Must re-order because of listenChanges result will add new event at the end
+            data = EntityUtils.sort(data, sortBy, sortDirection);
+            // Add fetch more
+            var nextOffset = offset + data.length;
+            if (nextOffset < res.total) {
+                res.fetchMore = function (_) { return _this.loadAll(nextOffset, size, sortBy, sortDirection, filter, Object.assign(Object.assign({}, opts), { fetchPolicy: 'no-cache' })); };
+            }
+            return Promise.resolve(res);
         };
         return UserEventTestService;
     }(AbstractUserEventService));
@@ -34232,10 +34417,7 @@
     UserEventTestingPage.decorators = [
         { type: i0.Component, args: [{
                     selector: 'job-progression-testing',
-                    template: "<ion-toolbar color=\"primary\">\n  <ion-title>User events</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <app-user-event-notification-icon #notification [debug]=\"true\"></app-user-event-notification-icon>\n\n  <p>\n    <ion-button (click)=\"addNotification()\">Add notification</ion-button>\n    <ion-button (click)=\"addError()\">Add error</ion-button>\n    <ion-button (click)=\"addWarning()\">Add warning</ion-button>\n    <ion-button (click)=\"addDebug()\">Add debug</ion-button>\n  </p>\n  <p>\n    <ion-button (click)=\"addNotificationWithLink()\">Add notification with link</ion-button>\n    <ion-button (click)=\"addNotificationWithAction()\">Add notification with action</ion-button>\n  </p>\n</ion-content>\n",
-                    providers: [
-                        { provide: USER_EVENT_SERVICE, useClass: UserEventTestService }
-                    ]
+                    template: "<ion-toolbar color=\"primary\">\n  <ion-title>User events</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <app-user-event-notification-icon #notification [debug]=\"true\"></app-user-event-notification-icon>\n\n  <p>\n    <ion-button (click)=\"addNotification()\">Add notification</ion-button>\n    <ion-button (click)=\"addError()\">Add error</ion-button>\n    <ion-button (click)=\"addWarning()\">Add warning</ion-button>\n    <ion-button (click)=\"addDebug()\">Add debug</ion-button>\n  </p>\n  <p>\n    <ion-button (click)=\"addNotificationWithLink()\">Add notification with link</ion-button>\n    <ion-button (click)=\"addNotificationWithAction()\">Add notification with action</ion-button>\n  </p>\n</ion-content>\n"
                 },] }
     ];
     UserEventTestingPage.ctorParameters = function () { return [