@sumaris-net/ngx-components 0.24.3 → 0.25.0

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

@@ -7732,39 +7732,127 @@
         matInput: [{ type: i0.ViewChild, args: ['matInput',] }]
     };
 
-    var 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] },
-    ];
-    var AudioProvider = /** @class */ (function () {
-        function AudioProvider(platform, nativeAudio, vibration, audioManagement) {
-            this.platform = platform;
-            this.nativeAudio = nativeAudio;
-            this.vibration = vibration;
-            this.audioManagement = audioManagement;
-            this._started = false;
-            this._audioMode = ngx$1.AudioManagement.AudioMode.NORMAL;
-            this._preloadedSounds = {};
-            this._htmlAudioCache = {};
+    var StartableService = /** @class */ (function () {
+        function StartableService(platform) {
             this.onStart = new rxjs.Subject();
-            this.start();
+            this._debug = false;
+            this._data = null;
+            this._started = false;
+            this._startPrerequisite = platform
+                ? function () { return platform.ready(); }
+                : function () { return Promise.resolve(); };
         }
-        AudioProvider.prototype.ready = function () {
+        StartableService.prototype.start = function () {
+            var _this = this;
+            if (this._startPromise)
+                return this._startPromise;
+            if (this._started)
+                return Promise.resolve(this._data);
+            this._startPromise = this._startPrerequisite()
+                .then(function () { return _this.ngOnStart(); })
+                .then(function (data) {
+                _this._data = data;
+                _this._started = true;
+                _this._startPromise = undefined;
+                _this.onStart.next(_this._data);
+                return _this._data;
+            })
+                .catch(function (err) {
+                console.error('Failed to start a service: ' + (err && err.message || err), err);
+                _this._started = false;
+                _this._startPromise = null;
+                return null;
+            });
+            return this._startPromise;
+        };
+        StartableService.prototype.stop = function () {
             return __awaiter(this, void 0, void 0, function () {
+                var err_1;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            if (this._started)
-                                return [2 /*return*/, Promise.resolve()];
-                            return [4 /*yield*/, this.start()];
+                            _a.trys.push([0, 2, , 3]);
+                            return [4 /*yield*/, this.ngOnStop()];
                         case 1:
                             _a.sent();
-                            return [2 /*return*/];
+                            this._started = false;
+                            this._startPromise = undefined;
+                            return [3 /*break*/, 3];
+                        case 2:
+                            err_1 = _a.sent();
+                            console.error('Failed to stop a service: ' + (err_1 && err_1.message || err_1), err_1);
+                            return [3 /*break*/, 3];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        StartableService.prototype.restart = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!this._startPromise) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this._startPromise];
+                        case 1:
+                            _a.sent(); // Wait end of previous loading
+                            _a.label = 2;
+                        case 2:
+                            if (!this._started) return [3 /*break*/, 4];
+                            return [4 /*yield*/, this.stop()];
+                        case 3:
+                            _a.sent(); // Then stop if started
+                            _a.label = 4;
+                        case 4: // Then stop if started
+                        return [2 /*return*/, this.start()]; // Then start again
                     }
                 });
             });
         };
+        Object.defineProperty(StartableService.prototype, "started", {
+            get: function () {
+                return this._started;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        StartableService.prototype.ready = function () {
+            if (this._started)
+                return Promise.resolve(this._data);
+            return this.start();
+        };
+        StartableService.prototype.ngOnStop = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/];
+                });
+            });
+        };
+        return StartableService;
+    }());
+    StartableService.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: i0.Optional }] }
+    ]; };
+
+    var 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] },
+    ];
+    var AudioProvider = /** @class */ (function (_super) {
+        __extends(AudioProvider, _super);
+        function AudioProvider(platform, nativeAudio, vibration, audioManagement) {
+            var _this = _super.call(this, platform) || this;
+            _this.platform = platform;
+            _this.nativeAudio = nativeAudio;
+            _this.vibration = vibration;
+            _this.audioManagement = audioManagement;
+            _this._audioMode = ngx$1.AudioManagement.AudioMode.NORMAL;
+            _this._preloadedSounds = {};
+            _this._htmlAudioCache = {};
+            _this.start();
+            return _this;
+        }
         AudioProvider.prototype.playBeepConfirm = function () {
             return this.play('beep-confirm', {
                 // Vibrate only if in vibration mode
@@ -7828,7 +7916,7 @@
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            if (!!this._started) return [3 /*break*/, 2];
+                            if (!!this.started) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.ready()];
                         case 1:
                             _a.sent();
@@ -7912,7 +8000,7 @@
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            if (!!this._started) return [3 /*break*/, 2];
+                            if (!!this.started) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.ready()];
                         case 1:
                             _a.sent();
@@ -7927,15 +8015,10 @@
             });
         };
         /* -- protected methods  -- */
-        AudioProvider.prototype.start = function () {
-            var _this = this;
-            if (this._startPromise)
-                return this._startPromise;
-            if (this._started)
-                return Promise.resolve();
-            var cordova;
-            this._startPromise = this.platform.ready()
-                .then(function () { return __awaiter(_this, void 0, void 0, function () {
+        AudioProvider.prototype.ngOnStart = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var cordova;
+                var _this = this;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -7947,33 +8030,21 @@
                         case 1:
                             _a.sent();
                             _a.label = 2;
-                        case 2: return [2 /*return*/];
+                        case 2:
+                            // Pre-loading system sounds
+                            console.debug('[audio] Preloading audio sounds...');
+                            return [4 /*yield*/, Promise.all(SYSTEM_SOUNDS.map(function (s) {
+                                    // Disable vibration is cordova not enabled
+                                    if (!cordova)
+                                        s.vibration = undefined;
+                                    return _this.preload(s);
+                                }))];
+                        case 3:
+                            _a.sent();
+                            return [2 /*return*/];
                     }
                 });
-            }); })
-                // Pre-loading system sounds
-                .then(function () {
-                console.debug('[audio] Preloading audio sounds...');
-                return Promise.all(SYSTEM_SOUNDS.map(function (s) {
-                    // Disable vibration is cordova not enabled
-                    if (!cordova)
-                        s.vibration = undefined;
-                    return _this.preload(s);
-                }));
-            })
-                .then(function () {
-                _this._started = true;
-                _this._startPromise = null;
-                console.info('[audio] Audio provider started');
-                // Emit event
-                _this.onStart.next();
-            })
-                .catch(function (err) {
-                console.error('[audio] Unable to start audio provider: ' + (err && err.message || err), err);
-                _this._started = false;
-                _this._startPromise = null;
             });
-            return this._startPromise;
         };
         AudioProvider.prototype.readAudioMode = function () {
             return __awaiter(this, void 0, void 0, function () {
@@ -7991,7 +8062,7 @@
             });
         };
         return AudioProvider;
-    }());
+    }(StartableService));
     AudioProvider.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function AudioProvider_Factory() { return new AudioProvider(i0__namespace.ɵɵinject(i1__namespace$4.Platform), i0__namespace.ɵɵinject(i2__namespace.NativeAudio, 8), i0__namespace.ɵɵinject(i3__namespace.Vibration, 8), i0__namespace.ɵɵinject(i4__namespace.AudioManagement, 8)); }, token: AudioProvider, providedIn: "root" });
     AudioProvider.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
@@ -8977,6 +9048,10 @@
             {
                 host: 'sih.sfa.sc',
                 port: 80
+            },
+            {
+                host: 'test.sumaris.net',
+                port: 443
             }
         ],
         defaultAppName: 'SUMARiS',
@@ -9589,110 +9664,87 @@
     };
     var APP_LOCAL_SETTINGS = new i0.InjectionToken('DefaultLocalSettings');
     var APP_LOCAL_SETTINGS_OPTIONS = new i0.InjectionToken('LocalSettingsOptions');
-    var LocalSettingsService = /** @class */ (function () {
+    var LocalSettingsService = /** @class */ (function (_super) {
+        __extends(LocalSettingsService, _super);
         function LocalSettingsService(translate, platform, storage, environment, defaultSettings, defaultOptionsMap) {
-            this.translate = translate;
-            this.platform = platform;
-            this.storage = storage;
-            this.environment = environment;
-            this.defaultSettings = defaultSettings;
-            this._started = false;
-            this.onChange = new rxjs.Subject();
-            this.defaultSettings = Object.assign(Object.assign({}, DEFAULT_SETTINGS), this.defaultSettings);
-            this._optionDefs = Object.values(defaultOptionsMap);
-            this.resetData();
-            this._debug = !environment.production;
-            if (this._debug)
+            var _this = _super.call(this, platform) || this;
+            _this.translate = translate;
+            _this.platform = platform;
+            _this.storage = storage;
+            _this.environment = environment;
+            _this.defaultSettings = defaultSettings;
+            _this.onChange = new rxjs.Subject();
+            _this.defaultSettings = Object.assign(Object.assign({}, DEFAULT_SETTINGS), _this.defaultSettings);
+            _this._optionDefs = Object.values(defaultOptionsMap);
+            _this.resetData();
+            _this._debug = !environment.production;
+            if (_this._debug)
                 console.debug('[settings] Creating service');
+            return _this;
         }
         Object.defineProperty(LocalSettingsService.prototype, "settings", {
             get: function () {
-                return this.data || this.defaultSettings;
+                return this._data || this.defaultSettings;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(LocalSettingsService.prototype, "locale", {
             get: function () {
-                return this.data && this.data.locale || this.translate.currentLang || this.translate.defaultLang;
+                return this._data && this._data.locale || this.translate.currentLang || this.translate.defaultLang;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(LocalSettingsService.prototype, "latLongFormat", {
             get: function () {
-                return this.data && this.data.latLongFormat || 'DDMM';
+                return this._data && this._data.latLongFormat || 'DDMM';
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(LocalSettingsService.prototype, "usageMode", {
             get: function () {
-                return (this.data && this.data.usageMode || (this.mobile ? 'FIELD' : 'DESK'));
+                return (this._data && this._data.usageMode || (this.mobile ? 'FIELD' : 'DESK'));
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(LocalSettingsService.prototype, "mobile", {
             get: function () {
-                return this.data && toBoolean(this.data.mobile, this.platform.is('mobile'));
+                return this._data && toBoolean(this._data.mobile, this.platform.is('mobile'));
             },
             set: function (value) {
-                this.data.mobile = value;
+                this._data.mobile = value;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(LocalSettingsService.prototype, "touchUi", {
             get: function () {
-                return this.data.touchUi;
+                return this._data.touchUi;
             },
             set: function (value) {
-                this.data.touchUi = value;
+                this._data.touchUi = value;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(LocalSettingsService.prototype, "pageHistory", {
             get: function () {
-                return (this.data && this.data.pageHistory || []);
+                return (this._data && this._data.pageHistory || []);
             },
             enumerable: false,
             configurable: true
         });
-        LocalSettingsService.prototype.start = function () {
-            var _this = this;
-            if (this._startPromise)
-                return this._startPromise;
-            if (this._started)
-                return Promise.resolve(this.data);
-            console.info('[settings] Starting settings...');
+        LocalSettingsService.prototype.ngOnStart = function () {
+            console.info('[settings] Starting service...');
             // Restoring local settings
-            this._startPromise = this.platform.ready()
-                .then(function () {
-                _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(function () { return _this.restoreLocally(); })
-                .then(function (data) {
-                _this._started = true;
-                _this._startPromise = undefined;
-                return data;
-            });
-            return this._startPromise;
-        };
-        Object.defineProperty(LocalSettingsService.prototype, "started", {
-            get: function () {
-                return this._started;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        LocalSettingsService.prototype.ready = function () {
-            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();
         };
         LocalSettingsService.prototype.isUsageMode = function (mode) {
             return this.usageMode === mode;
@@ -9702,10 +9754,12 @@
         };
         LocalSettingsService.prototype.restoreLocally = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var settingsStr, restoredData_1;
+                var data, settingsStr, restoredData_1;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.storage.get(SETTINGS_STORAGE_KEY)];
+                        case 0:
+                            data = this._data || {};
+                            return [4 /*yield*/, this.storage.get(SETTINGS_STORAGE_KEY)];
                         case 1:
                             settingsStr = _a.sent();
                             // Restore local settings (or keep old settings)
@@ -9716,30 +9770,31 @@
                                 SETTINGS_TRANSIENT_PROPERTIES.forEach(function (transientKey) {
                                     delete restoredData_1[transientKey];
                                 });
-                                this.data = Object.assign(this.data, restoredData_1);
+                                // Merge into existing data
+                                data = Object.assign(data, restoredData_1);
                             }
                             // Emit event
-                            this.onChange.next(this.data);
-                            return [2 /*return*/, this.data];
+                            this.onChange.next(data);
+                            return [2 /*return*/, data];
                     }
                 });
             });
         };
         LocalSettingsService.prototype.setProperty = function (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();
         };
         LocalSettingsService.prototype.getProperty = function (keyOrDef, defaultValue) {
             if (typeof keyOrDef === 'object') {
                 return this.getProperty(keyOrDef.key, isNil(defaultValue) ? keyOrDef.defaultValue : defaultValue);
             }
-            var value = this.data && this.data.properties && this.data.properties[keyOrDef];
+            var value = this._data && this._data.properties && this._data.properties[keyOrDef];
             return isNotNil(value) ? value : defaultValue;
         };
         LocalSettingsService.prototype.getPropertyAsBoolean = function (definition, defaultValue) {
@@ -9765,19 +9820,25 @@
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            this.data = Object.assign(Object.assign({}, this.data), settings);
-                            if (!(opts && opts.persistImmediate)) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this.persistLocally(true)];
+                            if (!!this.started) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.ready()];
                         case 1:
                             _a.sent();
-                            return [3 /*break*/, 3];
+                            _a.label = 2;
                         case 2:
-                            this.persistLocally(); // No AWAIT
-                            _a.label = 3;
+                            this._data = Object.assign(Object.assign({}, this._data), settings);
+                            if (!(opts && opts.persistImmediate)) return [3 /*break*/, 4];
+                            return [4 /*yield*/, this.persistLocally(true)];
                         case 3:
+                            _a.sent();
+                            return [3 /*break*/, 5];
+                        case 4:
+                            this.persistLocally(); // No AWAIT
+                            _a.label = 5;
+                        case 5:
                             // Emit event
                             if (!opts || opts.emitEvent !== false) {
-                                this.onChange.next(this.data);
+                                this.onChange.next(this._data);
                             }
                             return [2 /*return*/];
                     }
@@ -9801,27 +9862,27 @@
             });
         };
         LocalSettingsService.prototype.getPageSettings = function (pageId, propertyName) {
-            if (!this.data || !this.data.pages)
+            if (!this._data || !this._data.pages)
                 return undefined;
             var 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];
         };
         LocalSettingsService.prototype.savePageSetting = function (pageId, value, propertyName) {
             return __awaiter(this, void 0, void 0, function () {
                 var key;
                 return __generator(this, function (_a) {
-                    this.data = this.data || this.defaultSettings;
-                    this.data.pages = this.data.pages || {};
+                    this._data = this._data || this.defaultSettings;
+                    this._data.pages = this._data.pages || {};
                     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();
@@ -9830,13 +9891,13 @@
             });
         };
         LocalSettingsService.prototype.getOfflineFeature = function (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();
             var featurePrefix = featureName + '#';
-            var feature = this.data.offlineFeatures.find(function (f) {
+            var feature = this._data.offlineFeatures.find(function (f) {
                 if (typeof f === 'string')
                     return f.toLowerCase().startsWith(featurePrefix);
                 if (typeof f === 'object' && f.name)
@@ -9859,24 +9920,24 @@
         LocalSettingsService.prototype.hasOfflineFeature = function (featureName) {
             if (featureName)
                 return isNotNil(this.getOfflineFeature(featureName));
-            return this.data && isNotEmptyArray(this.data.offlineFeatures);
+            return this._data && isNotEmptyArray(this._data.offlineFeatures);
         };
         LocalSettingsService.prototype.saveOfflineFeature = function (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();
             var featurePrefix = feature.name + '#';
-            var existingIndex = this.data.offlineFeatures.findIndex(function (f) {
+            var existingIndex = this._data.offlineFeatures.findIndex(function (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();
@@ -9895,14 +9956,14 @@
             this.saveOfflineFeature(feature);
         };
         LocalSettingsService.prototype.removeOfflineFeatures = function () {
-            if (this.data && this.data.offlineFeatures) {
-                this.data.offlineFeatures = [];
+            if (this._data && this._data.offlineFeatures) {
+                this._data.offlineFeatures = [];
                 // Update local settings
                 this.persistLocally();
             }
         };
         LocalSettingsService.prototype.getFieldDisplayAttributes = function (fieldName, defaultAttributes) {
-            var value = this.data && this.data.properties && this.data.properties["sumaris.field." + fieldName + ".attributes"];
+            var 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'];
@@ -9940,7 +10001,7 @@
                             // 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;
                             index = pageHistory.findIndex(function (p) { return (
                             // same path
                             p.path === page.path
@@ -9975,10 +10036,10 @@
                             _a.sent();
                             _a.label = 4;
                         case 4:
-                            if (!(pageHistory === this.data.pageHistory)) return [3 /*break*/, 6];
+                            if (!(pageHistory === this._data.pageHistory)) return [3 /*break*/, 6];
                             // If max has been reached, remove old pages
-                            if (this.data.pageHistory.length > this.data.pageHistoryMaxSize) {
-                                removedPages = pageHistory.splice(this.data.pageHistoryMaxSize, pageHistory.length - this.data.pageHistoryMaxSize);
+                            if (this._data.pageHistory.length > this._data.pageHistoryMaxSize) {
+                                removedPages = pageHistory.splice(this._data.pageHistoryMaxSize, pageHistory.length - this._data.pageHistoryMaxSize);
                                 console.debug('[settings] Pages removed from history: ', removedPages);
                             }
                             // Apply new value
@@ -10000,7 +10061,7 @@
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            pageHistory = pageHistory || this.data.pageHistory;
+                            pageHistory = pageHistory || this._data.pageHistory;
                             index = pageHistory.findIndex(function (p) { return p.path === path; });
                             found = index !== -1;
                             if (found) {
@@ -10015,9 +10076,9 @@
                                     .filter(isNotEmptyArray)
                                     .findIndex(function (children) { return _this.removePageHistory(path, opts, children); }) !== -1;
                             }
-                            if (!(found && pageHistory === this.data.pageHistory)) return [3 /*break*/, 2];
+                            if (!(found && pageHistory === this._data.pageHistory)) return [3 /*break*/, 2];
                             // Apply changes
-                            return [4 /*yield*/, this.applyProperty('pageHistory', this.data.pageHistory)];
+                            return [4 /*yield*/, this.applyProperty('pageHistory', this._data.pageHistory)];
                         case 1:
                             // Apply changes
                             _a.sent();
@@ -10044,27 +10105,27 @@
         };
         /* -- Protected methods -- */
         LocalSettingsService.prototype.resetData = function () {
-            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 = [];
             var defaultPeer = this.environment.defaultPeer && exports.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);
         };
         LocalSettingsService.prototype.persistLocally = function (immediate) {
             var _this = this;
             // 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
@@ -10074,7 +10135,7 @@
                     this._$persist = new i0.EventEmitter(true);
                     this._$persist
                         .pipe(operators.debounceTime(2000), // add a delay of 2s
-                    operators.filter(function () { return _this._started; }))
+                    operators.filter(function () { return _this.started; }))
                         .subscribe(function () { return _this.persistLocally(true); });
                 }
                 this._$persist.emit();
@@ -10100,7 +10161,7 @@
             return page;
         };
         return LocalSettingsService;
-    }());
+    }(StartableService));
     LocalSettingsService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function LocalSettingsService_Factory() { return new LocalSettingsService(i0__namespace.ɵɵinject(i1__namespace$1.TranslateService), i0__namespace.ɵɵinject(i1__namespace$4.Platform), i0__namespace.ɵɵinject(i3__namespace$1.Storage), i0__namespace.ɵɵinject(ENVIRONMENT), i0__namespace.ɵɵinject(APP_LOCAL_SETTINGS, 8), i0__namespace.ɵɵinject(APP_LOCAL_SETTINGS_OPTIONS, 8)); }, token: LocalSettingsService, providedIn: "root" });
     LocalSettingsService.decorators = [
         { type: i0.Injectable, args: [{
@@ -10271,41 +10332,42 @@
         MOBILE:  1000,
         DESKTOP: 1000
     }*/
-    var NetworkService = /** @class */ (function () {
+    var NetworkService = /** @class */ (function (_super) {
+        __extends(NetworkService, _super);
         function NetworkService(_document, platform, modalCtrl, cryptoService, storage, settings, cache, http, environment, network, splashScreen, translate, toastController) {
-            var _this = this;
-            this._document = _document;
-            this.platform = platform;
-            this.modalCtrl = modalCtrl;
-            this.cryptoService = cryptoService;
-            this.storage = storage;
-            this.settings = settings;
-            this.cache = cache;
-            this.http = http;
-            this.environment = environment;
-            this.network = network;
-            this.splashScreen = splashScreen;
-            this.translate = translate;
-            this.toastController = toastController;
-            this._started = false;
-            this._subscription = new rxjs.Subscription();
-            this._listeners = {};
-            this.onStart = new rxjs.Subject();
-            this.onPeerChanges = this.onStart.pipe(operators.map(function (peer) { return peer && peer.url; }), operators.filter(isNotNilOrBlank), operators.distinctUntilChanged());
-            this.onNetworkStatusChanges = new rxjs.BehaviorSubject(null);
-            this.onResetNetworkCache = new i0.EventEmitter(true);
-            this._mobile = this.platform.is('mobile');
-            if (this._mobile) {
-                this._timerRefreshPeriod = NetworkRefreshTimerPeriod.MOBILE;
-                this._timerRefreshCondition = function () { return _this.online; }; // Check only when online, and stop when offline
+            var _this = _super.call(this, platform) || this;
+            _this._document = _document;
+            _this.platform = platform;
+            _this.modalCtrl = modalCtrl;
+            _this.cryptoService = cryptoService;
+            _this.storage = storage;
+            _this.settings = settings;
+            _this.cache = cache;
+            _this.http = http;
+            _this.environment = environment;
+            _this.network = network;
+            _this.splashScreen = splashScreen;
+            _this.translate = translate;
+            _this.toastController = toastController;
+            _this.onPeerChanges = _this.onStart.pipe(operators.map(function (peer) { return peer && peer.url; }), operators.filter(isNotNilOrBlank), operators.distinctUntilChanged());
+            _this.onNetworkStatusChanges = new rxjs.BehaviorSubject(null);
+            _this.onResetNetworkCache = new i0.EventEmitter(true);
+            _this._subscription = new rxjs.Subscription();
+            _this._listeners = {};
+            _this._mobile = _this.platform.is('mobile');
+            if (_this._mobile) {
+                _this._timerRefreshPeriod = NetworkRefreshTimerPeriod.MOBILE;
+                _this._timerRefreshCondition = function () { return _this.online; }; // Check only when online, and stop when offline
             }
             else {
-                this._timerRefreshPeriod = NetworkRefreshTimerPeriod.DESKTOP;
-                this._timerRefreshCondition = function () { return true; }; // Always check
+                _this._timerRefreshPeriod = NetworkRefreshTimerPeriod.DESKTOP;
+                _this._timerRefreshCondition = function () { return true; }; // Always check
             }
-            this.resetData();
+            _this.resetData();
+            _this.onStart.subscribe(function () { return _this.ngOnAfterStart(); });
             // For DEV only
-            this._debug = !environment.production;
+            _this._debug = !environment.production;
+            return _this;
         }
         Object.defineProperty(NetworkService.prototype, "online", {
             get: function () {
@@ -10326,24 +10388,18 @@
                 // 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');
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(NetworkService.prototype, "peer", {
             get: function () {
-                return this._peer && this._peer.clone();
+                return this._data && this._data.clone();
             },
             set: function (peer) {
-                this.restart(peer);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(NetworkService.prototype, "started", {
-            get: function () {
-                return this._started;
+                this._startingPeer = peer;
+                this.restart();
             },
             enumerable: false,
             configurable: true
@@ -10368,109 +10424,11 @@
                     return this.addListener(eventType, callback);
             }
         };
-        NetworkService.prototype.start = function (peer) {
-            return __awaiter(this, void 0, void 0, function () {
-                var _this = this;
-                return __generator(this, function (_a) {
-                    if (this._startPromise)
-                        return [2 /*return*/, this._startPromise];
-                    if (this._started)
-                        return [2 /*return*/];
-                    console.info('[network] Starting network...');
-                    // Restoring local settings
-                    this._startPromise = (!peer && this.restoreLocally() || Promise.resolve(peer))
-                        .then(function (peer) { return __awaiter(_this, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            switch (_a.label) {
-                                case 0:
-                                    // Make sure to hide the splashscreen, before open the modal
-                                    if (!peer && this.splashScreen)
-                                        this.splashScreen.hide();
-                                    _a.label = 1;
-                                case 1:
-                                    if (!!peer) return [3 /*break*/, 3];
-                                    console.debug('[network] No peer defined. Asking user to choose a peer.');
-                                    return [4 /*yield*/, this.showSelectPeerModal({ allowSelectDownPeer: false })];
-                                case 2:
-                                    peer = _a.sent();
-                                    return [3 /*break*/, 1];
-                                case 3:
-                                    this._peer = peer;
-                                    this._started = true;
-                                    this._startPromise = undefined;
-                                    this.onStart.next(peer);
-                                    console.info("[platform] Starting network [OK] {online: " + this.online + "}");
-                                    return [2 /*return*/];
-                            }
-                        });
-                    }); })
-                        .catch(function (err) {
-                        console.error(err && err.message || err, err);
-                        _this._started = false;
-                        _this._startPromise = undefined;
-                    })
-                        // Wait settings starts, then save peer in settings
-                        .then(function () { return _this.settings.ready(); })
-                        .then(function () { return _this.settings.apply({ peerUrl: _this._peer.url }); })
-                        .then(function () { return _this.onDeviceConnectionChanged(_this.network && _this.network.type || 'unknown'); })
-                        // Start the refresh timer
-                        .then(function () { return _this.startRefreshTimer(); });
-                    // Listen for device network changes
-                    if (this.network) {
-                        this._subscription.add(this.network.onDisconnect().subscribe(function () { return _this.onDeviceConnectionChanged('none'); }));
-                        this._subscription.add(this.network.onConnect().subscribe(function () { return _this.onDeviceConnectionChanged(_this.network.type); }));
-                    }
-                    return [2 /*return*/, this._startPromise];
-                });
-            });
-        };
-        NetworkService.prototype.ready = function () {
-            if (this._started)
-                return Promise.resolve();
-            return this.start();
-        };
-        NetworkService.prototype.stop = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    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 rxjs.Subscription();
-                    return [2 /*return*/];
-                });
-            });
-        };
-        NetworkService.prototype.restart = function (peer) {
-            return __awaiter(this, void 0, void 0, function () {
-                var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!this._started) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this.stop()
-                                    .then(function () { return _this.start(peer); })];
-                        case 1:
-                            _a.sent();
-                            return [3 /*break*/, 4];
-                        case 2: return [4 /*yield*/, this.start(peer)];
-                        case 3:
-                            _a.sent();
-                            _a.label = 4;
-                        case 4: return [2 /*return*/];
-                    }
-                });
-            });
-        };
         NetworkService.prototype.tryOnline = function (opts) {
             return __awaiter(this, void 0, void 0, function () {
-                var now, showLoadingToast, loadingToast, settings, peer, peerInfo, peerAliveAndCompatible, _a, err_1, online;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var now, showLoadingToast, loadingToast, settings, peer, peerInfo, peerAliveAndCompatible, _b, err_1, online;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             // If offline mode not forced, and device says there is no connection: skip
                             if (!this._forceOffline || this._deviceConnectionType === 'none')
@@ -10481,57 +10439,57 @@
                             return [4 /*yield*/, this.showToast({ message: 'NETWORK.INFO.RETRY_TO_CONNECT',
                                     duration: 10000, onWillPresent: function (t) { return loadingToast = t; } })];
                         case 1:
-                            _b.sent();
-                            _b.label = 2;
+                            _c.sent();
+                            _c.label = 2;
                         case 2:
-                            _b.trys.push([2, 10, , 11]);
+                            _c.trys.push([2, 10, , 11]);
                             console.info('[network] Checking connection to pod...');
                             return [4 /*yield*/, this.settings.ready()];
                         case 3:
-                            settings = _b.sent();
+                            settings = _c.sent();
                             if (!settings.peerUrl)
                                 return [2 /*return*/, false]; // No peer define. Skip
                             peer = exports.Peer.parseUrl(settings.peerUrl);
                             return [4 /*yield*/, this.checkPeerAlive(peer)];
                         case 4:
-                            peerInfo = _b.sent();
-                            _a = peerInfo;
-                            if (!_a) return [3 /*break*/, 6];
+                            peerInfo = _c.sent();
+                            _b = peerInfo;
+                            if (!_b) return [3 /*break*/, 6];
                             return [4 /*yield*/, this.checkPeerCompatible(peerInfo)];
                         case 5:
-                            _a = (_b.sent());
-                            _b.label = 6;
+                            _b = (_c.sent());
+                            _c.label = 6;
                         case 6:
-                            peerAliveAndCompatible = _a;
+                            peerAliveAndCompatible = _b;
                             if (!peerAliveAndCompatible) return [3 /*break*/, 9];
                             // Disable the offline mode
                             this.setForceOffline(false);
                             // Restart
-                            return [4 /*yield*/, this.restart(peer)];
+                            this._startingPeer = peer;
+                            return [4 /*yield*/, this.restart()];
                         case 7:
-                            // Restart
-                            _b.sent();
+                            _c.sent();
                             // Wait a promise, before recheck
                             return [4 /*yield*/, this.emit('beforeTryOnlineFinish', this.online)];
                         case 8:
                             // Wait a promise, before recheck
-                            _b.sent();
-                            _b.label = 9;
+                            _c.sent();
+                            _c.label = 9;
                         case 9: return [3 /*break*/, 11];
                         case 10:
-                            err_1 = _b.sent();
+                            err_1 = _c.sent();
                             console.error(err_1 && err_1.message || err_1);
                             return [3 /*break*/, 11];
                         case 11:
                             if (!showLoadingToast) return [3 /*break*/, 14];
                             return [4 /*yield*/, sleep(2000 - (Date.now() - now))];
                         case 12:
-                            _b.sent();
+                            _c.sent();
                             if (!loadingToast) return [3 /*break*/, 14];
                             return [4 /*yield*/, loadingToast.dismiss()];
                         case 13:
-                            _b.sent();
-                            _b.label = 14;
+                            _c.sent();
+                            _c.label = 14;
                         case 14:
                             online = this.online;
                             // Display a toast to user
@@ -10545,7 +10503,7 @@
                                 // Display toast (without await, because not need to wait toast close event)
                                 return [2 /*return*/, this.showOfflineToast({ showRetryButton: false })];
                             }
-                            return [2 /*return*/, this._started && online];
+                            return [2 /*return*/, this.started && online];
                     }
                 });
             });
@@ -10553,8 +10511,8 @@
         NetworkService.prototype.showOfflineToast = function (opts) {
             return __awaiter(this, void 0, void 0, function () {
                 var toastResult, online;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             if (this.online)
                                 return [2 /*return*/]; // Skip if online
@@ -10573,7 +10531,7 @@
                                     ]
                                 })];
                         case 1:
-                            toastResult = _a.sent();
+                            toastResult = _b.sent();
                             // User don't click reconnect: return
                             if (!toastResult || toastResult.role !== 'refresh')
                                 return [2 /*return*/, false];
@@ -10586,7 +10544,7 @@
                                     showLoadingToast: toBoolean(opts && opts.showRetryLoadingToast, true)
                                 })];
                         case 2:
-                            online = _a.sent();
+                            online = _b.sent();
                             if (online) {
                                 // Call success callback (async)
                                 if (opts && opts.onRetrySuccess) {
@@ -10595,7 +10553,7 @@
                                 return [2 /*return*/, true];
                             }
                             opts = Object.assign(Object.assign({}, opts), { showRetryButton: false, showCloseButton: true });
-                            _a.label = 3;
+                            _b.label = 3;
                         case 3:
                             // Simple toast, without 'await', because not need to wait toast's dismiss
                             this.showToast(Object.assign({ message: 'ERROR.NETWORK_REQUIRED', type: 'error' }, opts));
@@ -10604,97 +10562,6 @@
                 });
             });
         };
-        /**
-         * Try to restore peer from the local storage
-         */
-        NetworkService.prototype.restoreLocally = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var settingsStr, settings, location, hostname, detectedPeer;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.storage.get(SETTINGS_STORAGE_KEY)];
-                        case 1:
-                            settingsStr = _a.sent();
-                            settings = settingsStr && JSON.parse(settingsStr) || undefined;
-                            if (settings && settings.peerUrl) {
-                                console.debug("[network] Use peer {" + settings.peerUrl + "} (found in the local storage)");
-                                return [2 /*return*/, exports.Peer.parseUrl(settings.peerUrl)];
-                            }
-                            // Else, use default peer in env, if exists
-                            if (this.environment.defaultPeer) {
-                                return [2 /*return*/, exports.Peer.fromObject(this.environment.defaultPeer)];
-                            }
-                            location = this._document && this._document.location;
-                            if (!(location && location.protocol && location.protocol.startsWith('http'))) return [3 /*break*/, 3];
-                            hostname = this._document.location.host;
-                            detectedPeer = exports.Peer.parseUrl("" + this._document.location.protocol + hostname + this.environment.baseUrl);
-                            return [4 /*yield*/, this.checkPeerAlive(detectedPeer)];
-                        case 2:
-                            if (_a.sent()) {
-                                return [2 /*return*/, detectedPeer];
-                            }
-                            _a.label = 3;
-                        case 3: return [2 /*return*/, undefined];
-                    }
-                });
-            });
-        };
-        /**
-         * Refresh network state, using a ping to pod
-         */
-        NetworkService.prototype.refreshPeerState = function (opts) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    return [2 /*return*/];
-                });
-            });
-        };
-        /**
-         * Stop to network state
-         *
-         * @protected
-         */
-        NetworkService.prototype.stopRefreshTimer = function () {
-            if (this._timerSubscription) {
-                this._timerSubscription.unsubscribe();
-                this._timerSubscription = undefined;
-            }
-        };
-        /**
-         * Refresh the network state
-         *
-         * @protected
-         */
-        NetworkService.prototype.startRefreshTimer = function () {
-            var _this = this;
-            if (this._timerSubscription)
-                return; // Already running: skip
-            console.info("[network] Starting refresh timer, every " + this._timerRefreshPeriod + "ms...");
-            var lastInfo;
-            this._timerSubscription = rxjs.timer(this._timerRefreshPeriod, this._timerRefreshPeriod)
-                .pipe(
-            // Skip some timer event (see constructor)
-            operators.filter(this._timerRefreshCondition), 
-            // Checkin if peer alive
-            operators.tap(function () { return console.debug('[network] Checking connection to pod...'); }), operators.mergeMap(function () { return _this.checkPeerAlive(_this.peer); }), 
-            // Filter to keep only changes
-            operators.filter(function (info) { return !!info !== !!lastInfo; }), operators.tap(function (info) { return lastInfo = info; }), 
-            // Check compatibility
-            operators.mergeMap(function (info) { return _this.checkPeerCompatible(info, { showToast: true }); }))
-                .subscribe(function (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(function () { return console.debug('[network] Refresh timer stopped'); });
-        };
         /**
          * Check if the peer is alive
          *
@@ -10703,24 +10570,24 @@
         NetworkService.prototype.checkPeerAlive = function (peer, opts) {
             return __awaiter(this, void 0, void 0, function () {
                 var settings, err_2;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             peer = peer || this.peer;
                             if (!!peer) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.settings.ready()];
                         case 1:
-                            settings = _a.sent();
+                            settings = _b.sent();
                             if (!settings.peerUrl)
                                 return [2 /*return*/, undefined]; // No peer define. Skip
                             peer = exports.Peer.parseUrl(settings.peerUrl);
-                            _a.label = 2;
+                            _b.label = 2;
                         case 2:
-                            _a.trys.push([2, 4, , 5]);
+                            _b.trys.push([2, 4, , 5]);
                             return [4 /*yield*/, this.getNodeInfo(peer)];
-                        case 3: return [2 /*return*/, _a.sent()];
+                        case 3: return [2 /*return*/, _b.sent()];
                         case 4:
-                            err_2 = _a.sent();
+                            err_2 = _b.sent();
                             console.debug('[network] Cannot get /api/node/info from peer: ' + (err_2 && err_2.message || err_2), err_2);
                             return [2 /*return*/, undefined];
                         case 5: return [2 /*return*/];
@@ -10731,8 +10598,8 @@
         NetworkService.prototype.checkPeerCompatible = function (peerInfo, opts) {
             return __awaiter(this, void 0, void 0, function () {
                 var isCompatible;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             if (!this.environment.peerMinVersion)
                                 return [2 /*return*/, true]; // Skip compatibility check
@@ -10747,8 +10614,8 @@
                                     showCloseButton: true
                                 })];
                         case 1:
-                            _a.sent();
-                            _a.label = 2;
+                            _b.sent();
+                            _b.label = 2;
                         case 2: return [2 /*return*/, isCompatible];
                     }
                 });
@@ -10788,8 +10655,8 @@
             return __awaiter(this, void 0, void 0, function () {
                 var $onRefresh, peers$, modal, data;
                 var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             opts = opts || {};
                             $onRefresh = new i0.EventEmitter();
@@ -10806,14 +10673,14 @@
                                     showBackdrop: true
                                 })];
                         case 1:
-                            modal = _a.sent();
+                            modal = _b.sent();
                             return [4 /*yield*/, modal.present()];
                         case 2:
-                            _a.sent();
+                            _b.sent();
                             $onRefresh.emit();
                             return [4 /*yield*/, modal.onWillDismiss()];
                         case 3:
-                            data = (_a.sent()).data;
+                            data = (_b.sent()).data;
                             $onRefresh.complete();
                             return [2 /*return*/, data && data || undefined];
                     }
@@ -10824,7 +10691,7 @@
             return __awaiter(this, void 0, void 0, function () {
                 var now;
                 var _this = this;
-                return __generator(this, function (_a) {
+                return __generator(this, function (_b) {
                     now = this._debug && Date.now();
                     console.info('[network] Clearing all caches...');
                     return [2 /*return*/, this.cache.clearAll()
@@ -10843,10 +10710,164 @@
                 });
             });
         };
+        /* -- protected functions -- */
+        NetworkService.prototype.ngOnStart = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var peer, _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            console.info('[network] Starting network...', this._startingPeer);
+                            _b = this._startingPeer;
+                            if (_b) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.restoreLocally()];
+                        case 1:
+                            _b = (_c.sent());
+                            _c.label = 2;
+                        case 2:
+                            peer = _b;
+                            // Make sure to hide the splashscreen, before open the modal
+                            if (!peer && this.splashScreen)
+                                this.splashScreen.hide();
+                            _c.label = 3;
+                        case 3:
+                            if (!!peer) return [3 /*break*/, 5];
+                            console.debug('[network] No peer defined. Asking user to choose a peer.');
+                            return [4 /*yield*/, this.showSelectPeerModal({ allowSelectDownPeer: false })];
+                        case 4:
+                            peer = _c.sent();
+                            return [3 /*break*/, 3];
+                        case 5:
+                            console.info("[network] Starting service [OK] {peer: '" + peer.url + "', online: " + this.online + "}");
+                            return [2 /*return*/, peer];
+                    }
+                });
+            });
+        };
+        NetworkService.prototype.ngOnAfterStart = function () {
+            var _a;
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: 
+                        // Wait settings starts, then save peer in settings
+                        return [4 /*yield*/, this.settings.apply({ peerUrl: this._data.url })];
+                        case 1:
+                            // Wait settings starts, then save peer in settings
+                            _b.sent();
+                            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(function () { return _this.onDeviceConnectionChanged('none'); }));
+                                this._subscription.add(this.network.onConnect().subscribe(function () { return _this.onDeviceConnectionChanged(_this.network.type); }));
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        NetworkService.prototype.ngOnStop = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    this.resetData();
+                    // Stop timer if cannot refresh anymore
+                    if (this._timerRefreshCondition() === false) {
+                        this.stopRefreshTimer();
+                    }
+                    this._subscription.unsubscribe();
+                    this._subscription = new rxjs.Subscription();
+                    return [2 /*return*/];
+                });
+            });
+        };
+        /**
+         * Try to restore peer from the local storage
+         */
+        NetworkService.prototype.restoreLocally = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var settingsStr, settings, location, hostname, detectedPeer;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this.storage.get(SETTINGS_STORAGE_KEY)];
+                        case 1:
+                            settingsStr = _b.sent();
+                            settings = settingsStr && JSON.parse(settingsStr) || undefined;
+                            if (settings && settings.peerUrl) {
+                                console.debug("[network] Use peer {" + settings.peerUrl + "} (found in the local storage)");
+                                return [2 /*return*/, exports.Peer.parseUrl(settings.peerUrl)];
+                            }
+                            // Else, use default peer in env, if exists
+                            if (this.environment.defaultPeer) {
+                                return [2 /*return*/, exports.Peer.fromObject(this.environment.defaultPeer)];
+                            }
+                            location = this._document && this._document.location;
+                            if (!(location && location.protocol && location.protocol.startsWith('http'))) return [3 /*break*/, 3];
+                            hostname = this._document.location.host;
+                            detectedPeer = exports.Peer.parseUrl("" + this._document.location.protocol + hostname + this.environment.baseUrl);
+                            return [4 /*yield*/, this.checkPeerAlive(detectedPeer)];
+                        case 2:
+                            if (_b.sent()) {
+                                return [2 /*return*/, detectedPeer];
+                            }
+                            _b.label = 3;
+                        case 3: return [2 /*return*/, undefined];
+                    }
+                });
+            });
+        };
+        /**
+         * Stop to network state
+         *
+         * @protected
+         */
+        NetworkService.prototype.stopRefreshTimer = function () {
+            if (this._timerSubscription) {
+                this._timerSubscription.unsubscribe();
+                this._timerSubscription = undefined;
+            }
+        };
+        /**
+         * Refresh the network state
+         *
+         * @protected
+         */
+        NetworkService.prototype.startRefreshTimer = function () {
+            var _this = this;
+            if (this._timerSubscription)
+                return; // Already running: skip
+            console.info("[network] Starting refresh timer, every " + this._timerRefreshPeriod + "ms...");
+            var lastInfo;
+            this._timerSubscription = rxjs.timer(this._timerRefreshPeriod, this._timerRefreshPeriod)
+                .pipe(
+            // Skip some timer event (see constructor)
+            operators.filter(this._timerRefreshCondition), 
+            // Checkin if peer alive
+            operators.tap(function () { return console.debug('[network] Checking connection to pod...'); }), operators.mergeMap(function () { return _this.checkPeerAlive(_this.peer); }), 
+            // Filter to keep only changes
+            operators.filter(function (info) { return !!info !== !!lastInfo; }), operators.tap(function (info) { return lastInfo = info; }), 
+            // Check compatibility
+            operators.mergeMap(function (info) { return _this.checkPeerCompatible(info, { showToast: true }); }))
+                .subscribe(function (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(function () { return console.debug('[network] Refresh timer stopped'); });
+        };
         NetworkService.prototype.get = function (path, opts) {
             return __awaiter(this, void 0, void 0, function () {
                 var uri, peerUrl;
-                return __generator(this, function (_a) {
+                return __generator(this, function (_b) {
                     uri = path;
                     // If path is not an URI: prepend with peer URL
                     if (!uri.startsWith('http://') && !uri.startsWith('https://')) {
@@ -10897,7 +10918,7 @@
             }
         };
         NetworkService.prototype.resetData = function () {
-            this._peer = null;
+            this._data = null;
         };
         /**
          * Get default peers, from environment
@@ -10905,7 +10926,7 @@
         NetworkService.prototype.getDefaultPeers = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var peers;
-                return __generator(this, function (_a) {
+                return __generator(this, function (_b) {
                     peers = (this.environment.defaultPeers || []).map(exports.Peer.fromObject);
                     return [2 /*return*/, Promise.resolve(peers)];
                 });
@@ -10929,7 +10950,7 @@
         NetworkService.prototype.emit = function (name, data) {
             return __awaiter(this, void 0, void 0, function () {
                 var hooks;
-                return __generator(this, function (_a) {
+                return __generator(this, function (_b) {
                     hooks = this._listeners[name];
                     if (isNotEmptyArray(hooks)) {
                         console.info("[network-service] Trigger " + name + " hook: Executing " + hooks.length + " callbacks...");
@@ -10945,7 +10966,7 @@
             });
         };
         return NetworkService;
-    }());
+    }(StartableService));
     NetworkService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function NetworkService_Factory() { return new NetworkService(i0__namespace.ɵɵinject(i1__namespace$3.DOCUMENT), i0__namespace.ɵɵinject(i1__namespace$4.Platform), i0__namespace.ɵɵinject(i1__namespace$4.ModalController), i0__namespace.ɵɵinject(CryptoService), i0__namespace.ɵɵinject(i3__namespace$1.Storage), i0__namespace.ɵɵinject(LocalSettingsService), i0__namespace.ɵɵinject(i6__namespace.CacheService), i0__namespace.ɵɵinject(i2__namespace$2.HttpClient), i0__namespace.ɵɵinject(ENVIRONMENT), i0__namespace.ɵɵinject(i9__namespace.Network, 8), i0__namespace.ɵɵinject(i10__namespace.SplashScreen, 8), i0__namespace.ɵɵinject(i1__namespace$1.TranslateService, 8), i0__namespace.ɵɵinject(i1__namespace$4.ToastController, 8)); }, token: NetworkService, providedIn: "root" });
     NetworkService.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
@@ -11548,31 +11569,31 @@
     }());
 
     var APP_LOCAL_STORAGE_TYPE_POLICIES = new i0.InjectionToken('localStorageTypePolicies');
-    var EntitiesStorage = /** @class */ (function () {
+    ;
+    var EntitiesStorage = /** @class */ (function (_super) {
+        __extends(EntitiesStorage, _super);
         function EntitiesStorage(platform, progressBarService, storage, environment, typePolicies) {
-            this.platform = platform;
-            this.progressBarService = progressBarService;
-            this.storage = storage;
-            this.environment = environment;
-            this._started = false;
-            this._subscription = new rxjs.Subscription();
-            this._stores = {};
-            this._$save = new i0.EventEmitter(true);
-            this._dirty = false;
-            this._saving = false;
-            this.onStart = new rxjs.Subject();
-            this._typePolicies = typePolicies || {};
+            var _this = _super.call(this, platform) || this;
+            _this.platform = platform;
+            _this.progressBarService = progressBarService;
+            _this.storage = storage;
+            _this.environment = environment;
+            _this._subscription = new rxjs.Subscription();
+            _this._$save = new i0.EventEmitter(true);
+            _this._dirty = false;
+            _this._saving = false;
+            _this._typePolicies = typePolicies || {};
+            _this._saveTimerPeriod = environment.storageSavePeriodMs || 10000 /* = 10s */;
+            _this._data = {};
             // For DEV only
-            this._debug = !environment.production;
-            if (this._debug)
+            _this._debug = !environment.production;
+            if (_this._debug)
                 console.debug('[entities-storage] Creating service');
+            return _this;
         }
         Object.defineProperty(EntitiesStorage.prototype, "dirty", {
             get: function () {
-                return this._dirty || Object.entries(this._stores).find(function (_a) {
-                    var _b = __read(_a, 2), _ = _b[0], store = _b[1];
-                    return store.dirty;
-                }) !== undefined;
+                return this._dirty || Object.values(this._data).some(function (store) { return store.dirty; });
             },
             enumerable: false,
             configurable: true
@@ -11580,7 +11601,7 @@
         EntitiesStorage.prototype.watchAll = function (entityName, variables, opts) {
             var _this = this;
             // Make sure store is ready
-            if (!this._started) {
+            if (!this.started) {
                 return rxjs.defer(function () { return _this.ready(); })
                     .pipe(operators.switchMap(function () { return _this.watchAll(entityName, variables, opts); })); // Loop
             }
@@ -11597,7 +11618,7 @@
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            if (!!this._started) return [3 /*break*/, 2];
+                            if (!!this.started) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.ready()];
                         case 1:
                             _a.sent();
@@ -11700,9 +11721,12 @@
                         case 0:
                             if (!entity)
                                 return [2 /*return*/]; // skip
+                            if (!!this.started) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.ready()];
                         case 1:
                             _a.sent();
+                            _a.label = 2;
+                        case 2:
                             try {
                                 this.progressBarService.increase();
                                 this._dirty = true;
@@ -11729,9 +11753,12 @@
                         case 0:
                             if (isEmptyArray(entities) && (!opts || opts.reset !== true))
                                 return [2 /*return*/, entities]; // Skip (nothing to save)
+                            if (!!this.started) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.ready()];
                         case 1:
                             _a.sent();
+                            _a.label = 2;
+                        case 2:
                             try {
                                 this.progressBarService.increase();
                                 this._dirty = true;
@@ -11753,10 +11780,12 @@
                         case 0:
                             if (!entity)
                                 return [2 /*return*/, undefined]; // skip
+                            if (!!this.started) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.ready()];
                         case 1:
                             _a.sent();
-                            return [2 /*return*/, this.deleteById(entity.id, Object.assign(Object.assign({}, opts), { entityName: opts && opts.entityName || this.detectEntityName(entity) }))];
+                            _a.label = 2;
+                        case 2: return [2 /*return*/, this.deleteById(entity.id, Object.assign(Object.assign({}, opts), { entityName: opts && opts.entityName || this.detectEntityName(entity) }))];
                     }
                 });
             });
@@ -11766,9 +11795,13 @@
                 var entityStore, deletedEntity;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.ready()];
+                        case 0:
+                            if (!!this.started) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.ready()];
                         case 1:
                             _a.sent();
+                            _a.label = 2;
+                        case 2:
                             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);
@@ -11800,9 +11833,13 @@
                 var entityStore, deletedEntities;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.ready()];
+                        case 0:
+                            if (!!this.started) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.ready()];
                         case 1:
                             _a.sent();
+                            _a.label = 2;
+                        case 2:
                             if (!opts || isNilOrBlank(opts.entityName))
                                 throw new Error('Missing argument \'opts\' or \'opts.entityName\'');
                             try {
@@ -11835,10 +11872,12 @@
                         case 0:
                             if (!entity)
                                 return [2 /*return*/, undefined]; // skip
+                            if (!!this.started) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.ready()];
                         case 1:
                             _a.sent();
-                            return [2 /*return*/, this.deleteFromTrashById(entity.id, Object.assign(Object.assign({}, opts), { entityName: opts && opts.entityName || this.detectEntityName(entity) }))];
+                            _a.label = 2;
+                        case 2: return [2 /*return*/, this.deleteFromTrashById(entity.id, Object.assign(Object.assign({}, opts), { entityName: opts && opts.entityName || this.detectEntityName(entity) }))];
                     }
                 });
             });
@@ -11865,9 +11904,12 @@
                         case 0:
                             if (!entity)
                                 return [2 /*return*/, undefined]; // skip
+                            if (!!this.started) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.ready()];
                         case 1:
                             _a.sent();
+                            _a.label = 2;
+                        case 2:
                             entityName = opts && opts.entityName || this.detectEntityName(entity);
                             entityStore = this.getEntityStore(entityName);
                             if (entityStore)
@@ -11887,9 +11929,13 @@
                 var entityStore, deletedEntities, trashName;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.ready()];
+                        case 0:
+                            if (!!this.started) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.ready()];
                         case 1:
                             _a.sent();
+                            _a.label = 2;
+                        case 2:
                             if (!opts || isNilOrBlank(opts.entityName))
                                 throw new Error('Missing argument \'opts.entityName\'');
                             entityStore = this.getEntityStore(opts.entityName, { create: false });
@@ -11921,9 +11967,12 @@
                         case 0:
                             if (!entity)
                                 return [2 /*return*/, undefined]; // skip
+                            if (!!this.started) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.ready()];
                         case 1:
                             _a.sent();
+                            _a.label = 2;
+                        case 2:
                             entityName = opts && opts.entityName || this.detectEntityName(entity);
                             trashName = EntitiesStorage.TRASH_PREFIX + entityName;
                             this.getEntityStore(trashName).save(entity, opts);
@@ -11938,9 +11987,13 @@
                 var trashName, entityStore;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.ready()];
+                        case 0:
+                            if (!!this.started) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.ready()];
                         case 1:
                             _a.sent();
+                            _a.label = 2;
+                        case 2:
                             trashName = EntitiesStorage.TRASH_PREFIX + entityName;
                             entityStore = this.getEntityStore(trashName, { create: false });
                             if (!entityStore)
@@ -11959,79 +12012,58 @@
             }
             return Promise.resolve();
         };
-        EntitiesStorage.prototype.ready = function () {
-            if (this._started)
-                return Promise.resolve();
-            return this.start();
-        };
-        EntitiesStorage.prototype.start = function () {
-            var _this = this;
-            if (this._startPromise)
-                return this._startPromise;
-            if (this._started)
-                return Promise.resolve();
-            var now = Date.now();
-            console.info("[entities-storage] Starting entity storage...");
-            // Restore sequences
-            this._startPromise = this.restoreLocally()
-                .then(function () {
-                // Start a save timer
-                _this._subscription.add(rxjs.merge(_this._$save, rxjs.timer(2000, 10000))
-                    .pipe(operators.throttleTime(10000))
-                    .subscribe(function () { return _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._startPromise;
-        };
-        EntitiesStorage.prototype.stop = function () {
+        EntitiesStorage.prototype.ngOnStart = function () {
             return __awaiter(this, void 0, void 0, function () {
+                var now;
+                var _this = this;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            this._started = false;
-                            this._subscription.unsubscribe();
-                            this._subscription = new rxjs.Subscription();
-                            if (!this.dirty) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this.storeLocally()];
+                            now = Date.now();
+                            console.info("[entities-storage] Starting entity storage...");
+                            // Restore sequences
+                            return [4 /*yield*/, this.restoreLocally()];
                         case 1:
+                            // Restore sequences
                             _a.sent();
-                            _a.label = 2;
-                        case 2: return [2 /*return*/];
+                            // Start a save timer
+                            this._subscription.add(rxjs.merge(this._$save, rxjs.timer(this._saveTimerPeriod, this._saveTimerPeriod))
+                                .pipe(
+                            // Avoid to many call (e.g. when $save AND timer are triggered
+                            operators.throttleTime(this._saveTimerPeriod))
+                                .subscribe(function () { return _this.storeLocally(); }));
+                            console.info("[entities-storage] Starting [OK] in " + (Date.now() - now) + "ms");
+                            return [2 /*return*/, this._data];
                     }
                 });
             });
         };
-        EntitiesStorage.prototype.restart = function () {
+        EntitiesStorage.prototype.ngOnStop = function () {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            if (!this._started) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this.stop()];
+                            this._subscription.unsubscribe();
+                            this._subscription = new rxjs.Subscription();
+                            if (!this.dirty) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.storeLocally()];
                         case 1:
                             _a.sent();
                             _a.label = 2;
-                        case 2: return [4 /*yield*/, this.start()];
-                        case 3:
-                            _a.sent();
-                            return [2 /*return*/];
+                        case 2: return [2 /*return*/];
                     }
                 });
             });
         };
         /* -- protected methods -- */
         EntitiesStorage.prototype.getEntityStore = function (name, opts) {
-            var store = this._stores[name];
+            var store = this._data[name];
             if (!store && (!opts || opts.create !== false)) {
                 if (this._debug)
                     console.debug("[entities-storage] Creating store " + name);
                 var typePolicy = this._typePolicies[name];
                 store = new EntityStore(name, this.storage, typePolicy);
-                this._stores[name] = store;
+                this._data[name] = store;
             }
             return store;
         };
@@ -12088,11 +12120,11 @@
                     this._saving = true;
                     this._dirty = false;
                     this.progressBarService.increase();
-                    entityNames = this._stores && Object.keys(this._stores) || [];
+                    entityNames = this._data && Object.keys(this._data) || [];
                     now = Date.now();
                     if (this._debug)
                         console.debug('[entities-storage] Persisting...');
-                    return [2 /*return*/, rxjs.concat.apply(void 0, __spread(entityNames.map(function (entityName) { return rxjs.defer(function () {
+                    return [2 /*return*/, chainPromises(entityNames.map(function (entityName) { return function () {
                             currentEntityName = entityName;
                             var entityStore = _this.getEntityStore(entityName, { create: false });
                             if (!entityStore) {
@@ -12106,17 +12138,20 @@
                                     entityNames.splice(entityNames.findIndex(function (e) { return e === entityName; }), 1);
                                 }
                             });
-                        }); }), [rxjs.defer(function () {
-                                currentEntityName = undefined;
-                                return isEmptyArray(entityNames) ?
-                                    _this.storage.remove(ENTITIES_STORAGE_KEY_PREFIX) :
-                                    _this.storage.set(ENTITIES_STORAGE_KEY_PREFIX, entityNames);
-                            }), rxjs.defer(function () {
-                                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(operators.catchError(function (err) {
+                        }; }))
+                            .then(function () {
+                            currentEntityName = undefined;
+                            return isEmptyArray(entityNames) ?
+                                _this.storage.remove(ENTITIES_STORAGE_KEY_PREFIX) :
+                                _this.storage.set(ENTITIES_STORAGE_KEY_PREFIX, entityNames);
+                        })
+                            .then(function () {
+                            if (_this._debug)
+                                console.debug("[entities-storage] Persisting [OK] " + entityNames.length + " stores saved in " + (Date.now() - now) + "ms...");
+                            _this._saving = false;
+                            _this.progressBarService.decrease();
+                        })
+                            .catch(function (err) {
                             _this._saving = false;
                             _this.progressBarService.decrease();
                             if (currentEntityName) {
@@ -12125,13 +12160,13 @@
                             else {
                                 console.error("[entities-storage] Error while persisting: " + (err && err.message || err), err);
                             }
-                            return err;
-                        })).toPromise()];
+                            throw err;
+                        })];
                 });
             });
         };
         return EntitiesStorage;
-    }());
+    }(StartableService));
     EntitiesStorage.TRASH_PREFIX = 'Trash#';
     EntitiesStorage.REMOTE_PREFIX = 'Remote#';
     EntitiesStorage.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function EntitiesStorage_Factory() { return new EntitiesStorage(i0__namespace.ɵɵinject(i1__namespace$4.Platform), i0__namespace.ɵɵinject(ProgressBarService), i0__namespace.ɵɵinject(i3__namespace$1.Storage), i0__namespace.ɵɵinject(ENVIRONMENT), i0__namespace.ɵɵinject(APP_LOCAL_STORAGE_TYPE_POLICIES, 8)); }, token: EntitiesStorage, providedIn: "root" });
@@ -12142,7 +12177,7 @@
         { type: i1$5.Platform },
         { type: ProgressBarService },
         { type: i3$2.Storage },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [ENVIRONMENT,] }] },
+        { type: Environment, decorators: [{ type: i0.Inject, args: [ENVIRONMENT,] }] },
         { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [APP_LOCAL_STORAGE_TYPE_POLICIES,] }] }
     ]; };
 
@@ -12667,29 +12702,28 @@
     }
 
     var APP_GRAPHQL_TYPE_POLICIES = new i0.InjectionToken('graphqlTypePolicies');
-    var GraphqlService = /** @class */ (function () {
+    var GraphqlService = /** @class */ (function (_super) {
+        __extends(GraphqlService, _super);
         function GraphqlService(platform, apollo, httpLink, network, storage, cryptoService, environment, typePolicies) {
-            var _this = this;
-            this.platform = platform;
-            this.apollo = apollo;
-            this.httpLink = httpLink;
-            this.network = network;
-            this.storage = storage;
-            this.cryptoService = cryptoService;
-            this.environment = environment;
-            this.typePolicies = typePolicies;
-            this._started = false;
-            this._subscription = new rxjs.Subscription();
-            this.connectionParams = {};
-            this.onNetworkError = new rxjs.Subject();
-            this.customErrors = {};
-            this.onStart = new rxjs.Subject();
-            this._debug = !environment.production;
-            this._defaultFetchPolicy = environment.apolloFetchPolicy;
+            var _this = _super.call(this, network) || this;
+            _this.platform = platform;
+            _this.apollo = apollo;
+            _this.httpLink = httpLink;
+            _this.network = network;
+            _this.storage = storage;
+            _this.cryptoService = cryptoService;
+            _this.environment = environment;
+            _this.typePolicies = typePolicies;
+            _this._subscription = new rxjs.Subscription();
+            _this.connectionParams = {};
+            _this.onNetworkError = new rxjs.Subject();
+            _this.customErrors = {};
+            _this._debug = !environment.production;
+            _this._defaultFetchPolicy = environment.apolloFetchPolicy;
             // Restart if network restart
-            this.network.on('start', function () { return _this.restart(); });
+            _this.network.on('start', function () { return _this.restart(); });
             // Clear cache
-            this.network.on('resetCache', function () { return __awaiter(_this, void 0, void 0, function () {
+            _this.network.on('resetCache', function () { return __awaiter(_this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0: return [4 /*yield*/, this.ready()];
@@ -12703,23 +12737,17 @@
                 });
             }); });
             // Listen network status
-            this._networkStatusChanged$ = network.onNetworkStatusChanges
+            _this._networkStatusChanged$ = network.onNetworkStatusChanges
                 .pipe(operators.filter(isNotNil), operators.distinctUntilChanged());
             // When getting network error: try to ping peer, and toggle to offline
-            this.onNetworkError
+            _this.onNetworkError
                 .pipe(operators.throttleTime(300), operators.filter(function () { return _this.network.online; }), operators.mergeMap(function () { return _this.network.checkPeerAlive(); }), operators.filter(function (alive) { return !alive; }))
                 .subscribe(function () { return _this.network.setForceOffline(true, { showToast: true }); });
+            return _this;
         }
-        Object.defineProperty(GraphqlService.prototype, "started", {
-            get: function () {
-                return this._started;
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(GraphqlService.prototype, "client", {
             get: function () {
-                return this.apollo.client;
+                return this._data;
             },
             enumerable: false,
             configurable: true
@@ -12738,34 +12766,6 @@
             enumerable: false,
             configurable: true
         });
-        GraphqlService.prototype.ready = function () {
-            if (this._started)
-                return Promise.resolve();
-            return this.start();
-        };
-        GraphqlService.prototype.start = function () {
-            var _this = this;
-            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(function () { return _this.initApollo(); })
-                .then(function () {
-                _this._started = true;
-                _this._startPromise = undefined;
-                // Emit event
-                _this.onStart.next();
-                console.info('[graphql] Starting graphql [OK]');
-            })
-                .catch(function (err) {
-                console.error(err && err.message || err, err);
-                _this._startPromise = undefined;
-            });
-            return this._startPromise;
-        };
         GraphqlService.prototype.setAuthToken = function (token) {
             if (token) {
                 console.debug('[graphql] Apply token authentication to headers');
@@ -12798,15 +12798,18 @@
          */
         GraphqlService.prototype.addResolver = function (resolvers) {
             return __awaiter(this, void 0, void 0, function () {
-                var client;
-                var _this = this;
                 return __generator(this, function (_a) {
-                    if (!this._started) {
-                        this.onStart.toPromise().then(function () { return _this.addResolver(resolvers); }); // Loop
+                    switch (_a.label) {
+                        case 0:
+                            if (!!this.started) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.ready()];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2:
+                            this.apollo.client.addResolvers(resolvers);
+                            return [2 /*return*/];
                     }
-                    client = this.apollo.getClient();
-                    client.addResolvers(resolvers);
-                    return [2 /*return*/];
                 });
             });
         };
@@ -12816,21 +12819,26 @@
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            _a.trys.push([0, 3, , 4]);
-                            return [4 /*yield*/, this.getApollo()];
-                        case 1: return [4 /*yield*/, (_a.sent()).query({
-                                query: opts.query,
-                                variables: opts.variables,
-                                fetchPolicy: opts.fetchPolicy || this._defaultFetchPolicy || undefined
-                            }).toPromise()];
+                            if (!!this.started) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.ready()];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
                         case 2:
-                            res = _a.sent();
-                            return [3 /*break*/, 4];
+                            _a.trys.push([2, 4, , 5]);
+                            return [4 /*yield*/, this.client.query({
+                                    query: opts.query,
+                                    variables: opts.variables,
+                                    fetchPolicy: opts.fetchPolicy || this._defaultFetchPolicy || undefined
+                                })];
                         case 3:
+                            res = _a.sent();
+                            return [3 /*break*/, 5];
+                        case 4:
                             err_1 = _a.sent();
                             res = this.toApolloError(err_1, opts.error);
-                            return [3 /*break*/, 4];
-                        case 4:
+                            return [3 /*break*/, 5];
+                        case 5:
                             if (res.errors) {
                                 throw res.errors[0];
                             }
@@ -13207,13 +13215,14 @@
             this.customErrors = Object.assign(Object.assign({}, this.customErrors), error);
         };
         /* -- protected methods -- */
-        GraphqlService.prototype.initApollo = function () {
+        GraphqlService.prototype.ngOnStart = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var mobile, enableTrackMutationQueries, peer, uri, wsUri, storage, client, wsLink, retryLink, authLink, httpLink, cache, mutationLinks, serializingLink, trackerLink, queueLink_1, err_2;
                 var _this = this;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
+                            console.info('[graphql] Starting graphql...');
                             mobile = this.platform.is('mobile') || this.platform.is('mobileweb');
                             enableTrackMutationQueries = !mobile;
                             peer = this.network.peer;
@@ -13284,9 +13293,8 @@
                                 queueLink_1 = new QueueLink__default["default"]();
                                 this._subscription.add(this._networkStatusChanged$
                                     .subscribe(function (type) {
-                                    var offline = type === 'none';
                                     // Network is offline: start buffering into queue
-                                    if (offline) {
+                                    if (type === 'none') {
                                         console.info('[graphql] offline mode: enable mutations buffer');
                                         queueLink_1.close();
                                     }
@@ -13349,12 +13357,14 @@
                             err_2 = _a.sent();
                             console.error('[graphql] Failed to restore tracked queries from storage: ' + (err_2 && err_2.message || err_2), err_2);
                             return [3 /*break*/, 7];
-                        case 7: return [2 /*return*/];
+                        case 7:
+                            console.info('[graphql] Starting graphql [OK]');
+                            return [2 /*return*/, client];
                     }
                 });
             });
         };
-        GraphqlService.prototype.stop = function () {
+        GraphqlService.prototype.ngOnStop = function () {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
                     switch (_a.label) {
@@ -13365,24 +13375,11 @@
                             return [4 /*yield*/, this.resetClient()];
                         case 1:
                             _a.sent();
-                            this._started = false;
-                            this._startPromise = undefined;
                             return [2 /*return*/];
                     }
                 });
             });
         };
-        GraphqlService.prototype.restart = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var _this = this;
-                return __generator(this, function (_a) {
-                    if (this.started) {
-                        return [2 /*return*/, this.stop().then(function () { return _this.start(); })];
-                    }
-                    return [2 /*return*/, this.start()];
-                });
-            });
-        };
         GraphqlService.prototype.resetClient = function (client) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
@@ -13484,24 +13481,8 @@
             }
             return undefined;
         };
-        GraphqlService.prototype.getApollo = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!!this._started) return [3 /*break*/, 2];
-                            console.debug('[graphql] Waiting apollo client... ');
-                            return [4 /*yield*/, this.onStart.toPromise()];
-                        case 1:
-                            _a.sent();
-                            _a.label = 2;
-                        case 2: return [2 /*return*/, this.apollo];
-                    }
-                });
-            });
-        };
         return GraphqlService;
-    }());
+    }(StartableService));
     GraphqlService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function GraphqlService_Factory() { return new GraphqlService(i0__namespace.ɵɵinject(i1__namespace$4.Platform), i0__namespace.ɵɵinject(i2__namespace$3.Apollo), i0__namespace.ɵɵinject(i3__namespace$2.HttpLink), i0__namespace.ɵɵinject(NetworkService), i0__namespace.ɵɵinject(i3__namespace$1.Storage), i0__namespace.ɵɵinject(CryptoService), i0__namespace.ɵɵinject(ENVIRONMENT), i0__namespace.ɵɵinject(APP_GRAPHQL_TYPE_POLICIES, 8)); }, token: GraphqlService, providedIn: "root" });
     GraphqlService.decorators = [
         { type: i0.Injectable, args: [{
@@ -13784,7 +13765,12 @@
             _this.storage = storage;
             _this.file = file;
             _this.environment = environment;
-            _this.data = {
+            _this.onLogin = new rxjs.Subject();
+            _this.onLogout = new rxjs.Subject();
+            _this.onChange = new rxjs.Subject();
+            _this.onAuthTokenChange = new rxjs.Subject();
+            _this.onAuthBasicChange = new rxjs.Subject();
+            _this._data = {
                 loaded: false,
                 keypair: null,
                 authToken: null,
@@ -13798,11 +13784,6 @@
             _this._started = false;
             _this._$additionalFields = new rxjs.BehaviorSubject([]);
             _this._tokenType$ = new rxjs.BehaviorSubject(undefined);
-            _this.onLogin = new rxjs.Subject();
-            _this.onLogout = new rxjs.Subject();
-            _this.onChange = new rxjs.Subject();
-            _this.onAuthTokenChange = new rxjs.Subject();
-            _this.onAuthBasicChange = new rxjs.Subject();
             _this._debug = !environment.production;
             if (_this._debug)
                 console.debug('[account-service] Creating service');
@@ -13810,7 +13791,7 @@
             // Send auth token to the graphql layer, when changed
             _this.onAuthTokenChange.subscribe(function (token) { return _this.graphql.setAuthToken(token); });
             _this.onAuthBasicChange.subscribe(function (basic) { return _this.graphql.setAuthBasic(basic); });
-            // Listen network restart
+            // Listen graphql start (or restart)
             _this.graphql.onStart.subscribe(function () { return __awaiter(_this, void 0, void 0, function () {
                 return __generator(this, function (_b) {
                     if (!this._started) {
@@ -13844,27 +13825,27 @@
         }
         Object.defineProperty(AccountService.prototype, "account", {
             get: function () {
-                return this.data.loaded ? this.data.account : undefined;
+                return this._data.loaded ? this._data.account : undefined;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(AccountService.prototype, "person", {
             get: function () {
-                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;
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(AccountService.prototype, "department", {
             get: function () {
-                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;
             },
             enumerable: false,
             configurable: true
@@ -13878,32 +13859,21 @@
                     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);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        AccountService.prototype.resetData = function () {
-            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 exports.Account();
-            this.data.person = null;
-            this.data.department = null;
-        };
         AccountService.prototype.start = function () {
             var _this = this;
             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(),
@@ -13914,6 +13884,7 @@
                 .then(function () {
                 _this._started = true;
                 _this._startPromise = undefined;
+                return _this.account;
             });
             return this._startPromise;
         };
@@ -13931,8 +13902,8 @@
                     if (this._started || this._startPromise) {
                         this._started = false;
                         this._startPromise = undefined;
-                        hadAuthToken = this.data.authToken && true;
-                        hadAuthBasic = this.data.authBasic && true;
+                        hadAuthToken = this._data.authToken && true;
+                        hadAuthBasic = this._data.authBasic && true;
                         hadAuth = hadAuthToken || hadAuthBasic;
                         this.resetData();
                         if (hadAuth) {
@@ -13962,35 +13933,35 @@
         };
         AccountService.prototype.ready = function () {
             if (this._started)
-                return Promise.resolve();
+                return Promise.resolve(this.account);
             return this.start();
         };
         AccountService.prototype.isLogin = function () {
-            return !!(this.data.pubkey && this.data.loaded);
+            return !!(this._data.pubkey && this._data.loaded);
         };
         AccountService.prototype.isAuth = function () {
-            return !!(this.data.pubkey && this.data.keypair && this.data.keypair.secretKey);
+            return !!(this._data.pubkey && this._data.keypair && this._data.keypair.secretKey);
         };
         AccountService.prototype.hasMinProfile = function (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);
         };
         AccountService.prototype.hasExactProfile = function (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(function (profile) { return profile === label; });
+            return this._data.account.profiles.some(function (profile) { return profile === label; });
         };
         AccountService.prototype.hasProfileAndIsEnable = function (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);
         };
         AccountService.prototype.isAdmin = function () {
             return this.hasProfileAndIsEnable('ADMIN');
@@ -14010,11 +13981,11 @@
         };
         AccountService.prototype.isOnlyGuest = function () {
             // 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');
         };
         AccountService.prototype.canUserWriteDataForDepartment = function (recorderDepartment) {
             if (ReferentialUtils.isEmpty(recorderDepartment)) {
@@ -14023,17 +13994,17 @@
                 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');
         };
         AccountService.prototype.register = function (data) {
             return __awaiter(this, void 0, void 0, function () {
@@ -14048,7 +14019,7 @@
                                 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;
                             now = Date.now();
                             _b.label = 1;
                         case 1:
@@ -14062,29 +14033,29 @@
                             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;
                             return [4 /*yield*/, this.saveRemotely(data.account, keypair)];
                         case 3:
                             account = _b.sent();
                             // 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
                             return [4 /*yield*/, this.authenticate(data)];
                         case 4:
                             // Try to auth on pod
                             _b.sent();
-                            this.data.loaded = true;
+                            this._data.loaded = true;
                             return [4 /*yield*/, this.saveLocally()];
                         case 5:
                             _b.sent();
                             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 [2 /*return*/, this.data.account];
+                            this.onLogin.next(this._data.account);
+                            this.onChange.next(this._data.account);
+                            return [2 /*return*/, this._data.account];
                         case 6:
                             error_1 = _b.sent();
                             console.error(error_1 && error_1.message || error_1);
@@ -14106,22 +14077,22 @@
                             // 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);
                             }
                             if (!(tokenType === 'token' || tokenType === 'basic-and-token')) return [3 /*break*/, 5];
                             _c.label = 2;
                         case 2:
                             _c.trys.push([2, 4, , 5]);
-                            _b = this.data;
-                            return [4 /*yield*/, this.authenticateAndGetToken(this.data.authToken)];
+                            _b = this._data;
+                            return [4 /*yield*/, this.authenticateAndGetToken(this._data.authToken)];
                         case 3:
                             _b.authToken = _c.sent();
                             return [3 /*break*/, 5];
@@ -14134,7 +14105,7 @@
                         case 5:
                             // Forget authBasic, to switch to authToken
                             if (tokenType === 'basic-and-token') {
-                                this.data.authBasic = undefined;
+                                this._data.authBasic = undefined;
                                 this.onAuthBasicChange.next(undefined);
                             }
                             return [2 /*return*/];
@@ -14165,18 +14136,18 @@
                             throw { code: ErrorCodes$2.UNKNOWN_ERROR, message: 'ERROR.SCRYPT_ERROR' };
                         case 4:
                             // 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;
                             return [4 /*yield*/, this.storage.get(TOKEN_STORAGE_KEY)];
                         case 5:
                             previousToken = _b.sent();
-                            previousToken = previousToken && previousToken.startsWith(this.data.pubkey) && previousToken || null;
+                            previousToken = previousToken && previousToken.startsWith(this._data.pubkey) && previousToken || null;
                             offline = this.settings.hasOfflineFeature() && (this.network.offline || data.offline === true);
                             if (!offline) return [3 /*break*/, 6];
-                            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}");
                             return [3 /*break*/, 9];
                         case 6:
                             _b.trys.push([6, 8, , 9]);
@@ -14236,9 +14207,9 @@
                             throw error_5;
                         case 21:
                             // Emit event to observers
-                            this.onLogin.next(this.data.account);
-                            this.onChange.next(this.data.account);
-                            return [2 /*return*/, this.data.account];
+                            this.onLogin.next(this._data.account);
+                            this.onChange.next(this._data.account);
+                            return [2 /*return*/, this._data.account];
                     }
                 });
             });
@@ -14248,7 +14219,7 @@
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
-                            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');
@@ -14260,9 +14231,9 @@
                             _b.sent();
                             console.debug('[account] Successfully reload account');
                             // Emit login event to subscribers
-                            this.onLogin.next(this.data.account);
-                            this.onChange.next(this.data.account);
-                            return [2 /*return*/, this.data.account];
+                            this.onLogin.next(this._data.account);
+                            this.onChange.next(this._data.account);
+                            return [2 /*return*/, this._data.account];
                     }
                 });
             });
@@ -14277,27 +14248,27 @@
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
-                            if (!this.data.pubkey)
+                            if (!this._data.pubkey)
                                 return [2 /*return*/, Promise.reject('User not logged')];
-                            if (this.data.pubkey !== account.pubkey)
+                            if (this._data.pubkey !== account.pubkey)
                                 return [2 /*return*/, Promise.reject('Not user account')];
-                            return [4 /*yield*/, this.saveRemotely(account, this.data.keypair)];
+                            return [4 /*yield*/, this.saveRemotely(account, this._data.keypair)];
                         case 1:
                             account = _b.sent();
                             // 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)
                             return [4 /*yield*/, this.saveLocally()];
                         case 2:
                             // Save locally (in storage)
                             _b.sent();
                             // Send event
-                            this.onLogin.next(this.data.account);
-                            this.onChange.next(this.data.account);
-                            return [2 /*return*/, this.data.account];
+                            this.onLogin.next(this._data.account);
+                            this.onChange.next(this._data.account);
+                            return [2 /*return*/, this._data.account];
                     }
                 });
             });
@@ -14308,9 +14279,9 @@
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
-                            hadAuthToken = this.data.authToken && true;
-                            hadAuthBasic = this.data.authBasic && true;
-                            pubkey = this.data && this.data.pubkey;
+                            hadAuthToken = this._data.authToken && true;
+                            hadAuthBasic = this._data.authBasic && true;
+                            pubkey = this._data && this._data.pubkey;
                             this.resetData();
                             if (!!this.settings.hasOfflineFeature()) return [3 /*break*/, 2];
                             // Remove all data from the local storage
@@ -14382,9 +14353,9 @@
                         case 1:
                             json = _b.sent();
                             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)) return [3 /*break*/, 3];
-                            return [4 /*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)) return [3 /*break*/, 3];
+                            return [4 /*yield*/, this.storage.get(ACCOUNT_STORAGE_KEY + '#' + this._data.pubkey)];
                         case 2:
                             json = _b.sent();
                             json = json && (typeof json === 'string') && JSON.parse(json) || json;
@@ -14515,7 +14486,8 @@
             });
         };
         AccountService.prototype.listenChanges = function () {
-            if (!this.data.pubkey)
+            var _this = this;
+            if (!this._data.pubkey)
                 return rxjs.Subscription.EMPTY;
             var self = this;
             console.debug('[account] [WS] Listening account changes');
@@ -14531,15 +14503,14 @@
             }).subscribe({
                 next: function (_b) {
                     var data = _b.data;
-                    var _a;
-                    return __awaiter(this, void 0, void 0, function () {
-                        var existingUpdateDate;
+                    return __awaiter(_this, void 0, void 0, function () {
+                        var _a, existingUpdateDate;
                         return __generator(this, function (_b) {
                             switch (_b.label) {
                                 case 0:
                                     if (!data)
                                         return [2 /*return*/];
-                                    existingUpdateDate = toDateISOString((_a = self.data.account) === null || _a === void 0 ? void 0 : _a.updateDate);
+                                    existingUpdateDate = toDateISOString((_a = self._data.account) === null || _a === void 0 ? void 0 : _a.updateDate);
                                     if (!(existingUpdateDate !== data.updateDate)) return [3 /*break*/, 2];
                                     console.debug("[account] [WS] Detected update on {" + data.updateDate + "}");
                                     return [4 /*yield*/, self.refresh()];
@@ -14551,32 +14522,30 @@
                         });
                     });
                 },
-                error: function (err) {
-                    return __awaiter(this, void 0, void 0, function () {
-                        return __generator(this, function (_b) {
-                            switch (_b.label) {
-                                case 0:
-                                    if (!(err && +err.code === ServerErrorCodes.NOT_FOUND)) return [3 /*break*/, 2];
-                                    console.info('[account] Account not exists anymore: force user to logout...', err);
-                                    return [4 /*yield*/, self.logout()];
-                                case 1:
-                                    _b.sent();
-                                    return [3 /*break*/, 5];
-                                case 2:
-                                    if (!(err && +err.code === ServerErrorCodes.UNAUTHORIZED)) return [3 /*break*/, 4];
-                                    console.info('[account] Account not authorized: force user to logout...', err);
-                                    return [4 /*yield*/, self.logout()];
-                                case 3:
-                                    _b.sent();
-                                    return [3 /*break*/, 5];
-                                case 4:
-                                    console.warn('[account] [WS] Received error:', err);
-                                    _b.label = 5;
-                                case 5: return [2 /*return*/];
-                            }
-                        });
+                error: function (err) { return __awaiter(_this, void 0, void 0, function () {
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                if (!(err && +err.code === ServerErrorCodes.NOT_FOUND)) return [3 /*break*/, 2];
+                                console.info('[account] Account not exists anymore: force user to logout...', err);
+                                return [4 /*yield*/, self.logout()];
+                            case 1:
+                                _b.sent();
+                                return [3 /*break*/, 5];
+                            case 2:
+                                if (!(err && +err.code === ServerErrorCodes.UNAUTHORIZED)) return [3 /*break*/, 4];
+                                console.info('[account] Account not authorized: force user to logout...', err);
+                                return [4 /*yield*/, self.logout()];
+                            case 3:
+                                _b.sent();
+                                return [3 /*break*/, 5];
+                            case 4:
+                                console.warn('[account] [WS] Received error:', err);
+                                _b.label = 5;
+                            case 5: return [2 /*return*/];
+                        }
                     });
-                },
+                }); },
                 complete: function () {
                     console.debug('[account] [WS] Completed');
                 }
@@ -14633,15 +14602,26 @@
             this._$additionalFields.next(values.concat(field));
         };
         /* -- protected method -- */
+        AccountService.prototype.resetData = function () {
+            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 exports.Account();
+            this._data.person = null;
+            this._data.department = null;
+        };
         AccountService.prototype.loadData = function (opts) {
             return __awaiter(this, void 0, void 0, function () {
                 var account, error_6;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
-                            if (!this.data.pubkey)
+                            if (!this._data.pubkey)
                                 throw new Error('User not logged');
-                            this.data.loaded = false;
+                            this._data.loaded = false;
                             _b.label = 1;
                         case 1:
                             _b.trys.push([1, 3, , 4]);
@@ -14654,16 +14634,16 @@
                             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 [2 /*return*/, this.data.account];
+                            this._data.loaded = true;
+                            return [2 /*return*/, this._data.account];
                         case 3:
                             error_6 = _b.sent();
                             this.resetData();
@@ -14702,9 +14682,9 @@
                                 return [2 /*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;
@@ -14715,7 +14695,7 @@
                             return [4 /*yield*/, this.authenticate()];
                         case 3:
                             _b.sent();
-                            if (!this.data.authToken && !this.data.authBasic)
+                            if (!this._data.authToken && !this._data.authBasic)
                                 throw new Error('Authentication failed');
                             return [3 /*break*/, 5];
                         case 4:
@@ -14748,14 +14728,14 @@
                                 return [2 /*return*/];
                             account = exports.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 [2 /*return*/, account];
                     }
                 });
@@ -14771,12 +14751,12 @@
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
-                            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...");
-                            json = this.data.account.asObject({ keepTypename: true });
-                            seckey = this.data.keypair && this.data.keypair.secretKey && Base58.encode(this.data.keypair.secretKey) || null;
+                                console.debug("[account] Saving account {" + this._data.pubkey.substring(0, 6) + "} in local storage...");
+                            json = this._data.account.asObject({ keepTypename: true });
+                            seckey = this._data.keypair && this._data.keypair.secretKey && Base58.encode(this._data.keypair.secretKey) || null;
                             hasAvatarUrl = json.avatar && !json.avatar.endsWith(DEFAULT_AVATAR_IMAGE) &&
                                 (json.avatar.startsWith('http://') || (json.avatar.startsWith('https://')));
                             if (!(hasAvatarUrl && this.network.online)) return [3 /*break*/, 2];
@@ -14799,9 +14779,9 @@
                         case 2:
                             _b.trys.push([2, 4, , 5]);
                             return [4 /*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
@@ -14878,7 +14858,7 @@
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
-                            if (!this.data.pubkey)
+                            if (!this._data.pubkey)
                                 throw new Error('User not logged');
                             if (!counter)
                                 console.info('[account] Authentication on pod...');
@@ -14905,7 +14885,7 @@
                             if (data_1 && data_1.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 [2 /*return*/, token]; // return the token
                             }
                             _b.label = 2;
@@ -14931,10 +14911,10 @@
                             if (!signatureOK) {
                                 console.warn('FIXME: Bad peer signature on auth challenge !', data.authChallenge);
                             }
-                            return [4 /*yield*/, this.cryptoService.sign(data.authChallenge.challenge, this.data.keypair)];
+                            return [4 /*yield*/, this.cryptoService.sign(data.authChallenge.challenge, this._data.keypair)];
                         case 5:
                             signature = _b.sent();
-                            newToken = this.data.pubkey + ":" + data.authChallenge.challenge + "|" + signature;
+                            newToken = this._data.pubkey + ":" + data.authChallenge.challenge + "|" + signature;
                             return [4 /*yield*/, this.authenticateAndGetToken(newToken, (counter || 1) + 1 /* increment */)];
                         case 6: 
                         // iterate with the new token
@@ -15264,9 +15244,8 @@
         Object.defineProperty(ConfigService.prototype, "config", {
             get: function () {
                 // If first call: start loading
-                if (!this._started) {
+                if (!this._started)
                     this.start();
-                }
                 return this.$data.pipe(operators.filter(isNotNil));
             },
             enumerable: false,
@@ -15281,30 +15260,49 @@
             console.info('[config] Starting configuration...');
             this._startPromise = this.graphql.ready()
                 .then(function () { return _this.loadOrRestoreLocally(); })
-                .then(function () {
+                .then(function (data) {
                 _this._started = true;
                 _this._startPromise = undefined;
+                _this.$data.next(data);
+                return data;
             })
                 .catch(function (err) {
                 console.error(err && err.message || err, err);
+                _this._started = false;
                 _this._startPromise = undefined;
+                return null;
             });
             return this._startPromise;
         };
         ConfigService.prototype.stop = function () {
-            this._subscription.unsubscribe();
-            this._subscription = new rxjs.Subscription();
-            this._started = false;
-            this._startPromise = undefined;
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    this._subscription.unsubscribe();
+                    this._subscription = new rxjs.Subscription();
+                    this._started = false;
+                    this._startPromise = undefined;
+                    return [2 /*return*/];
+                });
+            });
         };
         ConfigService.prototype.restart = function () {
-            if (this.started)
-                this.stop();
-            return this.start();
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!this.started) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.stop()];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/, this.start()];
+                    }
+                });
+            });
         };
         ConfigService.prototype.ready = function () {
             if (this._started)
-                return Promise.resolve();
+                return Promise.resolve(this.$data.value);
             if (this._startPromise)
                 return this._startPromise;
             return this.start();
@@ -15375,7 +15373,7 @@
                             return [4 /*yield*/, this.loadDefault({ fetchPolicy: 'network-only' })];
                         case 2:
                             reloadedConfig = _a.sent();
-                            defaultConfig = this.$data.getValue();
+                            defaultConfig = this.$data.value;
                             if (isNotNil(defaultConfig) && reloadedConfig.label === defaultConfig.label) {
                                 // Emit update event when is default config
                                 this.$data.next(reloadedConfig);
@@ -15484,8 +15482,7 @@
                             if (wasJustLoaded) {
                                 // TODO
                             }
-                            this.$data.next(data);
-                            return [2 /*return*/];
+                            return [2 /*return*/, data];
                     }
                 });
             });
@@ -15738,7 +15735,7 @@
                 .then(function () {
                 _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 + ", downloader: " + !!_this.downloader + " in " + (Date.now() - now) + "ms");
                 // Update cache configuration when network changed
                 _this.networkService.onNetworkStatusChanges.subscribe(function (type) { return _this.configureCache(type !== 'none'); });
                 // Update authentication type
@@ -15787,18 +15784,37 @@
             }
         };
         PlatformService.prototype.download = function (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: ngx$6.NotificationVisibility.VisibleNotifyCompleted, title: request.filename || '' }, request), { destinationInExternalFilesDir: Object.assign({ dirType: 'Downloads', subPath: request.filename || request.title || '' }, request.destinationInExternalFilesDir) });
-                this.downloader.download(request)
-                    .then(function (location) { return console.info('[platform] File successfully downloaded at:' + location); })
-                    .catch(function (error) { return 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 () {
+                var downloader, location, err_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!request || !request.uri)
+                                throw new Error('Missing argument \'request\' or \'request.uri\'');
+                            downloader = this.downloader || window.plugins.Downloader;
+                            if (!(downloader && this._android && this._cordova)) return [3 /*break*/, 5];
+                            request = Object.assign(Object.assign({ visibleInDownloadsUi: true, notificationVisibility: ngx$6.NotificationVisibility.VisibleNotifyCompleted, title: request.filename || '' }, request), { destinationInExternalFilesDir: Object.assign({ dirType: 'Downloads', subPath: request.filename || request.title || '' }, request.destinationInExternalFilesDir) });
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, downloader.download(request)];
+                        case 2:
+                            location = _a.sent();
+                            console.info('[platform] File successfully downloaded at:' + location);
+                            return [2 /*return*/, location];
+                        case 3:
+                            err_1 = _a.sent();
+                            console.error('[platform] Error while downloading: ' + (err_1 && err_1.message || err_1), err_1);
+                            throw err_1;
+                        case 4: return [3 /*break*/, 6];
+                        case 5:
+                            console.warn('[platform] Cannot use Cordova downloader: using browser open()');
+                            this.open(request.uri, '_system', 'location=no', true);
+                            return [2 /*return*/, undefined];
+                        case 6: return [2 /*return*/];
+                    }
+                });
+            });
         };
         /* -- protected methods -- */
         PlatformService.prototype.configureCordovaPlugins = function (mobile) {
@@ -15894,7 +15910,7 @@
         };
         PlatformService.prototype.migrateStorage = function (forage) {
             return __awaiter(this, void 0, void 0, function () {
-                var canMigrate, oldForage, keys, now, toast_1, duration, err_1;
+                var canMigrate, oldForage, keys, now, toast_1, duration, err_2;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -15947,8 +15963,8 @@
                             _a.sent();
                             return [3 /*break*/, 12];
                         case 9:
-                            err_1 = _a.sent();
-                            console.error(err_1 && err_1.message || err_1, err_1);
+                            err_2 = _a.sent();
+                            console.error(err_2 && err_2.message || err_2, err_2);
                             return [4 /*yield*/, toast_1.dismiss()];
                         case 10:
                             _a.sent();
@@ -17594,7 +17610,7 @@
     AutocompleteTestPage.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-autocomplete-test',
-                    template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar>\n    <a mat-tab-link\n       [active]=\"mode==='mobile'\"\n       (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='desktop'\"\n       (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='memory'\"\n       (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link\n       [active]=\"mode==='temp'\"\n       (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!--<ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n    </ion-grid>-->\n\n\n    <ion-grid *ngIf=\"mode === 'memory'\">\n\n      <!-- debugging memory leak -->\n      <ion-row><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 = function () { return [
@@ -21331,6 +21347,7 @@
         AppInstallUpgradeCard.prototype.downloadLink = function (event, link) {
             if (!link || !link.url)
                 return; // Skip
+            console.info("[install-upgrade-card] Downloading '" + link.url + "' ...");
             this.platform.download({
                 uri: link.url,
                 filename: link.downloadFilename,
@@ -21377,15 +21394,20 @@
         };
         AppInstallUpgradeCard.prototype.getCompatibleUpgradeLinks = function (installLinks, config) {
             var _this = this;
-            var appMinVersion = config.getProperty(CORE_CONFIG_OPTIONS.APP_MIN_VERSION);
-            var needUpgrade = appMinVersion && !VersionUtils.isCompatible(appMinVersion, this.environment.version);
+            var appVersion = this.environment.version;
+            var appMinVersionFromPod = config.getProperty(CORE_CONFIG_OPTIONS.APP_MIN_VERSION);
+            if (!appVersion) {
+                console.error('Missing value for \'environment.version\': cannot check app compatibility!');
+                return undefined;
+            }
+            var needUpgrade = appMinVersionFromPod && !VersionUtils.isCompatible(appMinVersionFromPod, appVersion);
             if (!needUpgrade)
                 return undefined;
             var upgradeLinks = installLinks
                 .filter(function (link) { return _this.platform.is('mobileweb') || (link.platform && _this.platform.is(link.platform)); });
             // Use min version as default version
             upgradeLinks.forEach(function (link) {
-                link.version = link.version || appMinVersion;
+                link.version = link.version || appMinVersionFromPod;
             });
             return isNotEmptyArray(upgradeLinks) ? upgradeLinks : undefined;
         };
@@ -21397,6 +21419,7 @@
                 var url = config.getProperty(CORE_CONFIG_OPTIONS.ANDROID_INSTALL_URL);
                 if (isNilOrBlank(url))
                     url = this.environment.defaultAndroidInstallUrl || null;
+                var minVersion = config.getProperty(CORE_CONFIG_OPTIONS.APP_MIN_VERSION);
                 // Compute App name
                 var name = isNotNilOrBlank(url) && config.label || this.environment.defaultAppName || 'SUMARiS';
                 if (url) {
@@ -21405,7 +21428,7 @@
                     var mimeType = void 0;
                     // Get file name
                     var 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
@@ -21415,13 +21438,12 @@
                         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);
                             }
                         }
@@ -27155,6 +27177,7 @@
             _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();
@@ -27273,13 +27296,13 @@
     UsersPage.decorators = [
         { type: i0.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: ngxMaterialTable.ValidatorService, useExisting: PersonValidatorService }
                     ],
                     animations: [slideUpDownAnimation],
                     changeDetection: i0.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 = function () { return [
@@ -27299,6 +27322,7 @@
         { type: undefined, decorators: [{ type: i0.Inject, args: [ENVIRONMENT,] }] }
     ]; };
     UsersPage.propDecorators = {
+        useSticky: [{ type: i0.Input }],
         filterExpansionPanel: [{ type: i0.ViewChild, args: [expansion.MatExpansionPanel, { static: true },] }]
     };
 
@@ -27572,6 +27596,7 @@
     exports.SharedTestingModule = SharedTestingModule;
     exports.SharedValidators = SharedValidators;
     exports.SocialModule = SocialModule;
+    exports.StartableService = StartableService;
     exports.StatusById = StatusById;
     exports.StatusIds = StatusIds;
     exports.StatusList = StatusList;