npm - @sumaris-net/ngx-components - Versions diffs - 1.21.6 → 1.22.0-rc1 - Mend

@sumaris-net/ngx-components 1.21.6 → 1.22.0-rc1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/fesm2015/sumaris-net.ngx-components.js CHANGED Viewed

@@ -1966,17 +1966,21 @@ class DateDiffDurationPipe {
             return '';
         const startDate = this.dateAdapter.parse(value.startValue, DATE_ISO_PATTERN);
         const endDate = this.dateAdapter.parse(value.endValue, DATE_ISO_PATTERN);
-        return this.format(startDate, endDate);
+        return this.format(startDate, endDate, args);
     }
-    format(startDate, endDate) {
+    format(startDate, endDate, args) {
         const duration = moment.duration(endDate.diff(startDate));
         if (duration.asMinutes() < 0)
             return '';
+        const withSeconds = args === null || args === void 0 ? void 0 : args.seconds;
         const timeDuration = moment(0)
             .hour(duration.hours())
             .minute(duration.minutes());
+        if (withSeconds) {
+            timeDuration.second(duration.seconds());
+        }
         const days = Math.floor(duration.asDays());
-        return (days > 0 ? days.toString() + (this.dayUnit + ' ') : '') + timeDuration.format('HH:mm');
+        return (days > 0 ? days.toString() + (this.dayUnit + ' ') : '') + timeDuration.format(withSeconds ? 'HH:mm:ss' : 'HH:mm');
     }
 }
 DateDiffDurationPipe.ɵprov = ɵɵdefineInjectable({ factory: function DateDiffDurationPipe_Factory() { return new DateDiffDurationPipe(ɵɵinject(DateAdapter), ɵɵinject(TranslateService)); }, token: DateDiffDurationPipe, providedIn: "root" });
@@ -21477,7 +21481,7 @@ class MenuComponent {
 MenuComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-menu',
-                template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" contentId=\"menu-content\">\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              </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\" width=\"108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n\n            <button mat-button type=\"button\"\n                    [routerLink]=\"['/account']\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"ion-color-primary\"\n                    (click)=\"close()\">\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\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=\"menu-content\">\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              </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\" width=\"108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n\n            <button mat-button type=\"button\"\n                    [routerLink]=\"['/account']\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"ion-color-primary\"\n                    (click)=\"close()\">\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\n<!--            todo ajouter ici les 2 composants du module social ??? -->\n\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",
                 animations: [fadeInAnimation],
                 changeDetection: 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-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)}}"]
@@ -21541,13 +21545,14 @@ class AppIconComponent {
         this.icon = value.icon;
         this.matIcon = value.matIcon;
         this.matSvgIcon = value.matSvgIcon;
+        this.color = value.color;
     }
     ;
 }
 AppIconComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-icon',
-                template: "<ion-icon *ngIf=\"icon; else matIconTemplate\" slot=\"icon-only\"\n          [color]=\"color\"\n          [name]=\"icon\"\n></ion-icon>\n<ng-template #matIconTemplate>\n  <mat-icon [svgIcon]=\"matSvgIcon\"\n            [style.color]=\"'var(--ion-color-'+color+')'\">{{matIcon}}</mat-icon>\n</ng-template>\n\n"
+                template: "<ion-icon *ngIf=\"icon; else matIconTemplate\" slot=\"icon-only\"\n          [color]=\"color\"\n          [name]=\"icon\"\n          [style.height.px]=\"height\"\n          [style.width.px]=\"width\"\n></ion-icon>\n<ng-template #matIconTemplate>\n  <mat-icon [svgIcon]=\"matSvgIcon\"\n            [style.color]=\"'var(--ion-color-'+color+')'\"\n            [style.height.px]=\"height\"\n            [style.width.px]=\"width\"\n            [style.font-size.px]=\"height || width\"\n  >{{matIcon}}</mat-icon>\n</ng-template>\n\n"
             },] }
 ];
 AppIconComponent.propDecorators = {
@@ -21555,6 +21560,8 @@ AppIconComponent.propDecorators = {
     matIcon: [{ type: Input }],
     matSvgIcon: [{ type: Input }],
     color: [{ type: Input }],
+    height: [{ type: Input }],
+    width: [{ type: Input }],
     ref: [{ type: Input }]
 };
@@ -24225,9 +24232,11 @@ class AppEditor {
     get forms() {
         return this._children && this._children.filter(c => c instanceof AppForm);
     }
+    get editors() {
+        return this._children && this._children.filter(c => c instanceof AppEditor);
+    }
     get dirty() {
-        var _a;
-        return this._dirty || (((_a = this._children) === null || _a === void 0 ? void 0 : _a.findIndex(c => c.enabled && c.dirty)) !== -1) || false;
+        return this._dirty || (this._children && this._children.findIndex(c => c.enabled && c.dirty) !== -1) || false;
     }
     /**
      * Is valid (tables and forms)
@@ -24237,16 +24246,13 @@ class AppEditor {
         return !this._children || this._children.findIndex(c => c.enabled && !c.valid) === -1;
     }
     get invalid() {
-        var _a;
-        return (((_a = this._children) === null || _a === void 0 ? void 0 : _a.findIndex(c => c.enabled && c.invalid)) !== -1) || false;
+        return (this._children && this._children.findIndex(c => c.enabled && c.invalid) !== -1) || false;
     }
     get pending() {
-        var _a;
-        return (((_a = this._children) === null || _a === void 0 ? void 0 : _a.findIndex(c => c.enabled && c.pending)) !== -1) || false;
+        return (this._children && this._children.findIndex(c => c.enabled && c.pending) !== -1) || false;
     }
     get loading() {
-        var _a;
-        return this.loadingSubject.value || (((_a = this._children) === null || _a === void 0 ? void 0 : _a.findIndex(c => c.enabled && c.loading)) !== -1) || false;
+        return this.loadingSubject.value || (this._children && this._children.findIndex(c => c.enabled && c.loading) !== -1) || false;
     }
     get enabled() {
         return this._enabled;
@@ -24288,7 +24294,15 @@ class AppEditor {
     }
     addChildForms(forms) {
         (forms || []).forEach(form => this.addChildForm(form));
-        return this;
+    }
+    removeChildForm(form) {
+        if (!form)
+            throw new Error('Trying to remove an undefined child form');
+        const index = (this._children || []).findIndex(c => c === form);
+        if (index !== -1) {
+            return this._children.splice(index, 1)[0];
+        }
+        return undefined;
     }
     disable(opts) {
         var _a;
@@ -24392,10 +24406,11 @@ class AppEditor {
      * @param opts
      */
     unload(opts) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             console.debug('[tab-page] Unloading data...');
             this.markAsLoading();
-            this._children.forEach(f => {
+            (_a = this._children) === null || _a === void 0 ? void 0 : _a.forEach(f => {
                 if (f instanceof AppForm) {
                     f.reset(null, opts);
                 }
@@ -24403,7 +24418,6 @@ class AppEditor {
                     f.dataSource.disconnect();
                 }
             });
-            // TODO: find a way to remove current page from the navigation history
         });
     }
     reloadWithConfirmation(confirm) {
@@ -25912,7 +25926,10 @@ AppInMemoryTable.propDecorators = {
 const SocialErrorCodes = {
     LOAD_USER_EVENTS_ERROR: 50000,
     SAVE_USER_EVENT_ERROR: 50001,
-    SEND_MESSAGE_ERROR: 50003
+    COUNT_USER_EVENT_ERROR: 50002,
+    SEND_MESSAGE_ERROR: 50003,
+    SUBSCRIBE_USER_EVENTS_ERROR: 50005,
+    SUBSCRIBE_JOB_PROGRESSION_ERROR: 50010
 };
 var UserEvent_1;
@@ -25927,16 +25944,23 @@ let UserEvent = UserEvent_1 = class UserEvent extends Entity {
     }
     asObject(opts) {
         const target = super.asObject(opts);
+        target.creationDate = toDateISOString(this.creationDate);
+        target.readDate = toDateISOString(this.readDate);
         // Serialize content
         if (typeof target.content === 'object') {
             target.content = JSON.stringify(target.content);
         }
+        delete target.avatar;
+        delete target.avatarIcon;
+        delete target.icon;
+        delete target.actions;
         return target;
     }
     fromObject(source) {
         Object.assign(this, source); // Copy all properties
         super.fromObject(source);
         this.creationDate = fromDateISOString(source.creationDate);
+        this.readDate = fromDateISOString(source.readDate);
         try {
             // Deserialize content
             if (typeof source.content === 'string' && source.content.startsWith('{')) {
@@ -25955,6 +25979,52 @@ let UserEvent = UserEvent_1 = class UserEvent extends Entity {
 UserEvent = UserEvent_1 = __decorate([
     EntityClass({ typename: 'UserEventVO' })
 ], UserEvent);
+// @dynamic
+let UserEventFilter = class UserEventFilter extends EntityFilter {
+    constructor() {
+        super(...arguments);
+        this.types = [];
+        this.levels = [];
+        this.issuers = [];
+        this.recipients = [];
+        this.startDate = null;
+        this.excludeRead = false;
+    }
+    fromObject(source, opts) {
+        super.fromObject(source, opts);
+        this.types = source.types || [];
+        this.levels = source.levels || [];
+        this.issuers = source.issuers || [];
+        this.recipients = source.recipients || [];
+        this.startDate = fromDateISOString(source.startDate);
+        this.excludeRead = source.excludeRead || false;
+    }
+    buildFilter() {
+        const filterFns = super.buildFilter();
+        if (isNotEmptyArray(this.types)) {
+            filterFns.push(t => this.types.includes(t.type));
+        }
+        if (isNotEmptyArray(this.levels)) {
+            filterFns.push(t => this.levels.includes(t.level));
+        }
+        if (isNotEmptyArray(this.issuers)) {
+            filterFns.push(t => this.issuers.includes(t.issuer));
+        }
+        if (isNotEmptyArray(this.recipients)) {
+            filterFns.push(t => this.recipients.includes(t.recipient));
+        }
+        if (isNotNil(this.startDate)) {
+            filterFns.push(t => this.startDate.isSameOrBefore(t.creationDate));
+        }
+        if (this.excludeRead === true) {
+            filterFns.push(t => isNil(t.readSignature)); // todo or t.signature ?
+        }
+        return filterFns;
+    }
+};
+UserEventFilter = __decorate([
+    EntityClass({ typename: 'UserEventFilterVO' })
+], UserEventFilter);
 const UserEventFragments = {
     userEvent: gql `fragment UserEventFragment on UserEventVO {
@@ -25982,179 +26052,206 @@ const UserEventFragments = {
   }`
 };
-// @dynamic
-let UserEventFilter = class UserEventFilter extends EntityFilter {
-    constructor() {
-        super(...arguments);
-        this.issuer = null;
-        this.recipient = null;
-    }
-    fromObject(source, opts) {
-        super.fromObject(source, opts);
-        this.issuer = source.issuer;
-        this.recipient = source.recipient;
-    }
-    buildFilter() {
-        const filterFns = super.buildFilter();
-        // issuer
-        if (this.issuer) {
-            filterFns.push(t => (t.issuer === this.issuer));
-        }
-        if (this.recipient) {
-            filterFns.push(t => (t.recipient === this.recipient));
-        }
-        return filterFns;
-    }
-};
-UserEventFilter = __decorate([
-    EntityClass({ typename: 'UserEventFilterVO' })
-], UserEventFilter);
-const SaveQuery = gql `
-  mutation SaveUserEvent($data: UserEventVOInput){
-    data: saveUserEvent(userEvent: $data){
-      ...UserEventFragment
-    }
-  }
-  ${UserEventFragments.userEvent}
-`;
-const LoadAllQuery = gql `
-  query UserEvents($filter: UserEventFilterVOInput, $page: PageInput){
-    data: userEvents(filter: $filter, page: $page){
-      ...LightUserEventFragment
-    }
-  }
-  ${UserEventFragments.lightUserEvent}
-`;
-const DeleteByIdsMutation = gql `
-  mutation DeleteUserEvents($ids:[Int]){
-    deleteUserEvents(ids: $ids)
-  }
-`;
-const LoadAllWithContentQuery = gql `
-  query UserEventsWithContent($filter: UserEventFilterVOInput, $page: PageInput){
-    data: userEvents(filter: $filter, page: $page){
-      ...UserEventFragment
-    }
-  }
-  ${UserEventFragments.userEvent}
-`;
-class UserEventService extends BaseGraphqlService {
-    constructor(graphql, accountService, network, translate, toastController, environment) {
+const moment$6 = momentImported;
+const UserEventServiceToken = new InjectionToken('UserEventService');
+class AbstractUserEventService extends BaseGraphqlService {
+    constructor(graphql, accountService, network, translate, queries, mutations, subscriptions, environment) {
         super(graphql, environment);
         this.graphql = graphql;
         this.accountService = accountService;
         this.network = network;
         this.translate = translate;
-        this.toastController = toastController;
+        this.queries = queries;
+        this.mutations = mutations;
+        this.subscriptions = subscriptions;
         this.environment = environment;
-        this._userEventActions = [];
+        this.count$ = new BehaviorSubject(0);
+        this.listeners = [];
+        this._subscriptions = new Subscription();
+        this._logPrefix = '[user-event-service] ';
         // For DEV only
-        this._debug = environment && !environment.production;
+        this._debug = !(environment === null || environment === void 0 ? void 0 : environment.production);
+    }
+    get userEventCount() {
+        return this.count$.asObservable();
+    }
+    ngOnStart() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Update component when refresh is need (=login events)
+            this._subscriptions.add(merge(this.accountService.onLogin, this.accountService.onLogout)
+                .pipe(
+            // Wait account service ready (can be restarted)
+            mergeMap(() => this.accountService.ready()), map(() => this.accountService.isLogin()), distinctUntilChanged())
+                .subscribe(login => {
+                if (login) {
+                    this.onLogin();
+                }
+                else {
+                    this.onLogout();
+                }
+            }));
+            // First attempt if account is ready
+            yield this.accountService.ready();
+            if (this.accountService.isLogin()) {
+                setTimeout(() => this.onLogin());
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
     }
-    /**
-     *
-     * @param offset
-     * @param size
-     * @param sortBy
-     * @param sortDirection
-     * @param filter
-     * @param options
-     * @deprecated use watchPage() instead
-     */
     watchAll(offset, size, sortBy, sortDirection, filter, options) {
         return this.watchPage({ offset, size, sortBy, sortDirection }, filter, options);
     }
     watchPage(page, filter, options) {
+        var _a;
         let now = this._debug && Date.now();
-        //if (this._debug)
-        console.debug('[user-event-service] Loading user events...', filter);
+        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 (isNilOrBlank(filter.recipient) || !this.accountService.isAdmin()) {
-            const recipient = this.accountService.account.pubkey;
-            if (recipient !== filter.recipient) {
+        if (isEmptyArray(filter === null || filter === void 0 ? void 0 : filter.recipients) || !this.accountService.isAdmin()) {
+            const 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.recipient = recipient;
+                filter.recipients = [recipient];
             }
         }
-        const withContent = options && options.withContent === true;
+        const withContent = (options === null || options === void 0 ? void 0 : options.withContent) === true;
         return this.mutableWatchQuery({
             queryName: withContent ? 'LoadAllWithContent' : 'LoadAll',
-            query: withContent ? LoadAllWithContentQuery : LoadAllQuery,
+            query: withContent ? this.queries.loadAllWithContent : this.queries.loadAll,
             variables: {
-                page: Object.assign(Object.assign({ sortBy: 'updateDate' }, page), { sortDirection: (page.sortDirection || 'DESC').toUpperCase() }),
+                page: Object.assign(Object.assign({ sortBy: 'creationDate' }, page), {
+                    // @ts-ignore
+                    sortDirection: (page.sortDirection || 'desc').toUpperCase() }),
                 filter: filter && filter.asPodObject()
             },
             arrayFieldName: 'data',
             error: { code: SocialErrorCodes.LOAD_USER_EVENTS_ERROR, message: 'SOCIAL.ERROR.LOAD_USER_EVENTS_ERROR' },
-            fetchPolicy: options && options.fetchPolicy || undefined
+            fetchPolicy: (options === null || options === void 0 ? void 0 : options.fetchPolicy) || 'cache-first'
         })
             .pipe(map(res => {
-            const data = res && (res.data || []).map(UserEvent.fromObject);
+            let data = ((res === null || res === void 0 ? void 0 : res.data) || []).map(value => this.processUserEvent(value, this));
             if (now) {
-                console.debug(`[user-event-service] ${data.length} user events loaded in ${Date.now() - now}ms`);
+                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
+            data = EntityUtils.sort(data, page.sortBy, page.sortDirection);
             return {
                 data,
-                total: res && toNumber(res.total, data.length)
+                total: toNumber(res === null || res === void 0 ? void 0 : res.total, data.length)
             };
         }));
     }
-    saveAll(data, options) {
-        return Promise.all(data
-            .map(entity => this.save(entity, options)));
+    add(entity) {
+        // TODO set an id !!!!!!!!!!!!!!!!!!!!!!!!!
+        entity = this.processUserEvent(entity);
+        const withContent = !!entity.content;
+        // Add user event locally
+        this.insertIntoMutableCachedQueries(this.graphql.cache, {
+            query: withContent ? this.queries.loadAllWithContent : this.queries.loadAll,
+            data: entity
+        });
+        // Update count
+        this.count$.next(this.count$.value + 1);
     }
-    /**
-     * Save a userEvent entity
-     *
-     * @param entity
-     */
-    save(entity, options) {
+    count(filter, options) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            this.fillDefaultProperties(entity);
-            // Transform into json
-            const isNew = isNil(entity.id);
-            const json = entity.asObject();
-            const now = Date.now();
+            if (!((_a = this.queries) === null || _a === void 0 ? void 0 : _a.count)) {
+                console.warn(`${this._logPrefix}Query 'count' not provided, skip.`);
+                return undefined;
+            }
+            if (!filter)
+                filter = this.defaultFilter();
+            // Apply last reset date as start date
+            filter.startDate = this.resetCountDate;
+            filter = this.asFilter(filter);
             if (this._debug)
-                console.debug(`[user-event-service] Saving user event...`, json);
-            yield this.graphql.mutate({
-                mutation: SaveQuery,
+                console.debug(`${this._logPrefix}Counting user events with filter:`, filter);
+            const res = yield this.graphql.query({
+                query: this.queries.count,
                 variables: {
-                    data: json
+                    filter: filter.asPodObject()
                 },
-                error: { code: SocialErrorCodes.SAVE_USER_EVENT_ERROR, message: 'SOCIAL.ERROR.SAVE_USER_EVENT_ERROR' },
-                update: (proxy, { data }) => {
-                    // Update entity
-                    const savedEntity = data && data.data;
-                    if (savedEntity) {
-                        if (this._debug)
-                            console.debug(`[user-event-service] User event saved in ${Date.now() - now}ms`, entity);
-                        this.copyIdAndUpdateDate(savedEntity, entity);
-                        // Add to cache
-                        if (isNew) {
-                            this.insertIntoMutableCachedQueries(proxy, {
-                                query: LoadAllQuery,
-                                data: Object.assign(Object.assign({}, savedEntity), { content: null })
-                            });
-                            this.insertIntoMutableCachedQueries(proxy, {
-                                query: LoadAllWithContentQuery,
-                                data: savedEntity
-                            });
-                        }
-                    }
-                }
+                error: { code: SocialErrorCodes.COUNT_USER_EVENT_ERROR, message: 'SOCIAL.ERROR.COUNT_USER_EVENT_ERROR' },
+                fetchPolicy: (options === null || options === void 0 ? void 0 : options.fetchPolicy) || 'network-only'
             });
-            return entity;
+            return res.total;
+        });
+    }
+    listenCountChanges(filter, options) {
+        var _a;
+        if (!((_a = this.subscriptions) === null || _a === void 0 ? void 0 : _a.listenCountChanges)) {
+            console.warn(`${this._logPrefix}Subscription query 'listenCountChanges' not provided, skip.`);
+            return of();
+        }
+        if (!filter)
+            filter = this.defaultFilter();
+        // Apply last reset date as start date
+        filter.startDate = this.resetCountDate;
+        filter = this.asFilter(filter);
+        if (this._debug)
+            console.debug(`${this._logPrefix}[WS] Listening count changes for user events with filter:`, filter);
+        return this.graphql.subscribe({
+            query: this.subscriptions.listenCountChanges,
+            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: {
+                code: SocialErrorCodes.SUBSCRIBE_USER_EVENTS_ERROR,
+                message: 'SOCIAL.ERROR.SUBSCRIBE_USER_EVENTS_ERROR'
+            }
+        }).pipe(map(({ total }) => {
+            if (total && this._debug)
+                console.debug(`${this._logPrefix}Received new user events count:`, total);
+            // update count
+            this.count$.next(total);
+            return total;
+        }));
+    }
+    listenChanges(filter, options) {
+        var _a;
+        if (!((_a = this.subscriptions) === null || _a === void 0 ? void 0 : _a.listenChanges)) {
+            console.warn(`${this._logPrefix}Subscription query 'listenChanges' not provided, skip.`);
+            return of();
+        }
+        if (!filter)
+            filter = this.defaultFilter();
+        filter = this.asFilter(filter);
+        const withContent = (options === null || options === void 0 ? void 0 : options.withContent) === true;
+        if (this._debug)
+            console.debug(`${this._logPrefix}[WS] Listening changes for user events with filter:`, filter);
+        return this.graphql.subscribe({
+            query: this.subscriptions.listenChanges,
+            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: {
+                code: SocialErrorCodes.SUBSCRIBE_USER_EVENTS_ERROR,
+                message: 'SOCIAL.ERROR.SUBSCRIBE_USER_EVENTS_ERROR'
+            }
+        }).pipe(map(({ data }) => {
+            if (data && this._debug)
+                console.debug(`${this._logPrefix}Received new user events:`, data);
+            const updatedData = data === null || data === void 0 ? void 0 : data.map(value => this.processUserEvent(value, this));
+            // Update cache
+            this.insertIntoMutableCachedQueries(this.graphql.cache, {
+                query: withContent ? this.queries.loadAllWithContent : this.queries.loadAll,
+                data: updatedData
+            });
+            return updatedData;
+        }));
+    }
+    delete(entity) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!entity)
+                return; // skip
+            yield this.deleteAll([entity]);
         });
     }
-    /**
-     * Save many trips
-     *
-     * @param entities
-     * @param opts
-     */
     deleteAll(entities, opts) {
         return __awaiter(this, void 0, void 0, function* () {
             const ids = entities && entities
@@ -26163,90 +26260,311 @@ class UserEventService extends BaseGraphqlService {
                 return; // stop, if nothing else to do
             const now = Date.now();
             if (this._debug)
-                console.debug('[user-event-service] Deleting events... ids:', ids);
+                console.debug(`${this._logPrefix}Deleting events... ids:`, ids);
             yield this.graphql.mutate({
-                mutation: DeleteByIdsMutation,
+                mutation: this.mutations.deleteByIds,
                 variables: {
                     ids
                 },
                 update: (proxy) => {
                     // Remove from caches
                     this.removeFromMutableCachedQueriesByIds(proxy, {
-                        query: LoadAllQuery,
+                        query: this.queries.loadAll,
                         ids
                     });
                     this.removeFromMutableCachedQueriesByIds(proxy, {
-                        query: LoadAllWithContentQuery,
+                        query: this.queries.loadAllWithContent,
                         ids
                     });
                     if (this._debug)
-                        console.debug(`[user-event-service] Events deleted in ${Date.now() - now}ms`);
+                        console.debug(`${this._logPrefix}Events deleted in ${Date.now() - now}ms`);
                 }
             });
         });
     }
-    /**
-     * Delete userEvent entities
-     */
-    delete(data) {
+    save(entity, options) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!data)
-                return; // skip
-            yield this.deleteAll([data]);
+            this.fillDefaultProperties(entity);
+            // Transform into json
+            const withContent = !!entity.content;
+            const json = entity.asObject();
+            const now = Date.now();
+            if (this._debug)
+                console.debug(`${this._logPrefix}Saving user event...`, json);
+            yield this.graphql.mutate({
+                mutation: this.mutations.save,
+                variables: {
+                    data: json
+                },
+                error: { code: SocialErrorCodes.SAVE_USER_EVENT_ERROR, message: 'SOCIAL.ERROR.SAVE_USER_EVENT_ERROR' },
+                update: (proxy, { data }) => {
+                    // Update entity
+                    const savedEntity = data && data.data;
+                    if (savedEntity) {
+                        if (this._debug)
+                            console.debug(`${this._logPrefix}User event saved in ${Date.now() - now}ms`, entity);
+                        this.copyIdAndUpdateDate(savedEntity, entity);
+                        // Add to cache
+                        if (withContent) {
+                            this.insertIntoMutableCachedQueries(proxy, {
+                                query: this.queries.loadAllWithContent,
+                                data: savedEntity
+                            });
+                        }
+                        else {
+                            this.insertIntoMutableCachedQueries(proxy, {
+                                query: this.queries.loadAll,
+                                data: Object.assign(Object.assign({}, savedEntity), { content: null })
+                            });
+                        }
+                    }
+                }
+            });
+            return entity;
         });
     }
-    listenChanges(id, options) {
-        // TODO
-        console.warn('TODO: implement listen changes on user events');
-        return of();
+    saveAll(entities, opts) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return Promise.all(entities
+                .map(entity => this.save(entity, opts)));
+        });
+    }
+    markAsRead(entities) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const userEventWithoutReadListeners = [];
+            for (const entity of (entities || [])) {
+                // Get onRead listeners
+                const onReadListeners = (this.listeners || []).filter(listener => !!listener.onRead).filter(listener => listener.accept(entity));
+                if (onReadListeners.length) {
+                    for (const listener of onReadListeners) {
+                        yield listener.onRead(entity);
+                    }
+                }
+                else {
+                    // Add to this list for default operation
+                    userEventWithoutReadListeners.push(entity);
+                }
+            }
+            // Use default
+            yield this.defaultMarkAsRead(userEventWithoutReadListeners);
+        });
     }
-    registerAction(definition) {
-        console.info(`[user-event-service] Registering action ${definition.name} for ${definition.__typename}`);
-        this._userEventActions.push(definition);
+    registerListener(listener) {
+        if (!this.listeners)
+            this.listeners = [];
+        this.listeners.push(listener);
     }
-    getActionsByTypename(typename) {
-        return this._userEventActions.filter(def => def.__typename === typename);
+    resetCount() {
+        this.count$.next(undefined);
+        this.resetCountDate = moment$6();
+        // restart listening count changes
+        this.startListenCountChanges();
     }
-    showToastErrorWithContext(opts) {
+    /* -- protected methods -- */
+    onLogin() {
         return __awaiter(this, void 0, void 0, function* () {
-            let message = opts.message || (opts.error && opts.error.message || opts.error);
-            // Make sure message a string
-            if (!message || typeof message !== 'string') {
-                message = 'ERROR.UNKNOWN_TECHNICAL_ERROR';
-            }
-            // If offline, display a simple alert
-            if (this.network.offline) {
-                this.showToast({ message, type: 'error' });
-                return;
+            // Get first count
+            const count = yield this.count(undefined);
+            if (this._debug)
+                console.debug(`${this._logPrefix}Receiving user events count`, count);
+            // Update count
+            this.count$.next(count);
+            // Then listen changes
+            this.startListenCountChanges();
+        });
+    }
+    onLogout() {
+        this.stopListenCountChanges();
+    }
+    startListenCountChanges() {
+        this.stopListenCountChanges();
+        this._listenSubscription = this.listenCountChanges(undefined).subscribe();
+    }
+    stopListenCountChanges() {
+        var _a;
+        (_a = this._listenSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this._listenSubscription = undefined;
+    }
+    processUserEvent(source, that) {
+        that = that || this;
+        // Convert json source to IUserEvent
+        let target = that.fromObject(source);
+        // Get listeners
+        const listeners = (that.listeners || []).filter(listener => listener.onReceived).filter(listener => listener.accept(target));
+        for (const listener of listeners) {
+            if (target) {
+                target = listener.onReceived(target);
             }
-            // Translate the message (to be able to extract details content)
-            message = this.translate.instant(message);
-            // Clean details parts
-            if (message && message.indexOf('<small>') !== -1) {
-                message = message.substr(0, message.indexOf('<small>') - 1);
+            else {
+                if (that._debug)
+                    console.debug(`${that._logPrefix}Event has been rejected by a listener`, source);
+                break;
             }
-            const res = yield this.showToast({
-                type: 'error',
-                duration: 15000,
-                message: message + '<br/><br/><b>' + this.translate.instant('CONFIRM.SEND_DEBUG_DATA') + '</b>',
-                buttons: [{
-                        icon: 'bug',
-                        text: this.translate.instant('COMMON.BTN_SEND'),
-                        role: 'send'
-                    }]
-            });
-            if (!res || res.role !== 'send')
+        }
+        return target;
+    }
+    defaultMarkAsRead(userEvents) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!userEvents)
+                throw new Error(`${this._logPrefix}Invalid event to save`);
+            if (!userEvents.length)
                 return;
-            // Send debug data
-            try {
+            // set read date
+            userEvents.forEach(userEvent => userEvent.readDate = moment$6());
+            // split local/remote entities
+            const localEntities = userEvents.filter(userEvent => !userEvent.id || userEvent.id < 0);
+            const remoteEntities = userEvents.filter(userEvent => userEvent.id > 0);
+            // save local entities
+            if (localEntities.length) {
                 if (this._debug)
-                    console.debug('Sending debug data...');
-                // Call content factory
-                let context = opts && opts.context;
-                if (typeof context === 'function') {
-                    context = context();
+                    console.debug(`${this._logPrefix}Save local user event`);
+                // TODO !!!!!!!!!!!!!
+            }
+            // mark remote entities as read
+            if (remoteEntities.length) {
+                if (!((_a = this.mutations) === null || _a === void 0 ? void 0 : _a.markAsRead)) {
+                    console.warn(`${this._logPrefix}Mutation query 'markAsRead' not provided, skip.`);
+                    return;
                 }
-                if (context instanceof Promise) {
+                // Collect ids
+                const ids = remoteEntities.map(value => value.id);
+                const now = Date.now();
+                if (this._debug)
+                    console.debug(`${this._logPrefix}Mark user events as read...`, ids);
+                yield this.graphql.mutate({
+                    mutation: this.mutations.markAsRead,
+                    variables: {
+                        ids
+                    },
+                    error: { code: SocialErrorCodes.SAVE_USER_EVENT_ERROR, message: 'SOCIAL.ERROR.SAVE_USER_EVENT_ERROR' },
+                });
+                if (this._debug)
+                    console.debug(`${this._logPrefix}User events marked as read in ${Date.now() - now}ms`, ids);
+            }
+        });
+    }
+    defaultFilter() {
+        // By default
+        return {
+            recipients: [this.defaultRecipient()]
+        };
+    }
+    defaultRecipient() {
+        return this.accountService.person.pubkey;
+    }
+    fillDefaultProperties(entity) {
+    }
+    unreadEvents(events) {
+        // default calculation on unread events from a list
+        if (isEmptyArray(events))
+            return undefined;
+        const lastReadDate = events
+            .filter(event => isNotNil(event.readDate))
+            .reduce((lastDate, event) => DateUtils.max(lastDate, event.readDate), undefined);
+        return events
+            .filter(event => event.creationDate.isSameOrAfter(lastReadDate)).length;
+    }
+    copyIdAndUpdateDate(source, target) {
+        EntityUtils.copyIdAndUpdateDate(source, target);
+    }
+}
+AbstractUserEventService.decorators = [
+    { type: Directive }
+];
+AbstractUserEventService.ctorParameters = () => [
+    { type: GraphqlService },
+    { type: AccountService },
+    { type: NetworkService },
+    { type: TranslateService },
+    { type: undefined },
+    { type: undefined },
+    { type: undefined },
+    { type: Environment, decorators: [{ type: Optional }, { type: Inject, args: [ENVIRONMENT,] }] }
+];
+const userEventQueries = {
+    loadAll: gql `
+    query UserEvents($filter: UserEventFilterVOInput, $page: PageInput){
+      data: userEvents(filter: $filter, page: $page){
+        ...LightUserEventFragment
+      }
+    }
+    ${UserEventFragments.lightUserEvent}
+  `,
+    loadAllWithContent: gql `
+    query UserEventsWithContent($filter: UserEventFilterVOInput, $page: PageInput){
+      data: userEvents(filter: $filter, page: $page){
+        ...UserEventFragment
+      }
+    }
+    ${UserEventFragments.userEvent}
+  `
+};
+const userEventMutations = {
+    deleteByIds: gql `
+    mutation DeleteUserEvents($ids:[Int]){
+      deleteUserEvents(ids: $ids)
+    }
+  `,
+    save: gql `
+    mutation SaveUserEvent($data: UserEventVOInput){
+      data: saveUserEvent(userEvent: $data){
+        ...UserEventFragment
+      }
+    }
+    ${UserEventFragments.userEvent}
+  `
+};
+class UserEventService extends AbstractUserEventService {
+    constructor(graphql, accountService, network, translate, toastController, environment) {
+        super(graphql, accountService, network, translate, userEventQueries, userEventMutations, undefined, environment);
+        this.graphql = graphql;
+        this.accountService = accountService;
+        this.network = network;
+        this.translate = translate;
+        this.toastController = toastController;
+        this.environment = environment;
+    }
+    showToastErrorWithContext(opts) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let message = opts.message || (opts.error && opts.error.message || opts.error);
+            // Make sure message a string
+            if (!message || typeof message !== 'string') {
+                message = 'ERROR.UNKNOWN_TECHNICAL_ERROR';
+            }
+            // If offline, display a simple alert
+            if (this.network.offline) {
+                this.showToast({ message, type: 'error' });
+                return;
+            }
+            // Translate the message (to be able to extract details content)
+            message = this.translate.instant(message);
+            // Clean details parts
+            if (message && message.indexOf('<small>') !== -1) {
+                message = message.substr(0, message.indexOf('<small>') - 1);
+            }
+            const res = yield this.showToast({
+                type: 'error',
+                duration: 15000,
+                message: message + '<br/><br/><b>' + this.translate.instant('CONFIRM.SEND_DEBUG_DATA') + '</b>',
+                buttons: [{
+                        icon: 'bug',
+                        text: this.translate.instant('COMMON.BTN_SEND'),
+                        role: 'send'
+                    }]
+            });
+            if (!res || res.role !== 'send')
+                return;
+            // Send debug data
+            try {
+                if (this._debug)
+                    console.debug('Sending debug data...');
+                // Call content factory
+                let context = opts && opts.context;
+                if (typeof context === 'function') {
+                    context = context();
+                }
+                if (context instanceof Promise) {
                     context = yield context;
                 }
                 // Send the message
@@ -26269,13 +26587,16 @@ class UserEventService extends BaseGraphqlService {
     }
     sendDataForDebug(data) {
         const userEvent = new UserEvent();
-        userEvent.eventType = UserEventTypes.DEBUG_DATA;
+        userEvent.type = UserEventTypes.DEBUG_DATA;
         userEvent.content = this.convertObjectToString(data);
         return this.save(userEvent);
     }
     asFilter(filter) {
         return UserEventFilter.fromObject(filter);
     }
+    fromObject(source) {
+        return UserEvent.fromObject(source);
+    }
     /* -- protected methods -- */
     convertObjectToString(data) {
         if (typeof data === 'string') {
@@ -26304,13 +26625,9 @@ class UserEventService extends BaseGraphqlService {
         // TODO: compute sign
         console.warn('TODO: sign user event before sending');
     }
-    copyIdAndUpdateDate(source, target) {
-        EntityUtils.copyIdAndUpdateDate(source, target);
-    }
 }
-UserEventService.ɵprov = ɵɵdefineInjectable({ factory: function UserEventService_Factory() { return new UserEventService(ɵɵinject(GraphqlService), ɵɵinject(AccountService), ɵɵinject(NetworkService), ɵɵinject(TranslateService), ɵɵinject(ToastController), ɵɵinject(ENVIRONMENT, 8)); }, token: UserEventService, providedIn: "root" });
 UserEventService.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] }
+    { type: Injectable }
 ];
 UserEventService.ctorParameters = () => [
     { type: GraphqlService },
@@ -26323,7 +26640,7 @@ UserEventService.ctorParameters = () => [
 const ICONS_MAP = {
     DEBUG_DATA: { matIcon: 'bug_report' },
-    INBOX_MESSAGE: { matIcon: 'mail' },
+    INBOX_MESSAGE: { matIcon: 'mail' }
 };
 // TODO: refactor with a registration done by data service:
 // - userEventService.registerEventAction({__typename: 'TripVO', ...})
@@ -26389,7 +26706,7 @@ class UserEventsTable extends AppTable {
             }
         }));
         const filter = this.filter || new UserEventFilter();
-        filter.recipient = this.recipient;
+        filter.recipients = [this.recipient];
         this.setFilter(filter, { emitEvent: true });
     }
     start() {
@@ -26402,17 +26719,17 @@ class UserEventsTable extends AppTable {
         });
     }
     getIcon(source) {
-        return ICONS_MAP[source.eventType];
+        return ICONS_MAP[source.type];
     }
     getDetail(source) {
         if (!source)
             return undefined;
-        if (source.content && source.eventType === UserEventTypes.DEBUG_DATA) {
+        if (source.content && source.type === UserEventTypes.DEBUG_DATA) {
             const context = source.content.context;
             if (context && context.__typename) {
-                const actions = this.service.getActionsByTypename(context.__typename);
+                // const actions = this.service.getActionsByTypename(context.__typename);
                 return {
-                    actions,
+                    // actions,
                     title: source.content.error && source.content.error.message || source.content.message,
                     description: source.content.error && source.content.error.details || undefined
                 };
@@ -26424,11 +26741,11 @@ class UserEventsTable extends AppTable {
     doAction(action, row) {
         return __awaiter(this, void 0, void 0, function* () {
             const event = row.currentData;
-            const context = event.content && event.content.context;
+            // const context = event.content && event.content.context;
             this.markAsLoading();
             if (action && typeof action.executeAction === 'function') {
                 try {
-                    let res = action.executeAction(event, context);
+                    let res = action.executeAction(event /*, context*/);
                     res = (res instanceof Promise) ? yield res : res;
                 }
                 catch (err) {
@@ -26445,15 +26762,20 @@ class UserEventsTable extends AppTable {
 UserEventsTable.decorators = [
     { type: Component, args: [{
                 selector: 'app-user-events-table',
-                template: "\n<!-- Type = options menu -->\n<mat-menu #optionsMenu=\"matMenu\" xPosition=\"after\">\n\n  <!-- display columns -->\n  <button mat-menu-item\n          (click)=\"openSelectColumnsModal($event)\">\n    <mat-icon>view_column</mat-icon>\n    <ion-label translate>COMMON.DISPLAYED_COLUMNS_DOTS</ion-label>\n  </button>\n\n</mat-menu>\n\n<!-- top header -->\n<mat-toolbar>\n\n  <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n\n    <button mat-icon-button [title]=\"'COMMON.BTN_REFRESH'|translate\" (click)=\"onRefresh.emit()\">\n      <mat-icon>refresh</mat-icon>\n    </button>\n\n  </ng-container>\n\n  <!-- if row selection -->\n  <ng-template #hasSelection>\n\n    <!-- delete -->\n    <button mat-icon-button class=\"hidden-xs hidden-sm\" *ngIf=\"canDelete\"\n            [title]=\"'COMMON.BTN_DELETE'|translate\" (click)=\"deleteSelection($event)\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  </ng-template>\n\n  <!-- error -->\n  <ion-item *ngIf=\"error\" hidden-xs hidden-sm hidden-mobile lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <button mat-icon-button\n          [title]=\"'COMMON.BTN_OPTIONS'|translate\"\n          [matMenuTriggerFor]=\"optionsMenu\">\n    <mat-icon>more_vert</mat-icon>\n  </button>\n</mat-toolbar>\n\n\n<mat-table [dataSource]=\"dataSource\" matSort\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           matSortDisableClear [trackBy]=\"trackByFn\">\n\n  <!-- select -->\n  <ng-container matColumnDef=\"select\">\n    <mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n      </mat-checkbox>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n      <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\" [checked]=\"selection.isSelected(row)\">\n      </mat-checkbox>\n    </mat-cell>\n  </ng-container>\n\n  <!-- id -->\n  <ng-container matColumnDef=\"id\">\n    <mat-header-cell *matHeaderCellDef mat-sort-header [class.cdk-visually-hidden]=\"!isAdmin\">\n      <app-loading-spinner [loading]=\"loadingSubject|async\"><ion-label>#</ion-label></app-loading-spinner>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!isAdmin\">{{ row.currentData.id | mathAbs }}</mat-cell>\n  </ng-container>\n\n  <!-- creationDate -->\n  <ng-container matColumnDef=\"creationDate\">\n    <mat-header-cell *matHeaderCellDef mat-sort-header>\n      <ion-label translate>SOCIAL.USER_EVENT.CREATION_DATE</ion-label>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\">\n      <ion-text>\n        {{row.currentData.creationDate | dateFromNow }}<br/>\n        <ion-text color=\"medium\"><small>{{row.currentData.creationDate | dateFormat: {time: true} }}</small></ion-text>\n      </ion-text>\n    </mat-cell>\n  </ng-container>\n\n  <!-- icon -->\n  <ng-container matColumnDef=\"icon\">\n    <mat-header-cell *matHeaderCellDef>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row;\">\n      <ng-container *ngIf=\"getIcon(row.currentData); let details\">\n        <ion-icon slot=\"start\" *ngIf=\"details.icon\" [name]=\"details.icon\"></ion-icon>\n        <mat-icon slot=\"start\" *ngIf=\"details.matIcon\">{{details.matIcon}}</mat-icon>\n      </ng-container>\n    </mat-cell>\n  </ng-container>\n\n  <!-- event type -->\n  <ng-container matColumnDef=\"eventType\">\n    <mat-header-cell *matHeaderCellDef mat-sort-header>\n      <ion-label translate>SOCIAL.USER_EVENT.EVENT_TYPE</ion-label>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row;\">\n      <span>{{'SOCIAL.USER_EVENT.TYPE_ENUM.' + row.currentData.eventType | translate}}</span>\n    </mat-cell>\n  </ng-container>\n\n  <!-- message -->\n  <ng-container matColumnDef=\"message\">\n    <mat-header-cell *matHeaderCellDef>\n      <ion-label translate>SOCIAL.USER_EVENT.MESSAGE</ion-label>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row;\">\n      <ng-container *ngIf=\"getDetail(row.currentData); let details\">\n        <ion-text [innerHTML]=\"details.title|translate\">\n        </ion-text>\n      </ng-container>\n    </mat-cell>\n  </ng-container>\n\n  <!-- Actions buttons column -->\n  <ng-container matColumnDef=\"actions\">\n    <mat-header-cell *matHeaderCellDef>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\">\n      <ng-container *ngIf=\"getDetail(row.currentData); let details\">\n        <button mat-icon-button color=\"light\"\n                *ngFor=\"let action of details.actions\"\n                [title]=\"action.title |translate\"\n                [color]=\"action.color\"\n                (click)=\"doAction(action, row)\">\n          <ion-icon slot=\"start\" *ngIf=\"action.icon\" [name]=\"action.icon\"></ion-icon>\n          <mat-icon slot=\"start\" *ngIf=\"action.matIcon\">{{action.matIcon}}</mat-icon>\n        </button>\n      </ng-container>\n    </mat-cell>\n  </ng-container>\n\n  <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n  <mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n           class=\"mat-row-disabled\"\n           (click)=\"clickRow($event, row)\"></mat-row>\n\n</mat-table>\n\n<ion-row class=\"ion-no-padding\">\n  <ion-col></ion-col>\n  <ion-col class=\"ion-no-padding\" size=\"auto\">\n    <mat-paginator [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\" [pageSizeOptions]=\"defaultPageSizeOptions\" showFirstLastButtons>\n    </mat-paginator>\n  </ion-col>\n</ion-row>\n",
+                template: "\n<!-- Type = options menu -->\n<mat-menu #optionsMenu=\"matMenu\" xPosition=\"after\">\n\n  <!-- display columns -->\n  <button mat-menu-item\n          (click)=\"openSelectColumnsModal($event)\">\n    <mat-icon>view_column</mat-icon>\n    <ion-label translate>COMMON.DISPLAYED_COLUMNS_DOTS</ion-label>\n  </button>\n\n</mat-menu>\n\n<!-- top header -->\n<mat-toolbar>\n\n  <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n\n    <button mat-icon-button [title]=\"'COMMON.BTN_REFRESH'|translate\" (click)=\"onRefresh.emit()\">\n      <mat-icon>refresh</mat-icon>\n    </button>\n\n  </ng-container>\n\n  <!-- if row selection -->\n  <ng-template #hasSelection>\n\n    <!-- delete -->\n    <button mat-icon-button class=\"hidden-xs hidden-sm\" *ngIf=\"canDelete\"\n            [title]=\"'COMMON.BTN_DELETE'|translate\" (click)=\"deleteSelection($event)\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  </ng-template>\n\n  <!-- error -->\n  <ion-item *ngIf=\"error\" hidden-xs hidden-sm hidden-mobile lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <button mat-icon-button\n          [title]=\"'COMMON.BTN_OPTIONS'|translate\"\n          [matMenuTriggerFor]=\"optionsMenu\">\n    <mat-icon>more_vert</mat-icon>\n  </button>\n</mat-toolbar>\n\n\n<mat-table [dataSource]=\"dataSource\" matSort\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           matSortDisableClear [trackBy]=\"trackByFn\">\n\n  <!-- select -->\n  <ng-container matColumnDef=\"select\">\n    <mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n      </mat-checkbox>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n      <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\" [checked]=\"selection.isSelected(row)\">\n      </mat-checkbox>\n    </mat-cell>\n  </ng-container>\n\n  <!-- id -->\n  <ng-container matColumnDef=\"id\">\n    <mat-header-cell *matHeaderCellDef mat-sort-header [class.cdk-visually-hidden]=\"!isAdmin\">\n      <app-loading-spinner [loading]=\"loadingSubject|async\"><ion-label>#</ion-label></app-loading-spinner>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!isAdmin\">{{ row.currentData.id | mathAbs }}</mat-cell>\n  </ng-container>\n\n  <!-- creationDate -->\n  <ng-container matColumnDef=\"creationDate\">\n    <mat-header-cell *matHeaderCellDef mat-sort-header>\n      <ion-label translate>SOCIAL.USER_EVENT.CREATION_DATE</ion-label>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\">\n      <ion-text>\n        {{row.currentData.creationDate | dateFromNow }}<br/>\n        <ion-text color=\"medium\"><small>{{row.currentData.creationDate | dateFormat: {time: true} }}</small></ion-text>\n      </ion-text>\n    </mat-cell>\n  </ng-container>\n\n  <!-- icon -->\n  <ng-container matColumnDef=\"icon\">\n    <mat-header-cell *matHeaderCellDef>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row;\">\n      <ng-container *ngIf=\"getIcon(row.currentData); let details\">\n        <ion-icon slot=\"start\" *ngIf=\"details.icon\" [name]=\"details.icon\"></ion-icon>\n        <mat-icon slot=\"start\" *ngIf=\"details.matIcon\">{{details.matIcon}}</mat-icon>\n      </ng-container>\n    </mat-cell>\n  </ng-container>\n\n  <!-- event type -->\n  <ng-container matColumnDef=\"eventType\">\n    <mat-header-cell *matHeaderCellDef mat-sort-header>\n      <ion-label translate>SOCIAL.USER_EVENT.EVENT_TYPE</ion-label>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row;\">\n      <span>{{'SOCIAL.USER_EVENT.TYPE_ENUM.' + row.currentData.eventType | translate}}</span>\n    </mat-cell>\n  </ng-container>\n\n  <!-- message -->\n  <ng-container matColumnDef=\"message\">\n    <mat-header-cell *matHeaderCellDef>\n      <ion-label translate>SOCIAL.USER_EVENT.MESSAGE</ion-label>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row;\">\n      <ng-container *ngIf=\"getDetail(row.currentData); let details\">\n        <ion-text [innerHTML]=\"details.title|translate\">\n        </ion-text>\n      </ng-container>\n    </mat-cell>\n  </ng-container>\n\n  <!-- Actions buttons column -->\n  <ng-container matColumnDef=\"actions\">\n    <mat-header-cell *matHeaderCellDef>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\">\n      <ng-container *ngIf=\"getDetail(row.currentData); let details\">\n        <button mat-icon-button color=\"light\"\n                *ngFor=\"let action of details.actions\"\n                [title]=\"action.title |translate\"\n                [color]=\"action.color\"\n                (click)=\"doAction(action, row)\">\n          <app-icon slot=\"start\" *ngIf=\"action.iconRef\" [ref]=\"action.iconRef\"></app-icon>\n        </button>\n      </ng-container>\n    </mat-cell>\n  </ng-container>\n\n  <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n  <mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n           class=\"mat-row-disabled\"\n           (click)=\"clickRow($event, row)\"></mat-row>\n\n</mat-table>\n\n<ion-row class=\"ion-no-padding\">\n  <ion-col></ion-col>\n  <ion-col class=\"ion-no-padding\" size=\"auto\">\n    <mat-paginator [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\" [pageSizeOptions]=\"defaultPageSizeOptions\" showFirstLastButtons>\n    </mat-paginator>\n  </ion-col>\n</ion-row>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
+                providers: [
+                    {
+                        provide: UserEventServiceToken, useClass: UserEventService
+                    }
+                ],
                 styles: [".mat-header-row .mat-column-icon,.mat-row .mat-column-icon{max-width:40px;padding-left:0}.mat-header-row .mat-column-icon ion-icon,.mat-header-row .mat-column-icon mat-icon,.mat-row .mat-column-icon ion-icon,.mat-row .mat-column-icon mat-icon{font-size:1.2em;height:1.2em;width:1.2em}.mat-header-row .mat-column-creationDate,.mat-row .mat-column-creationDate{min-width:100px;max-width:120px}"]
             },] }
 ];
 UserEventsTable.ctorParameters = () => [
     { type: Injector },
     { type: AccountService },
-    { type: UserEventService },
+    { type: undefined, decorators: [{ type: Inject, args: [UserEventServiceToken,] }] },
     { type: EntitiesStorage },
     { type: ChangeDetectorRef },
     { type: undefined, decorators: [{ type: Inject, args: [ENVIRONMENT,] }] }
@@ -26465,6 +26787,248 @@ UserEventsTable.propDecorators = {
     defaultSortDirection: [{ type: Input }]
 };
+class UserEventNotificationList {
+    constructor(cd, popoverController, userEventService) {
+        this.cd = cd;
+        this.popoverController = popoverController;
+        this.userEventService = userEventService;
+        this.debug = false;
+        this.userEvents = new BehaviorSubject(undefined);
+        this.subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        // Watch all user events
+        this.subscriptions.add(this.userEventService
+            .watchAll(0, 10, 'creationDate', "desc", undefined)
+            .subscribe(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(data => {
+            if (this.debug)
+                console.debug(`[user-event-notification-list] receiving ${data.length} new user events`, data);
+        }));
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    read(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);
+    }
+    readAll(event) {
+        var _a;
+        const unreadUserEvents = (this.userEvents.value || []).filter(value => !value.readDate);
+        if (!unreadUserEvents.length)
+            return;
+        (_a = this.readEvents) === null || _a === void 0 ? void 0 : _a.emit(unreadUserEvents);
+    }
+    executeAction(action, userEvent) {
+        // Execute then close popover
+        action.executeAction(userEvent);
+        this.dismiss();
+    }
+    dismiss() {
+        this.popoverController.dismiss();
+    }
+    markForCheck() {
+        this.cd.markForCheck();
+    }
+}
+UserEventNotificationList.decorators = [
+    { type: 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\">\n      <a (click)=\"readAll($event)\">{{'SOCIAL.USER_EVENT.NOTIFICATION.READ_ALL' | translate}}</a>\n    </ion-col>\n  </ion-row>\n\n  <ion-item *ngIf=\"!(userEvents | async)?.length\">\n    {{'SOCIAL.USER_EVENT.NOTIFICATION.EMPTY' | translate}}\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",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host(.popover-viewport){overflow-y:auto;-webkit-user-select:none;-moz-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:#f5f5f5;font-style:italic}.action a{margin-right:10px;cursor:pointer}.action app-icon{vertical-align:middle}"]
+            },] }
+];
+UserEventNotificationList.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: PopoverController },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [UserEventServiceToken,] }] }
+];
+UserEventNotificationList.propDecorators = {
+    debug: [{ type: Input }],
+    titleI18n: [{ type: Input }],
+    readEvent: [{ type: Output }],
+    readEvents: [{ type: Output }]
+};
+class UserEventNotificationComponent {
+    constructor(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._logPrefix = '[user-event-notification] ';
+        this._readEvent = new EventEmitter();
+        this._readEvents = new EventEmitter();
+    }
+    get count() {
+        var _a;
+        return (_a = this.userEventService) === null || _a === void 0 ? void 0 : _a.userEventCount.pipe(map(value => value === 0 ? undefined : value));
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (isNil(this.userEventService)) {
+                console.warn(`${this._logPrefix}No service injected`);
+                this.disabled = true;
+                return;
+            }
+            // Wait service
+            yield this.userEventService.ready();
+            // Subscribe to read event
+            this._readEvent.subscribe(value => {
+                // default: mark event as read
+                this.userEventService.markAsRead([value]);
+            });
+            this._readEvents.subscribe(value => {
+                this.userEventService.markAsRead(value);
+            });
+        });
+    }
+    showList(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Reset count
+            this.userEventService.resetCount();
+            const popover = yield this.popoverController.create({
+                component: UserEventNotificationList,
+                componentProps: {
+                    debug: this.debug,
+                    titleI18n: this.titleI18n,
+                    readEvent: this._readEvent,
+                    readEvents: this._readEvents
+                },
+                backdropDismiss: true,
+                keyboardClose: true,
+                event,
+                translucent: true,
+                cssClass: 'popover-large'
+            });
+            yield popover.present();
+        });
+    }
+    ngOnDestroy() {
+        if (this.debug) {
+            console.debug(`${this._logPrefix}Destroying`);
+        }
+    }
+}
+UserEventNotificationComponent.decorators = [
+    { type: 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: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+UserEventNotificationComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [UserEventServiceToken,] }] },
+    { type: AccountService },
+    { type: PopoverController }
+];
+UserEventNotificationComponent.propDecorators = {
+    debug: [{ type: Input }],
+    titleI18n: [{ type: Input }],
+    disabled: [{ type: Input }]
+};
+class UserEventTestService extends AbstractUserEventService {
+    constructor(graphql, accountService, network, translate, environment) {
+        super(graphql, accountService, network, translate, undefined, undefined, undefined, environment);
+        this.graphql = graphql;
+        this.accountService = accountService;
+        this.network = network;
+        this.translate = translate;
+        this.environment = environment;
+        this.userEvents = [];
+    }
+    fromObject(source) {
+        return UserEvent.fromObject(source);
+    }
+    add(entity) {
+        entity = this.processUserEvent(entity);
+        entity.id = this.userEvents.length + 1;
+        this.userEvents.push(entity);
+        this.count$.next(this.userEvents.length);
+    }
+    asFilter(filter) {
+        return filter;
+    }
+    count(filter, options) {
+        return Promise.resolve(this.userEvents.length);
+    }
+    delete(entity) {
+        return Promise.resolve(undefined);
+    }
+    deleteAll(data, opts) {
+        return Promise.resolve(undefined);
+    }
+    listenChanges(filter, options) {
+        return of();
+    }
+    save(entity, options) {
+        var _a;
+        const toSave = (_a = this.userEvents) === null || _a === void 0 ? void 0 : _a.find(value => value.id == (entity === null || entity === void 0 ? void 0 : entity.id));
+        Object.assign(toSave, entity);
+        return entity;
+    }
+    saveAll(data, opts) {
+        return __awaiter(this, void 0, void 0, function* () {
+            for (const entity of (data || [])) {
+                yield this.save(entity);
+            }
+            return Promise.resolve(this.userEvents);
+        });
+    }
+    watchAll(offset, size, sortBy, sortDirection, filter, options) {
+        return of({ data: this.userEvents });
+    }
+}
+UserEventTestService.decorators = [
+    { type: Injectable }
+];
+UserEventTestService.ctorParameters = () => [
+    { type: GraphqlService },
+    { type: AccountService },
+    { type: NetworkService },
+    { type: TranslateService },
+    { type: Environment, decorators: [{ type: Optional }, { type: Inject, args: [ENVIRONMENT,] }] }
+];
+class UserEventModule {
+}
+UserEventModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoreModule,
+                    SharedModule
+                ],
+                declarations: [
+                    UserEventsTable,
+                    UserEventNotificationComponent,
+                    UserEventNotificationList,
+                ],
+                exports: [
+                    UserEventsTable,
+                    UserEventNotificationComponent
+                ],
+                providers: [
+                    { provide: UserEventServiceToken, useClass: UserEventTestService }
+                ]
+            },] }
+];
 const MessageTypes = {
     INBOX_MESSAGE: 'INBOX_MESSAGE',
     EMAIL: 'EMAIL',
@@ -26676,9 +27240,9 @@ MessageForm.propDecorators = {
     canSelectType: [{ type: Input }]
 };
-class SocialModule {
+class MessageModule {
 }
-SocialModule.decorators = [
+MessageModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
                     CommonModule,
@@ -26686,17 +27250,327 @@ SocialModule.decorators = [
                     SharedModule
                 ],
                 declarations: [
-                    UserEventsTable,
                     MessageModal,
                     MessageForm
                 ],
                 exports: [
-                    UserEventsTable,
                     MessageModal
                 ]
             },] }
 ];
+var JobProgression_1;
+// todo use entity
+class Job {
+}
+// @dynamic
+let JobProgression = JobProgression_1 = class JobProgression extends Entity {
+    constructor(id) {
+        super(JobProgression_1.TYPENAME);
+        this.id = id;
+    }
+    fromObject(source) {
+        super.fromObject(source);
+        this.name = source.name;
+        this.message = source.message;
+        this.current = source.current;
+        this.total = source.total;
+    }
+};
+JobProgression = JobProgression_1 = __decorate([
+    EntityClass({ typename: 'JobProgressionVO' })
+], JobProgression);
+const JobProgressionServiceToken = new InjectionToken('JobProgressionService');
+const jobProgressionSubscription = gql `subscription UpdateJobProgression($id: Int!, $interval: Int){
+  data: updateJobProgression(id: $id, interval: $interval) {
+    id
+    name
+    message
+    current
+    total
+  }
+}`;
+class JobProgressionService extends BaseGraphqlService {
+    constructor(graphql, environment) {
+        super(graphql, environment);
+        this.graphql = graphql;
+        this.environment = environment;
+        this._logPrefix = '[job-progression-service] ';
+        // For DEV only
+        this._debug = !(environment === null || environment === void 0 ? void 0 : environment.production);
+    }
+    listenChanges(id, options) {
+        if (isNil(id))
+            throw new Error(`${this._logPrefix}Missing argument 'id'`);
+        if (this._debug)
+            console.debug(`${this._logPrefix}[WS] Listening changes for job progression {${id}}...`);
+        return this.graphql.subscribe({
+            query: jobProgressionSubscription,
+            fetchPolicy: options === null || options === void 0 ? void 0 : options.fetchPolicy,
+            variables: { id, interval: toNumber(options === null || options === void 0 ? void 0 : options.interval, 10) },
+            error: { code: SocialErrorCodes.SUBSCRIBE_JOB_PROGRESSION_ERROR, message: 'SOCIAL.ERROR.SUBSCRIBE_JOB_PROGRESSION_ERROR' }
+        }).pipe(map(({ data }) => {
+            const progression = data && JobProgression.fromObject(data);
+            if (progression && this._debug)
+                console.debug(`${this._logPrefix}Job progression ${id} updated on server`, progression);
+            return progression;
+        }));
+    }
+}
+JobProgressionService.decorators = [
+    { type: Injectable }
+];
+JobProgressionService.ctorParameters = () => [
+    { type: GraphqlService },
+    { type: Environment, decorators: [{ type: Optional }, { type: Inject, args: [ENVIRONMENT,] }] }
+];
+class JobProgressionList {
+    constructor() {
+    }
+    ngOnInit() {
+    }
+}
+JobProgressionList.decorators = [
+    { type: Component, args: [{
+                selector: 'app-job-progression-list',
+                template: "<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-row>\n\n  <ion-item *ngIf=\"!jobProgressions?.length\">\n    {{'SOCIAL.JOB.PROGRESSION.EMPTY' | translate}}\n  </ion-item>\n  <ion-item *ngFor=\"let jobProgression of jobProgressions\" class=\"ion-item-job-progression\">\n    <ion-grid class=\"ion-no-margin\">\n      <ion-row class=\"name\">\n        <ion-col>\n          {{jobProgression.name}}\n        </ion-col>\n      </ion-row>\n      <ion-row class=\"message\">\n        <ion-col>\n          {{jobProgression.message}}\n        </ion-col>\n      </ion-row>\n      <ion-row class=\"progress-bar\">\n        <ion-col>\n          <ion-progress-bar\n            [value]=\"jobProgression.total > 0 ? jobProgression.current / jobProgression.total : undefined\"\n            [type]=\"jobProgression.total > 0 ? 'determinate' : 'indeterminate'\">\n          </ion-progress-bar>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </ion-item>\n\n</ion-list>\n",
+                styles: [":host(.popover-viewport){overflow-y:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ion-item-job-progression{font-size:.9em}.ion-item-job-progression .message{font-style:italic}.ion-item-job-progression .progress-bar{margin-top:5px;margin-bottom:5px}"]
+            },] }
+];
+JobProgressionList.ctorParameters = () => [];
+JobProgressionList.propDecorators = {
+    titleI18n: [{ type: Input }],
+    jobProgressions: [{ type: Input }]
+};
+class JobProgressionComponent {
+    constructor(jobProgressionService, popoverController, cd) {
+        this.jobProgressionService = jobProgressionService;
+        this.popoverController = popoverController;
+        this.cd = cd;
+        this.debug = false;
+        this.titleI18n = 'SOCIAL.JOB.PROGRESSION.TITLE';
+        this.jobFinished = new EventEmitter();
+        this.disabled = true;
+        this.color = 'accent';
+        this.mode = 'determinate';
+        this.value = 0;
+        this.jobProgressions = [];
+        this._subscriptions = new Subscription();
+        this._subscriptionsById = {};
+        this._logPrefix = '[job-progression] ';
+    }
+    ngOnInit() {
+        var _a, _b, _c, _d;
+        if (isNil(this.jobProgressionService)) {
+            console.warn(`${this._logPrefix}No service injected`);
+        }
+        // parse options
+        this.autoHide = toBoolean((_a = this.options) === null || _a === void 0 ? void 0 : _a.autoHide, false);
+        this.visible = !this.autoHide;
+        this.autoHideDelay = toNumber((_b = this.options) === null || _b === void 0 ? void 0 : _b.autoHideDelay, 1000);
+        this.autoRemove = toBoolean((_c = this.options) === null || _c === void 0 ? void 0 : _c.autoRemove, true);
+        this.autoRemoveDelay = toNumber((_d = this.options) === null || _d === void 0 ? void 0 : _d.autoRemoveDelay, 1000);
+    }
+    addJob(id) {
+        if (isNil(this.jobProgressionService)) {
+            console.warn(`${this._logPrefix}No service injected. Can't add a job`);
+            return;
+        }
+        if (!!this.getProgression(id)) {
+            console.warn(`${this._logPrefix}Job (id=${id}) already present`);
+            return;
+        }
+        if (this.debug) {
+            console.debug(`${this._logPrefix}Add job id=${id}`);
+        }
+        // Adding empty job progression
+        const progression = new JobProgression(id);
+        this.jobProgressions.push(progression);
+        this.disabled = false;
+        const sub = this.jobProgressionService.listenChanges(id)
+            .pipe(filter(progression => {
+            if (id !== progression.id) {
+                console.error(`${this._logPrefix}Job progression (id=${progression.id}) doesn't match expected job (id=${id})`);
+                return false;
+            }
+            return true;
+        }), map(progression => {
+            // Ensure visible
+            this.visible = true;
+            // Get current progression object
+            const currentProgression = this.getProgression(id);
+            if (!currentProgression) {
+                // add it if absent
+                this.jobProgressions.push(progression);
+                if (this.debug) {
+                    console.debug(`${this._logPrefix}Progression added id=${id}`, progression);
+                }
+            }
+            else {
+                // update current
+                Object.assign(currentProgression, progression);
+                if (this.debug) {
+                    console.debug(`${this._logPrefix}Progression updated id=${id}`, progression);
+                }
+            }
+            return progression;
+        }))
+            .subscribe(progression => {
+            // update value
+            this.updateValue();
+            // job finished
+            if (progression.total > 0 && progression.current == progression.total) {
+                if (this.debug) {
+                    console.debug(`${this._logPrefix}Finished job id=${progression.id}`);
+                }
+                // emit event
+                this.jobFinished.emit(progression.id);
+                if (this.autoRemove) {
+                    setTimeout(() => {
+                        var _a;
+                        this.removeJob(progression.id);
+                        // If last job
+                        if (this.autoHide && !((_a = this.jobProgressions) === null || _a === void 0 ? void 0 : _a.length)) {
+                            setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+                                var _b;
+                                (_b = this._listPopover) === null || _b === void 0 ? void 0 : _b.dismiss();
+                                this.visible = false;
+                                this.markForCheck();
+                            }), this.autoHideDelay);
+                        }
+                    }, this.autoRemoveDelay);
+                }
+            }
+        });
+        this._subscriptionsById[id] = sub;
+        this._subscriptions.add(sub);
+    }
+    removeJob(id) {
+        if (this.debug) {
+            console.debug(`${this._logPrefix}Remove job id=${id}`);
+        }
+        const sub = this._subscriptionsById[id];
+        if (sub) {
+            this._subscriptions.remove(sub);
+            sub.unsubscribe();
+        }
+        const progression = this.getProgression(id);
+        if (progression) {
+            this.jobProgressions.splice(this.jobProgressions.indexOf(progression), 1);
+        }
+        this.updateValue();
+    }
+    getProgression(id) {
+        return this.jobProgressions.find(progression => progression.id === id);
+    }
+    updateValue() {
+        if (this.debug) {
+            console.debug(`${this._logPrefix}Updating value`);
+        }
+        let value = 0;
+        const nbProgression = arraySize(this.jobProgressions);
+        let allIndeterminate = nbProgression > 0;
+        this.jobProgressions.forEach(progression => {
+            const indeterminate = progression.total === 0;
+            allIndeterminate = allIndeterminate && indeterminate;
+            if (!indeterminate) {
+                value = value + progression.current * 100 / progression.total;
+            }
+        });
+        this.value = nbProgression > 0 ? value / nbProgression : 0;
+        this.mode = allIndeterminate ? 'indeterminate' : 'determinate';
+        if (this.debug) {
+            console.debug(`${this._logPrefix}Setting value=${this.value}, mode=${this.mode}`);
+        }
+        this.markForCheck();
+    }
+    showList(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._listPopover = yield this.popoverController.create({
+                component: JobProgressionList,
+                componentProps: {
+                    titleI18n: this.titleI18n,
+                    jobProgressions: this.jobProgressions
+                },
+                backdropDismiss: true,
+                keyboardClose: true,
+                event,
+                translucent: true,
+                cssClass: 'popover-large'
+            });
+            yield this._listPopover.present();
+            yield this._listPopover.onDidDismiss();
+            this._listPopover = undefined;
+        });
+    }
+    markForCheck() {
+        this.cd.markForCheck();
+    }
+    ngOnDestroy() {
+        if (this.debug) {
+            console.debug(`${this._logPrefix}Destroying`);
+        }
+        this._subscriptions.unsubscribe();
+    }
+}
+JobProgressionComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-job-progression',
+                template: "<button\n  #button\n  mat-icon-button\n  [title]=\"titleI18n | translate\"\n  [disabled]=\"disabled\"\n  *ngIf=\"visible\"\n  (click)=\"showList($event)\"\n>\n  <mat-icon\n    [matBadge]=\"jobProgressions?.length\"\n    [matBadgeHidden]=\"!jobProgressions?.length\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n  >{{ disabled || jobProgressions?.length ? 'schedule' : 'task_alt' }}\n  </mat-icon>\n  <mat-spinner\n    #spinner\n    *ngIf=\"jobProgressions?.length\"\n    class=\"floating-spinner\"\n    [color]=\"color\"\n    [mode]=\"mode\"\n    [value]=\"value\"\n    diameter=\"30\"\n    strokeWidth=\"3\"\n  ></mat-spinner>\n</button>\n\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [".floating-spinner{position:absolute;top:6px;left:5px}"]
+            },] }
+];
+JobProgressionComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [JobProgressionServiceToken,] }] },
+    { type: PopoverController },
+    { type: ChangeDetectorRef }
+];
+JobProgressionComponent.propDecorators = {
+    debug: [{ type: Input }],
+    titleI18n: [{ type: Input }],
+    options: [{ type: Input }],
+    jobFinished: [{ type: Output }]
+};
+class JobModule {
+}
+JobModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    SharedModule,
+                    TranslateModule.forChild(),
+                ],
+                declarations: [
+                    JobProgressionComponent,
+                    JobProgressionList
+                ],
+                exports: [
+                    JobProgressionComponent
+                ]
+            },] }
+];
+const SocialModuleOptionsToken = new InjectionToken("SocialModuleOptions");
+class SocialModule {
+}
+SocialModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoreModule,
+                    SharedModule,
+                    UserEventModule,
+                    JobModule,
+                    MessageModule,
+                ],
+            },] }
+];
 const Mutations = {
     send: gql `mutation SendMessage($data: MessageVOInput){
     done: sendMessage(message: $data)
@@ -27511,13 +28385,13 @@ LatLongTestPage.ctorParameters = () => [
     { type: FormBuilder }
 ];
-const moment$6 = momentImported;
+const moment$7 = momentImported;
 class SwipeTestPage {
     constructor(formBuilder, dateFormatPipe) {
         this.formBuilder = formBuilder;
         this.dateFormatPipe = dateFormatPipe;
         this.$dates = new BehaviorSubject(undefined);
-        this._today = moment$6().startOf('day');
+        this._today = moment$7().startOf('day');
         this.form = formBuilder.group({
             empty: [null, Validators.required],
             date: [null, Validators.compose([Validators.required, SharedValidators.validDate])],
@@ -27530,7 +28404,7 @@ class SwipeTestPage {
     ngOnInit() {
         const dates = [];
         for (let d = 0; d < 7; d++) {
-            dates[d] = moment$6(this._today).add(d - 3, 'day');
+            dates[d] = moment$7(this._today).add(d - 3, 'day');
         }
         this.$dates.next(dates);
         this.loadData();
@@ -27571,7 +28445,7 @@ SwipeTestPage.ctorParameters = () => [
     { type: DateFormatPipe }
 ];
-const moment$7 = momentImported;
+const moment$8 = momentImported;
 class DateTimeTestPage {
     constructor(platform, formBuilder, cd) {
         this.platform = platform;
@@ -27603,7 +28477,7 @@ class DateTimeTestPage {
     // Load the form with data
     loadData() {
         return __awaiter(this, void 0, void 0, function* () {
-            const now = moment$7();
+            const now = moment$8();
             const data = {
                 empty: null,
                 emptyRequired: null,
@@ -27849,7 +28723,7 @@ NumpadTestPage.ctorParameters = () => [
     { type: FormBuilder }
 ];
-const moment$8 = momentImported;
+const moment$9 = momentImported;
 class DateTestPage {
     constructor(formBuilder, cd) {
         this.formBuilder = formBuilder;
@@ -27882,7 +28756,7 @@ class DateTestPage {
     // Load the form with data
     loadData() {
         return __awaiter(this, void 0, void 0, function* () {
-            const now = moment$8();
+            const now = moment$9();
             const nowAtMahe = now.clone().tz(this.timezone).startOf('day');
             const data = {
                 empty: null,
@@ -28628,5 +29502,5 @@ CoreTestingModule.decorators = [
  * Generated bundle index. Do not edit.
  */
-export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_MENU_ITEMS, APP_TESTING_PAGES, AboutModal, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, Alerts, AndroidOsEnvironment, AnimationState, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppForm, AppFormField, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppInMemoryTable, AppInstallUpgradeCard, AppListForm, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppTabEditor, AppTabEditorOptions, AppTable, AppTableDataSourceOptions, AppTableUtils, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayLengthPipe, ArrayPluckPipe, AudioProvider, AuthForm, AuthGuardService, AuthModal, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFromNowPipe, DateTimeTestPage, DateUtils, Department, DepartmentToStringPipe, DragAndDropDirective, DurationPipe, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesService, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, Fragments$1 as Fragments, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNotNilOrBlankPipe, IsNotOnFieldModePipe, IsOnFieldModePipe, JobUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatBadgeIconDirective, MatBooleanField, MatChipsField, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItems, MenuService, Message, MessageFilter, MessageForm, MessageModal, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NetworkService, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, OddPipe, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialUtils, ReferentialValidatorService, RegisterConfirmPage, ResizableComponent, ResizableDirective, ResizableModule, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBadgeIconModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedValidators, SocialErrorCodes, SocialModule, Software, StartableService, StatusById, StatusIds, StatusList, StrIncludesPipe, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TextForm, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ToStringPipe, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UserEvent, UserEventFilter, UserEventFragments, UserEventService, UserEventTypes, UserEventsTable, UserSettings, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, isAndroid, isBlankString, isControlHasInput, isCordova, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isProgressEvent, isResponseEvent, isTouchUi, isWindows, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moment$5 as moment, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, tz, uncapitalizeFirstLetter, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending, ɵ0, CustomReuseStrategy as ɵa, MatNumpadDomService as ɵb, isFocusableElement as ɵc, RegisterForm as ɵd, AccountValidatorService as ɵe, RegisterModal as ɵf, UserSettingsValidatorService as ɵg, LocalSettingsValidatorService as ɵh, AppUpdateOfflineModeCard as ɵi, AppIconComponent as ɵj, DateTestPage as ɵk, NumpadTestPage as ɵl, MatBadgeIconTestPage as ɵm, ToastTestingModule as ɵn, ToastTestingPage as ɵo };
+export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_MENU_ITEMS, APP_TESTING_PAGES, AboutModal, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, Alerts, AndroidOsEnvironment, AnimationState, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppForm, AppFormField, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppInMemoryTable, AppInstallUpgradeCard, AppListForm, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppTabEditor, AppTabEditorOptions, AppTable, AppTableDataSourceOptions, AppTableUtils, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayLengthPipe, ArrayPluckPipe, AudioProvider, AuthForm, AuthGuardService, AuthModal, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFromNowPipe, DateTimeTestPage, DateUtils, Department, DepartmentToStringPipe, DragAndDropDirective, DurationPipe, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesService, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, Fragments$1 as Fragments, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNotNilOrBlankPipe, IsNotOnFieldModePipe, IsOnFieldModePipe, Job, JobModule, JobProgression, JobProgressionComponent, JobProgressionService, JobProgressionServiceToken, JobUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatBadgeIconDirective, MatBooleanField, MatChipsField, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItems, MenuService, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NetworkService, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, OddPipe, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialUtils, ReferentialValidatorService, RegisterConfirmPage, ResizableComponent, ResizableDirective, ResizableModule, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBadgeIconModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, Software, StartableService, StatusById, StatusIds, StatusList, StrIncludesPipe, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TextForm, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ToStringPipe, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UserEvent, UserEventFilter, UserEventFragments, UserEventModule, UserEventNotificationComponent, UserEventService, UserEventServiceToken, UserEventTypes, UserEventsTable, UserSettings, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, isAndroid, isBlankString, isControlHasInput, isCordova, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isProgressEvent, isResponseEvent, isTouchUi, isWindows, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moment$5 as moment, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, tz, uncapitalizeFirstLetter, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending, ɵ0, CustomReuseStrategy as ɵa, MatNumpadDomService as ɵb, isFocusableElement as ɵc, RegisterForm as ɵd, AccountValidatorService as ɵe, RegisterModal as ɵf, UserSettingsValidatorService as ɵg, LocalSettingsValidatorService as ɵh, AppUpdateOfflineModeCard as ɵi, AppIconComponent as ɵj, UserEventNotificationList as ɵk, UserEventTestService as ɵl, JobProgressionList as ɵm, DateTestPage as ɵn, NumpadTestPage as ɵo, MatBadgeIconTestPage as ɵp, ToastTestingModule as ɵq, ToastTestingPage as ɵr };
 //# sourceMappingURL=sumaris-net.ngx-components.js.map