@sumaris-net/ngx-components 1.20.36 → 1.21.0-beta11

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

@@ -241,6 +241,64 @@ function changeCaseToUnderscore(value) {
 function removeDiacritics(text) {
     return text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
 }
+function suggestFromArray(items, value, opts) {
+    if (isNotNil(value) && typeof value === 'object')
+        return { data: [value] };
+    value = (typeof value === 'string' && value !== '*') && value.toUpperCase() || undefined;
+    const keys = opts && (opts.searchAttribute && [opts.searchAttribute] || opts.searchAttributes) || ['label'];
+    if (!items) {
+        return { data: [], total: 0 };
+    }
+    // Filter items
+    let filteredItems = items;
+    if (isNotNilOrBlank(value)) {
+        // If wildcard, search using regexp
+        if (value.indexOf('*') !== -1) {
+            value = value.replace(/[*]+/g, '.*');
+            filteredItems = filteredItems.filter(v => keys.findIndex(key => matchUpperCase(getPropertyByPathAsString(v, key), value)) !== -1);
+        }
+        // Else (no wildcard), search using startsWith
+        else {
+            filteredItems = filteredItems.filter(v => keys.findIndex(key => startsWithUpperCase(getPropertyByPathAsString(v, key), value)) !== -1);
+        }
+    }
+    // Exclude ids
+    if (isNotEmptyArray(opts === null || opts === void 0 ? void 0 : opts.excludedIds)) {
+        filteredItems = filteredItems.filter(v => !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));
+    }
+    const total = filteredItems.length || 0;
+    // Pagination (truncate if need)
+    let 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);
+        }
+    }
+    const result = {
+        data: pageData,
+        total
+    };
+    // Add fetch more capability, if total was fetched
+    const nextOffset = (opts && opts.offset || 0) + pageData.length;
+    if (nextOffset < total) {
+        result.fetchMore = (_) => __awaiter(this, void 0, void 0, function* () {
+            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))
@@ -821,11 +879,12 @@ function waitFor(predicate, opts) {
 }
 function waitForTrue(observable, opts) {
     return __awaiter(this, void 0, void 0, function* () {
+        const firstTrueObservable = firstTrue(observable);
         // Timeout (+ dueTime)
         if (opts && opts.timeout > 0) {
             const $timeout = timer(opts.timeout);
             return merge(timer(opts.dueTime || 0)
-                .pipe(switchMap(() => firstTrue(observable)), takeUntil($timeout)), $timeout
+                .pipe(switchMap(() => firstTrueObservable), takeUntil($timeout)), $timeout
                 .pipe(map(() => {
                 throw new Error(`Timeout ready() - after ${opts.timeout}ms`);
             })))
@@ -834,10 +893,10 @@ function waitForTrue(observable, opts) {
         // dueTime (without timeout)
         if (opts && opts.dueTime > 0) {
             return timer(opts.dueTime)
-                .pipe(switchMap(() => firstTrue(observable)))
+                .pipe(switchMap(() => firstTrueObservable))
                 .toPromise();
         }
-        return firstTrue(observable).toPromise();
+        return firstTrueObservable.toPromise();
     });
 }
 
@@ -1041,65 +1100,6 @@ const isMobile = (win) => {
     return _cache.mobile;
 };
 
-function suggestFromArray(items, value, opts) {
-    if (isNotNil(value) && typeof value === 'object')
-        return { data: [value] };
-    value = (typeof value === 'string' && value !== '*') && value.toUpperCase() || undefined;
-    const keys = opts && (opts.searchAttribute && [opts.searchAttribute] || opts.searchAttributes) || ['label'];
-    if (!items) {
-        return { data: [], total: 0 };
-    }
-    // Filter items
-    let filteredItems = items;
-    if (isNotNilOrBlank(value)) {
-        // If wildcard, search using regexp
-        if (value.indexOf('*') !== -1) {
-            value = value.replace(/[*]+/g, '.*');
-            filteredItems = filteredItems.filter(v => keys.findIndex(key => matchUpperCase(getPropertyByPathAsString(v, key), value)) !== -1);
-        }
-        // Else (no wildcard), search using startsWith
-        else {
-            filteredItems = filteredItems.filter(v => keys.findIndex(key => startsWithUpperCase(getPropertyByPathAsString(v, key), value)) !== -1);
-        }
-    }
-    // Exclude ids
-    if (isNotEmptyArray(opts === null || opts === void 0 ? void 0 : opts.excludedIds)) {
-        filteredItems = filteredItems.filter(v => !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));
-    }
-    const total = filteredItems.length || 0;
-    // Pagination (truncate if need)
-    let 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);
-        }
-    }
-    const result = {
-        data: pageData,
-        total
-    };
-    // Add fetch more capability, if total was fetched
-    const nextOffset = (opts && opts.offset || 0) + pageData.length;
-    if (nextOffset < total) {
-        result.fetchMore = (_) => __awaiter(this, void 0, void 0, function* () {
-            return suggestFromArray(filteredItems, undefined /*OPTIMISATION: already applied*/, Object.assign(Object.assign({}, opts), { offset: nextOffset, skipSort: true, excludedIds: undefined // OPTIMISATION: already filtered
-             }));
-        });
-    }
-    return result;
-}
-
 class MatAutocompleteConfigHolder {
     constructor(options) {
         this.options = options;
@@ -1360,11 +1360,11 @@ class MatAutocompleteField {
         // Search text (no distinctUntilChanged() because of the debounceTime() pipe)
         this.formControl.valueChanges
             .pipe(filter(value => this.enabled && isNotNilString(value)), 
-        // Mark as loading (to show loading spinner) - as soon as possible, and before debounceTime
+        // Mark as loading (to show loading spinner) - earlier as possible, so before the debounce time
         tap(_ => this.showLoadingSpinner && this.markAsLoading()), 
         // Filter if not enough character
         filter(value => {
-            if (((value === null || value === void 0 ? void 0 : value.length) || 0) < this.suggestLengthThreshold) {
+            if (value.length <= this.suggestLengthThreshold) {
                 // Update display value, to enable the message "not enough characters"
                 this.displayValue = value;
                 return false;
@@ -2328,9 +2328,9 @@ class HighlightPipe {
             const cleanedSearchText = removeDiacritics(searchRegexp).toUpperCase();
             const index = removeDiacritics(value.toUpperCase()).indexOf(cleanedSearchText);
             if (index !== -1) {
-                return value.substring(0, index - 1) +
-                    '<b>' + value.substring(index, cleanedSearchText.length) + '</b>' +
-                    value.substring(index + cleanedSearchText.length);
+                return value.substr(0, index - 1) +
+                    '<b>' + value.substr(index, cleanedSearchText.length) + '</b>' +
+                    value.substr(index + cleanedSearchText.length);
             }
             return value;
         }
@@ -2728,50 +2728,60 @@ class IsNotNilOrBlankPipe {
         return isNotNilOrBlank(value);
     }
 }
+IsNotNilOrBlankPipe.ɵprov = ɵɵdefineInjectable({ factory: function IsNotNilOrBlankPipe_Factory() { return new IsNotNilOrBlankPipe(); }, token: IsNotNilOrBlankPipe, providedIn: "root" });
 IsNotNilOrBlankPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'isNotNilOrBlank'
-            },] }
+            },] },
+    { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
 class IsNilOrBlankPipe {
     transform(value) {
         return isNilOrBlank(value);
     }
 }
+IsNilOrBlankPipe.ɵprov = ɵɵdefineInjectable({ factory: function IsNilOrBlankPipe_Factory() { return new IsNilOrBlankPipe(); }, token: IsNilOrBlankPipe, providedIn: "root" });
 IsNilOrBlankPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'isNilOrBlank'
-            },] }
+            },] },
+    { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
 class ToStringPipe {
     transform(value) {
         return (value !== null && value !== undefined) ? value.toString() : '';
     }
 }
+ToStringPipe.ɵprov = ɵɵdefineInjectable({ factory: function ToStringPipe_Factory() { return new ToStringPipe(); }, token: ToStringPipe, providedIn: "root" });
 ToStringPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'toString'
-            },] }
+            },] },
+    { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
 class StrLengthPipe {
     transform(value) {
         return value && value.length || 0;
     }
 }
+StrLengthPipe.ɵprov = ɵɵdefineInjectable({ factory: function StrLengthPipe_Factory() { return new StrLengthPipe(); }, token: StrLengthPipe, providedIn: "root" });
 StrLengthPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'strLength'
-            },] }
+            },] },
+    { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
 class StrIncludesPipe {
     transform(value, searchString, position) {
         return (value === null || value === void 0 ? void 0 : value.includes(searchString, position)) || false;
     }
 }
+StrIncludesPipe.ɵprov = ɵɵdefineInjectable({ factory: function StrIncludesPipe_Factory() { return new StrIncludesPipe(); }, token: StrIncludesPipe, providedIn: "root" });
 StrIncludesPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'strIncludes'
-            },] }
+            },] },
+    { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
 
 class TranslateContextService {
@@ -4222,7 +4232,8 @@ FormGetGroupPipe.decorators = [
             },] }
 ];
 class FormGetValuePipe {
-    constructor(_ref) {
+    constructor(adapter, _ref) {
+        this.adapter = adapter;
         this._ref = _ref;
         this.value = undefined;
         this._lastControl = null;
@@ -4287,6 +4298,7 @@ FormGetValuePipe.decorators = [
             },] }
 ];
 FormGetValuePipe.ctorParameters = () => [
+    { type: FormErrorTranslator },
     { type: ChangeDetectorRef }
 ];
 
@@ -5157,8 +5169,7 @@ class MatDate {
     set tabindex(value) {
         if (this._tabindex !== value) {
             this._tabindex = value;
-            if (!this._writing)
-                this.updateTabIndex();
+            setTimeout(() => this.updateTabIndex());
         }
     }
     get tabindex() {
@@ -5517,8 +5528,7 @@ class MatDateTime {
     set tabindex(value) {
         if (this._tabindex !== value) {
             this._tabindex = value;
-            if (!this._writing)
-                this.updateTabIndex();
+            setTimeout(() => this.updateTabIndex());
         }
     }
     get tabindex() {
@@ -10697,7 +10707,7 @@ class LocalSettingsService extends StartableService {
     }
     get usageMode() {
         var _a;
-        if (isNil((_a = this._data) === null || _a === void 0 ? void 0 : _a.usageMode)) {
+        if (isNil((_a = this._data) === null || _a === void 0 ? void 0 : _a.mobile)) {
             console.warn("[settings] Accessing to property 'usageMode' BEFORE service started! Please use ready()");
             return isCordova(window) ? 'FIELD' : 'DESK';
         }
@@ -18203,18 +18213,6 @@ class InMemoryEntitiesService extends EntitiesService {
             return this._equalsFn(d1, d2);
         return d1 && d1.equals ? d1.equals(d2) : EntityUtils.equals(d1, d2, 'id');
     }
-    /**
-     * Count data stored by the service (without hidden data).
-     * @param opts
-     */
-    get count() {
-        var _a;
-        return (((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) || 0);
-    }
-    get hiddenCount() {
-        var _a;
-        return ((_a = this._hiddenData) === null || _a === void 0 ? void 0 : _a.length) || 0;
-    }
     /* -- protected methods -- */
     filter(data, _filter, hiddenData) {
         // if filter is DataFilter instance, use its test function
@@ -21433,7 +21431,7 @@ class MenuComponent {
 MenuComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-menu',
-                template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" contentId=\"menu-content\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px;\"/>\n              <span *ngIf=\"!logo\" width=\"108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n\n            <button mat-button type=\"button\"\n                    [routerLink]=\"['/account']\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"ion-color-primary\"\n                    (click)=\"close()\">\n              <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                <h3 class=\"no-margin username\">\n                  <b>{{accountName}}</b>\n                </h3>\n                <h4>{{accountEmail}}</h4>\n              </ion-label>\n            </button>\n\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of $items | async\">\n\n          <!-- link -->\n          <ion-item *ngIf=\"!loading && item.path\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    [routerLink]=\"item.path\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"selected\"\n                    [routerLinkActiveOptions]=\"{exact: (item.path === '/')}\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- action -->\n          <ion-item *ngIf=\"!loading && item.action\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    (click)=\"doAction(item.action, $event)\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- divider -->\n          <ion-item-divider @fadeInAnimation\n                            class=\"{{item.cssClass}} {{item.color}}\"\n                            *ngIf=\"!loading && !item.path && !item.action\">\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item-divider>\n\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\n</ion-split-pane>\n",
+                template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" contentId=\"menu-content\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px;\"/>\n              <span *ngIf=\"!logo\" width=\"108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n\n            <button mat-button type=\"button\"\n                    [routerLink]=\"['/account']\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"ion-color-primary\"\n                    (click)=\"close()\">\n              <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                <h3 class=\"no-margin username\">\n                  <b>{{accountName}}</b>\n                </h3>\n                <h4>{{accountEmail}}</h4>\n              </ion-label>\n            </button>\n\n<!--            todo ajouter ici les 2 composants du module social -->\n\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of $items | async\">\n\n          <!-- link -->\n          <ion-item *ngIf=\"!loading && item.path\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    [routerLink]=\"item.path\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"selected\"\n                    [routerLinkActiveOptions]=\"{exact: (item.path === '/')}\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- action -->\n          <ion-item *ngIf=\"!loading && item.action\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    (click)=\"doAction(item.action, $event)\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- divider -->\n          <ion-item-divider @fadeInAnimation\n                            class=\"{{item.cssClass}} {{item.color}}\"\n                            *ngIf=\"!loading && !item.path && !item.action\">\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item-divider>\n\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\n</ion-split-pane>\n",
                 animations: [fadeInAnimation],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: ["ion-menu{--ion-item-background:transparent;--ion-item-divider-background:transparent;--ion-item-icon-color:var(--ion-color-primary-tint);--ion-item-text-color:var(--ion-color-primary-tint);--ion-item-background-selected:var(--ion-color-secondary100);--ion-item-text-color-selected:var(--ion-color-primary);--ion-item-icon-color-selected:var(--ion-color-primary);--ion-item-text-color-disable:var(--ion-color-medium);--ion-item-icon-color-disable:var(--ion-color-medium)}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header .user-avatar{background-size:cover;background-repeat:no-repeat;background-position:50%;background-color:var(--ion-color-secondary);border:1px solid var(--ion-color-primary);overflow:hidden!important;font-size:var(--avatar-size,60px)!important;line-height:var(--avatar-size,60px);height:var(--avatar-size,60px)!important;width:var(--avatar-size,60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size,60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;text-align:start!important;width:100%}ion-menu .scroll-content{margin-top:79px!important}ion-menu .has-user-header .scroll-content{margin-top:188px!important}ion-menu ion-content.has-profile-header{--offset-top:188px}ion-menu ion-content.no-profile-header{--offset-top:79px}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color:var(--ion-color-primary-tint);--ion-item-text-color:var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color:var(--ion-color-secondary-tint);--ion-item-text-color:var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color:var(--ion-color-tertiary-tint);--ion-item-text-color:var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color:var(--ion-color-danger-tint);--ion-item-text-color:var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color:var(--ion-color-medium-shade);--ion-item-text-color:var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color:var(--ion-color-dark-tint);--ion-item-text-color:var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item ion-icon,ion-menu ion-content ion-list ion-item mat-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-label,ion-menu ion-content ion-list ion-item ion-text{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover:var(--ion-item-background-selected)!important}ion-menu ion-content ion-list ion-item.selected ion-icon,ion-menu ion-content ion-list ion-item.selected mat-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-label,ion-menu ion-content ion-list ion-item.selected ion-text{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover:var(--ion-item-background-selected)!important;--ion-item-icon-color-selected:var(--ion-item-icon-color)!important;--ion-item-text-color-selected:var(--ion-item-text-color)!important}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width:40px}@media screen and (max-width:767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width:768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size,80px)!important;line-height:var(--avatar-size,80px);height:var(--avatar-size,80px)!important;width:var(--avatar-size,80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size,80px)}}"]
@@ -21497,13 +21495,14 @@ class AppIconComponent {
         this.icon = value.icon;
         this.matIcon = value.matIcon;
         this.matSvgIcon = value.matSvgIcon;
+        this.color = value.color;
     }
     ;
 }
 AppIconComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-icon',
-                template: "<ion-icon *ngIf=\"icon; else matIconTemplate\" slot=\"icon-only\"\n          [color]=\"color\"\n          [name]=\"icon\"\n></ion-icon>\n<ng-template #matIconTemplate>\n  <mat-icon [svgIcon]=\"matSvgIcon\"\n            [style.color]=\"'var(--ion-color-'+color+')'\">{{matIcon}}</mat-icon>\n</ng-template>\n\n"
+                template: "<ion-icon *ngIf=\"icon; else matIconTemplate\" slot=\"icon-only\"\n          [color]=\"color\"\n          [name]=\"icon\"\n          [style.height.px]=\"height\"\n          [style.width.px]=\"width\"\n></ion-icon>\n<ng-template #matIconTemplate>\n  <mat-icon [svgIcon]=\"matSvgIcon\"\n            [style.color]=\"'var(--ion-color-'+color+')'\"\n            [style.height.px]=\"height\"\n            [style.width.px]=\"width\"\n            [style.font-size.px]=\"height || width\"\n  >{{matIcon}}</mat-icon>\n</ng-template>\n\n"
             },] }
 ];
 AppIconComponent.propDecorators = {
@@ -21511,6 +21510,8 @@ AppIconComponent.propDecorators = {
     matIcon: [{ type: Input }],
     matSvgIcon: [{ type: Input }],
     color: [{ type: Input }],
+    height: [{ type: Input }],
+    width: [{ type: Input }],
     ref: [{ type: Input }]
 };
 
@@ -23012,7 +23013,7 @@ class AppTable {
                 .then(() => this.editRowById(event, row.id, { focusColumn: this.lastUserColumn }));
             return true;
         }
-        // Edit previous row
+        // Edit next row
         this.editRow(event, row, { focusColumn: this.lastUserColumn });
         return true;
     }
@@ -23035,7 +23036,8 @@ class AppTable {
             if (id < 0)
                 return;
             if (id >= this.visibleRowCount) {
-                this.addRow(event, undefined, opts);
+                this.focusColumn = opts && opts.focusColumn || this.firstUserColumn;
+                this.addRow(event);
             }
             else {
                 const row = yield this.dataSource.getRow(id);
@@ -23108,7 +23110,7 @@ class AppTable {
             this.cancelExistingRow(event, row, opts);
         }
     }
-    addRow(event, insertAt, opts) {
+    addRow(event, insertAt) {
         if (this.debug)
             console.debug('[table] Asking for new row...');
         if (!this._enabled)
@@ -23123,7 +23125,7 @@ class AppTable {
             return false;
         }
         // Add new row
-        this.addRowToTable(insertAt, opts);
+        this.addRowToTable(insertAt);
         return true;
     }
     save(opts) {
@@ -23238,7 +23240,7 @@ class AppTable {
      * @param event
      * @param row
      * @param opts Use interactive=false to avoid user interaction (e.g. user confirmation)
-     *  And to force deletion even if table is busy
+     *  Use skipIfLoading=false to force deletion even if table is busy
      */
     deleteRow(event, row, opts) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -23251,7 +23253,7 @@ class AppTable {
      * @param event
      * @param rows
      * @param opts Use interactive=false to avoid user interaction (e.g. user confirmation)
-     *    And to force deletion even if table is busy
+     *    Use skipIfLoading=false to force deletion even if table is busy
      */
     deleteRows(event, rows, opts) {
         var _a;
@@ -23264,8 +23266,8 @@ class AppTable {
             event === null || event === void 0 ? void 0 : event.preventDefault();
             if (!this._enabled || isEmptyArray(rows))
                 return 0; // Skip is disabled, or no rows to delete
-            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');
+            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');
                 return 0; // Skip if loading
             }
             // Make sure to keep newly created row
@@ -23788,10 +23790,9 @@ class AppTable {
         //if (this.debug) console.debug("[table] id = " + id);
         return id;
     }
-    addRowToTable(insertAt, opts) {
+    addRowToTable(insertAt) {
         return __awaiter(this, void 0, void 0, function* () {
             this.focusFirstColumn = true;
-            this.focusColumn = (opts === null || opts === void 0 ? void 0 : opts.focusColumn) || this.firstUserColumn;
             yield this._dataSource.asyncCreateNew(insertAt);
             this.editedRow = this._dataSource.getRow(-1);
             // Emit start editing event
@@ -24307,8 +24308,6 @@ class AppEditor {
     }
     ready(opts) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (this._$ready.value)
-                return;
             return waitForTrue(this._$ready, opts);
         });
     }
@@ -25824,7 +25823,10 @@ AppInMemoryTable.propDecorators = {
 const SocialErrorCodes = {
     LOAD_USER_EVENTS_ERROR: 50000,
     SAVE_USER_EVENT_ERROR: 50001,
-    SEND_MESSAGE_ERROR: 50003
+    COUNT_USER_EVENT_ERROR: 50002,
+    SEND_MESSAGE_ERROR: 50003,
+    SUBSCRIBE_USER_EVENTS_ERROR: 50005,
+    SUBSCRIBE_JOB_PROGRESSION_ERROR: 50010
 };
 
 var UserEvent_1;
@@ -25839,16 +25841,23 @@ let UserEvent = UserEvent_1 = class UserEvent extends Entity {
     }
     asObject(opts) {
         const target = super.asObject(opts);
+        target.creationDate = toDateISOString(this.creationDate);
+        target.readDate = toDateISOString(this.readDate);
         // Serialize content
         if (typeof target.content === 'object') {
             target.content = JSON.stringify(target.content);
         }
+        delete target.avatar;
+        delete target.avatarIcon;
+        delete target.icon;
+        delete target.actions;
         return target;
     }
     fromObject(source) {
         Object.assign(this, source); // Copy all properties
         super.fromObject(source);
         this.creationDate = fromDateISOString(source.creationDate);
+        this.readDate = fromDateISOString(source.readDate);
         try {
             // Deserialize content
             if (typeof source.content === 'string' && source.content.startsWith('{')) {
@@ -25867,6 +25876,52 @@ let UserEvent = UserEvent_1 = class UserEvent extends Entity {
 UserEvent = UserEvent_1 = __decorate([
     EntityClass({ typename: 'UserEventVO' })
 ], UserEvent);
+// @dynamic
+let UserEventFilter = class UserEventFilter extends EntityFilter {
+    constructor() {
+        super(...arguments);
+        this.types = [];
+        this.levels = [];
+        this.issuers = [];
+        this.recipients = [];
+        this.startDate = null;
+        this.excludeRead = false;
+    }
+    fromObject(source, opts) {
+        super.fromObject(source, opts);
+        this.types = source.types || [];
+        this.levels = source.levels || [];
+        this.issuers = source.issuers || [];
+        this.recipients = source.recipients || [];
+        this.startDate = fromDateISOString(source.startDate);
+        this.excludeRead = source.excludeRead || false;
+    }
+    buildFilter() {
+        const filterFns = super.buildFilter();
+        if (isNotEmptyArray(this.types)) {
+            filterFns.push(t => this.types.includes(t.type));
+        }
+        if (isNotEmptyArray(this.levels)) {
+            filterFns.push(t => this.levels.includes(t.level));
+        }
+        if (isNotEmptyArray(this.issuers)) {
+            filterFns.push(t => this.issuers.includes(t.issuer));
+        }
+        if (isNotEmptyArray(this.recipients)) {
+            filterFns.push(t => this.recipients.includes(t.recipient));
+        }
+        if (isNotNil(this.startDate)) {
+            filterFns.push(t => this.startDate.isSameOrBefore(t.creationDate));
+        }
+        if (this.excludeRead === true) {
+            filterFns.push(t => isNil(t.readSignature)); // todo or t.signature ?
+        }
+        return filterFns;
+    }
+};
+UserEventFilter = __decorate([
+    EntityClass({ typename: 'UserEventFilterVO' })
+], UserEventFilter);
 
 const UserEventFragments = {
     userEvent: gql `fragment UserEventFragment on UserEventVO {
@@ -25894,179 +25949,162 @@ const UserEventFragments = {
   }`
 };
 
-// @dynamic
-let UserEventFilter = class UserEventFilter extends EntityFilter {
-    constructor() {
-        super(...arguments);
-        this.issuer = null;
-        this.recipient = null;
-    }
-    fromObject(source, opts) {
-        super.fromObject(source, opts);
-        this.issuer = source.issuer;
-        this.recipient = source.recipient;
-    }
-    buildFilter() {
-        const filterFns = super.buildFilter();
-        // issuer
-        if (this.issuer) {
-            filterFns.push(t => (t.issuer === this.issuer));
-        }
-        if (this.recipient) {
-            filterFns.push(t => (t.recipient === this.recipient));
-        }
-        return filterFns;
-    }
-};
-UserEventFilter = __decorate([
-    EntityClass({ typename: 'UserEventFilterVO' })
-], UserEventFilter);
-const SaveQuery = gql `
-  mutation SaveUserEvent($data: UserEventVOInput){
-    data: saveUserEvent(userEvent: $data){
-      ...UserEventFragment
-    }
-  }
-  ${UserEventFragments.userEvent}
-`;
-const LoadAllQuery = gql `
-  query UserEvents($filter: UserEventFilterVOInput, $page: PageInput){
-    data: userEvents(filter: $filter, page: $page){
-      ...LightUserEventFragment
-    }
-  }
-  ${UserEventFragments.lightUserEvent}
-`;
-const DeleteByIdsMutation = gql `
-  mutation DeleteUserEvents($ids:[Int]){
-    deleteUserEvents(ids: $ids)
-  }
-`;
-const LoadAllWithContentQuery = gql `
-  query UserEventsWithContent($filter: UserEventFilterVOInput, $page: PageInput){
-    data: userEvents(filter: $filter, page: $page){
-      ...UserEventFragment
-    }
-  }
-  ${UserEventFragments.userEvent}
-`;
-class UserEventService extends BaseGraphqlService {
-    constructor(graphql, accountService, network, translate, toastController, environment) {
+const moment$6 = momentImported;
+const UserEventServiceToken = new InjectionToken('UserEventService');
+class AbstractUserEventService extends BaseGraphqlService {
+    constructor(graphql, accountService, network, translate, queries, mutations, subscriptions, environment) {
         super(graphql, environment);
         this.graphql = graphql;
         this.accountService = accountService;
         this.network = network;
         this.translate = translate;
-        this.toastController = toastController;
+        this.queries = queries;
+        this.mutations = mutations;
+        this.subscriptions = subscriptions;
         this.environment = environment;
-        this._userEventActions = [];
+        this._count$ = new BehaviorSubject(0);
+        this._subscriptions = new Subscription();
+        this.listeners = [];
+        this._logPrefix = '[user-event-service] ';
         // For DEV only
-        this._debug = environment && !environment.production;
+        this._debug = !(environment === null || environment === void 0 ? void 0 : environment.production);
+        // listen login/logout
+        this._subscriptions.add(accountService.onLogin.subscribe(() => __awaiter(this, void 0, void 0, function* () {
+            const count = yield this.count(undefined);
+            if (count && this._debug) {
+                console.debug(`${this._logPrefix}Received ${count} unread notifications`);
+            }
+            this._count$.next(count);
+        })));
+    }
+    get userEventCount() {
+        return this._count$.asObservable();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
     }
-    /**
-     *
-     * @param offset
-     * @param size
-     * @param sortBy
-     * @param sortDirection
-     * @param filter
-     * @param options
-     * @deprecated use watchPage() instead
-     */
     watchAll(offset, size, sortBy, sortDirection, filter, options) {
         return this.watchPage({ offset, size, sortBy, sortDirection }, filter, options);
     }
     watchPage(page, filter, options) {
+        var _a;
         let now = this._debug && Date.now();
-        //if (this._debug)
-        console.debug('[user-event-service] Loading user events...', filter);
+        if (!filter) {
+            filter = this.defaultFilter();
+        }
+        console.debug(`${this._logPrefix}Loading user events...`, filter);
         filter = this.asFilter(filter);
         // Force recipient to current issuer, if not admin and not specified
-        if (isNilOrBlank(filter.recipient) || !this.accountService.isAdmin()) {
-            const recipient = this.accountService.account.pubkey;
-            if (recipient !== filter.recipient) {
+        if (isEmptyArray(filter === null || filter === void 0 ? void 0 : filter.recipients) || !this.accountService.isAdmin()) {
+            const recipient = this.defaultRecipient();
+            if (!((_a = filter === null || filter === void 0 ? void 0 : filter.recipients) === null || _a === void 0 ? void 0 : _a.includes(recipient))) {
                 console.warn('[user-events-service] Force user event filter.recipient=' + recipient);
-                filter.recipient = recipient;
+                filter.recipients = [recipient];
             }
         }
-        const withContent = options && options.withContent === true;
+        const withContent = (options === null || options === void 0 ? void 0 : options.withContent) === true;
         return this.mutableWatchQuery({
             queryName: withContent ? 'LoadAllWithContent' : 'LoadAll',
-            query: withContent ? LoadAllWithContentQuery : LoadAllQuery,
+            query: withContent ? this.queries.loadAllWithContent : this.queries.loadAll,
             variables: {
-                page: Object.assign(Object.assign({ sortBy: 'updateDate' }, page), { sortDirection: (page.sortDirection || 'DESC').toUpperCase() }),
+                page: Object.assign(Object.assign({ sortBy: 'creationDate' }, page), { 
+                    // @ts-ignore
+                    sortDirection: (page.sortDirection || 'desc').toUpperCase() }),
                 filter: filter && filter.asPodObject()
             },
             arrayFieldName: 'data',
             error: { code: SocialErrorCodes.LOAD_USER_EVENTS_ERROR, message: 'SOCIAL.ERROR.LOAD_USER_EVENTS_ERROR' },
-            fetchPolicy: options && options.fetchPolicy || undefined
+            fetchPolicy: (options === null || options === void 0 ? void 0 : options.fetchPolicy) || "cache-first"
         })
             .pipe(map(res => {
-            const data = res && (res.data || []).map(UserEvent.fromObject);
+            const data = ((res === null || res === void 0 ? void 0 : res.data) || []).map(value => this.processUserEvent(value, this));
             if (now) {
-                console.debug(`[user-event-service] ${data.length} user events loaded in ${Date.now() - now}ms`);
+                console.debug(`${this._logPrefix}${data.length} user events loaded in ${Date.now() - now}ms`);
                 now = null;
             }
+            const unreadCount = this.unreadEvents(data);
             return {
                 data,
-                total: res && toNumber(res.total, data.length)
+                total: toNumber(res === null || res === void 0 ? void 0 : res.total, unreadCount)
             };
         }));
     }
-    saveAll(data, options) {
-        return Promise.all(data
-            .map(entity => this.save(entity, options)));
+    add(entity) {
+        // TODO set an id !!!!!!!!!!!!!!!!!!!!!!!!!
+        entity = this.processUserEvent(entity);
+        const withContent = !!entity.content;
+        // Add user event locally
+        this.insertIntoMutableCachedQueries(this.graphql.cache, {
+            query: withContent ? this.queries.loadAllWithContent : this.queries.loadAll,
+            data: entity
+        });
+        // Update count
+        this._count$.next(this._count$.value + 1);
     }
-    /**
-     * Save a userEvent entity
-     *
-     * @param entity
-     */
-    save(entity, options) {
+    count(filter, options) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            this.fillDefaultProperties(entity);
-            // Transform into json
-            const isNew = isNil(entity.id);
-            const json = entity.asObject();
-            const now = Date.now();
+            if (!((_a = this.queries) === null || _a === void 0 ? void 0 : _a.count)) {
+                console.warn(`${this._logPrefix}Query 'count' not provided, skip.`);
+                return undefined;
+            }
+            if (!filter)
+                filter = this.defaultFilter();
+            filter = this.asFilter(filter);
             if (this._debug)
-                console.debug(`[user-event-service] Saving user event...`, json);
-            yield this.graphql.mutate({
-                mutation: SaveQuery,
+                console.debug(`${this._logPrefix}Counting user events with filter:`, filter);
+            const res = yield this.graphql.query({
+                query: this.queries.count,
                 variables: {
-                    data: json
+                    filter: filter.asPodObject()
                 },
-                error: { code: SocialErrorCodes.SAVE_USER_EVENT_ERROR, message: 'SOCIAL.ERROR.SAVE_USER_EVENT_ERROR' },
-                update: (proxy, { data }) => {
-                    // Update entity
-                    const savedEntity = data && data.data;
-                    if (savedEntity) {
-                        if (this._debug)
-                            console.debug(`[user-event-service] User event saved in ${Date.now() - now}ms`, entity);
-                        this.copyIdAndUpdateDate(savedEntity, entity);
-                        // Add to cache
-                        if (isNew) {
-                            this.insertIntoMutableCachedQueries(proxy, {
-                                query: LoadAllQuery,
-                                data: Object.assign(Object.assign({}, savedEntity), { content: null })
-                            });
-                            this.insertIntoMutableCachedQueries(proxy, {
-                                query: LoadAllWithContentQuery,
-                                data: savedEntity
-                            });
-                        }
-                    }
-                }
+                error: { code: SocialErrorCodes.COUNT_USER_EVENT_ERROR, message: 'SOCIAL.ERROR.COUNT_USER_EVENT_ERROR' },
+                fetchPolicy: (options === null || options === void 0 ? void 0 : options.fetchPolicy) || 'network-only'
             });
-            return entity;
+            return res.total;
+        });
+    }
+    listenChanges(filter, options) {
+        var _a;
+        if (!((_a = this.subscriptions) === null || _a === void 0 ? void 0 : _a.listenChanges)) {
+            console.warn(`${this._logPrefix}Subscription query 'listenChanges' not provided, skip.`);
+            return of();
+        }
+        if (!filter)
+            filter = this.defaultFilter();
+        filter = this.asFilter(filter);
+        const withContent = (options === null || options === void 0 ? void 0 : options.withContent) === true;
+        if (this._debug)
+            console.debug(`${this._logPrefix}[WS] Listening changes for user events with filter:`, filter);
+        return this.graphql.subscribe({
+            query: this.subscriptions.listenChanges,
+            fetchPolicy: options === null || options === void 0 ? void 0 : options.fetchPolicy,
+            variables: { filter: filter.asPodObject(), interval: toNumber(options === null || options === void 0 ? void 0 : options.interval, 10) },
+            error: {
+                code: SocialErrorCodes.SUBSCRIBE_USER_EVENTS_ERROR,
+                message: 'SOCIAL.ERROR.SUBSCRIBE_USER_EVENTS_ERROR'
+            }
+        }).pipe(map(({ data }) => {
+            if (data && this._debug)
+                console.debug(`${this._logPrefix}Received new user events:`, data);
+            const updatedData = data === null || data === void 0 ? void 0 : data.map(value => this.processUserEvent(value, this));
+            // Update cache
+            this.insertIntoMutableCachedQueries(this.graphql.cache, {
+                query: withContent ? this.queries.loadAllWithContent : this.queries.loadAll,
+                data: updatedData
+            });
+            // update count
+            this._count$.next(this.unreadEvents(updatedData));
+            return updatedData;
+        }));
+    }
+    delete(entity) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!entity)
+                return; // skip
+            yield this.deleteAll([entity]);
         });
     }
-    /**
-     * Save many trips
-     *
-     * @param entities
-     * @param opts
-     */
     deleteAll(entities, opts) {
         return __awaiter(this, void 0, void 0, function* () {
             const ids = entities && entities
@@ -26075,49 +26113,206 @@ class UserEventService extends BaseGraphqlService {
                 return; // stop, if nothing else to do
             const now = Date.now();
             if (this._debug)
-                console.debug('[user-event-service] Deleting events... ids:', ids);
+                console.debug(`${this._logPrefix}Deleting events... ids:`, ids);
             yield this.graphql.mutate({
-                mutation: DeleteByIdsMutation,
+                mutation: this.mutations.deleteByIds,
                 variables: {
                     ids
                 },
                 update: (proxy) => {
                     // Remove from caches
                     this.removeFromMutableCachedQueriesByIds(proxy, {
-                        query: LoadAllQuery,
+                        query: this.queries.loadAll,
                         ids
                     });
                     this.removeFromMutableCachedQueriesByIds(proxy, {
-                        query: LoadAllWithContentQuery,
+                        query: this.queries.loadAllWithContent,
                         ids
                     });
                     if (this._debug)
-                        console.debug(`[user-event-service] Events deleted in ${Date.now() - now}ms`);
+                        console.debug(`${this._logPrefix}Events deleted in ${Date.now() - now}ms`);
                 }
             });
         });
     }
-    /**
-     * Delete userEvent entities
-     */
-    delete(data) {
+    save(entity, options) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!data)
-                return; // skip
-            yield this.deleteAll([data]);
+            this.fillDefaultProperties(entity);
+            // Transform into json
+            const isNew = isNil(entity.id);
+            const json = entity.asObject();
+            const now = Date.now();
+            if (this._debug)
+                console.debug(`${this._logPrefix}Saving user event...`, json);
+            yield this.graphql.mutate({
+                mutation: this.mutations.save,
+                variables: {
+                    data: json
+                },
+                error: { code: SocialErrorCodes.SAVE_USER_EVENT_ERROR, message: 'SOCIAL.ERROR.SAVE_USER_EVENT_ERROR' },
+                update: (proxy, { data }) => {
+                    // Update entity
+                    const savedEntity = data && data.data;
+                    if (savedEntity) {
+                        if (this._debug)
+                            console.debug(`${this._logPrefix}User event saved in ${Date.now() - now}ms`, entity);
+                        this.copyIdAndUpdateDate(savedEntity, entity);
+                        // Add to cache
+                        if (isNew) {
+                            this.insertIntoMutableCachedQueries(proxy, {
+                                query: this.queries.loadAll,
+                                data: Object.assign(Object.assign({}, savedEntity), { content: null })
+                            });
+                            this.insertIntoMutableCachedQueries(proxy, {
+                                query: this.queries.loadAllWithContent,
+                                data: savedEntity
+                            });
+                        }
+                    }
+                }
+            });
+            return entity;
         });
     }
-    listenChanges(id, options) {
-        // TODO
-        console.warn('TODO: implement listen changes on user events');
-        return of();
+    saveAll(data, opts) {
+        return Promise.all(data
+            .map(entity => this.save(entity, opts)));
+    }
+    markAsRead(entity) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Get onRead listeners
+            const onReadListeners = (this.listeners || []).filter(listener => !!listener.onRead).filter(listener => listener.accept(entity));
+            if (onReadListeners.length) {
+                for (const listener of onReadListeners) {
+                    yield listener.onRead(entity);
+                }
+            }
+            else {
+                // Use default
+                yield this.defaultMarkAsRead(entity);
+            }
+        });
+    }
+    registerListener(listener) {
+        if (!this.listeners)
+            this.listeners = [];
+        this.listeners.push(listener);
+    }
+    /* -- protected methods -- */
+    processUserEvent(source, that) {
+        that = that || this;
+        // Convert json source to IUserEvent
+        let target = that.fromObject(source);
+        // Get listeners
+        const listeners = (that.listeners || []).filter(listener => listener.onReceived).filter(listener => listener.accept(target));
+        for (const listener of listeners) {
+            if (target) {
+                target = listener.onReceived(target);
+            }
+            else {
+                if (that._debug)
+                    console.debug(`${that._logPrefix}Event has been rejected by a listener`, source);
+                break;
+            }
+        }
+        return target;
+    }
+    defaultMarkAsRead(userEvent) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!userEvent)
+                throw new Error(`${this._logPrefix}Invalid event to save`);
+            // set read date
+            userEvent.readDate = moment$6();
+            if (!userEvent.id || userEvent.id < 0) {
+                if (this._debug)
+                    console.debug(`${this._logPrefix}Save local user event`);
+                // TODO !!!!!!!!!!!!!
+            }
+            else {
+                yield this.save(userEvent);
+            }
+        });
+    }
+    defaultFilter() {
+        // By default
+        return {
+            recipients: [this.defaultRecipient()]
+        };
+    }
+    defaultRecipient() {
+        return this.accountService.person.pubkey;
+    }
+    fillDefaultProperties(entity) {
+    }
+    unreadEvents(events) {
+        // default calculation on unread events from a list
+        if (isEmptyArray(events))
+            return undefined;
+        const lastReadDate = events
+            .filter(event => isNotNil(event.readDate))
+            .reduce((lastDate, event) => DateUtils.max(lastDate, event.readDate), undefined);
+        return events
+            .filter(event => event.creationDate.isSameOrAfter(lastReadDate)).length;
+    }
+    copyIdAndUpdateDate(source, target) {
+        EntityUtils.copyIdAndUpdateDate(source, target);
+    }
+}
+AbstractUserEventService.decorators = [
+    { type: Directive }
+];
+AbstractUserEventService.ctorParameters = () => [
+    { type: GraphqlService },
+    { type: AccountService },
+    { type: NetworkService },
+    { type: TranslateService },
+    { type: undefined },
+    { type: undefined },
+    { type: undefined },
+    { type: Environment, decorators: [{ type: Optional }, { type: Inject, args: [ENVIRONMENT,] }] }
+];
+const userEventQueries = {
+    loadAll: gql `
+    query UserEvents($filter: UserEventFilterVOInput, $page: PageInput){
+      data: userEvents(filter: $filter, page: $page){
+        ...LightUserEventFragment
+      }
+    }
+    ${UserEventFragments.lightUserEvent}
+  `,
+    loadAllWithContent: gql `
+    query UserEventsWithContent($filter: UserEventFilterVOInput, $page: PageInput){
+      data: userEvents(filter: $filter, page: $page){
+        ...UserEventFragment
+      }
     }
-    registerAction(definition) {
-        console.info(`[user-event-service] Registering action ${definition.name} for ${definition.__typename}`);
-        this._userEventActions.push(definition);
+    ${UserEventFragments.userEvent}
+  `
+};
+const userEventMutations = {
+    deleteByIds: gql `
+    mutation DeleteUserEvents($ids:[Int]){
+      deleteUserEvents(ids: $ids)
+    }
+  `,
+    save: gql `
+    mutation SaveUserEvent($data: UserEventVOInput){
+      data: saveUserEvent(userEvent: $data){
+        ...UserEventFragment
+      }
     }
-    getActionsByTypename(typename) {
-        return this._userEventActions.filter(def => def.__typename === typename);
+    ${UserEventFragments.userEvent}
+  `
+};
+class UserEventService extends AbstractUserEventService {
+    constructor(graphql, accountService, network, translate, toastController, environment) {
+        super(graphql, accountService, network, translate, userEventQueries, userEventMutations, undefined, environment);
+        this.graphql = graphql;
+        this.accountService = accountService;
+        this.network = network;
+        this.translate = translate;
+        this.toastController = toastController;
+        this.environment = environment;
     }
     showToastErrorWithContext(opts) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -26181,13 +26376,16 @@ class UserEventService extends BaseGraphqlService {
     }
     sendDataForDebug(data) {
         const userEvent = new UserEvent();
-        userEvent.eventType = UserEventTypes.DEBUG_DATA;
+        userEvent.type = UserEventTypes.DEBUG_DATA;
         userEvent.content = this.convertObjectToString(data);
         return this.save(userEvent);
     }
     asFilter(filter) {
         return UserEventFilter.fromObject(filter);
     }
+    fromObject(source) {
+        return UserEvent.fromObject(source);
+    }
     /* -- protected methods -- */
     convertObjectToString(data) {
         if (typeof data === 'string') {
@@ -26216,13 +26414,9 @@ class UserEventService extends BaseGraphqlService {
         // TODO: compute sign
         console.warn('TODO: sign user event before sending');
     }
-    copyIdAndUpdateDate(source, target) {
-        EntityUtils.copyIdAndUpdateDate(source, target);
-    }
 }
-UserEventService.ɵprov = ɵɵdefineInjectable({ factory: function UserEventService_Factory() { return new UserEventService(ɵɵinject(GraphqlService), ɵɵinject(AccountService), ɵɵinject(NetworkService), ɵɵinject(TranslateService), ɵɵinject(ToastController), ɵɵinject(ENVIRONMENT, 8)); }, token: UserEventService, providedIn: "root" });
 UserEventService.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] }
+    { type: Injectable }
 ];
 UserEventService.ctorParameters = () => [
     { type: GraphqlService },
@@ -26235,7 +26429,7 @@ UserEventService.ctorParameters = () => [
 
 const ICONS_MAP = {
     DEBUG_DATA: { matIcon: 'bug_report' },
-    INBOX_MESSAGE: { matIcon: 'mail' },
+    INBOX_MESSAGE: { matIcon: 'mail' }
 };
 // TODO: refactor with a registration done by data service:
 // - userEventService.registerEventAction({__typename: 'TripVO', ...})
@@ -26301,7 +26495,7 @@ class UserEventsTable extends AppTable {
             }
         }));
         const filter = this.filter || new UserEventFilter();
-        filter.recipient = this.recipient;
+        filter.recipients = [this.recipient];
         this.setFilter(filter, { emitEvent: true });
     }
     start() {
@@ -26314,17 +26508,17 @@ class UserEventsTable extends AppTable {
         });
     }
     getIcon(source) {
-        return ICONS_MAP[source.eventType];
+        return ICONS_MAP[source.type];
     }
     getDetail(source) {
         if (!source)
             return undefined;
-        if (source.content && source.eventType === UserEventTypes.DEBUG_DATA) {
+        if (source.content && source.type === UserEventTypes.DEBUG_DATA) {
             const context = source.content.context;
             if (context && context.__typename) {
-                const actions = this.service.getActionsByTypename(context.__typename);
+                // const actions = this.service.getActionsByTypename(context.__typename);
                 return {
-                    actions,
+                    // actions,
                     title: source.content.error && source.content.error.message || source.content.message,
                     description: source.content.error && source.content.error.details || undefined
                 };
@@ -26336,11 +26530,11 @@ class UserEventsTable extends AppTable {
     doAction(action, row) {
         return __awaiter(this, void 0, void 0, function* () {
             const event = row.currentData;
-            const context = event.content && event.content.context;
+            // const context = event.content && event.content.context;
             this.markAsLoading();
             if (action && typeof action.executeAction === 'function') {
                 try {
-                    let res = action.executeAction(event, context);
+                    let res = action.executeAction(event /*, context*/);
                     res = (res instanceof Promise) ? yield res : res;
                 }
                 catch (err) {
@@ -26359,13 +26553,18 @@ UserEventsTable.decorators = [
                 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: ChangeDetectionStrategy.OnPush,
+                providers: [
+                    {
+                        provide: UserEventServiceToken, useClass: UserEventService
+                    }
+                ],
                 styles: [".mat-header-row .mat-column-icon,.mat-row .mat-column-icon{max-width:40px;padding-left:0}.mat-header-row .mat-column-icon ion-icon,.mat-header-row .mat-column-icon mat-icon,.mat-row .mat-column-icon ion-icon,.mat-row .mat-column-icon mat-icon{font-size:1.2em;height:1.2em;width:1.2em}.mat-header-row .mat-column-creationDate,.mat-row .mat-column-creationDate{min-width:100px;max-width:120px}"]
             },] }
 ];
 UserEventsTable.ctorParameters = () => [
     { type: Injector },
     { type: AccountService },
-    { type: UserEventService },
+    { type: undefined, decorators: [{ type: Inject, args: [UserEventServiceToken,] }] },
     { type: EntitiesStorage },
     { type: ChangeDetectorRef },
     { type: undefined, decorators: [{ type: Inject, args: [ENVIRONMENT,] }] }
@@ -26377,6 +26576,155 @@ UserEventsTable.propDecorators = {
     defaultSortDirection: [{ type: Input }]
 };
 
+class UserEventNotificationList {
+    constructor(popoverController) {
+        this.popoverController = popoverController;
+    }
+    ngOnInit() {
+    }
+    read($event, userEvent) {
+        var _a;
+        if (userEvent === null || userEvent === void 0 ? void 0 : userEvent.readDate)
+            return;
+        (_a = this.readEvent) === null || _a === void 0 ? void 0 : _a.emit(userEvent);
+    }
+    executeAction(action, userEvent) {
+        // Execute then close popover
+        action.executeAction(userEvent);
+        this.dismiss();
+    }
+    dismiss() {
+        this.popoverController.dismiss();
+    }
+}
+UserEventNotificationList.decorators = [
+    { type: Component, args: [{
+                selector: 'app-user-event-notification-list',
+                template: "\n<ion-list class=\"ion-list-popover\">\n\n  <ion-row class=\"ion-list-header column\">\n    <ion-col>\n      <ion-label>{{titleI18n | translate}}</ion-label>\n    </ion-col>\n  </ion-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 = () => [
+    { type: PopoverController }
+];
+UserEventNotificationList.propDecorators = {
+    titleI18n: [{ type: Input }],
+    userEvents: [{ type: Input }],
+    readEvent: [{ type: Output }]
+};
+
+class UserEventNotificationComponent {
+    constructor(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 BehaviorSubject(undefined);
+        this._subscriptions = new Subscription();
+        this._logPrefix = '[user-event-notification] ';
+        this._readEvent = new EventEmitter();
+    }
+    get count() {
+        var _a;
+        return (_a = this.userEventService) === null || _a === void 0 ? void 0 : _a.userEventCount.pipe(map(value => value === 0 ? undefined : value));
+    }
+    ngOnInit() {
+        if (isNil(this.userEventService)) {
+            console.warn(`${this._logPrefix}No service injected`);
+            this.disabled = true;
+            return;
+        }
+        // Watch first
+        this._subscriptions.add(this.userEventService.watchAll(0, 10, 'creationDate', 'desc').subscribe(value => {
+            const data = value.data;
+            if (this.debug) {
+                console.debug(`${this._logPrefix}Receiving user events`, data);
+            }
+            this.userEventsSubject.next(data);
+        }));
+        // Then listen changes
+        this._subscriptions.add(this.userEventService.listenChanges(undefined).subscribe(data => {
+            if (this.debug) {
+                console.debug(`${this._logPrefix}Receiving new user events`, data);
+            }
+            this.userEventsSubject.next(data);
+        }));
+        this._readEvent.subscribe(value => {
+            this.userEventService.markAsRead(value);
+        });
+    }
+    showList(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const popover = yield this.popoverController.create({
+                component: UserEventNotificationList,
+                componentProps: {
+                    titleI18n: this.titleI18n,
+                    userEvents: this.userEventsSubject,
+                    readEvent: this._readEvent
+                },
+                backdropDismiss: true,
+                keyboardClose: true,
+                event,
+                translucent: true,
+                cssClass: 'popover-large'
+            });
+            yield popover.present();
+        });
+    }
+    markForCheck() {
+        this.cd.markForCheck();
+    }
+    ngOnDestroy() {
+        if (this.debug) {
+            console.debug(`${this._logPrefix}Destroying`);
+        }
+        this._subscriptions.unsubscribe();
+    }
+}
+UserEventNotificationComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-user-event-notification-component',
+                template: "<button\n  #button\n  mat-icon-button\n  [title]=\"titleI18n | translate\"\n  [disabled]=\"disabled\"\n  (click)=\"showList($event)\"\n>\n  <mat-icon\n    [matBadge]=\"count | async\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n  >notifications\n  </mat-icon>\n</button>\n\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+UserEventNotificationComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [UserEventServiceToken,] }] },
+    { type: AccountService },
+    { type: PopoverController },
+    { type: ChangeDetectorRef }
+];
+UserEventNotificationComponent.propDecorators = {
+    debug: [{ type: Input }],
+    titleI18n: [{ type: Input }],
+    disabled: [{ type: Input }]
+};
+
+class UserEventModule {
+}
+UserEventModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoreModule,
+                    SharedModule
+                ],
+                declarations: [
+                    UserEventsTable,
+                    UserEventNotificationComponent,
+                    UserEventNotificationList,
+                ],
+                exports: [
+                    UserEventsTable,
+                    UserEventNotificationComponent
+                ]
+            },] }
+];
+
 const MessageTypes = {
     INBOX_MESSAGE: 'INBOX_MESSAGE',
     EMAIL: 'EMAIL',
@@ -26588,9 +26936,9 @@ MessageForm.propDecorators = {
     canSelectType: [{ type: Input }]
 };
 
-class SocialModule {
+class MessageModule {
 }
-SocialModule.decorators = [
+MessageModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
                     CommonModule,
@@ -26598,17 +26946,317 @@ SocialModule.decorators = [
                     SharedModule
                 ],
                 declarations: [
-                    UserEventsTable,
                     MessageModal,
                     MessageForm
                 ],
                 exports: [
-                    UserEventsTable,
                     MessageModal
                 ]
             },] }
 ];
 
+var JobProgression_1;
+// todo use entity
+class Job {
+}
+// @dynamic
+let JobProgression = JobProgression_1 = class JobProgression extends Entity {
+    constructor() {
+        super(JobProgression_1.TYPENAME);
+    }
+    fromObject(source) {
+        super.fromObject(source);
+        this.message = source.message;
+        this.current = source.current;
+        this.total = source.total;
+    }
+};
+JobProgression = JobProgression_1 = __decorate([
+    EntityClass({ typename: 'JobProgressionVO' })
+], JobProgression);
+
+const JobProgressionServiceToken = new InjectionToken('JobProgressionService');
+const jobProgressionSubscription = gql `subscription UpdateJobProgression($id: Int!, $interval: Int){
+  data: updateJobProgression(id: $id, interval: $interval) {
+    id
+    message
+    current
+    total
+  }
+}`;
+class JobProgressionService extends BaseGraphqlService {
+    constructor(graphql, environment) {
+        super(graphql, environment);
+        this.graphql = graphql;
+        this.environment = environment;
+        this._logPrefix = '[job-progression-service] ';
+        // For DEV only
+        this._debug = !(environment === null || environment === void 0 ? void 0 : environment.production);
+    }
+    listenChanges(id, options) {
+        if (isNil(id))
+            throw new Error(`${this._logPrefix}Missing argument 'id'`);
+        if (this._debug)
+            console.debug(`${this._logPrefix}[WS] Listening changes for job progression {${id}}...`);
+        return this.graphql.subscribe({
+            query: jobProgressionSubscription,
+            fetchPolicy: options === null || options === void 0 ? void 0 : options.fetchPolicy,
+            variables: { id, interval: toNumber(options === null || options === void 0 ? void 0 : options.interval, 10) },
+            error: { code: SocialErrorCodes.SUBSCRIBE_JOB_PROGRESSION_ERROR, message: 'SOCIAL.ERROR.SUBSCRIBE_JOB_PROGRESSION_ERROR' }
+        }).pipe(map(({ data }) => {
+            const progression = data && JobProgression.fromObject(data);
+            if (progression && this._debug)
+                console.debug(`${this._logPrefix}Job progression ${id} updated on server`, progression);
+            return progression;
+        }));
+    }
+}
+JobProgressionService.decorators = [
+    { type: Injectable }
+];
+JobProgressionService.ctorParameters = () => [
+    { type: GraphqlService },
+    { type: Environment, decorators: [{ type: Optional }, { type: Inject, args: [ENVIRONMENT,] }] }
+];
+
+class JobProgressionList {
+    constructor() {
+    }
+    ngOnInit() {
+    }
+}
+JobProgressionList.decorators = [
+    { type: Component, args: [{
+                selector: 'app-job-progression-list',
+                template: "<ion-list class=\"ion-list-popover\">\n\n  <ion-row class=\"ion-list-header column\">\n    <ion-col>\n      <ion-label>{{titleI18n | translate}}</ion-label>\n    </ion-col>\n  </ion-row>\n\n  <ion-item *ngIf=\"!jobProgressions?.length\">\n    {{'SOCIAL.JOB.PROGRESSION.EMPTY' | translate}}\n  </ion-item>\n  <ion-item *ngFor=\"let jobProgression of jobProgressions\">\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 = () => [];
+JobProgressionList.propDecorators = {
+    titleI18n: [{ type: Input }],
+    jobProgressions: [{ type: Input }]
+};
+
+class JobProgressionComponent {
+    constructor(jobProgressionService, popoverController, cd) {
+        this.jobProgressionService = jobProgressionService;
+        this.popoverController = popoverController;
+        this.cd = cd;
+        this.debug = false;
+        this.titleI18n = 'SOCIAL.JOB.PROGRESSION.TITLE';
+        this.jobFinished = new EventEmitter();
+        this.disabled = true;
+        this.color = 'accent';
+        this.mode = 'determinate';
+        this.value = 0;
+        this.jobProgressions = [];
+        this._subscriptions = new Subscription();
+        this._subscriptionsById = {};
+        this._logPrefix = '[job-progression] ';
+    }
+    ngOnInit() {
+        var _a, _b, _c, _d;
+        if (isNil(this.jobProgressionService)) {
+            console.warn(`${this._logPrefix}No service injected`);
+        }
+        // parse options
+        this.autoHide = toBoolean((_a = this.options) === null || _a === void 0 ? void 0 : _a.autoHide, false);
+        this.visible = !this.autoHide;
+        this.autoHideDelay = toNumber((_b = this.options) === null || _b === void 0 ? void 0 : _b.autoHideDelay, 1000);
+        this.autoRemove = toBoolean((_c = this.options) === null || _c === void 0 ? void 0 : _c.autoRemove, true);
+        this.autoRemoveDelay = toNumber((_d = this.options) === null || _d === void 0 ? void 0 : _d.autoRemoveDelay, 1000);
+    }
+    addJob(id) {
+        if (isNil(this.jobProgressionService)) {
+            console.warn(`${this._logPrefix}No service injected. Can't add a job`);
+            return;
+        }
+        if (this.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;
+        const sub = this.jobProgressionService.listenChanges(id)
+            .pipe(filter(progression => {
+            if (id !== progression.id) {
+                console.error(`${this._logPrefix}Job progression (id=${progression.id}) doesn't match expected job (id=${id})`);
+                return false;
+            }
+            return true;
+        }), map(progression => {
+            // Ensure visible
+            this.visible = true;
+            // Get current progression object
+            const currentProgression = this.getProgression(id);
+            if (!currentProgression) {
+                // add it
+                this.jobProgressions.push(progression);
+                if (this.debug) {
+                    console.debug(`${this._logPrefix}Progression added id=${id}`, progression);
+                }
+            }
+            else {
+                // update current
+                Object.assign(currentProgression, progression);
+                if (this.debug) {
+                    console.debug(`${this._logPrefix}Progression updated id=${id}`, progression);
+                }
+            }
+            return progression;
+        }))
+            .subscribe(progression => {
+            // update value
+            this.updateValue();
+            // job finished
+            if (progression.total > 0 && progression.current == progression.total) {
+                if (this.debug) {
+                    console.debug(`${this._logPrefix}Finished job id=${progression.id}`);
+                }
+                // emit event
+                this.jobFinished.emit(progression.id);
+                if (this.autoRemove) {
+                    setTimeout(() => {
+                        var _a;
+                        this.removeJob(progression.id);
+                        // If last job
+                        if (this.autoHide && !((_a = this.jobProgressions) === null || _a === void 0 ? void 0 : _a.length)) {
+                            setTimeout(() => {
+                                this.visible = false;
+                                this.markForCheck();
+                            }, this.autoHideDelay);
+                        }
+                    }, this.autoRemoveDelay);
+                }
+            }
+        });
+        this._subscriptionsById[id] = sub;
+        this._subscriptions.add(sub);
+    }
+    removeJob(id) {
+        if (this.debug) {
+            console.debug(`${this._logPrefix}Remove job id=${id}`);
+        }
+        const sub = this._subscriptionsById[id];
+        if (sub) {
+            this._subscriptions.remove(sub);
+            sub.unsubscribe();
+        }
+        const progression = this.getProgression(id);
+        if (progression) {
+            this.jobProgressions.splice(this.jobProgressions.indexOf(progression), 1);
+        }
+        this.updateValue();
+    }
+    getProgression(id) {
+        return this.jobProgressions.find(progression => progression.id === id);
+    }
+    updateValue() {
+        if (this.debug) {
+            console.debug(`${this._logPrefix}Updating value`);
+        }
+        let value = 0;
+        const nbProgression = arraySize(this.jobProgressions);
+        let allIndeterminate = nbProgression > 0;
+        this.jobProgressions.forEach(progression => {
+            const indeterminate = progression.total === 0;
+            allIndeterminate = allIndeterminate && indeterminate;
+            if (!indeterminate) {
+                value = value + progression.current * 100 / progression.total;
+            }
+        });
+        this.value = nbProgression > 0 ? value / nbProgression : 0;
+        this.mode = allIndeterminate ? 'indeterminate' : 'determinate';
+        if (this.debug) {
+            console.debug(`${this._logPrefix}Setting value=${this.value}, mode=${this.mode}`);
+        }
+        this.markForCheck();
+    }
+    showList(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const popover = yield this.popoverController.create({
+                component: JobProgressionList,
+                componentProps: {
+                    titleI18n: this.titleI18n,
+                    jobProgressions: this.jobProgressions
+                },
+                backdropDismiss: true,
+                keyboardClose: true,
+                event,
+                translucent: true,
+                cssClass: 'popover-large'
+            });
+            yield popover.present();
+        });
+    }
+    markForCheck() {
+        this.cd.markForCheck();
+    }
+    ngOnDestroy() {
+        if (this.debug) {
+            console.debug(`${this._logPrefix}Destroying`);
+        }
+        this._subscriptions.unsubscribe();
+    }
+}
+JobProgressionComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-job-progression',
+                template: "<button\n  #button\n  mat-icon-button\n  [title]=\"titleI18n | translate\"\n  [disabled]=\"disabled\"\n  *ngIf=\"visible\"\n  (click)=\"showList($event)\"\n>\n  <mat-icon\n    [matBadge]=\"jobProgressions?.length\"\n    [matBadgeHidden]=\"!jobProgressions?.length\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n  >{{ disabled || jobProgressions?.length ? 'schedule' : 'task_alt' }}\n  </mat-icon>\n  <mat-spinner\n    #spinner\n    *ngIf=\"jobProgressions?.length\"\n    class=\"floating-spinner\"\n    [color]=\"color\"\n    [mode]=\"mode\"\n    [value]=\"value\"\n    diameter=\"30\"\n    strokeWidth=\"3\"\n  ></mat-spinner>\n</button>\n\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [".floating-spinner{position:absolute;top:6px;left:5px}"]
+            },] }
+];
+JobProgressionComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [JobProgressionServiceToken,] }] },
+    { type: PopoverController },
+    { type: ChangeDetectorRef }
+];
+JobProgressionComponent.propDecorators = {
+    debug: [{ type: Input }],
+    titleI18n: [{ type: Input }],
+    options: [{ type: Input }],
+    jobFinished: [{ type: Output }]
+};
+
+class JobModule {
+}
+JobModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    SharedModule,
+                    TranslateModule.forChild(),
+                ],
+                declarations: [
+                    JobProgressionComponent,
+                    JobProgressionList
+                ],
+                exports: [
+                    JobProgressionComponent
+                ]
+            },] }
+];
+
+const SocialModuleOptionsToken = new InjectionToken("SocialModuleOptions");
+class SocialModule {
+}
+SocialModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoreModule,
+                    SharedModule,
+                    UserEventModule,
+                    JobModule,
+                    MessageModule,
+                ],
+            },] }
+];
+
 const Mutations = {
     send: gql `mutation SendMessage($data: MessageVOInput){
     done: sendMessage(message: $data)
@@ -27254,12 +27902,10 @@ class AutocompleteTestPage {
         });
     }
     ngAfterViewInit() {
-        if (this.farEntityField) {
-            setTimeout(() => {
-                this.farEntityField.suggestLengthThreshold = 2;
-                this.farEntityField.reloadItems();
-            }, 2000);
-        }
+        setTimeout(() => {
+            this.farEntityField.suggestLengthThreshold = 2;
+            this.farEntityField.reloadItems();
+        }, 2000);
         setTimeout(() => this.loadData(), 1000);
     }
     // Load the form with data
@@ -27347,7 +27993,7 @@ class AutocompleteTestPage {
 AutocompleteTestPage.decorators = [
     { type: 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                                      [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"
+                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"
             },] }
 ];
 AutocompleteTestPage.ctorParameters = () => [
@@ -27423,13 +28069,13 @@ LatLongTestPage.ctorParameters = () => [
     { type: FormBuilder }
 ];
 
-const moment$6 = momentImported;
+const moment$7 = momentImported;
 class SwipeTestPage {
     constructor(formBuilder, dateFormatPipe) {
         this.formBuilder = formBuilder;
         this.dateFormatPipe = dateFormatPipe;
         this.$dates = new BehaviorSubject(undefined);
-        this._today = moment$6().startOf('day');
+        this._today = moment$7().startOf('day');
         this.form = formBuilder.group({
             empty: [null, Validators.required],
             date: [null, Validators.compose([Validators.required, SharedValidators.validDate])],
@@ -27442,7 +28088,7 @@ class SwipeTestPage {
     ngOnInit() {
         const dates = [];
         for (let d = 0; d < 7; d++) {
-            dates[d] = moment$6(this._today).add(d - 3, 'day');
+            dates[d] = moment$7(this._today).add(d - 3, 'day');
         }
         this.$dates.next(dates);
         this.loadData();
@@ -27483,7 +28129,7 @@ SwipeTestPage.ctorParameters = () => [
     { type: DateFormatPipe }
 ];
 
-const moment$7 = momentImported;
+const moment$8 = momentImported;
 class DateTimeTestPage {
     constructor(platform, formBuilder, cd) {
         this.platform = platform;
@@ -27515,7 +28161,7 @@ class DateTimeTestPage {
     // Load the form with data
     loadData() {
         return __awaiter(this, void 0, void 0, function* () {
-            const now = moment$7();
+            const now = moment$8();
             const data = {
                 empty: null,
                 emptyRequired: null,
@@ -27761,7 +28407,7 @@ NumpadTestPage.ctorParameters = () => [
     { type: FormBuilder }
 ];
 
-const moment$8 = momentImported;
+const moment$9 = momentImported;
 class DateTestPage {
     constructor(formBuilder, cd) {
         this.formBuilder = formBuilder;
@@ -27794,7 +28440,7 @@ class DateTestPage {
     // Load the form with data
     loadData() {
         return __awaiter(this, void 0, void 0, function* () {
-            const now = moment$8();
+            const now = moment$9();
             const nowAtMahe = now.clone().tz(this.timezone).startOf('day');
             const data = {
                 empty: null,
@@ -28540,5 +29186,5 @@ CoreTestingModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_MENU_ITEMS, APP_TESTING_PAGES, AboutModal, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, Alerts, AndroidOsEnvironment, AnimationState, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppForm, AppFormField, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppInMemoryTable, AppInstallUpgradeCard, AppListForm, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppTabEditor, AppTabEditorOptions, AppTable, AppTableDataSourceOptions, AppTableUtils, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayLengthPipe, ArrayPluckPipe, AudioProvider, AuthForm, AuthGuardService, AuthModal, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFromNowPipe, DateTimeTestPage, DateUtils, Department, DepartmentToStringPipe, DragAndDropDirective, DurationPipe, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesService, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, Fragments$1 as Fragments, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNotNilOrBlankPipe, IsNotOnFieldModePipe, IsOnFieldModePipe, JobUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatBadgeIconDirective, MatBooleanField, MatChipsField, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItems, MenuService, Message, MessageFilter, MessageForm, MessageModal, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NetworkService, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, OddPipe, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialUtils, ReferentialValidatorService, RegisterConfirmPage, ResizableComponent, ResizableDirective, ResizableModule, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBadgeIconModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedValidators, SocialErrorCodes, SocialModule, Software, StartableService, StatusById, StatusIds, StatusList, StrIncludesPipe, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TextForm, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ToStringPipe, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UserEvent, UserEventFilter, UserEventFragments, UserEventService, UserEventTypes, UserEventsTable, UserSettings, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, isAndroid, isBlankString, isControlHasInput, isCordova, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isProgressEvent, isResponseEvent, isTouchUi, isWindows, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moment$5 as moment, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, tz, uncapitalizeFirstLetter, updateValueAndValidity, waitFor, waitForTrue, waitIdle, waitWhilePending, ɵ0, CustomReuseStrategy as ɵa, MatNumpadDomService as ɵb, isFocusableElement as ɵc, RegisterForm as ɵd, AccountValidatorService as ɵe, RegisterModal as ɵf, UserSettingsValidatorService as ɵg, LocalSettingsValidatorService as ɵh, AppUpdateOfflineModeCard as ɵi, AppIconComponent as ɵj, DateTestPage as ɵk, NumpadTestPage as ɵl, MatBadgeIconTestPage as ɵm, ToastTestingModule as ɵn, ToastTestingPage as ɵo };
+export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_MENU_ITEMS, APP_TESTING_PAGES, AboutModal, AbstractUserEventService, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, Alerts, AndroidOsEnvironment, AnimationState, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppForm, AppFormField, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppInMemoryTable, AppInstallUpgradeCard, AppListForm, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppTabEditor, AppTabEditorOptions, AppTable, AppTableDataSourceOptions, AppTableUtils, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayLengthPipe, ArrayPluckPipe, AudioProvider, AuthForm, AuthGuardService, AuthModal, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFromNowPipe, DateTimeTestPage, DateUtils, Department, DepartmentToStringPipe, DragAndDropDirective, DurationPipe, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesService, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, Fragments$1 as Fragments, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNotNilOrBlankPipe, IsNotOnFieldModePipe, IsOnFieldModePipe, Job, JobModule, JobProgression, JobProgressionComponent, JobProgressionService, JobProgressionServiceToken, JobUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatBadgeIconDirective, MatBooleanField, MatChipsField, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItems, MenuService, Message, MessageFilter, MessageForm, MessageModal, MessageModule, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NetworkService, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, OddPipe, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialUtils, ReferentialValidatorService, RegisterConfirmPage, ResizableComponent, ResizableDirective, ResizableModule, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBadgeIconModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedValidators, SocialErrorCodes, SocialModule, SocialModuleOptionsToken, Software, StartableService, StatusById, StatusIds, StatusList, StrIncludesPipe, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TextForm, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ToStringPipe, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UserEvent, UserEventFilter, UserEventFragments, UserEventModule, UserEventNotificationComponent, UserEventService, UserEventServiceToken, UserEventTypes, UserEventsTable, UserSettings, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, isAndroid, isBlankString, isControlHasInput, isCordova, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isProgressEvent, isResponseEvent, isTouchUi, isWindows, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moment$5 as moment, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, tz, uncapitalizeFirstLetter, updateValueAndValidity, waitFor, waitForTrue, waitIdle, waitWhilePending, ɵ0, CustomReuseStrategy as ɵa, MatNumpadDomService as ɵb, isFocusableElement as ɵc, RegisterForm as ɵd, AccountValidatorService as ɵe, RegisterModal as ɵf, UserSettingsValidatorService as ɵg, LocalSettingsValidatorService as ɵh, AppUpdateOfflineModeCard as ɵi, AppIconComponent as ɵj, UserEventNotificationList as ɵk, JobProgressionList as ɵl, DateTestPage as ɵm, NumpadTestPage as ɵn, MatBadgeIconTestPage as ɵo, ToastTestingModule as ɵp, ToastTestingPage as ɵq };
 //# sourceMappingURL=sumaris-net.ngx-components.js.map