@sumaris-net/ngx-components 1.22.11-rc7 → 1.22.12-rc1

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/table'), require('@angular/cdk/a11y'), require('@angular/cdk/overlay'), require('@angular/cdk/scrolling'), require('@angular/material/core'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/checkbox'), require('@angular/material/expansion'), require('@angular/material/toolbar'), require('@angular/material/icon'), require('@angular/material/button'), require('@angular/material/menu'), require('@angular/material/select'), require('@angular/material/card'), require('@angular/material/tabs'), require('@angular/material/stepper'), require('@angular/material/list'), require('@angular/material/button-toggle'), require('@angular/material/progress-spinner'), require('@angular/material/progress-bar'), require('@angular/material/radio'), require('@angular/material/badge'), require('@angular/material/slide-toggle'), require('@angular/material/dialog'), require('@angular/material/autocomplete'), require('@angular/forms'), require('rxjs'), require('rxjs/operators'), require('@angular/animations'), require('@ngx-translate/core'), require('@ionic/angular'), require('moment'), require('@angular/material-moment-adapter'), require('@ionic-native/keyboard/ngx'), require('angular2-text-mask'), require('ngx-material-timepicker'), require('@angular/material/datepicker'), require('@angular/material/divider'), require('@angular/material/tooltip'), require('@angular/material/chips'), require('@angular/router'), require('@angular/platform-browser'), require('@angular/common/http'), require('ngx-color-picker'), require('@ionic-native/native-audio/ngx'), require('@ionic-native/vibration/ngx'), require('@ionic-native/audio-management/ngx'), require('@ionic-native/native-audio/ngx/index'), require('@ionic-native/vibration/ngx/index'), require('@ionic-native/audio-management/ngx/index'), require('uuid/v4'), require('@angular/cdk/drag-drop'), require('ngx-markdown'), require('tweetnacl'), require('@ionic/storage'), require('zone.js/dist/zone-error'), require('@ionic-native/splash-screen/ngx'), require('@ionic-native/network/ngx'), require('ionic-cache'), require('ionic-cache/dist/cache.service'), require('@ionic-native/network/ngx/index'), require('@ionic-native/splash-screen/ngx/index'), require('@ionic-native/status-bar/ngx'), require('@angular/cdk/platform'), require('@ionic-native/in-app-browser/ngx'), require('@apollo/client/core'), require('apollo-angular'), require('@apollo/client/link/ws'), require('@apollo/client/utilities'), require('@apollo/client/link/retry'), require('apollo-link-queue'), require('apollo-link-serialize'), require('apollo-link-logger'), require('apollo-angular/http'), require('apollo3-cache-persist'), require('@ionic-native/downloader/ngx'), require('@ionic-native/status-bar/ngx/index'), require('@ionic-native/keyboard/ngx/index'), require('@ionic-native/in-app-browser/ngx/index'), require('@ionic-native/downloader/ngx/index'), require('@angular/cdk/text-field'), require('@e-is/ngx-material-table'), require('@angular/cdk/collections'), require('ngx-jdenticon'), require('tweetnacl-util'), require('scrypt-async'), require('hammerjs'), require('moment-timezone')) :
-    typeof define === 'function' && define.amd ? define('@sumaris-net/ngx-components', ['exports', '@angular/core', '@angular/common', '@angular/cdk/table', '@angular/cdk/a11y', '@angular/cdk/overlay', '@angular/cdk/scrolling', '@angular/material/core', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/material/form-field', '@angular/material/input', '@angular/material/checkbox', '@angular/material/expansion', '@angular/material/toolbar', '@angular/material/icon', '@angular/material/button', '@angular/material/menu', '@angular/material/select', '@angular/material/card', '@angular/material/tabs', '@angular/material/stepper', '@angular/material/list', '@angular/material/button-toggle', '@angular/material/progress-spinner', '@angular/material/progress-bar', '@angular/material/radio', '@angular/material/badge', '@angular/material/slide-toggle', '@angular/material/dialog', '@angular/material/autocomplete', '@angular/forms', 'rxjs', 'rxjs/operators', '@angular/animations', '@ngx-translate/core', '@ionic/angular', 'moment', '@angular/material-moment-adapter', '@ionic-native/keyboard/ngx', 'angular2-text-mask', 'ngx-material-timepicker', '@angular/material/datepicker', '@angular/material/divider', '@angular/material/tooltip', '@angular/material/chips', '@angular/router', '@angular/platform-browser', '@angular/common/http', 'ngx-color-picker', '@ionic-native/native-audio/ngx', '@ionic-native/vibration/ngx', '@ionic-native/audio-management/ngx', '@ionic-native/native-audio/ngx/index', '@ionic-native/vibration/ngx/index', '@ionic-native/audio-management/ngx/index', 'uuid/v4', '@angular/cdk/drag-drop', 'ngx-markdown', 'tweetnacl', '@ionic/storage', 'zone.js/dist/zone-error', '@ionic-native/splash-screen/ngx', '@ionic-native/network/ngx', 'ionic-cache', 'ionic-cache/dist/cache.service', '@ionic-native/network/ngx/index', '@ionic-native/splash-screen/ngx/index', '@ionic-native/status-bar/ngx', '@angular/cdk/platform', '@ionic-native/in-app-browser/ngx', '@apollo/client/core', 'apollo-angular', '@apollo/client/link/ws', '@apollo/client/utilities', '@apollo/client/link/retry', 'apollo-link-queue', 'apollo-link-serialize', 'apollo-link-logger', 'apollo-angular/http', 'apollo3-cache-persist', '@ionic-native/downloader/ngx', '@ionic-native/status-bar/ngx/index', '@ionic-native/keyboard/ngx/index', '@ionic-native/in-app-browser/ngx/index', '@ionic-native/downloader/ngx/index', '@angular/cdk/text-field', '@e-is/ngx-material-table', '@angular/cdk/collections', 'ngx-jdenticon', 'tweetnacl-util', 'scrypt-async', 'hammerjs', 'moment-timezone'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sumaris-net'] = global['sumaris-net'] || {}, global['sumaris-net']['ngx-components'] = {}), global.ng.core, global.ng.common, global.ng.cdk.table, global.ng.cdk.a11y, global.ng.cdk.overlay, global.ng.cdk.scrolling, global.ng.material.core, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.material.formField, global.ng.material.input, global.ng.material.checkbox, global.ng.material.expansion, global.ng.material.toolbar, global.ng.material.icon, global.ng.material.button, global.ng.material.menu, global.ng.material.select, global.ng.material.card, global.ng.material.tabs, global.ng.material.stepper, global.ng.material.list, global.ng.material.buttonToggle, global.ng.material.progressSpinner, global.ng.material.progressBar, global.ng.material.radio, global.ng.material.badge, global.ng.material.slideToggle, global.ng.material.dialog, global.ng.material.autocomplete, global.ng.forms, global.rxjs, global.rxjs.operators, global.ng.animations, global['ngx-translate'].core, global.ionic.angular, global.moment, global.ng.materialMomentAdapter, global['ionic-native'].keyboard.ngx, global['angular2-text-mask'], global['ngx-material-timepicker'], global.ng.material.datepicker, global.ng.material.divider, global.ng.material.tooltip, global.ng.material.chips, global.ng.router, global.ng.platformBrowser, global.ng.common.http, global['ngx-color-picker'], global['ionic-native']['native-audio'].ngx, global['ionic-native'].vibration.ngx, global['ionic-native']['audio-management'].ngx, global['ionic-native']['native-audio'].ngx.index, global['ionic-native'].vibration.ngx.index, global['ionic-native']['audio-management'].ngx.index, global.uuid.v4, global.ng.cdk.dragDrop, global['ngx-markdown'], global.tweetnacl, global.ionic.storage, null, global['ionic-native']['splash-screen'].ngx, global['ionic-native'].network.ngx, global['ionic-cache'], global['ionic-cache/dist/cache'].service, global['ionic-native'].network.ngx.index, global['ionic-native']['splash-screen'].ngx.index, global['ionic-native']['status-bar'].ngx, global.ng.cdk.platform, global['ionic-native']['in-app-browser'].ngx, global.apollo.client.core, global['apollo-angular'], global.apollo.client.link.ws, global.apollo.client.utilities, global.apollo.client.link.retry, global['apollo-link-queue'], global['apollo-link-serialize'], global['apollo-link-logger'], global['apollo-angular'].http, global['apollo3-cache-persist'], global['ionic-native'].downloader.ngx, global['ionic-native']['status-bar'].ngx.index, global['ionic-native'].keyboard.ngx.index, global['ionic-native']['in-app-browser'].ngx.index, global['ionic-native'].downloader.ngx.index, global.ng.cdk.textField, global['e-is']['ngx-material-table'], global.ng.cdk.collections, global['ngx-jdenticon'], null, null, null, global['moment-timezone']));
-}(this, (function (exports, i0, i1$4, table$1, a11y, overlay, scrolling, i1$3, table, sort$1, paginator, formField, input, checkbox, expansion, toolbar, icon, button, menu, select, card, tabs, stepper, list, buttonToggle, progressSpinner, progressBar, radio, badge, slideToggle, i2, autocomplete, i1, rxjs, operators, animations, i1$2, i1$5, momentImported, i1$1, ngx, angular2TextMask, ngxMaterialTimepicker, datepicker, divider, tooltip, chips, i3, i1$6, i2$1, ngxColorPicker, ngx$2, ngx$3, ngx$1, i2$2, i3$1, i4, uuidv4Imported, dragDrop, ngxMarkdown, tweetnacl, i3$2, zoneError, ngx$5, ngx$4, ionicCache, i6, i9, i10, ngx$7, i2$4, ngx$8, core, i2$3, ws, utilities, retry, QueueLink, SerializingLink, loggerLink, i3$3, apollo3CachePersist, ngx$6, i14, i15, i17, i18, textField, ngxMaterialTable, collections, ngxJdenticon, tweetnaclUtil, scryptAsync, hammerjs, momentTZImported) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/table'), require('@angular/cdk/a11y'), require('@angular/cdk/overlay'), require('@angular/cdk/scrolling'), require('@angular/material/core'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/checkbox'), require('@angular/material/expansion'), require('@angular/material/toolbar'), require('@angular/material/icon'), require('@angular/material/button'), require('@angular/material/menu'), require('@angular/material/select'), require('@angular/material/card'), require('@angular/material/tabs'), require('@angular/material/stepper'), require('@angular/material/list'), require('@angular/material/button-toggle'), require('@angular/material/progress-spinner'), require('@angular/material/progress-bar'), require('@angular/material/radio'), require('@angular/material/badge'), require('@angular/material/slide-toggle'), require('@angular/material/dialog'), require('@angular/material/autocomplete'), require('@angular/forms'), require('rxjs'), require('rxjs/operators'), require('@angular/animations'), require('@ngx-translate/core'), require('@ionic/angular'), require('moment'), require('@angular/material-moment-adapter'), require('@ionic-native/keyboard/ngx'), require('angular2-text-mask'), require('ngx-material-timepicker'), require('@angular/material/datepicker'), require('@angular/material/divider'), require('@angular/material/tooltip'), require('@angular/material/chips'), require('@angular/router'), require('@angular/platform-browser'), require('@angular/common/http'), require('ngx-color-picker'), require('@ionic-native/native-audio/ngx'), require('@ionic-native/vibration/ngx'), require('@ionic-native/audio-management/ngx'), require('@ionic-native/native-audio/ngx/index'), require('@ionic-native/vibration/ngx/index'), require('@ionic-native/audio-management/ngx/index'), require('uuid/v4'), require('rxjs/internal/operators'), require('@angular/cdk/drag-drop'), require('ngx-markdown'), require('tweetnacl'), require('@ionic/storage'), require('zone.js/dist/zone-error'), require('@ionic-native/splash-screen/ngx'), require('@ionic-native/network/ngx'), require('ionic-cache'), require('ionic-cache/dist/cache.service'), require('@ionic-native/network/ngx/index'), require('@ionic-native/splash-screen/ngx/index'), require('@ionic-native/status-bar/ngx'), require('@angular/cdk/platform'), require('@ionic-native/in-app-browser/ngx'), require('@apollo/client/core'), require('apollo-angular'), require('@apollo/client/link/ws'), require('@apollo/client/utilities'), require('@apollo/client/link/retry'), require('apollo-link-queue'), require('apollo-link-serialize'), require('apollo-link-logger'), require('apollo-angular/http'), require('apollo3-cache-persist'), require('@ionic-native/downloader/ngx'), require('@ionic-native/status-bar/ngx/index'), require('@ionic-native/keyboard/ngx/index'), require('@ionic-native/in-app-browser/ngx/index'), require('@ionic-native/downloader/ngx/index'), require('@angular/cdk/text-field'), require('@e-is/ngx-material-table'), require('@angular/cdk/collections'), require('ngx-jdenticon'), require('tweetnacl-util'), require('scrypt-async'), require('hammerjs'), require('moment-timezone')) :
+    typeof define === 'function' && define.amd ? define('@sumaris-net/ngx-components', ['exports', '@angular/core', '@angular/common', '@angular/cdk/table', '@angular/cdk/a11y', '@angular/cdk/overlay', '@angular/cdk/scrolling', '@angular/material/core', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/material/form-field', '@angular/material/input', '@angular/material/checkbox', '@angular/material/expansion', '@angular/material/toolbar', '@angular/material/icon', '@angular/material/button', '@angular/material/menu', '@angular/material/select', '@angular/material/card', '@angular/material/tabs', '@angular/material/stepper', '@angular/material/list', '@angular/material/button-toggle', '@angular/material/progress-spinner', '@angular/material/progress-bar', '@angular/material/radio', '@angular/material/badge', '@angular/material/slide-toggle', '@angular/material/dialog', '@angular/material/autocomplete', '@angular/forms', 'rxjs', 'rxjs/operators', '@angular/animations', '@ngx-translate/core', '@ionic/angular', 'moment', '@angular/material-moment-adapter', '@ionic-native/keyboard/ngx', 'angular2-text-mask', 'ngx-material-timepicker', '@angular/material/datepicker', '@angular/material/divider', '@angular/material/tooltip', '@angular/material/chips', '@angular/router', '@angular/platform-browser', '@angular/common/http', 'ngx-color-picker', '@ionic-native/native-audio/ngx', '@ionic-native/vibration/ngx', '@ionic-native/audio-management/ngx', '@ionic-native/native-audio/ngx/index', '@ionic-native/vibration/ngx/index', '@ionic-native/audio-management/ngx/index', 'uuid/v4', 'rxjs/internal/operators', '@angular/cdk/drag-drop', 'ngx-markdown', 'tweetnacl', '@ionic/storage', 'zone.js/dist/zone-error', '@ionic-native/splash-screen/ngx', '@ionic-native/network/ngx', 'ionic-cache', 'ionic-cache/dist/cache.service', '@ionic-native/network/ngx/index', '@ionic-native/splash-screen/ngx/index', '@ionic-native/status-bar/ngx', '@angular/cdk/platform', '@ionic-native/in-app-browser/ngx', '@apollo/client/core', 'apollo-angular', '@apollo/client/link/ws', '@apollo/client/utilities', '@apollo/client/link/retry', 'apollo-link-queue', 'apollo-link-serialize', 'apollo-link-logger', 'apollo-angular/http', 'apollo3-cache-persist', '@ionic-native/downloader/ngx', '@ionic-native/status-bar/ngx/index', '@ionic-native/keyboard/ngx/index', '@ionic-native/in-app-browser/ngx/index', '@ionic-native/downloader/ngx/index', '@angular/cdk/text-field', '@e-is/ngx-material-table', '@angular/cdk/collections', 'ngx-jdenticon', 'tweetnacl-util', 'scrypt-async', 'hammerjs', 'moment-timezone'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sumaris-net'] = global['sumaris-net'] || {}, global['sumaris-net']['ngx-components'] = {}), global.ng.core, global.ng.common, global.ng.cdk.table, global.ng.cdk.a11y, global.ng.cdk.overlay, global.ng.cdk.scrolling, global.ng.material.core, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.material.formField, global.ng.material.input, global.ng.material.checkbox, global.ng.material.expansion, global.ng.material.toolbar, global.ng.material.icon, global.ng.material.button, global.ng.material.menu, global.ng.material.select, global.ng.material.card, global.ng.material.tabs, global.ng.material.stepper, global.ng.material.list, global.ng.material.buttonToggle, global.ng.material.progressSpinner, global.ng.material.progressBar, global.ng.material.radio, global.ng.material.badge, global.ng.material.slideToggle, global.ng.material.dialog, global.ng.material.autocomplete, global.ng.forms, global.rxjs, global.rxjs.operators, global.ng.animations, global['ngx-translate'].core, global.ionic.angular, global.moment, global.ng.materialMomentAdapter, global['ionic-native'].keyboard.ngx, global['angular2-text-mask'], global['ngx-material-timepicker'], global.ng.material.datepicker, global.ng.material.divider, global.ng.material.tooltip, global.ng.material.chips, global.ng.router, global.ng.platformBrowser, global.ng.common.http, global['ngx-color-picker'], global['ionic-native']['native-audio'].ngx, global['ionic-native'].vibration.ngx, global['ionic-native']['audio-management'].ngx, global['ionic-native']['native-audio'].ngx.index, global['ionic-native'].vibration.ngx.index, global['ionic-native']['audio-management'].ngx.index, global.uuid.v4, global.rxjs['internal/operators'], global.ng.cdk.dragDrop, global['ngx-markdown'], global.tweetnacl, global.ionic.storage, null, global['ionic-native']['splash-screen'].ngx, global['ionic-native'].network.ngx, global['ionic-cache'], global['ionic-cache/dist/cache'].service, global['ionic-native'].network.ngx.index, global['ionic-native']['splash-screen'].ngx.index, global['ionic-native']['status-bar'].ngx, global.ng.cdk.platform, global['ionic-native']['in-app-browser'].ngx, global.apollo.client.core, global['apollo-angular'], global.apollo.client.link.ws, global.apollo.client.utilities, global.apollo.client.link.retry, global['apollo-link-queue'], global['apollo-link-serialize'], global['apollo-link-logger'], global['apollo-angular'].http, global['apollo3-cache-persist'], global['ionic-native'].downloader.ngx, global['ionic-native']['status-bar'].ngx.index, global['ionic-native'].keyboard.ngx.index, global['ionic-native']['in-app-browser'].ngx.index, global['ionic-native'].downloader.ngx.index, global.ng.cdk.textField, global['e-is']['ngx-material-table'], global.ng.cdk.collections, global['ngx-jdenticon'], null, null, null, global['moment-timezone']));
+}(this, (function (exports, i0, i1$4, table$1, a11y, overlay, scrolling, i1$3, table, sort$1, paginator, formField, input, checkbox, expansion, toolbar, icon, button, menu, select, card, tabs, stepper, list, buttonToggle, progressSpinner, progressBar, radio, badge, slideToggle, i2, autocomplete, i1, rxjs, operators, animations, i1$2, i1$5, momentImported, i1$1, ngx, angular2TextMask, ngxMaterialTimepicker, datepicker, divider, tooltip, chips, i3, i1$6, i2$1, ngxColorPicker, ngx$2, ngx$3, ngx$1, i2$2, i3$1, i4, uuidv4Imported, operators$1, dragDrop, ngxMarkdown, tweetnacl, i3$2, zoneError, ngx$5, ngx$4, ionicCache, i6, i9, i10, ngx$7, i2$4, ngx$8, core, i2$3, ws, utilities, retry, QueueLink, SerializingLink, loggerLink, i3$3, apollo3CachePersist, ngx$6, i14, i15, i17, i18, textField, ngxMaterialTable, collections, ngxJdenticon, tweetnaclUtil, scryptAsync, hammerjs, momentTZImported) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -46,7 +46,7 @@
     var SPACE_PLACEHOLDER_CHAR = '\u2000';
     var KEYBOARD_HIDE_DELAY_MS = 250; // 1s
 
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -208,7 +208,11 @@
     var __createBinding = Object.create ? (function (o, m, k, k2) {
         if (k2 === undefined)
             k2 = k;
-        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+            desc = { enumerable: true, get: function () { return m[k]; } };
+        }
+        Object.defineProperty(o, k2, desc);
     }) : (function (o, m, k, k2) {
         if (k2 === undefined)
             k2 = k;
@@ -363,6 +367,11 @@
             throw new TypeError("Cannot write private member to an object whose class did not declare it");
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
+    function __classPrivateFieldIn(state, receiver) {
+        if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
+            throw new TypeError("Cannot use 'in' operator on non-object");
+        return typeof state === "function" ? receiver === state : state.has(receiver);
+    }
 
     function isNil(obj) {
         return obj === undefined || obj === null;
@@ -2803,6 +2812,7 @@
     var moment$1 = momentImported__namespace;
     var DATE_UNIX_TIMESTAMP = 'X';
     var DATE_UNIX_MS_TIMESTAMP = 'x';
+    var MOMENT_NO_TIME_PROPERTY = '_hasNoTime';
     var DateUtils = /** @class */ (function () {
         function DateUtils() {
         }
@@ -2840,6 +2850,12 @@
                 .tz(timezone, keepLocalTime)
                 .startOf('day');
         };
+        DateUtils.markNoTime = function (value) {
+            if (!value)
+                return undefined;
+            value[MOMENT_NO_TIME_PROPERTY] = true;
+            return value;
+        };
         /**
          * Test if a date is on the given day of week
          * @param date
@@ -6257,13 +6273,20 @@
                 var day = date.clone().startOf('day');
                 var dayStr = this.dateAdapter.format(day, this.dayPattern);
                 // Format time
-                // - Format hh
-                var hour = date.hour();
-                hour = hour < 10 ? ('0' + hour) : hour;
-                // - Format mm
-                var minutes = date.minutes();
-                minutes = minutes < 10 ? ('0' + minutes) : minutes;
-                var timeStr = hour + ":" + minutes;
+                var timeStr = void 0;
+                if (date[MOMENT_NO_TIME_PROPERTY] === true) {
+                    // Clear time
+                    timeStr = null;
+                }
+                else {
+                    // - Format hh
+                    var hour = date.hour();
+                    hour = hour < 10 ? ('0' + hour) : hour;
+                    // - Format mm
+                    var minutes = date.minutes();
+                    minutes = minutes < 10 ? ('0' + minutes) : minutes;
+                    timeStr = hour + ":" + minutes;
+                }
                 // Update controls
                 this.dayControl.patchValue(dayStr, { emitEvent: false });
                 this.hourControl.patchValue(timeStr, { emitEvent: false });
@@ -10553,44 +10576,97 @@
                 },] }
     ];
 
+    var UploadFile = /** @class */ (function (_super) {
+        __extends(UploadFile, _super);
+        function UploadFile() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return UploadFile;
+    }(File));
+    var FileResponse = /** @class */ (function () {
+        function FileResponse(init) {
+            this.type = i2$1.HttpEventType.Response;
+            this.body = isNotNil(init === null || init === void 0 ? void 0 : init.body) ? init.body : null;
+            this.status = (init === null || init === void 0 ? void 0 : init.status) || 0;
+            this.statusText = (init === null || init === void 0 ? void 0 : init.statusText) || 'OK';
+        }
+        return FileResponse;
+    }());
+    function isProgressEvent(event) {
+        return event && (event.type === i2$1.HttpEventType.UploadProgress
+            || event.type === i2$1.HttpEventType.DownloadProgress);
+    }
+    function isResponseEvent(event) {
+        return event && event.type === i2$1.HttpEventType.Response;
+    }
+
     var IMAGE_DEFAULTS = {
         MAX_HEIGHT: 480,
         MAX_WIDTH: 640,
         THUMB_MAX_HEIGHT: 200,
         THUMB_MAX_WIDTH: 200
     };
-    var Base64ImageReader = /** @class */ (function () {
-        function Base64ImageReader() {
+    // @dynamic
+    var ImagesUtils = /** @class */ (function () {
+        function ImagesUtils() {
         }
-        Base64ImageReader.prototype.readFromBlob = function (file) {
-            return __awaiter(this, void 0, void 0, function () {
-                var dataUrl;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!file)
-                                throw new Error('Illegal argument: missing file');
-                            return [4 /*yield*/, new Promise(function (resolve, reject) {
-                                    var reader = new FileReader();
-                                    reader.addEventListener('load', function (event) { return resolve(reader.result); }, false);
-                                    reader.readAsDataURL(file);
-                                })];
-                        case 1:
-                            dataUrl = _a.sent();
-                            return [2 /*return*/, dataUrl];
-                    }
-                });
-            });
+        ImagesUtils.readAsDataURL = function (file, opts) {
+            var _this = this;
+            var $progress = new rxjs.Subject();
+            var reader = new FileReader();
+            // Listen progress
+            reader.onprogress = function (e) {
+                var total = e.total || 1;
+                var loaded = e.total || 0;
+                if (loaded < total)
+                    $progress.next({ type: i2$1.HttpEventType.UploadProgress, loaded: loaded, total: total });
+            };
+            // Listen end
+            reader.onloadend = function (e) {
+                var body = reader.result;
+                if (typeof body === 'string') {
+                    $progress.next(new FileResponse({ body: body }));
+                    $progress.complete();
+                }
+                else {
+                    console.error("[image-utils] Cannot read file '" + file.name + "' as text");
+                    $progress.error("Cannot read file as text");
+                }
+            };
+            // Listen error
+            reader.onerror = function (event) {
+                console.error('[image-utils] Error while reading file:', event);
+                $progress.error(event);
+            };
+            // Start reading the file
+            reader.readAsDataURL(file);
+            // Resize image, if need
+            if (opts) {
+                return $progress.pipe(operators$1.mergeMap(function (event) { return __awaiter(_this, void 0, void 0, function () {
+                    var body;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                if (!(event instanceof FileResponse)) return [3 /*break*/, 2];
+                                return [4 /*yield*/, ImagesUtils.resizeBase64(event.body, opts)];
+                            case 1:
+                                body = _a.sent();
+                                return [2 /*return*/, new FileResponse({ body: body })];
+                            case 2: return [2 /*return*/, event];
+                        }
+                    });
+                }); }));
+            }
+            return $progress.asObservable();
         };
-        Base64ImageReader.prototype.readAndResizeFromUrl = function (path, opts) {
+        ImagesUtils.readAndResizeFromUrl = function (fileUrl, opts) {
             return __awaiter(this, void 0, void 0, function () {
                 var img, err_1;
-                var _this = this;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            if (isNilOrBlank(path))
-                                throw new Error('Illegal argument: missing path');
+                            if (isNilOrBlank(fileUrl))
+                                throw new Error('Illegal argument: missing fileUrl');
                             img = document.createElement('img');
                             // Need to avoid CORS error
                             // (see https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported)
@@ -10599,14 +10675,14 @@
                         case 1:
                             _a.trys.push([1, 3, 4, 5]);
                             return [4 /*yield*/, new Promise(function (resolve, reject) {
-                                    img.addEventListener('load', _this.createImageOnLoadResizeFn(resolve, reject, opts), false);
+                                    img.addEventListener('load', ImagesUtils.createImageOnLoadResizeFn(resolve, reject, opts), false);
                                     img.addEventListener('error', reject);
-                                    img.src = path;
+                                    img.src = fileUrl;
                                 })];
                         case 2: return [2 /*return*/, _a.sent()];
                         case 3:
                             err_1 = _a.sent();
-                            throw new Error("Failed to load and resize image {" + path + "}");
+                            throw new Error("Failed to load and resize image {" + fileUrl + "}");
                         case 4:
                             img.remove();
                             return [7 /*endfinally*/];
@@ -10615,15 +10691,12 @@
                 });
             });
         };
-        Base64ImageReader.prototype.readAndResizeFromBlob = function (file, opts) {
+        ImagesUtils.resizeBase64 = function (dataUrl, opts) {
             return __awaiter(this, void 0, void 0, function () {
                 var img;
-                var _this = this;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            if (!file)
-                                throw new Error('Illegal argument: missing file');
                             img = document.createElement('img');
                             // Need to avoid CORS error
                             // (see https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported)
@@ -10632,13 +10705,9 @@
                         case 1:
                             _a.trys.push([1, , 3, 4]);
                             return [4 /*yield*/, new Promise(function (resolve, reject) {
-                                    var reader = new FileReader();
-                                    reader.addEventListener('load', function (event) {
-                                        // Resize image
-                                        img.onload = _this.createImageOnLoadResizeFn(resolve, reject, opts);
-                                        img.src = reader.result;
-                                    }, false);
-                                    reader.readAsDataURL(file);
+                                    img.addEventListener('load', ImagesUtils.createImageOnLoadResizeFn(resolve, reject, opts), false);
+                                    img.addEventListener('error', reject);
+                                    img.src = dataUrl;
                                 })];
                         case 2: return [2 /*return*/, _a.sent()];
                         case 3:
@@ -10649,8 +10718,7 @@
                 });
             });
         };
-        /* -- protected methods -- */
-        Base64ImageReader.prototype.createImageOnLoadResizeFn = function (resolve, reject, opts) {
+        ImagesUtils.createImageOnLoadResizeFn = function (resolve, reject, opts) {
             return function (event) {
                 var maxWidth = (opts && opts.thumbnail ? IMAGE_DEFAULTS.THUMB_MAX_WIDTH : (opts && opts.maxWidth || IMAGE_DEFAULTS.MAX_WIDTH));
                 var maxHeight = (opts && opts.thumbnail ? IMAGE_DEFAULTS.THUMB_MAX_HEIGHT : (opts && opts.maxHeight || IMAGE_DEFAULTS.MAX_HEIGHT));
@@ -10716,7 +10784,7 @@
                 }
             };
         };
-        return Base64ImageReader;
+        return ImagesUtils;
     }());
 
     var uuidv4 = uuidv4Imported__namespace;
@@ -10751,28 +10819,28 @@
             var jobsFactories = (sources || []).map(function (source) { return function () { return _this.getImage(source, Object.assign({}, opts)); }; });
             return chainPromises(jobsFactories);
         };
-        FileService.prototype.getImage = function (source, opts) {
+        FileService.prototype.getImage = function (fileUrl, opts) {
             return __awaiter(this, void 0, void 0, function () {
-                var responseType, debug, now, lastSlashIndex, fileName, targetFilePath, blob, err_1, dataUrl;
+                var outputType, debug, now, lastSlashIndex, fileName, targetFilePath, blob, err_1, dataUrl;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            responseType = opts && opts.responseType || (this.canUseFileSystem ? 'file' : 'dataUrl');
+                            outputType = opts && opts.outputType || (this.canUseFileSystem ? 'fileUrl' : 'dataUrl');
                             debug = this._debug /*&& (!opts || !opts.fileTransfer)*/;
                             now = debug && Date.now();
                             if (debug)
-                                console.debug("[file] Fetching image {" + source + "} into " + responseType + "...");
-                            lastSlashIndex = source.lastIndexOf('/');
+                                console.debug("[file] Fetching image {" + fileUrl + "} into " + outputType + "...");
+                            lastSlashIndex = fileUrl.lastIndexOf('/');
                             if (lastSlashIndex === -1)
-                                throw new Error('Invalid URL: ' + source);
-                            fileName = lastSlashIndex < (source.length - 1) && source.substring(lastSlashIndex + 1) || uuidv4();
-                            if (!(responseType === 'file' && this.canUseFileSystem)) return [3 /*break*/, 4];
-                            console.warn("WARN: [file] Fetching image {" + source + "} in local file...");
+                                throw new Error('Invalid URL: ' + fileUrl);
+                            fileName = lastSlashIndex < (fileUrl.length - 1) && fileUrl.substring(lastSlashIndex + 1) || uuidv4();
+                            if (!(outputType === 'fileUrl' && this.canUseFileSystem)) return [3 /*break*/, 4];
+                            console.warn("WARN: [file] Downloading image {" + fileUrl + "} in local filesystem...");
                             targetFilePath = this._imageDirectory + fileName;
                             _a.label = 1;
                         case 1:
                             _a.trys.push([1, 3, , 4]);
-                            return [4 /*yield*/, firstNotNilPromise(this.http.get(source, {
+                            return [4 /*yield*/, firstNotNilPromise(this.http.get(fileUrl, {
                                     observe: 'body',
                                     responseType: 'blob',
                                     reportProgress: false
@@ -10784,25 +10852,25 @@
                             //const fileTransfer = (opts && opts.fileTransfer) || this.transfer.create();
                             //await fileTransfer.download(source, targetFilePath);
                             if (debug)
-                                console.debug("[file] Fetching image {" + source + "} into " + responseType + " [OK] in " + (Date.now() - now) + "ms");
+                                console.debug("[file] Fetching image {" + fileUrl + "} into " + outputType + " [OK] in " + (Date.now() - now) + "ms");
                             return [2 /*return*/, targetFilePath];
                         case 3:
                             err_1 = _a.sent();
-                            console.error("[file] Error while download " + source + ": " + (err_1 && err_1.message || err_1));
+                            console.error("[file] Error while download " + fileUrl + ": " + (err_1 && err_1.message || err_1));
                             // Continue (fallback to data Url)
-                            responseType = 'dataUrl';
+                            outputType = 'dataUrl';
                             return [3 /*break*/, 4];
                         case 4:
-                            if (!(responseType === 'dataUrl')) return [3 /*break*/, 6];
-                            return [4 /*yield*/, new Base64ImageReader().readAndResizeFromUrl(source, opts)];
+                            if (!(outputType === 'dataUrl')) return [3 /*break*/, 6];
+                            return [4 /*yield*/, ImagesUtils.readAndResizeFromUrl(fileUrl, opts)];
                         case 5:
                             dataUrl = _a.sent();
                             if (debug)
-                                console.debug("[file] Fetching image {" + source + "} into " + responseType + " [OK] in " + (Date.now() - now) + "ms");
+                                console.debug("[file] Fetching image {" + fileUrl + "} into " + outputType + " [OK] in " + (Date.now() - now) + "ms");
                             return [2 /*return*/, dataUrl];
                         case 6: 
                         // Keep original URL
-                        return [2 /*return*/, source];
+                        return [2 /*return*/, fileUrl];
                     }
                 });
             });
@@ -15009,7 +15077,9 @@
             return expectedProfileIndex !== -1 && PersonUtils.getMainProfileIndex(actualProfiles) <= expectedProfileIndex;
         };
         PersonUtils.personToString = function (obj) {
-            return obj && obj.id && (obj.lastName + ' ' + obj.firstName) || undefined;
+            if (!obj || !obj.id)
+                return undefined;
+            return obj.lastName + ' ' + obj.firstName;
         };
         PersonUtils.personsToString = function (data, separator) {
             return (data || []).map(PersonUtils.personToString).join(separator || ', ');
@@ -17182,7 +17252,7 @@
                             if (!(hasAvatarUrl && this.network.online)) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.file.getImage(json.avatar, {
                                     thumbnail: true,
-                                    responseType: 'dataUrl'
+                                    outputType: 'dataUrl'
                                 })
                                     .then(function (dataUrl) {
                                     if (dataUrl && _this._debug)
@@ -18157,30 +18227,6 @@
     ]; };
     var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
 
-    var UploadFile = /** @class */ (function (_super) {
-        __extends(UploadFile, _super);
-        function UploadFile() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return UploadFile;
-    }(File));
-    var FileResponse = /** @class */ (function () {
-        function FileResponse(init) {
-            this.type = i2$1.HttpEventType.Response;
-            this.body = isNotNil(init === null || init === void 0 ? void 0 : init.body) ? init.body : null;
-            this.status = (init === null || init === void 0 ? void 0 : init.status) || 0;
-            this.statusText = (init === null || init === void 0 ? void 0 : init.statusText) || 'OK';
-        }
-        return FileResponse;
-    }());
-    function isProgressEvent(event) {
-        return event && (event.type === i2$1.HttpEventType.UploadProgress
-            || event.type === i2$1.HttpEventType.DownloadProgress);
-    }
-    function isResponseEvent(event) {
-        return event && event.type === i2$1.HttpEventType.Response;
-    }
-
     var UploadFilePopover = /** @class */ (function () {
         function UploadFilePopover(popoverController, translate, cd) {
             this.popoverController = popoverController;
@@ -24837,7 +24883,7 @@
                     template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" [contentId]=\"contentId\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px\"/>\n              <span *ngIf=\"!logo\" style=\"width: 108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n            <ion-col>\n              <button mat-button type=\"button\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\"\n                      [title]=\"'MENU.BTN_MY_ACCOUNT'|translate\">\n                <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                  <h3 class=\"no-margin username\">\n                    <b>{{accountName}}</b>\n                  </h3>\n                  <h4>{{accountEmail}}</h4>\n                </ion-label>\n              </button>\n            </ion-col>\n\n            <!-- Insertion headerBottomRight -->\n            <ion-col size=\"auto\">\n              <ng-container *ngTemplateOutlet=\"headerBottomRight\"></ng-container>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of $items | async\">\n\n          <!-- link -->\n          <ion-item *ngIf=\"!loading && item.path\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    [routerLink]=\"item.path\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"selected\"\n                    [routerLinkActiveOptions]=\"{exact: (item.path === '/')}\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- action -->\n          <ion-item *ngIf=\"!loading && item.action\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    (click)=\"doAction(item.action, $event)\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- divider -->\n          <ion-item-divider @fadeInAnimation\n                            class=\"{{item.cssClass}} {{item.color}}\"\n                            *ngIf=\"!loading && !item.path && !item.action\">\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item-divider>\n\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\n</ion-split-pane>\n\n<ng-template #headerBottomRight>\n  <ng-content select=\"[headerBottomRight]\"></ng-content>\n</ng-template>\n",
                     animations: [fadeInAnimation],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: ["ion-menu{--ion-item-background:transparent;--ion-item-divider-background:transparent;--ion-item-icon-color:var(--ion-color-primary-tint);--ion-item-text-color:var(--ion-color-primary-tint);--ion-item-background-selected:var(--ion-color-secondary100);--ion-item-text-color-selected:var(--ion-color-primary);--ion-item-icon-color-selected:var(--ion-color-primary);--ion-item-text-color-disable:var(--ion-color-medium);--ion-item-icon-color-disable:var(--ion-color-medium)}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header .user-avatar{background-size:cover;background-repeat:no-repeat;background-position:50%;background-color:var(--ion-color-secondary);border:1px solid var(--ion-color-primary);overflow:hidden!important;font-size:var(--avatar-size,60px)!important;line-height:var(--avatar-size,60px);height:var(--avatar-size,60px)!important;width:var(--avatar-size,60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:2px solid var(--ion-color-primary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size,60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;text-align:start!important;width:100%}ion-menu .scroll-content{margin-top:79px!important}ion-menu .has-user-header .scroll-content{margin-top:188px!important}ion-menu ion-content.has-profile-header{--offset-top:188px}ion-menu ion-content.no-profile-header{--offset-top:79px}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color:var(--ion-color-primary-tint);--ion-item-text-color:var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color:var(--ion-color-secondary-tint);--ion-item-text-color:var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color:var(--ion-color-tertiary-tint);--ion-item-text-color:var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color:var(--ion-color-danger-tint);--ion-item-text-color:var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color:var(--ion-color-medium-shade);--ion-item-text-color:var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color:var(--ion-color-dark-tint);--ion-item-text-color:var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item ion-icon,ion-menu ion-content ion-list ion-item mat-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-label,ion-menu ion-content ion-list ion-item ion-text{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover:var(--ion-item-background-selected)!important}ion-menu ion-content ion-list ion-item.selected ion-icon,ion-menu ion-content ion-list ion-item.selected mat-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-label,ion-menu ion-content ion-list ion-item.selected ion-text{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover:var(--ion-item-background-selected)!important;--ion-item-icon-color-selected:var(--ion-item-icon-color)!important;--ion-item-text-color-selected:var(--ion-item-text-color)!important}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width:40px}@media screen and (max-width:767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width:768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size,80px)!important;line-height:var(--avatar-size,80px);height:var(--avatar-size,80px)!important;width:var(--avatar-size,80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size,80px)}}"]
+                    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 rgba(var(--ion-color-secondary-rgb),.5);overflow:hidden!important;font-size:var(--avatar-size,60px)!important;line-height:var(--avatar-size,60px);height:var(--avatar-size,60px)!important;width:var(--avatar-size,60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-avatar:hover{background-color:var(--ion-color-secondary-shade);border:2px solid var(--ion-color-secondary-shade)}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size,60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;text-align:start!important;width:100%}ion-menu .scroll-content{margin-top:79px!important}ion-menu .has-user-header .scroll-content{margin-top:188px!important}ion-menu ion-content.has-profile-header{--offset-top:188px}ion-menu ion-content.no-profile-header{--offset-top:79px}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color:var(--ion-color-primary-tint);--ion-item-text-color:var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color:var(--ion-color-secondary-tint);--ion-item-text-color:var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color:var(--ion-color-tertiary-tint);--ion-item-text-color:var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color:var(--ion-color-danger-tint);--ion-item-text-color:var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color:var(--ion-color-medium-shade);--ion-item-text-color:var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color:var(--ion-color-dark-tint);--ion-item-text-color:var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item ion-icon,ion-menu ion-content ion-list ion-item mat-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-label,ion-menu ion-content ion-list ion-item ion-text{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover:var(--ion-item-background-selected)!important}ion-menu ion-content ion-list ion-item.selected ion-icon,ion-menu ion-content ion-list ion-item.selected mat-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-label,ion-menu ion-content ion-list ion-item.selected ion-text{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover:var(--ion-item-background-selected)!important;--ion-item-icon-color-selected:var(--ion-item-icon-color)!important;--ion-item-text-color-selected:var(--ion-item-text-color)!important}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width:40px}@media screen and (max-width:767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width:768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size,80px)!important;line-height:var(--avatar-size,80px);height:var(--avatar-size,80px)!important;width:var(--avatar-size,80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size,80px)}}"]
                 },] }
     ];
     MenuComponent.ctorParameters = function () { return [
@@ -28796,10 +28842,10 @@
             _this.savingSubject = new rxjs.BehaviorSubject(false);
             _this.$title = new rxjs.Subject();
             _this.onUpdateView = new i0.EventEmitter();
-            _this.environement = injector.get(ENVIRONMENT);
+            _this.environment = injector.get(ENVIRONMENT);
             options = Object.assign({
                 // Default options
-                enableListenChanges: ((_a = _this.environement.entityEditor) === null || _a === void 0 ? void 0 : _a.enableListenChanges) || false, listenIntervalInSeconds: toNumber((_b = _this.environement.entityEditor) === null || _b === void 0 ? void 0 : _b.listenIntervalInSeconds, 0), pathIdAttribute: 'id', autoLoad: true, autoUpdateRoute: true, i18nPrefix: ''
+                enableListenChanges: ((_a = _this.environment.entityEditor) === null || _a === void 0 ? void 0 : _a.enableListenChanges) || false, listenIntervalInSeconds: toNumber((_b = _this.environment.entityEditor) === null || _b === void 0 ? void 0 : _b.listenIntervalInSeconds, 0), pathIdAttribute: 'id', autoLoad: true, autoUpdateRoute: true, i18nPrefix: ''
             }, options);
             _this.settings = injector.get(LocalSettingsService);
             _this.errorTranslator = injector.get(FormErrorTranslator);
@@ -29098,13 +29144,14 @@
          * Enable or disable state
          */
         AppEntityEditor.prototype.updateViewState = function (data, opts) {
+            var _a;
             if (this.isNewData || this.canUserWrite(data)) {
                 this.enable(opts);
             }
             else {
                 this.disable(opts);
                 // Allow to sort table
-                this.tables.forEach(function (t) { return t.enableSort(); });
+                (_a = this.tables) === null || _a === void 0 ? void 0 : _a.forEach(function (t) { return t.enableSort(); });
             }
         };
         /**
@@ -29838,13 +29885,14 @@
          * Enable or disable state
          */
         AppEntityEditorModal.prototype.updateViewState = function (data, opts) {
+            var _a;
             if (this.isNewData || this.enabled) {
                 this.enable(opts);
             }
             else {
                 this.disable(opts);
                 // Allow to sort table
-                this.tables.forEach(function (t) { return t.enableSort(); });
+                (_a = this.tables) === null || _a === void 0 ? void 0 : _a.forEach(function (t) { return t.enableSort(); });
             }
         };
         AppEntityEditorModal.prototype.saveAndClose = function (event) {
@@ -30327,27 +30375,35 @@
                 fetchPolicy: (opts === null || opts === void 0 ? void 0 : opts.fetchPolicy) || 'cache-first',
                 insertFilterFn: filter && filter.asFilterFn()
             })
-                .pipe(operators.map(function (res) {
-                var data = ((res === null || res === void 0 ? void 0 : res.data) || []).map(function (value) { return _this.processUserEvent(value, _this); });
-                if (now) {
-                    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);
-                var result = {
-                    data: data,
-                    total: toNumber(res === null || res === void 0 ? void 0 : res.total, data.length)
-                };
-                // Add fetch more capability, if total was fetched
-                if (isNotNil(res.total)) {
-                    var nextOffset_1 = (page.offset || 0) + data.length;
-                    if (nextOffset_1 < result.total) {
-                        result.fetchMore = function (_) { return _this.loadPage(Object.assign(Object.assign({}, page), { offset: nextOffset_1 }), filter, Object.assign(Object.assign({}, opts), { fetchPolicy: 'no-cache' })); };
+                .pipe(operators.mergeMap(function (res) { return __awaiter(_this, void 0, void 0, function () {
+                var data, result, nextOffset_1;
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, Promise.all(((res === null || res === void 0 ? void 0 : res.data) || []).map(function (value) { return _this.processUserEvent(value, _this); }))];
+                        case 1:
+                            data = _b.sent();
+                            if (now) {
+                                console.debug("" + this._logPrefix + data.length + " user events loaded in " + (Date.now() - now) + "ms");
+                                now = null;
+                            }
+                            // Must re-order because of listenAllChanges result will add new event at the end
+                            data = EntityUtils.sort(data, page.sortBy, page.sortDirection);
+                            result = {
+                                data: data,
+                                total: toNumber(res === null || res === void 0 ? void 0 : res.total, data.length)
+                            };
+                            // Add fetch more capability, if total was fetched
+                            if (isNotNil(res.total)) {
+                                nextOffset_1 = (page.offset || 0) + data.length;
+                                if (nextOffset_1 < result.total) {
+                                    result.fetchMore = function (_) { return _this.loadPage(Object.assign(Object.assign({}, page), { offset: nextOffset_1 }), filter, Object.assign(Object.assign({}, opts), { fetchPolicy: 'no-cache' })); };
+                                }
+                            }
+                            return [2 /*return*/, result];
                     }
-                }
-                return result;
-            }));
+                });
+            }); }));
         };
         AbstractUserEventService.prototype.loadPage = function (page, filter, opts) {
             var _a;
@@ -30385,10 +30441,12 @@
                                 })];
                         case 1:
                             res = _b.sent();
-                            data = ((res === null || res === void 0 ? void 0 : res.data) || []).map(function (value) { return _this.processUserEvent(value, _this); });
+                            return [4 /*yield*/, Promise.all(((res === null || res === void 0 ? void 0 : res.data) || []).map(function (value) { return _this.processUserEvent(value, _this); }))];
+                        case 2:
+                            data = _b.sent();
                             if (now)
                                 console.debug("" + this._logPrefix + data.length + " user events loaded in " + (Date.now() - now) + "ms");
-                            // Must re-order because of listenChanges result will add new event at the end
+                            // Must re-order because of listenAllChanges result will add new event at the end
                             data = EntityUtils.sort(data, page.sortBy, page.sortDirection);
                             result = {
                                 data: data,
@@ -30407,16 +30465,28 @@
             });
         };
         AbstractUserEventService.prototype.add = function (entity) {
-            // TODO set an id !!!!!!!!!!!!!!!!!!!!!!!!!
-            entity = this.processUserEvent(entity);
-            var withContent = !!entity.content;
-            // Add user event locally
-            this.insertIntoMutableCachedQueries(this.graphql.cache, {
-                query: withContent ? this.queries.loadAllWithContent : this.queries.loadAll,
-                data: entity
+            return __awaiter(this, void 0, void 0, function () {
+                var withContent;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this.processUserEvent(entity)];
+                        case 1:
+                            // TODO set an id !!!!!!!!!!!!!!!!!!!!!!!!!
+                            entity = _b.sent();
+                            if (!entity)
+                                return [2 /*return*/]; // Rejected
+                            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._countSubject.next(this._countSubject.value + 1);
+                            return [2 /*return*/];
+                    }
+                });
             });
-            // Update count
-            this._countSubject.next(this._countSubject.value + 1);
         };
         AbstractUserEventService.prototype.count = function (filter, options) {
             var _a;
@@ -30483,38 +30553,50 @@
                 return total;
             }));
         };
-        AbstractUserEventService.prototype.listenChanges = function (filter, options) {
+        AbstractUserEventService.prototype.listenAllChanges = function (filter, opts) {
             var _this = this;
             var _a;
-            if (!((_a = this.subscriptions) === null || _a === void 0 ? void 0 : _a.listenChanges)) {
-                console.warn(this._logPrefix + "Subscription query 'listenChanges' not provided, skip.");
+            if (!((_a = this.subscriptions) === null || _a === void 0 ? void 0 : _a.listenAllChanges)) {
+                console.warn(this._logPrefix + "Subscription query 'listenAllChanges' not provided, skip.");
                 return rxjs.of();
             }
             if (!filter)
                 filter = this.defaultFilter();
             filter = this.asFilter(filter);
-            var withContent = (options === null || options === void 0 ? void 0 : options.withContent) === true;
+            var withContent = (opts === null || opts === void 0 ? void 0 : opts.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) },
+                query: this.subscriptions.listenAllChanges,
+                fetchPolicy: opts === null || opts === void 0 ? void 0 : opts.fetchPolicy,
+                variables: { filter: filter.asPodObject(), interval: toNumber(opts === null || opts === void 0 ? void 0 : opts.interval, 10) },
                 error: {
                     code: SocialErrorCodes.SUBSCRIBE_USER_EVENTS_ERROR,
                     message: 'SOCIAL.ERROR.SUBSCRIBE_USER_EVENTS_ERROR'
                 }
-            }).pipe(operators.map(function (_b) {
+            }).pipe(operators.mergeMap(function (_b) {
                 var data = _b.data;
-                if (data && _this._debug)
-                    console.debug(_this._logPrefix + "Received new user events:", data);
-                var updatedData = data === null || data === void 0 ? void 0 : data.map(function (value) { return _this.processUserEvent(value, _this); });
-                // Update cache
-                _this.insertIntoMutableCachedQueries(_this.graphql.cache, {
-                    query: withContent ? _this.queries.loadAllWithContent : _this.queries.loadAll,
-                    data: updatedData
-                });
-                return updatedData;
+                return __awaiter(_this, void 0, void 0, function () {
+                    var _this = this;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                if (data && this._debug)
+                                    console.debug(this._logPrefix + "Received new user events:", data);
+                                // Update cache (will update watchAll queries)
+                                if (isNotEmptyArray(data)) {
+                                    this.insertIntoMutableCachedQueries(this.graphql.cache, {
+                                        query: withContent ? this.queries.loadAllWithContent : this.queries.loadAll,
+                                        data: data
+                                    });
+                                }
+                                if (!(!opts || opts.toEntity !== false)) return [3 /*break*/, 2];
+                                return [4 /*yield*/, Promise.all((data || []).map(function (value) { return _this.processUserEvent(value, _this); }))];
+                            case 1: return [2 /*return*/, _b.sent()];
+                            case 2: return [2 /*return*/, data];
+                        }
+                    });
+                });
             }));
         };
         AbstractUserEventService.prototype.delete = function (entity) {
@@ -30631,7 +30713,7 @@
                 });
             });
         };
-        AbstractUserEventService.prototype.markAsRead = function (entities) {
+        AbstractUserEventService.prototype.markAllAsRead = function (entities) {
             return __awaiter(this, void 0, void 0, function () {
                 var userEventWithoutReadListeners, _loop_1, this_1, _b, _c, entity, e_1_1;
                 var e_1, _d;
@@ -30764,33 +30846,60 @@
             this._listenSubscription = undefined;
         };
         AbstractUserEventService.prototype.processUserEvent = function (source, that) {
-            var e_3, _b;
-            that = that || this;
-            // Convert json source to IUserEvent
-            var target = that.fromObject(source);
-            // Get listeners
-            var listeners = (that.listeners || []).filter(function (listener) { return listener.onReceived; }).filter(function (listener) { return listener.accept(target); });
-            try {
-                for (var listeners_1 = __values(listeners), listeners_1_1 = listeners_1.next(); !listeners_1_1.done; listeners_1_1 = listeners_1.next()) {
-                    var listener = listeners_1_1.value;
-                    if (target) {
-                        target = listener.onReceived(target);
-                    }
-                    else {
-                        if (that._debug)
-                            console.debug(that._logPrefix + "Event has been rejected by a listener", source);
-                        break;
+            return __awaiter(this, void 0, void 0, function () {
+                var target, listeners, listeners_1, listeners_1_1, listener, res, _b, e_3_1;
+                var e_3, _c;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            that = that || this;
+                            target = that.fromObject(source);
+                            listeners = (that.listeners || [])
+                                .filter(function (listener) { return !!listener.onReceived; })
+                                .filter(function (listener) { return listener.accept(target); });
+                            _d.label = 1;
+                        case 1:
+                            _d.trys.push([1, 9, 10, 11]);
+                            listeners_1 = __values(listeners), listeners_1_1 = listeners_1.next();
+                            _d.label = 2;
+                        case 2:
+                            if (!!listeners_1_1.done) return [3 /*break*/, 8];
+                            listener = listeners_1_1.value;
+                            if (!target) return [3 /*break*/, 6];
+                            res = listener.onReceived(target);
+                            if (!(res instanceof Promise)) return [3 /*break*/, 4];
+                            return [4 /*yield*/, res];
+                        case 3:
+                            _b = _d.sent();
+                            return [3 /*break*/, 5];
+                        case 4:
+                            _b = res;
+                            _d.label = 5;
+                        case 5:
+                            target = _b;
+                            return [3 /*break*/, 7];
+                        case 6:
+                            if (that._debug)
+                                console.debug(that._logPrefix + "Event has been rejected by a listener", source);
+                            return [3 /*break*/, 8];
+                        case 7:
+                            listeners_1_1 = listeners_1.next();
+                            return [3 /*break*/, 2];
+                        case 8: return [3 /*break*/, 11];
+                        case 9:
+                            e_3_1 = _d.sent();
+                            e_3 = { error: e_3_1 };
+                            return [3 /*break*/, 11];
+                        case 10:
+                            try {
+                                if (listeners_1_1 && !listeners_1_1.done && (_c = listeners_1.return)) _c.call(listeners_1);
+                            }
+                            finally { if (e_3) throw e_3.error; }
+                            return [7 /*endfinally*/];
+                        case 11: return [2 /*return*/, target];
                     }
-                }
-            }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
-            finally {
-                try {
-                    if (listeners_1_1 && !listeners_1_1.done && (_b = listeners_1.return)) _b.call(listeners_1);
-                }
-                finally { if (e_3) throw e_3.error; }
-            }
-            return target;
+                });
+            });
         };
         AbstractUserEventService.prototype.defaultMarkAsRead = function (userEvents) {
             var _a;
@@ -30883,17 +30992,28 @@
             this.popoverController = popoverController;
             this.settings = settings;
             this.userEventService = userEventService;
-            this.subscriptions = new rxjs.Subscription();
-            this._fetchingMore = false;
+            this._subscriptions = new rxjs.Subscription();
+            this._$pageSize = new rxjs.BehaviorSubject(20);
+            this.fetchingMore = false;
+            this.$items = new rxjs.BehaviorSubject(undefined);
+            this.$itemCount = new rxjs.BehaviorSubject(undefined);
             this.debug = false;
-            this.pageSize = 10;
             this.sortBy = 'creationDate';
             this.sortDirection = 'desc';
             this.enableInfiniteScroll = true;
-            this.$items = new rxjs.BehaviorSubject(undefined);
-            this.$itemCount = new rxjs.BehaviorSubject(undefined);
             this.mobile = ((_a = this.settings) === null || _a === void 0 ? void 0 : _a.mobile) || false;
         }
+        Object.defineProperty(UserEventNotificationList.prototype, "pageSize", {
+            get: function () {
+                return this._$pageSize.value;
+            },
+            set: function (value) {
+                if (value > 0 && value !== this._$pageSize.value)
+                    this._$pageSize.next(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(UserEventNotificationList.prototype, "canFetchMore", {
             get: function () {
                 return this.enableInfiniteScroll && !!this._fetchMoreFn;
@@ -30905,27 +31025,31 @@
             var _this = this;
             // Watch all user events
             if (this.userEventService) {
-                this.subscriptions.add(this.userEventService
-                    .watchAll(0, this.pageSize, this.sortBy, this.sortDirection, this.filter)
+                this._subscriptions.add(this._$pageSize.pipe(operators.distinctUntilChanged(), operators.switchMap(function (pageSize) { return _this.userEventService.watchAll(0, pageSize, _this.sortBy, _this.sortDirection, _this.filter); }))
                     .subscribe(function (result) {
                     var _a;
                     if (_this.debug)
-                        console.debug("[user-event-notification-list] receiving " + result.total + " user events", result.data);
+                        console.debug("[user-event-notification-list] Receiving " + result.total + " user events", result.data);
                     _this.$items.next(result.data);
                     _this.$itemCount.next(result.total || ((_a = result.data) === null || _a === void 0 ? void 0 : _a.length) || 0);
                     _this._fetchMoreFn = result.fetchMore;
+                    _this.fetchingMore = false; // Allow to refetch more
                     _this.markForCheck();
                 }));
                 // Listen changes
-                this.subscriptions.add(this.userEventService.listenChanges(undefined)
+                this._subscriptions.add(this.userEventService.listenAllChanges(this.filter)
                     .subscribe(function (data) {
                     if (_this.debug)
-                        console.debug("[user-event-notification-list] receiving " + data.length + " new user events", data);
+                        console.debug("[user-event-notification-list] Receiving " + data.length + " new user events (by WS)", data);
                 }));
+                if (this.enableInfiniteScroll)
+                    this.initInfiniteScroll();
             }
         };
         UserEventNotificationList.prototype.ngOnDestroy = function () {
-            this.subscriptions.unsubscribe();
+            this._subscriptions.unsubscribe();
+            this.$items.complete();
+            this.$itemCount.complete();
         };
         UserEventNotificationList.prototype.click = function (event, userEvent) {
             if (!userEvent)
@@ -30987,65 +31111,77 @@
         };
         UserEventNotificationList.prototype.dismiss = function () {
             this.popoverController.dismiss();
+            // Reset counter (need if event has been received while popover if open)
+            this.userEventService.resetCount();
         };
         UserEventNotificationList.prototype.fetchMore = function (event) {
             var _a;
             return __awaiter(this, void 0, void 0, function () {
-                var result, data, err_2;
+                var fetchMoreFn, result, data, err_2;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
-                            if (!this._fetchMoreFn || this._fetchingMore)
+                            if (!this._fetchMoreFn || this.fetchingMore)
                                 return [2 /*return*/];
                             console.debug('[user-event-notification-list] Fetching more notifications...', event);
-                            this._fetchingMore = true;
+                            this.fetchingMore = true;
+                            fetchMoreFn = this._fetchMoreFn;
                             _b.label = 1;
                         case 1:
                             _b.trys.push([1, 3, 4, 5]);
-                            return [4 /*yield*/, this._fetchMoreFn()];
+                            return [4 /*yield*/, fetchMoreFn()];
                         case 2:
                             result = _b.sent();
                             data = __spread((this.$items.value || []), result.data);
                             // Remove duplication (e.g. when new user event was added by subscription)
                             data = removeDuplicatesFromArray(data, 'id');
+                            // fetch more changes (e.g. if watchAll observable as been refreshed)
+                            if (fetchMoreFn !== this._fetchMoreFn)
+                                return [2 /*return*/]; // Skip
                             this.$items.next(data);
                             this.$itemCount.next(result.total || ((_a = result.data) === null || _a === void 0 ? void 0 : _a.length) || 0);
                             this._fetchMoreFn = result.fetchMore;
+                            // Update the page size, to keep same scroll height, after the next refresh
+                            this.pageSize = Math.max(this.pageSize, data.length);
                             return [3 /*break*/, 5];
                         case 3:
                             err_2 = _b.sent();
                             console.error(err_2);
-                            this._fetchMoreFn = undefined;
+                            this._fetchMoreFn = undefined; // Forget the function
                             return [3 /*break*/, 5];
                         case 4:
                             this.markForCheck();
-                            this._fetchingMore = false;
+                            this.fetchingMore = false;
                             return [7 /*endfinally*/];
                         case 5: return [2 /*return*/];
                     }
                 });
             });
         };
-        UserEventNotificationList.prototype._initInfiniteScroll = function (threshold) {
+        UserEventNotificationList.prototype.trackByFn = function (index, item) {
+            return item.id;
+        };
+        UserEventNotificationList.prototype.initInfiniteScroll = function (threshold) {
             return __awaiter(this, void 0, void 0, function () {
                 var panel;
                 var _this = this;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
+                            console.debug('[user-event-notification-list] Init infinite loop');
                             if (this._fetchMoreSubscription)
                                 this._fetchMoreSubscription.unsubscribe();
                             threshold = threshold || (this.mobile ? '15%' : '2%');
-                            return [4 /*yield*/, waitFor(function () { return !!_this.ionContent; })];
+                            return [4 /*yield*/, waitFor(function () { return !!_this.ionContent; }, { dueTime: 250, timeout: 1000 })];
                         case 1:
                             _b.sent();
                             return [4 /*yield*/, this.ionContent.getScrollElement()];
                         case 2:
                             panel = _b.sent();
                             // Trigger fetch more, end end scroll reached
-                            this._fetchMoreSubscription = fromScrollEndEvent(panel, threshold, 250 /*force to check when no scrollbar - e.g. in large screen*/)
+                            this._fetchMoreSubscription = this.$items.pipe(operators.debounceTime(250), operators.filter(function () { return _this.canFetchMore; }), operators.switchMap(function () { return fromScrollEndEvent(panel, threshold, 250 /*force to check when no scrollbar - e.g. in large screen*/); }))
                                 .subscribe(function () { return _this.fetchMore(); });
-                            this.subscriptions.add(this._fetchMoreSubscription);
+                            this._subscriptions.add(this._fetchMoreSubscription);
                             return [2 /*return*/];
                     }
                 });
@@ -31059,10 +31195,9 @@
     UserEventNotificationList.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-user-event-notification-list',
-                    template: "<ion-content>\n  <ion-list class=\"ion-list-popover\">\n\n    <ion-row class=\"ion-list-header column\">\n      <ion-col>\n        <ion-label>{{titleI18n | translate}}</ion-label>\n      </ion-col>\n      <ion-col class=\"top-action\" *ngIf=\"$items|async|isNotEmptyArray\">\n        <ion-text color=\"primary\">\n          <a (click)=\"markAllAsRead($event)\">{{'SOCIAL.USER_EVENT.NOTIFICATION.READ_ALL' | translate}}</a>\n        </ion-text>\n      </ion-col>\n    </ion-row>\n\n    <ion-item\n      *ngFor=\"let item of $items | async; last as last\"\n      [lines]=\"last ? 'none' : undefined\" tappable\n      [class.ion-item-selected]=\"!item.readDate\"\n      (click)=\"click($event, item)\"\n    >\n\n      <ion-avatar slot=\"start\">\n\n        <img *ngIf=\"item.avatar; else avatarIcon\" src=\"{{ item.avatar }}\">\n\n        <ng-template #avatarIcon>\n          <app-icon\n            *ngIf=\"item.avatarIcon\"\n            [ref]=\"item.avatarIcon\"\n            height=\"40\"\n            width=\"40\"\n          ></app-icon>\n        </ng-template>\n\n      </ion-avatar>\n\n      <ion-grid class=\"ion-no-margin ion-no-padding message\">\n        <ion-row>\n          <ion-col size=\"12\">\n            <p [class.unread]=\"!item.readDate\" [innerHTML]=\"item.message\"></p>\n          </ion-col>\n        </ion-row>\n\n        <!-- date -->\n        <ion-row>\n          <ion-col size=\"12\">\n            <app-icon\n              *ngIf=\"item.icon\"\n              [ref]=\"item.icon\"\n              height=\"16\"\n              width=\"16\"\n              style=\"vertical-align: sub; margin-right: 3px\"\n            ></app-icon>\n            <small>\n              <span>{{item.creationDate|dateFromNow}}</span>\n              <span style=\"color: gray\">{{ ' | ' + (item.creationDate|dateFormat:{time:true}) }}</span>\n            </small>\n          </ion-col>\n        </ion-row>\n\n        <!-- actions -->\n        <ion-row *ngIf=\"item.actions|isNotEmptyArray\">\n          <ion-col></ion-col>\n          <ion-col size=\"auto\">\n            <ng-container *ngFor=\"let action of item.actions\">\n              <span *ngIf=\"!action.default\" class=\"action\">\n                <a (click)=\"executeAction($event, action, item)\" [title]=\"(action.title || action.name) |translate\">\n                  <app-icon *ngIf=\"action.iconRef\" slot=\"start\" height=\"20\" width=\"20\" [ref]=\"action.iconRef\"></app-icon>\n                  {{ action.name | translate }}\n                </a>\n              </span>\n            </ng-container>\n          </ion-col>\n        </ion-row>\n\n      </ion-grid>\n\n      <mat-icon slot=\"end\" *ngIf=\"item.actions|arrayFilter: isDefaultAction|isNotEmptyArray\">chevron_right</mat-icon>\n    </ion-item>\n\n    <!-- loading -->\n    <ion-item *ngIf=\"!($items|async); else noResult\" lines=\"none\" disabled>\n      <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n    </ion-item>\n\n    <!-- no result -->\n    <ng-template #noResult>\n      <ion-item *ngIf=\"$items|async|isEmptyArray\" lines=\"none\">\n        <ion-text color=\"dark\" class=\"text-italic\">{{'SOCIAL.USER_EVENT.NOTIFICATION.EMPTY' | translate}}</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <!-- Loading more spinner -->\n    <ion-item *ngIf=\"canFetchMore\" (ngInit)=\"_initInfiniteScroll()\" lines=\"none\" disabled>\n      <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n    </ion-item>\n\n    <!-- footer -->\n    <ion-row *ngIf=\"$itemCount|async; let count\"\n              class=\"ion-list-footer column\">\n      <ion-col>\n        <ion-text class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n      </ion-col>\n    </ion-row>\n\n  </ion-list>\n</ion-content>\n",
+                    template: "<ion-content>\n  <ion-list class=\"ion-list-popover\">\n\n    <ion-row class=\"ion-list-header column\">\n      <ion-col>\n        <ion-label>{{titleI18n | translate}}</ion-label>\n      </ion-col>\n      <ion-col class=\"top-action\" *ngIf=\"$items|async|isNotEmptyArray\">\n        <ion-text color=\"primary\">\n          <a (click)=\"markAllAsRead($event)\">{{'SOCIAL.USER_EVENT.NOTIFICATION.READ_ALL' | translate}}</a>\n        </ion-text>\n      </ion-col>\n    </ion-row>\n\n    <ion-item\n      *ngFor=\"let item of $items | async; trackBy: trackByFn; last as last\"\n      [lines]=\"last ? 'none' : undefined\"\n      [class.unread]=\"!item.readDate\"\n      [class.tappable]=\"item.actions|arrayFilter:isDefaultAction|isNotEmptyArray\"\n      (click)=\"click($event, item)\">\n\n      <ion-avatar slot=\"start\">\n\n        <img *ngIf=\"item.avatar; else avatarIcon\" src=\"{{ item.avatar }}\">\n\n        <ng-template #avatarIcon>\n          <app-icon\n            *ngIf=\"item.avatarIcon; else generateIcon\"\n            [ref]=\"item.avatarIcon\"\n            height=\"40\"\n            width=\"40\"\n          ></app-icon>\n        </ng-template>\n\n        <ng-template #generateIcon>\n          <div class=\"avatar\" *ngIf=\"item.avatarJdenticon\">\n            <svg width=\"40\" width=\"40\" [data-jdenticon-value]=\"item.avatarJdenticon\"></svg>\n          </div>\n        </ng-template>\n\n      </ion-avatar>\n\n      <ion-grid class=\"ion-no-margin ion-no-padding message\">\n        <ion-row>\n          <ion-col size=\"12\">\n            <p [class.unread]=\"!item.readDate\" [innerHTML]=\"item.message\"></p>\n          </ion-col>\n        </ion-row>\n\n        <!-- date -->\n        <ion-row>\n          <ion-col size=\"12\">\n            <app-icon\n              *ngIf=\"item.icon\"\n              [ref]=\"item.icon\"\n              height=\"16\"\n              width=\"16\"\n              style=\"vertical-align: sub; margin-right: 3px\"\n            ></app-icon>\n            <small>\n              <span>{{item.creationDate|dateFromNow}}</span>\n              <span style=\"color: gray\">{{ ' | ' + (item.creationDate|dateFormat:{time:true}) }}</span>\n            </small>\n          </ion-col>\n        </ion-row>\n\n        <!-- actions -->\n        <ion-row *ngIf=\"item.actions|isNotEmptyArray\">\n          <ion-col></ion-col>\n          <ion-col size=\"auto\">\n            <ng-container *ngFor=\"let action of item.actions\">\n              <a *ngIf=\"!action.default\" class=\"action\" (click)=\"executeAction($event, action, item)\" [title]=\"(action.title || action.name) |translate\">\n                <app-icon *ngIf=\"action.iconRef\" slot=\"start\" height=\"20\" width=\"20\" [ref]=\"action.iconRef\"></app-icon>\n                <span>{{ action.name | translate }}</span>\n              </a>\n            </ng-container>\n          </ion-col>\n        </ion-row>\n\n      </ion-grid>\n\n      <mat-icon slot=\"end\" *ngIf=\"item.actions|arrayFilter: isDefaultAction|isNotEmptyArray\">chevron_right</mat-icon>\n    </ion-item>\n\n    <!-- loading -->\n    <ng-container *ngIf=\"!($items|async); else notLoading\">\n      <ng-container *ngTemplateOutlet=\"loadingItem\"></ng-container>\n    </ng-container>\n\n    <ng-template #notLoading>\n      <!-- no result -->\n      <ion-item *ngIf=\"$items|async|isEmptyArray\" lines=\"none\">\n        <ion-text color=\"dark\" class=\"text-italic\">{{'SOCIAL.USER_EVENT.NOTIFICATION.EMPTY' | translate}}</ion-text>\n      </ion-item>\n\n      <!-- Fetching more -->\n      <ng-container *ngIf=\"fetchingMore; else infiniteLoop\" lines=\"none\" disabled>\n        <ng-container *ngTemplateOutlet=\"loadingItem\"></ng-container>\n      </ng-container>\n\n      <!-- Infinite loop -->\n      <ng-template #infiniteLoop>\n        <ng-container *ngIf=\"canFetchMore\" lines=\"none\" disabled\n                      [ngTemplateOutlet]=\"loadingItem\">\n        </ng-container>\n      </ng-template>\n    </ng-template>\n\n    <!-- footer -->\n    <ion-row class=\"ion-list-footer column\">\n      <ion-col>\n        <ion-text *ngIf=\"$itemCount|async; let count\"\n                  class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n      </ion-col>\n    </ion-row>\n\n  </ion-list>\n</ion-content>\n\n<!-- loading -->\n<ng-template #loadingItem>\n  <ion-item lines=\"none\" disabled>\n    <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n  </ion-item>\n</ng-template>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    encapsulation: i0.ViewEncapsulation.None,
-                    styles: [":host(.popover-viewport){overflow-y:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-height:calc(90vh - 20px)}.unread{font-weight:700}.message{font-size:.9em}.message p{margin-top:5px;margin-bottom:5px}.top-action{text-align:end;margin-right:8px}.top-action a{cursor:pointer;color:var(--ion-color-contrast)}.top-action a:hover{text-decoration:underline}.action a{margin-right:10px;cursor:pointer}.action app-icon{vertical-align:middle}"]
+                    styles: [":host(.popover-viewport){overflow-y:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none;max-height:calc(90vh - 20px)}ion-list ion-item.tappable{cursor:pointer}ion-list ion-item.tappable:hover{--ion-item-background:var(--ion-item-background-color-hover)}.message{font-size:.9em}.message p{margin-top:5px;margin-bottom:5px}.message p.unread{font-weight:700}.top-action{text-align:end;margin-right:8px}.top-action a{cursor:pointer;color:var(--ion-color-contrast)}.top-action a:hover{text-decoration:underline}a.action{font-size:.9em;margin-right:10px;cursor:pointer}a.action:hover span{text-decoration:underline}a.action app-icon{vertical-align:middle}ion-avatar .avatar svg,ion-avatar img{border:1px solid rgba(var(--ion-color-secondary-rgb,.5));border-radius:50%}"]
                 },] }
     ];
     UserEventNotificationList.ctorParameters = function () { return [
@@ -31075,11 +31210,11 @@
         debug: [{ type: i0.Input }],
         mobile: [{ type: i0.Input }],
         titleI18n: [{ type: i0.Input }],
-        pageSize: [{ type: i0.Input }],
         sortBy: [{ type: i0.Input }],
         sortDirection: [{ type: i0.Input }],
         filter: [{ type: i0.Input }],
         enableInfiniteScroll: [{ type: i0.Input }],
+        pageSize: [{ type: i0.Input }],
         readEvent: [{ type: i0.Output }],
         readEvents: [{ type: i0.Output }],
         ionContent: [{ type: i0.ViewChild, args: [i1$5.IonContent,] }],
@@ -31127,12 +31262,12 @@
                             // Wait service
                             _a.sent();
                             // Subscribe to read event
-                            this._readEvent.subscribe(function (value) {
+                            this._readEvent.subscribe(function (item) {
                                 // default: mark event as read
-                                _this.userEventService.markAsRead([value]);
+                                _this.userEventService.markAllAsRead([item]);
                             });
-                            this._readEvents.subscribe(function (value) {
-                                _this.userEventService.markAsRead(value);
+                            this._readEvents.subscribe(function (items) {
+                                _this.userEventService.markAllAsRead(items);
                             });
                             return [2 /*return*/];
                     }
@@ -31153,13 +31288,14 @@
                                         debug: this.debug,
                                         titleI18n: this.titleI18n,
                                         readEvent: this._readEvent,
-                                        readEvents: this._readEvents
+                                        readEvents: this._readEvents,
+                                        filter: this.filter
                                     },
                                     backdropDismiss: true,
                                     keyboardClose: true,
                                     event: event,
                                     translucent: true,
-                                    cssClass: 'popover-large'
+                                    cssClass: 'popover-large popover-notifications'
                                 })];
                         case 1:
                             popover = _a.sent();
@@ -31207,7 +31343,8 @@
                     imports: [
                         i1$4.CommonModule,
                         SharedModule,
-                        AppIconModule
+                        AppIconModule,
+                        ngxJdenticon.NgxJdenticonModule
                     ],
                     declarations: [
                         AppUserEventNotificationIcon,
@@ -31556,7 +31693,7 @@
         { type: i0.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;-ms-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}"]
+                    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 = function () { return []; };
@@ -31821,118 +31958,8 @@
                 },] }
     ];
 
-    var UserEvent_1;
-    var UserEventTypes = {
-        DEBUG_DATA: 'DEBUG_DATA',
-        INBOX_MESSAGE: 'INBOX_MESSAGE'
-    };
-    // @dynamic
-    exports.UserEvent = UserEvent_1 = /** @class */ (function (_super) {
-        __extends(UserEvent, _super);
-        function UserEvent() {
-            return _super.call(this, UserEvent_1.TYPENAME) || this;
-        }
-        UserEvent.prototype.asObject = function (opts) {
-            var target = _super.prototype.asObject.call(this, 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;
-        };
-        UserEvent.prototype.fromObject = function (source) {
-            Object.assign(this, source); // Copy all properties
-            _super.prototype.fromObject.call(this, source);
-            this.creationDate = fromDateISOString(source.creationDate);
-            this.readDate = fromDateISOString(source.readDate);
-            try {
-                // Deserialize content
-                if (typeof source.content === 'string' && source.content.startsWith('{')) {
-                    this.content = JSON.parse(source.content);
-                }
-                // Deserialize content.context
-                if (this.content && typeof this.content.context === 'string' && this.content.context.startsWith('{')) {
-                    this.content.context = JSON.parse(this.content.context);
-                }
-            }
-            catch (err) {
-                console.error('Error during UserEvent deserialization', err);
-            }
-        };
-        return UserEvent;
-    }(Entity));
-    exports.UserEvent = UserEvent_1 = __decorate([
-        EntityClass({ typename: 'UserEventVO' })
-    ], exports.UserEvent);
-    // @dynamic
-    exports.UserEventFilter = /** @class */ (function (_super) {
-        __extends(UserEventFilter, _super);
-        function UserEventFilter() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
-            _this.types = [];
-            _this.levels = [];
-            _this.issuers = [];
-            _this.recipients = [];
-            _this.startDate = null;
-            _this.excludeRead = false;
-            return _this;
-        }
-        UserEventFilter.prototype.fromObject = function (source, opts) {
-            _super.prototype.fromObject.call(this, 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;
-        };
-        UserEventFilter.prototype.buildFilter = function () {
-            var _this = this;
-            var filterFns = _super.prototype.buildFilter.call(this);
-            if (isNotEmptyArray(this.types)) {
-                filterFns.push(function (t) { return _this.types.includes(t.type); });
-            }
-            if (isNotEmptyArray(this.levels)) {
-                filterFns.push(function (t) { return _this.levels.includes(t.level); });
-            }
-            if (isNotEmptyArray(this.issuers)) {
-                filterFns.push(function (t) { return _this.issuers.includes(t.issuer); });
-            }
-            if (isNotEmptyArray(this.recipients)) {
-                filterFns.push(function (t) { return _this.recipients.includes(t.recipient); });
-            }
-            if (isNotNil(this.startDate)) {
-                filterFns.push(function (t) { return _this.startDate.isSameOrBefore(t.creationDate); });
-            }
-            if (this.excludeRead === true) {
-                filterFns.push(function (t) { return isNil(t.readSignature); }); // todo or t.signature ?
-            }
-            return filterFns;
-        };
-        UserEventFilter.prototype.asObject = function (opts) {
-            var target = _super.prototype.asObject.call(this, opts);
-            return target;
-        };
-        return UserEventFilter;
-    }(EntityFilter));
-    exports.UserEventFilter = __decorate([
-        EntityClass({ typename: 'UserEventFilterVO' })
-    ], exports.UserEventFilter);
-
-    var UserEventFragments = {
-        userEvent: core.gql(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["fragment UserEventFragment on UserEventVO {\n    id\n    issuer\n    updateDate\n    creationDate\n    eventType\n    recipient\n    content\n    hash\n    signature\n    readSignature\n    __typename\n  }"], ["fragment UserEventFragment on UserEventVO {\n    id\n    issuer\n    updateDate\n    creationDate\n    eventType\n    recipient\n    content\n    hash\n    signature\n    readSignature\n    __typename\n  }"]))),
-        lightUserEvent: core.gql(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["fragment LightUserEventFragment on UserEventVO {\n    id\n    issuer\n    recipient\n    updateDate\n    creationDate\n    eventType\n    readSignature\n    __typename\n  }"], ["fragment LightUserEventFragment on UserEventVO {\n    id\n    issuer\n    recipient\n    updateDate\n    creationDate\n    eventType\n    readSignature\n    __typename\n  }"])))
-    };
-    var templateObject_1$3, templateObject_2$2;
-
     var Mutations = {
-        send: core.gql(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["mutation SendMessage($data: MessageVOInput){\n    done: sendMessage(message: $data)\n  }"], ["mutation SendMessage($data: MessageVOInput){\n    done: sendMessage(message: $data)\n  }"])))
+        send: core.gql(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["mutation SendMessage($data: MessageVOInput){\n    done: sendMessage(message: $data)\n  }"], ["mutation SendMessage($data: MessageVOInput){\n    done: sendMessage(message: $data)\n  }"])))
     };
     var MessageService = /** @class */ (function (_super) {
         __extends(MessageService, _super);
@@ -32016,7 +32043,7 @@
         { type: i1$5.ToastController },
         { type: Environment, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [ENVIRONMENT,] }] }
     ]; };
-    var templateObject_1$4;
+    var templateObject_1$3;
 
     var PersonFilter_1;
     // @dynamic
@@ -32075,11 +32102,11 @@
     ], exports.PersonFilter);
 
     var PersonFragments = {
-        person: core.gql(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["fragment PersonFragment on PersonVO {\n    id\n    firstName\n    lastName\n    email\n    pubkey\n    avatar\n    statusId\n    updateDate\n    creationDate\n    profiles\n    username\n    usernameExtranet\n    department {\n      id\n      label\n      name\n      logo\n      __typename\n    }\n    __typename\n  }"], ["fragment PersonFragment on PersonVO {\n    id\n    firstName\n    lastName\n    email\n    pubkey\n    avatar\n    statusId\n    updateDate\n    creationDate\n    profiles\n    username\n    usernameExtranet\n    department {\n      id\n      label\n      name\n      logo\n      __typename\n    }\n    __typename\n  }"])))
+        person: core.gql(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["fragment PersonFragment on PersonVO {\n    id\n    firstName\n    lastName\n    email\n    pubkey\n    avatar\n    statusId\n    updateDate\n    creationDate\n    profiles\n    username\n    usernameExtranet\n    department {\n      id\n      label\n      name\n      logo\n      __typename\n    }\n    __typename\n  }"], ["fragment PersonFragment on PersonVO {\n    id\n    firstName\n    lastName\n    email\n    pubkey\n    avatar\n    statusId\n    updateDate\n    creationDate\n    profiles\n    username\n    usernameExtranet\n    department {\n      id\n      label\n      name\n      logo\n      __typename\n    }\n    __typename\n  }"])))
     };
     // Load persons query
     var PersonQueries = {
-        loadAll: core.gql(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n    query Persons($offset: Int, $size: Int, $sortBy: String, $sortDirection: String, $filter: PersonFilterVOInput){\n      data: persons(filter: $filter, offset: $offset, size: $size, sortBy: $sortBy, sortDirection: $sortDirection){\n        ...PersonFragment\n      }\n    }\n    ", ""], ["\n    query Persons($offset: Int, $size: Int, $sortBy: String, $sortDirection: String, $filter: PersonFilterVOInput){\n      data: persons(filter: $filter, offset: $offset, size: $size, sortBy: $sortBy, sortDirection: $sortDirection){\n        ...PersonFragment\n      }\n    }\n    ", ""])), PersonFragments.person),
+        loadAll: core.gql(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n    query Persons($offset: Int, $size: Int, $sortBy: String, $sortDirection: String, $filter: PersonFilterVOInput){\n      data: persons(filter: $filter, offset: $offset, size: $size, sortBy: $sortBy, sortDirection: $sortDirection){\n        ...PersonFragment\n      }\n    }\n    ", ""], ["\n    query Persons($offset: Int, $size: Int, $sortBy: String, $sortDirection: String, $filter: PersonFilterVOInput){\n      data: persons(filter: $filter, offset: $offset, size: $size, sortBy: $sortBy, sortDirection: $sortDirection){\n        ...PersonFragment\n      }\n    }\n    ", ""])), PersonFragments.person),
         loadAllWithTotal: core.gql(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n    query PersonsWithTotal($offset: Int, $size: Int, $sortBy: String, $sortDirection: String, $filter: PersonFilterVOInput){\n      data: persons(filter: $filter, offset: $offset, size: $size, sortBy: $sortBy, sortDirection: $sortDirection){\n        ...PersonFragment\n      }\n      total: personsCount(filter: $filter)\n    }\n    ", ""], ["\n    query PersonsWithTotal($offset: Int, $size: Int, $sortBy: String, $sortDirection: String, $filter: PersonFilterVOInput){\n      data: persons(filter: $filter, offset: $offset, size: $size, sortBy: $sortBy, sortDirection: $sortDirection){\n        ...PersonFragment\n      }\n      total: personsCount(filter: $filter)\n    }\n    ", ""])), PersonFragments.person)
     };
     var PersonMutations = {
@@ -32215,7 +32242,7 @@
         { type: NetworkService },
         { type: EntitiesStorage }
     ]; };
-    var templateObject_1$5, templateObject_2$3, templateObject_3$2, templateObject_4$2, templateObject_5$2;
+    var templateObject_1$4, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2;
 
     var PersonValidatorService = /** @class */ (function () {
         function PersonValidatorService(formBuilder, accountValidatorService) {
@@ -32281,7 +32308,6 @@
             _this.statusById = StatusById;
             _this.filterCriteriaCount = 0;
             _this.useSticky = false;
-            _this.referentialToString = referentialToString;
             _this.canEdit = accountService.isAdmin();
             _this.canSendMessage = _this.canEdit;
             _this.inlineEdition = _this.canEdit;
@@ -32896,12 +32922,14 @@
             this.logContent = '';
             this.memoryHide = false;
             this.memoryMobile = true;
+            this.noTimeProperty = MOMENT_NO_TIME_PROPERTY;
             this.stringify = JSON.stringify;
             this.form = formBuilder.group({
                 empty: [null],
                 emptyRequired: [null, i1.Validators.required],
                 enable: [null, i1.Validators.required],
                 disable: [null, i1.Validators.required],
+                noTime: [null, i1.Validators.required],
                 readonly: [null]
             }, {
                 validators: SharedFormGroupValidators.dateRange('empty', 'enable')
@@ -32928,6 +32956,7 @@
                         emptyRequired: null,
                         enable: toDateISOString(now),
                         disable: now,
+                        noTime: DateUtils.markNoTime(DateUtils.resetTime(now)),
                         readonly: now
                     };
                     this.form.setValue(data);
@@ -32938,6 +32967,9 @@
                     this.form.get('enable').valueChanges
                         .pipe(operators.debounceTime(300))
                         .subscribe(function (value) { return _this.log('[test-page] Value n°2: ' + JSON.stringify(value)); });
+                    this.form.get('noTime').valueChanges
+                        .pipe(operators.debounceTime(300))
+                        .subscribe(function (value) { return _this.log('[test-page] Value n°3: ' + JSON.stringify(value)); });
                     return [2 /*return*/];
                 });
             });
@@ -32979,7 +33011,7 @@
     DateTimeTestPage.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-data-time-test',
-                    template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date/Time field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <!-- debugging memory leak -->\n      <ion-row><ion-col><ion-text><h4>Debug memory leak</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\">Start timer</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n        </ion-col>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput type=\"text\" hidden>\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [value]=\"memoryMobile\">\n              Mobile ?\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n        <ion-col>\n          <mat-date-time-field formControlName=\"emptyRequired\"\n                               *ngIf=\"!memoryHide\"\n                               placeholder=\"Date/Time\"\n                               [required]=\"true\"\n                               [mobile]=\"memoryMobile\"\n                               [clearable]=\"true\">\n            <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n          </mat-date-time-field>\n        </ion-col>\n      </ion-row>\n\n      <!-- Mobile mode -->\n      <ion-row><ion-col><ion-text><h4>Mobile mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty value + required -->\n        <ion-col>\n\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"emptyRequired\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <!-- debug console -->\n      <ion-row>\n        <!-- buttons -->\n        <ion-col size=\"2\">\n          <!-- submit form -->\n          <ion-button (click)=\"doSubmit($event)\"\n                      fill=\"outline\">\n            <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n\n          <!-- clear log  -->\n          <ion-button (click)=\"clearLogPanel()\"\n                      fill=\"outline\">\n            <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </ion-col>\n        <ion-col size=\"10\" *ngIf=\"showLogPanel\">\n          <ion-text color=\"primary\">Log:<br/></ion-text>\n          <div class=\"ion-padding-start\">\n            <ion-text color=\"medium\">\n              <small [innerHTML]=\"logContent\"></small>\n            </ion-text>\n          </div>\n        </ion-col>\n      </ion-row>\n\n      <!-- Desktop mode -->\n      <ion-row><ion-col><ion-text><h4>Desktop mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty required value -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"emptyRequired\"\n                                   placeholder=\"Date/Time\"\n                                   required\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Readonly  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly toggle\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.readonly.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-date-time-field #readonlyField formControlName=\"readonly\"\n                                   placeholder=\"Date/Time\"\n                                   [readonly]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n</ion-content>\n"
+                    template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date/Time field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <!-- debugging memory leak -->\n      <ion-row><ion-col><ion-text><h4>Debug memory leak</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\">Start timer</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n        </ion-col>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput type=\"text\" hidden>\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [value]=\"memoryMobile\">\n              Mobile ?\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n        <ion-col>\n          <mat-date-time-field formControlName=\"emptyRequired\"\n                               *ngIf=\"!memoryHide\"\n                               placeholder=\"Date/Time\"\n                               [required]=\"true\"\n                               [mobile]=\"memoryMobile\"\n                               [clearable]=\"true\">\n            <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n          </mat-date-time-field>\n        </ion-col>\n      </ion-row>\n\n      <!-- Mobile mode -->\n      <ion-row><ion-col><ion-text><h4>Mobile mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty value + required -->\n        <ion-col>\n\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"emptyRequired\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <!-- debug console -->\n      <ion-row>\n        <!-- buttons -->\n        <ion-col size=\"2\">\n          <!-- submit form -->\n          <ion-button (click)=\"doSubmit($event)\"\n                      fill=\"outline\">\n            <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n\n          <!-- clear log  -->\n          <ion-button (click)=\"clearLogPanel()\"\n                      fill=\"outline\">\n            <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </ion-col>\n        <ion-col size=\"10\" *ngIf=\"showLogPanel\">\n          <ion-text color=\"primary\">Log:<br/></ion-text>\n          <div class=\"ion-padding-start\">\n            <ion-text color=\"medium\">\n              <small [innerHTML]=\"logContent\"></small>\n            </ion-text>\n          </div>\n        </ion-col>\n      </ion-row>\n\n      <!-- Desktop mode -->\n      <ion-row><ion-col><ion-text><h4>Desktop mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty required value -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"emptyRequired\"\n                                   placeholder=\"Date/Time\"\n                                   required\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- NoTime  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value (No time)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.noTime.value) + ' noTime:' + (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"noTime\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Readonly  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly toggle\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.readonly.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-date-time-field #readonlyField formControlName=\"readonly\"\n                                   placeholder=\"Date/Time\"\n                                   [readonly]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n</ion-content>\n"
                 },] }
     ];
     DateTimeTestPage.ctorParameters = function () { return [
@@ -34154,6 +34186,106 @@
                 },] }
     ];
 
+    var UserEventTest_1;
+    // @dynamic
+    var UserEventTest = UserEventTest_1 = /** @class */ (function (_super) {
+        __extends(UserEventTest, _super);
+        function UserEventTest() {
+            return _super.call(this, UserEventTest_1.TYPENAME) || this;
+        }
+        UserEventTest.prototype.asObject = function (opts) {
+            var target = _super.prototype.asObject.call(this, 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;
+        };
+        UserEventTest.prototype.fromObject = function (source) {
+            Object.assign(this, source); // Copy all properties
+            _super.prototype.fromObject.call(this, source);
+            this.creationDate = fromDateISOString(source.creationDate);
+            this.readDate = fromDateISOString(source.readDate);
+            try {
+                // Deserialize content
+                if (typeof source.content === 'string' && source.content.startsWith('{')) {
+                    this.content = JSON.parse(source.content);
+                }
+                // Deserialize content.context
+                if (this.content && typeof this.content.context === 'string' && this.content.context.startsWith('{')) {
+                    this.content.context = JSON.parse(this.content.context);
+                }
+            }
+            catch (err) {
+                console.error('Error during UserEvent deserialization', err);
+            }
+        };
+        return UserEventTest;
+    }(Entity));
+    UserEventTest = UserEventTest_1 = __decorate([
+        EntityClass({ typename: 'UserEventTestVO' })
+    ], UserEventTest);
+    // @dynamic
+    var UserEventTestFilter = /** @class */ (function (_super) {
+        __extends(UserEventTestFilter, _super);
+        function UserEventTestFilter() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.types = [];
+            _this.levels = [];
+            _this.issuers = [];
+            _this.recipients = [];
+            _this.startDate = null;
+            _this.excludeRead = false;
+            return _this;
+        }
+        UserEventTestFilter.prototype.fromObject = function (source, opts) {
+            _super.prototype.fromObject.call(this, 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;
+        };
+        UserEventTestFilter.prototype.buildFilter = function () {
+            var _this = this;
+            var filterFns = _super.prototype.buildFilter.call(this);
+            if (isNotEmptyArray(this.types)) {
+                filterFns.push(function (t) { return _this.types.includes(t.type); });
+            }
+            if (isNotEmptyArray(this.levels)) {
+                filterFns.push(function (t) { return _this.levels.includes(t.level); });
+            }
+            if (isNotEmptyArray(this.issuers)) {
+                filterFns.push(function (t) { return _this.issuers.includes(t.issuer); });
+            }
+            if (isNotEmptyArray(this.recipients)) {
+                filterFns.push(function (t) { return _this.recipients.includes(t.recipient); });
+            }
+            if (isNotNil(this.startDate)) {
+                filterFns.push(function (t) { return _this.startDate.isSameOrBefore(t.creationDate); });
+            }
+            if (this.excludeRead === true) {
+                filterFns.push(function (t) { return isNil(t.readSignature); }); // todo or t.signature ?
+            }
+            return filterFns;
+        };
+        UserEventTestFilter.prototype.asObject = function (opts) {
+            var target = _super.prototype.asObject.call(this, opts);
+            return target;
+        };
+        return UserEventTestFilter;
+    }(EntityFilter));
+    UserEventTestFilter = __decorate([
+        EntityClass({ typename: 'UserEventTestFilterVO' })
+    ], UserEventTestFilter);
+
     var UserEventTestService = /** @class */ (function (_super) {
         __extends(UserEventTestService, _super);
         function UserEventTestService(graphql, accountService, network, translate, environment) {
@@ -34169,25 +34301,38 @@
             _this.network = network;
             _this.translate = translate;
             _this.environment = environment;
-            _this.userEvents = [];
+            _this.$userEvents = new rxjs.BehaviorSubject([]);
+            _this.$newUserEvents = new rxjs.Subject();
             return _this;
         }
         UserEventTestService.prototype.fromObject = function (source) {
-            return exports.UserEvent.fromObject(source);
+            return UserEventTest.fromObject(source);
         };
         UserEventTestService.prototype.add = function (entity) {
-            entity = this.processUserEvent(entity);
-            entity.id = this.userEvents.length + 1;
-            this.userEvents = __spread([
-                entity
-            ], this.userEvents);
-            this._countSubject.next((this._countSubject.value || 0) + 1);
+            var _a;
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this.processUserEvent(entity)];
+                        case 1:
+                            entity = _b.sent();
+                            entity.id = (((_a = this.$userEvents.value) === null || _a === void 0 ? void 0 : _a.length) || 0) + 1;
+                            this.$userEvents.next(__spread([
+                                entity
+                            ], this.$userEvents.value));
+                            this._countSubject.next((this._countSubject.value || 0) + 1);
+                            this.$newUserEvents.next([entity]);
+                            return [2 /*return*/];
+                    }
+                });
+            });
         };
         UserEventTestService.prototype.asFilter = function (filter) {
             return filter;
         };
         UserEventTestService.prototype.count = function (filter, options) {
-            return Promise.resolve(this.userEvents.length);
+            var _a;
+            return Promise.resolve(((_a = this.$userEvents.value) === null || _a === void 0 ? void 0 : _a.length) || 0);
         };
         UserEventTestService.prototype.delete = function (entity) {
             return Promise.resolve(undefined);
@@ -34195,12 +34340,12 @@
         UserEventTestService.prototype.deleteAll = function (data, opts) {
             return Promise.resolve(undefined);
         };
-        UserEventTestService.prototype.listenChanges = function (filter, options) {
-            return rxjs.of();
+        UserEventTestService.prototype.listenAllChanges = function (filter, options) {
+            return this.$newUserEvents.asObservable();
         };
         UserEventTestService.prototype.save = function (entity, options) {
             var _a;
-            var toSave = (_a = this.userEvents) === null || _a === void 0 ? void 0 : _a.find(function (value) { return value.id == (entity === null || entity === void 0 ? void 0 : entity.id); });
+            var toSave = (_a = this.$userEvents.value) === null || _a === void 0 ? void 0 : _a.find(function (value) { return value.id == (entity === null || entity === void 0 ? void 0 : entity.id); });
             Object.assign(toSave, entity);
             return entity;
         };
@@ -34235,31 +34380,33 @@
                             }
                             finally { if (e_1) throw e_1.error; }
                             return [7 /*endfinally*/];
-                        case 7: return [2 /*return*/, Promise.resolve(this.userEvents)];
+                        case 7: return [2 /*return*/, this.$userEvents.toPromise()];
                     }
                 });
             });
         };
         UserEventTestService.prototype.watchAll = function (offset, size, sortBy, sortDirection, filter, opts) {
             var _this = this;
-            var _a;
-            var data = (this.userEvents || []).slice(offset || 0, offset + size);
-            var total = ((_a = this.userEvents) === null || _a === void 0 ? void 0 : _a.length) || 0;
-            var res = { data: data, total: total };
-            // Must re-order because of listenChanges result will add new event at the end
-            data = EntityUtils.sort(data, sortBy, sortDirection);
-            // Add fetch more
-            var nextOffset = offset + data.length;
-            if (nextOffset < res.total) {
-                res.fetchMore = function (_) { return _this.loadAll(nextOffset, size, sortBy, sortDirection, filter, Object.assign(Object.assign({}, opts), { fetchPolicy: 'no-cache' })); };
-            }
-            return rxjs.of(res);
+            return this.$userEvents.pipe(operators.map(function (userEvents) {
+                var _a;
+                var data = (userEvents || []).slice(offset || 0, offset + size);
+                var total = ((_a = _this.$userEvents.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
+                var res = { data: data, total: total };
+                // Must re-order because of listenChanges result will add new event at the end
+                data = EntityUtils.sort(data, sortBy, sortDirection);
+                // Add fetch more
+                var nextOffset = offset + data.length;
+                if (nextOffset < res.total) {
+                    res.fetchMore = function (_) { return _this.loadAll(nextOffset, size, sortBy, sortDirection, filter, Object.assign(Object.assign({}, opts), { fetchPolicy: 'no-cache' })); };
+                }
+                return res;
+            }));
         };
         UserEventTestService.prototype.loadAll = function (offset, size, sortBy, sortDirection, filter, opts) {
             var _this = this;
             var _a;
-            var data = (this.userEvents || []).slice(offset || 0, offset + size);
-            var total = ((_a = this.userEvents) === null || _a === void 0 ? void 0 : _a.length) || 0;
+            var data = (this.$userEvents.value || []).slice(offset || 0, offset + size);
+            var total = ((_a = this.$userEvents.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
             var res = { data: data, total: total };
             // Must re-order because of listenChanges result will add new event at the end
             data = EntityUtils.sort(data, sortBy, sortDirection);
@@ -34303,6 +34450,16 @@
                 onRead: function (userEvent) { _this.showMessage("debug message read "); }
             });
         }
+        Object.defineProperty(UserEventTestingPage.prototype, "timerStarted", {
+            get: function () {
+                return !!this._timerSubscription;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        UserEventTestingPage.prototype.ngOnDestroy = function () {
+            this.stopTimer();
+        };
         UserEventTestingPage.prototype.customize = function (userEvent) {
             // Choose avatarIcon
             switch (userEvent.level) {
@@ -34333,7 +34490,7 @@
             }
         };
         UserEventTestingPage.prototype.addNotification = function () {
-            this.userEventService.add(exports.UserEvent.fromObject({
+            this.userEventService.add(UserEventTest.fromObject({
                 issuer: 'system',
                 recipient: 'me',
                 type: 'message',
@@ -34343,7 +34500,7 @@
             }));
         };
         UserEventTestingPage.prototype.addError = function () {
-            this.userEventService.add(exports.UserEvent.fromObject({
+            this.userEventService.add(UserEventTest.fromObject({
                 issuer: 'system',
                 recipient: 'me',
                 type: 'upload',
@@ -34353,7 +34510,7 @@
             }));
         };
         UserEventTestingPage.prototype.addWarning = function () {
-            this.userEventService.add(exports.UserEvent.fromObject({
+            this.userEventService.add(UserEventTest.fromObject({
                 issuer: 'system',
                 recipient: 'me',
                 type: 'download',
@@ -34363,7 +34520,7 @@
             }));
         };
         UserEventTestingPage.prototype.addDebug = function () {
-            this.userEventService.add(exports.UserEvent.fromObject({
+            this.userEventService.add(UserEventTest.fromObject({
                 issuer: 'system',
                 recipient: 'me',
                 type: 'debug',
@@ -34374,7 +34531,7 @@
         };
         UserEventTestingPage.prototype.addNotificationWithLink = function () {
             var _this = this;
-            this.userEventService.add(exports.UserEvent.fromObject({
+            this.userEventService.add(UserEventTest.fromObject({
                 issuer: 'system',
                 recipient: 'me',
                 type: 'message',
@@ -34392,7 +34549,7 @@
         };
         UserEventTestingPage.prototype.addNotificationWithAction = function () {
             var _this = this;
-            this.userEventService.add(exports.UserEvent.fromObject({
+            this.userEventService.add(UserEventTest.fromObject({
                 issuer: 'system',
                 recipient: 'me',
                 type: 'message',
@@ -34419,9 +34576,54 @@
                 ]
             }));
         };
+        UserEventTestingPage.prototype.addMany = function (count) {
+            count = count || 20;
+            for (var i = 0; i < count; i++) {
+                this.addRandom(i);
+            }
+        };
+        UserEventTestingPage.prototype.startTimer = function (period) {
+            var _this = this;
+            var _a;
+            (_a = this._timerSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            period = period || 1000;
+            var counter = 0;
+            this._timerSubscription = rxjs.timer(period, period)
+                .subscribe(function () {
+                _this.addRandom(counter);
+                counter++;
+            });
+        };
+        UserEventTestingPage.prototype.stopTimer = function () {
+            var _a;
+            (_a = this._timerSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            this._timerSubscription = null;
+        };
+        UserEventTestingPage.prototype.addRandom = function (value) {
+            switch (value % 6) {
+                case 0:
+                    this.addNotification();
+                    break;
+                case 1:
+                    this.addError();
+                    break;
+                case 2:
+                    this.addDebug();
+                    break;
+                case 3:
+                    this.addNotificationWithLink();
+                    break;
+                case 4:
+                    this.addNotificationWithAction();
+                    break;
+                case 5:
+                    this.addNotificationWithDefaultAction();
+                    break;
+            }
+        };
         UserEventTestingPage.prototype.addNotificationWithDefaultAction = function () {
             var _this = this;
-            this.userEventService.add(exports.UserEvent.fromObject({
+            this.userEventService.add(UserEventTest.fromObject({
                 issuer: 'system',
                 recipient: 'me',
                 type: 'message',
@@ -34445,7 +34647,7 @@
     UserEventTestingPage.decorators = [
         { type: i0.Component, args: [{
                     selector: 'job-progression-testing',
-                    template: "<ion-toolbar color=\"primary\">\n  <ion-title>User events</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <app-user-event-notification-icon #notification [debug]=\"true\"></app-user-event-notification-icon>\n\n  <p>\n    <ion-button (click)=\"addNotification()\">Add notification</ion-button>\n    <ion-button (click)=\"addError()\">Add error</ion-button>\n    <ion-button (click)=\"addWarning()\">Add warning</ion-button>\n    <ion-button (click)=\"addDebug()\">Add debug</ion-button>\n  </p>\n  <p>\n    <ion-button (click)=\"addNotificationWithLink()\">Add notification with link</ion-button>\n    <ion-button (click)=\"addNotificationWithAction()\">Add notification with action</ion-button>\n    <ion-button (click)=\"addNotificationWithDefaultAction()\">Add notification with default action</ion-button>\n  </p>\n</ion-content>\n"
+                    template: "<ion-toolbar color=\"primary\">\n  <ion-title>User events</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <app-user-event-notification-icon #notification [debug]=\"true\"></app-user-event-notification-icon>\n\n  <p>\n    <ion-button (click)=\"addNotification()\">Add notification</ion-button>\n    <ion-button (click)=\"addError()\">Add error</ion-button>\n    <ion-button (click)=\"addWarning()\">Add warning</ion-button>\n    <ion-button (click)=\"addDebug()\">Add debug</ion-button>\n  </p>\n  <p>\n    <ion-button (click)=\"addNotificationWithLink()\">Add notification with link</ion-button>\n    <ion-button (click)=\"addNotificationWithAction()\">Add notification with action</ion-button>\n    <ion-button (click)=\"addNotificationWithDefaultAction()\">Add notification with default action</ion-button>\n  </p>\n  <p>\n    <ion-button (click)=\"addMany()\">Add notifications (x20)</ion-button>\n  </p>\n  <p>\n    <ion-button (click)=\"startTimer()\" *ngIf=\"!timerStarted\">Start timer</ion-button>\n    <ion-button (click)=\"stopTimer()\" *ngIf=\"timerStarted\">Stop timer</ion-button>\n  </p>\n</ion-content>\n"
                 },] }
     ];
     UserEventTestingPage.ctorParameters = function () { return [
@@ -34658,6 +34860,8 @@
     exports.HomePage = HomePage;
     exports.Hotkeys = Hotkeys;
     exports.HotkeysDialogComponent = HotkeysDialogComponent;
+    exports.IMAGE_DEFAULTS = IMAGE_DEFAULTS;
+    exports.ImagesUtils = ImagesUtils;
     exports.InMemoryEntitiesService = InMemoryEntitiesService;
     exports.IsLoginAccountPipe = IsLoginAccountPipe;
     exports.IsNilOrBlankPipe = IsNilOrBlankPipe;
@@ -34683,6 +34887,7 @@
     exports.LongitudeFormatPipe = LongitudeFormatPipe;
     exports.MINIFY_ENTITY_FOR_LOCAL_STORAGE = MINIFY_ENTITY_FOR_LOCAL_STORAGE;
     exports.MINIFY_ENTITY_FOR_POD = MINIFY_ENTITY_FOR_POD;
+    exports.MOMENT_NO_TIME_PROPERTY = MOMENT_NO_TIME_PROPERTY;
     exports.MapGetPipe = MapGetPipe;
     exports.MapKeysPipe = MapKeysPipe;
     exports.MapValuesPipe = MapValuesPipe;
@@ -34809,12 +35014,10 @@
     exports.UploadFileTestingModule = UploadFileTestingModule;
     exports.UploadFileTestingPage = UploadFileTestingPage;
     exports.UriUtils = UriUtils;
-    exports.UserEventFragments = UserEventFragments;
     exports.UserEventModule = UserEventModule;
     exports.UserEventTestService = UserEventTestService;
     exports.UserEventTestingModule = UserEventTestingModule;
     exports.UserEventTestingPage = UserEventTestingPage;
-    exports.UserEventTypes = UserEventTypes;
     exports.UsersPage = UsersPage;
     exports.accountToString = accountToString;
     exports.adaptValueToControl = adaptValueToControl;