@sumaris-net/ngx-components 1.21.0-beta9 → 1.21.2

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

@@ -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,11 +208,7 @@
     var __createBinding = Object.create ? (function (o, m, k, k2) {
         if (k2 === undefined)
             k2 = 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);
+        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
     }) : (function (o, m, k, k2) {
         if (k2 === undefined)
             k2 = k;
@@ -367,11 +363,6 @@
             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;
@@ -509,67 +500,6 @@
     function removeDiacritics(text) {
         return text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
     }
-    function suggestFromArray(items, value, opts) {
-        var _this = this;
-        if (isNotNil(value) && typeof value === 'object')
-            return { data: [value] };
-        value = (typeof value === 'string' && value !== '*') && value.toUpperCase() || undefined;
-        var keys = opts && (opts.searchAttribute && [opts.searchAttribute] || opts.searchAttributes) || ['label'];
-        if (!items) {
-            return { data: [], total: 0 };
-        }
-        // Filter items
-        var filteredItems = items;
-        if (isNotNilOrBlank(value)) {
-            // If wildcard, search using regexp
-            if (value.indexOf('*') !== -1) {
-                value = value.replace(/[*]+/g, '.*');
-                filteredItems = filteredItems.filter(function (v) { return keys.findIndex(function (key) { return matchUpperCase(getPropertyByPathAsString(v, key), value); }) !== -1; });
-            }
-            // Else (no wildcard), search using startsWith
-            else {
-                filteredItems = filteredItems.filter(function (v) { return keys.findIndex(function (key) { return startsWithUpperCase(getPropertyByPathAsString(v, key), value); }) !== -1; });
-            }
-        }
-        // Exclude ids
-        if (isNotEmptyArray(opts === null || opts === void 0 ? void 0 : opts.excludedIds)) {
-            filteredItems = filteredItems.filter(function (v) { return !opts.excludedIds.includes(+v['id']); });
-        }
-        // Sort
-        if (!opts || opts.skipSort !== true) {
-            // Make to copy input items, before sorting (if not yet already done)
-            if (filteredItems === items)
-                filteredItems = filteredItems.slice();
-            // Sort by keys
-            filteredItems.sort(propertiesPathComparator(keys));
-        }
-        var total = filteredItems.length || 0;
-        // Pagination (truncate if need)
-        var pageData = filteredItems;
-        if (opts) {
-            if ((opts.offset || 0) > 0) {
-                pageData = pageData.slice(opts.offset);
-            }
-            if (isNotNil(opts.size) && pageData.length > opts.size) {
-                pageData = pageData.slice(0, opts.size);
-            }
-        }
-        var result = {
-            data: pageData,
-            total: total
-        };
-        // Add fetch more capability, if total was fetched
-        var nextOffset = (opts && opts.offset || 0) + pageData.length;
-        if (nextOffset < total) {
-            result.fetchMore = function (_) { return __awaiter(_this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    return [2 /*return*/, suggestFromArray(filteredItems, undefined /*OPTIMISATION: already applied*/, Object.assign(Object.assign({}, opts), { offset: nextOffset, skipSort: true, excludedIds: undefined // OPTIMISATION: already filtered
-                        }))];
-                });
-            }); };
-        }
-        return result;
-    }
     function suggestFromStringArray(values, value, options) {
         value = (typeof value === 'string' && value !== '*') && value.toUpperCase() || undefined;
         if (isNilOrBlank(value))
@@ -1117,11 +1047,11 @@
         }, null);
     }
     function firstTrue(obs) {
-        return obs.pipe(operators.first(function (v) { return v === true; }), operators.map(function (_) { }) // Convert to void
+        return obs.pipe(operators.first(function (value) { return value === true; }), operators.map(function (_) { }) // Convert to void
         );
     }
     function firstFalse(obs) {
-        return obs.pipe(operators.first(function (v) { return v === false; }), operators.map(function (_) { }) // Convert to void
+        return obs.pipe(operators.first(function (value) { return value === false; }), operators.map(function (_) { }) // Convert to void
         );
     }
     /**
@@ -1162,14 +1092,13 @@
     }
     function waitForTrue(observable, opts) {
         return __awaiter(this, void 0, void 0, function () {
-            var firstTrueObservable, $timeout;
+            var $timeout;
             return __generator(this, function (_a) {
-                firstTrueObservable = firstTrue(observable);
                 // Timeout (+ dueTime)
                 if (opts && opts.timeout > 0) {
                     $timeout = rxjs.timer(opts.timeout);
                     return [2 /*return*/, rxjs.merge(rxjs.timer(opts.dueTime || 0)
-                            .pipe(operators.switchMap(function () { return firstTrueObservable; }), operators.takeUntil($timeout)), $timeout
+                            .pipe(operators.switchMap(function () { return firstTrue(observable); }), operators.takeUntil($timeout)), $timeout
                             .pipe(operators.map(function () {
                             throw new Error("Timeout ready() - after " + opts.timeout + "ms");
                         })))
@@ -1178,10 +1107,19 @@
                 // dueTime (without timeout)
                 if (opts && opts.dueTime > 0) {
                     return [2 /*return*/, rxjs.timer(opts.dueTime)
-                            .pipe(operators.switchMap(function () { return firstTrueObservable; }))
+                            .pipe(operators.switchMap(function () { return firstTrue(observable); }))
                             .toPromise()];
                 }
-                return [2 /*return*/, firstTrueObservable.toPromise()];
+                return [2 /*return*/, firstTrue(observable).toPromise()];
+            });
+        });
+    }
+    function waitForFalse(observable, opts) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, waitForTrue(
+                    // Inverse the logic
+                    observable.pipe(operators.map(function (v) { return v === false; })), opts)];
             });
         });
     }
@@ -1386,6 +1324,68 @@
         return _cache.mobile;
     };
 
+    function suggestFromArray(items, value, opts) {
+        var _this = this;
+        if (isNotNil(value) && typeof value === 'object')
+            return { data: [value] };
+        value = (typeof value === 'string' && value !== '*') && value.toUpperCase() || undefined;
+        var keys = opts && (opts.searchAttribute && [opts.searchAttribute] || opts.searchAttributes) || ['label'];
+        if (!items) {
+            return { data: [], total: 0 };
+        }
+        // Filter items
+        var filteredItems = items;
+        if (isNotNilOrBlank(value)) {
+            // If wildcard, search using regexp
+            if (value.indexOf('*') !== -1) {
+                value = value.replace(/[*]+/g, '.*');
+                filteredItems = filteredItems.filter(function (v) { return keys.findIndex(function (key) { return matchUpperCase(getPropertyByPathAsString(v, key), value); }) !== -1; });
+            }
+            // Else (no wildcard), search using startsWith
+            else {
+                filteredItems = filteredItems.filter(function (v) { return keys.findIndex(function (key) { return startsWithUpperCase(getPropertyByPathAsString(v, key), value); }) !== -1; });
+            }
+        }
+        // Exclude ids
+        if (isNotEmptyArray(opts === null || opts === void 0 ? void 0 : opts.excludedIds)) {
+            filteredItems = filteredItems.filter(function (v) { return !opts.excludedIds.includes(+v['id']); });
+        }
+        // Sort
+        if (!opts || opts.skipSort !== true) {
+            // Make to copy input items, before sorting (if not yet already done)
+            if (filteredItems === items)
+                filteredItems = filteredItems.slice();
+            // Sort by keys
+            filteredItems.sort(propertiesPathComparator(keys));
+        }
+        var total = filteredItems.length || 0;
+        // Pagination (truncate if need)
+        var pageData = filteredItems;
+        if (opts) {
+            if ((opts.offset || 0) > 0) {
+                pageData = pageData.slice(opts.offset);
+            }
+            if (isNotNil(opts.size) && pageData.length > opts.size) {
+                pageData = pageData.slice(0, opts.size);
+            }
+        }
+        var result = {
+            data: pageData,
+            total: total
+        };
+        // Add fetch more capability, if total was fetched
+        var nextOffset = (opts && opts.offset || 0) + pageData.length;
+        if (nextOffset < total) {
+            result.fetchMore = function (_) { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, suggestFromArray(filteredItems, undefined /*OPTIMISATION: already applied*/, Object.assign(Object.assign({}, opts), { offset: nextOffset, skipSort: true, excludedIds: undefined // OPTIMISATION: already filtered
+                        }))];
+                });
+            }); };
+        }
+        return result;
+    }
+
     var MatAutocompleteConfigHolder = /** @class */ (function () {
         function MatAutocompleteConfigHolder(options) {
             this.options = options;
@@ -1706,11 +1706,11 @@
             // Search text (no distinctUntilChanged() because of the debounceTime() pipe)
             this.formControl.valueChanges
                 .pipe(operators.filter(function (value) { return _this.enabled && isNotNilString(value); }), 
-            // Mark as loading (to show loading spinner) - earlier as possible, so before the debounce time
+            // Mark as loading (to show loading spinner) - as soon as possible, and before debounceTime
             operators.tap(function (_) { return _this.showLoadingSpinner && _this.markAsLoading(); }), 
             // Filter if not enough character
             operators.filter(function (value) {
-                if (value.length <= _this.suggestLengthThreshold) {
+                if (((value === null || value === void 0 ? void 0 : value.length) || 0) < _this.suggestLengthThreshold) {
                     // Update display value, to enable the message "not enough characters"
                     _this.displayValue = value;
                     return false;
@@ -2709,9 +2709,9 @@
                 var cleanedSearchText = removeDiacritics(searchRegexp).toUpperCase();
                 var index = removeDiacritics(value.toUpperCase()).indexOf(cleanedSearchText);
                 if (index !== -1) {
-                    return value.substr(0, index - 1) +
-                        '<b>' + value.substr(index, cleanedSearchText.length) + '</b>' +
-                        value.substr(index + cleanedSearchText.length);
+                    return value.substring(0, index - 1) +
+                        '<b>' + value.substring(index, cleanedSearchText.length) + '</b>' +
+                        value.substring(index + cleanedSearchText.length);
                 }
                 return value;
             }
@@ -3159,12 +3159,10 @@
         };
         return IsNotNilOrBlankPipe;
     }());
-    IsNotNilOrBlankPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function IsNotNilOrBlankPipe_Factory() { return new IsNotNilOrBlankPipe(); }, token: IsNotNilOrBlankPipe, providedIn: "root" });
     IsNotNilOrBlankPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'isNotNilOrBlank'
-                },] },
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+                },] }
     ];
     var IsNilOrBlankPipe = /** @class */ (function () {
         function IsNilOrBlankPipe() {
@@ -3174,12 +3172,10 @@
         };
         return IsNilOrBlankPipe;
     }());
-    IsNilOrBlankPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function IsNilOrBlankPipe_Factory() { return new IsNilOrBlankPipe(); }, token: IsNilOrBlankPipe, providedIn: "root" });
     IsNilOrBlankPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'isNilOrBlank'
-                },] },
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+                },] }
     ];
     var ToStringPipe = /** @class */ (function () {
         function ToStringPipe() {
@@ -3189,12 +3185,10 @@
         };
         return ToStringPipe;
     }());
-    ToStringPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function ToStringPipe_Factory() { return new ToStringPipe(); }, token: ToStringPipe, providedIn: "root" });
     ToStringPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'toString'
-                },] },
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+                },] }
     ];
     var StrLengthPipe = /** @class */ (function () {
         function StrLengthPipe() {
@@ -3204,12 +3198,10 @@
         };
         return StrLengthPipe;
     }());
-    StrLengthPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function StrLengthPipe_Factory() { return new StrLengthPipe(); }, token: StrLengthPipe, providedIn: "root" });
     StrLengthPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'strLength'
-                },] },
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+                },] }
     ];
     var StrIncludesPipe = /** @class */ (function () {
         function StrIncludesPipe() {
@@ -3219,12 +3211,10 @@
         };
         return StrIncludesPipe;
     }());
-    StrIncludesPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function StrIncludesPipe_Factory() { return new StrIncludesPipe(); }, token: StrIncludesPipe, providedIn: "root" });
     StrIncludesPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'strIncludes'
-                },] },
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+                },] }
     ];
 
     var TranslateContextService = /** @class */ (function () {
@@ -4769,7 +4759,7 @@
         function FormGetControlPipe() {
         }
         FormGetControlPipe.prototype.transform = function (form, path) {
-            return (form && path && form.get(path) || form);
+            return (form && isNotNil(path) && form.get(path) || form);
         };
         return FormGetControlPipe;
     }());
@@ -4805,8 +4795,7 @@
                 },] }
     ];
     var FormGetValuePipe = /** @class */ (function () {
-        function FormGetValuePipe(adapter, _ref) {
-            this.adapter = adapter;
+        function FormGetValuePipe(_ref) {
             this._ref = _ref;
             this.value = undefined;
             this._lastControl = null;
@@ -4874,7 +4863,6 @@
                 },] }
     ];
     FormGetValuePipe.ctorParameters = function () { return [
-        { type: FormErrorTranslator },
         { type: i0.ChangeDetectorRef }
     ]; };
 
@@ -5796,10 +5784,10 @@
                 return this._tabindex;
             },
             set: function (value) {
-                var _this = this;
                 if (this._tabindex !== value) {
                     this._tabindex = value;
-                    setTimeout(function () { return _this.updateTabIndex(); });
+                    if (!this._writing)
+                        this.updateTabIndex();
                 }
             },
             enumerable: false,
@@ -6191,10 +6179,10 @@
                 return this._tabindex;
             },
             set: function (value) {
-                var _this = this;
                 if (this._tabindex !== value) {
                     this._tabindex = value;
-                    setTimeout(function () { return _this.updateTabIndex(); });
+                    if (!this._writing)
+                        this.updateTabIndex();
                 }
             },
             enumerable: false,
@@ -12044,7 +12032,7 @@
         Object.defineProperty(LocalSettingsService.prototype, "usageMode", {
             get: function () {
                 var _a;
-                if (isNil((_a = this._data) === null || _a === void 0 ? void 0 : _a.mobile)) {
+                if (isNil((_a = this._data) === null || _a === void 0 ? void 0 : _a.usageMode)) {
                     console.warn("[settings] Accessing to property 'usageMode' BEFORE service started! Please use ready()");
                     return isCordova(window) ? 'FIELD' : 'DESK';
                 }
@@ -15234,7 +15222,8 @@
                 console.debug('[graphql] Apply token authentication to headers');
                 this.connectionParams.authToken = token;
             }
-            else {
+            // Clean auth token
+            else if (this.connectionParams.authToken) {
                 console.debug('[graphql] Remove token authentication from headers');
                 delete this.connectionParams.authToken;
                 // Clear cache
@@ -15246,7 +15235,8 @@
                 console.debug('[graphql] Apply basic authentication to headers');
                 this.connectionParams.authBasic = basic;
             }
-            else {
+            // Clean auth basic
+            else if (this.connectionParams.authBasic) {
                 console.debug('[graphql] Remove basic authentication from headers');
                 delete this.connectionParams.authBasic;
                 // Clear cache
@@ -19948,12 +19938,12 @@
     var AppForm = /** @class */ (function () {
         function AppForm(injector, form) {
             var _this = this;
-            this.error = null;
+            this._subscription = new rxjs.Subscription();
             this._enable = false;
-            this._$ready = new rxjs.BehaviorSubject(false);
-            this._$loading = new rxjs.BehaviorSubject(true);
             this.i18nFieldPrefix = null;
-            this._subscription = new rxjs.Subscription();
+            this.readySubject = new rxjs.BehaviorSubject(false);
+            this.loadingSubject = new rxjs.BehaviorSubject(true);
+            this.errorSubject = new rxjs.BehaviorSubject(undefined);
             this.debug = false;
             this.onCancel = new i0.EventEmitter();
             this.onSubmit = new i0.EventEmitter();
@@ -19972,20 +19962,57 @@
              *  @deprecated
              */
             get: function () {
-                return this._$loading.value;
+                return this.loadingSubject.value;
             },
             /**
              *  @deprecated
              */
             set: function (value) {
-                this._$loading.next(value);
+                this.loadingSubject.next(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppForm.prototype, "_$ready", {
+            /**
+             *  @deprecated
+             */
+            get: function () {
+                return this.readySubject;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppForm.prototype, "_$loading", {
+            /**
+             *  @deprecated
+             */
+            get: function () {
+                return this.loadingSubject;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppForm.prototype, "error", {
+            get: function () {
+                return this.errorSubject.value;
+            },
+            set: function (error) {
+                this.setError(error);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(AppForm.prototype, "loading", {
             get: function () {
-                return this._$loading.value;
+                return this.loadingSubject.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppForm.prototype, "loaded", {
+            get: function () {
+                return !this.loadingSubject.value;
             },
             enumerable: false,
             configurable: true
@@ -20002,7 +20029,8 @@
         });
         Object.defineProperty(AppForm.prototype, "dirty", {
             get: function () {
-                return this.form && this.form.dirty;
+                var _a;
+                return ((_a = this.form) === null || _a === void 0 ? void 0 : _a.dirty) || false;
             },
             enumerable: false,
             configurable: true
@@ -20023,7 +20051,8 @@
         });
         Object.defineProperty(AppForm.prototype, "valid", {
             get: function () {
-                return this.form && this.form.valid;
+                var _a;
+                return ((_a = this.form) === null || _a === void 0 ? void 0 : _a.valid) || false;
             },
             enumerable: false,
             configurable: true
@@ -20092,17 +20121,19 @@
         };
         AppForm.prototype.ngOnDestroy = function () {
             this._subscription.unsubscribe();
-            this.onCancel.complete();
+            this.readySubject.unsubscribe();
+            this.loadingSubject.unsubscribe();
+            this.errorSubject.unsubscribe();
             this.onCancel.unsubscribe();
-            this.onSubmit.complete();
             this.onSubmit.unsubscribe();
-            this._$ready.complete();
-            this._$ready.unsubscribe();
-            this._$loading.complete();
-            this._$loading.unsubscribe();
         };
         AppForm.prototype.cancel = function () {
-            this.onCancel.emit();
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    this.onCancel.emit();
+                    return [2 /*return*/];
+                });
+            });
         };
         /**
          *
@@ -20207,22 +20238,14 @@
                 this.markForCheck();
         };
         AppForm.prototype.markAsLoading = function (opts) {
-            if (this._$loading.value !== true) {
-                this._$loading.next(true);
-                if (!opts || opts.emitEvent !== false)
-                    this.markForCheck();
-            }
+            this.setLoading(true, opts);
         };
         AppForm.prototype.markAsLoaded = function (opts) {
-            if (this._$loading.value !== false) {
-                this._$loading.next(false);
-                if (!opts || opts.emitEvent !== false)
-                    this.markForCheck();
-            }
+            this.setLoading(false, opts);
         };
         AppForm.prototype.markAsReady = function (opts) {
-            if (this._$ready.value !== true) {
-                this._$ready.next(true);
+            if (this.readySubject.value !== true) {
+                this.readySubject.next(true);
                 // If subclasses implements OnReady
                 if (typeof this['ngOnReady'] === 'function') {
                     this.ngOnReady();
@@ -20234,18 +20257,18 @@
          * @param opts
          */
         AppForm.prototype.ready = function (opts) {
-            return waitForTrue(this._$ready, opts);
+            if (this.readySubject.value)
+                return Promise.resolve();
+            return waitForTrue(this.readySubject, opts);
         };
         /**
-         * Wait form is idle (not loading)
+         * Wait form is not busy (=loaded)
          * @param opts
          */
         AppForm.prototype.waitIdle = function (opts) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    return [2 /*return*/, AppFormUtils.waitIdle(this, opts)];
-                });
-            });
+            if (!this.loadingSubject.value)
+                return Promise.resolve();
+            return waitForFalse(this.loadingSubject, opts);
         };
         AppForm.prototype.updateValueAndValidity = function (opts) {
             AppFormUtils.updateValueAndValidity(this.form, opts);
@@ -20275,10 +20298,27 @@
         AppForm.prototype.registerAutocompleteField = function (fieldName, opts) {
             return this.autocompleteHelper.add(fieldName, opts);
         };
+        AppForm.prototype.setError = function (value, opts) {
+            if (this.errorSubject.value !== value) {
+                this.errorSubject.next(value);
+                if (!opts || opts.emitEvent !== false) {
+                    this.markForCheck();
+                }
+            }
+        };
         AppForm.prototype.markForCheck = function () {
             // Should be overwritten by subclasses
             console.warn('markForCheck() has been called, but is not overwritten by component ' + this.constructor.name);
         };
+        /* -- private function -- */
+        AppForm.prototype.setLoading = function (value, opts) {
+            if (this.loadingSubject.value !== value) {
+                this.loadingSubject.next(value);
+                if (!opts || opts.emitEvent !== false) {
+                    this.markForCheck();
+                }
+            }
+        };
         return AppForm;
     }());
     AppForm.decorators = [
@@ -20739,14 +20779,14 @@
             }
             return this._onChange
                 .pipe(operators.filter(isNotNil), operators.mergeMap(function (_) { return waitFor(function () { return !_this._saving; }); }), operators.mergeMap(function (_) { return __awaiter(_this, void 0, void 0, function () {
-                var excludedDataByFilter, excludedDataByPagination, data, promiseOrData, _a, total;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var excludedDataByFilter, excludedDataByPagination, data, promiseOrData, _b, total;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             excludedDataByFilter = [];
-                            _b.label = 1;
+                            _c.label = 1;
                         case 1:
-                            _b.trys.push([1, , 6, 7]);
+                            _c.trys.push([1, , 6, 7]);
                             if (isEmptyArray(this.data)) {
                                 return [2 /*return*/, { data: [], total: 0 }];
                             }
@@ -20756,14 +20796,14 @@
                             if (!((promiseOrData instanceof Promise))) return [3 /*break*/, 3];
                             return [4 /*yield*/, promiseOrData];
                         case 2:
-                            _a = _b.sent();
+                            _b = _c.sent();
                             return [3 /*break*/, 4];
                         case 3:
-                            _a = promiseOrData;
-                            _b.label = 4;
+                            _b = promiseOrData;
+                            _c.label = 4;
                         case 4:
-                            data = _a;
-                            _b.label = 5;
+                            data = _b;
+                            _c.label = 5;
                         case 5:
                             // Apply filter (will update hiddenData)
                             data = this.filter(data, filterData, excludedDataByFilter);
@@ -20819,16 +20859,16 @@
         };
         InMemoryEntitiesService.prototype.saveAll = function (data, options) {
             return __awaiter(this, void 0, void 0, function () {
-                var res, _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var res, _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             if (!this.data)
                                 throw new Error('[memory-service] Could not save, because value not set');
                             this.markAsSaving();
-                            _b.label = 1;
+                            _c.label = 1;
                         case 1:
-                            _b.trys.push([1, , 6, 7]);
+                            _c.trys.push([1, , 6, 7]);
                             // Restore hidden data
                             if (isNotEmptyArray(this._hiddenData))
                                 data = data.concat.apply(data, __spread(this._hiddenData));
@@ -20837,14 +20877,14 @@
                             if (!((res instanceof Promise))) return [3 /*break*/, 3];
                             return [4 /*yield*/, res];
                         case 2:
-                            _a = _b.sent();
+                            _b = _c.sent();
                             return [3 /*break*/, 4];
                         case 3:
-                            _a = res;
-                            _b.label = 4;
+                            _b = res;
+                            _c.label = 4;
                         case 4:
-                            data = _a;
-                            _b.label = 5;
+                            data = _b;
+                            _c.label = 5;
                         case 5:
                             this.data = data;
                             this.dirty = true;
@@ -20861,7 +20901,7 @@
             return __awaiter(this, void 0, void 0, function () {
                 var updatedData, deleteCount;
                 var _this = this;
-                return __generator(this, function (_a) {
+                return __generator(this, function (_b) {
                     if (!this.data)
                         throw new Error('[memory-service] Could not delete, because value not set');
                     updatedData = this.data.filter(function (entity) {
@@ -20895,6 +20935,26 @@
                 return this._equalsFn(d1, d2);
             return d1 && d1.equals ? d1.equals(d2) : EntityUtils.equals(d1, d2, 'id');
         };
+        Object.defineProperty(InMemoryEntitiesService.prototype, "count", {
+            /**
+             * Count data stored by the service (without hidden data).
+             * @param opts
+             */
+            get: function () {
+                var _a;
+                return (((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) || 0);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(InMemoryEntitiesService.prototype, "hiddenCount", {
+            get: function () {
+                var _a;
+                return ((_a = this._hiddenData) === null || _a === void 0 ? void 0 : _a.length) || 0;
+            },
+            enumerable: false,
+            configurable: true
+        });
         /* -- protected methods -- */
         InMemoryEntitiesService.prototype.filter = function (data, _filter, hiddenData) {
             // if filter is DataFilter instance, use its test function
@@ -21522,7 +21582,12 @@
             }
         };
         AuthForm.prototype.cancel = function () {
-            this.onCancel.emit();
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    this.onCancel.emit();
+                    return [2 /*return*/];
+                });
+            });
         };
         AuthForm.prototype.doSubmit = function (event) {
             return __awaiter(this, void 0, void 0, function () {
@@ -22541,8 +22606,12 @@
             });
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_c) {
-                    _super.cancel.call(this);
-                    return [2 /*return*/];
+                    switch (_c.label) {
+                        case 0: return [4 /*yield*/, _super.cancel.call(this)];
+                        case 1:
+                            _c.sent();
+                            return [2 /*return*/];
+                    }
                 });
             });
         };
@@ -24749,7 +24818,7 @@
     MenuComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-menu',
-                    template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" contentId=\"menu-content\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px;\"/>\n              <span *ngIf=\"!logo\" width=\"108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n\n            <button mat-button type=\"button\"\n                    [routerLink]=\"['/account']\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"ion-color-primary\"\n                    (click)=\"close()\">\n              <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                <h3 class=\"no-margin username\">\n                  <b>{{accountName}}</b>\n                </h3>\n                <h4>{{accountEmail}}</h4>\n              </ion-label>\n            </button>\n\n<!--            todo ajouter ici les 2 composants du module social -->\n\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of $items | async\">\n\n          <!-- link -->\n          <ion-item *ngIf=\"!loading && item.path\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    [routerLink]=\"item.path\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"selected\"\n                    [routerLinkActiveOptions]=\"{exact: (item.path === '/')}\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- action -->\n          <ion-item *ngIf=\"!loading && item.action\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    (click)=\"doAction(item.action, $event)\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- divider -->\n          <ion-item-divider @fadeInAnimation\n                            class=\"{{item.cssClass}} {{item.color}}\"\n                            *ngIf=\"!loading && !item.path && !item.action\">\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item-divider>\n\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\n</ion-split-pane>\n",
+                    template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" contentId=\"menu-content\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px;\"/>\n              <span *ngIf=\"!logo\" width=\"108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n\n            <button mat-button type=\"button\"\n                    [routerLink]=\"['/account']\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"ion-color-primary\"\n                    (click)=\"close()\">\n              <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                <h3 class=\"no-margin username\">\n                  <b>{{accountName}}</b>\n                </h3>\n                <h4>{{accountEmail}}</h4>\n              </ion-label>\n            </button>\n\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of $items | async\">\n\n          <!-- link -->\n          <ion-item *ngIf=\"!loading && item.path\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    [routerLink]=\"item.path\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"selected\"\n                    [routerLinkActiveOptions]=\"{exact: (item.path === '/')}\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- action -->\n          <ion-item *ngIf=\"!loading && item.action\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    (click)=\"doAction(item.action, $event)\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- divider -->\n          <ion-item-divider @fadeInAnimation\n                            class=\"{{item.cssClass}} {{item.color}}\"\n                            *ngIf=\"!loading && !item.path && !item.action\">\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item-divider>\n\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\n</ion-split-pane>\n",
                     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-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)}}"]
@@ -24817,7 +24886,6 @@
                 this.icon = value.icon;
                 this.matIcon = value.matIcon;
                 this.matSvgIcon = value.matSvgIcon;
-                this.color = value.color;
             },
             enumerable: false,
             configurable: true
@@ -24828,7 +24896,7 @@
     AppIconComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-icon',
-                    template: "<ion-icon *ngIf=\"icon; else matIconTemplate\" slot=\"icon-only\"\n          [color]=\"color\"\n          [name]=\"icon\"\n          [style.height.px]=\"height\"\n          [style.width.px]=\"width\"\n></ion-icon>\n<ng-template #matIconTemplate>\n  <mat-icon [svgIcon]=\"matSvgIcon\"\n            [style.color]=\"'var(--ion-color-'+color+')'\"\n            [style.height.px]=\"height\"\n            [style.width.px]=\"width\"\n            [style.font-size.px]=\"height || width\"\n  >{{matIcon}}</mat-icon>\n</ng-template>\n\n"
+                    template: "<ion-icon *ngIf=\"icon; else matIconTemplate\" slot=\"icon-only\"\n          [color]=\"color\"\n          [name]=\"icon\"\n></ion-icon>\n<ng-template #matIconTemplate>\n  <mat-icon [svgIcon]=\"matSvgIcon\"\n            [style.color]=\"'var(--ion-color-'+color+')'\">{{matIcon}}</mat-icon>\n</ng-template>\n\n"
                 },] }
     ];
     AppIconComponent.propDecorators = {
@@ -24836,8 +24904,6 @@
         matIcon: [{ type: i0.Input }],
         matSvgIcon: [{ type: i0.Input }],
         color: [{ type: i0.Input }],
-        height: [{ type: i0.Input }],
-        width: [{ type: i0.Input }],
         ref: [{ type: i0.Input }]
     };
 
@@ -26074,10 +26140,6 @@
             get: function () {
                 return this.errorSubject.value;
             },
-            /**
-             * @deprecated
-             * @param error
-             */
             set: function (error) {
                 this.setError(error);
             },
@@ -26085,6 +26147,9 @@
             configurable: true
         });
         Object.defineProperty(AppTable.prototype, "error$", {
+            /**
+             * @deprecated
+             */
             get: function () {
                 return this.errorSubject.asObservable();
             },
@@ -26092,6 +26157,9 @@
             configurable: true
         });
         Object.defineProperty(AppTable.prototype, "loading$", {
+            /**
+             * @deprecated
+             */
             get: function () {
                 return this.loadingSubject.asObservable();
             },
@@ -26099,6 +26167,9 @@
             configurable: true
         });
         Object.defineProperty(AppTable.prototype, "saving$", {
+            /**
+             * @deprecated
+             */
             get: function () {
                 return this.savingSubject.asObservable();
             },
@@ -26268,17 +26339,15 @@
             if (this.savingSubject.value !== true) {
                 this.focusColumn = undefined; // unselect focus column
                 this.savingSubject.next(true);
-                if (!opts || opts.emitEvent !== false) {
+                if (!opts || opts.emitEvent !== false)
                     this.markForCheck();
-                }
             }
         };
         AppTable.prototype.markAsSaved = function (opts) {
             if (this.savingSubject.value !== false) {
                 this.savingSubject.next(false);
-                if (!opts || opts.emitEvent !== false) {
+                if (!opts || opts.emitEvent !== false)
                     this.markForCheck();
-                }
             }
         };
         AppTable.prototype.markAsLoading = function (opts) {
@@ -26603,7 +26672,7 @@
                     .then(function () { return _this.editRowById(event, row.id, { focusColumn: _this.lastUserColumn }); });
                 return true;
             }
-            // Edit next row
+            // Edit previous row
             this.editRow(event, row, { focusColumn: this.lastUserColumn });
             return true;
         };
@@ -26631,8 +26700,7 @@
                             if (id < 0)
                                 return [2 /*return*/];
                             if (!(id >= this.visibleRowCount)) return [3 /*break*/, 1];
-                            this.focusColumn = opts && opts.focusColumn || this.firstUserColumn;
-                            this.addRow(event);
+                            this.addRow(event, undefined, opts);
                             return [3 /*break*/, 3];
                         case 1: return [4 /*yield*/, this.dataSource.getRow(id)];
                         case 2:
@@ -26710,7 +26778,7 @@
                 this.cancelExistingRow(event, row, opts);
             }
         };
-        AppTable.prototype.addRow = function (event, insertAt) {
+        AppTable.prototype.addRow = function (event, insertAt, opts) {
             if (this.debug)
                 console.debug('[table] Asking for new row...');
             if (!this._enabled)
@@ -26725,7 +26793,7 @@
                 return false;
             }
             // Add new row
-            this.addRowToTable(insertAt);
+            this.addRowToTable(insertAt, opts);
             return true;
         };
         AppTable.prototype.save = function (opts) {
@@ -26870,7 +26938,7 @@
          * @param event
          * @param row
          * @param opts Use interactive=false to avoid user interaction (e.g. user confirmation)
-         *  Use skipIfLoading=false to force deletion even if table is busy
+         *  And to force deletion even if table is busy
          */
         AppTable.prototype.deleteRow = function (event, row, opts) {
             return __awaiter(this, void 0, void 0, function () {
@@ -26890,7 +26958,7 @@
          * @param event
          * @param rows
          * @param opts Use interactive=false to avoid user interaction (e.g. user confirmation)
-         *    Use skipIfLoading=false to force deletion even if table is busy
+         *    And to force deletion even if table is busy
          */
         AppTable.prototype.deleteRows = function (event, rows, opts) {
             var _a;
@@ -26908,8 +26976,8 @@
                             event === null || event === void 0 ? void 0 : event.preventDefault();
                             if (!this._enabled || isEmptyArray(rows))
                                 return [2 /*return*/, 0]; // Skip is disabled, or no rows to delete
-                            if (this.loading && (!opts || opts.skipIfLoading !== false)) {
-                                console.warn('[app-table] Skip deleteRows() because table is busy (loading). Use opts.skipLoading = false to force deletion');
+                            if (this.loading && (!opts || opts.interactive !== false)) {
+                                console.warn('[app-table] Skip deleteRows() because table is busy (loading). Use opts.interactive = false to force deletion');
                                 return [2 /*return*/, 0]; // Skip if loading
                             }
                             // Make sure to keep newly created row
@@ -27068,29 +27136,11 @@
         AppTable.prototype.moveRow = function (id, direction) {
             this.dataSource.move(id, direction);
         };
-        AppTable.prototype.ready = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
-                        case 0: return [4 /*yield*/, firstTruePromise(this.readySubject)];
-                        case 1:
-                            _e.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            });
+        AppTable.prototype.ready = function (opts) {
+            return waitForTrue(this.readySubject, opts);
         };
         AppTable.prototype.waitIdle = function (opts) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
-                        case 0: return [4 /*yield*/, firstFalsePromise(this.loadingSubject)];
-                        case 1:
-                            _e.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            });
+            return waitForFalse(this.loadingSubject, opts);
         };
         AppTable.prototype.openSelectColumnsModal = function (event) {
             return __awaiter(this, void 0, void 0, function () {
@@ -27548,12 +27598,13 @@
             //if (this.debug) console.debug("[table] id = " + id);
             return id;
         };
-        AppTable.prototype.addRowToTable = function (insertAt) {
+        AppTable.prototype.addRowToTable = function (insertAt, opts) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_e) {
                     switch (_e.label) {
                         case 0:
                             this.focusFirstColumn = true;
+                            this.focusColumn = (opts === null || opts === void 0 ? void 0 : opts.focusColumn) || this.firstUserColumn;
                             return [4 /*yield*/, this._dataSource.asyncCreateNew(insertAt)];
                         case 1:
                             _e.sent();
@@ -27934,8 +27985,9 @@
             this._subscription = new rxjs.Subscription();
             this._enabled = false;
             this._dirty = false;
-            this._$ready = new rxjs.BehaviorSubject(false);
-            this._$loading = new rxjs.BehaviorSubject(true);
+            this.readySubject = new rxjs.BehaviorSubject(false);
+            this.loadingSubject = new rxjs.BehaviorSubject(true);
+            this.errorSubject = new rxjs.BehaviorSubject(undefined);
             this.debug = false;
             this.submitted = false;
             this.toolbar = null;
@@ -27946,13 +27998,43 @@
              *  @deprecated
              */
             get: function () {
-                return this._$loading.value;
+                return this.loadingSubject.value;
             },
             /**
              *  @deprecated
              */
             set: function (value) {
-                this._$loading.next(value);
+                this.loadingSubject.next(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppEditor.prototype, "_$ready", {
+            /**
+             *  @deprecated
+             */
+            get: function () {
+                return this.readySubject;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppEditor.prototype, "_$loading", {
+            /**
+             *  @deprecated
+             */
+            get: function () {
+                return this.loadingSubject;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppEditor.prototype, "error", {
+            get: function () {
+                return this.errorSubject.value;
+            },
+            set: function (error) {
+                this.setError(error);
             },
             enumerable: false,
             configurable: true
@@ -28009,7 +28091,7 @@
         Object.defineProperty(AppEditor.prototype, "loading", {
             get: function () {
                 var _a;
-                return this._$loading.value || (((_a = this._children) === null || _a === void 0 ? void 0 : _a.findIndex(function (c) { return c.enabled && c.loading; })) !== -1) || false;
+                return this.loadingSubject.value || (((_a = this._children) === null || _a === void 0 ? void 0 : _a.findIndex(function (c) { return c.enabled && c.loading; })) !== -1) || false;
             },
             enumerable: false,
             configurable: true
@@ -28053,10 +28135,9 @@
         };
         AppEditor.prototype.ngOnDestroy = function () {
             this._subscription.unsubscribe();
-            this._$ready.complete();
-            this._$ready.unsubscribe();
-            this._$loading.complete();
-            this._$loading.unsubscribe();
+            this.readySubject.unsubscribe();
+            this.loadingSubject.unsubscribe();
+            this.errorSubject.unsubscribe();
         };
         AppEditor.prototype.addChildForm = function (form) {
             if (!form)
@@ -28126,16 +28207,16 @@
                 this.markForCheck();
         };
         AppEditor.prototype.markAsLoading = function (opts) {
-            if (!this._loading) {
-                this._loading = true;
+            if (!this.loadingSubject.value) {
+                this.loadingSubject.next(true);
                 if (!opts || opts.emitEvent !== false)
                     this.markForCheck();
             }
         };
         AppEditor.prototype.markAsLoaded = function (opts) {
             var _a;
-            if (this._loading) {
-                this._loading = false;
+            if (this.loadingSubject.value) {
+                this.loadingSubject.next(false);
                 if (!opts || opts.onlySelf !== true) {
                     // Emit to children forms
                     // Tables should be changed by parent
@@ -28149,17 +28230,17 @@
         AppEditor.prototype.markAsReady = function (opts) {
             var _a;
             (_a = this._children) === null || _a === void 0 ? void 0 : _a.forEach(function (c) { return c.markAsReady(opts); });
-            this._$ready.next(true);
+            this.readySubject.next(true);
         };
         AppEditor.prototype.ready = function (opts) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    return [2 /*return*/, waitForTrue(this._$ready, opts)];
-                });
-            });
+            if (this.readySubject.value)
+                return Promise.resolve();
+            return waitForTrue(this.readySubject, opts);
         };
         AppEditor.prototype.waitIdle = function (opts) {
-            return AppFormUtils.waitIdle(this, opts);
+            if (!this.loadingSubject.value)
+                return Promise.resolve();
+            return waitForFalse(this.loadingSubject, opts);
         };
         AppEditor.prototype.cancel = function (event) {
             return __awaiter(this, void 0, void 0, function () {
@@ -28415,6 +28496,14 @@
                 console.warn(prefix + " Unknown children sub-form: ", c);
             }
         };
+        AppEditor.prototype.setError = function (value, opts) {
+            if (this.errorSubject.value !== value) {
+                this.errorSubject.next(value);
+                if (!opts || opts.emitEvent !== false) {
+                    this.markForCheck();
+                }
+            }
+        };
         AppEditor.prototype.markForCheck = function () {
             // Should be override by subclasses, if change detection is Push
         };
@@ -28487,6 +28576,8 @@
         AppTabEditor.prototype.ngOnDestroy = function () {
             _super_1.prototype.ngOnDestroy.call(this);
             this.selectedTabIndexChange.complete();
+            this.loadingSubject.unsubscribe();
+            this.errorSubject.unsubscribe();
         };
         AppTabEditor.prototype.setSelectedTabIndex = function (value, opts) {
             var _this = this;
@@ -28510,6 +28601,10 @@
                 this.markForCheck();
             }
         };
+        AppTabEditor.prototype.realignInkBar = function () {
+            var _a;
+            (_a = this.tabGroup) === null || _a === void 0 ? void 0 : _a.realignInkBar();
+        };
         AppTabEditor.prototype.onTabChange = function (event, queryTabIndexParamName) {
             queryTabIndexParamName = queryTabIndexParamName || this.queryTabIndexParamName;
             if (!queryTabIndexParamName || !this.route)
@@ -28588,6 +28683,22 @@
                 });
             });
         };
+        AppTabEditor.prototype.saveDirtyTables = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var results, saved;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, Promise.all((this.tables || [])
+                                .filter(function (c) { return c.dirty; })
+                                .map(function (c) { return c.save(); }))];
+                        case 1:
+                            results = _b.sent();
+                            saved = results.findIndex(function (result) { return result !== true; }) === -1;
+                            return [2 /*return*/, saved];
+                    }
+                });
+            });
+        };
         return AppTabEditor;
     }(AppEditor));
     AppTabEditor.decorators = [
@@ -28624,7 +28735,7 @@
             _this = _super.call(this, injector.get(i3.ActivatedRoute), injector.get(i3.Router), injector.get(i1$5.AlertController), injector.get(i1$2.TranslateService), options) || this;
             _this.dataType = dataType;
             _this.dataService = dataService;
-            _this.saving = false;
+            _this.savingSubject = new rxjs.BehaviorSubject(false);
             _this.$title = new rxjs.Subject();
             _this.onUpdateView = new i0.EventEmitter();
             _this.environement = injector.get(ENVIRONMENT);
@@ -28682,7 +28793,14 @@
         });
         Object.defineProperty(AppEntityEditor.prototype, "loading", {
             get: function () {
-                return this._loading;
+                return this.loadingSubject.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AppEntityEditor.prototype, "saving", {
+            get: function () {
+                return this.savingSubject.value;
             },
             enumerable: false,
             configurable: true
@@ -28695,15 +28813,15 @@
             configurable: true
         });
         AppEntityEditor.prototype.markAsSaving = function (opts) {
-            if (!this.saving) {
-                this.saving = true;
+            if (this.savingSubject.value !== true) {
+                this.savingSubject.next(true);
                 if (!opts || opts.emitEvent !== false)
                     this.markForCheck();
             }
         };
         AppEntityEditor.prototype.markAsSaved = function (opts) {
-            if (this.saving) {
-                this.saving = false;
+            if (this.savingSubject.value !== false) {
+                this.savingSubject.next(false);
                 if (!opts || opts.emitEvent !== false)
                     this.markForCheck();
             }
@@ -28733,12 +28851,12 @@
             this.$title.unsubscribe();
             this.onUpdateView.complete();
             this.onUpdateView.unsubscribe();
+            this.savingSubject.unsubscribe();
         };
         AppEntityEditor.prototype.waitIdle = function (opts) {
-            var _this = this;
             // Wait end of saving
             if (this.saving)
-                return waitFor(function () { return _this.saving !== true; });
+                return waitForFalse(this.savingSubject);
             return _super.prototype.waitIdle.call(this, opts);
         };
         /**
@@ -29025,7 +29143,7 @@
          */
         AppEntityEditor.prototype.save = function (event, opts) {
             return __awaiter(this, void 0, void 0, function () {
-                var nextTabIndex, data, updatedData, err_3;
+                var nextTabIndex, saved, data, updatedData, err_3;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
@@ -29044,9 +29162,10 @@
                             _c.sent();
                             // If invalid
                             if (this.invalid) {
-                                this.markAllAsTouched();
                                 this.logFormErrors();
                                 this.openFirstInvalidTab();
+                                this.scrollToTop();
+                                this.markAllAsTouched();
                                 this.submitted = true;
                                 return [2 /*return*/, false];
                             }
@@ -29056,24 +29175,29 @@
                                 console.debug('[data-editor] Saving data...');
                             _c.label = 2;
                         case 2:
-                            _c.trys.push([2, 7, 8, 9]);
+                            _c.trys.push([2, 8, 9, 10]);
                             nextTabIndex = this._autoOpenNextTab && isNil(this.previousDataId) && this.computeNextTabIndex();
-                            return [4 /*yield*/, this.getValue()];
+                            return [4 /*yield*/, this.saveDirtyTables()];
                         case 3:
+                            saved = _c.sent();
+                            if (!saved)
+                                return [2 /*return*/, false];
+                            return [4 /*yield*/, this.getValue()];
+                        case 4:
                             data = _c.sent();
                             this.disable();
                             return [4 /*yield*/, this.dataService.save(data, opts)];
-                        case 4:
+                        case 5:
                             updatedData = _c.sent();
                             return [4 /*yield*/, this.onEntitySaved(updatedData)];
-                        case 5:
+                        case 6:
                             _c.sent();
                             // Update the view (e.g metadata)
                             return [4 /*yield*/, this.updateView(updatedData, Object.assign({
                                     // Open next tab only if user has not changed it
                                     openTabIndex: nextTabIndex > this._selectedTabIndex ? nextTabIndex : undefined
                                 }, opts))];
-                        case 6:
+                        case 7:
                             // Update the view (e.g metadata)
                             _c.sent();
                             // Subscribe to remote changes
@@ -29081,7 +29205,7 @@
                                 this.startListenRemoteChanges();
                             this.submitted = false;
                             return [2 /*return*/, true];
-                        case 7:
+                        case 8:
                             err_3 = _c.sent();
                             this.submitted = true;
                             this.setError(err_3);
@@ -29097,10 +29221,10 @@
                                 });
                             }
                             return [2 /*return*/, false];
-                        case 8:
+                        case 9:
                             this.markAsSaved();
                             return [7 /*endfinally*/];
-                        case 9: return [2 /*return*/];
+                        case 10: return [2 /*return*/];
                     }
                 });
             });
@@ -29219,7 +29343,7 @@
                     this.registerForms();
                     this._dirty = false;
                     this.data = null;
-                    this.saving = false;
+                    this.savingSubject.next(false);
                     return [2 /*return*/];
                 });
             });
@@ -29482,7 +29606,7 @@
         function AppEntityEditorModal(injector, dataType, options) {
             var _this = _super_1.call(this, null, injector.get(i3.Router), injector.get(i1$5.AlertController), injector.get(i1$2.TranslateService), options) || this;
             _this.dataType = dataType;
-            _this.saving = false;
+            _this.savingSubject = new rxjs.BehaviorSubject(false);
             _this.$title = new rxjs.Subject();
             _this.i18nSuffix = null;
             _this.environement = injector.get(ENVIRONMENT);
@@ -29532,16 +29656,23 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(AppEntityEditorModal.prototype, "saving", {
+            get: function () {
+                return this.savingSubject.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         AppEntityEditorModal.prototype.markAsSaving = function (opts) {
-            if (!this.saving) {
-                this.saving = true;
+            if (this.savingSubject.value !== true) {
+                this.savingSubject.next(true);
                 if (!opts || opts.emitEvent !== false)
                     this.markForCheck();
             }
         };
         AppEntityEditorModal.prototype.markAsSaved = function (opts) {
-            if (this.saving) {
-                this.saving = false;
+            if (this.savingSubject.value !== false) {
+                this.savingSubject.next(false);
                 if (!opts || opts.emitEvent !== false)
                     this.markForCheck();
             }
@@ -29590,12 +29721,12 @@
             _super_1.prototype.ngOnDestroy.call(this);
             this.$title.complete();
             this.$title.unsubscribe();
+            this.savingSubject.unsubscribe();
         };
         AppEntityEditorModal.prototype.waitIdle = function (opts) {
-            var _this = this;
             // Wait end of saving
             if (this.saving)
-                return waitFor(function () { return _this.saving !== true; });
+                return waitForFalse(this.savingSubject);
             return _super_1.prototype.waitIdle.call(this, opts);
         };
         AppEntityEditorModal.prototype.load = function () {
@@ -29745,9 +29876,9 @@
                             if (this.invalid) {
                                 this.logFormErrors();
                                 this.setError('COMMON.FORM.HAS_ERROR');
-                                this.markAllAsTouched();
                                 this.openFirstInvalidTab();
                                 this.scrollToTop();
+                                this.markAllAsTouched();
                                 this.submitted = true;
                                 return [2 /*return*/, false];
                             }
@@ -29757,18 +29888,22 @@
                                 console.debug(this._logPrefix + 'Saving data...');
                             _c.label = 2;
                         case 2:
-                            _c.trys.push([2, 4, 5, 6]);
-                            saved = Promise.all((this.tables || [])
-                                .filter(function (c) { return c.dirty; })
-                                .map(function (c) { return c.save(); }))
-                                .then(function (res) { return res.findIndex(function (r) { return r !== true; }) === -1; });
+                            _c.trys.push([2, 5, 6, 7]);
+                            return [4 /*yield*/, this.saveDirtyTables()];
+                        case 3:
+                            saved = _c.sent();
+                            if (!saved)
+                                return [2 /*return*/, false];
+                            // Fill data
                             _b = this;
                             return [4 /*yield*/, this.getValue()];
-                        case 3:
+                        case 4:
+                            // Fill data
                             _b.data = _c.sent();
+                            // Mark as submitted
                             this.submitted = true;
-                            return [2 /*return*/, saved];
-                        case 4:
+                            return [2 /*return*/, true];
+                        case 5:
                             err_2 = _c.sent();
                             this.submitted = true;
                             this.setError(err_2);
@@ -29777,10 +29912,10 @@
                             this.markAsDirty();
                             this.enable();
                             return [2 /*return*/, false];
-                        case 5:
+                        case 6:
                             this.markAsSaved();
                             return [7 /*endfinally*/];
-                        case 6: return [2 /*return*/];
+                        case 7: return [2 /*return*/];
                     }
                 });
             });
@@ -30056,10 +30191,7 @@
     var SocialErrorCodes = {
         LOAD_USER_EVENTS_ERROR: 50000,
         SAVE_USER_EVENT_ERROR: 50001,
-        COUNT_USER_EVENT_ERROR: 50002,
-        SEND_MESSAGE_ERROR: 50003,
-        SUBSCRIBE_USER_EVENTS_ERROR: 50005,
-        SUBSCRIBE_JOB_PROGRESSION_ERROR: 50010
+        SEND_MESSAGE_ERROR: 50003
     };
 
     var UserEvent_1;
@@ -30075,23 +30207,16 @@
         }
         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('{')) {
@@ -30111,48 +30236,36 @@
     exports.UserEvent = UserEvent_1 = __decorate([
         EntityClass({ typename: 'UserEventVO' })
     ], exports.UserEvent);
+
+    var UserEventFragments = {
+        userEvent: core.gql(templateObject_1$2 || (templateObject_1$2 = __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$2, templateObject_2$2;
+
     // @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;
+            _this.issuer = null;
+            _this.recipient = null;
             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;
+            this.issuer = source.issuer;
+            this.recipient = source.recipient;
         };
         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); });
+            // issuer
+            if (this.issuer) {
+                filterFns.push(function (t) { return (t.issuer === _this.issuer); });
             }
-            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 ?
+            if (this.recipient) {
+                filterFns.push(function (t) { return (t.recipient === _this.recipient); });
             }
             return filterFns;
         };
@@ -30161,276 +30274,120 @@
     exports.UserEventFilter = __decorate([
         EntityClass({ typename: 'UserEventFilterVO' })
     ], exports.UserEventFilter);
-
-    var UserEventFragments = {
-        userEvent: core.gql(templateObject_1$2 || (templateObject_1$2 = __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$2, templateObject_2$2;
-
-    var moment$6 = momentImported__namespace;
-    var UserEventServiceToken = new i0.InjectionToken('UserEventService');
-    var AbstractUserEventService = /** @class */ (function (_super) {
-        __extends(AbstractUserEventService, _super);
-        function AbstractUserEventService(graphql, accountService, network, translate, queries, mutations, subscriptions, environment) {
+    var SaveQuery = core.gql(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  mutation SaveUserEvent($data: UserEventVOInput){\n    data: saveUserEvent(userEvent: $data){\n      ...UserEventFragment\n    }\n  }\n  ", "\n"], ["\n  mutation SaveUserEvent($data: UserEventVOInput){\n    data: saveUserEvent(userEvent: $data){\n      ...UserEventFragment\n    }\n  }\n  ", "\n"])), UserEventFragments.userEvent);
+    var LoadAllQuery = core.gql(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  query UserEvents($filter: UserEventFilterVOInput, $page: PageInput){\n    data: userEvents(filter: $filter, page: $page){\n      ...LightUserEventFragment\n    }\n  }\n  ", "\n"], ["\n  query UserEvents($filter: UserEventFilterVOInput, $page: PageInput){\n    data: userEvents(filter: $filter, page: $page){\n      ...LightUserEventFragment\n    }\n  }\n  ", "\n"])), UserEventFragments.lightUserEvent);
+    var DeleteByIdsMutation = core.gql(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  mutation DeleteUserEvents($ids:[Int]){\n    deleteUserEvents(ids: $ids)\n  }\n"], ["\n  mutation DeleteUserEvents($ids:[Int]){\n    deleteUserEvents(ids: $ids)\n  }\n"])));
+    var LoadAllWithContentQuery = core.gql(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  query UserEventsWithContent($filter: UserEventFilterVOInput, $page: PageInput){\n    data: userEvents(filter: $filter, page: $page){\n      ...UserEventFragment\n    }\n  }\n  ", "\n"], ["\n  query UserEventsWithContent($filter: UserEventFilterVOInput, $page: PageInput){\n    data: userEvents(filter: $filter, page: $page){\n      ...UserEventFragment\n    }\n  }\n  ", "\n"])), UserEventFragments.userEvent);
+    var UserEventService = /** @class */ (function (_super) {
+        __extends(UserEventService, _super);
+        function UserEventService(graphql, accountService, network, translate, toastController, environment) {
             var _this = _super.call(this, graphql, environment) || this;
             _this.graphql = graphql;
             _this.accountService = accountService;
             _this.network = network;
             _this.translate = translate;
-            _this.queries = queries;
-            _this.mutations = mutations;
-            _this.subscriptions = subscriptions;
+            _this.toastController = toastController;
             _this.environment = environment;
-            _this._count$ = new rxjs.BehaviorSubject(0);
-            _this._subscriptions = new rxjs.Subscription();
-            _this.listeners = [];
-            _this._logPrefix = '[user-event-service] ';
+            _this._userEventActions = [];
             // For DEV only
-            _this._debug = !(environment === null || environment === void 0 ? void 0 : environment.production);
-            // listen login/logout
-            _this._subscriptions.add(accountService.onLogin.subscribe(function () { return __awaiter(_this, void 0, void 0, function () {
-                var count;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this.count(this.defaultFilter())];
-                        case 1:
-                            count = _b.sent();
-                            if (count && this._debug) {
-                                console.debug(this._logPrefix + "Received " + count + " unread notifications");
-                            }
-                            this._count$.next(count);
-                            return [2 /*return*/];
-                    }
-                });
-            }); }));
+            _this._debug = environment && !environment.production;
             return _this;
         }
-        Object.defineProperty(AbstractUserEventService.prototype, "userEventCount", {
-            get: function () {
-                return this._count$.asObservable();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        AbstractUserEventService.prototype.ngOnDestroy = function () {
-            this._subscriptions.unsubscribe();
-        };
-        AbstractUserEventService.prototype.watchAll = function (offset, size, sortBy, sortDirection, filter, options) {
+        /**
+         *
+         * @param offset
+         * @param size
+         * @param sortBy
+         * @param sortDirection
+         * @param filter
+         * @param options
+         * @deprecated use watchPage() instead
+         */
+        UserEventService.prototype.watchAll = function (offset, size, sortBy, sortDirection, filter, options) {
             return this.watchPage({ offset: offset, size: size, sortBy: sortBy, sortDirection: sortDirection }, filter, options);
         };
-        AbstractUserEventService.prototype.watchPage = function (page, filter, options) {
-            var _this = this;
-            var _a;
+        UserEventService.prototype.watchPage = function (page, filter, options) {
             var now = this._debug && Date.now();
             //if (this._debug)
-            console.debug(this._logPrefix + "Loading user events...", filter);
+            console.debug('[user-event-service] Loading user events...', filter);
             filter = this.asFilter(filter);
             // Force recipient to current issuer, if not admin and not specified
-            if (isEmptyArray(filter === null || filter === void 0 ? void 0 : filter.recipients) || !this.accountService.isAdmin()) {
-                var recipient = this.defaultRecipient();
-                if (!((_a = filter === null || filter === void 0 ? void 0 : filter.recipients) === null || _a === void 0 ? void 0 : _a.includes(recipient))) {
+            if (isNilOrBlank(filter.recipient) || !this.accountService.isAdmin()) {
+                var recipient = this.accountService.account.pubkey;
+                if (recipient !== filter.recipient) {
                     console.warn('[user-events-service] Force user event filter.recipient=' + recipient);
-                    filter.recipients = [recipient];
+                    filter.recipient = recipient;
                 }
             }
-            var withContent = (options === null || options === void 0 ? void 0 : options.withContent) === true;
+            var withContent = options && options.withContent === true;
             return this.mutableWatchQuery({
                 queryName: withContent ? 'LoadAllWithContent' : 'LoadAll',
-                query: withContent ? this.queries.loadAllWithContent : this.queries.loadAll,
+                query: withContent ? LoadAllWithContentQuery : LoadAllQuery,
                 variables: {
-                    page: Object.assign(Object.assign({ sortBy: 'creationDate' }, page), {
-                        // @ts-ignore
-                        sortDirection: (page.sortDirection || 'desc').toUpperCase()
-                    }),
+                    page: Object.assign(Object.assign({ sortBy: 'updateDate' }, page), { sortDirection: (page.sortDirection || 'DESC').toUpperCase() }),
                     filter: filter && filter.asPodObject()
                 },
                 arrayFieldName: 'data',
                 error: { code: SocialErrorCodes.LOAD_USER_EVENTS_ERROR, message: 'SOCIAL.ERROR.LOAD_USER_EVENTS_ERROR' },
-                fetchPolicy: (options === null || options === void 0 ? void 0 : options.fetchPolicy) || "cache-first"
+                fetchPolicy: options && options.fetchPolicy || undefined
             })
                 .pipe(operators.map(function (res) {
-                var data = ((res === null || res === void 0 ? void 0 : res.data) || []).map(_this.processUserEvent);
+                var data = res && (res.data || []).map(exports.UserEvent.fromObject);
                 if (now) {
-                    console.debug("" + _this._logPrefix + data.length + " user events loaded in " + (Date.now() - now) + "ms");
+                    console.debug("[user-event-service] " + data.length + " user events loaded in " + (Date.now() - now) + "ms");
                     now = null;
                 }
-                var unreadCount = _this.unreadEvents(data);
                 return {
                     data: data,
-                    total: toNumber(res === null || res === void 0 ? void 0 : res.total, unreadCount)
+                    total: res && toNumber(res.total, data.length)
                 };
             }));
         };
-        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
-            });
-            // Update count
-            this._count$.next(this._count$.value + 1);
-        };
-        AbstractUserEventService.prototype.count = function (filter, options) {
-            var _a;
-            return __awaiter(this, void 0, void 0, function () {
-                var res;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            if (!((_a = this.queries) === null || _a === void 0 ? void 0 : _a.count)) {
-                                console.warn(this._logPrefix + "Query 'count' not provided, skip.");
-                                return [2 /*return*/, undefined];
-                            }
-                            if (!filter)
-                                throw new Error("Missing argument 'filter'");
-                            filter = this.asFilter(filter);
-                            if (this._debug)
-                                console.debug(this._logPrefix + "Counting user events with filter:", filter);
-                            return [4 /*yield*/, this.graphql.query({
-                                    query: this.queries.count,
-                                    variables: {
-                                        filter: filter.asPodObject()
-                                    },
-                                    error: { code: SocialErrorCodes.COUNT_USER_EVENT_ERROR, message: 'SOCIAL.ERROR.COUNT_USER_EVENT_ERROR' },
-                                    fetchPolicy: (options === null || options === void 0 ? void 0 : options.fetchPolicy) || 'network-only'
-                                })];
-                        case 1:
-                            res = _b.sent();
-                            return [2 /*return*/, res.total];
-                    }
-                });
-            });
-        };
-        AbstractUserEventService.prototype.listenChanges = function (filter, options) {
+        UserEventService.prototype.saveAll = function (data, options) {
             var _this = this;
-            var _a;
-            if (!((_a = this.subscriptions) === null || _a === void 0 ? void 0 : _a.listenChanges)) {
-                console.warn(this._logPrefix + "Subscription query 'listenChanges' not provided, skip.");
-                return rxjs.of();
-            }
-            if (!filter)
-                throw new Error("Missing argument 'filter'");
-            filter = this.asFilter(filter);
-            var withContent = (options === null || options === void 0 ? void 0 : options.withContent) === true;
-            if (this._debug)
-                console.debug(this._logPrefix + "[WS] Listening changes for user events with filter:", filter);
-            return this.graphql.subscribe({
-                query: this.subscriptions.listenChanges,
-                fetchPolicy: options === null || options === void 0 ? void 0 : options.fetchPolicy,
-                variables: { filter: filter.asPodObject(), interval: toNumber(options === null || options === void 0 ? void 0 : options.interval, 10) },
-                error: {
-                    code: SocialErrorCodes.SUBSCRIBE_USER_EVENTS_ERROR,
-                    message: 'SOCIAL.ERROR.SUBSCRIBE_USER_EVENTS_ERROR'
-                }
-            }).pipe(operators.map(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(_this.processUserEvent);
-                // Update cache
-                _this.insertIntoMutableCachedQueries(_this.graphql.cache, {
-                    query: withContent ? _this.queries.loadAllWithContent : _this.queries.loadAll,
-                    data: updatedData
-                });
-                // update count
-                _this._count$.next(_this.unreadEvents(updatedData));
-                return updatedData;
-            }));
-        };
-        AbstractUserEventService.prototype.delete = function (entity) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            if (!entity)
-                                return [2 /*return*/]; // skip
-                            return [4 /*yield*/, this.deleteAll([entity])];
-                        case 1:
-                            _b.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        AbstractUserEventService.prototype.deleteAll = function (entities, opts) {
-            return __awaiter(this, void 0, void 0, function () {
-                var ids, now;
-                var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            ids = entities && entities
-                                .map(function (t) { return t.id; });
-                            if (isEmptyArray(ids))
-                                return [2 /*return*/]; // stop, if nothing else to do
-                            now = Date.now();
-                            if (this._debug)
-                                console.debug(this._logPrefix + "Deleting events... ids:", ids);
-                            return [4 /*yield*/, this.graphql.mutate({
-                                    mutation: this.mutations.deleteByIds,
-                                    variables: {
-                                        ids: ids
-                                    },
-                                    update: function (proxy) {
-                                        // Remove from caches
-                                        _this.removeFromMutableCachedQueriesByIds(proxy, {
-                                            query: _this.queries.loadAll,
-                                            ids: ids
-                                        });
-                                        _this.removeFromMutableCachedQueriesByIds(proxy, {
-                                            query: _this.queries.loadAllWithContent,
-                                            ids: ids
-                                        });
-                                        if (_this._debug)
-                                            console.debug(_this._logPrefix + "Events deleted in " + (Date.now() - now) + "ms");
-                                    }
-                                })];
-                        case 1:
-                            _b.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            });
+            return Promise.all(data
+                .map(function (entity) { return _this.save(entity, options); }));
         };
-        AbstractUserEventService.prototype.save = function (entity, options) {
+        /**
+         * Save a userEvent entity
+         *
+         * @param entity
+         */
+        UserEventService.prototype.save = function (entity, options) {
             return __awaiter(this, void 0, void 0, function () {
                 var isNew, json, now;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
                             this.fillDefaultProperties(entity);
                             isNew = isNil(entity.id);
                             json = entity.asObject();
                             now = Date.now();
                             if (this._debug)
-                                console.debug(this._logPrefix + "Saving user event...", json);
+                                console.debug("[user-event-service] Saving user event...", json);
                             return [4 /*yield*/, this.graphql.mutate({
-                                    mutation: this.mutations.save,
+                                    mutation: SaveQuery,
                                     variables: {
                                         data: json
                                     },
                                     error: { code: SocialErrorCodes.SAVE_USER_EVENT_ERROR, message: 'SOCIAL.ERROR.SAVE_USER_EVENT_ERROR' },
-                                    update: function (proxy, _b) {
-                                        var data = _b.data;
+                                    update: function (proxy, _a) {
+                                        var data = _a.data;
                                         // Update entity
                                         var savedEntity = data && data.data;
                                         if (savedEntity) {
                                             if (_this._debug)
-                                                console.debug(_this._logPrefix + "User event saved in " + (Date.now() - now) + "ms", entity);
+                                                console.debug("[user-event-service] User event saved in " + (Date.now() - now) + "ms", entity);
                                             _this.copyIdAndUpdateDate(savedEntity, entity);
                                             // Add to cache
                                             if (isNew) {
                                                 _this.insertIntoMutableCachedQueries(proxy, {
-                                                    query: _this.queries.loadAll,
+                                                    query: LoadAllQuery,
                                                     data: Object.assign(Object.assign({}, savedEntity), { content: null })
                                                 });
                                                 _this.insertIntoMutableCachedQueries(proxy, {
-                                                    query: _this.queries.loadAllWithContent,
+                                                    query: LoadAllWithContentQuery,
                                                     data: savedEntity
                                                 });
                                             }
@@ -30438,185 +30395,93 @@
                                     }
                                 })];
                         case 1:
-                            _b.sent();
+                            _a.sent();
                             return [2 /*return*/, entity];
                     }
                 });
             });
         };
-        AbstractUserEventService.prototype.saveAll = function (data, opts) {
-            var _this = this;
-            return Promise.all(data
-                .map(function (entity) { return _this.save(entity, opts); }));
-        };
-        AbstractUserEventService.prototype.markAsRead = function (entity) {
+        /**
+         * Save many trips
+         *
+         * @param entities
+         * @param opts
+         */
+        UserEventService.prototype.deleteAll = function (entities, opts) {
             return __awaiter(this, void 0, void 0, function () {
-                var onReadListeners, onReadListeners_1, onReadListeners_1_1, listener, e_1_1;
-                var e_1, _b;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                var ids, now;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
-                            onReadListeners = (this.listeners || []).filter(function (listener) { return !!listener.onRead; }).filter(function (listener) { return listener.accept(entity); });
-                            if (!onReadListeners.length) return [3 /*break*/, 9];
-                            _c.label = 1;
+                            ids = entities && entities
+                                .map(function (t) { return t.id; });
+                            if (isEmptyArray(ids))
+                                return [2 /*return*/]; // stop, if nothing else to do
+                            now = Date.now();
+                            if (this._debug)
+                                console.debug('[user-event-service] Deleting events... ids:', ids);
+                            return [4 /*yield*/, this.graphql.mutate({
+                                    mutation: DeleteByIdsMutation,
+                                    variables: {
+                                        ids: ids
+                                    },
+                                    update: function (proxy) {
+                                        // Remove from caches
+                                        _this.removeFromMutableCachedQueriesByIds(proxy, {
+                                            query: LoadAllQuery,
+                                            ids: ids
+                                        });
+                                        _this.removeFromMutableCachedQueriesByIds(proxy, {
+                                            query: LoadAllWithContentQuery,
+                                            ids: ids
+                                        });
+                                        if (_this._debug)
+                                            console.debug("[user-event-service] Events deleted in " + (Date.now() - now) + "ms");
+                                    }
+                                })];
                         case 1:
-                            _c.trys.push([1, 6, 7, 8]);
-                            onReadListeners_1 = __values(onReadListeners), onReadListeners_1_1 = onReadListeners_1.next();
-                            _c.label = 2;
-                        case 2:
-                            if (!!onReadListeners_1_1.done) return [3 /*break*/, 5];
-                            listener = onReadListeners_1_1.value;
-                            return [4 /*yield*/, listener.onRead(entity)];
-                        case 3:
-                            _c.sent();
-                            _c.label = 4;
-                        case 4:
-                            onReadListeners_1_1 = onReadListeners_1.next();
-                            return [3 /*break*/, 2];
-                        case 5: return [3 /*break*/, 8];
-                        case 6:
-                            e_1_1 = _c.sent();
-                            e_1 = { error: e_1_1 };
-                            return [3 /*break*/, 8];
-                        case 7:
-                            try {
-                                if (onReadListeners_1_1 && !onReadListeners_1_1.done && (_b = onReadListeners_1.return)) _b.call(onReadListeners_1);
-                            }
-                            finally { if (e_1) throw e_1.error; }
-                            return [7 /*endfinally*/];
-                        case 8: return [3 /*break*/, 11];
-                        case 9: 
-                        // Use default
-                        return [4 /*yield*/, this.defaultMarkAsRead(entity)];
-                        case 10:
-                            // Use default
-                            _c.sent();
-                            _c.label = 11;
-                        case 11: return [2 /*return*/];
+                            _a.sent();
+                            return [2 /*return*/];
                     }
                 });
             });
         };
-        AbstractUserEventService.prototype.registerListener = function (listener) {
-            if (!this.listeners)
-                this.listeners = [];
-            this.listeners.push(listener);
-        };
-        /* -- protected methods -- */
-        AbstractUserEventService.prototype.processUserEvent = function (source) {
-            var e_2, _b;
-            // Convert json source to IUserEvent
-            var target = this.fromObject(source);
-            // Get listeners
-            var listeners = (this.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 (this._debug)
-                            console.debug(this._logPrefix + "Event has been rejected by a listener", source);
-                        break;
-                    }
-                }
-            }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
-            finally {
-                try {
-                    if (listeners_1_1 && !listeners_1_1.done && (_b = listeners_1.return)) _b.call(listeners_1);
-                }
-                finally { if (e_2) throw e_2.error; }
-            }
-            return target;
-        };
-        AbstractUserEventService.prototype.defaultMarkAsRead = function (userEvent) {
+        /**
+         * Delete userEvent entities
+         */
+        UserEventService.prototype.delete = function (data) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
-                            if (!userEvent)
-                                throw new Error(this._logPrefix + "Invalid event to save");
-                            // set read date
-                            userEvent.readDate = moment$6();
-                            if (!(!userEvent.id || userEvent.id < 0)) return [3 /*break*/, 1];
-                            if (this._debug)
-                                console.debug(this._logPrefix + "Save local user event");
-                            return [3 /*break*/, 3];
-                        case 1: return [4 /*yield*/, this.save(userEvent)];
-                        case 2:
-                            _b.sent();
-                            _b.label = 3;
-                        case 3: return [2 /*return*/];
+                            if (!data)
+                                return [2 /*return*/]; // skip
+                            return [4 /*yield*/, this.deleteAll([data])];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
                     }
                 });
             });
         };
-        AbstractUserEventService.prototype.defaultFilter = function () {
-            // By default
-            return {
-                recipients: [this.defaultRecipient()]
-            };
-        };
-        AbstractUserEventService.prototype.defaultRecipient = function () {
-            return this.accountService.person.pubkey;
+        UserEventService.prototype.listenChanges = function (id, options) {
+            // TODO
+            console.warn('TODO: implement listen changes on user events');
+            return rxjs.of();
         };
-        AbstractUserEventService.prototype.fillDefaultProperties = function (entity) {
+        UserEventService.prototype.registerAction = function (definition) {
+            console.info("[user-event-service] Registering action " + definition.name + " for " + definition.__typename);
+            this._userEventActions.push(definition);
         };
-        AbstractUserEventService.prototype.unreadEvents = function (events) {
-            // default calculation on unread events from a list
-            if (isEmptyArray(events))
-                return undefined;
-            var lastReadDate = events
-                .filter(function (event) { return isNotNil(event.readDate); })
-                .reduce(function (lastDate, event) { return DateUtils.max(lastDate, event.readDate); }, undefined);
-            return events
-                .filter(function (event) { return event.creationDate.isSameOrAfter(lastReadDate); }).length;
+        UserEventService.prototype.getActionsByTypename = function (typename) {
+            return this._userEventActions.filter(function (def) { return def.__typename === typename; });
         };
-        AbstractUserEventService.prototype.copyIdAndUpdateDate = function (source, target) {
-            EntityUtils.copyIdAndUpdateDate(source, target);
-        };
-        return AbstractUserEventService;
-    }(BaseGraphqlService));
-    AbstractUserEventService.decorators = [
-        { type: i0.Directive }
-    ];
-    AbstractUserEventService.ctorParameters = function () { return [
-        { type: GraphqlService },
-        { type: AccountService },
-        { type: NetworkService },
-        { type: i1$2.TranslateService },
-        { type: undefined },
-        { type: undefined },
-        { type: undefined },
-        { type: Environment, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [ENVIRONMENT,] }] }
-    ]; };
-    var userEventQueries = {
-        loadAll: core.gql(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n    query UserEvents($filter: UserEventFilterVOInput, $page: PageInput){\n      data: userEvents(filter: $filter, page: $page){\n        ...LightUserEventFragment\n      }\n    }\n    ", "\n  "], ["\n    query UserEvents($filter: UserEventFilterVOInput, $page: PageInput){\n      data: userEvents(filter: $filter, page: $page){\n        ...LightUserEventFragment\n      }\n    }\n    ", "\n  "])), UserEventFragments.lightUserEvent),
-        loadAllWithContent: core.gql(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n    query UserEventsWithContent($filter: UserEventFilterVOInput, $page: PageInput){\n      data: userEvents(filter: $filter, page: $page){\n        ...UserEventFragment\n      }\n    }\n    ", "\n  "], ["\n    query UserEventsWithContent($filter: UserEventFilterVOInput, $page: PageInput){\n      data: userEvents(filter: $filter, page: $page){\n        ...UserEventFragment\n      }\n    }\n    ", "\n  "])), UserEventFragments.userEvent)
-    };
-    var userEventMutations = {
-        deleteByIds: core.gql(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n    mutation DeleteUserEvents($ids:[Int]){\n      deleteUserEvents(ids: $ids)\n    }\n  "], ["\n    mutation DeleteUserEvents($ids:[Int]){\n      deleteUserEvents(ids: $ids)\n    }\n  "]))),
-        save: core.gql(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n    mutation SaveUserEvent($data: UserEventVOInput){\n      data: saveUserEvent(userEvent: $data){\n        ...UserEventFragment\n      }\n    }\n    ", "\n  "], ["\n    mutation SaveUserEvent($data: UserEventVOInput){\n      data: saveUserEvent(userEvent: $data){\n        ...UserEventFragment\n      }\n    }\n    ", "\n  "])), UserEventFragments.userEvent)
-    };
-    var UserEventService = /** @class */ (function (_super) {
-        __extends(UserEventService, _super);
-        function UserEventService(graphql, accountService, network, translate, toastController, environment) {
-            var _this = _super.call(this, graphql, accountService, network, translate, userEventQueries, userEventMutations, undefined, environment) || this;
-            _this.graphql = graphql;
-            _this.accountService = accountService;
-            _this.network = network;
-            _this.translate = translate;
-            _this.toastController = toastController;
-            _this.environment = environment;
-            return _this;
-        }
         UserEventService.prototype.showToastErrorWithContext = function (opts) {
             return __awaiter(this, void 0, void 0, function () {
                 var message, res, context, userEvent, err_1;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
                             message = opts.message || (opts.error && opts.error.message || opts.error);
                             // Make sure message a string
@@ -30645,12 +30510,12 @@
                                         }]
                                 })];
                         case 1:
-                            res = _b.sent();
+                            res = _a.sent();
                             if (!res || res.role !== 'send')
                                 return [2 /*return*/];
-                            _b.label = 2;
+                            _a.label = 2;
                         case 2:
-                            _b.trys.push([2, 6, , 7]);
+                            _a.trys.push([2, 6, , 7]);
                             if (this._debug)
                                 console.debug('Sending debug data...');
                             context = opts && opts.context;
@@ -30660,15 +30525,15 @@
                             if (!(context instanceof Promise)) return [3 /*break*/, 4];
                             return [4 /*yield*/, context];
                         case 3:
-                            context = _b.sent();
-                            _b.label = 4;
+                            context = _a.sent();
+                            _a.label = 4;
                         case 4: return [4 /*yield*/, this.sendDataForDebug({
                                 message: message,
                                 error: opts.error || undefined,
                                 context: this.convertObjectToString(context)
                             })];
                         case 5:
-                            userEvent = _b.sent();
+                            userEvent = _a.sent();
                             console.info('Debug data successfully sent to admin', userEvent);
                             this.showToast({
                                 type: 'info',
@@ -30677,7 +30542,7 @@
                             });
                             return [3 /*break*/, 7];
                         case 6:
-                            err_1 = _b.sent();
+                            err_1 = _a.sent();
                             console.error('Error while sending debug data:', err_1);
                             return [3 /*break*/, 7];
                         case 7: return [2 /*return*/];
@@ -30687,16 +30552,13 @@
         };
         UserEventService.prototype.sendDataForDebug = function (data) {
             var userEvent = new exports.UserEvent();
-            userEvent.type = UserEventTypes.DEBUG_DATA;
+            userEvent.eventType = UserEventTypes.DEBUG_DATA;
             userEvent.content = this.convertObjectToString(data);
             return this.save(userEvent);
         };
         UserEventService.prototype.asFilter = function (filter) {
             return exports.UserEventFilter.fromObject(filter);
         };
-        UserEventService.prototype.fromObject = function (source) {
-            return exports.UserEvent.fromObject(source);
-        };
         /* -- protected methods -- */
         UserEventService.prototype.convertObjectToString = function (data) {
             if (typeof data === 'string') {
@@ -30714,13 +30576,13 @@
         };
         UserEventService.prototype.showToast = function (opts) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
                             if (!this.toastController)
                                 throw new Error('Missing toastController in component\'s constructor');
                             return [4 /*yield*/, Toasts.show(this.toastController, this.translate, opts)];
-                        case 1: return [2 /*return*/, _b.sent()];
+                        case 1: return [2 /*return*/, _a.sent()];
                     }
                 });
             });
@@ -30731,10 +30593,14 @@
             // TODO: compute sign
             console.warn('TODO: sign user event before sending');
         };
+        UserEventService.prototype.copyIdAndUpdateDate = function (source, target) {
+            EntityUtils.copyIdAndUpdateDate(source, target);
+        };
         return UserEventService;
-    }(AbstractUserEventService));
+    }(BaseGraphqlService));
+    UserEventService.ɵprov = i0.ɵɵdefineInjectable({ factory: function UserEventService_Factory() { return new UserEventService(i0.ɵɵinject(GraphqlService), i0.ɵɵinject(AccountService), i0.ɵɵinject(NetworkService), i0.ɵɵinject(i1$2.TranslateService), i0.ɵɵinject(i1$5.ToastController), i0.ɵɵinject(ENVIRONMENT, 8)); }, token: UserEventService, providedIn: "root" });
     UserEventService.decorators = [
-        { type: i0.Injectable }
+        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
     UserEventService.ctorParameters = function () { return [
         { type: GraphqlService },
@@ -30748,7 +30614,7 @@
 
     var ICONS_MAP = {
         DEBUG_DATA: { matIcon: 'bug_report' },
-        INBOX_MESSAGE: { matIcon: 'mail' }
+        INBOX_MESSAGE: { matIcon: 'mail' },
     };
     // TODO: refactor with a registration done by data service:
     // - userEventService.registerEventAction({__typename: 'TripVO', ...})
@@ -30816,7 +30682,7 @@
                 }
             }));
             var filter = this.filter || new exports.UserEventFilter();
-            filter.recipients = [this.recipient];
+            filter.recipient = this.recipient;
             this.setFilter(filter, { emitEvent: true });
         };
         UserEventsTable.prototype.start = function () {
@@ -30838,17 +30704,17 @@
             });
         };
         UserEventsTable.prototype.getIcon = function (source) {
-            return ICONS_MAP[source.type];
+            return ICONS_MAP[source.eventType];
         };
         UserEventsTable.prototype.getDetail = function (source) {
             if (!source)
                 return undefined;
-            if (source.content && source.type === UserEventTypes.DEBUG_DATA) {
+            if (source.content && source.eventType === UserEventTypes.DEBUG_DATA) {
                 var context = source.content.context;
                 if (context && context.__typename) {
-                    // const actions = this.service.getActionsByTypename(context.__typename);
+                    var actions = this.service.getActionsByTypename(context.__typename);
                     return {
-                        // actions,
+                        actions: actions,
                         title: source.content.error && source.content.error.message || source.content.message,
                         description: source.content.error && source.content.error.details || undefined
                     };
@@ -30859,18 +30725,18 @@
         };
         UserEventsTable.prototype.doAction = function (action, row) {
             return __awaiter(this, void 0, void 0, function () {
-                var event, res, _a, err_1;
+                var event, context, res, _a, err_1;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
                             event = row.currentData;
-                            // const context = event.content && event.content.context;
+                            context = event.content && event.content.context;
                             this.markAsLoading();
                             if (!(action && typeof action.executeAction === 'function')) return [3 /*break*/, 7];
                             _b.label = 1;
                         case 1:
                             _b.trys.push([1, 5, 6, 7]);
-                            res = action.executeAction(event /*, context*/);
+                            res = action.executeAction(event, context);
                             if (!(res instanceof Promise)) return [3 /*break*/, 3];
                             return [4 /*yield*/, res];
                         case 2:
@@ -30902,18 +30768,13 @@
                     selector: 'app-user-events-table',
                     template: "\n<!-- Type = options menu -->\n<mat-menu #optionsMenu=\"matMenu\" xPosition=\"after\">\n\n  <!-- display columns -->\n  <button mat-menu-item\n          (click)=\"openSelectColumnsModal($event)\">\n    <mat-icon>view_column</mat-icon>\n    <ion-label translate>COMMON.DISPLAYED_COLUMNS_DOTS</ion-label>\n  </button>\n\n</mat-menu>\n\n<!-- top header -->\n<mat-toolbar>\n\n  <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n\n    <button mat-icon-button [title]=\"'COMMON.BTN_REFRESH'|translate\" (click)=\"onRefresh.emit()\">\n      <mat-icon>refresh</mat-icon>\n    </button>\n\n  </ng-container>\n\n  <!-- if row selection -->\n  <ng-template #hasSelection>\n\n    <!-- delete -->\n    <button mat-icon-button class=\"hidden-xs hidden-sm\" *ngIf=\"canDelete\"\n            [title]=\"'COMMON.BTN_DELETE'|translate\" (click)=\"deleteSelection($event)\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  </ng-template>\n\n  <!-- error -->\n  <ion-item *ngIf=\"error\" hidden-xs hidden-sm hidden-mobile lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <button mat-icon-button\n          [title]=\"'COMMON.BTN_OPTIONS'|translate\"\n          [matMenuTriggerFor]=\"optionsMenu\">\n    <mat-icon>more_vert</mat-icon>\n  </button>\n</mat-toolbar>\n\n\n<mat-table [dataSource]=\"dataSource\" matSort\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           matSortDisableClear [trackBy]=\"trackByFn\">\n\n  <!-- select -->\n  <ng-container matColumnDef=\"select\">\n    <mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n      </mat-checkbox>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n      <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\" [checked]=\"selection.isSelected(row)\">\n      </mat-checkbox>\n    </mat-cell>\n  </ng-container>\n\n  <!-- id -->\n  <ng-container matColumnDef=\"id\">\n    <mat-header-cell *matHeaderCellDef mat-sort-header [class.cdk-visually-hidden]=\"!isAdmin\">\n      <app-loading-spinner [loading]=\"loadingSubject|async\"><ion-label>#</ion-label></app-loading-spinner>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!isAdmin\">{{ row.currentData.id | mathAbs }}</mat-cell>\n  </ng-container>\n\n  <!-- creationDate -->\n  <ng-container matColumnDef=\"creationDate\">\n    <mat-header-cell *matHeaderCellDef mat-sort-header>\n      <ion-label translate>SOCIAL.USER_EVENT.CREATION_DATE</ion-label>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\">\n      <ion-text>\n        {{row.currentData.creationDate | dateFromNow }}<br/>\n        <ion-text color=\"medium\"><small>{{row.currentData.creationDate | dateFormat: {time: true} }}</small></ion-text>\n      </ion-text>\n    </mat-cell>\n  </ng-container>\n\n  <!-- icon -->\n  <ng-container matColumnDef=\"icon\">\n    <mat-header-cell *matHeaderCellDef>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row;\">\n      <ng-container *ngIf=\"getIcon(row.currentData); let details\">\n        <ion-icon slot=\"start\" *ngIf=\"details.icon\" [name]=\"details.icon\"></ion-icon>\n        <mat-icon slot=\"start\" *ngIf=\"details.matIcon\">{{details.matIcon}}</mat-icon>\n      </ng-container>\n    </mat-cell>\n  </ng-container>\n\n  <!-- event type -->\n  <ng-container matColumnDef=\"eventType\">\n    <mat-header-cell *matHeaderCellDef mat-sort-header>\n      <ion-label translate>SOCIAL.USER_EVENT.EVENT_TYPE</ion-label>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row;\">\n      <span>{{'SOCIAL.USER_EVENT.TYPE_ENUM.' + row.currentData.eventType | translate}}</span>\n    </mat-cell>\n  </ng-container>\n\n  <!-- message -->\n  <ng-container matColumnDef=\"message\">\n    <mat-header-cell *matHeaderCellDef>\n      <ion-label translate>SOCIAL.USER_EVENT.MESSAGE</ion-label>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row;\">\n      <ng-container *ngIf=\"getDetail(row.currentData); let details\">\n        <ion-text [innerHTML]=\"details.title|translate\">\n        </ion-text>\n      </ng-container>\n    </mat-cell>\n  </ng-container>\n\n  <!-- Actions buttons column -->\n  <ng-container matColumnDef=\"actions\">\n    <mat-header-cell *matHeaderCellDef>\n    </mat-header-cell>\n    <mat-cell *matCellDef=\"let row\">\n      <ng-container *ngIf=\"getDetail(row.currentData); let details\">\n        <button mat-icon-button color=\"light\"\n                *ngFor=\"let action of details.actions\"\n                [title]=\"action.title |translate\"\n                [color]=\"action.color\"\n                (click)=\"doAction(action, row)\">\n          <ion-icon slot=\"start\" *ngIf=\"action.icon\" [name]=\"action.icon\"></ion-icon>\n          <mat-icon slot=\"start\" *ngIf=\"action.matIcon\">{{action.matIcon}}</mat-icon>\n        </button>\n      </ng-container>\n    </mat-cell>\n  </ng-container>\n\n  <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n  <mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n           class=\"mat-row-disabled\"\n           (click)=\"clickRow($event, row)\"></mat-row>\n\n</mat-table>\n\n<ion-row class=\"ion-no-padding\">\n  <ion-col></ion-col>\n  <ion-col class=\"ion-no-padding\" size=\"auto\">\n    <mat-paginator [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\" [pageSizeOptions]=\"defaultPageSizeOptions\" showFirstLastButtons>\n    </mat-paginator>\n  </ion-col>\n</ion-row>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    providers: [
-                        {
-                            provide: UserEventServiceToken, useClass: UserEventService
-                        }
-                    ],
                     styles: [".mat-header-row .mat-column-icon,.mat-row .mat-column-icon{max-width:40px;padding-left:0}.mat-header-row .mat-column-icon ion-icon,.mat-header-row .mat-column-icon mat-icon,.mat-row .mat-column-icon ion-icon,.mat-row .mat-column-icon mat-icon{font-size:1.2em;height:1.2em;width:1.2em}.mat-header-row .mat-column-creationDate,.mat-row .mat-column-creationDate{min-width:100px;max-width:120px}"]
                 },] }
     ];
     UserEventsTable.ctorParameters = function () { return [
         { type: i0.Injector },
         { type: AccountService },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [UserEventServiceToken,] }] },
+        { type: UserEventService },
         { type: EntitiesStorage },
         { type: i0.ChangeDetectorRef },
         { type: undefined, decorators: [{ type: i0.Inject, args: [ENVIRONMENT,] }] }
@@ -30925,167 +30786,6 @@
         defaultSortDirection: [{ type: i0.Input }]
     };
 
-    var UserEventNotificationList = /** @class */ (function () {
-        function UserEventNotificationList(popoverController) {
-            this.popoverController = popoverController;
-        }
-        UserEventNotificationList.prototype.ngOnInit = function () {
-        };
-        UserEventNotificationList.prototype.read = function ($event, userEvent) {
-            var _a;
-            if (userEvent === null || userEvent === void 0 ? void 0 : userEvent.readDate)
-                return;
-            (_a = this.readEvent) === null || _a === void 0 ? void 0 : _a.emit(userEvent);
-        };
-        UserEventNotificationList.prototype.executeAction = function (action, userEvent) {
-            // Execute then close popover
-            action.executeAction(userEvent);
-            this.dismiss();
-        };
-        UserEventNotificationList.prototype.dismiss = function () {
-            this.popoverController.dismiss();
-        };
-        return UserEventNotificationList;
-    }());
-    UserEventNotificationList.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-user-event-notification-list',
-                    template: "\n<ion-list class=\"ion-list-popover\">\n\n  <ion-row class=\"ion-list-header column\">\n    <ion-col>\n      <ion-label>{{titleI18n | translate}}</ion-label>\n    </ion-col>\n  </ion-row>\n\n  <ion-item *ngIf=\"!(userEvents | async)?.length\">\n    {{'SOCIAL.USER_EVENT.NOTIFICATION.EMPTY' | translate}}\n  </ion-item>\n  <ion-item\n    *ngFor=\"let userEvent of userEvents | async\"\n    (click)=\"read($event, userEvent)\"\n  >\n\n    <ion-avatar slot=\"start\">\n\n      <img *ngIf=\"userEvent.avatar; else avatarIcon\" src=\"{{ userEvent.avatar }}\">\n\n      <ng-template #avatarIcon>\n        <app-icon\n          *ngIf=\"userEvent.avatarIcon\"\n          [ref]=\"userEvent.avatarIcon\"\n          height=\"40\"\n          width=\"40\"\n        ></app-icon>\n      </ng-template>\n\n    </ion-avatar>\n\n    <ion-grid class=\"ion-no-margin ion-no-padding\">\n      <ion-row>\n        <ion-col>\n          <p [class.unread]=\"!userEvent.readDate\">\n            {{userEvent.message}}\n          </p>\n        </ion-col>\n      </ion-row>\n      <ion-row *ngIf=\"userEvent.actions?.length\">\n        <ion-col>\n          <p>\n            <span *ngFor=\"let action of userEvent.actions\">\n              <a\n                [style.margin-right.px]=\"8\"\n                [style.cursor]=\"'pointer'\"\n                (click)=\"executeAction(action, userEvent)\"\n              >\n                {{ '&#10142;&nbsp;' + action.name}}\n              </a>\n            </span>\n          </p>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <app-icon\n            *ngIf=\"userEvent.icon\"\n            [ref]=\"userEvent.icon\"\n            height=\"16\"\n            width=\"16\"\n            [style.vertical-align]=\"'sub'\"\n          ></app-icon>\n          <small>\n            <span>{{userEvent.creationDate|dateFromNow}}</span>\n            <span [style.color]=\"'gray'\">{{ ' | ' + (userEvent.creationDate|dateFormat:{time:true}) }}</span>\n          </small>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </ion-item>\n\n</ion-list>\n",
-                    styles: [":host(.popover-viewport){overflow-y:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}.unread{font-weight:700}"]
-                },] }
-    ];
-    UserEventNotificationList.ctorParameters = function () { return [
-        { type: i1$5.PopoverController }
-    ]; };
-    UserEventNotificationList.propDecorators = {
-        titleI18n: [{ type: i0.Input }],
-        userEvents: [{ type: i0.Input }],
-        readEvent: [{ type: i0.Output }]
-    };
-
-    var UserEventNotificationComponent = /** @class */ (function () {
-        function UserEventNotificationComponent(userEventService, accountService, popoverController, cd) {
-            this.userEventService = userEventService;
-            this.accountService = accountService;
-            this.popoverController = popoverController;
-            this.cd = cd;
-            this.debug = false;
-            this.titleI18n = 'SOCIAL.USER_EVENT.NOTIFICATION.TITLE';
-            this.disabled = false;
-            this.userEventsSubject = new rxjs.BehaviorSubject(undefined);
-            this._subscriptions = new rxjs.Subscription();
-            this._logPrefix = '[user-event-notification] ';
-            this._readEvent = new i0.EventEmitter();
-        }
-        Object.defineProperty(UserEventNotificationComponent.prototype, "count", {
-            get: function () {
-                var _a;
-                return (_a = this.userEventService) === null || _a === void 0 ? void 0 : _a.userEventCount.pipe(operators.map(function (value) { return value === 0 ? undefined : value; }));
-            },
-            enumerable: false,
-            configurable: true
-        });
-        UserEventNotificationComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            if (isNil(this.userEventService)) {
-                console.warn(this._logPrefix + "No service injected");
-                this.disabled = true;
-                return;
-            }
-            this._subscriptions.add(this.userEventService.watchAll(0, 10, 'creationDate', "desc").subscribe(function (value) {
-                var data = value.data;
-                if (_this.debug) {
-                    console.debug(_this._logPrefix + "Receiving user events", data);
-                }
-                _this.userEventsSubject.next(data);
-            }));
-            this._readEvent.subscribe(function (value) {
-                _this.userEventService.markAsRead(value);
-            });
-        };
-        UserEventNotificationComponent.prototype.showList = function (event) {
-            return __awaiter(this, void 0, void 0, function () {
-                var popover;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, this.popoverController.create({
-                                component: UserEventNotificationList,
-                                componentProps: {
-                                    titleI18n: this.titleI18n,
-                                    userEvents: this.userEventsSubject,
-                                    readEvent: this._readEvent
-                                },
-                                backdropDismiss: true,
-                                keyboardClose: true,
-                                event: event,
-                                translucent: true,
-                                cssClass: 'popover-large'
-                            })];
-                        case 1:
-                            popover = _b.sent();
-                            return [4 /*yield*/, popover.present()];
-                        case 2:
-                            _b.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        UserEventNotificationComponent.prototype.markForCheck = function () {
-            this.cd.markForCheck();
-        };
-        UserEventNotificationComponent.prototype.ngOnDestroy = function () {
-            if (this.debug) {
-                console.debug(this._logPrefix + "Destroying");
-            }
-            this._subscriptions.unsubscribe();
-        };
-        return UserEventNotificationComponent;
-    }());
-    UserEventNotificationComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-user-event-notification-component',
-                    template: "<button\n  #button\n  mat-icon-button\n  [title]=\"titleI18n | translate\"\n  [disabled]=\"disabled\"\n  (click)=\"showList($event)\"\n>\n  <mat-icon\n    [matBadge]=\"count | async\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n  >notifications\n  </mat-icon>\n</button>\n\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-    UserEventNotificationComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [UserEventServiceToken,] }] },
-        { type: AccountService },
-        { type: i1$5.PopoverController },
-        { type: i0.ChangeDetectorRef }
-    ]; };
-    UserEventNotificationComponent.propDecorators = {
-        debug: [{ type: i0.Input }],
-        titleI18n: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }]
-    };
-
-    var UserEventModule = /** @class */ (function () {
-        function UserEventModule() {
-        }
-        return UserEventModule;
-    }());
-    UserEventModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        i1$4.CommonModule,
-                        CoreModule,
-                        SharedModule
-                    ],
-                    declarations: [
-                        UserEventsTable,
-                        UserEventNotificationComponent,
-                        UserEventNotificationList,
-                    ],
-                    exports: [
-                        UserEventsTable,
-                        UserEventNotificationComponent
-                    ]
-                },] }
-    ];
-
     var MessageTypes = {
         INBOX_MESSAGE: 'INBOX_MESSAGE',
         EMAIL: 'EMAIL',
@@ -31319,12 +31019,12 @@
         canSelectType: [{ type: i0.Input }]
     };
 
-    var MessageModule = /** @class */ (function () {
-        function MessageModule() {
+    var SocialModule = /** @class */ (function () {
+        function SocialModule() {
         }
-        return MessageModule;
+        return SocialModule;
     }());
-    MessageModule.decorators = [
+    SocialModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [
                         i1$4.CommonModule,
@@ -31332,342 +31032,19 @@
                         SharedModule
                     ],
                     declarations: [
+                        UserEventsTable,
                         MessageModal,
                         MessageForm
                     ],
                     exports: [
+                        UserEventsTable,
                         MessageModal
                     ]
                 },] }
     ];
 
-    var JobProgression_1;
-    // todo use entity
-    var Job = /** @class */ (function () {
-        function Job() {
-        }
-        return Job;
-    }());
-    // @dynamic
-    exports.JobProgression = JobProgression_1 = /** @class */ (function (_super) {
-        __extends(JobProgression, _super);
-        function JobProgression() {
-            return _super.call(this, JobProgression_1.TYPENAME) || this;
-        }
-        JobProgression.prototype.fromObject = function (source) {
-            _super.prototype.fromObject.call(this, source);
-            this.message = source.message;
-            this.current = source.current;
-            this.total = source.total;
-        };
-        return JobProgression;
-    }(Entity));
-    exports.JobProgression = JobProgression_1 = __decorate([
-        EntityClass({ typename: 'JobProgressionVO' })
-    ], exports.JobProgression);
-
-    var JobProgressionServiceToken = new i0.InjectionToken('JobProgressionService');
-    var jobProgressionSubscription = core.gql(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["subscription UpdateJobProgression($id: Int!, $interval: Int){\n  data: updateJobProgression(id: $id, interval: $interval) {\n    id\n    message\n    current\n    total\n  }\n}"], ["subscription UpdateJobProgression($id: Int!, $interval: Int){\n  data: updateJobProgression(id: $id, interval: $interval) {\n    id\n    message\n    current\n    total\n  }\n}"])));
-    var JobProgressionService = /** @class */ (function (_super) {
-        __extends(JobProgressionService, _super);
-        function JobProgressionService(graphql, environment) {
-            var _this = _super.call(this, graphql, environment) || this;
-            _this.graphql = graphql;
-            _this.environment = environment;
-            _this._logPrefix = '[job-progression-service] ';
-            // For DEV only
-            _this._debug = !(environment === null || environment === void 0 ? void 0 : environment.production);
-            return _this;
-        }
-        JobProgressionService.prototype.listenChanges = function (id, options) {
-            var _this = this;
-            if (isNil(id))
-                throw new Error(this._logPrefix + "Missing argument 'id'");
-            if (this._debug)
-                console.debug(this._logPrefix + "[WS] Listening changes for job progression {" + id + "}...");
-            return this.graphql.subscribe({
-                query: jobProgressionSubscription,
-                fetchPolicy: options === null || options === void 0 ? void 0 : options.fetchPolicy,
-                variables: { id: id, interval: toNumber(options === null || options === void 0 ? void 0 : options.interval, 10) },
-                error: { code: SocialErrorCodes.SUBSCRIBE_JOB_PROGRESSION_ERROR, message: 'SOCIAL.ERROR.SUBSCRIBE_JOB_PROGRESSION_ERROR' }
-            }).pipe(operators.map(function (_a) {
-                var data = _a.data;
-                var progression = data && exports.JobProgression.fromObject(data);
-                if (progression && _this._debug)
-                    console.debug(_this._logPrefix + "Job progression " + id + " updated on server", progression);
-                return progression;
-            }));
-        };
-        return JobProgressionService;
-    }(BaseGraphqlService));
-    JobProgressionService.decorators = [
-        { type: i0.Injectable }
-    ];
-    JobProgressionService.ctorParameters = function () { return [
-        { type: GraphqlService },
-        { type: Environment, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [ENVIRONMENT,] }] }
-    ]; };
-    var templateObject_1$4;
-
-    var JobProgressionList = /** @class */ (function () {
-        function JobProgressionList() {
-        }
-        JobProgressionList.prototype.ngOnInit = function () {
-        };
-        return JobProgressionList;
-    }());
-    JobProgressionList.decorators = [
-        { 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\">\n    <ion-grid class=\"ion-no-margin\">\n      <ion-row>\n        <ion-col>\n          {{jobProgression.message}}\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-progress-bar\n            [value]=\"jobProgression.total > 0 ? jobProgression.current / jobProgression.total : undefined\"\n            [type]=\"jobProgression.total > 0 ? 'determinate' : 'indeterminate'\">\n          </ion-progress-bar>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </ion-item>\n\n</ion-list>\n",
-                    styles: [":host(.popover-viewport){overflow-y:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}"]
-                },] }
-    ];
-    JobProgressionList.ctorParameters = function () { return []; };
-    JobProgressionList.propDecorators = {
-        titleI18n: [{ type: i0.Input }],
-        jobProgressions: [{ type: i0.Input }]
-    };
-
-    var JobProgressionComponent = /** @class */ (function () {
-        function JobProgressionComponent(jobProgressionService, popoverController, cd) {
-            this.jobProgressionService = jobProgressionService;
-            this.popoverController = popoverController;
-            this.cd = cd;
-            this.debug = false;
-            this.titleI18n = 'SOCIAL.JOB.PROGRESSION.TITLE';
-            this.jobFinished = new i0.EventEmitter();
-            this.disabled = true;
-            this.color = 'accent';
-            this.mode = 'determinate';
-            this.value = 0;
-            this.jobProgressions = [];
-            this._subscriptions = new rxjs.Subscription();
-            this._subscriptionsById = {};
-            this._logPrefix = '[job-progression] ';
-        }
-        JobProgressionComponent.prototype.ngOnInit = function () {
-            var _a, _b, _c, _d;
-            if (isNil(this.jobProgressionService)) {
-                console.warn(this._logPrefix + "No service injected");
-            }
-            // parse options
-            this.autoHide = toBoolean((_a = this.options) === null || _a === void 0 ? void 0 : _a.autoHide, false);
-            this.visible = !this.autoHide;
-            this.autoHideDelay = toNumber((_b = this.options) === null || _b === void 0 ? void 0 : _b.autoHideDelay, 1000);
-            this.autoRemove = toBoolean((_c = this.options) === null || _c === void 0 ? void 0 : _c.autoRemove, true);
-            this.autoRemoveDelay = toNumber((_d = this.options) === null || _d === void 0 ? void 0 : _d.autoRemoveDelay, 1000);
-        };
-        JobProgressionComponent.prototype.addJob = function (id) {
-            var _this = this;
-            if (isNil(this.jobProgressionService)) {
-                console.warn(this._logPrefix + "No service injected. Can't add a job");
-                return;
-            }
-            if (this.debug) {
-                console.debug(this._logPrefix + "Add job id=" + id);
-            }
-            if (!!this.getProgression(id)) {
-                console.warn(this._logPrefix + "Job (id=" + id + ") already present");
-                return;
-            }
-            this.disabled = false;
-            var sub = this.jobProgressionService.listenChanges(id)
-                .pipe(operators.filter(function (progression) {
-                if (id !== progression.id) {
-                    console.error(_this._logPrefix + "Job progression (id=" + progression.id + ") doesn't match expected job (id=" + id + ")");
-                    return false;
-                }
-                return true;
-            }), operators.map(function (progression) {
-                // Ensure visible
-                _this.visible = true;
-                // Get current progression object
-                var currentProgression = _this.getProgression(id);
-                if (!currentProgression) {
-                    // add it
-                    _this.jobProgressions.push(progression);
-                    if (_this.debug) {
-                        console.debug(_this._logPrefix + "Progression added id=" + id, progression);
-                    }
-                }
-                else {
-                    // update current
-                    Object.assign(currentProgression, progression);
-                    if (_this.debug) {
-                        console.debug(_this._logPrefix + "Progression updated id=" + id, progression);
-                    }
-                }
-                return progression;
-            }))
-                .subscribe(function (progression) {
-                // update value
-                _this.updateValue();
-                // job finished
-                if (progression.total > 0 && progression.current == progression.total) {
-                    if (_this.debug) {
-                        console.debug(_this._logPrefix + "Finished job id=" + progression.id);
-                    }
-                    // emit event
-                    _this.jobFinished.emit(progression.id);
-                    if (_this.autoRemove) {
-                        setTimeout(function () {
-                            var _a;
-                            _this.removeJob(progression.id);
-                            // If last job
-                            if (_this.autoHide && !((_a = _this.jobProgressions) === null || _a === void 0 ? void 0 : _a.length)) {
-                                setTimeout(function () {
-                                    _this.visible = false;
-                                    _this.markForCheck();
-                                }, _this.autoHideDelay);
-                            }
-                        }, _this.autoRemoveDelay);
-                    }
-                }
-            });
-            this._subscriptionsById[id] = sub;
-            this._subscriptions.add(sub);
-        };
-        JobProgressionComponent.prototype.removeJob = function (id) {
-            if (this.debug) {
-                console.debug(this._logPrefix + "Remove job id=" + id);
-            }
-            var sub = this._subscriptionsById[id];
-            if (sub) {
-                this._subscriptions.remove(sub);
-                sub.unsubscribe();
-            }
-            var progression = this.getProgression(id);
-            if (progression) {
-                this.jobProgressions.splice(this.jobProgressions.indexOf(progression), 1);
-            }
-            this.updateValue();
-        };
-        JobProgressionComponent.prototype.getProgression = function (id) {
-            return this.jobProgressions.find(function (progression) { return progression.id === id; });
-        };
-        JobProgressionComponent.prototype.updateValue = function () {
-            if (this.debug) {
-                console.debug(this._logPrefix + "Updating value");
-            }
-            var value = 0;
-            var nbProgression = arraySize(this.jobProgressions);
-            var allIndeterminate = nbProgression > 0;
-            this.jobProgressions.forEach(function (progression) {
-                var indeterminate = progression.total === 0;
-                allIndeterminate = allIndeterminate && indeterminate;
-                if (!indeterminate) {
-                    value = value + progression.current * 100 / progression.total;
-                }
-            });
-            this.value = nbProgression > 0 ? value / nbProgression : 0;
-            this.mode = allIndeterminate ? 'indeterminate' : 'determinate';
-            if (this.debug) {
-                console.debug(this._logPrefix + "Setting value=" + this.value + ", mode=" + this.mode);
-            }
-            this.markForCheck();
-        };
-        JobProgressionComponent.prototype.showList = function (event) {
-            return __awaiter(this, void 0, void 0, function () {
-                var popover;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
-                        case 0: return [4 /*yield*/, this.popoverController.create({
-                                component: JobProgressionList,
-                                componentProps: {
-                                    titleI18n: this.titleI18n,
-                                    jobProgressions: this.jobProgressions
-                                },
-                                backdropDismiss: true,
-                                keyboardClose: true,
-                                event: event,
-                                translucent: true,
-                                cssClass: 'popover-large'
-                            })];
-                        case 1:
-                            popover = _e.sent();
-                            return [4 /*yield*/, popover.present()];
-                        case 2:
-                            _e.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        JobProgressionComponent.prototype.markForCheck = function () {
-            this.cd.markForCheck();
-        };
-        JobProgressionComponent.prototype.ngOnDestroy = function () {
-            if (this.debug) {
-                console.debug(this._logPrefix + "Destroying");
-            }
-            this._subscriptions.unsubscribe();
-        };
-        return JobProgressionComponent;
-    }());
-    JobProgressionComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-job-progression',
-                    template: "<button\n  #button\n  mat-icon-button\n  [title]=\"titleI18n | translate\"\n  [disabled]=\"disabled\"\n  *ngIf=\"visible\"\n  (click)=\"showList($event)\"\n>\n  <mat-icon\n    [matBadge]=\"jobProgressions?.length\"\n    [matBadgeHidden]=\"!jobProgressions?.length\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n  >{{ disabled || jobProgressions?.length ? 'schedule' : 'task_alt' }}\n  </mat-icon>\n  <mat-spinner\n    #spinner\n    *ngIf=\"jobProgressions?.length\"\n    class=\"floating-spinner\"\n    [color]=\"color\"\n    [mode]=\"mode\"\n    [value]=\"value\"\n    diameter=\"30\"\n    strokeWidth=\"3\"\n  ></mat-spinner>\n</button>\n\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".floating-spinner{position:absolute;top:6px;left:5px}"]
-                },] }
-    ];
-    JobProgressionComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [JobProgressionServiceToken,] }] },
-        { type: i1$5.PopoverController },
-        { type: i0.ChangeDetectorRef }
-    ]; };
-    JobProgressionComponent.propDecorators = {
-        debug: [{ type: i0.Input }],
-        titleI18n: [{ type: i0.Input }],
-        options: [{ type: i0.Input }],
-        jobFinished: [{ type: i0.Output }]
-    };
-
-    var JobModule = /** @class */ (function () {
-        function JobModule() {
-        }
-        return JobModule;
-    }());
-    JobModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        i1$4.CommonModule,
-                        SharedModule,
-                        i1$2.TranslateModule.forChild(),
-                    ],
-                    declarations: [
-                        JobProgressionComponent,
-                        JobProgressionList
-                    ],
-                    exports: [
-                        JobProgressionComponent
-                    ]
-                },] }
-    ];
-
-    var SocialModuleOptionsToken = new i0.InjectionToken("SocialModuleOptions");
-    var SocialModule = /** @class */ (function () {
-        function SocialModule() {
-        }
-        return SocialModule;
-    }());
-    SocialModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        i1$4.CommonModule,
-                        CoreModule,
-                        SharedModule,
-                        UserEventModule,
-                        JobModule,
-                        MessageModule,
-                    ],
-                },] }
-    ];
-
     var Mutations = {
-        send: core.gql(templateObject_1$5 || (templateObject_1$5 = __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$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  }"])))
     };
     var MessageService = /** @class */ (function (_super) {
         __extends(MessageService, _super);
@@ -31751,7 +31128,7 @@
         { type: i1$5.ToastController },
         { type: Environment, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [ENVIRONMENT,] }] }
     ]; };
-    var templateObject_1$5;
+    var templateObject_1$4;
 
     var PersonFilter_1;
     // @dynamic
@@ -31810,7 +31187,7 @@
     ], exports.PersonFilter);
 
     var PersonFragments = {
-        person: core.gql(templateObject_1$6 || (templateObject_1$6 = __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$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  }"])))
     };
     // Load persons query
     var PersonQueries = {
@@ -31950,7 +31327,7 @@
         { type: NetworkService },
         { type: EntitiesStorage }
     ]; };
-    var templateObject_1$6, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2;
+    var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2;
 
     var PersonValidatorService = /** @class */ (function () {
         function PersonValidatorService(formBuilder, accountValidatorService) {
@@ -32360,10 +31737,12 @@
         };
         AutocompleteTestPage.prototype.ngAfterViewInit = function () {
             var _this = this;
-            setTimeout(function () {
-                _this.farEntityField.suggestLengthThreshold = 2;
-                _this.farEntityField.reloadItems();
-            }, 2000);
+            if (this.farEntityField) {
+                setTimeout(function () {
+                    _this.farEntityField.suggestLengthThreshold = 2;
+                    _this.farEntityField.reloadItems();
+                }, 2000);
+            }
             setTimeout(function () { return _this.loadData(); }, 1000);
         };
         // Load the form with data
@@ -32470,7 +31849,7 @@
     AutocompleteTestPage.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-autocomplete-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>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar>\n    <a mat-tab-link\n       [active]=\"mode==='mobile'\"\n       (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='desktop'\"\n       (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='memory'\"\n       (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link\n       [active]=\"mode==='temp'\"\n       (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!--<ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n    </ion-grid>-->\n\n\n    <ion-grid *ngIf=\"mode === 'memory'\">\n\n      <!-- debugging memory leak -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Debug memory leak</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Items type\">\n            <mat-select (selectionChange)=\"memoryAutocompleteFieldName=$event.value\" [value]=\"memoryAutocompleteFieldName\">\n              <mat-option value=\"entity-$items\">Observable</mat-option>\n              <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n        <ion-col size=\"1\" class=\"ion-no-padding\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Mobile ?\">\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field formControlName=\"entity\"\n                                  *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n                                  [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                                  [mobile]=\"memoryMobile\"\n                                  [equals]=\"equals\"\n                                  [logPrefix]=\"'[combo-memory-leak]'\">\n          </mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Entity far in the list (not in first page)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: normal !important;\">value: {{stringify(form.controls.farEntity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"farEntity\" #farEntityField\n                                      [config]=\"autocompleteFields.get('entity-far')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-far]'\"\n                                      [debug]=\"true\"\n                                      [required]=\"true\"\n                                      [clearable]=\"true\"\n                                      placeholder=\"Far entity (in the list)\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-1]'\"\n                                      [required]=\"true\"\n                                      placeholder=\"Suggest field\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Items is an Observable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-observable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [clearable]=\"true\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      suggestLengthThreshold=\"3\"\n                                      [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n                                      required\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      mobile=\"true\"\n                                      multiple=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Change filter\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre></pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-button (click)=\"updateFilter(filterChangeField, 'entity-items-filter')\">Filter on: {{autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}</ion-button>\n                  </ion-col>\n                  <ion-col>\n                    <mat-autocomplete-field formControlName=\"entity\" #filterChangeField\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-filter]'\"\n                    ></mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"min-width-large\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"true\"\n                                      class=\"min-width-large\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Fullscreen\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-mobile-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Desktop mode -->\n    <ion-grid *ngIf=\"mode === 'desktop'\">\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Desktop mode</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  items from suggest function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [clearable]=\"true\"\n                                      [logPrefix]=\"'[combo-desktop-suggest]'\">\n              </mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      suggestLengthThreshold=\"3\"\n                                      [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an array\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: [], value: {{stringify(form.controls.entity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items')\"\n                                      [logPrefix]=\"'[combo-desktop-array-1]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      mobile=\"false\"\n                                      multiple=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-missing]'\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size panel\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-disable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                      [readonly]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"mat-autocomplete-panel-full-size\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      class=\"mat-autocomplete-panel-full-size\"\n                                      panelWidth=\"100vw\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelWidth: string</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                  <ion-col size=\"3\">\n                    <mat-checkbox #showIcons [checked]=\"false\">\n                      Icons ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"false\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                      <mat-icon matPrefix *ngIf=\"showIcons.checked\">keyboard_arrow_right</mat-icon>\n                      <mat-icon matSuffix *ngIf=\"showIcons.checked\">keyboard_arrow_left</mat-icon>\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\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>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar>\n    <a mat-tab-link\n       [active]=\"mode==='mobile'\"\n       (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='desktop'\"\n       (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='memory'\"\n       (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link\n       [active]=\"mode==='temp'\"\n       (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!--<ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n    </ion-grid>-->\n\n\n    <ion-grid *ngIf=\"mode === 'memory'\">\n\n      <!-- debugging memory leak -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Debug memory leak</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Items type\">\n            <mat-select (selectionChange)=\"memoryAutocompleteFieldName=$event.value\" [value]=\"memoryAutocompleteFieldName\">\n              <mat-option value=\"entity-$items\">Observable</mat-option>\n              <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n        <ion-col size=\"1\" class=\"ion-no-padding\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Mobile ?\">\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field formControlName=\"entity\"\n                                  *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n                                  [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                                  [mobile]=\"memoryMobile\"\n                                  [equals]=\"equals\"\n                                  [logPrefix]=\"'[combo-memory-leak]'\">\n          </mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Entity far in the list (not in first page)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: normal !important;\">value: {{stringify(form.controls.farEntity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"farEntity\" #farEntityField\n                                      [config]=\"autocompleteFields.get('entity-far')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-far]'\"\n                                      [debug]=\"true\"\n                                      [required]=\"true\"\n                                      [clearable]=\"true\"\n                                      placeholder=\"Far entity (in the list)\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-1]'\"\n                                      [required]=\"true\"\n                                      placeholder=\"Suggest field\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Items is an Observable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-observable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [clearable]=\"true\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      suggestLengthThreshold=\"3\"\n                                      [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n                                      required\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      mobile=\"true\"\n                                      multiple=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Change filter\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre></pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-button (click)=\"updateFilter(filterChangeField, 'entity-items-filter')\">Filter on: {{autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}</ion-button>\n                  </ion-col>\n                  <ion-col>\n                    <mat-autocomplete-field formControlName=\"entity\" #filterChangeField\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-filter]'\"\n                    ></mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"min-width-large\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"true\"\n                                      class=\"min-width-large\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Fullscreen\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-mobile-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Desktop mode -->\n    <ion-grid *ngIf=\"mode === 'desktop'\">\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Desktop mode</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  items from suggest function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [clearable]=\"true\"\n                                      [logPrefix]=\"'[combo-desktop-suggest]'\"\n                                      [debug]=\"true\">\n              </mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      suggestLengthThreshold=\"3\"\n                                      [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an array\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: [], value: {{stringify(form.controls.entity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items')\"\n                                      [logPrefix]=\"'[combo-desktop-array-1]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      mobile=\"false\"\n                                      multiple=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-missing]'\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size panel\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-disable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                      [readonly]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"mat-autocomplete-panel-full-size\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      class=\"mat-autocomplete-panel-full-size\"\n                                      panelWidth=\"100vw\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelWidth: string</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                  <ion-col size=\"3\">\n                    <mat-checkbox #showIcons [checked]=\"false\">\n                      Icons ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"false\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                      <mat-icon matPrefix *ngIf=\"showIcons.checked\">keyboard_arrow_right</mat-icon>\n                      <mat-icon matSuffix *ngIf=\"showIcons.checked\">keyboard_arrow_left</mat-icon>\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
                 },] }
     ];
     AutocompleteTestPage.ctorParameters = function () { return [
@@ -32552,13 +31931,13 @@
         { type: i1.FormBuilder }
     ]; };
 
-    var moment$7 = momentImported__namespace;
+    var moment$6 = momentImported__namespace;
     var SwipeTestPage = /** @class */ (function () {
         function SwipeTestPage(formBuilder, dateFormatPipe) {
             this.formBuilder = formBuilder;
             this.dateFormatPipe = dateFormatPipe;
             this.$dates = new rxjs.BehaviorSubject(undefined);
-            this._today = moment$7().startOf('day');
+            this._today = moment$6().startOf('day');
             this.form = formBuilder.group({
                 empty: [null, i1.Validators.required],
                 date: [null, i1.Validators.compose([i1.Validators.required, SharedValidators.validDate])],
@@ -32572,7 +31951,7 @@
             var _this = this;
             var dates = [];
             for (var d = 0; d < 7; d++) {
-                dates[d] = moment$7(this._today).add(d - 3, 'day');
+                dates[d] = moment$6(this._today).add(d - 3, 'day');
             }
             this.$dates.next(dates);
             this.loadData();
@@ -32619,7 +31998,7 @@
         { type: DateFormatPipe }
     ]; };
 
-    var moment$8 = momentImported__namespace;
+    var moment$7 = momentImported__namespace;
     var DateTimeTestPage = /** @class */ (function () {
         function DateTimeTestPage(platform, formBuilder, cd) {
             this.platform = platform;
@@ -32655,7 +32034,7 @@
                 var now, data;
                 var _this = this;
                 return __generator(this, function (_a) {
-                    now = moment$8();
+                    now = moment$7();
                     data = {
                         empty: null,
                         emptyRequired: null,
@@ -32933,7 +32312,7 @@
         { type: i1.FormBuilder }
     ]; };
 
-    var moment$9 = momentImported__namespace;
+    var moment$8 = momentImported__namespace;
     var DateTestPage = /** @class */ (function () {
         function DateTestPage(formBuilder, cd) {
             this.formBuilder = formBuilder;
@@ -32970,7 +32349,7 @@
                 var now, nowAtMahe, data;
                 var _this = this;
                 return __generator(this, function (_a) {
-                    now = moment$9();
+                    now = moment$8();
                     nowAtMahe = now.clone().tz(this.timezone).startOf('day');
                     data = {
                         empty: null,
@@ -33809,7 +33188,6 @@
     exports.APP_MENU_ITEMS = APP_MENU_ITEMS;
     exports.APP_TESTING_PAGES = APP_TESTING_PAGES;
     exports.AboutModal = AboutModal;
-    exports.AbstractUserEventService = AbstractUserEventService;
     exports.AccountPage = AccountPage;
     exports.AccountService = AccountService;
     exports.AccountToStringPipe = AccountToStringPipe;
@@ -33936,11 +33314,6 @@
     exports.IsNotNilOrBlankPipe = IsNotNilOrBlankPipe;
     exports.IsNotOnFieldModePipe = IsNotOnFieldModePipe;
     exports.IsOnFieldModePipe = IsOnFieldModePipe;
-    exports.Job = Job;
-    exports.JobModule = JobModule;
-    exports.JobProgressionComponent = JobProgressionComponent;
-    exports.JobProgressionService = JobProgressionService;
-    exports.JobProgressionServiceToken = JobProgressionServiceToken;
     exports.JobUtils = JobUtils;
     exports.KEYBOARD_HIDE_DELAY_MS = KEYBOARD_HIDE_DELAY_MS;
     exports.LAT_LONG_DEFAULT_MAX_DECIMALS = LAT_LONG_DEFAULT_MAX_DECIMALS;
@@ -33978,7 +33351,6 @@
     exports.MenuService = MenuService;
     exports.MessageForm = MessageForm;
     exports.MessageModal = MessageModal;
-    exports.MessageModule = MessageModule;
     exports.MessageService = MessageService;
     exports.MessageTypeList = MessageTypeList;
     exports.MessageTypes = MessageTypes;
@@ -34046,7 +33418,6 @@
     exports.SharedValidators = SharedValidators;
     exports.SocialErrorCodes = SocialErrorCodes;
     exports.SocialModule = SocialModule;
-    exports.SocialModuleOptionsToken = SocialModuleOptionsToken;
     exports.StartableService = StartableService;
     exports.StatusById = StatusById;
     exports.StatusIds = StatusIds;
@@ -34075,10 +33446,7 @@
     exports.UploadFileTestingPage = UploadFileTestingPage;
     exports.UriUtils = UriUtils;
     exports.UserEventFragments = UserEventFragments;
-    exports.UserEventModule = UserEventModule;
-    exports.UserEventNotificationComponent = UserEventNotificationComponent;
     exports.UserEventService = UserEventService;
-    exports.UserEventServiceToken = UserEventServiceToken;
     exports.UserEventTypes = UserEventTypes;
     exports.UserEventsTable = UserEventsTable;
     exports.UsersPage = UsersPage;
@@ -34229,6 +33597,7 @@
     exports.uncapitalizeFirstLetter = uncapitalizeFirstLetter;
     exports.updateValueAndValidity = updateValueAndValidity;
     exports.waitFor = waitFor;
+    exports.waitForFalse = waitForFalse;
     exports.waitForTrue = waitForTrue;
     exports.waitIdle = waitIdle;
     exports.waitWhilePending = waitWhilePending;
@@ -34243,13 +33612,11 @@
     exports.ɵh = LocalSettingsValidatorService;
     exports.ɵi = AppUpdateOfflineModeCard;
     exports.ɵj = AppIconComponent;
-    exports.ɵk = UserEventNotificationList;
-    exports.ɵl = JobProgressionList;
-    exports.ɵm = DateTestPage;
-    exports.ɵn = NumpadTestPage;
-    exports.ɵo = MatBadgeIconTestPage;
-    exports.ɵp = ToastTestingModule;
-    exports.ɵq = ToastTestingPage;
+    exports.ɵk = DateTestPage;
+    exports.ɵl = NumpadTestPage;
+    exports.ɵm = MatBadgeIconTestPage;
+    exports.ɵn = ToastTestingModule;
+    exports.ɵo = ToastTestingPage;
 
     Object.defineProperty(exports, '__esModule', { value: true });