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

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

@@ -24829,7 +24829,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 +30245,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 +30254,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
@@ -30345,7 +30345,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;
@@ -30407,7 +30407,7 @@
                 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;
             }));
         };
@@ -30654,7 +30654,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 +30671,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*/];
@@ -30816,20 +30816,22 @@
         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, 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);
+                }));
+            }
         };
         UserEventNotificationList.prototype.ngOnDestroy = function () {
             this.subscriptions.unsubscribe();
@@ -30880,31 +30882,35 @@
         readEvents: [{ type: i0.Output }]
     };
 
-    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 +30921,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 +30935,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();
@@ -30952,39 +30958,39 @@
                                     cssClass: 'popover-large'
                                 })];
                         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 +31006,11 @@
                         AppIconModule
                     ],
                     declarations: [
-                        UserEventNotificationComponent,
+                        AppUserEventNotificationIcon,
                         UserEventNotificationList
                     ],
                     exports: [
-                        UserEventNotificationComponent
+                        AppUserEventNotificationIcon
                     ]
                 },] }
     ];
@@ -31603,6 +31609,11 @@
                         JobModule,
                         MessageModule
                     ],
+                    exports: [
+                        UserEventModule,
+                        JobModule,
+                        MessageModule
+                    ]
                 },] }
     ];
 
@@ -33842,6 +33853,418 @@
                 },] }
     ];
 
+    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.listenChanges = 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, options) {
+            return rxjs.of({ data: this.userEvents });
+        };
+        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.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  </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 +34320,7 @@
     exports.AppTable = AppTable;
     exports.AppTableDataSourceOptions = AppTableDataSourceOptions;
     exports.AppTableUtils = AppTableUtils;
+    exports.AppUserEventNotificationIcon = AppUserEventNotificationIcon;
     exports.AppValidatorService = AppValidatorService;
     exports.AppendToInputDirective = AppendToInputDirective;
     exports.ArrayFilterPipe = ArrayFilterPipe;
@@ -33996,6 +34420,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 +34502,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 +34531,7 @@
     exports.SocialErrorCodes = SocialErrorCodes;
     exports.SocialModule = SocialModule;
     exports.SocialModuleOptionsToken = SocialModuleOptionsToken;
+    exports.SocialTestingModule = SocialTestingModule;
     exports.StartableService = StartableService;
     exports.StatusById = StatusById;
     exports.StatusIds = StatusIds;
@@ -34133,7 +34562,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;