@sumaris-net/ngx-components 1.19.2 → 1.19.5-rc1

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;
@@ -18668,235 +18904,109 @@
             // Start upload
             if (this.instantUpload) {
                 this.uploadFiles(items);
-            }
-        };
-        /**
-         * Execute upload
-         */
-        UploadFileComponent.prototype.uploadFiles = function (files) {
-            return __awaiter(this, void 0, void 0, function () {
-                var $processingFileCountChange, $changes, jobs;
-                var _this = this;
-                return __generator(this, function (_b) {
-                    if (!files) {
-                        console.info('[upload-file] Uploading all files...');
-                        files = this.files;
-                    }
-                    $processingFileCountChange = new rxjs.BehaviorSubject(this.processingFilesCount);
-                    $changes = new rxjs.Subject();
-                    $changes.subscribe(function (_) {
-                        _this.cd.markForCheck();
-                        $processingFileCountChange.next(_this.processingFilesCount);
-                    });
-                    jobs = files
-                        .map(function (f) { return f; })
-                        .filter(function (file) { return file && isNil(file.progress) && !file.error; }) // Skip if already started or in error
-                        .map(function (file, i) {
-                        // Wait if need
-                        if (isNotNil(_this.maxParallelUpload)) {
-                            return $processingFileCountChange.pipe(operators.debounceTime(i), // call of filter() must be different for waiting job
-                            operators.filter(function (count) { return count < _this.maxParallelUpload; }), operators.map(function (_) {
-                                // Start uploading
-                                if (isNil(file.progress))
-                                    file.progress = 0;
-                                $changes.next();
-                                return file;
-                            }), operators.first());
-                        }
-                        // Start uploading
-                        if (isNil(file.progress))
-                            file.progress = 0;
-                        return rxjs.of(file);
-                    })
-                        .map(function (file$) { return file$.pipe(operators.filter(isNotNil), 
-                    // Log
-                    operators.tap(function (file) { return console.debug("[upload-file] " + file.name + ": uploading..."); }), 
-                    // Start uploading
-                    operators.switchMap(function (file) { return _this.uploadFn(file)
-                        .pipe(operators.filter(isNotNil), operators.map(function (event) {
-                        // Progress event
-                        if (isProgressEvent(event)) {
-                            if (isNotNil(event.loaded) && event.loaded >= 0) {
-                                file.progress = Math.min(1, event.loaded / (event.total || 1));
-                            }
-                            else {
-                                file.progress = -1; // Indeterminate progression
-                            }
-                        }
-                        // Response event
-                        else if (isResponseEvent(event)) {
-                            file.progress = 1;
-                            file.response = event;
-                            console.debug("[upload-file] " + file.name + ": " + (event.statusText || 'OK'), file.response);
-                        }
-                        // Other events: ignore
-                        else {
-                            // DEBUG
-                            console.debug('[upload-file] Ignoring a file event: ', event);
-                        }
-                        return file;
-                    }), operators.catchError(function (err) {
-                        var _a;
-                        console.error(err);
-                        file.error = err && (err.message || ((_a = err.error) === null || _a === void 0 ? void 0 : _a.message)) || 'FILE.UPLOAD.ERROR';
-                        return rxjs.of(file);
-                    }), operators.tap(function () {
-                        $changes.next();
-                        _this.cd.markForCheck();
-                    })); })); });
-                    // Wait jobs to finish
-                    return [2 /*return*/, rxjs.forkJoin(jobs)
-                            .pipe(operators.tap(function (_) { return $changes.complete(); }))
-                            .toPromise()];
-                });
-            });
-        };
-        UploadFileComponent.prototype.waitIdle = function (opts) {
-            var _this = this;
-            return waitFor(function () { return _this.processingFilesCount === 0; }, opts);
-        };
-        return UploadFileComponent;
-    }());
-    UploadFileComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-upload-file',
-                    template: "<div *ngIf=\"!uniqueFile || files.length === 0\"\n     class=\"container\"\n     appDragAndDrop (fileDropped)=\"onFileDropped($event)\">\n  <input\n    type=\"file\"\n    #fileDropRef\n    id=\"fileDropRef\"\n    multiple\n    [accept]=\"fileExtension\"\n    (change)=\"fileBrowseHandler($any($event.target).files)\"\n  />\n  <mat-icon style=\"font-size: xx-large\" color=\"accent\">file_upload</mat-icon>\n  <ion-label\n    [innerHTML]=\"\n      'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }\n    \"\n  ></ion-label>\n  <ion-button>{{ 'FILE.UPLOAD.BROWSE' | translate }}</ion-button>\n</div>\n<div class=\"files-list\">\n  <div *ngFor=\"let file of files; index as i\"\n       class=\"single-file\"\n       [class.deleting]=\"file.deleting\">\n    <mat-icon>description</mat-icon>\n    <div class=\"info\">\n      <h4 class=\"name\">\n        {{ file.name }}\n      </h4>\n      <p class=\"size\">\n        {{ file.size | fileSize }}\n      </p>\n      <ion-progress-bar *ngIf=\"!file.error\"\n                        [value]=\"file.progress||0\"\n                        [type]=\"(file.deleting || file.progress === -1) ? 'indeterminate' : 'determinate'\"></ion-progress-bar>\n      <ion-label *ngIf=\"file.error\" color=\"danger\" [innerHTML]=\"file.error | translate\"></ion-label>\n    </div>\n    <!-- remote from list (before importation) -->\n    <button *ngIf=\"!(file.progress) || file.error\" mat-icon-button (click)=\"deleteFile(i)\">\n      <mat-icon>clear</mat-icon>\n    </button>\n    <!-- delete file (remotely - after importation) -->\n    <button *ngIf=\"file.progress === 1 && !!deleteFn && !file.deleting\" mat-icon-button (click)=\"deleteFile(i)\">\n      <mat-icon>clear</mat-icon>\n    </button>\n  </div>\n</div>\n",
-                    styles: [".container{width:calc(100% - 3rem);min-height:200px;padding:2rem;text-align:center;border:1px dashed #979797;position:relative;margin:1.5rem}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}.container ion-label{display:block;font-size:20px;font-weight:600;color:#38424c}.container label{display:inline-block;color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.fileover{-webkit-animation:shake 1s;animation:shake 1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.files-list{max-height:300px;overflow:auto}.files-list .single-file{display:flex;flex-grow:1;padding:.5rem;justify-content:space-between;align-items:center;border:1px dashed #979797;margin-bottom:1rem}.files-list .single-file.deleting .name{color:grey!important;font-style:italic!important}.files-list .single-file .name{font-size:14px;font-weight:500;color:#353f4a;margin:0}.files-list .single-file .size{font-size:12px;font-weight:500;color:#a4a4a4;margin:0 0 .25rem}.files-list .single-file .info{width:100%}@-webkit-keyframes shake{0%{transform:translate(1px,1px) rotate(0deg)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0deg)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0deg)}to{transform:translate(1px,-2px) rotate(-1deg)}}@keyframes shake{0%{transform:translate(1px,1px) rotate(0deg)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0deg)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0deg)}to{transform:translate(1px,-2px) rotate(-1deg)}}"]
-                },] }
-    ];
-    UploadFileComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i1$2.TranslateService }
-    ]; };
-    UploadFileComponent.propDecorators = {
-        fileDropEl: [{ type: i0.ViewChild, args: ['fileDropRef', { static: false },] }],
-        fileExtension: [{ type: i0.Input }],
-        uniqueFile: [{ type: i0.Input }],
-        instantUpload: [{ type: i0.Input }],
-        uploadFn: [{ type: i0.Input }],
-        deleteFn: [{ type: i0.Input }],
-        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*/];
+            }
+        };
+        /**
+         * Execute upload
+         */
+        UploadFileComponent.prototype.uploadFiles = function (files) {
+            return __awaiter(this, void 0, void 0, function () {
+                var $processingFileCountChange, $changes, jobs;
+                var _this = this;
+                return __generator(this, function (_b) {
+                    if (!files) {
+                        console.info('[upload-file] Uploading all files...');
+                        files = this.files;
                     }
+                    $processingFileCountChange = new rxjs.BehaviorSubject(this.processingFilesCount);
+                    $changes = new rxjs.Subject();
+                    $changes.subscribe(function (_) {
+                        _this.cd.markForCheck();
+                        $processingFileCountChange.next(_this.processingFilesCount);
+                    });
+                    jobs = files
+                        .map(function (f) { return f; })
+                        .filter(function (file) { return file && isNil(file.progress) && !file.error; }) // Skip if already started or in error
+                        .map(function (file, i) {
+                        // Wait if need
+                        if (isNotNil(_this.maxParallelUpload)) {
+                            return $processingFileCountChange.pipe(operators.debounceTime(i), // call of filter() must be different for waiting job
+                            operators.filter(function (count) { return count < _this.maxParallelUpload; }), operators.map(function (_) {
+                                // Start uploading
+                                if (isNil(file.progress))
+                                    file.progress = 0;
+                                $changes.next();
+                                return file;
+                            }), operators.first());
+                        }
+                        // Start uploading
+                        if (isNil(file.progress))
+                            file.progress = 0;
+                        return rxjs.of(file);
+                    })
+                        .map(function (file$) { return file$.pipe(operators.filter(isNotNil), 
+                    // Log
+                    operators.tap(function (file) { return console.debug("[upload-file] " + file.name + ": uploading..."); }), 
+                    // Start uploading
+                    operators.switchMap(function (file) { return _this.uploadFn(file)
+                        .pipe(operators.filter(isNotNil), operators.map(function (event) {
+                        // Progress event
+                        if (isProgressEvent(event)) {
+                            if (isNotNil(event.loaded) && event.loaded >= 0) {
+                                file.progress = Math.min(1, event.loaded / (event.total || 1));
+                            }
+                            else {
+                                file.progress = -1; // Indeterminate progression
+                            }
+                        }
+                        // Response event
+                        else if (isResponseEvent(event)) {
+                            file.progress = 1;
+                            file.response = event;
+                            console.debug("[upload-file] " + file.name + ": " + (event.statusText || 'OK'), file.response);
+                        }
+                        // Other events: ignore
+                        else {
+                            // DEBUG
+                            console.debug('[upload-file] Ignoring a file event: ', event);
+                        }
+                        return file;
+                    }), operators.catchError(function (err) {
+                        var _a;
+                        console.error(err);
+                        file.error = err && (err.message || ((_a = err.error) === null || _a === void 0 ? void 0 : _a.message)) || 'FILE.UPLOAD.ERROR';
+                        return rxjs.of(file);
+                    }), operators.tap(function () {
+                        $changes.next();
+                        _this.cd.markForCheck();
+                    })); })); });
+                    // Wait jobs to finish
+                    return [2 /*return*/, rxjs.forkJoin(jobs)
+                            .pipe(operators.tap(function (_) { return $changes.complete(); }))
+                            .toPromise()];
                 });
             });
         };
-        UploadFilePopover.prototype.cancel = function () {
-            return this.popoverController.dismiss();
-        };
-        UploadFilePopover.prototype.resetError = function () {
-            if (this.error) {
-                this.error = null;
-                this.cd.markForCheck();
-            }
+        UploadFileComponent.prototype.waitIdle = function (opts) {
+            var _this = this;
+            return waitFor(function () { return _this.processingFilesCount === 0; }, opts);
         };
-        return UploadFilePopover;
+        return UploadFileComponent;
     }());
-    UploadFilePopover.decorators = [
+    UploadFileComponent.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}"]
+                    selector: 'app-upload-file',
+                    template: "<div *ngIf=\"!uniqueFile || files.length === 0\"\n     class=\"container\"\n     appDragAndDrop (fileDropped)=\"onFileDropped($event)\">\n  <input\n    type=\"file\"\n    #fileDropRef\n    id=\"fileDropRef\"\n    multiple\n    [accept]=\"fileExtension\"\n    (change)=\"fileBrowseHandler($any($event.target).files)\"\n  />\n  <mat-icon style=\"font-size: xx-large\" color=\"accent\">file_upload</mat-icon>\n  <ion-label\n    [innerHTML]=\"\n      'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }\n    \"\n  ></ion-label>\n  <ion-button>{{ 'FILE.UPLOAD.BROWSE' | translate }}</ion-button>\n</div>\n<div class=\"files-list\">\n  <div *ngFor=\"let file of files; index as i\"\n       class=\"single-file\"\n       [class.deleting]=\"file.deleting\">\n    <mat-icon>description</mat-icon>\n    <div class=\"info\">\n      <h4 class=\"name\">\n        {{ file.name }}\n      </h4>\n      <p class=\"size\">\n        {{ file.size | fileSize }}\n      </p>\n      <ion-progress-bar *ngIf=\"!file.error\"\n                        [value]=\"file.progress||0\"\n                        [type]=\"(file.deleting || file.progress === -1) ? 'indeterminate' : 'determinate'\"></ion-progress-bar>\n      <ion-label *ngIf=\"file.error\" color=\"danger\" [innerHTML]=\"file.error | translate\"></ion-label>\n    </div>\n    <!-- remote from list (before importation) -->\n    <button *ngIf=\"!(file.progress) || file.error\" mat-icon-button (click)=\"deleteFile(i)\">\n      <mat-icon>clear</mat-icon>\n    </button>\n    <!-- delete file (remotely - after importation) -->\n    <button *ngIf=\"file.progress === 1 && !!deleteFn && !file.deleting\" mat-icon-button (click)=\"deleteFile(i)\">\n      <mat-icon>clear</mat-icon>\n    </button>\n  </div>\n</div>\n",
+                    styles: [".container{width:calc(100% - 3rem);min-height:200px;padding:2rem;text-align:center;border:1px dashed #979797;position:relative;margin:1.5rem}.container input{opacity:0;position:absolute;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}.container ion-label{display:block;font-size:20px;font-weight:600;color:#38424c}.container label{display:inline-block;color:#fff;width:183px;height:44px;border-radius:21.5px;background-color:#db202f;padding:8px 16px}.fileover{-webkit-animation:shake 1s;animation:shake 1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.files-list{max-height:300px;overflow:auto}.files-list .single-file{display:flex;flex-grow:1;padding:.5rem;justify-content:space-between;align-items:center;border:1px dashed #979797;margin-bottom:1rem}.files-list .single-file.deleting .name{color:grey!important;font-style:italic!important}.files-list .single-file .name{font-size:14px;font-weight:500;color:#353f4a;margin:0}.files-list .single-file .size{font-size:12px;font-weight:500;color:#a4a4a4;margin:0 0 .25rem}.files-list .single-file .info{width:100%}@-webkit-keyframes shake{0%{transform:translate(1px,1px) rotate(0deg)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0deg)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0deg)}to{transform:translate(1px,-2px) rotate(-1deg)}}@keyframes shake{0%{transform:translate(1px,1px) rotate(0deg)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0deg)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0deg)}to{transform:translate(1px,-2px) rotate(-1deg)}}"]
                 },] }
     ];
-    UploadFilePopover.ctorParameters = function () { return [
-        { type: i1$5.PopoverController },
-        { type: i1$2.TranslateService },
-        { type: i0.ChangeDetectorRef }
+    UploadFileComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef },
+        { type: i1$2.TranslateService }
     ]; };
-    UploadFilePopover.propDecorators = {
-        uploader: [{ type: i0.ViewChild, args: ['uploader', { static: true },] }],
+    UploadFileComponent.propDecorators = {
+        fileDropEl: [{ type: i0.ViewChild, args: ['fileDropRef', { static: false },] }],
         fileExtension: [{ type: i0.Input }],
-        title: [{ type: i0.Input }],
         uniqueFile: [{ type: i0.Input }],
         instantUpload: [{ type: i0.Input }],
         uploadFn: [{ type: i0.Input }],
@@ -19663,12 +19773,41 @@
         AppForm.prototype.cancel = function () {
             this.onCancel.emit();
         };
-        AppForm.prototype.doSubmit = function (event) {
-            if (!this.form || !this.form.valid) {
-                this.markAllAsTouched({ emitEvent: true });
-                return;
-            }
-            this.onSubmit.emit(event);
+        /**
+         *
+         * @param event
+         * @param opts allow to skip validation check, using {checkValid: false}
+         */
+        AppForm.prototype.doSubmit = function (event, opts) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!this._form) {
+                                this.markAllAsTouched({ emitEvent: true });
+                                return [2 /*return*/];
+                            }
+                            if (!((!opts || opts.checkValid !== false) && !this._form.valid)) return [3 /*break*/, 2];
+                            // Wait validation end
+                            return [4 /*yield*/, AppFormUtils.waitWhilePending(this._form)];
+                        case 1:
+                            // Wait validation end
+                            _b.sent();
+                            // Form is invalid: exit (+ log if debug)
+                            if (this._form.invalid) {
+                                this.markAllAsTouched({ emitEvent: true });
+                                if (this.debug)
+                                    AppFormUtils.logFormErrors(this._form);
+                                return [2 /*return*/];
+                            }
+                            _b.label = 2;
+                        case 2:
+                            // Emit event
+                            this.onSubmit.emit(event);
+                            return [2 /*return*/];
+                    }
+                });
+            });
         };
         AppForm.prototype.setForm = function (form) {
             var _this = this;
@@ -20469,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
      */
@@ -20953,25 +21024,41 @@
             this.onCancel.emit();
         };
         AuthForm.prototype.doSubmit = function (event) {
-            var _this = this;
-            if (event) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-            if (this.form.invalid || this.loading)
-                return;
-            this.markAsLoading();
-            var data = this.form.value;
-            this.showPwd = false; // Hide password
-            this.error = null; // Reset error
-            this.registerSubscription(this.onSubmit
-                .pipe(operators.debounceTime(500))
-                .subscribe(function (res) { return _this.markAsLoaded(); }));
-            setTimeout(function () { return _this.onSubmit.emit({
-                username: data.username,
-                password: data.password,
-                offline: data.offline
-            }); });
+            return __awaiter(this, void 0, void 0, function () {
+                var data;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (event) {
+                                event.preventDefault();
+                                event.stopPropagation();
+                            }
+                            if (this.loading)
+                                return [2 /*return*/];
+                            if (!!this.form.valid) return [3 /*break*/, 2];
+                            return [4 /*yield*/, AppFormUtils.waitWhilePending(this.form)];
+                        case 1:
+                            _a.sent();
+                            if (this.form.invalid) {
+                                AppFormUtils.logFormErrors(this.form);
+                                return [2 /*return*/]; // Skip if invalid
+                            }
+                            _a.label = 2;
+                        case 2:
+                            this.markAsLoading();
+                            data = this.form.value;
+                            this.showPwd = false; // Hide password
+                            this.error = null; // Reset error
+                            setTimeout(function () { return _this.onSubmit.emit({
+                                username: data.username,
+                                password: data.password,
+                                offline: data.offline
+                            }); });
+                            return [2 /*return*/];
+                    }
+                });
+            });
         };
         AuthForm.prototype.register = function () {
             var _this = this;
@@ -23170,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;
@@ -23419,10 +23503,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)
@@ -23433,11 +23517,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 });
@@ -23449,18 +23531,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
@@ -25221,7 +25291,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:
@@ -25231,9 +25301,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)
@@ -30276,6 +30346,7 @@
                 missingEntity: [null, SharedValidators.entity],
                 disableEntity: [null, SharedValidators.entity],
                 entities: [null, SharedFormArrayValidators.requiredArrayMinLength(1)],
+                farEntity: [null, SharedValidators.entity]
             });
             this.form.get('disableEntity').disable();
         }
@@ -30314,6 +30385,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: {
@@ -30333,6 +30411,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'
@@ -30428,7 +30507,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 [
@@ -31920,6 +31999,7 @@
     exports.MessageService = MessageService;
     exports.MessageTypeList = MessageTypeList;
     exports.MessageTypes = MessageTypes;
+    exports.MimeTypes = MimeTypes;
     exports.ModalToolbarComponent = ModalToolbarComponent;
     exports.NetworkService = NetworkService;
     exports.NgInitDirective = NgInitDirective;
@@ -32004,6 +32084,7 @@
     exports.UploadFilePopover = UploadFilePopover;
     exports.UploadFileTestingModule = UploadFileTestingModule;
     exports.UploadFileTestingPage = UploadFileTestingPage;
+    exports.UriUtils = UriUtils;
     exports.UserEventFragments = UserEventFragments;
     exports.UserEventService = UserEventService;
     exports.UserEventTypes = UserEventTypes;