@sumaris-net/ngx-components 0.24.3 → 0.25.3

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

@@ -36,7 +36,7 @@ import { MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteModule, MAT_AUT
 import { __awaiter, __decorate } from 'tslib';
 import * as i1$6 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormGroupDirective, ReactiveFormsModule, AbstractControl, Validators, FormBuilder, FormControl, FormGroup, FormArray } from '@angular/forms';
-import { timer, merge, fromEvent, Subscription, BehaviorSubject, Subject, isObservable, of, noop as noop$8, Observable, defer, concat, combineLatest, EMPTY } from 'rxjs';
+import { timer, merge, fromEvent, Subscription, BehaviorSubject, Subject, isObservable, of, noop as noop$8, Observable, defer, combineLatest, EMPTY } from 'rxjs';
 import { filter, first, map, takeUntil, startWith, debounceTime, takeWhile, switchMap, tap, distinctUntilChanged, mergeMap, catchError, throttleTime } from 'rxjs/operators';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
@@ -6888,31 +6888,97 @@ AppFormField.propDecorators = {
     matInput: [{ type: ViewChild, args: ['matInput',] }]
 };
 
+class StartableService {
+    constructor(platform) {
+        this.onStart = new Subject();
+        this._debug = false;
+        this._data = null;
+        this._started = false;
+        this._startPrerequisite = platform
+            ? () => platform.ready()
+            : () => Promise.resolve();
+    }
+    start() {
+        if (this._startPromise)
+            return this._startPromise;
+        if (this._started)
+            return Promise.resolve(this._data);
+        this._startPromise = this._startPrerequisite()
+            .then(() => this.ngOnStart())
+            .then(data => {
+            this._data = data;
+            this._started = true;
+            this._startPromise = undefined;
+            this.onStart.next(this._data);
+            return this._data;
+        })
+            .catch(err => {
+            console.error('Failed to start a service: ' + (err && err.message || err), err);
+            this._started = false;
+            this._startPromise = null;
+            return null;
+        });
+        return this._startPromise;
+    }
+    stop() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                yield this.ngOnStop();
+                this._started = false;
+                this._startPromise = undefined;
+            }
+            catch (err) {
+                console.error('Failed to stop a service: ' + (err && err.message || err), err);
+            }
+        });
+    }
+    restart() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._startPromise)
+                yield this._startPromise; // Wait end of previous loading
+            if (this._started)
+                yield this.stop(); // Then stop if started
+            return this.start(); // Then start again
+        });
+    }
+    get started() {
+        return this._started;
+    }
+    get starting() {
+        return !!this._startPromise;
+    }
+    ready() {
+        if (this._started)
+            return Promise.resolve(this._data);
+        return this.start();
+    }
+    ngOnStop() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Can be override by subclasses
+        });
+    }
+}
+StartableService.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Optional }] }
+];
+
 const SYSTEM_SOUNDS = [
     { id: 'beep-confirm', assetPath: 'assets/audio/beep-confirm.mp3', vibration: 250 },
     { id: 'beep-error', assetPath: 'assets/audio/beep-error.mp3', vibration: 1000 },
     { id: 'startup', assetPath: 'assets/audio/unfa-ping.mp3', vibration: [1, 500, 250, 750] },
 ];
-class AudioProvider {
+class AudioProvider extends StartableService {
     constructor(platform, nativeAudio, vibration, audioManagement) {
+        super(platform);
         this.platform = platform;
         this.nativeAudio = nativeAudio;
         this.vibration = vibration;
         this.audioManagement = audioManagement;
-        this._started = false;
         this._audioMode = AudioManagement.AudioMode.NORMAL;
         this._preloadedSounds = {};
         this._htmlAudioCache = {};
-        this.onStart = new Subject();
         this.start();
     }
-    ready() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this._started)
-                return Promise.resolve();
-            yield this.start();
-        });
-    }
     playBeepConfirm() {
         return this.play('beep-confirm', {
             // Vibrate only if in vibration mode
@@ -6954,7 +7020,7 @@ class AudioProvider {
     play(id, opts) {
         return __awaiter(this, void 0, void 0, function* () {
             // Make sure provider is ready
-            if (!this._started)
+            if (!this.started)
                 yield this.ready();
             const sound = this._preloadedSounds[id];
             if (!sound) {
@@ -7015,7 +7081,7 @@ class AudioProvider {
     }
     vibrate(timeInMs) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this._started)
+            if (!this.started)
                 yield this.ready();
             if (!this.vibration)
                 return; // Skip if vibrate plugin
@@ -7023,45 +7089,24 @@ class AudioProvider {
         });
     }
     /* -- protected methods  -- */
-    start() {
-        if (this._startPromise)
-            return this._startPromise;
-        if (this._started)
-            return Promise.resolve();
-        let cordova;
-        this._startPromise = this.platform.ready()
-            .then(() => __awaiter(this, void 0, void 0, function* () {
-            cordova = this.platform.is('cordova');
+    ngOnStart() {
+        return __awaiter(this, void 0, void 0, function* () {
+            let cordova = this.platform.is('cordova');
             this._audioType = cordova && this.nativeAudio ? 'native' : 'html5';
             console.info(`[audio] Starting audio provider {${this._audioType}}...`);
             // Listen audio mode changed
             if (cordova && this.audioManagement) {
                 yield this.readAudioMode();
             }
-        }))
             // Pre-loading system sounds
-            .then(() => {
             console.debug('[audio] Preloading audio sounds...');
-            return Promise.all(SYSTEM_SOUNDS.map(s => {
+            yield Promise.all(SYSTEM_SOUNDS.map(s => {
                 // Disable vibration is cordova not enabled
                 if (!cordova)
                     s.vibration = undefined;
                 return this.preload(s);
             }));
-        })
-            .then(() => {
-            this._started = true;
-            this._startPromise = null;
-            console.info('[audio] Audio provider started');
-            // Emit event
-            this.onStart.next();
-        })
-            .catch(err => {
-            console.error('[audio] Unable to start audio provider: ' + (err && err.message || err), err);
-            this._started = false;
-            this._startPromise = null;
         });
-        return this._startPromise;
     }
     readAudioMode() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -7980,6 +8025,10 @@ const environment = Object.freeze({
         {
             host: 'sih.sfa.sc',
             port: 80
+        },
+        {
+            host: 'test.sumaris.net',
+            port: 443
         }
     ],
     defaultAppName: 'SUMARiS',
@@ -8119,6 +8168,19 @@ let Peer = Peer_1 = class Peer extends Entity {
             path: noTrailingSlash(url.pathname)
         });
     }
+    static path(peer, ...paths) {
+        if (!peer)
+            throw new Error('Missing required argument \'peer\'!');
+        // Remove starting slashes
+        paths = (paths || []).map(path => {
+            if (path.startsWith('./'))
+                return path.substring(2);
+            if (path.startsWith('/'))
+                return path.substring(1);
+            return path;
+        }).filter(isNotNilOrBlank);
+        return [noTrailingSlash(Peer_1.fromObject(peer).url)].concat(...paths).join('/');
+    }
     asObject(options) {
         return super.asObject(options);
     }
@@ -8508,14 +8570,14 @@ const DEFAULT_SETTINGS = {
 };
 const APP_LOCAL_SETTINGS = new InjectionToken('DefaultLocalSettings');
 const APP_LOCAL_SETTINGS_OPTIONS = new InjectionToken('LocalSettingsOptions');
-class LocalSettingsService {
+class LocalSettingsService extends StartableService {
     constructor(translate, platform, storage, environment, defaultSettings, defaultOptionsMap) {
+        super(platform);
         this.translate = translate;
         this.platform = platform;
         this.storage = storage;
         this.environment = environment;
         this.defaultSettings = defaultSettings;
-        this._started = false;
         this.onChange = new Subject();
         this.defaultSettings = Object.assign(Object.assign({}, DEFAULT_SETTINGS), this.defaultSettings);
         this._optionDefs = Object.values(defaultOptionsMap);
@@ -8525,60 +8587,40 @@ class LocalSettingsService {
             console.debug('[settings] Creating service');
     }
     get settings() {
-        return this.data || this.defaultSettings;
+        return this._data || this.defaultSettings;
     }
     get locale() {
-        return this.data && this.data.locale || this.translate.currentLang || this.translate.defaultLang;
+        return this._data && this._data.locale || this.translate.currentLang || this.translate.defaultLang;
     }
     get latLongFormat() {
-        return this.data && this.data.latLongFormat || 'DDMM';
+        return this._data && this._data.latLongFormat || 'DDMM';
     }
     get usageMode() {
-        return (this.data && this.data.usageMode || (this.mobile ? 'FIELD' : 'DESK'));
+        return (this._data && this._data.usageMode || (this.mobile ? 'FIELD' : 'DESK'));
     }
     get mobile() {
-        return this.data && toBoolean(this.data.mobile, this.platform.is('mobile'));
+        return this._data && toBoolean(this._data.mobile, this.platform.is('mobile'));
     }
     set mobile(value) {
-        this.data.mobile = value;
+        this._data.mobile = value;
     }
     get touchUi() {
-        return this.data.touchUi;
+        return this._data.touchUi;
     }
     set touchUi(value) {
-        this.data.touchUi = value;
+        this._data.touchUi = value;
     }
     get pageHistory() {
-        return (this.data && this.data.pageHistory || []);
+        return (this._data && this._data.pageHistory || []);
     }
-    start() {
-        if (this._startPromise)
-            return this._startPromise;
-        if (this._started)
-            return Promise.resolve(this.data);
-        console.info('[settings] Starting settings...');
+    ngOnStart() {
+        console.info('[settings] Starting service...');
         // Restoring local settings
-        this._startPromise = this.platform.ready()
-            .then(() => {
-            this.data.mobile = isNotNil(this.data.mobile) ? this.data.mobile : this.platform.is('mobile');
-            this.data.touchUi = this.data.mobile || this.platform.is('phablet') || this.platform.is('tablet');
-            this.data.usageMode = this.platform.is('android') ? 'FIELD' : 'DESK'; // FIELD by default if Android
-        })
-            .then(() => this.restoreLocally())
-            .then(data => {
-            this._started = true;
-            this._startPromise = undefined;
-            return data;
-        });
-        return this._startPromise;
-    }
-    get started() {
-        return this._started;
-    }
-    ready() {
-        if (this._started)
-            return Promise.resolve(this.data);
-        return this.start();
+        this._data.mobile = isNotNil(this._data.mobile) ? this._data.mobile : this.platform.is('mobile');
+        this._data.touchUi = this._data.mobile || this.platform.is('phablet') || this.platform.is('tablet');
+        this._data.usageMode = this.platform.is('android') ? 'FIELD' : 'DESK'; // FIELD by default if Android
+        // Restoring local settings
+        return this.restoreLocally();
     }
     isUsageMode(mode) {
         return this.usageMode === mode;
@@ -8588,6 +8630,7 @@ class LocalSettingsService {
     }
     restoreLocally() {
         return __awaiter(this, void 0, void 0, function* () {
+            let data = this._data || {};
             // Restore from storage
             const settingsStr = yield this.storage.get(SETTINGS_STORAGE_KEY);
             // Restore local settings (or keep old settings)
@@ -8598,28 +8641,29 @@ class LocalSettingsService {
                 SETTINGS_TRANSIENT_PROPERTIES.forEach(transientKey => {
                     delete restoredData[transientKey];
                 });
-                this.data = Object.assign(this.data, restoredData);
+                // Merge into existing data
+                data = Object.assign(data, restoredData);
             }
             // Emit event
-            this.onChange.next(this.data);
-            return this.data;
+            this.onChange.next(data);
+            return data;
         });
     }
     setProperty(keyOrDef, value) {
-        if (!this.data)
+        if (!this._data)
             return;
         if (typeof keyOrDef === 'object') {
             this.setProperty(keyOrDef.key, value);
             return;
         }
-        this.data.properties = this.data.properties || {};
-        this.data.properties[keyOrDef] = isNil(value) ? undefined : value.toString();
+        this._data.properties = this._data.properties || {};
+        this._data.properties[keyOrDef] = isNil(value) ? undefined : value.toString();
     }
     getProperty(keyOrDef, defaultValue) {
         if (typeof keyOrDef === 'object') {
             return this.getProperty(keyOrDef.key, isNil(defaultValue) ? keyOrDef.defaultValue : defaultValue);
         }
-        const value = this.data && this.data.properties && this.data.properties[keyOrDef];
+        const value = this._data && this._data.properties && this._data.properties[keyOrDef];
         return isNotNil(value) ? value : defaultValue;
     }
     getPropertyAsBoolean(definition, defaultValue) {
@@ -8642,7 +8686,9 @@ class LocalSettingsService {
     }
     apply(settings, opts) {
         return __awaiter(this, void 0, void 0, function* () {
-            this.data = Object.assign(Object.assign({}, this.data), settings);
+            if (!this.started)
+                yield this.ready();
+            this._data = Object.assign(Object.assign({}, this._data), settings);
             // Save locally
             if (opts && opts.persistImmediate) {
                 yield this.persistLocally(true);
@@ -8652,7 +8698,7 @@ class LocalSettingsService {
             }
             // Emit event
             if (!opts || opts.emitEvent !== false) {
-                this.onChange.next(this.data);
+                this.onChange.next(this._data);
             }
         });
     }
@@ -8664,38 +8710,38 @@ class LocalSettingsService {
         });
     }
     getPageSettings(pageId, propertyName) {
-        if (!this.data || !this.data.pages)
+        if (!this._data || !this._data.pages)
             return undefined;
         const key = pageId.replace(/[/]/g, '__');
         if (isNotNilOrBlank(propertyName)) {
-            return getPropertyByPath(this.data.pages, key + '.' + propertyName);
+            return getPropertyByPath(this._data.pages, key + '.' + propertyName);
         }
-        return this.data.pages[key];
+        return this._data.pages[key];
     }
     savePageSetting(pageId, value, propertyName) {
         return __awaiter(this, void 0, void 0, function* () {
-            this.data = this.data || this.defaultSettings;
-            this.data.pages = this.data.pages || {};
+            this._data = this._data || this.defaultSettings;
+            this._data.pages = this._data.pages || {};
             const key = pageId.replace(/[/]/g, '__');
             if (propertyName) {
-                this.data.pages[key] = this.data.pages[key] || {};
-                this.data.pages[key][propertyName] = value;
+                this._data.pages[key] = this._data.pages[key] || {};
+                this._data.pages[key][propertyName] = value;
             }
             else {
-                this.data.pages[key] = value;
+                this._data.pages[key] = value;
             }
             // Update local settings
             this.persistLocally();
         });
     }
     getOfflineFeature(featureName) {
-        if (!this.data || !this.data.offlineFeatures || isEmptyArray(this.data.offlineFeatures))
+        if (!this._data || !this._data.offlineFeatures || isEmptyArray(this._data.offlineFeatures))
             return undefined;
         if (!featureName)
             throw Error('Missing \'featureName\' argument');
         featureName = featureName.toLowerCase();
         const featurePrefix = featureName + '#';
-        const feature = this.data.offlineFeatures.find(f => {
+        const feature = this._data.offlineFeatures.find(f => {
             if (typeof f === 'string')
                 return f.toLowerCase().startsWith(featurePrefix);
             if (typeof f === 'object' && f.name)
@@ -8718,24 +8764,24 @@ class LocalSettingsService {
     hasOfflineFeature(featureName) {
         if (featureName)
             return isNotNil(this.getOfflineFeature(featureName));
-        return this.data && isNotEmptyArray(this.data.offlineFeatures);
+        return this._data && isNotEmptyArray(this._data.offlineFeatures);
     }
     saveOfflineFeature(feature) {
-        this.data = this.data || this.defaultSettings;
-        this.data.offlineFeatures = this.data.offlineFeatures || [];
+        this._data = this._data || this.defaultSettings;
+        this._data.offlineFeatures = this._data.offlineFeatures || [];
         feature.name = feature.name.toLowerCase();
         const featurePrefix = feature.name + '#';
-        const existingIndex = this.data.offlineFeatures.findIndex(f => {
+        const existingIndex = this._data.offlineFeatures.findIndex(f => {
             if (typeof f === 'string')
                 return f.toLowerCase().startsWith(featurePrefix);
             if (typeof f === 'object' && f.name)
                 return f.name === feature.name;
         });
         if (existingIndex !== -1) {
-            this.data.offlineFeatures[existingIndex] = feature;
+            this._data.offlineFeatures[existingIndex] = feature;
         }
         else {
-            this.data.offlineFeatures.push(feature);
+            this._data.offlineFeatures.push(feature);
         }
         // Update local settings
         this.persistLocally();
@@ -8754,14 +8800,14 @@ class LocalSettingsService {
         this.saveOfflineFeature(feature);
     }
     removeOfflineFeatures() {
-        if (this.data && this.data.offlineFeatures) {
-            this.data.offlineFeatures = [];
+        if (this._data && this._data.offlineFeatures) {
+            this._data.offlineFeatures = [];
             // Update local settings
             this.persistLocally();
         }
     }
     getFieldDisplayAttributes(fieldName, defaultAttributes) {
-        const value = this.data && this.data.properties && this.data.properties[`sumaris.field.${fieldName}.attributes`];
+        const value = this._data && this._data.properties && this._data.properties[`sumaris.field.${fieldName}.attributes`];
         // Nothing found in settings: return defaults
         if (!value)
             return defaultAttributes || ['label', 'name'];
@@ -8790,7 +8836,7 @@ class LocalSettingsService {
             // If not inside recursive call: fill page history defaults
             if (!pageHistory)
                 this.fillPageHistoryDefaults(page, opts);
-            pageHistory = pageHistory || this.data.pageHistory;
+            pageHistory = pageHistory || this._data.pageHistory;
             const index = pageHistory.findIndex(p => (
             // same path
             p.path === page.path
@@ -8826,10 +8872,10 @@ class LocalSettingsService {
                 }
             }
             // Save locally (only if not a recursive execution)
-            if (pageHistory === this.data.pageHistory) {
+            if (pageHistory === this._data.pageHistory) {
                 // If max has been reached, remove old pages
-                if (this.data.pageHistory.length > this.data.pageHistoryMaxSize) {
-                    const removedPages = pageHistory.splice(this.data.pageHistoryMaxSize, pageHistory.length - this.data.pageHistoryMaxSize);
+                if (this._data.pageHistory.length > this._data.pageHistoryMaxSize) {
+                    const removedPages = pageHistory.splice(this._data.pageHistoryMaxSize, pageHistory.length - this._data.pageHistoryMaxSize);
                     console.debug('[settings] Pages removed from history: ', removedPages);
                 }
                 // Apply new value
@@ -8840,7 +8886,7 @@ class LocalSettingsService {
     removePageHistory(path, opts, pageHistory // used for recursive call to children)
     ) {
         return __awaiter(this, void 0, void 0, function* () {
-            pageHistory = pageHistory || this.data.pageHistory;
+            pageHistory = pageHistory || this._data.pageHistory;
             const index = pageHistory.findIndex(p => p.path === path);
             let found = index !== -1;
             if (found) {
@@ -8856,9 +8902,9 @@ class LocalSettingsService {
                     .findIndex(children => this.removePageHistory(path, opts, children)) !== -1;
             }
             // Save locally (only if not a recursive execution)
-            if (found && pageHistory === this.data.pageHistory) {
+            if (found && pageHistory === this._data.pageHistory) {
                 // Apply changes
-                yield this.applyProperty('pageHistory', this.data.pageHistory);
+                yield this.applyProperty('pageHistory', this._data.pageHistory);
             }
             return found;
         });
@@ -8871,26 +8917,26 @@ class LocalSettingsService {
     }
     /* -- Protected methods -- */
     resetData() {
-        this.data = Object.assign(Object.assign({}, this.data), this.defaultSettings);
-        this.data.locale = this.translate.currentLang || this.translate.defaultLang;
-        this.data.mobile = undefined;
-        this.data.usageMode = undefined;
-        this.data.pageHistory = [];
+        this._data = Object.assign(Object.assign({}, this._data), this.defaultSettings);
+        this._data.locale = this.translate.currentLang || this.translate.defaultLang;
+        this._data.mobile = undefined;
+        this._data.usageMode = undefined;
+        this._data.pageHistory = [];
         const defaultPeer = this.environment.defaultPeer && Peer.fromObject(this.environment.defaultPeer);
-        this.data.peerUrl = defaultPeer && defaultPeer.url || undefined;
-        if (this._started)
-            this.onChange.next(this.data);
+        this._data.peerUrl = defaultPeer && defaultPeer.url || undefined;
+        if (this.started)
+            this.onChange.next(this._data);
     }
     persistLocally(immediate) {
         // Execute immediate
         if (immediate) {
-            if (!this.data) {
+            if (!this._data) {
                 console.debug('[settings] Removing local settings from storage');
                 return this.storage.remove(SETTINGS_STORAGE_KEY);
             }
             else {
-                console.debug('[settings] Store local settings', this.data);
-                return this.storage.set(SETTINGS_STORAGE_KEY, JSON.stringify(this.data));
+                console.debug('[settings] Store local settings', this._data);
+                return this.storage.set(SETTINGS_STORAGE_KEY, JSON.stringify(this._data));
             }
         }
         // Execute with delay
@@ -8900,7 +8946,7 @@ class LocalSettingsService {
                 this._$persist = new EventEmitter(true);
                 this._$persist
                     .pipe(debounceTime(2000), // add a delay of 2s
-                filter(() => this._started))
+                filter(() => this.started))
                     .subscribe(() => this.persistLocally(true));
             }
             this._$persist.emit();
@@ -9086,8 +9132,9 @@ const NetworkRefreshTimerPeriod = {
     MOBILE:  1000,
     DESKTOP: 1000
 }*/
-class NetworkService {
+class NetworkService extends StartableService {
     constructor(_document, platform, modalCtrl, cryptoService, storage, settings, cache, http, environment, network, splashScreen, translate, toastController) {
+        super(platform);
         this._document = _document;
         this.platform = platform;
         this.modalCtrl = modalCtrl;
@@ -9101,13 +9148,11 @@ class NetworkService {
         this.splashScreen = splashScreen;
         this.translate = translate;
         this.toastController = toastController;
-        this._started = false;
-        this._subscription = new Subscription();
-        this._listeners = {};
-        this.onStart = new Subject();
         this.onPeerChanges = this.onStart.pipe(map(peer => peer && peer.url), filter(isNotNilOrBlank), distinctUntilChanged());
         this.onNetworkStatusChanges = new BehaviorSubject(null);
         this.onResetNetworkCache = new EventEmitter(true);
+        this._subscription = new Subscription();
+        this._listeners = {};
         this._mobile = this.platform.is('mobile');
         if (this._mobile) {
             this._timerRefreshPeriod = NetworkRefreshTimerPeriod.MOBILE;
@@ -9118,6 +9163,7 @@ class NetworkService {
             this._timerRefreshCondition = () => true; // Always check
         }
         this.resetData();
+        this.onStart.subscribe(() => this.ngOnAfterStart());
         // For DEV only
         this._debug = !environment.production;
     }
@@ -9131,16 +9177,14 @@ class NetworkService {
         // If force offline: return 'none'
         return this._forceOffline && 'none'
             // Else, return device connection type (or unknown)
-            || (this._started && this._deviceConnectionType || 'unknown');
+            || (this.started && this._deviceConnectionType || 'unknown');
     }
     get peer() {
-        return this._peer && this._peer.clone();
+        return this._data && this._data.clone();
     }
     set peer(peer) {
-        this.restart(peer);
-    }
-    get started() {
-        return this._started;
+        this._startingPeer = peer;
+        this.restart();
     }
     /**
      * Register to network event
@@ -9162,78 +9206,6 @@ class NetworkService {
                 return this.addListener(eventType, callback);
         }
     }
-    start(peer) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this._startPromise)
-                return this._startPromise;
-            if (this._started)
-                return;
-            console.info('[network] Starting network...');
-            // Restoring local settings
-            this._startPromise = (!peer && this.restoreLocally() || Promise.resolve(peer))
-                .then((peer) => __awaiter(this, void 0, void 0, function* () {
-                // Make sure to hide the splashscreen, before open the modal
-                if (!peer && this.splashScreen)
-                    this.splashScreen.hide();
-                // No peer in settings: ask user to choose
-                while (!peer) {
-                    console.debug('[network] No peer defined. Asking user to choose a peer.');
-                    peer = yield this.showSelectPeerModal({ allowSelectDownPeer: false });
-                }
-                this._peer = peer;
-                this._started = true;
-                this._startPromise = undefined;
-                this.onStart.next(peer);
-                console.info(`[platform] Starting network [OK] {online: ${this.online}}`);
-            }))
-                .catch((err) => {
-                console.error(err && err.message || err, err);
-                this._started = false;
-                this._startPromise = undefined;
-            })
-                // Wait settings starts, then save peer in settings
-                .then(() => this.settings.ready())
-                .then(() => this.settings.apply({ peerUrl: this._peer.url }))
-                .then(() => this.onDeviceConnectionChanged(this.network && this.network.type || 'unknown'))
-                // Start the refresh timer
-                .then(() => this.startRefreshTimer());
-            // Listen for device network changes
-            if (this.network) {
-                this._subscription.add(this.network.onDisconnect().subscribe(() => this.onDeviceConnectionChanged('none')));
-                this._subscription.add(this.network.onConnect().subscribe(() => this.onDeviceConnectionChanged(this.network.type)));
-            }
-            return this._startPromise;
-        });
-    }
-    ready() {
-        if (this._started)
-            return Promise.resolve();
-        return this.start();
-    }
-    stop() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.resetData();
-            this._started = false;
-            this._startPromise = undefined;
-            // Stop timer if cannot refresh anymore
-            if (this._timerRefreshCondition() === false) {
-                this.stopRefreshTimer();
-            }
-            this._subscription.unsubscribe();
-            this._subscription = new Subscription();
-        });
-    }
-    restart(peer) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this._started) {
-                yield this.stop()
-                    .then(() => this.start(peer));
-            }
-            else {
-                yield this.start(peer);
-            }
-        });
-    }
     tryOnline(opts) {
         return __awaiter(this, void 0, void 0, function* () {
             // If offline mode not forced, and device says there is no connection: skip
@@ -9260,7 +9232,8 @@ class NetworkService {
                     // Disable the offline mode
                     this.setForceOffline(false);
                     // Restart
-                    yield this.restart(peer);
+                    this._startingPeer = peer;
+                    yield this.restart();
                     // Wait a promise, before recheck
                     yield this.emit('beforeTryOnlineFinish', this.online);
                 }
@@ -9288,7 +9261,7 @@ class NetworkService {
                 // Display toast (without await, because not need to wait toast close event)
                 return this.showOfflineToast({ showRetryButton: false });
             }
-            return this._started && online;
+            return this.started && online;
         });
     }
     showOfflineToast(opts) {
@@ -9336,86 +9309,6 @@ class NetworkService {
             return false;
         });
     }
-    /**
-     * Try to restore peer from the local storage
-     */
-    restoreLocally() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // Restore from storage
-            const settingsStr = yield this.storage.get(SETTINGS_STORAGE_KEY);
-            const settings = settingsStr && JSON.parse(settingsStr) || undefined;
-            if (settings && settings.peerUrl) {
-                console.debug(`[network] Use peer {${settings.peerUrl}} (found in the local storage)`);
-                return Peer.parseUrl(settings.peerUrl);
-            }
-            // Else, use default peer in env, if exists
-            if (this.environment.defaultPeer) {
-                return Peer.fromObject(this.environment.defaultPeer);
-            }
-            // Else, if App is hosted, try the web site as a peer
-            const location = this._document && this._document.location;
-            if (location && location.protocol && location.protocol.startsWith('http')) {
-                const hostname = this._document.location.host;
-                const detectedPeer = Peer.parseUrl(`${this._document.location.protocol}${hostname}${this.environment.baseUrl}`);
-                if (yield this.checkPeerAlive(detectedPeer)) {
-                    return detectedPeer;
-                }
-            }
-            return undefined;
-        });
-    }
-    /**
-     * Refresh network state, using a ping to pod
-     */
-    refreshPeerState(opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-        });
-    }
-    /**
-     * Stop to network state
-     *
-     * @protected
-     */
-    stopRefreshTimer() {
-        if (this._timerSubscription) {
-            this._timerSubscription.unsubscribe();
-            this._timerSubscription = undefined;
-        }
-    }
-    /**
-     * Refresh the network state
-     *
-     * @protected
-     */
-    startRefreshTimer() {
-        if (this._timerSubscription)
-            return; // Already running: skip
-        console.info(`[network] Starting refresh timer, every ${this._timerRefreshPeriod}ms...`);
-        let lastInfo;
-        this._timerSubscription = timer(this._timerRefreshPeriod, this._timerRefreshPeriod)
-            .pipe(
-        // Skip some timer event (see constructor)
-        filter(this._timerRefreshCondition), 
-        // Checkin if peer alive
-        tap(() => console.debug('[network] Checking connection to pod...')), mergeMap(() => this.checkPeerAlive(this.peer)), 
-        // Filter to keep only changes
-        filter(info => !!info !== !!lastInfo), tap(info => lastInfo = info), 
-        // Check compatibility
-        mergeMap((info) => this.checkPeerCompatible(info, { showToast: true })))
-            .subscribe(alive => {
-            if (alive && this.offline) {
-                this.setForceOffline(false);
-                // Restart the service (to force re auth)
-                this.restart();
-            }
-            else if (!alive && this.online) {
-                this.setForceOffline(true);
-                // Stop the service
-                this.stop();
-            }
-        });
-        this._timerSubscription.add(() => console.debug('[network] Refresh timer stopped'));
-    }
     /**
      * Check if the peer is alive
      *
@@ -9531,6 +9424,123 @@ class NetworkService {
             });
         });
     }
+    /* -- protected functions -- */
+    ngOnStart() {
+        return __awaiter(this, void 0, void 0, function* () {
+            console.info('[network] Starting network...', this._startingPeer);
+            // Restoring local settings
+            let peer = this._startingPeer || (yield this.restoreLocally());
+            // Make sure to hide the splashscreen, before open the modal
+            if (!peer && this.splashScreen)
+                this.splashScreen.hide();
+            // No peer in settings: ask user to choose
+            while (!peer) {
+                console.debug('[network] No peer defined. Asking user to choose a peer.');
+                peer = yield this.showSelectPeerModal({ allowSelectDownPeer: false });
+            }
+            console.info(`[network] Starting service [OK] {peer: '${peer.url}', online: ${this.online}}`);
+            return peer;
+        });
+    }
+    ngOnAfterStart() {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            // Wait settings starts, then save peer in settings
+            yield this.settings.apply({ peerUrl: this._data.url });
+            this.onDeviceConnectionChanged(((_a = this.network) === null || _a === void 0 ? void 0 : _a.type) || 'unknown');
+            // Start the refresh timer
+            this.startRefreshTimer();
+            // Listen for device network changes
+            if (this.network) {
+                this._subscription.add(this.network.onDisconnect().subscribe(() => this.onDeviceConnectionChanged('none')));
+                this._subscription.add(this.network.onConnect().subscribe(() => this.onDeviceConnectionChanged(this.network.type)));
+            }
+        });
+    }
+    ngOnStop() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.resetData();
+            // Stop timer if cannot refresh anymore
+            if (this._timerRefreshCondition() === false) {
+                this.stopRefreshTimer();
+            }
+            this._subscription.unsubscribe();
+            this._subscription = new Subscription();
+        });
+    }
+    /**
+     * Try to restore peer from the local storage
+     */
+    restoreLocally() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Restore from storage
+            const settingsStr = yield this.storage.get(SETTINGS_STORAGE_KEY);
+            const settings = settingsStr && JSON.parse(settingsStr) || undefined;
+            if (settings && settings.peerUrl) {
+                console.debug(`[network] Use peer {${settings.peerUrl}} (found in the local storage)`);
+                return Peer.parseUrl(settings.peerUrl);
+            }
+            // Else, use default peer in env, if exists
+            if (this.environment.defaultPeer) {
+                return Peer.fromObject(this.environment.defaultPeer);
+            }
+            // Else, if App is hosted, try the web site as a peer
+            const location = this._document && this._document.location;
+            if (location && location.protocol && location.protocol.startsWith('http')) {
+                const hostname = this._document.location.host;
+                const detectedPeer = Peer.parseUrl(`${this._document.location.protocol}${hostname}${this.environment.baseUrl}`);
+                if (yield this.checkPeerAlive(detectedPeer)) {
+                    return detectedPeer;
+                }
+            }
+            return undefined;
+        });
+    }
+    /**
+     * Stop to network state
+     *
+     * @protected
+     */
+    stopRefreshTimer() {
+        if (this._timerSubscription) {
+            this._timerSubscription.unsubscribe();
+            this._timerSubscription = undefined;
+        }
+    }
+    /**
+     * Refresh the network state
+     *
+     * @protected
+     */
+    startRefreshTimer() {
+        if (this._timerSubscription)
+            return; // Already running: skip
+        console.info(`[network] Starting refresh timer, every ${this._timerRefreshPeriod}ms...`);
+        let lastInfo;
+        this._timerSubscription = timer(this._timerRefreshPeriod, this._timerRefreshPeriod)
+            .pipe(
+        // Skip some timer event (see constructor)
+        filter(this._timerRefreshCondition), 
+        // Checkin if peer alive
+        tap(() => console.debug('[network] Checking connection to pod...')), mergeMap(() => this.checkPeerAlive(this.peer)), 
+        // Filter to keep only changes
+        filter(info => !!info !== !!lastInfo), tap(info => lastInfo = info), 
+        // Check compatibility
+        mergeMap((info) => this.checkPeerCompatible(info, { showToast: true })))
+            .subscribe(alive => {
+            if (alive && this.offline) {
+                this.setForceOffline(false);
+                // Restart the service (to force re auth)
+                this.restart();
+            }
+            else if (!alive && this.online) {
+                this.setForceOffline(true);
+                // Stop the service
+                this.stop();
+            }
+        });
+        this._timerSubscription.add(() => console.debug('[network] Refresh timer stopped'));
+    }
     get(path, opts) {
         return __awaiter(this, void 0, void 0, function* () {
             let uri = path;
@@ -9582,7 +9592,7 @@ class NetworkService {
         }
     }
     resetData() {
-        this._peer = null;
+        this._data = null;
     }
     /**
      * Get default peers, from environment
@@ -9599,7 +9609,7 @@ class NetworkService {
     addListener(name, callback) {
         this._listeners[name] = this._listeners[name] || [];
         this._listeners[name].push(callback);
-        // When unsubcribe, remove from the listener
+        // When unsubscribe, remove from the listener
         return new Subscription(() => {
             const index = this._listeners[name].indexOf(callback);
             if (index !== -1) {
@@ -10142,31 +10152,32 @@ class EntityStore {
 }
 
 const APP_LOCAL_STORAGE_TYPE_POLICIES = new InjectionToken('localStorageTypePolicies');
-class EntitiesStorage {
+;
+class EntitiesStorage extends StartableService {
     constructor(platform, progressBarService, storage, environment, typePolicies) {
+        super(platform);
         this.platform = platform;
         this.progressBarService = progressBarService;
         this.storage = storage;
         this.environment = environment;
-        this._started = false;
         this._subscription = new Subscription();
-        this._stores = {};
         this._$save = new EventEmitter(true);
         this._dirty = false;
         this._saving = false;
-        this.onStart = new Subject();
         this._typePolicies = typePolicies || {};
+        this._saveTimerPeriod = environment.storageSavePeriodMs || 10000 /* = 10s */;
+        this._data = {};
         // For DEV only
         this._debug = !environment.production;
         if (this._debug)
             console.debug('[entities-storage] Creating service');
     }
     get dirty() {
-        return this._dirty || Object.entries(this._stores).find(([_, store]) => store.dirty) !== undefined;
+        return this._dirty || Object.values(this._data).some(store => store.dirty);
     }
     watchAll(entityName, variables, opts) {
         // Make sure store is ready
-        if (!this._started) {
+        if (!this.started) {
             return defer(() => this.ready())
                 .pipe(switchMap(() => this.watchAll(entityName, variables, opts))); // Loop
         }
@@ -10180,7 +10191,7 @@ class EntitiesStorage {
     loadAll(entityName, variables, opts) {
         return __awaiter(this, void 0, void 0, function* () {
             // Make sure store is ready
-            if (!this._started)
+            if (!this.started)
                 yield this.ready();
             try {
                 this.progressBarService.increase();
@@ -10243,7 +10254,8 @@ class EntitiesStorage {
         return __awaiter(this, void 0, void 0, function* () {
             if (!entity)
                 return; // skip
-            yield this.ready();
+            if (!this.started)
+                yield this.ready();
             try {
                 this.progressBarService.increase();
                 this._dirty = true;
@@ -10263,7 +10275,8 @@ class EntitiesStorage {
         return __awaiter(this, void 0, void 0, function* () {
             if (isEmptyArray(entities) && (!opts || opts.reset !== true))
                 return entities; // Skip (nothing to save)
-            yield this.ready();
+            if (!this.started)
+                yield this.ready();
             try {
                 this.progressBarService.increase();
                 this._dirty = true;
@@ -10279,13 +10292,15 @@ class EntitiesStorage {
         return __awaiter(this, void 0, void 0, function* () {
             if (!entity)
                 return undefined; // skip
-            yield this.ready();
+            if (!this.started)
+                yield this.ready();
             return this.deleteById(entity.id, Object.assign(Object.assign({}, opts), { entityName: opts && opts.entityName || this.detectEntityName(entity) }));
         });
     }
     deleteById(id, opts) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.ready();
+            if (!this.started)
+                yield this.ready();
             if (!opts || isNilOrBlank(opts.entityName))
                 throw new Error('Missing argument \'opts\' or \'entityName\'');
             //if (id >= 0) throw new Error('Invalid id a local entity (not a negative number): ' + id);
@@ -10311,7 +10326,8 @@ class EntitiesStorage {
     }
     deleteMany(ids, opts) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.ready();
+            if (!this.started)
+                yield this.ready();
             if (!opts || isNilOrBlank(opts.entityName))
                 throw new Error('Missing argument \'opts\' or \'opts.entityName\'');
             try {
@@ -10339,7 +10355,8 @@ class EntitiesStorage {
         return __awaiter(this, void 0, void 0, function* () {
             if (!entity)
                 return undefined; // skip
-            yield this.ready();
+            if (!this.started)
+                yield this.ready();
             return this.deleteFromTrashById(entity.id, Object.assign(Object.assign({}, opts), { entityName: opts && opts.entityName || this.detectEntityName(entity) }));
         });
     }
@@ -10355,7 +10372,8 @@ class EntitiesStorage {
         return __awaiter(this, void 0, void 0, function* () {
             if (!entity)
                 return undefined; // skip
-            yield this.ready();
+            if (!this.started)
+                yield this.ready();
             const entityName = opts && opts.entityName || this.detectEntityName(entity);
             // Delete entity by id, if exists
             const entityStore = this.getEntityStore(entityName);
@@ -10372,7 +10390,8 @@ class EntitiesStorage {
     }
     moveManyToTrash(ids, opts) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.ready();
+            if (!this.started)
+                yield this.ready();
             if (!opts || isNilOrBlank(opts.entityName))
                 throw new Error('Missing argument \'opts.entityName\'');
             const entityStore = this.getEntityStore(opts.entityName, { create: false });
@@ -10399,7 +10418,8 @@ class EntitiesStorage {
         return __awaiter(this, void 0, void 0, function* () {
             if (!entity)
                 return undefined; // skip
-            yield this.ready();
+            if (!this.started)
+                yield this.ready();
             const entityName = opts && opts.entityName || this.detectEntityName(entity);
             const trashName = EntitiesStorage.TRASH_PREFIX + entityName;
             this.getEntityStore(trashName).save(entity, opts);
@@ -10409,7 +10429,8 @@ class EntitiesStorage {
     }
     clearTrash(entityName) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.ready();
+            if (!this.started)
+                yield this.ready();
             const trashName = EntitiesStorage.TRASH_PREFIX + entityName;
             const entityStore = this.getEntityStore(trashName, { create: false });
             if (!entityStore)
@@ -10420,41 +10441,29 @@ class EntitiesStorage {
         });
     }
     persist() {
-        if (this._dirty) {
-            return this.storeLocally();
-        }
-        return Promise.resolve();
-    }
-    ready() {
-        if (this._started)
-            return Promise.resolve();
-        return this.start();
+        if (this._dirty) {
+            return this.storeLocally();
+        }
+        return Promise.resolve();
     }
-    start() {
-        if (this._startPromise)
-            return this._startPromise;
-        if (this._started)
-            return Promise.resolve();
-        const now = Date.now();
-        console.info(`[entities-storage] Starting entity storage...`);
-        // Restore sequences
-        this._startPromise = this.restoreLocally()
-            .then(() => {
+    ngOnStart() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const now = Date.now();
+            console.info(`[entities-storage] Starting entity storage...`);
+            // Restore sequences
+            yield this.restoreLocally();
             // Start a save timer
-            this._subscription.add(merge(this._$save, timer(2000, 10000))
-                .pipe(throttleTime(10000))
+            this._subscription.add(merge(this._$save, timer(this._saveTimerPeriod, this._saveTimerPeriod))
+                .pipe(
+            // Avoid to many call (e.g. when $save AND timer are triggered
+            throttleTime(this._saveTimerPeriod))
                 .subscribe(() => this.storeLocally()));
-            this._started = true;
-            this._startPromise = undefined;
             console.info(`[entities-storage] Starting [OK] in ${Date.now() - now}ms`);
-            // Emit event
-            this.onStart.next();
+            return this._data;
         });
-        return this._startPromise;
     }
-    stop() {
+    ngOnStop() {
         return __awaiter(this, void 0, void 0, function* () {
-            this._started = false;
             this._subscription.unsubscribe();
             this._subscription = new Subscription();
             if (this.dirty) {
@@ -10462,22 +10471,15 @@ class EntitiesStorage {
             }
         });
     }
-    restart() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this._started)
-                yield this.stop();
-            yield this.start();
-        });
-    }
     /* -- protected methods -- */
     getEntityStore(name, opts) {
-        let store = this._stores[name];
+        let store = this._data[name];
         if (!store && (!opts || opts.create !== false)) {
             if (this._debug)
                 console.debug(`[entities-storage] Creating store ${name}`);
             const typePolicy = this._typePolicies[name];
             store = new EntityStore(name, this.storage, typePolicy);
-            this._stores[name] = store;
+            this._data[name] = store;
         }
         return store;
     }
@@ -10520,12 +10522,12 @@ class EntitiesStorage {
             this._saving = true;
             this._dirty = false;
             this.progressBarService.increase();
-            const entityNames = this._stores && Object.keys(this._stores) || [];
+            const entityNames = this._data && Object.keys(this._data) || [];
             const now = Date.now();
             if (this._debug)
                 console.debug('[entities-storage] Persisting...');
             let currentEntityName;
-            return concat(...entityNames.map(entityName => defer(() => {
+            return chainPromises(entityNames.map(entityName => () => {
                 currentEntityName = entityName;
                 const entityStore = this.getEntityStore(entityName, { create: false });
                 if (!entityStore) {
@@ -10539,18 +10541,20 @@ class EntitiesStorage {
                         entityNames.splice(entityNames.findIndex(e => e === entityName), 1);
                     }
                 });
-            })), defer(() => {
+            }))
+                .then(() => {
                 currentEntityName = undefined;
                 return isEmptyArray(entityNames) ?
                     this.storage.remove(ENTITIES_STORAGE_KEY_PREFIX) :
                     this.storage.set(ENTITIES_STORAGE_KEY_PREFIX, entityNames);
-            }), defer(() => {
+            })
+                .then(() => {
                 if (this._debug)
                     console.debug(`[entities-storage] Persisting [OK] ${entityNames.length} stores saved in ${Date.now() - now}ms...`);
                 this._saving = false;
                 this.progressBarService.decrease();
-            }))
-                .pipe(catchError(err => {
+            })
+                .catch(err => {
                 this._saving = false;
                 this.progressBarService.decrease();
                 if (currentEntityName) {
@@ -10559,8 +10563,8 @@ class EntitiesStorage {
                 else {
                     console.error(`[entities-storage] Error while persisting: ${err && err.message || err}`, err);
                 }
-                return err;
-            })).toPromise();
+                throw err;
+            });
         });
     }
 }
@@ -10574,7 +10578,7 @@ EntitiesStorage.ctorParameters = () => [
     { type: Platform },
     { type: ProgressBarService },
     { type: Storage },
-    { type: undefined, decorators: [{ type: Inject, args: [ENVIRONMENT,] }] },
+    { type: Environment, decorators: [{ type: Inject, args: [ENVIRONMENT,] }] },
     { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [APP_LOCAL_STORAGE_TYPE_POLICIES,] }] }
 ];
 
@@ -11045,8 +11049,9 @@ function restoreTrackedQueries(opts) {
 }
 
 const APP_GRAPHQL_TYPE_POLICIES = new InjectionToken('graphqlTypePolicies');
-class GraphqlService {
+class GraphqlService extends StartableService {
     constructor(platform, apollo, httpLink, network, storage, cryptoService, environment, typePolicies) {
+        super(platform); // Wait network
         this.platform = platform;
         this.apollo = apollo;
         this.httpLink = httpLink;
@@ -11055,21 +11060,12 @@ class GraphqlService {
         this.cryptoService = cryptoService;
         this.environment = environment;
         this.typePolicies = typePolicies;
-        this._started = false;
         this._subscription = new Subscription();
         this.connectionParams = {};
         this.onNetworkError = new Subject();
         this.customErrors = {};
-        this.onStart = new Subject();
         this._debug = !environment.production;
         this._defaultFetchPolicy = environment.apolloFetchPolicy;
-        // Restart if network restart
-        this.network.on('start', () => this.restart());
-        // Clear cache
-        this.network.on('resetCache', () => __awaiter(this, void 0, void 0, function* () {
-            yield this.ready();
-            yield this.clearCache();
-        }));
         // Listen network status
         this._networkStatusChanged$ = network.onNetworkStatusChanges
             .pipe(filter(isNotNil), distinctUntilChanged());
@@ -11078,11 +11074,8 @@ class GraphqlService {
             .pipe(throttleTime(300), filter(() => this.network.online), mergeMap(() => this.network.checkPeerAlive()), filter(alive => !alive))
             .subscribe(() => this.network.setForceOffline(true, { showToast: true }));
     }
-    get started() {
-        return this._started;
-    }
     get client() {
-        return this.apollo.client;
+        return this._data;
     }
     get cache() {
         return this.apollo.client.cache;
@@ -11090,33 +11083,6 @@ class GraphqlService {
     get defaultFetchPolicy() {
         return this._defaultFetchPolicy;
     }
-    ready() {
-        if (this._started)
-            return Promise.resolve();
-        return this.start();
-    }
-    start() {
-        if (this._startPromise)
-            return this._startPromise;
-        if (this._started)
-            return Promise.resolve();
-        console.info('[graphql] Starting graphql...');
-        // Waiting for network service
-        this._startPromise = this.network.ready()
-            .then(() => this.initApollo())
-            .then(() => {
-            this._started = true;
-            this._startPromise = undefined;
-            // Emit event
-            this.onStart.next();
-            console.info('[graphql] Starting graphql [OK]');
-        })
-            .catch((err) => {
-            console.error(err && err.message || err, err);
-            this._startPromise = undefined;
-        });
-        return this._startPromise;
-    }
     setAuthToken(token) {
         if (token) {
             console.debug('[graphql] Apply token authentication to headers');
@@ -11149,22 +11115,22 @@ class GraphqlService {
      */
     addResolver(resolvers) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this._started) {
-                this.onStart.toPromise().then(() => this.addResolver(resolvers)); // Loop
-            }
-            const client = this.apollo.getClient();
-            client.addResolvers(resolvers);
+            if (!this.started)
+                yield this.ready();
+            this.apollo.client.addResolvers(resolvers);
         });
     }
     query(opts) {
         return __awaiter(this, void 0, void 0, function* () {
+            if (!this.started)
+                yield this.ready();
             let res;
             try {
-                res = yield (yield this.getApollo()).query({
+                res = yield this.client.query({
                     query: opts.query,
                     variables: opts.variables,
                     fetchPolicy: opts.fetchPolicy || this._defaultFetchPolicy || undefined
-                }).toPromise();
+                });
             }
             catch (err) {
                 res = this.toApolloError(err, opts.error);
@@ -11504,10 +11470,11 @@ class GraphqlService {
     }
     clearCache(client) {
         return __awaiter(this, void 0, void 0, function* () {
-            client = (client || this.apollo.client);
+            client = (client || this.client);
             if (client) {
-                const now = this._debug && Date.now();
                 console.info('[graphql] Clearing Apollo client\'s cache... ');
+                const now = this._debug && Date.now();
+                // Clearing the cache
                 yield client.cache.reset();
                 if (this._debug)
                     console.debug(`[graphql] Apollo client's cache cleared, in ${Date.now() - now}ms`);
@@ -11518,8 +11485,10 @@ class GraphqlService {
         this.customErrors = Object.assign(Object.assign({}, this.customErrors), error);
     }
     /* -- protected methods -- */
-    initApollo() {
+    ngOnStart() {
         return __awaiter(this, void 0, void 0, function* () {
+            yield this.network.ready();
+            console.info('[graphql] Starting graphql...');
             const mobile = this.platform.is('mobile') || this.platform.is('mobileweb');
             const enableTrackMutationQueries = !mobile;
             const peer = this.network.peer;
@@ -11594,9 +11563,8 @@ class GraphqlService {
                     const queueLink = new QueueLink();
                     this._subscription.add(this._networkStatusChanged$
                         .subscribe(type => {
-                        const offline = type === 'none';
                         // Network is offline: start buffering into queue
-                        if (offline) {
+                        if (type === 'none') {
                             console.info('[graphql] offline mode: enable mutations buffer');
                             queueLink.close();
                         }
@@ -11655,24 +11623,20 @@ class GraphqlService {
                     console.error('[graphql] Failed to restore tracked queries from storage: ' + (err && err.message || err), err);
                 }
             }
+            // Listen for network restart
+            this._subscription.add(this.network.on('start', () => this.restart()));
+            // Listen for clear cache request, from network
+            this._subscription.add(this.network.on('resetCache', () => this.clearCache()));
+            console.info('[graphql] Starting graphql [OK]');
+            return client;
         });
     }
-    stop() {
+    ngOnStop() {
         return __awaiter(this, void 0, void 0, function* () {
             console.info('[graphql] Stopping graphql service...');
             this._subscription.unsubscribe();
             this._subscription = new Subscription();
             yield this.resetClient();
-            this._started = false;
-            this._startPromise = undefined;
-        });
-    }
-    restart() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.started) {
-                return this.stop().then(() => this.start());
-            }
-            return this.start();
         });
     }
     resetClient(client) {
@@ -11768,15 +11732,6 @@ class GraphqlService {
         }
         return undefined;
     }
-    getApollo() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this._started) {
-                console.debug('[graphql] Waiting apollo client... ');
-                yield this.onStart.toPromise();
-            }
-            return this.apollo;
-        });
-    }
 }
 GraphqlService.ɵprov = i0.ɵɵdefineInjectable({ factory: function GraphqlService_Factory() { return new GraphqlService(i0.ɵɵinject(i1$4.Platform), i0.ɵɵinject(i2$3.Apollo), i0.ɵɵinject(i3$2.HttpLink), i0.ɵɵinject(NetworkService), i0.ɵɵinject(i3$1.Storage), i0.ɵɵinject(CryptoService), i0.ɵɵinject(ENVIRONMENT), i0.ɵɵinject(APP_GRAPHQL_TYPE_POLICIES, 8)); }, token: GraphqlService, providedIn: "root" });
 GraphqlService.decorators = [
@@ -12120,7 +12075,12 @@ class AccountService extends BaseGraphqlService {
         this.storage = storage;
         this.file = file;
         this.environment = environment;
-        this.data = {
+        this.onLogin = new Subject();
+        this.onLogout = new Subject();
+        this.onChange = new Subject();
+        this.onAuthTokenChange = new Subject();
+        this.onAuthBasicChange = new Subject();
+        this._data = {
             loaded: false,
             keypair: null,
             authToken: null,
@@ -12134,11 +12094,6 @@ class AccountService extends BaseGraphqlService {
         this._started = false;
         this._$additionalFields = new BehaviorSubject([]);
         this._tokenType$ = new BehaviorSubject(undefined);
-        this.onLogin = new Subject();
-        this.onLogout = new Subject();
-        this.onChange = new Subject();
-        this.onAuthTokenChange = new Subject();
-        this.onAuthBasicChange = new Subject();
         this._debug = !environment.production;
         if (this._debug)
             console.debug('[account-service] Creating service');
@@ -12146,7 +12101,7 @@ class AccountService extends BaseGraphqlService {
         // Send auth token to the graphql layer, when changed
         this.onAuthTokenChange.subscribe((token) => this.graphql.setAuthToken(token));
         this.onAuthBasicChange.subscribe((basic) => this.graphql.setAuthBasic(basic));
-        // Listen network restart
+        // Listen graphql start (or restart)
         this.graphql.onStart.subscribe(() => __awaiter(this, void 0, void 0, function* () {
             if (!this._started) {
                 this.ready();
@@ -12168,19 +12123,19 @@ class AccountService extends BaseGraphqlService {
         }));
     }
     get account() {
-        return this.data.loaded ? this.data.account : undefined;
+        return this._data.loaded ? this._data.account : undefined;
     }
     get person() {
-        if (this.data.loaded && !this.data.person) {
-            this.data.person = this.data.loaded ? this.data.account.asPerson() : undefined;
+        if (this._data.loaded && !this._data.person) {
+            this._data.person = this._data.loaded ? this._data.account.asPerson() : undefined;
         }
-        return this.data.person;
+        return this._data.person;
     }
     get department() {
-        if (this.data.loaded && !this.data.department) {
-            this.data.department = this.data.loaded ? this.data.account.asPerson().department : undefined;
+        if (this._data.loaded && !this._data.department) {
+            this._data.department = this._data.loaded ? this._data.account.asPerson().department : undefined;
         }
-        return this.data.department;
+        return this._data.department;
     }
     get tokenType() {
         return this._tokenType$.value;
@@ -12190,28 +12145,17 @@ class AccountService extends BaseGraphqlService {
             console.info('[account] Using authentication token type: ' + value);
             this._tokenType$.next(value);
             // Reset values
-            this.data.authToken = undefined;
+            this._data.authToken = undefined;
             this.onAuthTokenChange.next(undefined);
-            this.data.authBasic = undefined;
+            this._data.authBasic = undefined;
             this.onAuthBasicChange.next(undefined);
         }
     }
-    resetData() {
-        this.data.loaded = false;
-        this.data.keypair = null;
-        this.data.authToken = null;
-        this.data.authBasic = null;
-        this.data.pubkey = null;
-        this.data.mainProfile = null;
-        this.data.account = new Account();
-        this.data.person = null;
-        this.data.department = null;
-    }
     start() {
         if (this._startPromise)
             return this._startPromise;
         if (this._started)
-            return Promise.resolve();
+            return Promise.resolve(this.account);
         // Restoring local settings
         this._startPromise = Promise.all([
             this.settings.ready(),
@@ -12222,6 +12166,7 @@ class AccountService extends BaseGraphqlService {
             .then(() => {
             this._started = true;
             this._startPromise = undefined;
+            return this.account;
         });
         return this._startPromise;
     }
@@ -12233,8 +12178,8 @@ class AccountService extends BaseGraphqlService {
             if (this._started || this._startPromise) {
                 this._started = false;
                 this._startPromise = undefined;
-                const hadAuthToken = this.data.authToken && true;
-                const hadAuthBasic = this.data.authBasic && true;
+                const hadAuthToken = this._data.authToken && true;
+                const hadAuthBasic = this._data.authBasic && true;
                 const hadAuth = hadAuthToken || hadAuthBasic;
                 this.resetData();
                 if (hadAuth) {
@@ -12256,35 +12201,35 @@ class AccountService extends BaseGraphqlService {
     }
     ready() {
         if (this._started)
-            return Promise.resolve();
+            return Promise.resolve(this.account);
         return this.start();
     }
     isLogin() {
-        return !!(this.data.pubkey && this.data.loaded);
+        return !!(this._data.pubkey && this._data.loaded);
     }
     isAuth() {
-        return !!(this.data.pubkey && this.data.keypair && this.data.keypair.secretKey);
+        return !!(this._data.pubkey && this._data.keypair && this._data.keypair.secretKey);
     }
     hasMinProfile(userProfile) {
         // should be login, and status ENABLE or TEMPORARY
-        if (!this.data.account || !this.data.account.pubkey ||
-            (this.data.account.statusId !== StatusIds.ENABLE && this.data.account.statusId !== StatusIds.TEMPORARY)) {
+        if (!this._data.account || !this._data.account.pubkey ||
+            (this._data.account.statusId !== StatusIds.ENABLE && this._data.account.statusId !== StatusIds.TEMPORARY)) {
             return false;
         }
-        return PersonUtils.hasUpperOrEqualsProfile(this.data.account.profiles, userProfile);
+        return PersonUtils.hasUpperOrEqualsProfile(this._data.account.profiles, userProfile);
     }
     hasExactProfile(label) {
         // should be login, and status ENABLE or TEMPORARY
-        if (!this.data.account || !this.data.account.pubkey ||
-            (this.data.account.statusId !== StatusIds.ENABLE && this.data.account.statusId !== StatusIds.TEMPORARY))
+        if (!this._data.account || !this._data.account.pubkey ||
+            (this._data.account.statusId !== StatusIds.ENABLE && this._data.account.statusId !== StatusIds.TEMPORARY))
             return false;
-        return this.data.account.profiles.some(profile => profile === label);
+        return this._data.account.profiles.some(profile => profile === label);
     }
     hasProfileAndIsEnable(userProfile) {
         // should be login, and status ENABLE
-        if (!this.data.account || !this.data.account.pubkey || this.data.account.statusId !== StatusIds.ENABLE)
+        if (!this._data.account || !this._data.account.pubkey || this._data.account.statusId !== StatusIds.ENABLE)
             return false;
-        return PersonUtils.hasUpperOrEqualsProfile(this.data.account.profiles, userProfile);
+        return PersonUtils.hasUpperOrEqualsProfile(this._data.account.profiles, userProfile);
     }
     isAdmin() {
         return this.hasProfileAndIsEnable('ADMIN');
@@ -12304,11 +12249,11 @@ class AccountService extends BaseGraphqlService {
     }
     isOnlyGuest() {
         // Should be login, and status ENABLE or TEMPORARY
-        if (!this.data.account || !this.data.account.pubkey ||
-            (this.data.account.statusId !== StatusIds.ENABLE && this.data.account.statusId !== StatusIds.TEMPORARY))
+        if (!this._data.account || !this._data.account.pubkey ||
+            (this._data.account.statusId !== StatusIds.ENABLE && this._data.account.statusId !== StatusIds.TEMPORARY))
             return false;
         // Profile less then user
-        return !PersonUtils.hasUpperOrEqualsProfile(this.data.account.profiles, 'USER');
+        return !PersonUtils.hasUpperOrEqualsProfile(this._data.account.profiles, 'USER');
     }
     canUserWriteDataForDepartment(recorderDepartment) {
         if (ReferentialUtils.isEmpty(recorderDepartment)) {
@@ -12317,17 +12262,17 @@ class AccountService extends BaseGraphqlService {
             return this.isAdmin();
         }
         // Should be login, and status ENABLE
-        if (!this.data.account || !this.data.account.pubkey || this.data.account.statusId !== StatusIds.ENABLE)
+        if (!this._data.account || !this._data.account.pubkey || this._data.account.statusId !== StatusIds.ENABLE)
             return false;
-        if (!this.data.account.department || !this.data.account.department.id) {
+        if (!this._data.account.department || !this._data.account.department.id) {
             console.warn('User account has no department ! Unable to check write right against recorderDepartment');
             return false;
         }
         // Same recorder department: OK, user can write
-        if (this.data.account.department.id === recorderDepartment.id)
+        if (this._data.account.department.id === recorderDepartment.id)
             return true;
         // Else, check if supervisor (or more)
-        return PersonUtils.hasUpperOrEqualsProfile(this.data.account.profiles, 'SUPERVISOR');
+        return PersonUtils.hasUpperOrEqualsProfile(this._data.account.profiles, 'SUPERVISOR');
     }
     register(data) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -12338,7 +12283,7 @@ class AccountService extends BaseGraphqlService {
                 throw new Error('Missing required username or password');
             if (this._debug)
                 console.debug('[account] Register new user account...', data.account);
-            this.data.loaded = false;
+            this._data.loaded = false;
             const now = Date.now();
             try {
                 const keypair = yield this.cryptoService.scryptKeypair(data.username, data.password);
@@ -12348,22 +12293,22 @@ class AccountService extends BaseGraphqlService {
                 data.account.settings.locale = this.settings.locale;
                 data.account.settings.latLongFormat = this.settings.latLongFormat;
                 data.account.department.id = data.account.department.id || this.environment.defaultDepartmentId;
-                this.data.keypair = keypair;
+                this._data.keypair = keypair;
                 const account = yield this.saveRemotely(data.account, keypair);
                 // Default values
                 account.avatar = account.avatar || (this.environment.baseUrl + DEFAULT_AVATAR_IMAGE);
-                this.data.mainProfile = PersonUtils.getMainProfile(account.profiles);
-                this.data.account = account;
-                this.data.pubkey = account.pubkey;
+                this._data.mainProfile = PersonUtils.getMainProfile(account.profiles);
+                this._data.account = account;
+                this._data.pubkey = account.pubkey;
                 // Try to auth on pod
                 yield this.authenticate(data);
-                this.data.loaded = true;
+                this._data.loaded = true;
                 yield this.saveLocally();
                 console.debug(`[account] Account successfully registered in ${Date.now() - now}ms`);
                 // Emit events
-                this.onLogin.next(this.data.account);
-                this.onChange.next(this.data.account);
-                return this.data.account;
+                this.onLogin.next(this._data.account);
+                this.onChange.next(this._data.account);
+                return this._data.account;
             }
             catch (error) {
                 console.error(error && error.message || error);
@@ -12379,20 +12324,20 @@ class AccountService extends BaseGraphqlService {
             // Basic auth
             if (tokenType === 'basic' || tokenType === 'basic-and-token') {
                 // Generate the authBasic, if used
-                if (!this.data.authBasic) {
+                if (!this._data.authBasic) {
                     // Skip if token already provided
-                    if (!(this.data.authToken && tokenType === 'basic-and-token')) {
+                    if (!(this._data.authToken && tokenType === 'basic-and-token')) {
                         if (!data || !data.username || !data.password)
                             throw new Error('Missing username and password');
-                        this.data.authBasic = this.cryptoService.encodeBase64(`${data.username}:${data.password}`);
+                        this._data.authBasic = this.cryptoService.encodeBase64(`${data.username}:${data.password}`);
                     }
                 }
-                this.onAuthBasicChange.next(this.data.authBasic);
+                this.onAuthBasicChange.next(this._data.authBasic);
             }
             // Generate the authToken, if used
             if (tokenType === 'token' || tokenType === 'basic-and-token') {
                 try {
-                    this.data.authToken = yield this.authenticateAndGetToken(this.data.authToken);
+                    this._data.authToken = yield this.authenticateAndGetToken(this._data.authToken);
                 }
                 catch (error) {
                     // Never authenticate, or not ready for offline mode => exit
@@ -12403,7 +12348,7 @@ class AccountService extends BaseGraphqlService {
             }
             // Forget authBasic, to switch to authToken
             if (tokenType === 'basic-and-token') {
-                this.data.authBasic = undefined;
+                this._data.authBasic = undefined;
                 this.onAuthBasicChange.next(undefined);
             }
         });
@@ -12423,18 +12368,18 @@ class AccountService extends BaseGraphqlService {
                 throw { code: ErrorCodes$2.UNKNOWN_ERROR, message: 'ERROR.SCRYPT_ERROR' };
             }
             // Store pubkey+keypair
-            this.data.pubkey = Base58.encode(keypair.publicKey);
-            this.data.keypair = keypair;
+            this._data.pubkey = Base58.encode(keypair.publicKey);
+            this._data.keypair = keypair;
             // Try to load previous token
             let previousToken = yield this.storage.get(TOKEN_STORAGE_KEY);
-            previousToken = previousToken && previousToken.startsWith(this.data.pubkey) && previousToken || null;
+            previousToken = previousToken && previousToken.startsWith(this._data.pubkey) && previousToken || null;
             // Offline mode
             const offline = this.settings.hasOfflineFeature() && (this.network.offline || data.offline === true);
             if (offline) {
-                this.data.authToken = previousToken;
+                this._data.authToken = previousToken;
                 // Make sure network if set as offline
                 this.network.setForceOffline(true, { showToast: false });
-                console.info(`[account] Login [OK] {pubkey: ${this.data.pubkey.substr(0, 8)}}, {offline: true}`);
+                console.info(`[account] Login [OK] {pubkey: ${this._data.pubkey.substr(0, 8)}}, {offline: true}`);
             }
             // Online mode: try to auth on pod
             else {
@@ -12484,14 +12429,14 @@ class AccountService extends BaseGraphqlService {
                 throw error;
             }
             // Emit event to observers
-            this.onLogin.next(this.data.account);
-            this.onChange.next(this.data.account);
-            return this.data.account;
+            this.onLogin.next(this._data.account);
+            this.onChange.next(this._data.account);
+            return this._data.account;
         });
     }
     refresh() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this.data.pubkey)
+            if (!this._data.pubkey)
                 throw new Error('User not logged');
             if (this.network.offline)
                 throw new Error('Cannot check account in offline mode');
@@ -12499,9 +12444,9 @@ class AccountService extends BaseGraphqlService {
             yield this.saveLocally();
             console.debug('[account] Successfully reload account');
             // Emit login event to subscribers
-            this.onLogin.next(this.data.account);
-            this.onChange.next(this.data.account);
-            return this.data.account;
+            this.onLogin.next(this._data.account);
+            this.onChange.next(this._data.account);
+            return this._data.account;
         });
     }
     /**
@@ -12511,29 +12456,29 @@ class AccountService extends BaseGraphqlService {
      */
     save(account) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this.data.pubkey)
+            if (!this._data.pubkey)
                 return Promise.reject('User not logged');
-            if (this.data.pubkey !== account.pubkey)
+            if (this._data.pubkey !== account.pubkey)
                 return Promise.reject('Not user account');
-            account = yield this.saveRemotely(account, this.data.keypair);
+            account = yield this.saveRemotely(account, this._data.keypair);
             // Set defaults
             account.avatar = account.avatar || (this.environment.baseUrl + DEFAULT_AVATAR_IMAGE);
-            this.data.mainProfile = PersonUtils.getMainProfile(account.profiles);
-            this.data.account = account;
-            this.data.loaded = true;
+            this._data.mainProfile = PersonUtils.getMainProfile(account.profiles);
+            this._data.account = account;
+            this._data.loaded = true;
             // Save locally (in storage)
             yield this.saveLocally();
             // Send event
-            this.onLogin.next(this.data.account);
-            this.onChange.next(this.data.account);
-            return this.data.account;
+            this.onLogin.next(this._data.account);
+            this.onChange.next(this._data.account);
+            return this._data.account;
         });
     }
     logout() {
         return __awaiter(this, void 0, void 0, function* () {
-            const hadAuthToken = this.data.authToken && true;
-            const hadAuthBasic = this.data.authBasic && true;
-            const pubkey = this.data && this.data.pubkey;
+            const hadAuthToken = this._data.authToken && true;
+            const hadAuthBasic = this._data.authBasic && true;
+            const pubkey = this._data && this._data.pubkey;
             this.resetData();
             if (!this.settings.hasOfflineFeature()) {
                 // Remove all data from the local storage
@@ -12586,9 +12531,9 @@ class AccountService extends BaseGraphqlService {
             if (offline) {
                 json = yield this.storage.get(ACCOUNT_STORAGE_KEY);
                 json = json && (typeof json === 'string') && JSON.parse(json) || json;
-                json = json && this.data.pubkey && (json.pubkey === this.data.pubkey) && json || null;
-                if (!json && this.data.pubkey) {
-                    json = yield this.storage.get(ACCOUNT_STORAGE_KEY + '#' + this.data.pubkey);
+                json = json && this._data.pubkey && (json.pubkey === this._data.pubkey) && json || null;
+                if (!json && this._data.pubkey) {
+                    json = yield this.storage.get(ACCOUNT_STORAGE_KEY + '#' + this._data.pubkey);
                     json = json && (typeof json === 'string') && JSON.parse(json) || json;
                 }
             }
@@ -12683,7 +12628,7 @@ class AccountService extends BaseGraphqlService {
         });
     }
     listenChanges() {
-        if (!this.data.pubkey)
+        if (!this._data.pubkey)
             return Subscription.EMPTY;
         const self = this;
         console.debug('[account] [WS] Listening account changes');
@@ -12697,34 +12642,30 @@ class AccountService extends BaseGraphqlService {
                 message: 'ERROR.ACCOUNT.SUBSCRIBE_ACCOUNT_ERROR'
             }
         }).subscribe({
-            next({ data }) {
+            next: ({ data }) => __awaiter(this, void 0, void 0, function* () {
                 var _a;
-                return __awaiter(this, void 0, void 0, function* () {
-                    if (!data)
-                        return;
-                    const existingUpdateDate = toDateISOString((_a = self.data.account) === null || _a === void 0 ? void 0 : _a.updateDate);
-                    if (existingUpdateDate !== data.updateDate) {
-                        console.debug(`[account] [WS] Detected update on {${data.updateDate}}`);
-                        yield self.refresh();
-                    }
-                });
-            },
-            error(err) {
-                return __awaiter(this, void 0, void 0, function* () {
-                    if (err && +err.code === ServerErrorCodes.NOT_FOUND) {
-                        console.info('[account] Account not exists anymore: force user to logout...', err);
-                        yield self.logout();
-                    }
-                    else if (err && +err.code === ServerErrorCodes.UNAUTHORIZED) {
-                        console.info('[account] Account not authorized: force user to logout...', err);
-                        yield self.logout();
-                    }
-                    else {
-                        console.warn('[account] [WS] Received error:', err);
-                    }
-                });
-            },
-            complete() {
+                if (!data)
+                    return;
+                const existingUpdateDate = toDateISOString((_a = self._data.account) === null || _a === void 0 ? void 0 : _a.updateDate);
+                if (existingUpdateDate !== data.updateDate) {
+                    console.debug(`[account] [WS] Detected update on {${data.updateDate}}`);
+                    yield self.refresh();
+                }
+            }),
+            error: (err) => __awaiter(this, void 0, void 0, function* () {
+                if (err && +err.code === ServerErrorCodes.NOT_FOUND) {
+                    console.info('[account] Account not exists anymore: force user to logout...', err);
+                    yield self.logout();
+                }
+                else if (err && +err.code === ServerErrorCodes.UNAUTHORIZED) {
+                    console.info('[account] Account not authorized: force user to logout...', err);
+                    yield self.logout();
+                }
+                else {
+                    console.warn('[account] [WS] Received error:', err);
+                }
+            }),
+            complete: () => {
                 console.debug('[account] [WS] Completed');
             }
         });
@@ -12765,29 +12706,40 @@ class AccountService extends BaseGraphqlService {
         this._$additionalFields.next(values.concat(field));
     }
     /* -- protected method -- */
+    resetData() {
+        this._data.loaded = false;
+        this._data.keypair = null;
+        this._data.authToken = null;
+        this._data.authBasic = null;
+        this._data.pubkey = null;
+        this._data.mainProfile = null;
+        this._data.account = new Account();
+        this._data.person = null;
+        this._data.department = null;
+    }
     loadData(opts) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this.data.pubkey)
+            if (!this._data.pubkey)
                 throw new Error('User not logged');
-            this.data.loaded = false;
+            this._data.loaded = false;
             try {
-                let account = (yield this.load(opts)) || new Account();
+                const account = (yield this.load(opts)) || new Account();
                 // Set defaults
                 account.avatar = account.avatar || (this.environment.baseUrl + DEFAULT_AVATAR_IMAGE);
                 account.settings = account.settings || new UserSettings();
                 account.settings.locale = account.settings.locale || this.settings.locale;
                 account.settings.latLongFormat = account.settings.latLongFormat || this.settings.latLongFormat || 'DDMM';
                 // Read main profile
-                this.data.mainProfile = PersonUtils.getMainProfile(account.profiles);
+                this._data.mainProfile = PersonUtils.getMainProfile(account.profiles);
                 // Update, instead of replace it
-                if (this.data.account) {
-                    this.data.account.fromObject(account);
+                if (this._data.account) {
+                    this._data.account.fromObject(account);
                 }
                 else {
-                    this.data.account = account;
+                    this._data.account = account;
                 }
-                this.data.loaded = true;
-                return this.data.account;
+                this._data.loaded = true;
+                return this._data.account;
             }
             catch (error) {
                 this.resetData();
@@ -12821,9 +12773,9 @@ class AccountService extends BaseGraphqlService {
                 return;
             if (this._debug)
                 console.debug(`[account] Account restoration...`);
-            this.data.authToken = token;
-            this.data.pubkey = pubkey;
-            this.data.keypair = seckey && {
+            this._data.authToken = token;
+            this._data.pubkey = pubkey;
+            this._data.keypair = seckey && {
                 publicKey: Base58.decode(pubkey),
                 secretKey: Base58.decode(seckey)
             } || null;
@@ -12831,7 +12783,7 @@ class AccountService extends BaseGraphqlService {
             if (this.network.online) {
                 try {
                     yield this.authenticate();
-                    if (!this.data.authToken && !this.data.authBasic)
+                    if (!this._data.authToken && !this._data.authBasic)
                         throw new Error('Authentication failed');
                 }
                 catch (error) {
@@ -12862,14 +12814,14 @@ class AccountService extends BaseGraphqlService {
             // Transform to entity
             const account = Account.fromObject(jsonAccount);
             // Update data
-            this.data.account = account;
-            this.data.mainProfile = PersonUtils.getMainProfile(account.profiles);
-            this.data.loaded = true;
+            this._data.account = account;
+            this._data.mainProfile = PersonUtils.getMainProfile(account.profiles);
+            this._data.loaded = true;
             // Emit event
-            this.onLogin.next(this.data.account);
-            this.onChange.next(this.data.account);
+            this.onLogin.next(this._data.account);
+            this.onChange.next(this._data.account);
             if (this._debug)
-                console.debug(`[account] Account restoration [OK] {pubkey: ${pubkey.substr(0, 8)}}, {profile: ${this.data.mainProfile}}`);
+                console.debug(`[account] Account restoration [OK] {pubkey: ${pubkey.substr(0, 8)}}, {profile: ${this._data.mainProfile}}`);
             return account;
         });
     }
@@ -12878,13 +12830,13 @@ class AccountService extends BaseGraphqlService {
      */
     saveLocally() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this.data.pubkey)
+            if (!this._data.pubkey)
                 throw new Error('User not logged');
             if (this._debug)
-                console.debug(`[account] Saving account {${this.data.pubkey.substring(0, 6)}} in local storage...`);
+                console.debug(`[account] Saving account {${this._data.pubkey.substring(0, 6)}} in local storage...`);
             // Convert account to json
-            const json = this.data.account.asObject({ keepTypename: true });
-            const seckey = this.data.keypair && this.data.keypair.secretKey && Base58.encode(this.data.keypair.secretKey) || null;
+            const json = this._data.account.asObject({ keepTypename: true });
+            const seckey = this._data.keypair && this._data.keypair.secretKey && Base58.encode(this._data.keypair.secretKey) || null;
             // Convert avatar URL to dataUrl (e.g. 'data:image/png:<base64 content>')
             const hasAvatarUrl = json.avatar && !json.avatar.endsWith(DEFAULT_AVATAR_IMAGE) &&
                 (json.avatar.startsWith('http://') || (json.avatar.startsWith('https://')));
@@ -12905,9 +12857,9 @@ class AccountService extends BaseGraphqlService {
             }
             try {
                 yield Promise.all([
-                    this.storage.set(PUBKEY_STORAGE_KEY, this.data.pubkey),
-                    this.storage.set(TOKEN_STORAGE_KEY, this.data.authToken),
-                    this.storage.set(`${ACCOUNT_STORAGE_KEY}#${this.data.pubkey}`, json),
+                    this.storage.set(PUBKEY_STORAGE_KEY, this._data.pubkey),
+                    this.storage.set(TOKEN_STORAGE_KEY, this._data.authToken),
+                    this.storage.set(`${ACCOUNT_STORAGE_KEY}#${this._data.pubkey}`, json),
                     // Secret key (optional)
                     seckey && this.storage.set(SECKEY_STORAGE_KEY, seckey) || this.storage.remove(SECKEY_STORAGE_KEY),
                     // Remove old storage key
@@ -12965,7 +12917,7 @@ class AccountService extends BaseGraphqlService {
     }
     authenticateAndGetToken(token, counter) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this.data.pubkey)
+            if (!this._data.pubkey)
                 throw new Error('User not logged');
             if (!counter)
                 console.info('[account] Authentication on pod...');
@@ -12991,7 +12943,7 @@ class AccountService extends BaseGraphqlService {
                 if (data && data.authenticate) {
                     // Store the token
                     this.onAuthTokenChange.next(token);
-                    console.info(`[account] Authentication on pod [OK] {pubkey: '${this.data.pubkey.substr(0, 8)}'}`);
+                    console.info(`[account] Authentication on pod [OK] {pubkey: '${this._data.pubkey.substr(0, 8)}'}`);
                     return token; // return the token
                 }
                 // Continue (will retry with another challenge)
@@ -13017,8 +12969,8 @@ class AccountService extends BaseGraphqlService {
             }
             // TODO: check server pubkey as a valid certificate
             // Do the challenge
-            const signature = yield this.cryptoService.sign(data.authChallenge.challenge, this.data.keypair);
-            const newToken = `${this.data.pubkey}:${data.authChallenge.challenge}|${signature}`;
+            const signature = yield this.cryptoService.sign(data.authChallenge.challenge, this._data.keypair);
+            const newToken = `${this._data.pubkey}:${data.authChallenge.challenge}|${signature}`;
             // iterate with the new token
             return yield this.authenticateAndGetToken(newToken, (counter || 1) + 1 /* increment */);
         });
@@ -13377,9 +13329,8 @@ class ConfigService extends BaseGraphqlService {
     }
     get config() {
         // If first call: start loading
-        if (!this._started) {
+        if (!this._started)
             this.start();
-        }
         return this.$data.pipe(filter(isNotNil));
     }
     start() {
@@ -13390,30 +13341,38 @@ class ConfigService extends BaseGraphqlService {
         console.info('[config] Starting configuration...');
         this._startPromise = this.graphql.ready()
             .then(() => this.loadOrRestoreLocally())
-            .then(() => {
+            .then((data) => {
             this._started = true;
             this._startPromise = undefined;
+            this.$data.next(data);
+            return data;
         })
             .catch((err) => {
             console.error(err && err.message || err, err);
+            this._started = false;
             this._startPromise = undefined;
+            return null;
         });
         return this._startPromise;
     }
     stop() {
-        this._subscription.unsubscribe();
-        this._subscription = new Subscription();
-        this._started = false;
-        this._startPromise = undefined;
+        return __awaiter(this, void 0, void 0, function* () {
+            this._subscription.unsubscribe();
+            this._subscription = new Subscription();
+            this._started = false;
+            this._startPromise = undefined;
+        });
     }
     restart() {
-        if (this.started)
-            this.stop();
-        return this.start();
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.started)
+                yield this.stop();
+            return this.start();
+        });
     }
     ready() {
         if (this._started)
-            return Promise.resolve();
+            return Promise.resolve(this.$data.value);
         if (this._startPromise)
             return this._startPromise;
         return this.start();
@@ -13468,7 +13427,7 @@ class ConfigService extends BaseGraphqlService {
             console.debug('[config] Pod configuration saved!');
             const reloadedConfig = yield this.loadDefault({ fetchPolicy: 'network-only' });
             // If this is the default config
-            const defaultConfig = this.$data.getValue();
+            const defaultConfig = this.$data.value;
             if (isNotNil(defaultConfig) && reloadedConfig.label === defaultConfig.label) {
                 // Emit update event when is default config
                 this.$data.next(reloadedConfig);
@@ -13545,7 +13504,7 @@ class ConfigService extends BaseGraphqlService {
             if (wasJustLoaded) {
                 // TODO
             }
-            this.$data.next(data);
+            return data;
         });
     }
     restoreLocally() {
@@ -13700,6 +13659,7 @@ class PlatformService {
         this.browser = browser;
         this.downloader = downloader;
         this._started = false;
+        this._downloadingPromise = new Map();
         this._debug = !environment.production;
         if (this._debug)
             console.debug('[platform] Creating service');
@@ -13724,6 +13684,9 @@ class PlatformService {
     isAndroidCordova() {
         return this._android && this._cordova;
     }
+    get canDownload() {
+        return this._android && !!this.downloader;
+    }
     width() {
         return this.platform.width();
     }
@@ -13765,7 +13728,7 @@ class PlatformService {
             .then(() => {
             this._started = true;
             this._startPromise = undefined;
-            console.info(`[platform] Starting platform [OK] {mobile: ${this._mobile}, touchUi: ${this.touchUi}} in ${Date.now() - now}ms`);
+            console.info(`[platform] Starting platform [OK] {mobile: ${this._mobile}, touchUi: ${this.touchUi}, canDownload: ${this.canDownload}} in ${Date.now() - now}ms`);
             // Update cache configuration when network changed
             this.networkService.onNetworkStatusChanges.subscribe((type) => this.configureCache(type !== 'none'));
             // Update authentication type
@@ -13813,18 +13776,42 @@ class PlatformService {
         }
     }
     download(request) {
-        if (!request || !request.uri)
-            throw new Error('Missing argument \'request\' or \'request.uri\'');
-        if (this._android && this._cordova) {
-            request = Object.assign(Object.assign({ visibleInDownloadsUi: true, notificationVisibility: NotificationVisibility.VisibleNotifyCompleted, title: request.filename || '' }, request), { destinationInExternalFilesDir: Object.assign({ dirType: 'Downloads', subPath: request.filename || request.title || '' }, request.destinationInExternalFilesDir) });
-            this.downloader.download(request)
-                .then((location) => console.info('[platform] File successfully downloaded at:' + location))
-                .catch((error) => console.error(error));
-        }
-        // Web mode: open URI using the browser
-        else {
-            this.open(request.uri, '_system', 'location=yes');
-        }
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!request || !request.uri)
+                throw new Error('Missing argument \'request\' or \'request.uri\'');
+            if (this._android && this.downloader) {
+                // Check if not already downloading file
+                let promise = this._downloadingPromise.get(request.uri);
+                if (promise)
+                    return promise;
+                request = Object.assign({ visibleInDownloadsUi: true, notificationVisibility: NotificationVisibility.VisibleNotifyCompleted, title: request.title || request.filename }, request);
+                try {
+                    console.debug('[platform] Downloading, using request: ' + JSON.stringify(request));
+                    // Start download
+                    promise = this.downloader.download(request);
+                    // Remember this request uri
+                    this._downloadingPromise.set(request.uri, promise);
+                    const location = yield promise;
+                    console.info('[platform] File successfully downloaded at:' + location);
+                    return location;
+                }
+                catch (err) {
+                    console.error('[platform] Unable to download: ' + (err && err.message || err));
+                    throw err;
+                }
+                finally {
+                    // Forget the request
+                    this._downloadingPromise.delete(request.uri);
+                }
+            }
+            // Fallback (if not Android and Cordova): opening the URI using the browser
+            // TODO: find a way to download under iOS (see https://www.c-sharpcorner.com/article/how-to-download-a-file-using-file-transfer-plugin-in-ionic-3/)
+            else {
+                console.warn('[platform] Cannot use Android downloader: using browser open()');
+                this.open(request.uri, '_system', 'location=no', true);
+                return undefined;
+            }
+        });
     }
     /* -- protected methods -- */
     configureCordovaPlugins(mobile) {
@@ -13921,13 +13908,14 @@ class PlatformService {
                 storeName: forage.config().storeName,
                 driver: [forage.INDEXEDDB, forage.WEBSQL]
             });
-            // IF data stored in the OLD storage: start migration
             const keys = yield oldForage.keys();
+            // No data in the odl storage: skip migration
             if (isEmptyArray(keys)) {
-                // Drop the old instance
-                console.info(`[platform] Drop old storage {name: '${forage.config().name}', driver: '${oldForage.driver()}'}`);
+                // Drop the old instance (not need anymore)
+                console.debug(`[platform] Old storage is empty: dropping unused instance {name: '${forage.config().name}', driver: '${oldForage.driver()}'}`);
                 yield oldForage.dropInstance();
             }
+            // IF some data stored in the OLD storage: start migration
             else {
                 const now = Date.now();
                 console.info(`[platform] Starting storage migration...`);
@@ -15337,7 +15325,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><ion-col><ion-text><h4>Debug memory leak</h4></ion-text></ion-col></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                                  [compareWith]=\"compareWithFn\"\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                  Suggest() function\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</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-suggestFn')\"\n                                      [mobile]=\"true\"\n                                      [compareWith]=\"compareWithFn\"\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><pre>mobile: true, 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                                      [mobile]=\"true\"\n                                      [compareWith]=\"compareWithFn\"\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><pre>mobile: true, 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=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [compareWith]=\"compareWithFn\"\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-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                                      [compareWith]=\"compareWithFn\"\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><pre></pre></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('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\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [mobile]=\"true\"\n                                            [compareWith]=\"compareWithFn\"\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><pre>class=\"min-width-large\"</pre></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                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-mobile-large]'\"\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><ion-text><h4>Desktop mode</h4></ion-text></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;\nsuggestLengthThreshold: '3'</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-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [compareWith]=\"compareWithFn\"\n                                      suggestLengthThreshold=\"3\"\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                  Items is an array\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: [], value: {{stringify(form.controls.entity.value)}}</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-array-1]'\"\n                                      [compareWith]=\"compareWithFn\"\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><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\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><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=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [compareWith]=\"compareWithFn\"\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><pre>class: 'mat-autocomplete-panel-full-size'</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                                      [mobile]=\"false\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\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                                      [compareWith]=\"compareWithFn\"\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                                      [compareWith]=\"compareWithFn\"\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><pre>class=\"mat-autocomplete-panel-full-size\"</pre></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                                      [compareWith]=\"compareWithFn\"\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><pre>panelWidth: string</pre></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                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-desktop-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\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              <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [compareWith]=\"compareWithFn\"\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-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 class=\"ion-padding\">\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><ion-col><ion-text><h4>Debug memory leak</h4></ion-text></ion-col></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                                  [compareWith]=\"compareWithFn\"\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                  Suggest() function\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</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-suggestFn')\"\n                                      [mobile]=\"true\"\n                                      [compareWith]=\"compareWithFn\"\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><pre>mobile: true, 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                                      [mobile]=\"true\"\n                                      [compareWith]=\"compareWithFn\"\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><pre>mobile: true, 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=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [compareWith]=\"compareWithFn\"\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-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                                      [compareWith]=\"compareWithFn\"\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><pre></pre></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('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\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [mobile]=\"true\"\n                                            [compareWith]=\"compareWithFn\"\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><pre>class=\"min-width-large\"</pre></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                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-mobile-large]'\"\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><ion-text><h4>Desktop mode</h4></ion-text></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;\nsuggestLengthThreshold: '3'</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-filter')\"\n                                      [mobile]=\"false\"\n                                      [compareWith]=\"compareWithFn\"\n                                      suggestLengthThreshold=\"3\"\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                  Items is an array\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: [], value: {{stringify(form.controls.entity.value)}}</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-array-1]'\"\n                                      [compareWith]=\"compareWithFn\"\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><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\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><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=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [compareWith]=\"compareWithFn\"\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><pre>class: 'mat-autocomplete-panel-full-size'</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                                      [mobile]=\"false\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\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                                      [compareWith]=\"compareWithFn\"\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                                      [compareWith]=\"compareWithFn\"\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><pre>class=\"mat-autocomplete-panel-full-size\"</pre></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                                      [compareWith]=\"compareWithFn\"\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><pre>panelWidth: string</pre></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                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-desktop-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
             },] }
 ];
 AutocompleteTestPage.ctorParameters = () => [
@@ -18487,22 +18475,25 @@ const MimeTypes = Object.freeze({
     ANDROID_APK: 'application/vnd.android.package-archive'
 });
 class AppInstallUpgradeCard {
-    constructor(modalCtrl, configService, platform, cd, network, environment) {
+    constructor(modalCtrl, configService, toastController, alertController, translate, cd, platform, network, environment) {
         this.modalCtrl = modalCtrl;
         this.configService = configService;
-        this.platform = platform;
+        this.toastController = toastController;
+        this.alertController = alertController;
+        this.translate = translate;
         this.cd = cd;
+        this.platform = platform;
         this.network = network;
         this.environment = environment;
         this._subscription = new Subscription();
         this._showUpdateOfflineFeature = false;
         this.loading = true;
+        this.downloading = false;
         this.waitingNetwork = false;
         this.showUpgradeWarning = true;
         this.showOfflineWarning = true;
         this.showInstallButton = false;
         this.onUpdateOfflineModeClick = new EventEmitter();
-        this.isAndroidCordova = platform.isAndroidCordova();
     }
     set showUpdateOfflineFeature(value) {
         if (value === this._showUpdateOfflineFeature)
@@ -18519,18 +18510,8 @@ class AppInstallUpgradeCard {
             this.offline = this.network.offline;
             // Listen pod config
             this._subscription.add(this.configService.config
-                .subscribe(config => {
-                console.info('[install] Checking if upgrade  or install is need...');
-                const installLinks = this.getAllInstallLinks(config);
-                // Check for upgrade
-                this.updateLinks = this.getCompatibleUpgradeLinks(installLinks, config);
-                // Check for install links (if no upgrade need)
-                this.installLinks = !this.updateLinks && this.getCompatibleInstallLinks(installLinks);
-                setTimeout(() => {
-                    this.loading = false;
-                    this.markForCheck();
-                }, 2000); // Add a delay, for animation
-            }));
+                .pipe(debounceTime(1000))
+                .subscribe(config => this.checkNeedInstallOrUpdate(config)));
             // Listen network changes
             this._subscription.add(this.network.onNetworkStatusChanges
                 .pipe(
@@ -18538,34 +18519,69 @@ class AppInstallUpgradeCard {
             //tap(() => this.waitingNetwork = false),
             map(connectionType => connectionType === 'none'), distinctUntilChanged())
                 .subscribe(offline => {
-                this.offline = offline;
-                this.markForCheck();
+                if (this.offline !== offline) {
+                    this.offline = offline;
+                    this.markForCheck();
+                }
             }));
         });
     }
     ngOnDestroy() {
         this._subscription.unsubscribe();
+        this._subscription = null;
     }
-    downloadLink(event, link) {
-        if (!link || !link.url)
-            return; // Skip
-        this.platform.download({
-            uri: link.url,
-            filename: link.downloadFilename,
-            mimeType: link.mimeType
+    download(event, link) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!link || !link.url) {
+                console.error('[install-upgrade-card] Missing required argument \'link.url\'');
+                return; // Skip
+            }
+            this.downloading = true;
+            try {
+                console.info('[install-upgrade-card] User click to download file: ' + link.url);
+                const location = yield this.platform.download({
+                    uri: link.url,
+                    title: link.name,
+                    filename: link.downloadFilename,
+                    mimeType: link.mimeType
+                });
+                console.info('[install-upgrade-card] File downloaded at: ' + location);
+            }
+            // Failed: display a toast
+            catch (err) {
+                console.error('[install-upgrade] Download failed: ' + (err && err.message || err));
+                this.showToast({
+                    message: 'ERROR.DOWNLOAD_FAILED',
+                    messageParams: { error: err },
+                    type: 'error',
+                    showCloseButton: true
+                });
+                return; // Stop here
+            }
+            finally {
+                this.downloading = false;
+                this.markForCheck();
+            }
+            if (!this._subscription)
+                return; // Skip if component destroyed
+            yield this.showDownloadCompleteDialog();
         });
     }
     tryOnline() {
-        this.waitingNetwork = true;
-        this.markForCheck();
-        this.network.tryOnline({
-            showLoadingToast: false,
-            showOnlineToast: true,
-            showOfflineToast: false
-        })
-            .then(() => {
-            this.waitingNetwork = false;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.waitingNetwork = true;
             this.markForCheck();
+            try {
+                yield this.network.tryOnline({
+                    showLoadingToast: false,
+                    showOnlineToast: true,
+                    showOfflineToast: false
+                });
+            }
+            finally {
+                this.waitingNetwork = false;
+                this.markForCheck();
+            }
         });
     }
     getPlatformName(platform) {
@@ -18582,6 +18598,23 @@ class AppInstallUpgradeCard {
         return value;
     }
     /* -- private method  -- */
+    checkNeedInstallOrUpdate(config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            console.info('[install] Check if need to install or upgrade...');
+            try {
+                const installLinks = this.getAllInstallLinks(config);
+                // Check for upgrade
+                this.updateLinks = this.getCompatibleUpgradeLinks(installLinks, config);
+                // Check for install links (if no upgrade need)
+                this.installLinks = !this.updateLinks && this.getCompatibleInstallLinks(installLinks);
+                yield sleep(500); // Add a delay, for animation
+            }
+            finally {
+                this.loading = false;
+                this.markForCheck();
+            }
+        });
+    }
     getCompatibleInstallLinks(installLinks) {
         // Cordova already running: not need to install
         if (this.platform.is('cordova'))
@@ -18593,15 +18626,20 @@ class AppInstallUpgradeCard {
         return undefined;
     }
     getCompatibleUpgradeLinks(installLinks, config) {
-        const appMinVersion = config.getProperty(CORE_CONFIG_OPTIONS.APP_MIN_VERSION);
-        const needUpgrade = appMinVersion && !VersionUtils.isCompatible(appMinVersion, this.environment.version);
+        const appVersion = this.environment.version;
+        const appMinVersionFromPod = config.getProperty(CORE_CONFIG_OPTIONS.APP_MIN_VERSION);
+        if (!appVersion) {
+            console.error('Missing value for \'environment.version\': cannot check app compatibility!');
+            return undefined;
+        }
+        const needUpgrade = appMinVersionFromPod && !VersionUtils.isCompatible(appMinVersionFromPod, appVersion);
         if (!needUpgrade)
             return undefined;
         const upgradeLinks = installLinks
             .filter(link => this.platform.is('mobileweb') || (link.platform && this.platform.is(link.platform)));
         // Use min version as default version
         upgradeLinks.forEach(link => {
-            link.version = link.version || appMinVersion;
+            link.version = link.version || appMinVersionFromPod;
         });
         return isNotEmptyArray(upgradeLinks) ? upgradeLinks : undefined;
     }
@@ -18613,6 +18651,12 @@ class AppInstallUpgradeCard {
             let url = config.getProperty(CORE_CONFIG_OPTIONS.ANDROID_INSTALL_URL);
             if (isNilOrBlank(url))
                 url = this.environment.defaultAndroidInstallUrl || null;
+            // Resolve relative URL
+            const peer = this.network.peer;
+            if (peer && (url.startsWith('./') || url.startsWith('/'))) {
+                url = Peer.path(peer, url);
+            }
+            const minVersion = config.getProperty(CORE_CONFIG_OPTIONS.APP_MIN_VERSION);
             // Compute App name
             const name = isNotNilOrBlank(url) && config.label || this.environment.defaultAppName || 'SUMARiS';
             if (url) {
@@ -18621,7 +18665,7 @@ class AppInstallUpgradeCard {
                 let mimeType;
                 // Get file name
                 const filename = this.getFilename(url);
-                version = config.getProperty(CORE_CONFIG_OPTIONS.APP_MIN_VERSION);
+                version = minVersion || 'latest';
                 // OK, this is a downloadable APK file (e.g. NOT a link to a playstore)
                 if (filename === null || filename === void 0 ? void 0 : filename.endsWith('.apk')) {
                     // Define mime type
@@ -18631,13 +18675,12 @@ class AppInstallUpgradeCard {
                     version = versionMatches && versionMatches[1] || version;
                     // Compute a new file name, with the version
                     if (isNotNilOrBlank(name)) {
-                        downloadFilename = `${name}-${version}.apk`;
+                        downloadFilename = `${name}-v${version}.apk`.toLowerCase();
                     }
                     else {
                         downloadFilename = filename;
-                        // Replace 'latest' with the app min version
+                        // Replace 'latest' with the app version, if present
                         if (downloadFilename.indexOf('latest')) {
-                            version = config.getProperty(CORE_CONFIG_OPTIONS.APP_MIN_VERSION);
                             downloadFilename = downloadFilename.replace('latest', version);
                         }
                     }
@@ -18666,11 +18709,38 @@ class AppInstallUpgradeCard {
     markForCheck() {
         this.cd.markForCheck();
     }
+    showToast(opts) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield Toasts.show(this.toastController, this.translate, opts);
+        });
+    }
+    showDownloadCompleteDialog() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const translations = yield this.translate.get([
+                'INFO.ALERT_HEADER',
+                'INFO.DOWNLOAD_UPDATE_SUCCEED',
+                'COMMON.BTN_CLOSE'
+            ]).toPromise();
+            const alert = yield this.alertController.create({
+                header: translations['INFO.ALERT_HEADER'],
+                message: translations['INFO.DOWNLOAD_UPDATE_SUCCEED'],
+                buttons: [
+                    {
+                        text: translations['COMMON.BTN_CLOSE'],
+                        role: 'cancel',
+                        cssClass: 'secondary'
+                    }
+                ]
+            });
+            yield alert.present();
+            yield alert.onDidDismiss();
+        });
+    }
 }
 AppInstallUpgradeCard.decorators = [
     { type: Component, args: [{
                 selector: 'app-install-upgrade-card',
-                template: "\n\n<!-- Offline mode card-->\n<ion-card *ngIf=\"showOfflineWarning && (!loading && offline || waitingNetwork)\"\n          color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\" *ngIf=\"!waitingNetwork; else waitingNetworkText\">\n            <h4>\n            <b *ngIf=\"isLogin; else notLogin\"  [innerHTML]=\"'NETWORK.INFO.OFFLINE_OR_UNAUTHORIZED'| translate\"></b>\n            <ng-template #notLogin>\n              <b [innerHTML]=\"'NETWORK.INFO.OFFLINE'| translate\"></b>\n            </ng-template>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.OFFLINE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n          <ng-template #waitingNetworkText>\n            <ion-text class=\"ion-text-wrap\" [innerHTML]=\"'NETWORK.INFO.RETRY_TO_CONNECT'| translate\"></ion-text>\n          </ng-template>\n        </ion-col>\n        <ion-col size=\"auto\">\n\n          <!-- Retry button -->\n          <ion-button *ngIf=\"!waitingNetwork; else waitingSpinner\" color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"tryOnline()\">\n            <span translate>NETWORK.BTN_CHECK_ALIVE</span>\n          </ion-button>\n\n          <!-- Waiting spinner -->\n          <ng-template #waitingSpinner>\n            <ion-spinner *ngIf=\"waitingNetwork\" color=\"light\"></ion-spinner>\n          </ng-template>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Upgrade links -->\n<ion-card *ngIf=\"showUpgradeWarning && !loading && !offline && updateLinks\"\n          color=\"accent\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of updateLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3>\n              <span *ngIf=\"link.version\" [innerHTML]=\"'INFO.UPDATE_APP_TO_VERSION'| translate: link\"></span>\n              <span *ngIf=\"!link.version\" [innerHTML]=\"'INFO.UPDATE_APP'| translate: link\"></span>\n            </h3>\n            <h4>\n              <small *ngIf=\"last\" [innerHTML]=\"'INFO.UPDATE_APP_HELP'|translate\"></small>\n            </h4>\n          </ion-text>\n        </ion-col>\n\n        <ion-col size=\"auto\">\n\n          <!-- Download button -->\n          <ion-button *ngIf=\"link.downloadFilename; else redirectButton\"\n                      [download]=\"link.downloadFilename\"\n                      [href]=\"link.url\"\n                      color=\"tertiary\" class=\"ion-float-end\" >\n            <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n          </ion-button>\n\n          <!-- Redirect button -->\n          <ng-template #redirectButton>\n            <ion-button [href]=\"link.url\" rel=\"external\" color=\"tertiary\" class=\"ion-float-end\" target=\"_blank\">\n              <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n            </ion-button>\n          </ng-template>\n\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Install links -->\n<ion-card *ngIf=\"showInstallButton && !loading && !offline && installLinks\"\n          color=\"secondary\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of installLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3 [innerHTML]=\"'INFO.DOWNLOAD_APP_TITLE'| translate: {name: link.name, platform: getPlatformName(link.platform) }\"></h3>\n            <h4><small *ngIf=\"last\" [innerHTML]=\"'INFO.DOWNLOAD_APP_HELP'|translate\"></small></h4>\n          </ion-text>\n        </ion-col>\n        <ion-col size=\"auto\">\n          <ng-container *ngTemplateOutlet=\"downloadButton; context: { $implicit: link  }\"></ng-container>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Update offline feature card-->\n<ion-card *ngIf=\"showUpdateOfflineFeature && !loading && !offline\"\n          color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h4>\n              <b [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE'| translate\"></b>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n        </ion-col>\n        <ion-col size=\"auto\">\n\n          <!-- Retry button -->\n          <ion-button color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"onUpdateOfflineModeClick.emit($event)\">\n            <span translate>NETWORK.BTN_UPDATE</span>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Display a download button, depending on the link URL, and the device platform -->\n<ng-template #downloadButton let-link>\n\n  <ng-container *ngIf=\"link.downloadFilename; else redirectButton\">\n\n    <!-- Cordova download button -->\n    <ion-button *ngIf=\"isAndroidCordova; else webDownloadButton\"\n                (click)=\"downloadLink($event, asLink(link))\"\n                color=\"tertiary\" class=\"ion-float-end\" >\n      <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n    </ion-button>\n\n    <!-- Web download button -->\n    <ng-template #webDownloadButton>\n      <ion-button [download]=\"link.downloadFilename\"\n                  [href]=\"link.url\"\n                  color=\"tertiary\" class=\"ion-float-end\" >\n        <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n      </ion-button>\n    </ng-template>\n  </ng-container>\n\n  <!-- Web redirect button -->\n  <ng-template #redirectButton>\n    <ion-button [href]=\"link.url\" rel=\"external\" color=\"tertiary\" class=\"ion-float-end\" target=\"_blank\">\n      <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n    </ion-button>\n  </ng-template>\n</ng-template>\n",
+                template: "\n\n<!-- Offline mode card-->\n<ion-card *ngIf=\"showOfflineWarning && (!loading && offline || waitingNetwork)\"\n          color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\" *ngIf=\"!waitingNetwork; else waitingNetworkText\">\n            <h4>\n            <b *ngIf=\"isLogin; else notLogin\"  [innerHTML]=\"'NETWORK.INFO.OFFLINE_OR_UNAUTHORIZED'| translate\"></b>\n            <ng-template #notLogin>\n              <b [innerHTML]=\"'NETWORK.INFO.OFFLINE'| translate\"></b>\n            </ng-template>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.OFFLINE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n          <ng-template #waitingNetworkText>\n            <ion-text class=\"ion-text-wrap\" [innerHTML]=\"'NETWORK.INFO.RETRY_TO_CONNECT'| translate\"></ion-text>\n          </ng-template>\n        </ion-col>\n        <ion-col size=\"auto\">\n\n          <!-- Retry button -->\n          <ion-button *ngIf=\"!waitingNetwork; else waitingSpinner\" color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"tryOnline()\">\n            <span translate>NETWORK.BTN_CHECK_ALIVE</span>\n          </ion-button>\n\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Upgrade links -->\n<ion-card *ngIf=\"showUpgradeWarning && !loading && !offline && updateLinks\"\n          color=\"accent\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of updateLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3>\n              <span *ngIf=\"link.version\" [innerHTML]=\"'INFO.UPDATE_APP_TO_VERSION'| translate: link\"></span>\n              <span *ngIf=\"!link.version\" [innerHTML]=\"'INFO.UPDATE_APP'| translate: link\"></span>\n            </h3>\n            <h4>\n              <small *ngIf=\"last\" [innerHTML]=\"'INFO.UPDATE_APP_HELP'|translate\"></small>\n            </h4>\n          </ion-text>\n        </ion-col>\n\n        <ion-col size=\"auto\">\n          <ng-container *ngTemplateOutlet=\"downloadButton; context: { $implicit: link  }\"></ng-container>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Install links -->\n<ion-card *ngIf=\"showInstallButton && !loading && !offline && installLinks\"\n          color=\"secondary\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of installLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3 [innerHTML]=\"'INFO.DOWNLOAD_APP_TITLE'| translate: {name: link.name, platform: getPlatformName(link.platform) }\"></h3>\n            <h4><small *ngIf=\"last\" [innerHTML]=\"'INFO.DOWNLOAD_APP_HELP'|translate\"></small></h4>\n          </ion-text>\n        </ion-col>\n        <ion-col size=\"auto\">\n          <ng-container *ngTemplateOutlet=\"downloadButton; context: { $implicit: link  }\"></ng-container>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Update offline feature card-->\n<ion-card *ngIf=\"showUpdateOfflineFeature && !loading && !offline\"\n          color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h4>\n              <b [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE'| translate\"></b>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n        </ion-col>\n        <ion-col size=\"auto\">\n\n          <!-- Retry button -->\n          <ion-button color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"onUpdateOfflineModeClick.emit($event)\">\n            <span translate>NETWORK.BTN_UPDATE</span>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Display a download button, depending on the link URL, and the device platform -->\n<ng-template #downloadButton let-link>\n\n  <ng-container *ngIf=\"link.downloadFilename; else redirectButton\">\n\n    <ng-container *ngIf=\"platform.canDownload; else webDownloadButton\">\n      <!-- Download using platform -->\n      <ion-button *ngIf=\"!downloading; else waitingSpinner\"\n                  (click)=\"download($event, asLink(link))\"\n                  [disabled]=\"downloading\"\n                  color=\"tertiary\" class=\"ion-float-end\">\n        <ion-icon slot=\"start\" *ngIf=\"!downloading\" name=\"download\"></ion-icon>\n        <ion-spinner slot=\"start\" class=\"ion-no-padding\" *ngIf=\"downloading\"></ion-spinner>\n        <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n      </ion-button>\n    </ng-container>\n\n    <!-- Web download button -->\n    <ng-template #webDownloadButton>\n      <ion-button [download]=\"link.downloadFilename\"\n                  [href]=\"link.url\"\n                  color=\"tertiary\" class=\"ion-float-end\" >\n        <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n      </ion-button>\n    </ng-template>\n  </ng-container>\n\n  <!-- Web redirect button -->\n  <ng-template #redirectButton>\n    <ion-button [href]=\"link.url\" rel=\"external\" color=\"tertiary\" class=\"ion-float-end\" target=\"_blank\">\n      <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n    </ion-button>\n  </ng-template>\n</ng-template>\n\n\n<!-- Waiting spinner -->\n<ng-template #waitingSpinner>\n  <ion-spinner color=\"light\"></ion-spinner>\n</ng-template>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 animations: [slideUpDownAnimation],
                 styles: ["ion-text small{font-size:85%}"]
@@ -18679,8 +18749,11 @@ AppInstallUpgradeCard.decorators = [
 AppInstallUpgradeCard.ctorParameters = () => [
     { type: ModalController },
     { type: ConfigService },
-    { type: PlatformService },
+    { type: ToastController },
+    { type: AlertController },
+    { type: TranslateService },
     { type: ChangeDetectorRef },
+    { type: PlatformService },
     { type: NetworkService },
     { type: undefined, decorators: [{ type: Inject, args: [ENVIRONMENT,] }] }
 ];
@@ -23532,6 +23605,7 @@ class UsersPage extends AppTable {
         this.filterCriteriaCount = 0;
         this.statusList = StatusList;
         this.statusById = StatusById;
+        this.useSticky = false;
         this.referentialToString = referentialToString;
         this.inlineEdition = accountService.isAdmin(); // Allow inline edition only if admin
         this.canEdit = accountService.isAdmin();
@@ -23635,13 +23709,13 @@ class UsersPage extends AppTable {
 UsersPage.decorators = [
     { type: Component, args: [{
                 selector: 'app-users-table',
-                template: "<app-toolbar [title]=\"'USER.LIST.TITLE'|translate\"\n             color=\"primary\"\n             [canGoBack]=\"false\"\n             [hasValidate]=\"!(loadingSubject|async) && dirty\"\n             (onValidate)=\"save()\">\n  <ion-buttons slot=\"end\">\n    <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n      <!-- Add -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && !mobile\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- Refresh -->\n      <button mat-icon-button *ngIf=\"!mobile\"\n              [title]=\"'COMMON.BTN_REFRESH'|translate\"\n              (click)=\"onRefresh.emit()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\"\n              *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon  class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon *ngIf=\"filterCriteriaCount; else emptyFilter\"\n                  [matBadge]=\"filterCriteriaCount\"\n                  matBadgeColor=\"accent\"\n                  matBadgeSize=\"small\"\n                  matBadgePosition=\"above after\">filter_list_alt</mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n    </ng-container>\n\n    <ng-template #hasSelection>\n      <!-- delete -->\n      <button mat-icon-button\n              class=\"hidden-xs hidden-sm\"\n              [title]=\"'COMMON.BTN_DELETE'|translate\"\n              (click)=\"deleteSelection($event)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <!-- error -->\n  <ion-item *ngIf=\"errorSubject|async ; let error\" lines=\"none\" @slideUpDownAnimation>\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  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"ion-no-padding filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding\" [formGroup]=\"filterForm\" (ngSubmit)=\"onRefresh.emit()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <input matInput [placeholder]=\"'USER.LIST.FILTER.SEARCH'|translate\" formControlName=\"searchText\">\n\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <!-- status -->\n            <mat-form-field>\n              <mat-select formControlName=\"statusId\" [placeholder]=\"'USER.STATUS'|translate\" >\n                <mat-option [value]=\"null\"><i><span translate>COMMON.EMPTY_OPTION</span></i></mat-option>\n                <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                  <ion-icon [name]=\"item.icon\"></ion-icon>\n                  {{ item.label |translate }}\n                </mat-option>\n              </mat-select>\n\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.statusId)\"\n                      [hidden]=\"filterForm.controls.statusId.disabled || !filterForm.controls.statusId.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {count: (totalRowCount |\n              numberFormat)} }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"filterExpansionPanel.close()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- error -->\n  <ion-item *ngIf=\"error\" visible-xs visible-sm visible-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=\"table-container\">\n    <table #table mat-table matSort\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\" [matSortDirection]=\"defaultSortDirection\"\n      matSortDisableClear [trackBy]=\"trackByFn\">\n\n      <ng-container matColumnDef=\"select\">\n        <th mat-header-cell  *matHeaderCellDef [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n            [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n          </mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\" [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData.id }}</td>\n      </ng-container>\n\n      <!-- avatar Column -->\n      <ng-container matColumnDef=\"avatar\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <div class=\"avatar\" *ngIf=\"row.currentData.avatar; else generateIcon\"\n               [ngStyle]=\"{'background-image':'url('+row.currentData.avatar+')'}\"></div>\n          <ng-template #generateIcon>\n            <div class=\"avatar\">\n              <svg width=\"38\" width=\"38\" [data-jdenticon-value]=\"row.currentData.id\"></svg>\n            </div>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- lastName  -->\n      <ng-container matColumnDef=\"lastName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.LAST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput [formControl]=\"row.validator.controls['lastName']\" [placeholder]=\"'USER.LAST_NAME'|translate\"\n              [readonly]=\"!row.editing\" [appAutofocus]=\"row == -1 && row.editing\">\n            <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('minlength')\">\n              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n            </mat-error>\n          </mat-form-field>\n\n        </td>\n\n      </ng-container>\n\n      <!-- firstname -->\n      <ng-container matColumnDef=\"firstName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.FIRST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput [formControl]=\"row.validator.controls['firstName']\" [placeholder]=\"'USER.FIRST_NAME'|translate\"\n              [readonly]=\"!row.editing\">\n            <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('minlength')\">\n              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- email  -->\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.EMAIL</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput [formControl]=\"row.validator.controls['email']\" [placeholder]=\"'USER.EMAIL'|translate\"\n              [readonly]=\"!row.editing\">\n            <mat-error *ngIf=\"row.validator.controls['email'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['email'].hasError('email')\">\n              <span translate>ERROR.FIELD_NOT_VALID_EMAIL</span>\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- additional fields -->\n      <ng-container *ngFor=\"let definition of additionalFields\" [matColumnDef]=\"definition.key\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span>{{definition.label|translate}}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <app-form-field floatLabel=\"never\"\n                          [definition]=\"definition\"\n                          [formControl]=\"row.validator.controls[definition.key]\"\n                          [required]=\"definition.extra?.account?.required\">\n          </app-form-field>\n        </td>\n      </ng-container>\n\n      <!-- profile column  -->\n      <ng-container matColumnDef=\"profile\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.PROFILE</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">\n          <mat-form-field floatLabel=\"never\">\n            <mat-select [formControl]=\"row.validator.controls['mainProfile']\" [placeholder]=\"'USER.PROFILE'|translate\">\n              <mat-option *ngFor=\"let item of profiles\" [value]=\"item\">\n                {{ ('USER.PROFILE_ENUM.' + item) | uppercase |translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['mainProfile'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"status\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">\n          <mat-form-field floatLabel=\"never\">\n            <ion-icon matPrefix *ngIf=\"row.validator.controls['statusId'].value &gt;=0\" [name]=\"statusById[row.validator.controls['statusId'].value]?.icon\"></ion-icon>\n\n            <mat-select [formControl]=\"row.validator.controls['statusId']\" [placeholder]=\"'REFERENTIAL.STATUS'|translate\">\n              <mat-select-trigger>\n                <span *ngIf=\"row.validator.controls['statusId'].value &gt;=0\">\n                  {{ statusById[row.validator.controls['statusId'].value]?.label | translate}}</span>\n              </mat-select-trigger>\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <ion-icon [name]=\"item.icon\"></ion-icon>\n                {{ item.label |translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- username -->\n      <ng-container matColumnDef=\"username\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput [formControl]=\"row.validator.controls.username\" [placeholder]=\"'USER.USERNAME'|translate\"\n                   [readonly]=\"!row.editing\">\n            <mat-error *ngIf=\"row.validator.controls.username.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- username extranet -->\n      <ng-container matColumnDef=\"usernameExtranet\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME_EXTRANET</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput [formControl]=\"row.validator.controls.usernameExtranet\" [placeholder]=\"'USER.USERNAME_EXTRANET'|translate\"\n                   [readonly]=\"!row.editing\">\n            <mat-error *ngIf=\"row.validator.controls.usernameExtranet.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- pubkey  -->\n      <ng-container matColumnDef=\"pubkey\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.PUBKEY</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\" [title]=\"row.validator.controls['pubkey'].value\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput [formControl]=\"row.validator.controls['pubkey']\" [placeholder]=\"'USER.PUBKEY'|translate\"\n              [readonly]=\"!row.editing\" autocomplete=\"off\">\n            <mat-error *ngIf=\"row.validator.controls['pubkey'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['pubkey'].hasError('pubkey')\">\n              <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"true\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\">\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n               [class.mat-row-error]=\"row.validator.invalid\"\n               [class.mat-row-dirty]=\"row.currentData.dirty\"\n               [class.mat-row-disabled]=\"!row.editing\"\n               (click)=\"clickRow($event, row)\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <mat-paginator class=\"mat-paginator-footer\"\n                 [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\"\n                 [pageSizeOptions]=\"defaultPageSizeOptions\" showFirstLastButtons>\n  </mat-paginator>\n\n  <app-form-buttons-bar *ngIf=\"!mobile && inlineEdition\"\n                    (onCancel)=\"onRefresh.emit()\" (onSave)=\"save()\" [disabled]=\"(loadingSubject|async) || !dirty\"></app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow()\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n",
+                template: "<app-toolbar [title]=\"'USER.LIST.TITLE'|translate\"\n             color=\"primary\"\n             [canGoBack]=\"false\"\n             [hasValidate]=\"!(loadingSubject|async) && dirty\"\n             (onValidate)=\"save()\">\n  <ion-buttons slot=\"end\">\n    <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n      <!-- Add -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && !mobile\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- Refresh -->\n      <button mat-icon-button *ngIf=\"!mobile\"\n              [title]=\"'COMMON.BTN_REFRESH'|translate\"\n              (click)=\"onRefresh.emit()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\"\n              *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon *ngIf=\"filterCriteriaCount; else emptyFilter\"\n                  [matBadge]=\"filterCriteriaCount\"\n                  matBadgeColor=\"accent\"\n                  matBadgeSize=\"small\"\n                  matBadgePosition=\"above after\">filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n    </ng-container>\n\n    <ng-template #hasSelection>\n      <!-- delete -->\n      <button mat-icon-button\n              class=\"hidden-xs hidden-sm\"\n              [title]=\"'COMMON.BTN_DELETE'|translate\"\n              (click)=\"deleteSelection($event)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <!-- error -->\n  <ion-item *ngIf=\"errorSubject|async ; let error\" lines=\"none\" @slideUpDownAnimation>\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  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"ion-no-padding filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding\" [formGroup]=\"filterForm\" (ngSubmit)=\"onRefresh.emit()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <input matInput [placeholder]=\"'USER.LIST.FILTER.SEARCH'|translate\" formControlName=\"searchText\">\n\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <!-- status -->\n            <mat-form-field>\n              <mat-select formControlName=\"statusId\" [placeholder]=\"'USER.STATUS'|translate\">\n                <mat-option [value]=\"null\"><i><span translate>COMMON.EMPTY_OPTION</span></i></mat-option>\n                <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                  <ion-icon [name]=\"item.icon\"></ion-icon>\n                  {{ item.label |translate }}\n                </mat-option>\n              </mat-select>\n\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.statusId)\"\n                      [hidden]=\"filterForm.controls.statusId.disabled || !filterForm.controls.statusId.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"filterExpansionPanel.close()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- error -->\n  <ion-item *ngIf=\"error\" visible-xs visible-sm visible-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=\"table-container\">\n    <table #table mat-table matSort\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\" [matSortDirection]=\"defaultSortDirection\"\n           matSortDisableClear [trackBy]=\"trackByFn\">\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n          </mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\" [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData.id }}</td>\n      </ng-container>\n\n      <!-- avatar Column -->\n      <ng-container matColumnDef=\"avatar\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <div class=\"avatar\" *ngIf=\"row.currentData.avatar; else generateIcon\"\n               [ngStyle]=\"{'background-image':'url('+row.currentData.avatar+')'}\"></div>\n          <ng-template #generateIcon>\n            <div class=\"avatar\">\n              <svg width=\"38\" width=\"38\" [data-jdenticon-value]=\"row.currentData.id\"></svg>\n            </div>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- lastName  -->\n      <ng-container matColumnDef=\"lastName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.LAST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='lastName'\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput\n                   [formControl]=\"row.validator.controls['lastName']\"\n                   [placeholder]=\"'USER.LAST_NAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='lastName'\">\n            <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('minlength')\">\n              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n            </mat-error>\n          </mat-form-field>\n\n        </td>\n\n      </ng-container>\n\n      <!-- firstname -->\n      <ng-container matColumnDef=\"firstName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.FIRST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n\n            (click)=\"focusColumn='firstName'\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput [formControl]=\"row.validator.controls['firstName']\"\n                   [placeholder]=\"'USER.FIRST_NAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='firstName'\">\n            <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('minlength')\">\n              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- email  -->\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.EMAIL</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='email'\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput [formControl]=\"row.validator.controls['email']\"\n                   [placeholder]=\"'USER.EMAIL'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='email'\">\n            <mat-error *ngIf=\"row.validator.controls['email'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['email'].hasError('email')\">\n              <span translate>ERROR.FIELD_NOT_VALID_EMAIL</span>\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- additional fields -->\n      <ng-container *ngFor=\"let definition of additionalFields\" [matColumnDef]=\"definition.key\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span>{{definition.label|translate}}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn=definition.key\">\n          <app-form-field floatLabel=\"never\"\n                          [definition]=\"definition\"\n                          [formControl]=\"row.validator.controls[definition.key]\"\n                          [required]=\"definition.extra?.account?.required\"\n                          [autofocus]=\"row.editing && focusColumn===definition.ke\">\n          </app-form-field>\n        </td>\n      </ng-container>\n\n      <!-- profile column  -->\n      <ng-container matColumnDef=\"profile\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.PROFILE</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='profile'\">\n          <mat-form-field floatLabel=\"never\">\n            <mat-select [formControl]=\"row.validator.controls['mainProfile']\"\n                        [placeholder]=\"'USER.PROFILE'|translate\">\n              <mat-option *ngFor=\"let item of profiles\" [value]=\"item\">\n                {{ ('USER.PROFILE_ENUM.' + item) | uppercase |translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['mainProfile'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"status\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='status'\">\n          <mat-form-field floatLabel=\"never\">\n            <ion-icon matPrefix *ngIf=\"row.validator.controls['statusId'].value &gt;=0\" [name]=\"statusById[row.validator.controls['statusId'].value]?.icon\"></ion-icon>\n\n            <mat-select [formControl]=\"row.validator.controls['statusId']\"\n                        [placeholder]=\"'REFERENTIAL.STATUS'|translate\">\n              <mat-select-trigger>\n                <span *ngIf=\"row.validator.controls['statusId'].value &gt;=0\">\n                  {{ statusById[row.validator.controls['statusId'].value]?.label | translate}}</span>\n              </mat-select-trigger>\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <ion-icon [name]=\"item.icon\"></ion-icon>\n                {{ item.label |translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- username -->\n      <ng-container matColumnDef=\"username\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='username'\">\n          <mat-form-field floatLabel=\"never\" >\n            <input matInput [formControl]=\"row.validator.controls.username\"\n                   [placeholder]=\"'USER.USERNAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='username'\">\n            <mat-error *ngIf=\"row.validator.controls.username.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- username extranet -->\n      <ng-container matColumnDef=\"usernameExtranet\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME_EXTRANET</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='usernameExtranet'\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput [formControl]=\"row.validator.controls.usernameExtranet\"\n                   [placeholder]=\"'USER.USERNAME_EXTRANET'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='usernameExtranet'\">\n            <mat-error *ngIf=\"row.validator.controls.usernameExtranet.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- pubkey  -->\n      <ng-container matColumnDef=\"pubkey\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.PUBKEY</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            [title]=\"row.validator.controls['pubkey'].value\"\n            (click)=\"focusColumn='pubkey'\">\n          <mat-form-field floatLabel=\"never\"  >\n            <input matInput [formControl]=\"row.validator.controls['pubkey']\" [placeholder]=\"'USER.PUBKEY'|translate\"\n                   [readonly]=\"!row.editing\" autocomplete=\"off\">\n            <mat-error *ngIf=\"row.validator.controls['pubkey'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['pubkey'].hasError('pubkey')\">\n              <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>\n            </mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"useSticky\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\"\n                          [canCancel]=\"false\">\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-error]=\"row.validator.invalid\"\n          [class.mat-row-dirty]=\"row.currentData.dirty\"\n          [class.mat-row-disabled]=\"!row.editing\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <mat-paginator class=\"mat-paginator-footer\"\n                 [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\"\n                 [pageSizeOptions]=\"defaultPageSizeOptions\" showFirstLastButtons>\n  </mat-paginator>\n\n  <app-form-buttons-bar *ngIf=\"!mobile && inlineEdition\"\n                        (onCancel)=\"onRefresh.emit()\" (onSave)=\"save()\" [disabled]=\"(loadingSubject|async) || !dirty\"></app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow()\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n",
                 providers: [
                     { provide: ValidatorService, useExisting: PersonValidatorService }
                 ],
                 animations: [slideUpDownAnimation],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".mat-expansion-panel{margin-bottom:5px}.mat-expansion-panel .form-container mat-form-field{width:100%}.mat-expansion-panel mat-action-row ion-label{line-height:36px}.table-container{height:100%}.mat-table .mat-cell .avatar{height:40px;width:40px;margin:2px 0 0;background-size:cover;background-repeat:no-repeat;background-position:50%}.mat-table .mat-column-avatar{min-width:50px}.mat-table .mat-column-profile{min-width:110px}.mat-table .mat-column-status{min-width:130px}.mat-table .mat-column-department{min-width:150px}"]
+                styles: [".mat-expansion-panel{margin-bottom:5px}.mat-expansion-panel .form-container mat-form-field{width:100%}.mat-expansion-panel mat-action-row ion-label{line-height:36px}.table-container{height:100%}.mat-table .mat-cell .avatar{height:40px;width:40px;margin:2px 0 0;background-size:cover;background-repeat:no-repeat;background-position:50%}.mat-table .mat-column-id{width:30px}.mat-table .mat-column-avatar{width:50px}.mat-table .mat-column-avatar .avatar{border-radius:5px;border:1px solid rgba(var(--ion-color-secondary-rgb),.5)}.mat-table .mat-column-firstName,.mat-table .mat-column-lastName{min-width:80px}.mat-table .mat-column-email{min-width:120px}.mat-table .mat-column-profile{min-width:110px}.mat-table .mat-column-status{min-width:130px}.mat-table .mat-column-department{min-width:150px}"]
             },] }
 ];
 UsersPage.ctorParameters = () => [
@@ -23661,6 +23735,7 @@ UsersPage.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Inject, args: [ENVIRONMENT,] }] }
 ];
 UsersPage.propDecorators = {
+    useSticky: [{ type: Input }],
     filterExpansionPanel: [{ type: ViewChild, args: [MatExpansionPanel, { static: true },] }]
 };
 
@@ -23726,5 +23801,5 @@ const ErrorCodes = {
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, 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, AnimationState, AppEditorOptions, AppEntityEditor, 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, AutocompleteTestPage, AutofocusDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CryptoService, DATE_ISO_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFromNowPipe, DateTimeTestPage, DateUtils, Department, DepartmentToStringPipe, DurationPipe, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesService, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileService, FileSizePipe, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormFieldValuesHolder, 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, MatBooleanField, MatChipsField, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialChipsModule, MaterialTestingModule, MaterialTestingPage, MathAbsPipe, MenuComponent, MenuItems, MenuService, ModalToolbarComponent, NetworkService, NgInitDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, OddPipe, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialRef, ReferentialUtils, RegisterConfirmPage, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, SettingsPage, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedValidators, SocialModule, Software, StatusById, StatusIds, StatusList, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, ToStringPipe, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UserEvent, UserEventFilter, 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, equalsOrNil, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, firstArrayValue, firstFalsePromise, firstNotNil, firstNotNilPromise, 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, isControlHasInput, isEmptyArray, isInputElement, isInstanceOf, isInt, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchUpperCase, mergeLoadResult, mixHex, 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, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, updateValueAndValidity, waitFor, waitIdle, waitWhilePending, ɵ0$5 as ɵ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 };
+export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, 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, AnimationState, AppEditorOptions, AppEntityEditor, 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, AutocompleteTestPage, AutofocusDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CryptoService, DATE_ISO_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFromNowPipe, DateTimeTestPage, DateUtils, Department, DepartmentToStringPipe, DurationPipe, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesService, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileService, FileSizePipe, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormFieldValuesHolder, 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, MatBooleanField, MatChipsField, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialChipsModule, MaterialTestingModule, MaterialTestingPage, MathAbsPipe, MenuComponent, MenuItems, MenuService, ModalToolbarComponent, NetworkService, NgInitDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, OddPipe, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialRef, ReferentialUtils, RegisterConfirmPage, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, SettingsPage, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedValidators, SocialModule, Software, StartableService, StatusById, StatusIds, StatusList, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, ToStringPipe, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UserEvent, UserEventFilter, 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, equalsOrNil, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, firstArrayValue, firstFalsePromise, firstNotNil, firstNotNilPromise, 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, isControlHasInput, isEmptyArray, isInputElement, isInstanceOf, isInt, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchUpperCase, mergeLoadResult, mixHex, 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, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, updateValueAndValidity, waitFor, waitIdle, waitWhilePending, ɵ0$5 as ɵ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 };
 //# sourceMappingURL=sumaris-net.ngx-components.js.map