@sumaris-net/ngx-components 1.22.9 → 1.22.11-rc10

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

@@ -1151,7 +1151,7 @@
      * @param element
      * @param threshold default to '15%'
      */
-    function fromScrollEndEvent(element, threshold) {
+    function fromScrollEndEvent(element, threshold, dueTime) {
         threshold = threshold || '15%';
         var isEnd;
         // Listen using percentage
@@ -1173,6 +1173,11 @@
         else {
             throw new Error('Invalid argument \'threshold\'. Expected value unit: \'px\' or \'%\' ');
         }
+        // Check bottom reach, even if NO scroll event (e.g. when already reach the bottom)
+        if (dueTime > 0) {
+            return rxjs.merge(rxjs.fromEvent(element, 'scroll'), rxjs.timer(dueTime))
+                .pipe(operators.filter(function () { return isEnd(); }));
+        }
         return rxjs.fromEvent(element, 'scroll')
             .pipe(operators.filter(function () { return isEnd(); }));
     }
@@ -24829,7 +24834,7 @@
     MenuComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-menu',
-                    template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px\"/>\n              <span *ngIf=\"!logo\" style=\"width: 108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button mat-button type=\"button\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n                <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                  <h3 class=\"no-margin username\">\n                    <b>{{accountName}}</b>\n                  </h3>\n                  <h4>{{accountEmail}}</h4>\n                </ion-label>\n              </button>\n            </ion-col>\n\n            <!-- Insertion slot='header-bottom-right' -->\n            <ion-col size=\"auto\">\n              <ng-content select=\"[slot=header-bottom-right]\"></ng-content>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of $items | async\">\n\n          <!-- link -->\n          <ion-item *ngIf=\"!loading && item.path\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    [routerLink]=\"item.path\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"selected\"\n                    [routerLinkActiveOptions]=\"{exact: (item.path === '/')}\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- action -->\n          <ion-item *ngIf=\"!loading && item.action\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    (click)=\"doAction(item.action, $event)\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- divider -->\n          <ion-item-divider @fadeInAnimation\n                            class=\"{{item.cssClass}} {{item.color}}\"\n                            *ngIf=\"!loading && !item.path && !item.action\">\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item-divider>\n\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\n</ion-split-pane>\n",
+                    template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px\"/>\n              <span *ngIf=\"!logo\" style=\"width: 108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button mat-button type=\"button\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n                <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                  <h3 class=\"no-margin username\">\n                    <b>{{accountName}}</b>\n                  </h3>\n                  <h4>{{accountEmail}}</h4>\n                </ion-label>\n              </button>\n            </ion-col>\n\n            <!-- Insertion headerBottomRight -->\n            <ion-col size=\"auto\">\n              <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of $items | async\">\n\n          <!-- link -->\n          <ion-item *ngIf=\"!loading && item.path\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    [routerLink]=\"item.path\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"selected\"\n                    [routerLinkActiveOptions]=\"{exact: (item.path === '/')}\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- action -->\n          <ion-item *ngIf=\"!loading && item.action\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    (click)=\"doAction(item.action, $event)\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- divider -->\n          <ion-item-divider @fadeInAnimation\n                            class=\"{{item.cssClass}} {{item.color}}\"\n                            *ngIf=\"!loading && !item.path && !item.action\">\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item-divider>\n\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n",
                     animations: [fadeInAnimation],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: ["ion-menu{--ion-item-background:transparent;--ion-item-divider-background:transparent;--ion-item-icon-color:var(--ion-color-primary-tint);--ion-item-text-color:var(--ion-color-primary-tint);--ion-item-background-selected:var(--ion-color-secondary100);--ion-item-text-color-selected:var(--ion-color-primary);--ion-item-icon-color-selected:var(--ion-color-primary);--ion-item-text-color-disable:var(--ion-color-medium);--ion-item-icon-color-disable:var(--ion-color-medium)}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header .user-avatar{background-size:cover;background-repeat:no-repeat;background-position:50%;background-color:var(--ion-color-secondary);border:1px solid var(--ion-color-primary);overflow:hidden!important;font-size:var(--avatar-size,60px)!important;line-height:var(--avatar-size,60px);height:var(--avatar-size,60px)!important;width:var(--avatar-size,60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:2px solid var(--ion-color-primary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size,60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;text-align:start!important;width:100%}ion-menu .scroll-content{margin-top:79px!important}ion-menu .has-user-header .scroll-content{margin-top:188px!important}ion-menu ion-content.has-profile-header{--offset-top:188px}ion-menu ion-content.no-profile-header{--offset-top:79px}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color:var(--ion-color-primary-tint);--ion-item-text-color:var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color:var(--ion-color-secondary-tint);--ion-item-text-color:var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color:var(--ion-color-tertiary-tint);--ion-item-text-color:var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color:var(--ion-color-danger-tint);--ion-item-text-color:var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color:var(--ion-color-medium-shade);--ion-item-text-color:var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color:var(--ion-color-dark-tint);--ion-item-text-color:var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item ion-icon,ion-menu ion-content ion-list ion-item mat-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-label,ion-menu ion-content ion-list ion-item ion-text{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover:var(--ion-item-background-selected)!important}ion-menu ion-content ion-list ion-item.selected ion-icon,ion-menu ion-content ion-list ion-item.selected mat-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-label,ion-menu ion-content ion-list ion-item.selected ion-text{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover:var(--ion-item-background-selected)!important;--ion-item-icon-color-selected:var(--ion-item-icon-color)!important;--ion-item-text-color-selected:var(--ion-item-text-color)!important}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width:40px}@media screen and (max-width:767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width:768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size,80px)!important;line-height:var(--avatar-size,80px);height:var(--avatar-size,80px)!important;width:var(--avatar-size,80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size,80px)}}"]
@@ -30245,7 +30250,7 @@
             _this.network = network;
             _this.translate = translate;
             _this.options = options;
-            _this.count$ = new rxjs.BehaviorSubject(0);
+            _this._countSubject = new rxjs.BehaviorSubject(0);
             _this.listeners = [];
             _this._subscriptions = new rxjs.Subscription();
             _this.queries = options.queries;
@@ -30254,9 +30259,9 @@
             _this._logPrefix = '[user-event-service] ';
             return _this;
         }
-        Object.defineProperty(AbstractUserEventService.prototype, "userEventCount", {
+        Object.defineProperty(AbstractUserEventService.prototype, "countSubject", {
             get: function () {
-                return this.count$.asObservable();
+                return this._countSubject;
             },
             enumerable: false,
             configurable: true
@@ -30289,7 +30294,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 +30311,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 +30324,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); });
@@ -30327,14 +30333,79 @@
                     console.debug("" + _this._logPrefix + data.length + " user events loaded in " + (Date.now() - now) + "ms");
                     now = null;
                 }
-                // Must re-order because of listenChanges result will add new event at the end
+                // Must re-order because of listenAllChanges 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 listenAllChanges 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);
@@ -30345,7 +30416,7 @@
                 data: entity
             });
             // Update count
-            this.count$.next(this.count$.value + 1);
+            this._countSubject.next(this._countSubject.value + 1);
         };
         AbstractUserEventService.prototype.count = function (filter, options) {
             var _a;
@@ -30391,6 +30462,7 @@
                 filter = this.defaultFilter();
             // Apply last reset date as start date
             filter.startDate = this.resetCountDate;
+            filter.excludeRead = true;
             filter = this.asFilter(filter);
             if (this._debug)
                 console.debug(this._logPrefix + "[WS] Listening count changes for user events with filter:", filter);
@@ -30407,15 +30479,15 @@
                 if (total && _this._debug)
                     console.debug(_this._logPrefix + "Received new user events count:", total);
                 // update count
-                _this.count$.next(total);
+                _this._countSubject.next(total);
                 return total;
             }));
         };
-        AbstractUserEventService.prototype.listenChanges = function (filter, options) {
+        AbstractUserEventService.prototype.listenAllChanges = function (filter, options) {
             var _this = this;
             var _a;
-            if (!((_a = this.subscriptions) === null || _a === void 0 ? void 0 : _a.listenChanges)) {
-                console.warn(this._logPrefix + "Subscription query 'listenChanges' not provided, skip.");
+            if (!((_a = this.subscriptions) === null || _a === void 0 ? void 0 : _a.listenAllChanges)) {
+                console.warn(this._logPrefix + "Subscription query 'listenAllChanges' not provided, skip.");
                 return rxjs.of();
             }
             if (!filter)
@@ -30425,7 +30497,7 @@
             if (this._debug)
                 console.debug(this._logPrefix + "[WS] Listening changes for user events with filter:", filter);
             return this.graphql.subscribe({
-                query: this.subscriptions.listenChanges,
+                query: this.subscriptions.listenAllChanges,
                 fetchPolicy: options === null || options === void 0 ? void 0 : options.fetchPolicy,
                 variables: { filter: filter.asPodObject(), interval: toNumber(options === null || options === void 0 ? void 0 : options.interval, 10) },
                 error: {
@@ -30654,7 +30726,7 @@
             this.listeners.push(listener);
         };
         AbstractUserEventService.prototype.resetCount = function () {
-            this.count$.next(undefined);
+            this._countSubject.next(undefined);
             this.resetCountDate = moment$6();
             // restart listening count changes
             this.startListenCountChanges();
@@ -30671,7 +30743,7 @@
                             if (this._debug)
                                 console.debug(this._logPrefix + "Receiving user events count", count);
                             // Update count
-                            this.count$.next(count);
+                            this._countSubject.next(count);
                             // Then listen changes
                             this.startListenCountChanges();
                             return [2 /*return*/];
@@ -30805,56 +30877,180 @@
     ]; };
 
     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.enableInfiniteScroll && !!this._fetchMoreFn;
+            },
+            enumerable: false,
+            configurable: true
+        });
         UserEventNotificationList.prototype.ngOnInit = function () {
             var _this = this;
             // Watch all user events
-            this.subscriptions.add(this.userEventService
-                .watchAll(0, 10, 'creationDate', "desc", undefined)
-                .subscribe(function (result) {
-                if (_this.debug)
-                    console.debug("[user-event-notification-list] receiving " + result.total + " user events", result.data);
-                _this.userEvents.next(result.data);
-                _this.markForCheck();
-            }));
-            // Listen changes
-            this.subscriptions.add(this.userEventService.listenChanges(undefined)
-                .subscribe(function (data) {
-                if (_this.debug)
-                    console.debug("[user-event-notification-list] receiving " + data.length + " new user events", data);
-            }));
+            if (this.userEventService) {
+                this.subscriptions.add(this.userEventService
+                    .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.$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
+                this.subscriptions.add(this.userEventService.listenAllChanges(undefined)
+                    .subscribe(function (data) {
+                    if (_this.debug)
+                        console.debug("[user-event-notification-list] receiving " + data.length + " new user events", data);
+                }));
+            }
         };
         UserEventNotificationList.prototype.ngOnDestroy = function () {
             this.subscriptions.unsubscribe();
         };
-        UserEventNotificationList.prototype.read = function (event, userEvent) {
+        UserEventNotificationList.prototype.click = function (event, userEvent) {
+            if (!userEvent)
+                return; // Skip
+            // MarkAsRead
+            this.markAsRead(event, userEvent);
+            // Get the default action (if any)
+            var defaultAction = ((userEvent === null || userEvent === void 0 ? void 0 : userEvent.actions) || []).find(function (a) { return a.default; });
+            if (defaultAction) {
+                this.executeAction(event, defaultAction, userEvent);
+            }
+        };
+        UserEventNotificationList.prototype.isDefaultAction = function (action) {
+            return action && action.default || false;
+        };
+        UserEventNotificationList.prototype.markAsRead = function (event, userEvent) {
             var _a;
             if (userEvent === null || userEvent === void 0 ? void 0 : userEvent.readDate)
                 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);
         };
-        UserEventNotificationList.prototype.executeAction = function (action, userEvent) {
-            // Execute then close popover
-            action.executeAction(userEvent);
-            this.dismiss();
+        UserEventNotificationList.prototype.executeAction = function (event, action, userEvent) {
+            return __awaiter(this, void 0, void 0, function () {
+                var res, err_1;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (event === null || event === void 0 ? void 0 : event.defaultPrevented)
+                                return [2 /*return*/]; // Skip if prevented
+                            // Disable default action (.e.g avoid to call click() function)
+                            if (event)
+                                event.preventDefault();
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 4, , 5]);
+                            res = action.executeAction(userEvent);
+                            this.dismiss();
+                            if (!(res instanceof Promise)) return [3 /*break*/, 3];
+                            return [4 /*yield*/, res];
+                        case 2:
+                            _b.sent();
+                            _b.label = 3;
+                        case 3: return [3 /*break*/, 5];
+                        case 4:
+                            err_1 = _b.sent();
+                            console.error(err_1);
+                            return [3 /*break*/, 5];
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            });
         };
         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;
+                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();
+                            // Trigger fetch more, end end scroll reached
+                            this._fetchMoreSubscription = fromScrollEndEvent(panel, threshold, 250 /*force to check when no scrollbar - e.g. in large screen*/)
+                                .subscribe(function () { return _this.fetchMore(); });
+                            this.subscriptions.add(this._fetchMoreSubscription);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         UserEventNotificationList.prototype.markForCheck = function () {
             this.cd.markForCheck();
         };
@@ -30863,48 +31059,61 @@
     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)=\"read($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(action, userEvent)\">\n              <app-icon *ngIf=\"action.iconRef\" slot=\"start\" height=\"20\" width=\"20\" [ref]=\"action.iconRef\"></app-icon>\n              {{ action.name }}\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 item of $items | async; last as last\"\n      [lines]=\"last ? 'none' : undefined\"\n      [class.unread]=\"!item.readDate\"\n      [class.tappable]=\"item.actions|arrayFilter:isDefaultAction|isNotEmptyArray\"\n      (click)=\"click($event, item)\">\n\n      <ion-avatar slot=\"start\">\n\n        <img *ngIf=\"item.avatar; else avatarIcon\" src=\"{{ item.avatar }}\">\n\n        <ng-template #avatarIcon>\n          <app-icon\n            *ngIf=\"item.avatarIcon\"\n            [ref]=\"item.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 size=\"12\">\n            <p [class.unread]=\"!item.readDate\" [innerHTML]=\"item.message\"></p>\n          </ion-col>\n        </ion-row>\n\n        <!-- date -->\n        <ion-row>\n          <ion-col size=\"12\">\n            <app-icon\n              *ngIf=\"item.icon\"\n              [ref]=\"item.icon\"\n              height=\"16\"\n              width=\"16\"\n              style=\"vertical-align: sub; margin-right: 3px\"\n            ></app-icon>\n            <small>\n              <span>{{item.creationDate|dateFromNow}}</span>\n              <span style=\"color: gray\">{{ ' | ' + (item.creationDate|dateFormat:{time:true}) }}</span>\n            </small>\n          </ion-col>\n        </ion-row>\n\n        <!-- actions -->\n        <ion-row *ngIf=\"item.actions|isNotEmptyArray\">\n          <ion-col></ion-col>\n          <ion-col size=\"auto\">\n            <ng-container *ngFor=\"let action of item.actions\">\n              <a *ngIf=\"!action.default\" class=\"action\" (click)=\"executeAction($event, action, item)\" [title]=\"(action.title || action.name) |translate\">\n                <app-icon *ngIf=\"action.iconRef\" slot=\"start\" height=\"20\" width=\"20\" [ref]=\"action.iconRef\"></app-icon>\n                <span>{{ action.name | translate }}</span>\n              </a>\n            </ng-container>\n          </ion-col>\n        </ion-row>\n\n      </ion-grid>\n\n      <mat-icon slot=\"end\" *ngIf=\"item.actions|arrayFilter: isDefaultAction|isNotEmptyArray\">chevron_right</mat-icon>\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    <!-- Loading more spinner -->\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    <!-- 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)}ion-list ion-item.tappable{cursor:pointer}ion-list ion-item.tappable:hover{--ion-item-background:var(--ion-item-background-color-hover)}.message{font-size:.9em}.message p{margin-top:5px;margin-bottom:5px}.message p.unread{font-weight:700}.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}a.action{font-size:.9em;margin-right:10px;cursor:pointer}a.action:hover span{text-decoration:underline}a.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 UserEventNotificationComponent = /** @class */ (function () {
-        function UserEventNotificationComponent(userEventService, accountService, popoverController) {
+    var AppUserEventNotificationIcon = /** @class */ (function () {
+        function AppUserEventNotificationIcon(userEventService, accountService, popoverController) {
             this.userEventService = userEventService;
             this.accountService = accountService;
             this.popoverController = popoverController;
             this.debug = false;
             this.titleI18n = 'SOCIAL.USER_EVENT.NOTIFICATION.TITLE';
             this.disabled = false;
+            this.filter = null;
             this._logPrefix = '[user-event-notification] ';
             this._readEvent = new i0.EventEmitter();
             this._readEvents = new i0.EventEmitter();
         }
-        Object.defineProperty(UserEventNotificationComponent.prototype, "count", {
+        Object.defineProperty(AppUserEventNotificationIcon.prototype, "countChanges", {
             get: function () {
-                var _a;
-                return (_a = this.userEventService) === null || _a === void 0 ? void 0 : _a.userEventCount.pipe(operators.map(function (value) { return value === 0 ? undefined : value; }));
+                if (!this.userEventService)
+                    return rxjs.of();
+                return this.userEventService
+                    .countSubject
+                    .pipe(operators.map(function (value) { return value === 0 ? undefined : value; }));
             },
             enumerable: false,
             configurable: true
         });
-        UserEventNotificationComponent.prototype.ngOnInit = function () {
+        AppUserEventNotificationIcon.prototype.ngOnInit = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
                             if (isNil(this.userEventService)) {
                                 console.warn(this._logPrefix + "No service injected");
@@ -30915,7 +31124,7 @@
                             return [4 /*yield*/, this.userEventService.ready()];
                         case 1:
                             // Wait service
-                            _b.sent();
+                            _a.sent();
                             // Subscribe to read event
                             this._readEvent.subscribe(function (value) {
                                 // default: mark event as read
@@ -30929,11 +31138,11 @@
                 });
             });
         };
-        UserEventNotificationComponent.prototype.showList = function (event) {
+        AppUserEventNotificationIcon.prototype.showList = function (event) {
             return __awaiter(this, void 0, void 0, function () {
                 var popover;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
                             // Reset count
                             this.userEventService.resetCount();
@@ -30949,42 +31158,42 @@
                                     keyboardClose: true,
                                     event: event,
                                     translucent: true,
-                                    cssClass: 'popover-large'
+                                    cssClass: 'popover-large popover-notifications'
                                 })];
                         case 1:
-                            popover = _b.sent();
+                            popover = _a.sent();
                             return [4 /*yield*/, popover.present()];
                         case 2:
-                            _b.sent();
+                            _a.sent();
                             return [2 /*return*/];
                     }
                 });
             });
         };
-        UserEventNotificationComponent.prototype.ngOnDestroy = function () {
+        AppUserEventNotificationIcon.prototype.ngOnDestroy = function () {
             if (this.debug) {
                 console.debug(this._logPrefix + "Destroying");
             }
         };
-        return UserEventNotificationComponent;
+        return AppUserEventNotificationIcon;
     }());
-    UserEventNotificationComponent.decorators = [
+    AppUserEventNotificationIcon.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'app-user-event-notification-component',
-                    template: "<button\n  #button\n  mat-icon-button\n  [title]=\"titleI18n | translate\"\n  [disabled]=\"disabled\"\n  (click)=\"showList($event)\"\n>\n  <mat-icon\n    [matBadge]=\"count | async\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n  >notifications\n  </mat-icon>\n</button>\n\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
+                    selector: 'app-user-event-notification-icon',
+                    template: "<button\n  #button\n  mat-icon-button\n  [title]=\"titleI18n | translate\"\n  [disabled]=\"disabled\"\n  (click)=\"showList($event)\"\n>\n  <mat-icon\n    [matBadge]=\"countChanges | async\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n  >notifications\n  </mat-icon>\n</button>\n\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
-    UserEventNotificationComponent.ctorParameters = function () { return [
+    AppUserEventNotificationIcon.ctorParameters = function () { return [
         { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [USER_EVENT_SERVICE,] }] },
         { type: AccountService },
         { type: i1$5.PopoverController }
     ]; };
-    UserEventNotificationComponent.propDecorators = {
+    AppUserEventNotificationIcon.propDecorators = {
         debug: [{ type: i0.Input }],
         titleI18n: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }]
+        disabled: [{ type: i0.Input }],
+        filter: [{ type: i0.Input }]
     };
 
     var UserEventModule = /** @class */ (function () {
@@ -31000,11 +31209,11 @@
                         AppIconModule
                     ],
                     declarations: [
-                        UserEventNotificationComponent,
+                        AppUserEventNotificationIcon,
                         UserEventNotificationList
                     ],
                     exports: [
-                        UserEventNotificationComponent
+                        AppUserEventNotificationIcon
                     ]
                 },] }
     ];
@@ -31603,6 +31812,11 @@
                         JobModule,
                         MessageModule
                     ],
+                    exports: [
+                        UserEventModule,
+                        JobModule,
+                        MessageModule
+                    ]
                 },] }
     ];
 
@@ -33842,6 +34056,463 @@
                 },] }
     ];
 
+    var JobProgressionTestService = /** @class */ (function () {
+        function JobProgressionTestService() {
+        }
+        JobProgressionTestService.prototype.listenChanges = function (id, options) {
+            return rxjs.interval(100).pipe(operators.take(111), operators.map(function (value) {
+                if (value <= 10) {
+                    return {
+                        id: id,
+                        name: "Job #" + id,
+                        current: 0,
+                        total: 0,
+                        message: "Progression pending"
+                    };
+                }
+                value = value - 10;
+                return {
+                    id: id,
+                    name: "Job #" + id,
+                    current: value,
+                    total: 100,
+                    message: "Progression " + value + "/100"
+                };
+            }));
+        };
+        return JobProgressionTestService;
+    }());
+    JobProgressionTestService.decorators = [
+        { type: i0.Injectable }
+    ];
+
+    var JobProgressionTestingPage = /** @class */ (function () {
+        function JobProgressionTestingPage() {
+            this.nJob = 0;
+            this.options = {
+                autoHide: true
+            };
+            this.job = new exports.JobProgression();
+            this.job.id = 0;
+            this.job.name = 'test';
+            this.job.current = 0;
+            this.job.total = 100;
+        }
+        JobProgressionTestingPage.prototype.incrementJob = function (value) {
+            this.job.current = Math.max(0, this.job.current + value);
+            this.job.message = "Fake progression (very long message very long message very long message very long message) " + this.job.current + "/100";
+            if (this.job.current > this.job.total) {
+                this.jobProgression.removeJob(0);
+                this.job.current = 0;
+            }
+            else if (!this.jobProgression.getProgression(0)) {
+                this.jobProgression.jobProgressions.push(this.job);
+            }
+            this.jobProgression.updateValue();
+        };
+        JobProgressionTestingPage.prototype.addJob = function () {
+            // Add fake job
+            this.nJob++;
+            this.jobProgression.addJob(this.nJob);
+        };
+        return JobProgressionTestingPage;
+    }());
+    JobProgressionTestingPage.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'job-progression-testing',
+                    template: "<ion-toolbar color=\"primary\">\n  <ion-title>Job progression</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <app-job-progression #jobProgression [debug]=\"true\" [options]=\"options\" ></app-job-progression>\n\n  <p>\n    <ion-button (click)=\"incrementJob(10)\">\n      +10\n    </ion-button>\n    <ion-button (click)=\"incrementJob(-10)\">\n      -10\n    </ion-button>\n  </p>\n  <p>\n    <ion-button (click)=\"addJob()\">Add Job</ion-button>\n  </p>\n</ion-content>\n",
+                    providers: [
+                        { provide: JobProgressionServiceToken, useClass: JobProgressionTestService }
+                    ]
+                },] }
+    ];
+    JobProgressionTestingPage.ctorParameters = function () { return []; };
+    JobProgressionTestingPage.propDecorators = {
+        jobProgression: [{ type: i0.ViewChild, args: ['jobProgression',] }]
+    };
+
+    var JobTestingModule = /** @class */ (function () {
+        function JobTestingModule() {
+        }
+        return JobTestingModule;
+    }());
+    JobTestingModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        i1$4.CommonModule,
+                        i1$2.TranslateModule.forChild(),
+                        SharedModule,
+                        JobModule
+                    ],
+                    declarations: [
+                        JobProgressionTestingPage
+                    ],
+                    exports: [
+                        JobProgressionTestingPage
+                    ]
+                },] }
+    ];
+
+    var UserEventTestService = /** @class */ (function (_super) {
+        __extends(UserEventTestService, _super);
+        function UserEventTestService(graphql, accountService, network, translate, environment) {
+            var _this = _super.call(this, graphql, accountService, network, translate, {
+                queries: {
+                    loadAll: null,
+                    loadAllWithContent: null
+                },
+                production: environment === null || environment === void 0 ? void 0 : environment.production
+            }) || this;
+            _this.graphql = graphql;
+            _this.accountService = accountService;
+            _this.network = network;
+            _this.translate = translate;
+            _this.environment = environment;
+            _this.userEvents = [];
+            return _this;
+        }
+        UserEventTestService.prototype.fromObject = function (source) {
+            return exports.UserEvent.fromObject(source);
+        };
+        UserEventTestService.prototype.add = function (entity) {
+            entity = this.processUserEvent(entity);
+            entity.id = this.userEvents.length + 1;
+            this.userEvents = __spread([
+                entity
+            ], this.userEvents);
+            this._countSubject.next((this._countSubject.value || 0) + 1);
+        };
+        UserEventTestService.prototype.asFilter = function (filter) {
+            return filter;
+        };
+        UserEventTestService.prototype.count = function (filter, options) {
+            return Promise.resolve(this.userEvents.length);
+        };
+        UserEventTestService.prototype.delete = function (entity) {
+            return Promise.resolve(undefined);
+        };
+        UserEventTestService.prototype.deleteAll = function (data, opts) {
+            return Promise.resolve(undefined);
+        };
+        UserEventTestService.prototype.listenAllChanges = function (filter, options) {
+            return rxjs.of();
+        };
+        UserEventTestService.prototype.save = function (entity, options) {
+            var _a;
+            var toSave = (_a = this.userEvents) === null || _a === void 0 ? void 0 : _a.find(function (value) { return value.id == (entity === null || entity === void 0 ? void 0 : entity.id); });
+            Object.assign(toSave, entity);
+            return entity;
+        };
+        UserEventTestService.prototype.saveAll = function (data, opts) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _b, _c, entity, e_1_1;
+                var e_1, _d;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0:
+                            _e.trys.push([0, 5, 6, 7]);
+                            _b = __values((data || [])), _c = _b.next();
+                            _e.label = 1;
+                        case 1:
+                            if (!!_c.done) return [3 /*break*/, 4];
+                            entity = _c.value;
+                            return [4 /*yield*/, this.save(entity)];
+                        case 2:
+                            _e.sent();
+                            _e.label = 3;
+                        case 3:
+                            _c = _b.next();
+                            return [3 /*break*/, 1];
+                        case 4: return [3 /*break*/, 7];
+                        case 5:
+                            e_1_1 = _e.sent();
+                            e_1 = { error: e_1_1 };
+                            return [3 /*break*/, 7];
+                        case 6:
+                            try {
+                                if (_c && !_c.done && (_d = _b.return)) _d.call(_b);
+                            }
+                            finally { if (e_1) throw e_1.error; }
+                            return [7 /*endfinally*/];
+                        case 7: return [2 /*return*/, Promise.resolve(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));
+    UserEventTestService.decorators = [
+        { type: i0.Injectable }
+    ];
+    UserEventTestService.ctorParameters = function () { return [
+        { type: GraphqlService },
+        { type: AccountService },
+        { type: NetworkService },
+        { type: i1$2.TranslateService },
+        { type: Environment, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [ENVIRONMENT,] }] }
+    ]; };
+
+    var moment$a = momentImported__namespace;
+    var UserEventTestingPage = /** @class */ (function () {
+        function UserEventTestingPage(userEventService, router, alertController, translateService) {
+            var _this = this;
+            this.userEventService = userEventService;
+            this.router = router;
+            this.alertController = alertController;
+            this.translateService = translateService;
+            userEventService.registerListener({
+                accept: function (userEvent) { return true; },
+                onReceived: function (userEvent) {
+                    _this.customize(userEvent);
+                    return userEvent;
+                }
+            });
+            userEventService.registerListener({
+                accept: function (userEvent) { return userEvent.level == "DEBUG"; },
+                onRead: function (userEvent) { _this.showMessage("debug message read "); }
+            });
+        }
+        UserEventTestingPage.prototype.customize = function (userEvent) {
+            // Choose avatarIcon
+            switch (userEvent.level) {
+                case 'ERROR':
+                    userEvent.avatarIcon = { icon: 'close-outline', color: 'danger' };
+                    break;
+                case 'WARNING':
+                    userEvent.avatarIcon = { icon: 'warning-outline', color: 'warning' };
+                    break;
+                case 'INFO':
+                    userEvent.avatarIcon = { icon: 'information-circle-outline' };
+                    break;
+                case 'DEBUG':
+                    userEvent.avatarIcon = { icon: 'cog', color: "medium" };
+                    break;
+            }
+            // Choose icon
+            switch (userEvent.type) {
+                case 'message':
+                    userEvent.icon = { matIcon: 'inbox', color: 'accent' };
+                    break;
+                case 'upload':
+                    userEvent.icon = { matIcon: 'file_upload' };
+                    break;
+                case 'download':
+                    userEvent.icon = { matIcon: 'file_download' };
+                    break;
+            }
+        };
+        UserEventTestingPage.prototype.addNotification = function () {
+            this.userEventService.add(exports.UserEvent.fromObject({
+                issuer: 'system',
+                recipient: 'me',
+                type: 'message',
+                level: 'INFO',
+                message: 'message test message test message test message test message test message test message test message test',
+                creationDate: moment$a(),
+            }));
+        };
+        UserEventTestingPage.prototype.addError = function () {
+            this.userEventService.add(exports.UserEvent.fromObject({
+                issuer: 'system',
+                recipient: 'me',
+                type: 'upload',
+                level: 'ERROR',
+                message: 'message error',
+                creationDate: moment$a(),
+            }));
+        };
+        UserEventTestingPage.prototype.addWarning = function () {
+            this.userEventService.add(exports.UserEvent.fromObject({
+                issuer: 'system',
+                recipient: 'me',
+                type: 'download',
+                level: 'WARNING',
+                message: 'message warning',
+                creationDate: moment$a(),
+            }));
+        };
+        UserEventTestingPage.prototype.addDebug = function () {
+            this.userEventService.add(exports.UserEvent.fromObject({
+                issuer: 'system',
+                recipient: 'me',
+                type: 'debug',
+                level: 'DEBUG',
+                message: 'message DEBUG',
+                creationDate: moment$a(),
+            }));
+        };
+        UserEventTestingPage.prototype.addNotificationWithLink = function () {
+            var _this = this;
+            this.userEventService.add(exports.UserEvent.fromObject({
+                issuer: 'system',
+                recipient: 'me',
+                type: 'message',
+                level: 'INFO',
+                message: 'message with link',
+                creationDate: moment$a(),
+                actions: [{
+                        name: 'click here',
+                        iconRef: {
+                            icon: 'arrow-forward-outline'
+                        },
+                        executeAction: function (event) { _this.router.navigateByUrl('/'); }
+                    }]
+            }));
+        };
+        UserEventTestingPage.prototype.addNotificationWithAction = function () {
+            var _this = this;
+            this.userEventService.add(exports.UserEvent.fromObject({
+                issuer: 'system',
+                recipient: 'me',
+                type: 'message',
+                level: 'INFO',
+                message: 'message with action',
+                creationDate: moment$a(),
+                actions: [
+                    {
+                        name: 'click here',
+                        iconRef: {
+                            icon: 'arrow-forward-outline',
+                            color: 'warning'
+                        },
+                        executeAction: function (event) { _this.showMessage('action 1'); }
+                    },
+                    {
+                        name: 'click here 2',
+                        iconRef: {
+                            matIcon: 'settings_applications',
+                            color: 'secondary'
+                        },
+                        executeAction: function (event) { _this.showMessage('action 2'); }
+                    }
+                ]
+            }));
+        };
+        UserEventTestingPage.prototype.addNotificationWithDefaultAction = function () {
+            var _this = this;
+            this.userEventService.add(exports.UserEvent.fromObject({
+                issuer: 'system',
+                recipient: 'me',
+                type: 'message',
+                level: 'INFO',
+                message: 'message with action',
+                creationDate: moment$a(),
+                actions: [
+                    {
+                        default: true,
+                        name: 'default',
+                        executeAction: function (event) { _this.showMessage('default action'); }
+                    }
+                ]
+            }));
+        };
+        UserEventTestingPage.prototype.showMessage = function (text) {
+            return Alerts.showError(text, this.alertController, this.translateService);
+        };
+        return UserEventTestingPage;
+    }());
+    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    <ion-button (click)=\"addNotificationWithDefaultAction()\">Add notification with default action</ion-button>\n  </p>\n</ion-content>\n"
+                },] }
+    ];
+    UserEventTestingPage.ctorParameters = function () { return [
+        { type: UserEventTestService, decorators: [{ type: i0.Inject, args: [USER_EVENT_SERVICE,] }] },
+        { type: i3.Router },
+        { type: i1$5.AlertController },
+        { type: i1$2.TranslateService }
+    ]; };
+    UserEventTestingPage.propDecorators = {
+        notification: [{ type: i0.ViewChild, args: ['notification',] }]
+    };
+
+    var UserEventTestingModule = /** @class */ (function () {
+        function UserEventTestingModule() {
+        }
+        return UserEventTestingModule;
+    }());
+    UserEventTestingModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        i1$4.CommonModule,
+                        i1$2.TranslateModule.forChild(),
+                        SharedModule,
+                        UserEventModule
+                    ],
+                    declarations: [
+                        UserEventTestingPage
+                    ],
+                    exports: [
+                        UserEventTestingPage
+                    ]
+                },] }
+    ];
+
+    var SOCIAL_TESTING_PAGES = [
+        { label: 'Social components', divider: true },
+        { label: 'User event', page: '/testing/social/user-event' },
+        { label: 'Job progression', page: '/testing/social/job-progression' }
+    ];
+    var routes$6 = [
+        {
+            path: 'job-progression',
+            pathMatch: 'full',
+            component: JobProgressionTestingPage
+        },
+        {
+            path: 'user-event',
+            pathMatch: 'full',
+            component: UserEventTestingPage
+        },
+    ];
+    var SocialTestingModule = /** @class */ (function () {
+        function SocialTestingModule() {
+        }
+        return SocialTestingModule;
+    }());
+    SocialTestingModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        i1$4.CommonModule,
+                        i1$2.TranslateModule.forChild(),
+                        i3.RouterModule.forChild(routes$6),
+                        JobTestingModule,
+                        UserEventTestingModule
+                    ],
+                },] }
+    ];
+
     // Environment
 
     /**
@@ -33897,6 +34568,7 @@
     exports.AppTable = AppTable;
     exports.AppTableDataSourceOptions = AppTableDataSourceOptions;
     exports.AppTableUtils = AppTableUtils;
+    exports.AppUserEventNotificationIcon = AppUserEventNotificationIcon;
     exports.AppValidatorService = AppValidatorService;
     exports.AppendToInputDirective = AppendToInputDirective;
     exports.ArrayFilterPipe = ArrayFilterPipe;
@@ -33996,6 +34668,9 @@
     exports.JobProgressionComponent = JobProgressionComponent;
     exports.JobProgressionService = JobProgressionService;
     exports.JobProgressionServiceToken = JobProgressionServiceToken;
+    exports.JobProgressionTestService = JobProgressionTestService;
+    exports.JobProgressionTestingPage = JobProgressionTestingPage;
+    exports.JobTestingModule = JobTestingModule;
     exports.JobUtils = JobUtils;
     exports.KEYBOARD_HIDE_DELAY_MS = KEYBOARD_HIDE_DELAY_MS;
     exports.LAT_LONG_DEFAULT_MAX_DECIMALS = LAT_LONG_DEFAULT_MAX_DECIMALS;
@@ -34075,6 +34750,7 @@
     exports.SETTINGS_TRANSIENT_PROPERTIES = SETTINGS_TRANSIENT_PROPERTIES;
     exports.SHARED_MATERIAL_TESTING_PAGES = SHARED_MATERIAL_TESTING_PAGES;
     exports.SHARED_TESTING_PAGES = SHARED_TESTING_PAGES;
+    exports.SOCIAL_TESTING_PAGES = SOCIAL_TESTING_PAGES;
     exports.SPACE_PLACEHOLDER_CHAR = SPACE_PLACEHOLDER_CHAR;
     exports.SelectPeerModal = SelectPeerModal;
     exports.ServerErrorCodes = ServerErrorCodes;
@@ -34103,6 +34779,7 @@
     exports.SocialErrorCodes = SocialErrorCodes;
     exports.SocialModule = SocialModule;
     exports.SocialModuleOptionsToken = SocialModuleOptionsToken;
+    exports.SocialTestingModule = SocialTestingModule;
     exports.StartableService = StartableService;
     exports.StatusById = StatusById;
     exports.StatusIds = StatusIds;
@@ -34133,7 +34810,9 @@
     exports.UriUtils = UriUtils;
     exports.UserEventFragments = UserEventFragments;
     exports.UserEventModule = UserEventModule;
-    exports.UserEventNotificationComponent = UserEventNotificationComponent;
+    exports.UserEventTestService = UserEventTestService;
+    exports.UserEventTestingModule = UserEventTestingModule;
+    exports.UserEventTestingPage = UserEventTestingPage;
     exports.UserEventTypes = UserEventTypes;
     exports.UsersPage = UsersPage;
     exports.accountToString = accountToString;