@sumaris-net/ngx-components 1.21.0-beta8 → 1.21.1

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

@@ -241,64 +241,6 @@ 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))
@@ -843,11 +785,11 @@ function chainPromises(defers) {
     }, null);
 }
 function firstTrue(obs) {
-    return obs.pipe(first((v) => v === true), map(_ => { }) // Convert to void
+    return obs.pipe(first(value => value === true), map(_ => { }) // Convert to void
     );
 }
 function firstFalse(obs) {
-    return obs.pipe(first((v) => v === false), map(_ => { }) // Convert to void
+    return obs.pipe(first(value => value === false), map(_ => { }) // Convert to void
     );
 }
 /**
@@ -879,12 +821,11 @@ 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(() => firstTrueObservable), takeUntil($timeout)), $timeout
+                .pipe(switchMap(() => firstTrue(observable)), takeUntil($timeout)), $timeout
                 .pipe(map(() => {
                 throw new Error(`Timeout ready() - after ${opts.timeout}ms`);
             })))
@@ -893,10 +834,17 @@ function waitForTrue(observable, opts) {
         // dueTime (without timeout)
         if (opts && opts.dueTime > 0) {
             return timer(opts.dueTime)
-                .pipe(switchMap(() => firstTrueObservable))
+                .pipe(switchMap(() => firstTrue(observable)))
                 .toPromise();
         }
-        return firstTrueObservable.toPromise();
+        return firstTrue(observable).toPromise();
+    });
+}
+function waitForFalse(observable, opts) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return waitForTrue(
+        // Inverse the logic
+        observable.pipe(map(v => v === false)), opts);
     });
 }
 
@@ -1100,6 +1048,65 @@ 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 +1367,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) - earlier as possible, so before the debounce time
+        // Mark as loading (to show loading spinner) - as soon as possible, and before debounceTime
         tap(_ => this.showLoadingSpinner && this.markAsLoading()), 
         // Filter if not enough character
         filter(value => {
-            if (value.length <= this.suggestLengthThreshold) {
+            if (((value === null || value === void 0 ? void 0 : value.length) || 0) < this.suggestLengthThreshold) {
                 // Update display value, to enable the message "not enough characters"
                 this.displayValue = value;
                 return false;
@@ -2328,9 +2335,9 @@ class HighlightPipe {
             const cleanedSearchText = removeDiacritics(searchRegexp).toUpperCase();
             const index = removeDiacritics(value.toUpperCase()).indexOf(cleanedSearchText);
             if (index !== -1) {
-                return value.substr(0, index - 1) +
-                    '<b>' + value.substr(index, cleanedSearchText.length) + '</b>' +
-                    value.substr(index + cleanedSearchText.length);
+                return value.substring(0, index - 1) +
+                    '<b>' + value.substring(index, cleanedSearchText.length) + '</b>' +
+                    value.substring(index + cleanedSearchText.length);
             }
             return value;
         }
@@ -2728,60 +2735,50 @@ 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 {
@@ -4203,7 +4200,7 @@ FormGetPipe.decorators = [
 ];
 class FormGetControlPipe {
     transform(form, path) {
-        return (form && path && form.get(path) || form);
+        return (form && isNotNil(path) && form.get(path) || form);
     }
 }
 FormGetControlPipe.decorators = [
@@ -4232,8 +4229,7 @@ FormGetGroupPipe.decorators = [
             },] }
 ];
 class FormGetValuePipe {
-    constructor(adapter, _ref) {
-        this.adapter = adapter;
+    constructor(_ref) {
         this._ref = _ref;
         this.value = undefined;
         this._lastControl = null;
@@ -4298,7 +4294,6 @@ FormGetValuePipe.decorators = [
             },] }
 ];
 FormGetValuePipe.ctorParameters = () => [
-    { type: FormErrorTranslator },
     { type: ChangeDetectorRef }
 ];
 
@@ -5169,7 +5164,8 @@ class MatDate {
     set tabindex(value) {
         if (this._tabindex !== value) {
             this._tabindex = value;
-            setTimeout(() => this.updateTabIndex());
+            if (!this._writing)
+                this.updateTabIndex();
         }
     }
     get tabindex() {
@@ -5528,7 +5524,8 @@ class MatDateTime {
     set tabindex(value) {
         if (this._tabindex !== value) {
             this._tabindex = value;
-            setTimeout(() => this.updateTabIndex());
+            if (!this._writing)
+                this.updateTabIndex();
         }
     }
     get tabindex() {
@@ -10707,7 +10704,7 @@ class LocalSettingsService extends StartableService {
     }
     get usageMode() {
         var _a;
-        if (isNil((_a = this._data) === null || _a === void 0 ? void 0 : _a.mobile)) {
+        if (isNil((_a = this._data) === null || _a === void 0 ? void 0 : _a.usageMode)) {
             console.warn("[settings] Accessing to property 'usageMode' BEFORE service started! Please use ready()");
             return isCordova(window) ? 'FIELD' : 'DESK';
         }
@@ -13307,7 +13304,8 @@ class GraphqlService extends StartableService {
             console.debug('[graphql] Apply token authentication to headers');
             this.connectionParams.authToken = token;
         }
-        else {
+        // Clean auth token
+        else if (this.connectionParams.authToken) {
             console.debug('[graphql] Remove token authentication from headers');
             delete this.connectionParams.authToken;
             // Clear cache
@@ -13319,7 +13317,8 @@ class GraphqlService extends StartableService {
             console.debug('[graphql] Apply basic authentication to headers');
             this.connectionParams.authBasic = basic;
         }
-        else {
+        // Clean auth basic
+        else if (this.connectionParams.authBasic) {
             console.debug('[graphql] Remove basic authentication from headers');
             delete this.connectionParams.authBasic;
             // Clear cache
@@ -17425,12 +17424,12 @@ class FormFieldValuesHolder {
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 class AppForm {
     constructor(injector, form) {
-        this.error = null;
+        this._subscription = new Subscription();
         this._enable = false;
-        this._$ready = new BehaviorSubject(false);
-        this._$loading = new BehaviorSubject(true);
         this.i18nFieldPrefix = null;
-        this._subscription = new Subscription();
+        this.readySubject = new BehaviorSubject(false);
+        this.loadingSubject = new BehaviorSubject(true);
+        this.errorSubject = new BehaviorSubject(undefined);
         this.debug = false;
         this.onCancel = new EventEmitter();
         this.onSubmit = new EventEmitter();
@@ -17456,8 +17455,29 @@ class AppForm {
     get _loading() {
         return this._$loading.value;
     }
+    /**
+     *  @deprecated
+     */
+    get _$ready() {
+        return this.readySubject;
+    }
+    /**
+     *  @deprecated
+     */
+    get _$loading() {
+        return this.loadingSubject;
+    }
+    get error() {
+        return this.errorSubject.value;
+    }
+    set error(error) {
+        this.setError(error);
+    }
     get loading() {
-        return this._$loading.value;
+        return this.loadingSubject.value;
+    }
+    get loaded() {
+        return !this.loadingSubject.value;
     }
     get value() {
         return this.form.value;
@@ -17466,7 +17486,8 @@ class AppForm {
         this.setValue(data);
     }
     get dirty() {
-        return this.form && this.form.dirty;
+        var _a;
+        return ((_a = this.form) === null || _a === void 0 ? void 0 : _a.dirty) || false;
     }
     get invalid() {
         return !this.form || this.form.invalid;
@@ -17475,7 +17496,8 @@ class AppForm {
         return !this.form || (this.form.dirty && this.form.pending);
     }
     get valid() {
-        return this.form && this.form.valid;
+        var _a;
+        return ((_a = this.form) === null || _a === void 0 ? void 0 : _a.valid) || false;
     }
     get empty() {
         return !this.form || (!this.form.dirty && !this.form.touched);
@@ -17521,17 +17543,16 @@ class AppForm {
     }
     ngOnDestroy() {
         this._subscription.unsubscribe();
-        this.onCancel.complete();
+        this.readySubject.unsubscribe();
+        this.loadingSubject.unsubscribe();
+        this.errorSubject.unsubscribe();
         this.onCancel.unsubscribe();
-        this.onSubmit.complete();
         this.onSubmit.unsubscribe();
-        this._$ready.complete();
-        this._$ready.unsubscribe();
-        this._$loading.complete();
-        this._$loading.unsubscribe();
     }
     cancel() {
-        this.onCancel.emit();
+        return __awaiter(this, void 0, void 0, function* () {
+            this.onCancel.emit();
+        });
     }
     /**
      *
@@ -17626,22 +17647,14 @@ class AppForm {
             this.markForCheck();
     }
     markAsLoading(opts) {
-        if (this._$loading.value !== true) {
-            this._$loading.next(true);
-            if (!opts || opts.emitEvent !== false)
-                this.markForCheck();
-        }
+        this.setLoading(true, opts);
     }
     markAsLoaded(opts) {
-        if (this._$loading.value !== false) {
-            this._$loading.next(false);
-            if (!opts || opts.emitEvent !== false)
-                this.markForCheck();
-        }
+        this.setLoading(false, opts);
     }
     markAsReady(opts) {
-        if (this._$ready.value !== true) {
-            this._$ready.next(true);
+        if (this.readySubject.value !== true) {
+            this.readySubject.next(true);
             // If subclasses implements OnReady
             if (typeof this['ngOnReady'] === 'function') {
                 this.ngOnReady();
@@ -17653,16 +17666,18 @@ class AppForm {
      * @param opts
      */
     ready(opts) {
-        return waitForTrue(this._$ready, opts);
+        if (this.readySubject.value)
+            return Promise.resolve();
+        return waitForTrue(this.readySubject, opts);
     }
     /**
-     * Wait form is idle (not loading)
+     * Wait form is not busy (=loaded)
      * @param opts
      */
     waitIdle(opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return AppFormUtils.waitIdle(this, opts);
-        });
+        if (!this.loadingSubject.value)
+            return Promise.resolve();
+        return waitForFalse(this.loadingSubject, opts);
     }
     updateValueAndValidity(opts) {
         AppFormUtils.updateValueAndValidity(this.form, opts);
@@ -17692,10 +17707,27 @@ class AppForm {
     registerAutocompleteField(fieldName, opts) {
         return this.autocompleteHelper.add(fieldName, opts);
     }
+    setError(value, opts) {
+        if (this.errorSubject.value !== value) {
+            this.errorSubject.next(value);
+            if (!opts || opts.emitEvent !== false) {
+                this.markForCheck();
+            }
+        }
+    }
     markForCheck() {
         // Should be overwritten by subclasses
         console.warn('markForCheck() has been called, but is not overwritten by component ' + this.constructor.name);
     }
+    /* -- private function -- */
+    setLoading(value, opts) {
+        if (this.loadingSubject.value !== value) {
+            this.loadingSubject.next(value);
+            if (!opts || opts.emitEvent !== false) {
+                this.markForCheck();
+            }
+        }
+    }
 }
 AppForm.decorators = [
     { type: Directive }
@@ -18213,6 +18245,18 @@ 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
@@ -18766,7 +18810,9 @@ class AuthForm extends AppForm {
         }
     }
     cancel() {
-        this.onCancel.emit();
+        return __awaiter(this, void 0, void 0, function* () {
+            this.onCancel.emit();
+        });
     }
     doSubmit(event) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -19623,7 +19669,7 @@ class AccountPage extends AppForm {
             cancel: { get: () => super.cancel }
         });
         return __awaiter(this, void 0, void 0, function* () {
-            _super.cancel.call(this);
+            yield _super.cancel.call(this);
         });
     }
     markForCheck() {
@@ -21431,7 +21477,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<!--            todo ajouter ici les 2 composants du module social -->\n\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of $items | async\">\n\n          <!-- link -->\n          <ion-item *ngIf=\"!loading && item.path\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    [routerLink]=\"item.path\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"selected\"\n                    [routerLinkActiveOptions]=\"{exact: (item.path === '/')}\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- action -->\n          <ion-item *ngIf=\"!loading && item.action\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    (click)=\"doAction(item.action, $event)\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- divider -->\n          <ion-item-divider @fadeInAnimation\n                            class=\"{{item.cssClass}} {{item.color}}\"\n                            *ngIf=\"!loading && !item.path && !item.action\">\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item-divider>\n\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\n</ion-split-pane>\n",
+                template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" contentId=\"menu-content\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px;\"/>\n              <span *ngIf=\"!logo\" width=\"108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n\n            <button mat-button type=\"button\"\n                    [routerLink]=\"['/account']\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"ion-color-primary\"\n                    (click)=\"close()\">\n              <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                <h3 class=\"no-margin username\">\n                  <b>{{accountName}}</b>\n                </h3>\n                <h4>{{accountEmail}}</h4>\n              </ion-label>\n            </button>\n\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of $items | async\">\n\n          <!-- link -->\n          <ion-item *ngIf=\"!loading && item.path\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    [routerLink]=\"item.path\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"selected\"\n                    [routerLinkActiveOptions]=\"{exact: (item.path === '/')}\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- action -->\n          <ion-item *ngIf=\"!loading && item.action\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    (click)=\"doAction(item.action, $event)\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- divider -->\n          <ion-item-divider @fadeInAnimation\n                            class=\"{{item.cssClass}} {{item.color}}\"\n                            *ngIf=\"!loading && !item.path && !item.action\">\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item-divider>\n\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\n</ion-split-pane>\n",
                 animations: [fadeInAnimation],
                 changeDetection: 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)}}"]
@@ -21495,14 +21541,13 @@ 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          [style.height.px]=\"height\"\n          [style.width.px]=\"width\"\n></ion-icon>\n<ng-template #matIconTemplate>\n  <mat-icon [svgIcon]=\"matSvgIcon\"\n            [style.color]=\"'var(--ion-color-'+color+')'\"\n            [style.height.px]=\"height\"\n            [style.width.px]=\"width\"\n            [style.font-size.px]=\"height || width\"\n  >{{matIcon}}</mat-icon>\n</ng-template>\n\n"
+                template: "<ion-icon *ngIf=\"icon; else matIconTemplate\" slot=\"icon-only\"\n          [color]=\"color\"\n          [name]=\"icon\"\n></ion-icon>\n<ng-template #matIconTemplate>\n  <mat-icon [svgIcon]=\"matSvgIcon\"\n            [style.color]=\"'var(--ion-color-'+color+')'\">{{matIcon}}</mat-icon>\n</ng-template>\n\n"
             },] }
 ];
 AppIconComponent.propDecorators = {
@@ -21510,8 +21555,6 @@ AppIconComponent.propDecorators = {
     matIcon: [{ type: Input }],
     matSvgIcon: [{ type: Input }],
     color: [{ type: Input }],
-    height: [{ type: Input }],
-    width: [{ type: Input }],
     ref: [{ type: Input }]
 };
 
@@ -22583,13 +22626,12 @@ class AppTable {
     get error() {
         return this.errorSubject.value;
     }
-    get error$() {
-        return this.errorSubject.asObservable();
-    }
     /**
      * @deprecated
-     * @param error
      */
+    get error$() {
+        return this.errorSubject.asObservable();
+    }
     set error(error) {
         this.setError(error);
     }
@@ -23013,7 +23055,7 @@ class AppTable {
                 .then(() => this.editRowById(event, row.id, { focusColumn: this.lastUserColumn }));
             return true;
         }
-        // Edit next row
+        // Edit previous row
         this.editRow(event, row, { focusColumn: this.lastUserColumn });
         return true;
     }
@@ -23036,8 +23078,7 @@ class AppTable {
             if (id < 0)
                 return;
             if (id >= this.visibleRowCount) {
-                this.focusColumn = opts && opts.focusColumn || this.firstUserColumn;
-                this.addRow(event);
+                this.addRow(event, undefined, opts);
             }
             else {
                 const row = yield this.dataSource.getRow(id);
@@ -23110,7 +23151,7 @@ class AppTable {
             this.cancelExistingRow(event, row, opts);
         }
     }
-    addRow(event, insertAt) {
+    addRow(event, insertAt, opts) {
         if (this.debug)
             console.debug('[table] Asking for new row...');
         if (!this._enabled)
@@ -23125,7 +23166,7 @@ class AppTable {
             return false;
         }
         // Add new row
-        this.addRowToTable(insertAt);
+        this.addRowToTable(insertAt, opts);
         return true;
     }
     save(opts) {
@@ -23240,7 +23281,7 @@ class AppTable {
      * @param event
      * @param row
      * @param opts Use interactive=false to avoid user interaction (e.g. user confirmation)
-     *  Use skipIfLoading=false to force deletion even if table is busy
+     *  And to force deletion even if table is busy
      */
     deleteRow(event, row, opts) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -23253,7 +23294,7 @@ class AppTable {
      * @param event
      * @param rows
      * @param opts Use interactive=false to avoid user interaction (e.g. user confirmation)
-     *    Use skipIfLoading=false to force deletion even if table is busy
+     *    And to force deletion even if table is busy
      */
     deleteRows(event, rows, opts) {
         var _a;
@@ -23266,8 +23307,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.skipIfLoading !== false)) {
-                console.warn('[app-table] Skip deleteRows() because table is busy (loading). Use opts.skipLoading = false to force deletion');
+            if (this.loading && (!opts || opts.interactive !== false)) {
+                console.warn('[app-table] Skip deleteRows() because table is busy (loading). Use opts.interactive = false to force deletion');
                 return 0; // Skip if loading
             }
             // Make sure to keep newly created row
@@ -23404,15 +23445,11 @@ class AppTable {
     moveRow(id, direction) {
         this.dataSource.move(id, direction);
     }
-    ready() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield firstTruePromise(this.readySubject);
-        });
+    ready(opts) {
+        return waitForTrue(this.readySubject, opts);
     }
     waitIdle(opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield firstFalsePromise(this.loadingSubject);
-        });
+        return waitForFalse(this.loadingSubject, opts);
     }
     openSelectColumnsModal(event) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -23790,9 +23827,10 @@ class AppTable {
         //if (this.debug) console.debug("[table] id = " + id);
         return id;
     }
-    addRowToTable(insertAt) {
+    addRowToTable(insertAt, opts) {
         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
@@ -24139,8 +24177,9 @@ class AppEditor {
         this._subscription = new Subscription();
         this._enabled = false;
         this._dirty = false;
-        this._$ready = new BehaviorSubject(false);
-        this._$loading = new BehaviorSubject(true);
+        this.readySubject = new BehaviorSubject(false);
+        this.loadingSubject = new BehaviorSubject(true);
+        this.errorSubject = new BehaviorSubject(undefined);
         this.debug = false;
         this.submitted = false;
         this.toolbar = null;
@@ -24150,13 +24189,31 @@ class AppEditor {
      *  @deprecated
      */
     set _loading(value) {
-        this._$loading.next(value);
+        this.readySubject.next(value);
     }
     /**
      *  @deprecated
      */
     get _loading() {
-        return this._$loading.value;
+        return this.loadingSubject.value;
+    }
+    /**
+     *  @deprecated
+     */
+    get _$ready() {
+        return this.readySubject;
+    }
+    /**
+     *  @deprecated
+     */
+    get _$loading() {
+        return this.loadingSubject;
+    }
+    get error() {
+        return this.errorSubject.value;
+    }
+    set error(error) {
+        this.setError(error);
     }
     get tables() {
         return this._children && this._children.filter(c => c instanceof AppTable);
@@ -24185,7 +24242,7 @@ class AppEditor {
     }
     get loading() {
         var _a;
-        return this._$loading.value || (((_a = this._children) === null || _a === void 0 ? void 0 : _a.findIndex(c => c.enabled && c.loading)) !== -1) || false;
+        return this.loadingSubject.value || (((_a = this._children) === null || _a === void 0 ? void 0 : _a.findIndex(c => c.enabled && c.loading)) !== -1) || false;
     }
     get enabled() {
         return this._enabled;
@@ -24209,12 +24266,11 @@ class AppEditor {
     }
     ngOnDestroy() {
         this._subscription.unsubscribe();
-        this._$ready.complete();
-        this._$ready.unsubscribe();
-        this._$loading.complete();
-        this._$loading.unsubscribe();
-    }
-    addChildForm(form) {
+        this.readySubject.unsubscribe();
+        this.loadingSubject.unsubscribe();
+        this.errorSubject.unsubscribe();
+    }
+    addChildForm(form) {
         if (!form)
             throw new Error('Trying to register an undefined child form');
         this._children = this._children || [];
@@ -24281,16 +24337,16 @@ class AppEditor {
             this.markForCheck();
     }
     markAsLoading(opts) {
-        if (!this._loading) {
-            this._loading = true;
+        if (!this.loadingSubject.value) {
+            this.loadingSubject.next(true);
             if (!opts || opts.emitEvent !== false)
                 this.markForCheck();
         }
     }
     markAsLoaded(opts) {
         var _a;
-        if (this._loading) {
-            this._loading = false;
+        if (this.loadingSubject.value) {
+            this.loadingSubject.next(false);
             if (!opts || opts.onlySelf !== true) {
                 // Emit to children forms
                 // Tables should be changed by parent
@@ -24304,15 +24360,17 @@ class AppEditor {
     markAsReady(opts) {
         var _a;
         (_a = this._children) === null || _a === void 0 ? void 0 : _a.forEach(c => c.markAsReady(opts));
-        this._$ready.next(true);
+        this.readySubject.next(true);
     }
     ready(opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return waitForTrue(this._$ready, opts);
-        });
+        if (this.readySubject.value)
+            return Promise.resolve();
+        return waitForTrue(this.readySubject, opts);
     }
     waitIdle(opts) {
-        return AppFormUtils.waitIdle(this, opts);
+        if (!this.loadingSubject.value)
+            return Promise.resolve();
+        return waitForFalse(this.loadingSubject, opts);
     }
     cancel(event) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -24515,6 +24573,14 @@ class AppEditor {
             console.warn(`${prefix} Unknown children sub-form: `, c);
         }
     }
+    setError(value, opts) {
+        if (this.errorSubject.value !== value) {
+            this.errorSubject.next(value);
+            if (!opts || opts.emitEvent !== false) {
+                this.markForCheck();
+            }
+        }
+    }
     markForCheck() {
         // Should be override by subclasses, if change detection is Push
     }
@@ -24601,6 +24667,10 @@ class AppTabEditor extends AppEditor {
             this.markForCheck();
         }
     }
+    realignInkBar() {
+        var _a;
+        (_a = this.tabGroup) === null || _a === void 0 ? void 0 : _a.realignInkBar();
+    }
     onTabChange(event, queryTabIndexParamName) {
         queryTabIndexParamName = queryTabIndexParamName || this.queryTabIndexParamName;
         if (!queryTabIndexParamName || !this.route)
@@ -25580,13 +25650,14 @@ class AppEntityEditorModal extends AppTabEditor {
                 console.debug(this._logPrefix + 'Saving data...');
             try {
                 // Save all dirty tables
-                const saved = Promise.all((this.tables || [])
-                    .filter(c => c.dirty)
-                    .map(c => c.save()))
-                    .then(res => res.findIndex(r => r !== true) === -1);
+                const saved = yield this.saveDirtyTables();
+                if (!saved)
+                    return false;
+                // Fill data
                 this.data = yield this.getValue();
+                // Mark as submitted
                 this.submitted = true;
-                return saved;
+                return true;
             }
             catch (err) {
                 this.submitted = true;
@@ -25698,6 +25769,16 @@ class AppEntityEditorModal extends AppTabEditor {
             this.markForCheck();
     }
     /* -- protected methods -- */
+    saveDirtyTables() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Save all dirty tables
+            const results = yield Promise.all((this.tables || [])
+                .filter(c => c.dirty)
+                .map(c => c.save()));
+            const saved = results.findIndex(result => result !== true) === -1;
+            return saved;
+        });
+    }
     waitWhilePending(opts) {
         return AppFormUtils.waitWhilePending(this, opts);
     }
@@ -25823,10 +25904,7 @@ AppInMemoryTable.propDecorators = {
 const SocialErrorCodes = {
     LOAD_USER_EVENTS_ERROR: 50000,
     SAVE_USER_EVENT_ERROR: 50001,
-    COUNT_USER_EVENT_ERROR: 50002,
-    SEND_MESSAGE_ERROR: 50003,
-    SUBSCRIBE_USER_EVENTS_ERROR: 50005,
-    SUBSCRIBE_JOB_PROGRESSION_ERROR: 50010
+    SEND_MESSAGE_ERROR: 50003
 };
 
 var UserEvent_1;
@@ -25841,23 +25919,16 @@ 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('{')) {
@@ -25876,52 +25947,6 @@ 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 {
@@ -25949,188 +25974,134 @@ const UserEventFragments = {
   }`
 };
 
-const moment$6 = momentImported;
-const UserEventServiceToken = new InjectionToken('UserEventService');
-class AbstractUserEventService extends BaseGraphqlService {
-    constructor(graphql, accountService, network, translate, queries, mutations, subscriptions, environment) {
+// @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) {
         super(graphql, environment);
         this.graphql = graphql;
         this.accountService = accountService;
         this.network = network;
         this.translate = translate;
-        this.queries = queries;
-        this.mutations = mutations;
-        this.subscriptions = subscriptions;
+        this.toastController = toastController;
         this.environment = environment;
-        this._count$ = new BehaviorSubject(0);
-        this._subscriptions = new Subscription();
-        this.listeners = [];
-        this._logPrefix = '[user-event-service] ';
+        this._userEventActions = [];
         // For DEV only
-        this._debug = !(environment === null || environment === void 0 ? void 0 : environment.production);
-        // listen login/logout
-        this._subscriptions.add(accountService.onLogin.subscribe(() => __awaiter(this, void 0, void 0, function* () {
-            const count = yield this.count(this.defaultFilter());
-            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();
+        this._debug = environment && !environment.production;
     }
+    /**
+     *
+     * @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(`${this._logPrefix}Loading user events...`, filter);
+        console.debug('[user-event-service] Loading user events...', filter);
         filter = this.asFilter(filter);
         // Force recipient to current issuer, if not admin and not specified
-        if (isEmptyArray(filter === null || filter === void 0 ? void 0 : filter.recipients) || !this.accountService.isAdmin()) {
-            const recipient = this.defaultRecipient();
-            if (!((_a = filter === null || filter === void 0 ? void 0 : filter.recipients) === null || _a === void 0 ? void 0 : _a.includes(recipient))) {
+        if (isNilOrBlank(filter.recipient) || !this.accountService.isAdmin()) {
+            const recipient = this.accountService.account.pubkey;
+            if (recipient !== filter.recipient) {
                 console.warn('[user-events-service] Force user event filter.recipient=' + recipient);
-                filter.recipients = [recipient];
+                filter.recipient = recipient;
             }
         }
-        const withContent = (options === null || options === void 0 ? void 0 : options.withContent) === true;
+        const withContent = options && options.withContent === true;
         return this.mutableWatchQuery({
             queryName: withContent ? 'LoadAllWithContent' : 'LoadAll',
-            query: withContent ? this.queries.loadAllWithContent : this.queries.loadAll,
+            query: withContent ? LoadAllWithContentQuery : LoadAllQuery,
             variables: {
-                page: Object.assign({ sortBy: 'updateDate', sortDirection: 'desc' }, page),
+                page: Object.assign(Object.assign({ sortBy: 'updateDate' }, page), { sortDirection: (page.sortDirection || 'DESC').toUpperCase() }),
                 filter: filter && filter.asPodObject()
             },
             arrayFieldName: 'data',
             error: { code: SocialErrorCodes.LOAD_USER_EVENTS_ERROR, message: 'SOCIAL.ERROR.LOAD_USER_EVENTS_ERROR' },
-            fetchPolicy: (options === null || options === void 0 ? void 0 : options.fetchPolicy) || "cache-first"
+            fetchPolicy: options && options.fetchPolicy || undefined
         })
             .pipe(map(res => {
-            const data = ((res === null || res === void 0 ? void 0 : res.data) || []).map(this.processUserEvent);
+            const data = res && (res.data || []).map(UserEvent.fromObject);
             if (now) {
-                console.debug(`${this._logPrefix}${data.length} user events loaded in ${Date.now() - now}ms`);
+                console.debug(`[user-event-service] ${data.length} user events loaded in ${Date.now() - now}ms`);
                 now = null;
             }
-            const unreadCount = this.unreadEvents(data);
             return {
                 data,
-                total: toNumber(res === null || res === void 0 ? void 0 : res.total, unreadCount)
+                total: res && toNumber(res.total, data.length)
             };
         }));
     }
-    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);
-    }
-    count(filter, options) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            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)
-                throw new Error(`Missing argument 'filter'`);
-            filter = this.asFilter(filter);
-            if (this._debug)
-                console.debug(`${this._logPrefix}Counting user events with filter:`, filter);
-            const res = yield this.graphql.query({
-                query: this.queries.count,
-                variables: {
-                    filter: filter.asPodObject()
-                },
-                error: { code: SocialErrorCodes.COUNT_USER_EVENT_ERROR, message: 'SOCIAL.ERROR.COUNT_USER_EVENT_ERROR' },
-                fetchPolicy: (options === null || options === void 0 ? void 0 : options.fetchPolicy) || 'network-only'
-            });
-            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)
-            throw new Error(`Missing argument 'filter'`);
-        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(this.processUserEvent);
-            // Update cache
-            this.insertIntoMutableCachedQueries(this.graphql.cache, {
-                query: withContent ? this.queries.loadAllWithContent : this.queries.loadAll,
-                data: updatedData
-            });
-            // update count
-            this._count$.next(this.unreadEvents(updatedData));
-            return updatedData;
-        }));
-    }
-    delete(entity) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!entity)
-                return; // skip
-            yield this.deleteAll([entity]);
-        });
-    }
-    deleteAll(entities, opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const ids = entities && entities
-                .map(t => t.id);
-            if (isEmptyArray(ids))
-                return; // stop, if nothing else to do
-            const now = Date.now();
-            if (this._debug)
-                console.debug(`${this._logPrefix}Deleting events... ids:`, ids);
-            yield this.graphql.mutate({
-                mutation: this.mutations.deleteByIds,
-                variables: {
-                    ids
-                },
-                update: (proxy) => {
-                    // Remove from caches
-                    this.removeFromMutableCachedQueriesByIds(proxy, {
-                        query: this.queries.loadAll,
-                        ids
-                    });
-                    this.removeFromMutableCachedQueriesByIds(proxy, {
-                        query: this.queries.loadAllWithContent,
-                        ids
-                    });
-                    if (this._debug)
-                        console.debug(`${this._logPrefix}Events deleted in ${Date.now() - now}ms`);
-                }
-            });
-        });
+    saveAll(data, options) {
+        return Promise.all(data
+            .map(entity => this.save(entity, options)));
     }
+    /**
+     * Save a userEvent entity
+     *
+     * @param entity
+     */
     save(entity, options) {
         return __awaiter(this, void 0, void 0, function* () {
             this.fillDefaultProperties(entity);
@@ -26139,9 +26110,9 @@ class AbstractUserEventService extends BaseGraphqlService {
             const json = entity.asObject();
             const now = Date.now();
             if (this._debug)
-                console.debug(`${this._logPrefix}Saving user event...`, json);
+                console.debug(`[user-event-service] Saving user event...`, json);
             yield this.graphql.mutate({
-                mutation: this.mutations.save,
+                mutation: SaveQuery,
                 variables: {
                     data: json
                 },
@@ -26151,16 +26122,16 @@ class AbstractUserEventService extends BaseGraphqlService {
                     const savedEntity = data && data.data;
                     if (savedEntity) {
                         if (this._debug)
-                            console.debug(`${this._logPrefix}User event saved in ${Date.now() - now}ms`, entity);
+                            console.debug(`[user-event-service] User event saved in ${Date.now() - now}ms`, entity);
                         this.copyIdAndUpdateDate(savedEntity, entity);
                         // Add to cache
                         if (isNew) {
                             this.insertIntoMutableCachedQueries(proxy, {
-                                query: this.queries.loadAll,
+                                query: LoadAllQuery,
                                 data: Object.assign(Object.assign({}, savedEntity), { content: null })
                             });
                             this.insertIntoMutableCachedQueries(proxy, {
-                                query: this.queries.loadAllWithContent,
+                                query: LoadAllWithContentQuery,
                                 data: savedEntity
                             });
                         }
@@ -26170,144 +26141,63 @@ class AbstractUserEventService extends BaseGraphqlService {
             return entity;
         });
     }
-    saveAll(data, opts) {
-        return Promise.all(data
-            .map(entity => this.save(entity, opts)));
-    }
-    markAsRead(entity) {
+    /**
+     * Save many trips
+     *
+     * @param entities
+     * @param opts
+     */
+    deleteAll(entities, opts) {
         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);
+            const ids = entities && entities
+                .map(t => t.id);
+            if (isEmptyArray(ids))
+                return; // stop, if nothing else to do
+            const now = Date.now();
+            if (this._debug)
+                console.debug('[user-event-service] Deleting events... ids:', ids);
+            yield this.graphql.mutate({
+                mutation: DeleteByIdsMutation,
+                variables: {
+                    ids
+                },
+                update: (proxy) => {
+                    // Remove from caches
+                    this.removeFromMutableCachedQueriesByIds(proxy, {
+                        query: LoadAllQuery,
+                        ids
+                    });
+                    this.removeFromMutableCachedQueriesByIds(proxy, {
+                        query: LoadAllWithContentQuery,
+                        ids
+                    });
+                    if (this._debug)
+                        console.debug(`[user-event-service] Events deleted in ${Date.now() - now}ms`);
                 }
-            }
-            else {
-                // Use default
-                yield this.defaultMarkAsRead(entity);
-            }
+            });
         });
     }
-    registerListener(listener) {
-        if (!this.listeners)
-            this.listeners = [];
-        this.listeners.push(listener);
-    }
-    /* -- protected methods -- */
-    processUserEvent(source) {
-        // Convert json source to IUserEvent
-        let target = this.fromObject(source);
-        // Get listeners
-        const listeners = (this.listeners || []).filter(listener => listener.onReceived).filter(listener => listener.accept(target));
-        for (const listener of listeners) {
-            if (target) {
-                target = listener.onReceived(target);
-            }
-            else {
-                if (this._debug)
-                    console.debug(`${this._logPrefix}Event has been rejected by a listener`, source);
-                break;
-            }
-        }
-        return target;
-    }
-    defaultMarkAsRead(userEvent) {
+    /**
+     * Delete userEvent entities
+     */
+    delete(data) {
         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);
-            }
+            if (!data)
+                return; // skip
+            yield this.deleteAll([data]);
         });
     }
-    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
-      }
+    listenChanges(id, options) {
+        // TODO
+        console.warn('TODO: implement listen changes on user events');
+        return of();
     }
-    ${UserEventFragments.userEvent}
-  `
-};
-const userEventMutations = {
-    deleteByIds: gql `
-    mutation DeleteUserEvents($ids:[Int]){
-      deleteUserEvents(ids: $ids)
-    }
-  `,
-    save: gql `
-    mutation SaveUserEvent($data: UserEventVOInput){
-      data: saveUserEvent(userEvent: $data){
-        ...UserEventFragment
-      }
+    registerAction(definition) {
+        console.info(`[user-event-service] Registering action ${definition.name} for ${definition.__typename}`);
+        this._userEventActions.push(definition);
     }
-    ${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;
+    getActionsByTypename(typename) {
+        return this._userEventActions.filter(def => def.__typename === typename);
     }
     showToastErrorWithContext(opts) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -26371,16 +26261,13 @@ class UserEventService extends AbstractUserEventService {
     }
     sendDataForDebug(data) {
         const userEvent = new UserEvent();
-        userEvent.type = UserEventTypes.DEBUG_DATA;
+        userEvent.eventType = 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') {
@@ -26409,9 +26296,13 @@ class UserEventService extends AbstractUserEventService {
         // 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 }
+    { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
 UserEventService.ctorParameters = () => [
     { type: GraphqlService },
@@ -26424,7 +26315,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', ...})
@@ -26490,7 +26381,7 @@ class UserEventsTable extends AppTable {
             }
         }));
         const filter = this.filter || new UserEventFilter();
-        filter.recipients = [this.recipient];
+        filter.recipient = this.recipient;
         this.setFilter(filter, { emitEvent: true });
     }
     start() {
@@ -26503,17 +26394,17 @@ class UserEventsTable extends AppTable {
         });
     }
     getIcon(source) {
-        return ICONS_MAP[source.type];
+        return ICONS_MAP[source.eventType];
     }
     getDetail(source) {
         if (!source)
             return undefined;
-        if (source.content && source.type === UserEventTypes.DEBUG_DATA) {
+        if (source.content && source.eventType === 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
                 };
@@ -26525,11 +26416,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) {
@@ -26548,18 +26439,13 @@ 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: undefined, decorators: [{ type: Inject, args: [UserEventServiceToken,] }] },
+    { type: UserEventService },
     { type: EntitiesStorage },
     { type: ChangeDetectorRef },
     { type: undefined, decorators: [{ type: Inject, args: [ENVIRONMENT,] }] }
@@ -26571,147 +26457,6 @@ 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;
-        }
-        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);
-        }));
-        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',
@@ -26923,9 +26668,9 @@ MessageForm.propDecorators = {
     canSelectType: [{ type: Input }]
 };
 
-class MessageModule {
+class SocialModule {
 }
-MessageModule.decorators = [
+SocialModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
                     CommonModule,
@@ -26933,317 +26678,17 @@ MessageModule.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)
@@ -27889,10 +27334,12 @@ class AutocompleteTestPage {
         });
     }
     ngAfterViewInit() {
-        setTimeout(() => {
-            this.farEntityField.suggestLengthThreshold = 2;
-            this.farEntityField.reloadItems();
-        }, 2000);
+        if (this.farEntityField) {
+            setTimeout(() => {
+                this.farEntityField.suggestLengthThreshold = 2;
+                this.farEntityField.reloadItems();
+            }, 2000);
+        }
         setTimeout(() => this.loadData(), 1000);
     }
     // Load the form with data
@@ -27980,7 +27427,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              </mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      suggestLengthThreshold=\"3\"\n                                      [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an array\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: [], value: {{stringify(form.controls.entity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items')\"\n                                      [logPrefix]=\"'[combo-desktop-array-1]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      mobile=\"false\"\n                                      multiple=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-missing]'\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size panel\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-disable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                      [readonly]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"mat-autocomplete-panel-full-size\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      class=\"mat-autocomplete-panel-full-size\"\n                                      panelWidth=\"100vw\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelWidth: string</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                  <ion-col size=\"3\">\n                    <mat-checkbox #showIcons [checked]=\"false\">\n                      Icons ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"false\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                      <mat-icon matPrefix *ngIf=\"showIcons.checked\">keyboard_arrow_right</mat-icon>\n                      <mat-icon matSuffix *ngIf=\"showIcons.checked\">keyboard_arrow_left</mat-icon>\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
+                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar>\n    <a mat-tab-link\n       [active]=\"mode==='mobile'\"\n       (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='desktop'\"\n       (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='memory'\"\n       (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link\n       [active]=\"mode==='temp'\"\n       (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!--<ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n    </ion-grid>-->\n\n\n    <ion-grid *ngIf=\"mode === 'memory'\">\n\n      <!-- debugging memory leak -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Debug memory leak</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Items type\">\n            <mat-select (selectionChange)=\"memoryAutocompleteFieldName=$event.value\" [value]=\"memoryAutocompleteFieldName\">\n              <mat-option value=\"entity-$items\">Observable</mat-option>\n              <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n        <ion-col size=\"1\" class=\"ion-no-padding\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Mobile ?\">\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field formControlName=\"entity\"\n                                  *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n                                  [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                                  [mobile]=\"memoryMobile\"\n                                  [equals]=\"equals\"\n                                  [logPrefix]=\"'[combo-memory-leak]'\">\n          </mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Entity far in the list (not in first page)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: normal !important;\">value: {{stringify(form.controls.farEntity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"farEntity\" #farEntityField\n                                      [config]=\"autocompleteFields.get('entity-far')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-far]'\"\n                                      [debug]=\"true\"\n                                      [required]=\"true\"\n                                      [clearable]=\"true\"\n                                      placeholder=\"Far entity (in the list)\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-1]'\"\n                                      [required]=\"true\"\n                                      placeholder=\"Suggest field\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Items is an Observable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-observable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [clearable]=\"true\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      suggestLengthThreshold=\"3\"\n                                      [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n                                      required\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      mobile=\"true\"\n                                      multiple=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Change filter\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre></pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-button (click)=\"updateFilter(filterChangeField, 'entity-items-filter')\">Filter on: {{autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}</ion-button>\n                  </ion-col>\n                  <ion-col>\n                    <mat-autocomplete-field formControlName=\"entity\" #filterChangeField\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-filter]'\"\n                    ></mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"min-width-large\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"true\"\n                                      class=\"min-width-large\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Fullscreen\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-mobile-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Desktop mode -->\n    <ion-grid *ngIf=\"mode === 'desktop'\">\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Desktop mode</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  items from suggest function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [clearable]=\"true\"\n                                      [logPrefix]=\"'[combo-desktop-suggest]'\"\n                                      [debug]=\"true\">\n              </mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      suggestLengthThreshold=\"3\"\n                                      [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an array\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: [], value: {{stringify(form.controls.entity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items')\"\n                                      [logPrefix]=\"'[combo-desktop-array-1]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      mobile=\"false\"\n                                      multiple=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-missing]'\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size panel\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-disable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                      [readonly]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"mat-autocomplete-panel-full-size\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      class=\"mat-autocomplete-panel-full-size\"\n                                      panelWidth=\"100vw\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelWidth: string</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                  <ion-col size=\"3\">\n                    <mat-checkbox #showIcons [checked]=\"false\">\n                      Icons ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"false\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                      <mat-icon matPrefix *ngIf=\"showIcons.checked\">keyboard_arrow_right</mat-icon>\n                      <mat-icon matSuffix *ngIf=\"showIcons.checked\">keyboard_arrow_left</mat-icon>\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
             },] }
 ];
 AutocompleteTestPage.ctorParameters = () => [
@@ -28056,13 +27503,13 @@ LatLongTestPage.ctorParameters = () => [
     { type: FormBuilder }
 ];
 
-const moment$7 = momentImported;
+const moment$6 = momentImported;
 class SwipeTestPage {
     constructor(formBuilder, dateFormatPipe) {
         this.formBuilder = formBuilder;
         this.dateFormatPipe = dateFormatPipe;
         this.$dates = new BehaviorSubject(undefined);
-        this._today = moment$7().startOf('day');
+        this._today = moment$6().startOf('day');
         this.form = formBuilder.group({
             empty: [null, Validators.required],
             date: [null, Validators.compose([Validators.required, SharedValidators.validDate])],
@@ -28075,7 +27522,7 @@ class SwipeTestPage {
     ngOnInit() {
         const dates = [];
         for (let d = 0; d < 7; d++) {
-            dates[d] = moment$7(this._today).add(d - 3, 'day');
+            dates[d] = moment$6(this._today).add(d - 3, 'day');
         }
         this.$dates.next(dates);
         this.loadData();
@@ -28116,7 +27563,7 @@ SwipeTestPage.ctorParameters = () => [
     { type: DateFormatPipe }
 ];
 
-const moment$8 = momentImported;
+const moment$7 = momentImported;
 class DateTimeTestPage {
     constructor(platform, formBuilder, cd) {
         this.platform = platform;
@@ -28148,7 +27595,7 @@ class DateTimeTestPage {
     // Load the form with data
     loadData() {
         return __awaiter(this, void 0, void 0, function* () {
-            const now = moment$8();
+            const now = moment$7();
             const data = {
                 empty: null,
                 emptyRequired: null,
@@ -28394,7 +27841,7 @@ NumpadTestPage.ctorParameters = () => [
     { type: FormBuilder }
 ];
 
-const moment$9 = momentImported;
+const moment$8 = momentImported;
 class DateTestPage {
     constructor(formBuilder, cd) {
         this.formBuilder = formBuilder;
@@ -28427,7 +27874,7 @@ class DateTestPage {
     // Load the form with data
     loadData() {
         return __awaiter(this, void 0, void 0, function* () {
-            const now = moment$9();
+            const now = moment$8();
             const nowAtMahe = now.clone().tz(this.timezone).startOf('day');
             const data = {
                 empty: null,
@@ -29173,5 +28620,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, 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 };
+export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_MENU_ITEMS, APP_TESTING_PAGES, AboutModal, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, Alerts, AndroidOsEnvironment, AnimationState, AppEditor, AppEditorOptions, AppEntityEditor, AppEntityEditorModal, AppEntityEditorModalOptions, AppForm, AppFormField, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppInMemoryTable, AppInstallUpgradeCard, AppListForm, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppTabEditor, AppTabEditorOptions, AppTable, AppTableDataSourceOptions, AppTableUtils, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayLengthPipe, ArrayPluckPipe, AudioProvider, AuthForm, AuthGuardService, AuthModal, AutoTitleDirective, AutocompleteTestPage, AutofocusDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CoreTestingModule, CryptoService, CsvUtils, DATE_ISO_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFromNowPipe, DateTimeTestPage, DateUtils, Department, DepartmentToStringPipe, DragAndDropDirective, DurationPipe, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesService, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, Fragments$1 as Fragments, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNotNilOrBlankPipe, IsNotOnFieldModePipe, IsOnFieldModePipe, JobUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatBadgeIconDirective, MatBooleanField, MatChipsField, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItems, MenuService, Message, MessageFilter, MessageForm, MessageModal, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NetworkService, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, OddPipe, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertyFormatPipe, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialUtils, ReferentialValidatorService, RegisterConfirmPage, ResizableComponent, ResizableDirective, ResizableModule, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, ServerErrorCodes, SettingsPage, SharedAsyncValidators, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBadgeIconModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedValidators, SocialErrorCodes, SocialModule, Software, StartableService, StatusById, StatusIds, StatusList, StrIncludesPipe, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TextForm, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ToStringPipe, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UserEvent, UserEventFilter, UserEventFragments, UserEventService, UserEventTypes, UserEventsTable, UserSettings, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, isAndroid, isBlankString, isControlHasInput, isCordova, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isProgressEvent, isResponseEvent, isTouchUi, isWindows, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moment$5 as moment, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, tz, uncapitalizeFirstLetter, updateValueAndValidity, waitFor, waitForFalse, waitForTrue, waitIdle, waitWhilePending, ɵ0, CustomReuseStrategy as ɵa, MatNumpadDomService as ɵb, isFocusableElement as ɵc, RegisterForm as ɵd, AccountValidatorService as ɵe, RegisterModal as ɵf, UserSettingsValidatorService as ɵg, LocalSettingsValidatorService as ɵh, AppUpdateOfflineModeCard as ɵi, AppIconComponent as ɵj, DateTestPage as ɵk, NumpadTestPage as ɵl, MatBadgeIconTestPage as ɵm, ToastTestingModule as ɵn, ToastTestingPage as ɵo };
 //# sourceMappingURL=sumaris-net.ngx-components.js.map