@sumaris-net/ngx-components 1.19.3 → 1.19.5-rc2

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

@@ -17888,6 +17888,252 @@
     ]; };
     var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
 
+    var UploadFile = /** @class */ (function (_super) {
+        __extends(UploadFile, _super);
+        function UploadFile() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return UploadFile;
+    }(File));
+    var FileResponse = /** @class */ (function () {
+        function FileResponse(init) {
+            this.type = i2$1.HttpEventType.Response;
+            this.body = isNotNil(init === null || init === void 0 ? void 0 : init.body) ? init.body : null;
+            this.status = (init === null || init === void 0 ? void 0 : init.status) || 0;
+            this.statusText = (init === null || init === void 0 ? void 0 : init.statusText) || 'OK';
+        }
+        return FileResponse;
+    }());
+    function isProgressEvent(event) {
+        return event && (event.type === i2$1.HttpEventType.UploadProgress
+            || event.type === i2$1.HttpEventType.DownloadProgress);
+    }
+    function isResponseEvent(event) {
+        return event && event.type === i2$1.HttpEventType.Response;
+    }
+
+    var UploadFilePopover = /** @class */ (function () {
+        function UploadFilePopover(popoverController, translate, cd) {
+            this.popoverController = popoverController;
+            this.translate = translate;
+            this.cd = cd;
+            this.uniqueFile = false;
+            this.instantUpload = false;
+            this.importing = false;
+        }
+        Object.defineProperty(UploadFilePopover.prototype, "files", {
+            get: function () {
+                return this.uploader.files;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(UploadFilePopover.prototype, "disabled", {
+            get: function () {
+                return this.importing || isEmptyArray(this.files);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(UploadFilePopover.prototype, "valid", {
+            get: function () {
+                return isNotEmptyArray(this.files);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        UploadFilePopover.prototype.onValidate = function (event) {
+            return __awaiter(this, void 0, void 0, function () {
+                var files, errors, err_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            event === null || event === void 0 ? void 0 : event.stopPropagation();
+                            // Avoid multiple call
+                            if (this.importing)
+                                return [2 /*return*/];
+                            console.debug('[upload-file-popover] Validate form: will upload all files...');
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, , 8, 9]);
+                            this.importing = true;
+                            this.resetError();
+                            _a.label = 2;
+                        case 2:
+                            _a.trys.push([2, 6, , 7]);
+                            // Wait processing files finished
+                            return [4 /*yield*/, this.uploader.waitIdle()];
+                        case 3:
+                            // Wait processing files finished
+                            _a.sent();
+                            // upload all files
+                            return [4 /*yield*/, this.uploader.uploadFiles()];
+                        case 4:
+                            // upload all files
+                            _a.sent();
+                            files = (this.uploader.processedFiles || [])
+                                .filter(function (file) { return !file.deleting; });
+                            // Nothing to upload: close popover
+                            if (isEmptyArray(files))
+                                return [2 /*return*/, this.cancel()];
+                            errors = files.map(function (file) { return file.error; }).filter(isNotNilOrBlank);
+                            // If error: stop
+                            if (errors.length) {
+                                errors.forEach(function (error) { return console.error(error); });
+                                throw { message: 'FILE.UPLOAD.ERROR' };
+                            }
+                            // return files
+                            return [4 /*yield*/, this.popoverController.dismiss(files)];
+                        case 5:
+                            // return files
+                            _a.sent();
+                            return [3 /*break*/, 7];
+                        case 6:
+                            err_1 = _a.sent();
+                            this.error = (err_1 && err_1.message) || err_1;
+                            return [3 /*break*/, 7];
+                        case 7: return [3 /*break*/, 9];
+                        case 8:
+                            this.importing = false;
+                            this.cd.markForCheck();
+                            return [7 /*endfinally*/];
+                        case 9: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        UploadFilePopover.prototype.cancel = function () {
+            return this.popoverController.dismiss();
+        };
+        UploadFilePopover.prototype.resetError = function () {
+            if (this.error) {
+                this.error = null;
+                this.cd.markForCheck();
+            }
+        };
+        return UploadFilePopover;
+    }());
+    UploadFilePopover.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-upload-file-popover',
+                    template: "\n<ion-content class=\"ion-no-padding\" scrollY=\"false\">\n  <div class=\"modal-content\">\n    <app-upload-file\n      #uploader\n      [uploadFn]=\"uploadFn\"\n      [deleteFn]=\"deleteFn\"\n      [fileExtension]=\"fileExtension\"\n      [instantUpload]=\"instantUpload\"\n      [uniqueFile]=\"uniqueFile\"\n      [maxParallelUpload]=\"maxParallelUpload\"\n    ></app-upload-file>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n        <div *ngIf=\"importing\" class=\"importing-info\">\n          <ion-text color=\"medium\"><small translate>FILE.UPLOAD.IMPORTING</small></ion-text>\n          &nbsp;<ion-spinner name=\"dots\" color=\"accent\"></ion-spinner>\n        </div>\n        <ion-item *ngIf=\"error\" lines=\"none\">\n          <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n          <ion-label color=\"danger\" class=\"ion-text-wrap\" [innerHTML]=\"error | translate\"></ion-label>\n        </ion-item>\n      </ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n        >\n          <ion-label translate>COMMON.BTN_IMPORT</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n",
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".importing-info{-webkit-padding-start:var(--ion-padding);padding-inline-start:var(--ion-padding);display:inline-flex;flex-wrap:nowrap;padding-top:8px}"]
+                },] }
+    ];
+    UploadFilePopover.ctorParameters = function () { return [
+        { type: i1$5.PopoverController },
+        { type: i1$2.TranslateService },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    UploadFilePopover.propDecorators = {
+        uploader: [{ type: i0.ViewChild, args: ['uploader', { static: true },] }],
+        fileExtension: [{ type: i0.Input }],
+        title: [{ type: i0.Input }],
+        uniqueFile: [{ type: i0.Input }],
+        instantUpload: [{ type: i0.Input }],
+        uploadFn: [{ type: i0.Input }],
+        deleteFn: [{ type: i0.Input }],
+        maxParallelUpload: [{ type: i0.Input }]
+    };
+
+    var MimeTypes = Object.freeze({
+        ANDROID_APK: 'application/vnd.android.package-archive'
+    });
+    var FilesUtils = /** @class */ (function () {
+        function FilesUtils() {
+        }
+        FilesUtils.showUploadPopover = function (popoverController, event, opts) {
+            return __awaiter(this, void 0, void 0, function () {
+                var modal, _a, data, role;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, popoverController.create({
+                                component: UploadFilePopover,
+                                componentProps: opts,
+                                backdropDismiss: false,
+                                keyboardClose: false,
+                                event: event,
+                                translucent: true,
+                                cssClass: 'popover-large',
+                            })];
+                        case 1:
+                            modal = _b.sent();
+                            return [4 /*yield*/, modal.present()];
+                        case 2:
+                            _b.sent();
+                            return [4 /*yield*/, modal.onDidDismiss()];
+                        case 3:
+                            _a = _b.sent(), data = _a.data, role = _a.role;
+                            return [2 /*return*/, {
+                                    role: role,
+                                    data: data ? data : undefined
+                                }];
+                    }
+                });
+            });
+        };
+        FilesUtils.readAsText = function (file, encoding) {
+            var $progress = new rxjs.Subject();
+            var reader = new FileReader();
+            encoding = (encoding || 'UTF-8').toLowerCase();
+            // Listen progress
+            reader.onprogress = function (e) {
+                var total = e.total || 1;
+                var loaded = e.total || 0;
+                if (loaded < total)
+                    $progress.next({ type: i2$1.HttpEventType.UploadProgress, loaded: loaded, total: total });
+            };
+            // Listen end
+            reader.onloadend = function (e) {
+                var body = reader.result;
+                if (typeof body === 'string') {
+                    $progress.next(new FileResponse({ body: body }));
+                    $progress.complete();
+                }
+                else {
+                    console.error("Cannot read file '" + file.name + "' as text");
+                    $progress.error("Cannot read file as text");
+                }
+            };
+            // Listen error
+            reader.onerror = function (event) {
+                console.error('[files] Error while reading file:', event);
+                $progress.error(event);
+            };
+            // Start reading the file
+            reader.readAsText(file, encoding);
+            return $progress.asObservable();
+        };
+        return FilesUtils;
+    }());
+    var UriUtils = /** @class */ (function () {
+        function UriUtils() {
+        }
+        /**
+         * Extract the filename, from an uri (using the last slash)
+         * @param uri
+         */
+        UriUtils.getFilename = function (uri) {
+            if (!uri)
+                return uri;
+            var filename = uri.trim();
+            // Get last part (or all string, if no '/')
+            var lastSlashIndex = filename.lastIndexOf('/');
+            if (lastSlashIndex !== -1 && lastSlashIndex !== uri.length - 1) {
+                filename = filename.substring(lastSlashIndex + 1);
+            }
+            // Remove query params
+            var queryParamIndex = filename.indexOf('?');
+            if (queryParamIndex !== -1) {
+                filename = filename.substring(0, queryParamIndex);
+            }
+            return filename;
+        };
+        return UriUtils;
+    }());
+
     var moment$4 = momentImported__namespace;
     var AndroidOsEnvironment = Object.freeze({
         DIRECTORY_DOWNLOADS: 'Download',
@@ -18083,34 +18329,48 @@
         };
         PlatformService.prototype.download = function (request) {
             var _this = this;
+            var _a, _b;
             if (!request || !request.uri)
                 throw new Error('Missing argument \'request\' or \'request.uri\'');
             if (this._android && this.downloader) {
                 // Check if not already downloading file
-                var location$ = this._downloadingJobs.get(request.uri);
-                if (location$)
-                    return location$;
-                request = Object.assign(Object.assign({ visibleInDownloadsUi: true, notificationVisibility: ngx$6.NotificationVisibility.VisibleNotifyCompleted, title: request.title || request.filename }, request), { destinationInExternalPublicDir: Object.assign({ dirType: AndroidOsEnvironment.DIRECTORY_DOWNLOADS, subPath: request.filename || request.title || '' }, request.destinationInExternalPublicDir) });
-                console.debug('[platform] Downloading, using request: ' + JSON.stringify(request));
+                var job$ = this._downloadingJobs.get(request.uri);
+                if (job$)
+                    return job$;
+                // Compute subPath (final filename)
+                var subPath = ((_a = request.destinationInExternalPublicDir) === null || _a === void 0 ? void 0 : _a.subPath) || ((_b = request.destinationInExternalFilesDir) === null || _b === void 0 ? void 0 : _b.subPath)
+                    || request.filename || UriUtils.getFilename(request.uri)
+                    || request.title || 'download';
+                subPath = subPath.toLowerCase()
+                    // Remove spaces
+                    .replace(/\s+/g, '-');
+                // Force APK to finish with '.apk'
+                if (request.mimeType === MimeTypes.ANDROID_APK && !subPath.toLowerCase().endsWith('.apk')) {
+                    subPath += '.apk';
+                }
+                var downloadRequest_1 = Object.assign(Object.assign({ visibleInDownloadsUi: true, notificationVisibility: ngx$6.NotificationVisibility.VisibleNotifyCompleted }, request), { filename: undefined, destinationInExternalPublicDir: !request.destinationInExternalFilesDir
+                        ? Object.assign(Object.assign({ dirType: AndroidOsEnvironment.DIRECTORY_DOWNLOADS }, request.destinationInExternalPublicDir), { subPath: subPath }) : undefined, destinationInExternalFilesDir: request.destinationInExternalFilesDir
+                        ? Object.assign(Object.assign({ dirType: AndroidOsEnvironment.DIRECTORY_DOWNLOADS }, request.destinationInExternalFilesDir), { subPath: subPath }) : undefined });
                 // Start download
-                location$ = rxjs.from(this.downloader.download(request));
+                console.debug('[platform] Downloading, using request: ' + JSON.stringify(downloadRequest_1));
+                job$ = rxjs.from(this.downloader.download(downloadRequest_1));
                 // Remember this request uri
-                this._downloadingJobs.set(request.uri, location$);
-                return location$
+                this._downloadingJobs.set(downloadRequest_1.uri, job$);
+                return job$
                     .pipe(operators.tap(function (location) {
                     console.info('[platform] File successfully downloaded at:' + location);
-                    // Forget the request
-                    _this._downloadingJobs.delete(request.uri);
+                    // Forget job
+                    _this._downloadingJobs.delete(downloadRequest_1.uri);
                     return location;
                 }), operators.catchError(function (err) {
                     var _a;
                     console.error('[platform] Unable to download: ' + (err && err.message || err));
                     // Forget the request
-                    _this._downloadingJobs.delete(request.uri);
+                    _this._downloadingJobs.delete(downloadRequest_1.uri);
                     // Retry with another location - issue in older Android version
-                    if (((_a = request.destinationInExternalPublicDir) === null || _a === void 0 ? void 0 : _a.dirType) === AndroidOsEnvironment.DIRECTORY_DOWNLOADS) {
-                        request.destinationInExternalPublicDir.dirType = AndroidOsEnvironment.DIRECTORY_DOWNLOADS_OLD;
-                        return _this.download(request);
+                    if (((_a = downloadRequest_1.destinationInExternalPublicDir) === null || _a === void 0 ? void 0 : _a.dirType) === AndroidOsEnvironment.DIRECTORY_DOWNLOADS) {
+                        downloadRequest_1.destinationInExternalPublicDir.dirType = AndroidOsEnvironment.DIRECTORY_DOWNLOADS_OLD;
+                        return _this.download(downloadRequest_1);
                     }
                     throw err;
                 }));
@@ -18526,30 +18786,6 @@
         { type: i1$2.TranslateService }
     ]; };
 
-    var UploadFile = /** @class */ (function (_super) {
-        __extends(UploadFile, _super);
-        function UploadFile() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return UploadFile;
-    }(File));
-    var FileResponse = /** @class */ (function () {
-        function FileResponse(init) {
-            this.type = i2$1.HttpEventType.Response;
-            this.body = isNotNil(init === null || init === void 0 ? void 0 : init.body) ? init.body : null;
-            this.status = (init === null || init === void 0 ? void 0 : init.status) || 0;
-            this.statusText = (init === null || init === void 0 ? void 0 : init.statusText) || 'OK';
-        }
-        return FileResponse;
-    }());
-    function isProgressEvent(event) {
-        return event && (event.type === i2$1.HttpEventType.UploadProgress
-            || event.type === i2$1.HttpEventType.DownloadProgress);
-    }
-    function isResponseEvent(event) {
-        return event && event.type === i2$1.HttpEventType.Response;
-    }
-
     var UploadFileComponent = /** @class */ (function () {
         function UploadFileComponent(cd, translate) {
             this.cd = cd;
@@ -18778,132 +19014,6 @@
         maxParallelUpload: [{ type: i0.Input }]
     };
 
-    var UploadFilePopover = /** @class */ (function () {
-        function UploadFilePopover(popoverController, translate, cd) {
-            this.popoverController = popoverController;
-            this.translate = translate;
-            this.cd = cd;
-            this.uniqueFile = false;
-            this.instantUpload = false;
-            this.importing = false;
-        }
-        Object.defineProperty(UploadFilePopover.prototype, "files", {
-            get: function () {
-                return this.uploader.files;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(UploadFilePopover.prototype, "disabled", {
-            get: function () {
-                return this.importing || isEmptyArray(this.files);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(UploadFilePopover.prototype, "valid", {
-            get: function () {
-                return isNotEmptyArray(this.files);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        UploadFilePopover.prototype.onValidate = function (event) {
-            return __awaiter(this, void 0, void 0, function () {
-                var files, errors, err_1;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            event === null || event === void 0 ? void 0 : event.stopPropagation();
-                            // Avoid multiple call
-                            if (this.importing)
-                                return [2 /*return*/];
-                            console.debug('[upload-file-popover] Validate form: will upload all files...');
-                            _a.label = 1;
-                        case 1:
-                            _a.trys.push([1, , 8, 9]);
-                            this.importing = true;
-                            this.resetError();
-                            _a.label = 2;
-                        case 2:
-                            _a.trys.push([2, 6, , 7]);
-                            // Wait processing files finished
-                            return [4 /*yield*/, this.uploader.waitIdle()];
-                        case 3:
-                            // Wait processing files finished
-                            _a.sent();
-                            // upload all files
-                            return [4 /*yield*/, this.uploader.uploadFiles()];
-                        case 4:
-                            // upload all files
-                            _a.sent();
-                            files = (this.uploader.processedFiles || [])
-                                .filter(function (file) { return !file.deleting; });
-                            // Nothing to upload: close popover
-                            if (isEmptyArray(files))
-                                return [2 /*return*/, this.cancel()];
-                            errors = files.map(function (file) { return file.error; }).filter(isNotNilOrBlank);
-                            // If error: stop
-                            if (errors.length) {
-                                errors.forEach(function (error) { return console.error(error); });
-                                throw { message: 'FILE.UPLOAD.ERROR' };
-                            }
-                            // return files
-                            return [4 /*yield*/, this.popoverController.dismiss(files)];
-                        case 5:
-                            // return files
-                            _a.sent();
-                            return [3 /*break*/, 7];
-                        case 6:
-                            err_1 = _a.sent();
-                            this.error = (err_1 && err_1.message) || err_1;
-                            return [3 /*break*/, 7];
-                        case 7: return [3 /*break*/, 9];
-                        case 8:
-                            this.importing = false;
-                            this.cd.markForCheck();
-                            return [7 /*endfinally*/];
-                        case 9: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        UploadFilePopover.prototype.cancel = function () {
-            return this.popoverController.dismiss();
-        };
-        UploadFilePopover.prototype.resetError = function () {
-            if (this.error) {
-                this.error = null;
-                this.cd.markForCheck();
-            }
-        };
-        return UploadFilePopover;
-    }());
-    UploadFilePopover.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-upload-file-popover',
-                    template: "\n<ion-content class=\"ion-no-padding\" scrollY=\"false\">\n  <div class=\"modal-content\">\n    <app-upload-file\n      #uploader\n      [uploadFn]=\"uploadFn\"\n      [deleteFn]=\"deleteFn\"\n      [fileExtension]=\"fileExtension\"\n      [instantUpload]=\"instantUpload\"\n      [uniqueFile]=\"uniqueFile\"\n      [maxParallelUpload]=\"maxParallelUpload\"\n    ></app-upload-file>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <ion-row class=\"ion-no-padding\" nowrap>\n      <ion-col>\n        <div *ngIf=\"importing\" class=\"importing-info\">\n          <ion-text color=\"medium\"><small translate>FILE.UPLOAD.IMPORTING</small></ion-text>\n          &nbsp;<ion-spinner name=\"dots\" color=\"accent\"></ion-spinner>\n        </div>\n        <ion-item *ngIf=\"error\" lines=\"none\">\n          <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n          <ion-label color=\"danger\" class=\"ion-text-wrap\" [innerHTML]=\"error | translate\"></ion-label>\n        </ion-item>\n      </ion-col>\n      <ion-col size=\"auto\">\n        <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button\n          [fill]=\"disabled ? 'clear' : 'solid'\"\n          (click)=\"onValidate($event)\"\n          (keyup.enter)=\"onValidate($event)\"\n          color=\"tertiary\"\n          [disabled]=\"disabled\"\n        >\n          <ion-label translate>COMMON.BTN_IMPORT</ion-label>\n        </ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-toolbar>\n</ion-footer>\n",
-                    encapsulation: i0.ViewEncapsulation.None,
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".importing-info{-webkit-padding-start:var(--ion-padding);padding-inline-start:var(--ion-padding);display:inline-flex;flex-wrap:nowrap;padding-top:8px}"]
-                },] }
-    ];
-    UploadFilePopover.ctorParameters = function () { return [
-        { type: i1$5.PopoverController },
-        { type: i1$2.TranslateService },
-        { type: i0.ChangeDetectorRef }
-    ]; };
-    UploadFilePopover.propDecorators = {
-        uploader: [{ type: i0.ViewChild, args: ['uploader', { static: true },] }],
-        fileExtension: [{ type: i0.Input }],
-        title: [{ type: i0.Input }],
-        uniqueFile: [{ type: i0.Input }],
-        instantUpload: [{ type: i0.Input }],
-        uploadFn: [{ type: i0.Input }],
-        deleteFn: [{ type: i0.Input }],
-        maxParallelUpload: [{ type: i0.Input }]
-    };
-
     var APP_TESTING_PAGES = new i0.InjectionToken('testingPages');
     var SharedTestsPage = /** @class */ (function () {
         function SharedTestsPage(route, router, translate, pages) {
@@ -20498,74 +20608,6 @@
         return JobUtils;
     }());
 
-    var FilesUtils = /** @class */ (function () {
-        function FilesUtils() {
-        }
-        FilesUtils.showUploadPopover = function (popoverController, event, opts) {
-            return __awaiter(this, void 0, void 0, function () {
-                var modal, _a, data, role;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0: return [4 /*yield*/, popoverController.create({
-                                component: UploadFilePopover,
-                                componentProps: opts,
-                                backdropDismiss: false,
-                                keyboardClose: false,
-                                event: event,
-                                translucent: true,
-                                cssClass: 'popover-large',
-                            })];
-                        case 1:
-                            modal = _b.sent();
-                            return [4 /*yield*/, modal.present()];
-                        case 2:
-                            _b.sent();
-                            return [4 /*yield*/, modal.onDidDismiss()];
-                        case 3:
-                            _a = _b.sent(), data = _a.data, role = _a.role;
-                            return [2 /*return*/, {
-                                    role: role,
-                                    data: data ? data : undefined
-                                }];
-                    }
-                });
-            });
-        };
-        FilesUtils.readAsText = function (file, encoding) {
-            var $progress = new rxjs.Subject();
-            var reader = new FileReader();
-            encoding = (encoding || 'UTF-8').toLowerCase();
-            // Listen progress
-            reader.onprogress = function (e) {
-                var total = e.total || 1;
-                var loaded = e.total || 0;
-                if (loaded < total)
-                    $progress.next({ type: i2$1.HttpEventType.UploadProgress, loaded: loaded, total: total });
-            };
-            // Listen end
-            reader.onloadend = function (e) {
-                var body = reader.result;
-                if (typeof body === 'string') {
-                    $progress.next(new FileResponse({ body: body }));
-                    $progress.complete();
-                }
-                else {
-                    console.error("Cannot read file '" + file.name + "' as text");
-                    $progress.error("Cannot read file as text");
-                }
-            };
-            // Listen error
-            reader.onerror = function (event) {
-                console.error('[files] Error while reading file:', event);
-                $progress.error(event);
-            };
-            // Start reading the file
-            reader.readAsText(file, encoding);
-            return $progress.asObservable();
-        };
-        return FilesUtils;
-    }());
-
     /**
      * Define here theme colors
      */
@@ -23215,9 +23257,6 @@
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
 
-    var MimeTypes = Object.freeze({
-        ANDROID_APK: 'application/vnd.android.package-archive'
-    });
     var AppInstallUpgradeCard = /** @class */ (function () {
         function AppInstallUpgradeCard(modalCtrl, configService, toastController, alertController, translate, cd, platform, network, environment) {
             this.modalCtrl = modalCtrl;
@@ -23230,7 +23269,6 @@
             this.network = network;
             this.environment = environment;
             this._subscription = new rxjs.Subscription();
-            this._showUpdateOfflineFeature = false;
             this.loading = true;
             this.hasDownloader = false;
             this.downloading = false;
@@ -23238,21 +23276,7 @@
             this.showUpgradeWarning = true;
             this.showOfflineWarning = true;
             this.showInstallButton = false;
-            this.onUpdateOfflineModeClick = new i0.EventEmitter();
         }
-        Object.defineProperty(AppInstallUpgradeCard.prototype, "showUpdateOfflineFeature", {
-            get: function () {
-                return this._showUpdateOfflineFeature;
-            },
-            set: function (value) {
-                if (value === this._showUpdateOfflineFeature)
-                    return; // Skip
-                this._showUpdateOfflineFeature = value;
-                this.markForCheck();
-            },
-            enumerable: false,
-            configurable: true
-        });
         AppInstallUpgradeCard.prototype.ngOnInit = function () {
             var _this = this;
             this.offline = this.network.offline;
@@ -23276,7 +23300,6 @@
         AppInstallUpgradeCard.prototype.ngOnDestroy = function () {
             this._subscription.unsubscribe();
             this._subscription = null;
-            this.onUpdateOfflineModeClick.complete();
             this.installLinks = null;
             this.upgradeLinks = null;
         };
@@ -23464,10 +23487,10 @@
                     var title = void 0;
                     var mimeType = void 0;
                     // Get file name
-                    var filename = this.getFilename(url);
+                    var filename = UriUtils.getFilename(url);
                     var 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')) {
+                    if (filename === null || filename === void 0 ? void 0 : filename.toLowerCase().endsWith('.apk')) {
                         // Define mime type
                         mimeType = MimeTypes.ANDROID_APK;
                         // Get the file version (if any)
@@ -23478,11 +23501,9 @@
                             filename = (name + "-v" + version + ".apk").toLowerCase();
                             title = name + " v" + version;
                         }
-                        else {
-                            // Replace 'latest' with the app version, if present
-                            if (filename.indexOf('latest')) {
-                                filename = filename.replace('latest', version);
-                            }
+                        // Replace 'latest' with the app version, if present in the filename
+                        else if (filename.indexOf('latest') && version !== 'latest') {
+                            filename = filename.replace('latest', version);
                         }
                     }
                     result.push({ name: name, url: url, platform: 'android', version: version, filename: filename, title: title, mimeType: mimeType });
@@ -23494,18 +23515,6 @@
             //}
             return result;
         };
-        AppInstallUpgradeCard.prototype.getFilename = function (url) {
-            if (!url)
-                return;
-            // Get last part (or all string, if no '/')
-            var filename = url.substring(url.lastIndexOf('/') + 1);
-            var queryParamIndex = filename.indexOf('?');
-            if (queryParamIndex !== -1) {
-                // Remove query params
-                return filename.substring(0, queryParamIndex);
-            }
-            return filename;
-        };
         AppInstallUpgradeCard.prototype.listenDownloadJobs = function () {
             var _this = this;
             // Listening downloading promise, if exists
@@ -23637,7 +23646,7 @@
     AppInstallUpgradeCard.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-install-upgrade-card',
-                    template: "\n\n<!-- Offline mode card-->\n<ion-card *ngIf=\"showOfflineWarning && (!loading && offline || waitingNetwork)\"\n          color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\" *ngIf=\"!waitingNetwork; else waitingNetworkText\">\n            <h4>\n            <b *ngIf=\"isLogin; else notLogin\"  [innerHTML]=\"'NETWORK.INFO.OFFLINE_OR_UNAUTHORIZED'| translate\"></b>\n            <ng-template #notLogin>\n              <b [innerHTML]=\"'NETWORK.INFO.OFFLINE'| translate\"></b>\n            </ng-template>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.OFFLINE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n          <ng-template #waitingNetworkText>\n            <ion-text class=\"ion-text-wrap\" [innerHTML]=\"'NETWORK.INFO.RETRY_TO_CONNECT'| translate\"></ion-text>\n          </ng-template>\n        </ion-col>\n        <ion-col size=\"auto\">\n\n          <!-- Retry button -->\n          <ion-button *ngIf=\"!waitingNetwork; else waitingSpinner\" color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"tryOnline()\">\n            <span translate>NETWORK.BTN_CHECK_ALIVE</span>\n          </ion-button>\n\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Upgrade links -->\n<ion-card *ngIf=\"showUpgradeWarning && !loading && !offline && upgradeLinks\"\n          color=\"accent\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of upgradeLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3>\n              <span *ngIf=\"link.version\" [innerHTML]=\"'INFO.UPDATE_APP_TO_VERSION'| translate: link\"></span>\n              <span *ngIf=\"!link.version\" [innerHTML]=\"'INFO.UPDATE_APP'| translate: link\"></span>\n            </h3>\n            <h4>\n              <small *ngIf=\"last\" [innerHTML]=\"'INFO.UPDATE_APP_HELP'|translate\"></small>\n            </h4>\n          </ion-text>\n        </ion-col>\n\n        <ion-col size=\"auto\">\n          <ng-container *ngTemplateOutlet=\"downloadButton; context: { $implicit: link  }\"></ng-container>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Install links -->\n<ion-card *ngIf=\"showInstallButton && !loading && !offline && installLinks\"\n          color=\"secondary\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of installLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3 [innerHTML]=\"'INFO.DOWNLOAD_APP_TITLE'| translate: {name: link.name, platform: getPlatformName(link.platform) }\"></h3>\n            <h4><small *ngIf=\"last\" [innerHTML]=\"'INFO.DOWNLOAD_APP_HELP'|translate\"></small></h4>\n          </ion-text>\n        </ion-col>\n        <ion-col size=\"auto\">\n          <ng-container *ngTemplateOutlet=\"downloadButton; context: { $implicit: link  }\"></ng-container>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Update offline feature card-->\n<ion-card *ngIf=\"showUpdateOfflineFeature && !loading && !offline\"\n          color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h4>\n              <b [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE'| translate\"></b>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n        </ion-col>\n        <ion-col size=\"auto\">\n\n          <!-- Retry button -->\n          <ion-button color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"onUpdateOfflineModeClick.emit($event)\">\n            <span translate>NETWORK.BTN_UPDATE</span>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Display a download button, depending on the link URL, and the device platform -->\n<ng-template #downloadButton let-link>\n\n  <ng-container *ngIf=\"link.filename; else redirectButton\">\n\n    <ng-container *ngIf=\"hasDownloader; else webDownloadButton\">\n      <!-- Download using platform -->\n      <ion-button (click)=\"download($event, asLink(link))\"\n                  *ngIf=\"!link.location; else openButton\"\n                  [disabled]=\"link.downloading\"\n                  color=\"tertiary\" class=\"ion-float-end\">\n        <ion-icon slot=\"start\" *ngIf=\"!link.downloading\" name=\"download\"></ion-icon>\n        <ion-spinner slot=\"start\" class=\"ion-no-padding\" *ngIf=\"link.downloading\"></ion-spinner>\n        <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n      </ion-button>\n\n      <!-- Open APK button -->\n      <ng-template #openButton>\n        <ion-button *ngIf=\"link.location\"\n                    (click)=\"openFile($event, link)\"\n                    color=\"tertiary\" class=\"ion-float-end\" >\n          <ion-label translate>COMMON.BTN_INSTALL</ion-label>\n        </ion-button>\n      </ng-template>\n    </ng-container>\n\n    <!-- Web download button -->\n    <ng-template #webDownloadButton>\n      <ion-button [download]=\"link.downloadFilename\"\n                  [href]=\"link.url\"\n                  color=\"tertiary\" class=\"ion-float-end\" >\n        <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n      </ion-button>\n    </ng-template>\n  </ng-container>\n\n  <!-- Web redirect button -->\n  <ng-template #redirectButton>\n    <ion-button [href]=\"link.url\" rel=\"external\" color=\"tertiary\" class=\"ion-float-end\" target=\"_blank\">\n      <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n    </ion-button>\n  </ng-template>\n</ng-template>\n\n\n<!-- Waiting spinner -->\n<ng-template #waitingSpinner>\n  <ion-spinner color=\"light\"></ion-spinner>\n</ng-template>\n",
+                    template: "\n\n<!-- Offline mode card-->\n<ion-card *ngIf=\"showOfflineWarning && (!loading && offline || waitingNetwork)\"\n          color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\" *ngIf=\"!waitingNetwork; else waitingNetworkText\">\n            <h4>\n            <b *ngIf=\"isLogin; else notLogin\"  [innerHTML]=\"'NETWORK.INFO.OFFLINE_OR_UNAUTHORIZED'| translate\"></b>\n            <ng-template #notLogin>\n              <b [innerHTML]=\"'NETWORK.INFO.OFFLINE'| translate\"></b>\n            </ng-template>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.OFFLINE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n          <ng-template #waitingNetworkText>\n            <ion-text class=\"ion-text-wrap\" [innerHTML]=\"'NETWORK.INFO.RETRY_TO_CONNECT'| translate\"></ion-text>\n          </ng-template>\n        </ion-col>\n        <ion-col size=\"auto\">\n\n          <!-- Retry button -->\n          <ion-button *ngIf=\"!waitingNetwork; else waitingSpinner\" color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"tryOnline()\">\n            <span translate>NETWORK.BTN_CHECK_ALIVE</span>\n          </ion-button>\n\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Upgrade links -->\n<ion-card *ngIf=\"showUpgradeWarning && !loading && !offline && upgradeLinks\"\n          color=\"accent\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of upgradeLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3>\n              <span *ngIf=\"link.version\" [innerHTML]=\"'INFO.UPDATE_APP_TO_VERSION'| translate: link\"></span>\n              <span *ngIf=\"!link.version\" [innerHTML]=\"'INFO.UPDATE_APP'| translate: link\"></span>\n            </h3>\n            <h4>\n              <small *ngIf=\"last\" [innerHTML]=\"'INFO.UPDATE_APP_HELP'|translate\"></small>\n            </h4>\n          </ion-text>\n        </ion-col>\n\n        <ion-col size=\"auto\">\n          <ng-container *ngTemplateOutlet=\"downloadButton; context: { $implicit: link  }\"></ng-container>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Install links -->\n<ion-card *ngIf=\"showInstallButton && !loading && !offline && installLinks\"\n          color=\"secondary\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of installLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3 [innerHTML]=\"'INFO.DOWNLOAD_APP_TITLE'| translate: {name: link.name, platform: getPlatformName(link.platform) }\"></h3>\n            <h4><small *ngIf=\"last\" [innerHTML]=\"'INFO.DOWNLOAD_APP_HELP'|translate\"></small></h4>\n          </ion-text>\n        </ion-col>\n        <ion-col size=\"auto\">\n          <ng-container *ngTemplateOutlet=\"downloadButton; context: { $implicit: link  }\"></ng-container>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Display a download button, depending on the link URL, and the device platform -->\n<ng-template #downloadButton let-link>\n\n  <ng-container *ngIf=\"link.filename; else redirectButton\">\n\n    <ng-container *ngIf=\"hasDownloader; else webDownloadButton\">\n      <!-- Download using platform -->\n      <ion-button (click)=\"download($event, asLink(link))\"\n                  *ngIf=\"!link.location; else openButton\"\n                  [disabled]=\"link.downloading\"\n                  color=\"tertiary\" class=\"ion-float-end\">\n        <ion-icon slot=\"start\" *ngIf=\"!link.downloading\" name=\"download\"></ion-icon>\n        <ion-spinner slot=\"start\" class=\"ion-no-padding\" *ngIf=\"link.downloading\"></ion-spinner>\n        <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n      </ion-button>\n\n      <!-- Open APK button -->\n      <ng-template #openButton>\n        <ion-button *ngIf=\"link.location\"\n                    (click)=\"openFile($event, link)\"\n                    color=\"tertiary\" class=\"ion-float-end\" >\n          <ion-label translate>COMMON.BTN_INSTALL</ion-label>\n        </ion-button>\n      </ng-template>\n    </ng-container>\n\n    <!-- Web download button -->\n    <ng-template #webDownloadButton>\n      <ion-button [download]=\"link.downloadFilename\"\n                  [href]=\"link.url\"\n                  color=\"tertiary\" class=\"ion-float-end\" >\n        <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n      </ion-button>\n    </ng-template>\n  </ng-container>\n\n  <!-- Web redirect button -->\n  <ng-template #redirectButton>\n    <ion-button [href]=\"link.url\" rel=\"external\" color=\"tertiary\" class=\"ion-float-end\" target=\"_blank\">\n      <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n    </ion-button>\n  </ng-template>\n</ng-template>\n\n\n<!-- Waiting spinner -->\n<ng-template #waitingSpinner>\n  <ion-spinner color=\"light\"></ion-spinner>\n</ng-template>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     animations: [slideUpDownAnimation],
                     styles: ["ion-text small{font-size:85%}"]
@@ -23658,9 +23667,7 @@
         isLogin: [{ type: i0.Input }],
         showUpgradeWarning: [{ type: i0.Input }],
         showOfflineWarning: [{ type: i0.Input }],
-        showInstallButton: [{ type: i0.Input }],
-        showUpdateOfflineFeature: [{ type: i0.Input }],
-        onUpdateOfflineModeClick: [{ type: i0.Output }]
+        showInstallButton: [{ type: i0.Input }]
     };
 
     var IsLoginAccountPipe = /** @class */ (function () {
@@ -24198,6 +24205,31 @@
         ref: [{ type: i0.Input }]
     };
 
+    var AppUpdateOfflineModeCard = /** @class */ (function () {
+        function AppUpdateOfflineModeCard() {
+            this.onUpdateClick = new i0.EventEmitter();
+        }
+        AppUpdateOfflineModeCard.prototype.ngOnDestroy = function () {
+            this.onUpdateClick.complete();
+        };
+        return AppUpdateOfflineModeCard;
+    }());
+    AppUpdateOfflineModeCard.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-update-offline-mode-card',
+                    template: "\n<!-- Update offline feature card-->\n<ion-card color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngIf=\"!progressionValue; else progression\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\" >\n            <h4>\n              <b [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE'| translate\"></b>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n        </ion-col>\n\n        <!-- Update button -->\n        <ion-col size=\"auto\">\n          <ion-button color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"onUpdateClick.emit($event)\">\n            <span translate>NETWORK.BTN_UPDATE</span>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ng-template #progression>\n        <ion-row>\n          <ion-col>\n            <ion-text class=\"ion-text-wrap\" [innerHTML]=\"progressionMessage\"></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-progress-bar [value]=\"progressionValue / 100\"></ion-progress-bar>\n          </ion-col>\n        </ion-row>\n      </ng-template>\n    </ion-grid>\n\n\n  </ion-card-content>\n</ion-card>\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    animations: [slideUpDownAnimation],
+                    styles: ["ion-text small{font-size:85%}"]
+                },] }
+    ];
+    AppUpdateOfflineModeCard.ctorParameters = function () { return []; };
+    AppUpdateOfflineModeCard.propDecorators = {
+        progressionMessage: [{ type: i0.Input }],
+        progressionValue: [{ type: i0.Input }],
+        onUpdateClick: [{ type: i0.Output }]
+    };
+
     var CoreModule = /** @class */ (function () {
         function CoreModule() {
         }
@@ -24247,6 +24279,7 @@
                         // Network
                         SelectPeerModal,
                         AppInstallUpgradeCard,
+                        AppUpdateOfflineModeCard,
                         // Other components
                         TableSelectColumnsComponent,
                         ActionsColumnComponent,
@@ -24282,6 +24315,7 @@
                         AppPropertiesForm,
                         AppListForm,
                         AppInstallUpgradeCard,
+                        AppUpdateOfflineModeCard,
                         DepartmentToStringPipe,
                         AppIconComponent,
                         TextPopover,
@@ -25266,7 +25300,7 @@
                 updateDatasource: { get: function () { return _super_1.prototype.updateDatasource; } }
             });
             return __awaiter(this, void 0, void 0, function () {
-                var res, existingData;
+                var fetchMoreFn, res, existingData;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -25276,9 +25310,9 @@
                                 console.warn('Cannot fetch more because still editing row');
                                 return [2 /*return*/];
                             }
-                            // Fetch next page
-                            this._fetchMoreFn = null; // Avoid multiple call
-                            return [4 /*yield*/, this._fetchMoreFn()];
+                            fetchMoreFn = this._fetchMoreFn;
+                            this._fetchMoreFn = null;
+                            return [4 /*yield*/, fetchMoreFn()];
                         case 1:
                             res = _a.sent();
                             // Skip if empty (no more data)
@@ -30321,6 +30355,7 @@
                 missingEntity: [null, SharedValidators.entity],
                 disableEntity: [null, SharedValidators.entity],
                 entities: [null, SharedFormArrayValidators.requiredArrayMinLength(1)],
+                farEntity: [null, SharedValidators.entity]
             });
             this.form.get('disableEntity').disable();
         }
@@ -30359,6 +30394,13 @@
                 attributes: ['label', 'name', 'description', 'comments'],
                 displayWith: this.entityToString
             });
+            // Far entity, in the list
+            this.autocompleteFields.add('entity-far', {
+                suggestFn: function (value, filter) { return _this.suggest(value, filter); },
+                attributes: ['label', 'name'],
+                displayWith: this.entityToString,
+                showAllOnFocus: true
+            });
             // For mutliple value
             this.autocompleteFields.add('entities-items-filter', {
                 service: {
@@ -30378,6 +30420,7 @@
                 return __generator(this, function (_a) {
                     data = {
                         entity: deepCopy(FAKE_ENTITIES)[0],
+                        farEntity: deepCopy(FAKE_ENTITIES)[2],
                         // This item is NOT in the items list => i should be displayed anyway
                         missingEntity: {
                             id: -1, label: '??', name: 'Missing item'
@@ -30473,7 +30516,7 @@
     AutocompleteTestPage.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-autocomplete-test',
-                    template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar>\n    <a mat-tab-link\n       [active]=\"mode==='mobile'\"\n       (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='desktop'\"\n       (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='memory'\"\n       (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link\n       [active]=\"mode==='temp'\"\n       (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!--<ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n    </ion-grid>-->\n\n\n    <ion-grid *ngIf=\"mode === 'memory'\">\n\n      <!-- debugging memory leak -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Debug memory leak</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Items type\">\n            <mat-select (selectionChange)=\"memoryAutocompleteFieldName=$event.value\" [value]=\"memoryAutocompleteFieldName\">\n              <mat-option value=\"entity-$items\">Observable</mat-option>\n              <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n        <ion-col size=\"1\" class=\"ion-no-padding\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Mobile ?\">\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field formControlName=\"entity\"\n                                  *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n                                  [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                                  [mobile]=\"memoryMobile\"\n                                  [equals]=\"equals\"\n                                  [logPrefix]=\"'[combo-memory-leak]'\">\n          </mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-1]'\"\n                                      [required]=\"true\"\n                                      placeholder=\"Suggest field\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Items is an Observable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-observable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [clearable]=\"true\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      suggestLengthThreshold=\"3\"\n                                      [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n                                      required\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      mobile=\"true\"\n                                      multiple=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Change filter\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre></pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-button (click)=\"updateFilter(filterChangeField, 'entity-items-filter')\">Filter on: {{autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}</ion-button>\n                  </ion-col>\n                  <ion-col>\n                    <mat-autocomplete-field formControlName=\"entity\" #filterChangeField\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-filter]'\"\n                    ></mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"min-width-large\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"true\"\n                                      class=\"min-width-large\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Fullscreen\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-mobile-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Desktop mode -->\n    <ion-grid *ngIf=\"mode === 'desktop'\">\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Desktop mode</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  items from suggest function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-suggest]'\">\n              </mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      suggestLengthThreshold=\"3\"\n                                      [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an array\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: [], value: {{stringify(form.controls.entity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items')\"\n                                      [logPrefix]=\"'[combo-desktop-array-1]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      mobile=\"false\"\n                                      multiple=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-missing]'\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size panel\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-disable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                      [readonly]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"mat-autocomplete-panel-full-size\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      class=\"mat-autocomplete-panel-full-size\"\n                                      panelWidth=\"100vw\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelWidth: string</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                  <ion-col size=\"3\">\n                    <mat-checkbox #showIcons [checked]=\"false\">\n                      Icons ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"false\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                      <mat-icon matPrefix *ngIf=\"showIcons.checked\">keyboard_arrow_right</mat-icon>\n                      <mat-icon matSuffix *ngIf=\"showIcons.checked\">keyboard_arrow_left</mat-icon>\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
+                    template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar>\n    <a mat-tab-link\n       [active]=\"mode==='mobile'\"\n       (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='desktop'\"\n       (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='memory'\"\n       (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link\n       [active]=\"mode==='temp'\"\n       (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!--<ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n    </ion-grid>-->\n\n\n    <ion-grid *ngIf=\"mode === 'memory'\">\n\n      <!-- debugging memory leak -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Debug memory leak</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Items type\">\n            <mat-select (selectionChange)=\"memoryAutocompleteFieldName=$event.value\" [value]=\"memoryAutocompleteFieldName\">\n              <mat-option value=\"entity-$items\">Observable</mat-option>\n              <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n        <ion-col size=\"1\" class=\"ion-no-padding\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Mobile ?\">\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field formControlName=\"entity\"\n                                  *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n                                  [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                                  [mobile]=\"memoryMobile\"\n                                  [equals]=\"equals\"\n                                  [logPrefix]=\"'[combo-memory-leak]'\">\n          </mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"farEntity\"\n                                      [config]=\"autocompleteFields.get('entity-far')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-far]'\"\n                                      [required]=\"true\"\n                                      placeholder=\"Far entity (in the list)\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-1]'\"\n                                      [required]=\"true\"\n                                      placeholder=\"Suggest field\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Items is an Observable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-observable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [clearable]=\"true\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      suggestLengthThreshold=\"3\"\n                                      [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n                                      required\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      mobile=\"true\"\n                                      multiple=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Change filter\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre></pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-button (click)=\"updateFilter(filterChangeField, 'entity-items-filter')\">Filter on: {{autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}</ion-button>\n                  </ion-col>\n                  <ion-col>\n                    <mat-autocomplete-field formControlName=\"entity\" #filterChangeField\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-filter]'\"\n                    ></mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"min-width-large\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"true\"\n                                      class=\"min-width-large\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Fullscreen\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-mobile-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Desktop mode -->\n    <ion-grid *ngIf=\"mode === 'desktop'\">\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Desktop mode</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  items from suggest function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-suggest]'\">\n              </mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      suggestLengthThreshold=\"3\"\n                                      [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an array\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: [], value: {{stringify(form.controls.entity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items')\"\n                                      [logPrefix]=\"'[combo-desktop-array-1]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      mobile=\"false\"\n                                      multiple=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-missing]'\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size panel\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-disable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                      [readonly]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"mat-autocomplete-panel-full-size\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      class=\"mat-autocomplete-panel-full-size\"\n                                      panelWidth=\"100vw\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelWidth: string</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                  <ion-col size=\"3\">\n                    <mat-checkbox #showIcons [checked]=\"false\">\n                      Icons ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"false\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                      <mat-icon matPrefix *ngIf=\"showIcons.checked\">keyboard_arrow_right</mat-icon>\n                      <mat-icon matSuffix *ngIf=\"showIcons.checked\">keyboard_arrow_left</mat-icon>\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
                 },] }
     ];
     AutocompleteTestPage.ctorParameters = function () { return [
@@ -31965,6 +32008,7 @@
     exports.MessageService = MessageService;
     exports.MessageTypeList = MessageTypeList;
     exports.MessageTypes = MessageTypes;
+    exports.MimeTypes = MimeTypes;
     exports.ModalToolbarComponent = ModalToolbarComponent;
     exports.NetworkService = NetworkService;
     exports.NgInitDirective = NgInitDirective;
@@ -32049,6 +32093,7 @@
     exports.UploadFilePopover = UploadFilePopover;
     exports.UploadFileTestingModule = UploadFileTestingModule;
     exports.UploadFileTestingPage = UploadFileTestingPage;
+    exports.UriUtils = UriUtils;
     exports.UserEventFragments = UserEventFragments;
     exports.UserEventService = UserEventService;
     exports.UserEventTypes = UserEventTypes;
@@ -32210,12 +32255,13 @@
     exports.ɵf = RegisterModal;
     exports.ɵg = UserSettingsValidatorService;
     exports.ɵh = LocalSettingsValidatorService;
-    exports.ɵi = AppIconComponent;
-    exports.ɵj = DateTestPage;
-    exports.ɵk = NumpadTestPage;
-    exports.ɵl = MatBadgeIconTestPage;
-    exports.ɵm = ToastTestingModule;
-    exports.ɵn = ToastTestingPage;
+    exports.ɵi = AppUpdateOfflineModeCard;
+    exports.ɵj = AppIconComponent;
+    exports.ɵk = DateTestPage;
+    exports.ɵl = NumpadTestPage;
+    exports.ɵm = MatBadgeIconTestPage;
+    exports.ɵn = ToastTestingModule;
+    exports.ɵo = ToastTestingPage;
 
     Object.defineProperty(exports, '__esModule', { value: true });