@sumaris-net/ngx-components 1.20.0-rc3 → 1.20.0

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

@@ -32,14 +32,13 @@ import { MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteModule, MAT_AUT
 import { __awaiter, __decorate } from 'tslib';
 import { Validators, NG_VALUE_ACCESSOR, FormGroupDirective, AbstractControl, FormGroup, FormArray, FormControl, ReactiveFormsModule, FormBuilder } from '@angular/forms';
 import { timer, merge, fromEvent, BehaviorSubject, Subscription, Subject, isObservable, from, of, noop as noop$9, Observable, defer, forkJoin, combineLatest, EMPTY } from 'rxjs';
-import { filter, first, map, takeUntil, switchMap, startWith, debounceTime, takeWhile, tap, distinctUntilChanged, mergeMap, catchError, throttleTime, skip } from 'rxjs/operators';
+import { filter, first, map, takeUntil, switchMap, tap, debounceTime, startWith, distinctUntilChanged, mergeMap, catchError, throttleTime, skip } from 'rxjs/operators';
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { IonicModule, Platform, IonRouterOutlet, ModalController, PopoverController, IonicSafeString, createAnimation, ToastController, AlertController, IonicRouteStrategy, NavParams, MenuController, IonContent, IonInfiniteScroll } from '@ionic/angular';
 import * as momentImported from 'moment';
 import { isMoment } from 'moment';
 import { MomentDateAdapter, MatMomentDateModule } from '@angular/material-moment-adapter';
-import * as momentTZImported from 'moment-timezone';
 import { Keyboard } from '@ionic-native/keyboard/ngx';
 import { TextMaskModule } from 'angular2-text-mask';
 import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
@@ -47,7 +46,7 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatChipsModule } from '@angular/material/chips';
-import { Router, ActivatedRoute, RouterModule, RouteReuseStrategy } from '@angular/router';
+import { ActivatedRoute, Router, RouterModule, RouteReuseStrategy } from '@angular/router';
 import { HammerGestureConfig, EventManager } from '@angular/platform-browser';
 import { HttpResponse, HttpClient, HttpHeaders, HttpEventType, HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { ColorPickerModule } from 'ngx-color-picker';
@@ -94,6 +93,7 @@ import { NgxJdenticonModule } from 'ngx-jdenticon';
 import 'tweetnacl-util';
 import 'scrypt-async';
 import 'hammerjs';
+import * as momentTZImported from 'moment-timezone';
 
 const ENVIRONMENT = new InjectionToken('ENV');
 class Environment {
@@ -222,6 +222,9 @@ function replaceAll(value, searchString, replacement) {
     }
     return value;
 }
+function escapeRegExp(value) {
+    return value.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+}
 function removeEnd(value, end) {
     return (value === null || value === void 0 ? void 0 : value.endsWith(end || '')) ? value.substr(0, value.length - end.length) : value;
 }
@@ -251,7 +254,7 @@ function suggestFromArray(items, value, opts) {
     if (isNotNilOrBlank(value)) {
         // If wildcard, search using regexp
         if (value.indexOf('*') !== -1) {
-            value = value.replace('*', '.*');
+            value = value.replace(/[*]+/g, '.*');
             filteredItems = filteredItems.filter(v => keys.findIndex(key => matchUpperCase(getPropertyByPathAsString(v, key), value)) !== -1);
         }
         // Else (no wildcard), search using startsWith
@@ -1089,6 +1092,7 @@ const isMobile = (win) => {
     if (_cache.mobile === null || _cache.mobile === undefined) {
         _cache.mobile = isCordova(window)
             || isAndroid(win) || isIOS(window)
+            // Workaround, for MS Windows touch screen (detected as mobile, but forced as desktop)
             || (isTouchUi(win) && !isWindows(win));
     }
     return _cache.mobile;
@@ -1250,7 +1254,7 @@ class MatAutocompleteField {
         return isNil(this.$filteredItems.value);
     }
     get desktop() {
-        return !this.mobile;
+        return !this.mobile && !this.multiple;
     }
     ngOnInit() {
         var _a, _b;
@@ -1271,9 +1275,9 @@ class MatAutocompleteField {
             this.equals = this.equals || this.config.equals;
             this.multiple = toBoolean(this.multiple, this.config.multiple);
             this.mobile = toBoolean(this.mobile, this.config.mobile);
-            this.suggestLengthThreshold = toNumber(this.suggestLengthThreshold, this.config.suggestLengthThreshold || 0);
-            this.showAllOnFocus = toBoolean(this.showAllOnFocus, toBoolean(this.config.showAllOnFocus, this.suggestLengthThreshold <= 0));
-            this.showPanelOnFocus = toBoolean(this.showPanelOnFocus, toBoolean(this.config.showPanelOnFocus, true));
+            this.suggestLengthThreshold = toNumber(this.suggestLengthThreshold, this.config.suggestLengthThreshold);
+            this.showAllOnFocus = toBoolean(this.showAllOnFocus, this.config.showAllOnFocus);
+            this.showPanelOnFocus = toBoolean(this.showPanelOnFocus, this.config.showPanelOnFocus);
             this.classList = this.classList || this.config.class;
             this.debounceTime = toNumber(this.debounceTime, this.config.debounceTime);
             this.highlightAccent = toBoolean(this.highlightAccent, toBoolean(this.config.highlightAccent));
@@ -1302,10 +1306,11 @@ class MatAutocompleteField {
             || (classList.includes('min-width-large') && '400px')
             || (classList.includes('min-width-xlarge') && '450px')
             || (classList.includes('mat-autocomplete-panel-full-size') && '100vw')));
+        this.suggestLengthThreshold = this.suggestLengthThreshold || 0;
+        this.showAllOnFocus = toBoolean(this.showAllOnFocus, this.mobile && this.suggestLengthThreshold <= 0);
         this.showPanelOnFocus = toBoolean(this.showPanelOnFocus, true);
         this.debounceTime = toNumber(this.debounceTime, this.mobile ? 650 : 250);
         this.highlightAccent = toBoolean(this.highlightAccent, false);
-        this.suggestLengthThreshold = this.suggestLengthThreshold || 0;
         this.matAutocompletePosition = this.matAutocompletePosition || 'auto';
         // No suggestFn: filter on the given items
         if (!this.suggestFn) {
@@ -1327,24 +1332,29 @@ class MatAutocompleteField {
                 return this.suggestFn(value, filter); // Loop
             });
         }
-        else if (this.mobile) {
-            // Manually fill input items, from the given suggest function
-            this._subscription.add(this._$filter.pipe(startWith(this.filter), debounceTime(250), takeWhile((_) => this.mobile), // Close subscription, when not mobile (no more mat-select)
-            filter(_ => this.suggestLengthThreshold <= 0), switchMap((filter) => this.suggest('*', filter)))
-                .subscribe(items => this.$inputItems.next(items)));
+        // Suggest + mobile
+        // => Manually fill input items, from the given suggest function
+        else if (this.mobile || this.multiple) {
+            /*this._subscription.add(
+              this._$filter.pipe(
+                startWith<any, any>(this.filter),
+                debounceTime(250),
+                filter(_ => this.suggestLengthThreshold <= 0),
+                switchMap((filter) => this.suggest('*', filter))
+              )
+              .subscribe(items => this.$inputItems.next(items))
+            );*/
         }
         // Send value to suggest when :
         // - is nil and '*', and no min length threshold
         // - is not nil and not a string type (e.g. object)
         // - is not nil and is a string, and has enough character
-        const thresholdFilterFn = (value) => (isNilOrBlank(value) || (value === '*')
-            ? (this.suggestLengthThreshold <= 0)
-            : (!(typeof value === 'string')
-                || value.length >= this.suggestLengthThreshold));
+        const thresholdFilterFn = (value) => this.suggestLengthThreshold <= 0 || (isNotNil(value) && (!(typeof value === 'string')
+            || (value !== '*' && value.trim().length >= this.suggestLengthThreshold)));
         const filteredItemsChanges = merge(
         // Reload event (no distinctUntilChanged() pipe, to force reload even if same value)
         this._reload$
-            .pipe(filter(thresholdFilterFn)), 
+            .pipe(filter(() => this.enabled), filter(thresholdFilterFn), tap(_ => this.showLoadingSpinner && this.markAsLoading())), 
         // Search text (no distinctUntilChanged() because of the debounceTime() pipe)
         this.formControl.valueChanges
             .pipe(filter(value => this.enabled && isNotNilString(value)), 
@@ -1352,11 +1362,12 @@ class MatAutocompleteField {
         tap(_ => this.showLoadingSpinner && this.markAsLoading()), 
         // Filter if not enough character
         filter(value => {
-            if (value.length >= this.suggestLengthThreshold)
-                return true;
-            // Update display value, to enable the message "not enough characters"
-            this.displayValue = value;
-            return false;
+            if (value.length <= this.suggestLengthThreshold) {
+                // Update display value, to enable the message "not enough characters"
+                this.displayValue = value;
+                return false;
+            }
+            return true;
         }), 
         // Wait a debounce time
         debounceTime(this.debounceTime)
@@ -1365,9 +1376,9 @@ class MatAutocompleteField {
         ), 
         // Object set: use it (no distinctUntilChanged() pipe need)
         this.formControl.valueChanges
-            .pipe(startWith(this.formControl.value), filter(value => (!this.mobile && isNotNil(value) && typeof value === 'object')), tap(value => {
+            .pipe(startWith(this.formControl.value), filter(value => (isNotNil(value) && typeof value === 'object')), tap(value => {
             // DEBUG
-            //if (this.debug) console.debug(this.logPrefix + ' object changes:', value)
+            //if (this.debug) console.debug(this.logPrefix + ' control object changes:', value);
             var _a;
             // Update the display value (if need)
             const displayValue = this.displayWith(value) || '';
@@ -1377,30 +1388,39 @@ class MatAutocompleteField {
                 if ((_a = this.matInputText) === null || _a === void 0 ? void 0 : _a.nativeElement) {
                     this.matInputText.nativeElement.value = this.displayValue;
                 }
+                this.markForCheck();
             }
-        })), 
-        // On dropdown button click (no distinctUntilChanged(), nor debounceTime)
-        this.dropButtonClick
-            .pipe(filter(event => !this.mobile && this.enabled && (!event || !event.defaultPrevented)), map(_ => this.showAllOnFocus ? '*' : this.formControl.value), 
-        // Make sure there is enough characters
-        filter(thresholdFilterFn)), 
-        // Merge some observables, with a common distinctUntilChanged() pipe, and NO debounceTime
+        }), 
+        // If multiple: do not recompute items (only for the first time, when loading)
+        // when formControl value changes
+        filter(() => !this.multiple || this.loading), map(value => this.showAllOnFocus && this.suggestLengthThreshold <= 0 ? '*' : value)
+        // DEBUG
+        //,tap(value => this.debug && console.debug(this.logPrefix + ' Received an control object value: ', value))
+        ), 
+        // Merge some observables, with a common distinctUntilChanged() pipe
         merge(
-        // Focus or click => Load all
-        merge(this.focused, this.clicked)
-            .pipe(filter(_ => this.enabled && !this.mobile), map(_ => this.showAllOnFocus ? '*' : this.formControl.value)
+        // On dropdown button click (no debounceTime)
+        this.dropButtonClick
+            .pipe(filter(event => (!event || !event.defaultPrevented))), 
+        // Focus or click => Load all (no debounceTime)
+        merge(this.focused, this.clicked), 
         // DEBUG
-        //,tap(value => this.debug && console.debug(this.logPrefix + ' Received focused or clicked event: ', value))
-        ), merge(this.$inputItems, this._$filter)
-            .pipe(filter(_ => this.enabled), map(_ => this.formControl.value)))
-            .pipe(
-        // Make sure there is enough characters
-        filter(thresholdFilterFn), 
+        //.pipe(tap(_ => this.debug && console.debug(this.logPrefix + ' Received focused or clicked event'))),
+        // Input items or filter changes
+        merge(this.$inputItems, this._$filter)
+            // DEBUG
+            .pipe(filter(_ => !this.loading)
+        //,tap(_ => this.debug && console.debug(this.logPrefix + ' Received $inputItems or filter event'))
+        ))
+            .pipe(filter(_ => this.enabled), map(_ => this.showAllOnFocus ? '*' : this.formControl.value), 
         // Distinguish changes
-        // - do NOT filter if loading, to force update after a blur event
-        distinctUntilChanged((v1, v2) => !this.loading && (v1 === v2 || this.equals(v1, v2)))
+        distinctUntilChanged((v1, v2) => 
+        // If loading (not loaded yet), simulate that value changed to force load
+        this.loading ? false : (v1 === v2 || this.equals(v1, v2))), 
+        // Make sure there is enough characters
+        filter(thresholdFilterFn)
         // DEBUG
-        //,tap(value => this.debug && console.debug(this.logPrefix + ' Received update event: ', value))
+        //,tap(value => this.debug && console.debug(this.logPrefix + ' Received update event from observables: ', value))
         ))
             .pipe(
         // Suggest values
@@ -1408,7 +1428,7 @@ class MatAutocompleteField {
         // DEBUG
         //tap(items => this.debug && console.debug(this.logPrefix + ' Received from suggest: ', items)),
         // Store implicit value (will use it onBlur if not other value selected)
-        tap(items => this.updateImplicitValue(items)));
+        tap(items => !this.multiple && !this.mobile && this.updateImplicitValue(items)));
         // Fetch more events
         const fetchMoreItemsChanges = this._fetchMore$
             .pipe(tap(event => event === null || event === void 0 ? void 0 : event.preventDefault()), // Avoid to close the mat-select
@@ -1425,7 +1445,7 @@ class MatAutocompleteField {
         fetchMoreItemsChanges)
             .subscribe(items => {
             // Make sure control value is inside (mat-select)
-            if (items && this.mobile) {
+            if (items && (this.mobile || this.multiple)) {
                 const value = this.formControl.value;
                 // If form value is missing: append to list
                 if (isNotNil(value)) {
@@ -1443,11 +1463,11 @@ class MatAutocompleteField {
         // Applying implicit value, on blur
         this._subscription.add(this.blurred
             .pipe(
-        // Skip if not searchable
-        filter(_ => !this.mobile), map(_ => this.formControl.value)
+        // Skip if multiple (no implicit value) or disable
+        filter(_ => !this.multiple && !this.mobile && this.enabled), 
         // DEBUG
-        //,tap(value => this.debug && console.debug(this.logPrefix + ' Received blurred event: ', value)),
-        )
+        //,tap(_ => this.debug && console.debug(this.logPrefix + ' Received blurred event')),
+        map(_ => this.formControl.value))
             .subscribe(value => {
             // When leave component without object, use implicit value if :
             // - an explicit value
@@ -1465,16 +1485,14 @@ class MatAutocompleteField {
                 this.formControl.markAsPending({ emitEvent: false, onlySelf: true });
                 this.formControl.updateValueAndValidity({ emitEvent: false, onlySelf: true });
                 this.checkIfTouched();
-                this.$filteredItems.next(undefined);
+                this.markAsLoading();
             }
             this._implicitValue = null; // reset the implicit value
             this.closePanel(); // Clone panel
         }));
         // Listen form control status change
         this._subscription.add(this.formControl.statusChanges
-            .pipe(
-        //filter(() => this.enabled),
-        distinctUntilChanged())
+            .pipe(distinctUntilChanged())
             // Update component state
             .subscribe(() => this.checkIfTouched()));
         this._subscription.add(this.keydownEscape.subscribe(event => {
@@ -1529,8 +1547,10 @@ class MatAutocompleteField {
      * Allow to reload content. Useful when filter has been changed but not detected
      */
     reloadItems(value) {
+        // DEBUG
+        //if (this.debug) console.debug(this.logPrefix + " Asking to reloadItems()");
         // Force a refresh
-        this._reload$.next(value || '*');
+        this._reload$.next(value || (this.showAllOnFocus && this.suggestLengthThreshold <= 0 ? '*' : this.formControl.value));
         // Clear the search bar (if hidden)
         if (this.mobile && !this.matSelect.panelOpen && this.ionSearchbar) {
             this.ionSearchbar.value = null;
@@ -1541,6 +1561,7 @@ class MatAutocompleteField {
         // if (this.debug) console.debug(this.logPrefix + ' Writing value: ', value);
         if (value !== this.formControl.value) {
             this.formControl.patchValue(value, { emitEvent: false });
+            this.displayValue = this.displayWith(value);
             this._onChangeCallback(value);
         }
     }
@@ -1642,8 +1663,10 @@ class MatAutocompleteField {
             return;
         // DEBUG
         // console.debug(this.logPrefix + " Received <mat-select> blur event", event);
+        if (event.relatedTarget instanceof HTMLElement && (
         // Ignore event from mat-option
-        if (event.relatedTarget instanceof HTMLElement && event.relatedTarget.tagName === 'MAT-OPTION') {
+        (event.relatedTarget.tagName === 'MAT-OPTION')
+            || (event.relatedTarget.tagName === 'INPUT') && event.relatedTarget.classList.contains('searchbar-input'))) {
             event.preventDefault();
             if (event.stopPropagation)
                 event.stopPropagation();
@@ -1658,6 +1681,10 @@ class MatAutocompleteField {
     clearValue(event) {
         this.writeValue(null);
         event.stopPropagation();
+        if (this.ionSearchbar) {
+            this.ionSearchbar.value = null;
+        }
+        this.markAsLoading();
     }
     _initAutocompleteInfiniteScroll(threshold) {
         if (!this.autocomplete)
@@ -1724,7 +1751,7 @@ class MatAutocompleteField {
             // Call suggestion function
             let res = yield this.suggestFn(value, filter);
             // DEBUG
-            //console.debug(this.logPrefix + ' Filtered items by suggestFn:', value, res);
+            //if (this.debug) console.debug(this.logPrefix + ' Filtered items by suggestFn:', value, res);
             if (!res) {
                 this._itemCount = 0;
                 this._onFetchMoreCallback = undefined;
@@ -1762,7 +1789,7 @@ class MatAutocompleteField {
         });
     }
     updateImplicitValue(items) {
-        if (!this.mobile) {
+        if (!this.multiple) {
             // Store implicit value (will use it onBlur if not other value selected)
             if (items && items.length === 1) {
                 this._implicitValue = items[0];
@@ -1815,7 +1842,7 @@ MatAutocompleteField.decorators = [
     { type: Component, args: [{
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'mat-autocomplete-field',
-                template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <!-- readonly -->\n      <mat-form-field *ngIf=\"_readonly; else writable\"\n                      [floatLabel]=\"floatLabel\"\n                      [title]=\"displayValue\"\n                      class=\"mat-form-field-disabled\">\n\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        <input matInput hidden type=\"text\"\n               [placeholder]=\"placeholder\"\n               [formControl]=\"formControl\" readonly>\n        <ion-text>{{displayWith(value)}}</ion-text>\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n      </mat-form-field>\n\n      <ng-template #writable>\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-disabled]=\"disabled\"\n                        [title]=\"displayValue\">\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Mobile or Mutliple (use <mat-select>) -->\n          <mat-select #matSelect\n                      *ngIf=\"mobile || multiple; else desktopTemplate\"\n                      [disableRipple]=\"true\"\n                      [placeholder]=\"placeholder\"\n                      [formControl]=\"formControl\"\n                      [tabindex]=\"_tabindex\"\n                      [panelClass]=\"classList\"\n                      [style.width]=\"panelWidth\"\n                      (focus)=\"filterMatSelectFocusEvent($event)\"\n                      (blur)=\"filterMatSelectBlurEvent($event)\"\n                      (keydown.escape)=\"keydownEscape.emit($event)\"\n                      (keyup.enter)=\"keyupEnter.emit($event)\"\n                      [compareWith]=\"equals\"\n                      [multiple]=\"multiple\"\n                      [typeaheadDebounceInterval]=\"debounceTime * 10\"\n                      [required]=\"required\">\n            <mat-select-trigger>{{ displayWith(value) }}</mat-select-trigger>\n\n            <!-- Search bar -->\n            <ion-searchbar *ngIf=\"showSearchBar\" #ionSearchbar\n                           class=\"mat-select-header\"\n                           [class.ion-searchbar-sticky]=\"stickySearchBar\"\n                           inputmode=\"search\"\n                           autocomplete=\"off\"\n                           animated=\"true\"\n                           showClearButton\n                           [debounce]=\"debounceTime\"\n                           (ionClear)=\"markAsLoading()\"\n                           (ionInput)=\"markAsLoading()\"\n                           (ionChange)=\"ionSearchBarChanged($event, $event.detail.value)\"\n                           [placeholder]=\"'COMMON.BTN_SEARCH'|translate\"\n            ></ion-searchbar>\n\n            <!-- Headers -->\n            <ion-row class=\"mat-select-header column ion-no-padding\"\n                     [class.multiple]=\"multiple\"\n                     [class.ion-searchbar-sticky]=\"showSearchBar && stickySearchBar\">\n              <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              </ion-col>\n            </ion-row>\n\n            <!-- None option -->\n            <mat-option *ngIf=\"!required && !multiple && !clearable\" class=\"ion-no-padding\">\n              <ion-row class=\"ion-no-padding\">\n                <ion-col class=\"ion-no-padding\">\n                  <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n              <!-- No item option -->\n              <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                <ion-label><i>{{noResultMessage | translate}}</i></ion-label>\n              </mat-option>\n\n              <!-- Options -->\n              <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item.classList\">\n                  <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                           [size]=\"displayColumnSizes[i]\">\n                    <ion-text [innerHTML]=\"item | propertyGet: path\"></ion-text>\n                  </ion-col>\n                </ion-row>\n              </mat-option>\n\n              <!-- More item -->\n              <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initMatSelectInfiniteScroll()\"\n                          class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-container>\n\n            <!-- footer -->\n            <ion-row *ngIf=\"itemCount as count\"\n                     class=\"mat-autocomplete-footer ion-no-padding\">\n              <ion-col>\n                <ion-text class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n              </ion-col>\n            </ion-row>\n\n            <!-- Loading spinner -->\n            <ng-template #loadingTemplate>\n              <mat-option *ngIf=\"(displayValue | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                          class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-template>\n\n            <!-- Need more characters -->\n            <ng-template #waitMoreCharacterTemplate>\n              <mat-option class=\"ion-padding text-italic\" disabled>\n                <ion-label>\n                  {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n                </ion-label>\n              </mat-option>\n            </ng-template>\n          </mat-select>\n\n\n          <!--\n            NOTE :\n             - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n          -->\n          <ng-template #desktopTemplate>\n            <input matInput #matInputText type=\"text\"\n                   [matAutocomplete]=\"autocomplete\"\n                   [matAutocompletePosition]=\"matAutocompletePosition\"\n                   [formControl]=\"formControl\"\n                   [placeholder]=\"placeholder\"\n                   [appAutofocus]=\"autofocus\"\n                   [tabindex]=\"_tabindex\"\n                   [required]=\"required\"\n                   (click)=\"clicked.emit($event)\"\n                   (focus)=\"filterInputTextFocusEvent($event)\"\n                   (blur)=\"filterInputTextBlurEvent($event)\"\n                   (keydown.escape)=\"keydownEscape.emit($event)\"\n                   (keyup.enter)=\"keyupEnter.emit($event)\"\n                   (keyup.arrowdown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\">\n\n            <!-- autocomplete -->\n            <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                              autoActiveFirstOption\n                              [displayWith]=\"displayWith\"\n                              [class]=\"classList\"\n                              [panelWidth]=\"panelWidth\">\n              <!-- Headers -->\n              <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n                <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n                  <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                </ion-col>\n              </ion-row>\n\n              <!-- Options -->\n              <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n                <!-- No item option -->\n                <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                  <ion-label><i>{{noResultMessage | translate}}</i></ion-label>\n                </mat-option>\n\n                <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                  <ion-row [classList]=\"item.classList\">\n                    <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                             [size]=\"displayColumnSizes[i]\">\n                      <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: formControl.value, withAccent: highlightAccent }\"></ion-text>\n                    </ion-col>\n                  </ion-row>\n                </mat-option>\n\n                <!-- More item -->\n                <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-container>\n\n              <!-- Loading spinner -->\n              <ng-template #loadingTemplate>\n                <mat-option *ngIf=\"(displayValue | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-template>\n\n              <!-- Need more characters -->\n              <ng-template #waitMoreCharacterTemplate>\n                <mat-option class=\"ion-padding text-italic\" disabled>\n                  <ion-label>\n                    {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n                  </ion-label>\n                </mat-option>\n              </ng-template>\n\n              <!-- footer -->\n              <ion-row *ngIf=\"itemCount; let count\" class=\"mat-autocomplete-footer ion-no-padding\">\n                <ion-col>\n                  <ion-text class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n                </ion-col>\n              </ion-row>\n\n            </mat-autocomplete>\n\n          </ng-template>\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n          <ng-content select=\"[matError]\"></ng-content>\n\n        </mat-form-field>\n      </ng-template>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"desktop\"\n          (click)=\"dropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #headers>\n  <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n    <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n      <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n    </ion-col>\n  </ion-row>\n</ng-template>\n\n<ng-template #options>\n\n\n</ng-template>\n\n",
+                template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <!-- readonly -->\n      <mat-form-field *ngIf=\"_readonly; else writable\"\n                      [floatLabel]=\"floatLabel\"\n                      [title]=\"displayValue\"\n                      class=\"mat-form-field-disabled\">\n\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        <input matInput hidden type=\"text\"\n               [placeholder]=\"placeholder\"\n               [formControl]=\"formControl\" readonly>\n        <ion-text>{{displayWith(value)}}</ion-text>\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n      </mat-form-field>\n\n      <ng-template #writable>\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-disabled]=\"disabled\"\n                        [title]=\"displayValue\">\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Mobile or Multiple (use <mat-select>) -->\n          <mat-select #matSelect\n                      *ngIf=\"mobile || multiple; else desktopTemplate\"\n                      [disableRipple]=\"true\"\n                      [placeholder]=\"placeholder\"\n                      [formControl]=\"formControl\"\n                      [tabindex]=\"_tabindex\"\n                      [panelClass]=\"classList\"\n                      [style.width]=\"panelWidth\"\n                      (focus)=\"filterMatSelectFocusEvent($event)\"\n                      (blur)=\"filterMatSelectBlurEvent($event)\"\n                      (keydown.escape)=\"keydownEscape.emit($event)\"\n                      (keyup.enter)=\"keyupEnter.emit($event)\"\n                      [compareWith]=\"equals\"\n                      [multiple]=\"multiple\"\n                      [typeaheadDebounceInterval]=\"debounceTime * 10\"\n                      [required]=\"required\">\n            <mat-select-trigger>{{ displayWith(value) }}</mat-select-trigger>\n\n            <!-- Search bar -->\n            <mat-option  class=\"mat-select-searchbar\" *ngIf=\"showSearchBar\"\n                         [class.mat-select-searchbar-sticky]=\"stickySearchBar\"\n                         disabled>\n              <ion-searchbar #ionSearchbar\n                             inputmode=\"search\"\n                             autocomplete=\"off\"\n                             animated=\"true\"\n                             showClearButton=\"true\"\n                             [debounce]=\"debounceTime\"\n                             (ionClear)=\"markAsLoading()\"\n                             (ionInput)=\"markAsLoading()\"\n                             (ionChange)=\"ionSearchBarChanged($event, $event.detail.value)\"\n                             [placeholder]=\"'COMMON.BTN_SEARCH'|translate\"\n              ></ion-searchbar>\n            </mat-option>\n\n            <!-- Headers -->\n            <ion-row class=\"mat-select-header column ion-no-padding\"\n                     [class.multiple]=\"multiple\"\n                     [class.mat-select-searchbar-sticky]=\"showSearchBar && stickySearchBar\">\n              <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              </ion-col>\n            </ion-row>\n\n            <!-- None option -->\n            <mat-option *ngIf=\"!required && !multiple && !clearable\" class=\"ion-no-padding\">\n              <ion-row class=\"ion-no-padding\">\n                <ion-col class=\"ion-no-padding\">\n                  <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n              <!-- No item option -->\n              <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                <ion-label><i>{{noResultMessage | translate}}</i></ion-label>\n              </mat-option>\n\n              <!-- Options -->\n              <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item.classList\">\n                  <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                           [size]=\"displayColumnSizes[i]\">\n                    <ion-text [innerHTML]=\"item | propertyGet: path\"></ion-text>\n                  </ion-col>\n                </ion-row>\n              </mat-option>\n\n              <!-- More item -->\n              <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initMatSelectInfiniteScroll()\"\n                          class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-container>\n\n            <!-- footer -->\n            <mat-option *ngIf=\"itemCount as count\" class=\"mat-option-footer mat-autocomplete-footer ion-no-padding\" disabled>\n              <ion-text class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n            </mat-option>\n\n            <!-- Loading spinner -->\n            <ng-template #loadingTemplate>\n              <mat-option *ngIf=\"(displayValue | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                          class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-template>\n\n            <!-- Need more characters -->\n            <ng-template #waitMoreCharacterTemplate>\n              <mat-option class=\"ion-padding text-italic\" disabled>\n                <ion-label>\n                  {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n                </ion-label>\n              </mat-option>\n            </ng-template>\n          </mat-select>\n\n\n          <!--\n            NOTE :\n             - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n          -->\n          <ng-template #desktopTemplate>\n            <input matInput #matInputText type=\"text\"\n                   [matAutocomplete]=\"autocomplete\"\n                   [matAutocompletePosition]=\"matAutocompletePosition\"\n                   [formControl]=\"formControl\"\n                   [placeholder]=\"placeholder\"\n                   [appAutofocus]=\"autofocus\"\n                   [tabindex]=\"_tabindex\"\n                   [required]=\"required\"\n                   (click)=\"clicked.emit($event)\"\n                   (focus)=\"filterInputTextFocusEvent($event)\"\n                   (blur)=\"filterInputTextBlurEvent($event)\"\n                   (keydown.escape)=\"keydownEscape.emit($event)\"\n                   (keyup.enter)=\"keyupEnter.emit($event)\"\n                   (keyup.arrowdown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\">\n\n            <!-- autocomplete -->\n            <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                              autoActiveFirstOption\n                              [displayWith]=\"displayWith\"\n                              [class]=\"classList\"\n                              [panelWidth]=\"panelWidth\">\n              <!-- Headers -->\n              <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n                <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n                  <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                </ion-col>\n              </ion-row>\n\n              <!-- Options -->\n              <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n                <!-- No item option -->\n                <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                  <ion-label><i>{{noResultMessage | translate}}</i></ion-label>\n                </mat-option>\n\n                <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                  <ion-row [classList]=\"item.classList\">\n                    <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                             [size]=\"displayColumnSizes[i]\">\n                      <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: formControl.value, withAccent: highlightAccent }\"></ion-text>\n                    </ion-col>\n                  </ion-row>\n                </mat-option>\n\n                <!-- More item -->\n                <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-container>\n\n              <!-- Loading spinner -->\n              <ng-template #loadingTemplate>\n                <mat-option *ngIf=\"(displayValue | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-template>\n\n              <!-- Need more characters -->\n              <ng-template #waitMoreCharacterTemplate>\n                <mat-option class=\"ion-padding text-italic\" disabled>\n                  <ion-label>\n                    {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n                  </ion-label>\n                </mat-option>\n              </ng-template>\n\n              <!-- footer -->\n              <ion-row *ngIf=\"itemCount; let count\" class=\"mat-autocomplete-footer ion-no-padding\">\n                <ion-col>\n                  <ion-text class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n                </ion-col>\n              </ion-row>\n\n            </mat-autocomplete>\n\n          </ng-template>\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n          <ng-content select=\"[matError]\"></ng-content>\n\n        </mat-form-field>\n      </ng-template>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"!mobile && !multiple\"\n          (click)=\"dropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #headers>\n  <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n    <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n      <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n    </ion-col>\n  </ion-row>\n</ng-template>\n\n<ng-template #options>\n\n\n</ng-template>\n\n",
                 providers: [{
                         provide: NG_VALUE_ACCESSOR,
                         multi: true,
@@ -2222,52 +2249,49 @@ function roundFloat(input, maxDecimals) {
     return input;
 }
 
-/**
- * @deprecated use 'latitudeFormat' or 'longitudeFormat' instead
- */
-class LatLongFormatPipe {
-    transform(value, args) {
-        return ((!args.type || args.type !== 'latitude') ? formatLongitude : formatLatitude)(value, args);
-    }
-}
-LatLongFormatPipe.ɵprov = ɵɵdefineInjectable({ factory: function LatLongFormatPipe_Factory() { return new LatLongFormatPipe(); }, token: LatLongFormatPipe, providedIn: "root" });
-LatLongFormatPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'latLongFormat'
-            },] },
-    { type: Injectable, args: [{ providedIn: 'root' },] }
-];
 class LatitudeFormatPipe {
     constructor() {
         this.transform = formatLatitude;
     }
 }
-LatitudeFormatPipe.ɵprov = ɵɵdefineInjectable({ factory: function LatitudeFormatPipe_Factory() { return new LatitudeFormatPipe(); }, token: LatitudeFormatPipe, providedIn: "root" });
 LatitudeFormatPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'latitudeFormat'
-            },] },
-    { type: Injectable, args: [{ providedIn: 'root' },] }
+            },] }
 ];
 class LongitudeFormatPipe {
     constructor() {
         this.transform = formatLongitude;
     }
 }
-LongitudeFormatPipe.ɵprov = ɵɵdefineInjectable({ factory: function LongitudeFormatPipe_Factory() { return new LongitudeFormatPipe(); }, token: LongitudeFormatPipe, providedIn: "root" });
 LongitudeFormatPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'longitudeFormat'
-            },] },
-    { type: Injectable, args: [{ providedIn: 'root' },] }
+            },] }
+];
+/**
+ * @deprecated use 'latitudeFormat' or 'longitudeFormat' instead
+ */
+class LatLongFormatPipe {
+    transform(value, opts) {
+        return ((!opts || (opts === null || opts === void 0 ? void 0 : opts.type) !== 'latitude') ? formatLongitude : formatLatitude)(value, opts);
+    }
+}
+LatLongFormatPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'latLongFormat'
+            },] }
 ];
 
 class NumberFormatPipe {
-    transform(val, numberFormatOptions) {
+    transform(val, opts) {
         // Format the output to display any way you want here.
         // For instance:
         if (val !== undefined && val !== null) {
-            return val.toLocaleString(undefined, numberFormatOptions);
+            if (opts === null || opts === void 0 ? void 0 : opts.fixedDecimals) {
+                return val.toFixed(opts.fixedDecimals);
+            }
+            return val.toLocaleString(undefined, opts);
         }
         else {
             return '';
@@ -2380,15 +2404,9 @@ FileSizePipe.decorators = [
 ];
 
 const moment$1 = momentImported;
-const tz = momentTZImported;
 const DATE_UNIX_TIMESTAMP = 'X';
 const DATE_UNIX_MS_TIMESTAMP = 'x';
 class DateUtils {
-    constructor() {
-        this.toDateISOString = toDateISOString;
-        this.fromDateISOString = fromDateISOString;
-        this.toDuration = toDuration;
-    }
     static min(date1, date2) {
         return date1 && (!date2 || date1.isSameOrBefore(date2)) ? date1 : date2;
     }
@@ -2438,6 +2456,9 @@ class DateUtils {
         return date.day() === weekday;
     }
 }
+DateUtils.toDateISOString = toDateISOString;
+DateUtils.fromDateISOString = fromDateISOString;
+DateUtils.toDuration = toDuration;
 function toDateISOString(value) {
     if (!value)
         return undefined;
@@ -2908,7 +2929,7 @@ const moment$2 = momentImported;
 // @dynamic
 class SharedValidators {
     static getDoubleRegexp(maxDecimals) {
-        if (isNil(maxDecimals) || maxDecimals === -1)
+        if (isNil(maxDecimals))
             return this._REGEXP_CACHE.DOUBLE_BY_MAX_DECIMALS.NO_LIMIT;
         if (maxDecimals < 0)
             throw new Error(`Invalid maxDecimals value: ${maxDecimals}`);
@@ -2969,7 +2990,7 @@ class SharedValidators {
         }
         return null;
     }
-    static double(opts) {
+    static decimal(opts) {
         const regexp = this.getDoubleRegexp(opts === null || opts === void 0 ? void 0 : opts.maxDecimals);
         return (control) => {
             let value = control.value;
@@ -2978,7 +2999,7 @@ class SharedValidators {
                 return null;
             }
             if (isNotNil(value) && value !== '' && !regexp.test(value)) {
-                return { maxDecimals: { maxDecimals: opts === null || opts === void 0 ? void 0 : opts.maxDecimals } };
+                return isNotNil(opts === null || opts === void 0 ? void 0 : opts.maxDecimals) ? { maxDecimals: { maxDecimals: opts.maxDecimals } } : { decimal: true };
             }
             return null;
         };
@@ -3110,6 +3131,7 @@ SharedValidators.I18N_ERROR_KEYS = {
     dateMinDuration: 'ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION',
     dateMaxDuration: 'ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION',
     maxDecimals: 'ERROR.FIELD_MAXIMUM_DECIMALS',
+    double: 'ERROR.FIELD_NOT_VALID_DOUBLE',
     integer: 'ERROR.FIELD_NOT_VALID_INTEGER',
     email: 'ERROR.FIELD_NOT_VALID_EMAIL',
     latitude: 'ERROR.FIELD_NOT_VALID_LATITUDE',
@@ -3118,6 +3140,10 @@ SharedValidators.I18N_ERROR_KEYS = {
     unique: 'ERROR.FIELD_NOT_UNIQUE',
     entity: 'ERROR.FIELD_INVALID'
 };
+/**
+ * @deprecated use decimal
+ */
+SharedValidators.double = SharedValidators.decimal;
 // @dynamic
 class SharedFormGroupValidators {
     static dateRange(startDateField, endDateField, msg) {
@@ -4132,8 +4158,8 @@ class FormErrorTranslatePipe {
         // if there is a subscription to onLangChange, clean it
         this._dispose();
         // subscribe to onTranslationChange event, in case the translations change
-        if (!this._onFormStatusChange) {
-            this._onFormStatusChange = form.statusChanges.subscribe((status) => {
+        if (!this._onFormStatusChanges) {
+            this._onFormStatusChanges = form.statusChanges.subscribe((status) => {
                 this._updateValue(form, opts, status);
             });
         }
@@ -4156,9 +4182,9 @@ class FormErrorTranslatePipe {
      * Clean any existing subscription to change events
      */
     _dispose() {
-        if (typeof this._onFormStatusChange !== 'undefined') {
-            this._onFormStatusChange.unsubscribe();
-            this._onFormStatusChange = undefined;
+        if (typeof this._onFormStatusChanges !== 'undefined') {
+            this._onFormStatusChanges.unsubscribe();
+            this._onFormStatusChanges = undefined;
         }
     }
 }
@@ -4177,48 +4203,112 @@ class FormGetPipe {
         return form.get(path);
     }
 }
-FormGetPipe.ɵprov = ɵɵdefineInjectable({ factory: function FormGetPipe_Factory() { return new FormGetPipe(); }, token: FormGetPipe, providedIn: "root" });
 FormGetPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'formGet'
-            },] },
-    { type: Injectable, args: [{ providedIn: 'root' },] }
+            },] }
 ];
 class FormGetControlPipe {
     transform(form, path) {
-        return form.get(path);
+        return (form && path && form.get(path) || form);
     }
 }
-FormGetControlPipe.ɵprov = ɵɵdefineInjectable({ factory: function FormGetControlPipe_Factory() { return new FormGetControlPipe(); }, token: FormGetControlPipe, providedIn: "root" });
 FormGetControlPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'formGetControl'
-            },] },
-    { type: Injectable, args: [{ providedIn: 'root' },] }
+            },] }
 ];
 class FormGetArrayPipe {
     transform(form, path) {
-        return form.get(path);
+        return (form && path && form.get(path) || form);
     }
 }
-FormGetArrayPipe.ɵprov = ɵɵdefineInjectable({ factory: function FormGetArrayPipe_Factory() { return new FormGetArrayPipe(); }, token: FormGetArrayPipe, providedIn: "root" });
 FormGetArrayPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'formGetArray'
-            },] },
-    { type: Injectable, args: [{ providedIn: 'root' },] }
+            },] }
 ];
 class FormGetGroupPipe {
     transform(form, path) {
-        return form.get(path);
+        return (form && path && form.get(path) || form);
     }
 }
-FormGetGroupPipe.ɵprov = ɵɵdefineInjectable({ factory: function FormGetGroupPipe_Factory() { return new FormGetGroupPipe(); }, token: FormGetGroupPipe, providedIn: "root" });
 FormGetGroupPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'formGetGroup'
-            },] },
-    { type: Injectable, args: [{ providedIn: 'root' },] }
+            },] }
+];
+class FormGetValuePipe {
+    constructor(adapter, _ref) {
+        this.adapter = adapter;
+        this._ref = _ref;
+        this.value = undefined;
+        this._lastControl = null;
+    }
+    transform(form, path, listenStatusChanges = false) {
+        if (!form) {
+            this._dispose();
+            return undefined;
+        }
+        // if we ask another time for the same form and opts, return the last value
+        if (form === this._lastControl && equals(path, this._lastPath)) {
+            return this.value;
+        }
+        // store the query, in case it changes
+        this._lastControl = form;
+        // store the params, in case they change
+        this._lastPath = path;
+        // set the value
+        const control = path ? form.get(path) : form;
+        this.value = control === null || control === void 0 ? void 0 : control.value;
+        // if there is a subscription to onLangChange, clean it
+        this._dispose();
+        // subscribe to valueChanges event, in case control value change
+        if (!this._onControlValueChanges && control) {
+            this._onControlValueChanges = control.valueChanges.subscribe((value) => {
+                if (value !== this.value) {
+                    this.value = value;
+                    this._ref.markForCheck();
+                }
+            });
+        }
+        if (listenStatusChanges && !this._onControlStatusChanges && control) {
+            this._onControlStatusChanges = control.statusChanges.subscribe((status) => {
+                const value = control.value;
+                if (value !== this.value) {
+                    this.value = value;
+                    this._ref.markForCheck();
+                }
+            });
+        }
+        return this.value;
+    }
+    ngOnDestroy() {
+        this._dispose();
+    }
+    /**
+     * Clean any existing subscription to change events
+     */
+    _dispose() {
+        if (typeof this._onControlValueChanges !== 'undefined') {
+            this._onControlValueChanges.unsubscribe();
+            this._onControlValueChanges = undefined;
+        }
+        if (typeof this._onControlStatusChanges !== 'undefined') {
+            this._onControlStatusChanges.unsubscribe();
+            this._onControlStatusChanges = undefined;
+        }
+    }
+}
+FormGetValuePipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'formGetValue',
+                pure: false
+            },] }
+];
+FormGetValuePipe.ctorParameters = () => [
+    { type: FormErrorTranslator },
+    { type: ChangeDetectorRef }
 ];
 
 class SharedPipesModule {
@@ -4267,7 +4357,8 @@ SharedPipesModule.decorators = [
                     FormGetPipe,
                     FormGetControlPipe,
                     FormGetArrayPipe,
-                    FormGetGroupPipe
+                    FormGetGroupPipe,
+                    FormGetValuePipe
                 ],
                 exports: [
                     PropertyGetPipe,
@@ -4306,7 +4397,8 @@ SharedPipesModule.decorators = [
                     FormGetPipe,
                     FormGetControlPipe,
                     FormGetArrayPipe,
-                    FormGetGroupPipe
+                    FormGetGroupPipe,
+                    FormGetValuePipe
                 ]
             },] }
 ];
@@ -4583,10 +4675,10 @@ class MatLatLongField {
         this.disabling = false;
         this.writing = false;
         this._readonly = false;
+        this.required = false;
+        this.floatLabel = 'auto';
         this.maxDecimals = LAT_LONG_DEFAULT_MAX_DECIMALS;
         this.placeholderChar = DEFAULT_PLACEHOLDER_CHAR;
-        this.floatLabel = 'auto';
-        this.required = false;
         this.onBlur = new EventEmitter();
         this.onFocus = new EventEmitter();
     }
@@ -4601,7 +4693,6 @@ class MatLatLongField {
         return this._readonly;
     }
     ngOnInit() {
-        this.mobile = isNotNil(this.mobile) ? this.mobile : isMobile(window);
         this.type = this.type || 'latitude';
         this.pattern = this.pattern || 'DDMM';
         this.mask = MASKS[this.type] && MASKS[this.type][this.pattern];
@@ -4632,8 +4723,8 @@ class MatLatLongField {
             this.maxDecimals = DEFAULT_MAX_DECIMALS;
         }
         this.showSignControl = this.pattern !== 'DD';
-        this.formatFn = this.type === 'latitude' ? formatLatitude : formatLongitude;
-        this.formatFnOptions = { pattern: this.pattern, maxDecimals: this.maxDecimals, hideSign: this.showSignControl };
+        this._formatFn = this.type === 'latitude' ? formatLatitude : formatLongitude;
+        this._formatOptions = { pattern: this.pattern, maxDecimals: this.maxDecimals, hideSign: this.showSignControl };
         this.inputPlaceholder = 'COMMON.LAT_LONG.' + (this.type === 'longitude' && 'D' || '') + this.pattern + '_PLACEHOLDER';
         this.textFormControl = this.formBuilder.control(this.required ? [null, Validators.required] : [null]);
         this.textMaskConfig = { mask: this.mask, keepCharPositions: true, placeholderChar: this.placeholderChar };
@@ -4667,7 +4758,7 @@ class MatLatLongField {
             return;
         this.value = (typeof obj === 'string') ? parseFloat(obj.replace(/,/g, '.')) : obj;
         this.writing = true;
-        const strValue = this.formatFn(this.value, Object.assign(Object.assign({}, this.formatFnOptions), { placeholderChar: this.placeholderChar }));
+        const strValue = this._formatFn(this.value, Object.assign(Object.assign({}, this._formatOptions), { placeholderChar: this.placeholderChar }));
         const sign = isNotNil(this.value) ? (this.value < 0 ? -1 : 1) :
             // Use default sign, if any
             (this.defaultSign ? (this.defaultSign === '-' ? -1 : 1) : null);
@@ -4700,41 +4791,13 @@ class MatLatLongField {
         this.disabling = false;
         this.markForCheck();
     }
-    onFormChange(strValue) {
-        if (this.writing)
-            return; // Skip if call by self
-        this.writing = true;
-        if (this.textFormControl.invalid || this.signFormControl.invalid) {
-            this.formControl.markAsPending();
-            this.formControl.setErrors(Object.assign(Object.assign(Object.assign({}, this.formControl.errors), this.textFormControl.errors), this.signFormControl.errors));
-            this.writing = false;
-            return;
-        }
-        const parsedValue = isNotNilOrBlank(strValue) ? parseLatitudeOrLongitude(strValue, this.pattern, 7 /*=precision of the converted double value */, this.placeholderChar) : null;
-        // DEBUG
-        //console.debug('parsedValue=', parsedValue);
-        if (isNaN(parsedValue)) {
-            this.formControl.markAsPending();
-            this.formControl.setErrors(this.type === 'latitude' ? { latitude: true } : { longitude: true });
-            this.writing = false;
-            return;
-        }
-        const sign = (this.pattern === 'DD') ? 1 /*ignore sign*/ : (this.signFormControl.value || 1);
-        this.value = isNotNil(parsedValue) ? sign * parsedValue : null;
-        // Get the model value
-        //console.debug("[mat-latlon] Setting value {" + this.value + "} parsed from {" + strValue + "}");
-        this.formControl.patchValue(this.value, { emitEvent: false });
-        this.writing = false;
-        this.markForCheck();
-        this._onChangeCallback(this.value);
-    }
-    checkIfTouched() {
-        if (this.formControl.touched || this.textFormControl.touched) {
-            this.markForCheck();
-            this._onTouchedCallback();
-            return true;
-        }
-        return false;
+    /**
+     * Format value to display as string (no placeholder char, and show sign)
+     * @param value
+     * @param opts
+     */
+    _format(value, opts) {
+        return this._formatFn(value, Object.assign(Object.assign({}, this._formatOptions), { hideSign: false, placeholderChar: '' }));
     }
     _onFocus(event) {
         // Apply the default sign, when pattern is DD and field is empty
@@ -4743,7 +4806,8 @@ class MatLatLongField {
                 // Compute the text value, using the default sign
                 const defaultSign = this.defaultSign === '-' ? -1 : 1;
                 if (this.pattern === 'DD') {
-                    let valueStr = this.formatFn(defaultSign, Object.assign(Object.assign({}, this.formatFnOptions), { placeholderChar: this.placeholderChar }));
+                    let valueStr = this._formatFn(defaultSign, Object.assign(Object.assign({}, this._formatOptions), { placeholderChar: this.placeholderChar }));
+                    // Keep only the sign ('+' or '-') and placeholder chars, but NOT the '1'
                     valueStr = valueStr && valueStr.replace('1', this.placeholderChar);
                     // Wait end of focus animation (label should move to top)
                     setTimeout(() => {
@@ -4843,6 +4907,42 @@ class MatLatLongField {
             }
         }
     }
+    onFormChange(strValue) {
+        if (this.writing)
+            return; // Skip if call by self
+        this.writing = true;
+        if (this.textFormControl.invalid || this.signFormControl.invalid) {
+            this.formControl.markAsPending();
+            this.formControl.setErrors(Object.assign(Object.assign(Object.assign({}, this.formControl.errors), this.textFormControl.errors), this.signFormControl.errors));
+            this.writing = false;
+            return;
+        }
+        const parsedValue = isNotNilOrBlank(strValue) ? parseLatitudeOrLongitude(strValue, this.pattern, 7 /*=precision of the converted double value */, this.placeholderChar) : null;
+        // DEBUG
+        //console.debug('parsedValue=', parsedValue);
+        if (isNaN(parsedValue)) {
+            this.formControl.markAsPending();
+            this.formControl.setErrors(this.type === 'latitude' ? { latitude: true } : { longitude: true });
+            this.writing = false;
+            return;
+        }
+        const sign = (this.pattern === 'DD') ? 1 /*ignore sign*/ : (this.signFormControl.value || 1);
+        this.value = isNotNil(parsedValue) ? sign * parsedValue : null;
+        // Get the model value
+        //console.debug("[mat-latlon] Setting value {" + this.value + "} parsed from {" + strValue + "}");
+        this.formControl.patchValue(this.value, { emitEvent: false });
+        this.writing = false;
+        this.markForCheck();
+        this._onChangeCallback(this.value);
+    }
+    checkIfTouched() {
+        if (this.formControl.touched || this.textFormControl.touched) {
+            this.markForCheck();
+            this._onTouchedCallback();
+            return true;
+        }
+        return false;
+    }
     markForCheck() {
         this.cd.markForCheck();
     }
@@ -4850,7 +4950,7 @@ class MatLatLongField {
 MatLatLongField.decorators = [
     { type: Component, args: [{
                 selector: 'mat-latlong-field',
-                template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                class=\"mat-form-field-disabled\">\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\"\n         readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{formatFn(value, formatFnOptions)}}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n\n  <ion-grid class=\"ion-no-padding\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <ion-col class=\"text ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-disabled]=\"formControl.disabled\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\">\n\n          <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <input matInput #inputElement\n                 type=\"text\"\n                 autocomplete=\"off\"\n                 [textMask]=\"textMaskConfig\"\n                 [formControl]=\"textFormControl\"\n                 [placeholder]=\"inputPlaceholder|translate\"\n                 (keypress)=\"onKeypress($event)\"\n                 (keydown.tab)=\"moveCaretToSeparator($event, true)\"\n                 (keydown.shift.tab)=\"moveCaretToSeparator($event, false)\"\n                 (focus)=\"_onFocus($event)\"\n                 (blur)=\"_onBlur($event)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\">\n\n          <div *ngIf=\"!showSignControl\" matSuffix #injectMatSuffix></div>\n\n          <!--<div matSuffix *ngIf=\"!showSignControl\"><ng-content select=\"[matSuffix]\"></ng-content></div>-->\n\n          <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\">\n\n            <!-- errors -->\n            <ng-container *ngIf=\"formControl.touched\">\n              <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n              <mat-error *ngIf=\"formControl.hasError('latitude')\" translate>ERROR.FIELD_NOT_VALID_LATITUDE</mat-error>\n              <mat-error *ngIf=\"formControl.hasError('longitude')\" translate>ERROR.FIELD_NOT_VALID_LONGITUDE</mat-error>\n              <ng-content select=\"mat-error\"></ng-content>\n            </ng-container>\n\n            <!-- mat hint -->\n            <div class=\"mat-form-field-hint-wrapper\" [hidden]=\"formControl.invalid\">\n              <div class=\"mat-form-field-hint-spacer\"></div>\n              <ng-content select=\"mat-hint\"></ng-content>\n            </div>\n          </div>\n        </mat-form-field>\n      </ion-col>\n\n      <!-- sign -->\n      <ion-col class=\"sign ion-no-padding\" [ngSwitch]=\"type\" *ngIf=\"showSignControl\">\n\n          <!-- sign on latitude -->\n          <mat-form-field *ngSwitchCase=\"'latitude'\"\n                          floatLabel=\"never\"\n                          [class.mat-form-field-invalid]=\"formControl.touched && signFormControl.invalid\">\n            <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER</mat-label>\n            <mat-select [formControl]=\"signFormControl\"\n                        [tabindex]=\"tabindex+1\">\n              <mat-option [value]=\"1\">{{'COMMON.LAT_LONG.LAT_SIGN_N'|translate}}</mat-option>\n              <mat-option [value]=\"-1\" >{{'COMMON.LAT_LONG.LAT_SIGN_S'|translate}}</mat-option>\n            </mat-select>\n\n\n            <div matSuffix>\n              <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n            </div>\n          </mat-form-field>\n\n          <!-- sign on longitude -->\n          <mat-form-field floatLabel=\"never\"\n                          *ngSwitchCase=\"'longitude'\"\n                          [class.mat-form-field-invalid]=\"formControl.touched && signFormControl.invalid\">\n            <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER</mat-label>\n            <mat-select [formControl]=\"signFormControl\"\n                        [tabindex]=\"tabindex+2\">\n              <mat-option [value]=\"1\" translate>{{'COMMON.LAT_LONG.LONG_SIGN_E'|translate}}</mat-option>\n              <mat-option [value]=\"-1\" translate>{{'COMMON.LAT_LONG.LONG_SIGN_W'|translate}}</mat-option>\n            </mat-select>\n\n            <div matSuffix>\n              <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n            </div>\n          </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
+                template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                class=\"mat-form-field-disabled\">\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\"\n         readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{_format(value) }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n\n  <ion-grid class=\"ion-no-padding\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <ion-col class=\"text ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-disabled]=\"formControl.disabled\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\">\n\n          <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <input matInput #inputElement\n                 type=\"text\"\n                 autocomplete=\"off\"\n                 [textMask]=\"textMaskConfig\"\n                 [formControl]=\"textFormControl\"\n                 [placeholder]=\"inputPlaceholder|translate\"\n                 (keypress)=\"onKeypress($event)\"\n                 (keydown.tab)=\"moveCaretToSeparator($event, true)\"\n                 (keydown.shift.tab)=\"moveCaretToSeparator($event, false)\"\n                 (focus)=\"_onFocus($event)\"\n                 (blur)=\"_onBlur($event)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\">\n\n          <div matSuffix *ngIf=\"!showSignControl\">\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\">\n\n            <!-- errors -->\n            <ng-container *ngIf=\"formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey\" [ngSwitch]=\"errorKey\">\n              <mat-error *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</mat-error>\n              <mat-error *ngSwitchCase=\"'latitude'\" translate>ERROR.FIELD_NOT_VALID_LATITUDE</mat-error>\n              <mat-error *ngSwitchCase=\"'longitude'\" translate>ERROR.FIELD_NOT_VALID_LONGITUDE</mat-error>\n              <mat-error *ngSwitchCase=\"'min'\">{{'ERROR.FIELD_MIN_COMPACT'|translate: {min: _format(formControl.errors.min.min) } }}</mat-error>\n              <mat-error *ngSwitchCase=\"'max'\">{{'ERROR.FIELD_MAX_COMPACT'|translate: {max: _format(formControl.errors.max.max) } }}</mat-error>\n              <mat-error *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</mat-error>\n            </ng-container>\n            <ng-content select=\"mat-error\"></ng-content>\n\n            <!-- mat hint -->\n            <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n              <div class=\"mat-form-field-hint-spacer\"></div>\n              <ng-content select=\"mat-hint\"></ng-content>\n            </div>\n          </div>\n        </mat-form-field>\n      </ion-col>\n\n      <!-- sign -->\n      <ion-col class=\"sign ion-no-padding\" [ngSwitch]=\"type\" *ngIf=\"showSignControl\">\n\n          <!-- sign on latitude -->\n          <mat-form-field *ngSwitchCase=\"'latitude'\"\n                          floatLabel=\"never\"\n                          [class.mat-form-field-invalid]=\"formControl.touched && signFormControl.invalid\">\n            <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER</mat-label>\n            <mat-select [formControl]=\"signFormControl\"\n                        [tabindex]=\"tabindex+1\">\n              <mat-option [value]=\"1\">{{'COMMON.LAT_LONG.LAT_SIGN_N'|translate}}</mat-option>\n              <mat-option [value]=\"-1\" >{{'COMMON.LAT_LONG.LAT_SIGN_S'|translate}}</mat-option>\n            </mat-select>\n\n            <div matSuffix>\n              <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n            </div>\n          </mat-form-field>\n\n          <!-- sign on longitude -->\n          <mat-form-field floatLabel=\"never\"\n                          *ngSwitchCase=\"'longitude'\"\n                          [class.mat-form-field-invalid]=\"formControl.touched && signFormControl.invalid\">\n            <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER</mat-label>\n            <mat-select [formControl]=\"signFormControl\"\n                        [tabindex]=\"tabindex+2\">\n              <mat-option [value]=\"1\" translate>{{'COMMON.LAT_LONG.LONG_SIGN_E'|translate}}</mat-option>\n              <mat-option [value]=\"-1\" translate>{{'COMMON.LAT_LONG.LONG_SIGN_W'|translate}}</mat-option>\n            </mat-select>\n\n            <div matSuffix>\n              <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n            </div>\n          </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -4859,7 +4959,7 @@ MatLatLongField.decorators = [
                     }
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative;--ion-grid-column-padding:0}mat-form-field .datetime-md{padding:0!important}ion-row{flex-wrap:nowrap}ion-row ion-col.text{min-width:80px}ion-row ion-col.sign{min-width:60px;max-width:70px}mat-form-field{width:100%}mat-form-field .mat-form-field-subscript-wrapper{overflow:visible;top:100%}mat-form-field .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper{display:flex}mat-form-field .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper .mat-form-field-hint-spacer{flex:1 0 1em}mat-error{text-align:right;width:100%}"]
+                styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative;--ion-grid-column-padding:0}mat-form-field .datetime-md{padding:0!important}ion-row{flex-wrap:nowrap}ion-row ion-col.text{min-width:80px}ion-row ion-col.sign{min-width:40px;max-width:55px}mat-form-field{width:100%}mat-form-field .mat-form-field-subscript-wrapper{overflow:visible;white-space:nowrap;top:100%}mat-form-field .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper{display:flex}mat-form-field .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper .mat-form-field-hint-spacer{flex:1 0 1em}mat-error{text-align:right;width:100%}"]
             },] }
 ];
 MatLatLongField.ctorParameters = () => [
@@ -4869,19 +4969,18 @@ MatLatLongField.ctorParameters = () => [
     { type: FormGroupDirective, decorators: [{ type: Optional }] }
 ];
 MatLatLongField.propDecorators = {
-    mobile: [{ type: Input }],
     formControl: [{ type: Input }],
     formControlName: [{ type: Input }],
-    placeholder: [{ type: Input }],
     type: [{ type: Input }],
     pattern: [{ type: Input, args: ['latLongPattern',] }],
+    required: [{ type: Input }],
+    floatLabel: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    tabindex: [{ type: Input }],
     defaultSign: [{ type: Input }],
     maxDecimals: [{ type: Input }],
     placeholderChar: [{ type: Input }],
-    floatLabel: [{ type: Input }],
     readonly: [{ type: Input }],
-    required: [{ type: Input }],
-    tabindex: [{ type: Input }],
     onBlur: [{ type: Output }],
     onFocus: [{ type: Output }],
     inputElement: [{ type: ViewChild, args: ['inputElement',] }]
@@ -5234,7 +5333,7 @@ class MatDate {
 MatDate.decorators = [
     { type: Component, args: [{
                 selector: 'mat-date-field',
-                template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                class=\"mat-form-field-disabled\">\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\"\n         readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{formControl.value|dateFormat: {pattern: datePattern} }}</ion-text>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n  <mat-form-field [floatLabel]=\"floatLabel\">\n\n    <mat-label>{{placeholder}}</mat-label>\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"!mobile\"\n           [formControl]=\"textControl\"\n           [textMask]=\"{mask: mask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n           [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n           (blur)=\"checkIfTouched()\"\n           (keyup.arrowdown)=\"openDatePicker($event, datePicker)\"\n           (keyup.escape)=\"preventEvent($event)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           [appAutofocus]=\"autofocus\">\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"mobile\"\n           [formControl]=\"textControl\"\n           (click)=\"openDatePickerIfMobile($event, datePicker)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           readonly>\n\n    <!-- Hide the final input -->\n    <input matInput type=\"text\" [formControl]=\"formControl\"\n           hidden\n           [matDatepicker]=\"datePicker\"\n           [matDatepickerFilter]=\"datePickerFilter\"\n           (dateChange)=\"onDatePickerChange($event)\">\n\n    <button type=\"button\" mat-icon-button tabindex=\"-1\" matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"formControl.disabled\">\n      <div *ngIf=\"mobile; then iconDate; else iconDesktop\"></div>\n    </button>\n    <button matSuffix mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"clear()\"\n            [hidden]=\"formControl.disabled || !formControl.value\">\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <!-- errors -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey\">\n      <ng-container [ngSwitch]=\"errorKey\">\n        <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n        <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</span>\n        <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n        <span *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>\n        <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n        <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n        <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n        <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n      </ng-container>\n    </mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <!-- mat hint -->\n    <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <div class=\"mat-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <mat-datepicker #datePicker\n                  [touchUi]=\"mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  [startAt]=\"startDate\"\n                  ></mat-datepicker>\n\n\n\n</ng-template>\n\n<ng-template #iconDesktop>\n  <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n  <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n",
+                template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                class=\"mat-form-field-disabled\">\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\"\n         readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{formControl.value|dateFormat: {pattern: datePattern} }}</ion-text>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n  <mat-form-field [floatLabel]=\"floatLabel\">\n\n    <mat-label>{{placeholder}}</mat-label>\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"!mobile\"\n           [formControl]=\"textControl\"\n           [textMask]=\"{mask: mask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n           [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n           (blur)=\"checkIfTouched()\"\n           (keyup.arrowdown)=\"openDatePicker($event, datePicker)\"\n           (keyup.escape)=\"preventEvent($event)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           [appAutofocus]=\"autofocus\">\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"mobile\"\n           [formControl]=\"textControl\"\n           (click)=\"openDatePickerIfMobile($event, datePicker)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           readonly>\n\n    <!-- Hide the final input -->\n    <input matInput type=\"text\" [formControl]=\"formControl\"\n           hidden\n           [matDatepicker]=\"datePicker\"\n           [matDatepickerFilter]=\"datePickerFilter\"\n           (dateChange)=\"onDatePickerChange($event)\">\n\n    <button type=\"button\" mat-icon-button tabindex=\"-1\" matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"formControl.disabled\">\n      <div *ngIf=\"mobile; then iconDate; else iconDesktop\"></div>\n    </button>\n    <button matSuffix mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"clear()\"\n            [hidden]=\"formControl.disabled || !formControl.value\">\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <!-- errors -->\n    <ng-container *ngIf=\"formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey\" [ngSwitch]=\"errorKey\">\n      <mat-error *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</mat-error>\n      <mat-error *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</mat-error>\n      <mat-error *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</mat-error>\n      <mat-error *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</mat-error>\n      <mat-error *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n      <mat-error *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n      <mat-error *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n      <mat-error *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</mat-error>\n    </ng-container>\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <!-- mat hint -->\n    <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <div class=\"mat-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <mat-datepicker #datePicker\n                  [touchUi]=\"mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  [startAt]=\"startDate\"\n                  ></mat-datepicker>\n\n\n\n</ng-template>\n\n<ng-template #iconDesktop>\n  <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n  <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n",
                 providers: [
                     DEFAULT_VALUE_ACCESSOR,
                 ],
@@ -5331,7 +5430,7 @@ class MatDateTime {
         // Workaround because ion-datetime has issue (do not returned a ISO date)
         this._keyboardHideDelay = this.mobile && KEYBOARD_HIDE_DELAY_MS || 0;
         this.required = isNotNilBoolean(this.required) ? this.required : (this.formControl.validator === Validators.required || isBlankString(this.required));
-        // Add 'validDate' validator (when existing validator are null or required, to be sure to keep it)
+        // Add 'validDate' validator (when existing validator are null or required, to be sure to keep)
         if (!this.formControl.validator || this.formControl.validator === Validators.required) {
             this.formControl.setValidators(this.required ? [Validators.required, SharedValidators.validDate] : SharedValidators.validDate);
         }
@@ -5340,12 +5439,9 @@ class MatDateTime {
                 [this.formControl.validator, SharedValidators.validDate]);
         }
         // Create the day control
-        this.dayControl = this.formBuilder.control(null, this.required ? Validators.required : null);
+        this.dayControl = this.formBuilder.control(null);
         // Create the hour control
-        const timeValidator = this.required ?
-            (this.mobile ? Validators.required : Validators.compose([Validators.required, Validators.pattern(HOUR_REGEXP)])) :
-            (this.mobile ? null : Validators.pattern(HOUR_REGEXP));
-        this.hourControl = this.formBuilder.control(null, timeValidator);
+        this.hourControl = this.formBuilder.control(null, this.mobile ? null : Validators.pattern(HOUR_REGEXP));
         // Get patterns to display date and date+time
         this._subscription.add(this.translate.get(['COMMON.DATE_PATTERN', 'COMMON.DATE_TIME_PATTERN'])
             .subscribe((patterns) => this.updatePattern(patterns)));
@@ -5528,7 +5624,9 @@ class MatDateTime {
         if (incompleteValue || this.dayControl.invalid || this.hourControl.invalid) {
             this.formControl.markAsPending({ onlySelf: true });
             this.formControl.setErrors(Object.assign(Object.assign(Object.assign({ validDate: incompleteValue }, this.formControl.errors), this.dayControl.errors), this.hourControl.errors));
-            this.formControl.markAsDirty();
+            if (this.dayControl.dirty || this.hourControl.dirty) {
+                this.formControl.markAsDirty();
+            }
             this._writing = false;
             return;
         }
@@ -5907,7 +6005,7 @@ class MatDateShort {
 MatDateShort.decorators = [
     { type: Component, args: [{
                 selector: 'mat-date-short-field',
-                template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly else writable\">\n  <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\">\n  <ion-text>{{formControl.value|dateFormat: {pattern: displayPattern} }}</ion-text>\n</mat-form-field>\n\n<ng-template #writable>\n  <mat-form-field [floatLabel]=\"floatLabel\">\n\n    <mat-label>{{placeholder}}</mat-label>\n\n    <div matPrefix><ng-content select=\"[matPrefix]\"></ng-content></div>\n\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"!mobile\"\n           [formControl]=\"dayControl\"\n           [textMask]=\"{mask: dayMask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n           [placeholder]=\"'COMMON.DATE_YEAR_PLACEHOLDER'|translate\"\n           (blur)=\"checkIfTouched()\"\n           (keyup.arrowdown)=\"openDatePicker($event, datePicker1)\"\n           (keyup.escape)=\"preventEvent($event)\"\n           (click)=\"matInput.select()\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\">\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"mobile\"\n           [formControl]=\"dayControl\"\n           (click)=\"openDatePickerIfMobile($event, datePicker1)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           readonly>\n\n    <!-- Hide the final control -->\n    <input matInput type=\"text\"\n           [formControl]=\"formControl\"\n           hidden\n           [matDatepicker]=\"datePicker1\"\n           (dateChange)=\"onDatePickerChange($event)\">\n\n\n    <button matSuffix mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"openDatePicker($event, datePicker1)\"\n            [disabled]=\"formControl.disabled\">\n      <div *ngIf=\"mobile; then iconDate; else iconDesktop\"></div>\n    </button>\n    <button matSuffix mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"writeValue(null)\"\n            [hidden]=\"formControl.disabled || !formControl.value\">\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('validDate')\" translate>ERROR.FIELD_NOT_VALID_DATE</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('dateIsAfter')\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('dateRange')\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n    <mat-error *ngIf=\"!formControl.hasError('dateRange') && formControl.hasError('dateMaxDuration')\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n    <mat-error *ngIf=\"!formControl.hasError('dateRange') && formControl.hasError('dateMinDuration')\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('msg')\">{{formControl.errors.msg}}</mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n\n  <mat-datepicker #datePicker1\n                  startView=\"multi-year\"\n                  [touchUi]=\"mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (yearSelected)=\"closeDatePicker($event, datePicker1)\"\n                  [startAt]=\"startDate\"></mat-datepicker>\n\n  <ng-template #iconDesktop>\n    <mat-icon>keyboard_arrow_down</mat-icon>\n  </ng-template>\n\n  <ng-template #iconDate>\n    <mat-icon>date_range</mat-icon>\n  </ng-template>\n\n</ng-template>\n",
+                template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly else writable\">\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\">\n  <ion-text>{{formControl.value|dateFormat: {pattern: displayPattern} }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<ng-template #writable>\n  <mat-form-field [floatLabel]=\"floatLabel\">\n\n    <mat-label>{{placeholder}}</mat-label>\n\n    <div matPrefix><ng-content select=\"[matPrefix]\"></ng-content></div>\n\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"!mobile\"\n           [formControl]=\"dayControl\"\n           [textMask]=\"{mask: dayMask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n           [placeholder]=\"'COMMON.DATE_YEAR_PLACEHOLDER'|translate\"\n           (blur)=\"checkIfTouched()\"\n           (keyup.arrowdown)=\"openDatePicker($event, datePicker1)\"\n           (keyup.escape)=\"preventEvent($event)\"\n           (click)=\"matInput.select()\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\">\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"mobile\"\n           [formControl]=\"dayControl\"\n           (click)=\"openDatePickerIfMobile($event, datePicker1)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           readonly>\n\n    <!-- Hide the final control -->\n    <input matInput type=\"text\"\n           [formControl]=\"formControl\"\n           hidden\n           [matDatepicker]=\"datePicker1\"\n           (dateChange)=\"onDatePickerChange($event)\">\n\n\n    <button matSuffix mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"openDatePicker($event, datePicker1)\"\n            [disabled]=\"formControl.disabled\">\n      <div *ngIf=\"mobile; then iconDate; else iconDesktop\"></div>\n    </button>\n    <button matSuffix mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"writeValue(null)\"\n            [hidden]=\"formControl.disabled || !formControl.value\">\n      <mat-icon>close</mat-icon>\n    </button>\n\n\n    <ng-container *ngIf=\"formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey\" [ngSwitch]=\"errorKey\">\n      <mat-error *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</mat-error>\n      <mat-error *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</mat-error>\n      <mat-error *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</mat-error>\n      <mat-error *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n      <mat-error *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n      <mat-error *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n      <mat-error *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</mat-error>\n    </ng-container>\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n\n  <mat-datepicker #datePicker1\n                  startView=\"multi-year\"\n                  [touchUi]=\"mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (yearSelected)=\"closeDatePicker($event, datePicker1)\"\n                  [startAt]=\"startDate\"></mat-datepicker>\n\n  <ng-template #iconDesktop>\n    <mat-icon>keyboard_arrow_down</mat-icon>\n  </ng-template>\n\n  <ng-template #iconDate>\n    <mat-icon>date_range</mat-icon>\n  </ng-template>\n\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
                 providers: [
                     DEFAULT_VALUE_ACCESSOR$2,
                 ],
@@ -7045,8 +7143,8 @@ class MatSwipeField {
         this.required = false;
         this.clearable = false;
         this.onClick = new EventEmitter();
-        this.onBlur = new EventEmitter();
-        this.onFocus = new EventEmitter();
+        this.blurred = new EventEmitter();
+        this.focused = new EventEmitter();
         this.selectInputContent = selectInputContent;
     }
     set tabindex(value) {
@@ -7314,8 +7412,8 @@ MatSwipeField.propDecorators = {
     tabindex: [{ type: Input }],
     items: [{ type: Input }],
     onClick: [{ type: Output, args: ['click',] }],
-    onBlur: [{ type: Output, args: ['blur',] }],
-    onFocus: [{ type: Output, args: ['focus',] }],
+    blurred: [{ type: Output, args: ['blur',] }],
+    focused: [{ type: Output, args: ['focus',] }],
     fakeInput: [{ type: ViewChild, args: ['fakeInput',] }],
     slides: [{ type: ViewChild, args: ['slides', { static: true },] }],
     prevButton: [{ type: ViewChild, args: ['prevButton',] }],
@@ -8276,7 +8374,8 @@ AppGestureConfig.decorators = [
 class ToolbarToken {
 }
 class ToolbarComponent {
-    constructor(router, routerOutlet, cd, progressBarService) {
+    constructor(route, router, routerOutlet, cd, progressBarService) {
+        this.route = route;
         this.router = router;
         this.routerOutlet = routerOutlet;
         this.cd = cd;
@@ -8362,15 +8461,28 @@ class ToolbarComponent {
         return __awaiter(this, void 0, void 0, function* () {
             console.debug('[toolbar] calling goBack()');
             if (this._backHref) {
-                yield this.router.navigateByUrl(this._backHref);
+                const replaceUrl = !this.routerOutlet.canGoBack();
+                // Relative href
+                if (this._backHref.startsWith('.')) {
+                    yield this.router.navigate([this._backHref], { relativeTo: this.route, replaceUrl });
+                }
+                else {
+                    yield this.router.navigateByUrl(this._backHref, { replaceUrl });
+                }
             }
             else if (this.routerOutlet.canGoBack()) {
                 yield this.routerOutlet.pop();
             }
             else if (this._defaultBackHref) {
-                yield this.router.navigateByUrl(this._defaultBackHref, {
-                    replaceUrl: true
-                });
+                // Relative href
+                if (this._defaultBackHref.startsWith('.')) {
+                    yield this.router.navigate([this._defaultBackHref], { relativeTo: this.route, replaceUrl: true });
+                }
+                else {
+                    yield this.router.navigateByUrl(this._defaultBackHref, {
+                        replaceUrl: true
+                    });
+                }
             }
             else {
                 console.error('[toolbar] Cannot go back. Missing attribute \'defaultBackHref\' or \'backHref\'');
@@ -8429,7 +8541,7 @@ class ToolbarComponent {
 ToolbarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-toolbar',
-                template: "<ion-header [class]=\"class\">\n  <ion-toolbar [color]=\"color\">\n\n    <ion-buttons slot=\"start\">\n\n      <!-- back button -->\n      <ion-button class=\"back-button\"\n                  *ngIf=\"canGoBack\"\n                  (click)=\"doBackClick($event)\"\n                  routerDirection=\"back\" >\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n\n      <!-- show menu button -->\n      <ion-menu-toggle [hidden]=\"canGoBack || !canShowMenu\">\n        <ion-button>\n          <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n        </ion-button>\n      </ion-menu-toggle>\n\n      <ng-content select=\"[slot=start]\"></ng-content>\n    </ion-buttons>\n\n    <ion-title [innerHTML]=\"title\"></ion-title>\n\n    <ng-content select=\"ion-title\"></ng-content>\n\n    <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n    <ion-buttons slot=\"end\" collapse=\"true\">\n\n      <ng-content select=\"[slot=end]\"></ng-content>\n\n      <!-- search bar -->\n      <ion-searchbar #searchbar animated\n                     type=\"search\"\n                     *ngIf=\"hasSearch\"\n                     [class.cdk-visually-hidden]=\"!showSearchBar\"\n                     show-cancel-button=\"always\"\n                     (ionChange)=\"onSearch.emit($event)\"\n                     (ionCancel)=\"toggleSearchBar()\">\n      </ion-searchbar>\n\n      <!-- search button -->\n      <ion-button (click)=\"toggleSearchBar()\"\n                  *ngIf=\"hasSearch && !showSearchBar\">\n        <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n      </ion-button>\n\n      <!-- close button -->\n      <ion-button *ngIf=\"hasClose\"\n                  (tap)=\"tapClose($event)\"\n                  class=\"visible-xs visible-sm visible-mobile\">\n        <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n      </ion-button>\n\n      <!-- validate button -->\n      <ion-button *ngIf=\"hasValidate\"\n                  (tap)=\"tapValidate($event)\"\n                  class=\"visible-xs visible-sm visible-mobile\">\n        <ion-icon slot=\"icon-only\" name=\"save\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n\n  <!-- progress bar -->\n  <mat-progress-bar [color]=\"color\" [mode]=\"progressBarMode$ | async\">\n  </mat-progress-bar>\n</ion-header>\n",
+                template: "<ion-header [class]=\"class\">\n  <ion-toolbar [color]=\"color\">\n\n    <ion-buttons slot=\"start\">\n\n      <!-- back button -->\n      <ion-button class=\"back-button\"\n                  *ngIf=\"canGoBack\"\n                  (click)=\"doBackClick($event)\"\n                  routerDirection=\"back\" >\n        <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n      </ion-button>\n\n      <!-- show menu button -->\n      <ion-menu-toggle [menu]=\"'left'\"\n                       [class.cdk-visually-hidden]=\"canGoBack || !canShowMenu\">\n        <ion-button>\n          <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n        </ion-button>\n      </ion-menu-toggle>\n\n      <ng-content select=\"[slot=start]\"></ng-content>\n    </ion-buttons>\n\n    <ion-title [innerHTML]=\"title\"></ion-title>\n\n    <ng-content select=\"ion-title\"></ng-content>\n\n    <ng-content select=\"ion-buttons[slot=end]\"></ng-content>\n\n    <ion-buttons slot=\"end\" collapse=\"true\">\n\n      <ng-content select=\"[slot=end]\"></ng-content>\n\n      <!-- search bar -->\n      <ion-searchbar #searchbar animated\n                     type=\"search\"\n                     *ngIf=\"hasSearch\"\n                     [class.cdk-visually-hidden]=\"!showSearchBar\"\n                     show-cancel-button=\"always\"\n                     (ionChange)=\"onSearch.emit($event)\"\n                     (ionCancel)=\"toggleSearchBar()\">\n      </ion-searchbar>\n\n      <!-- search button -->\n      <ion-button (click)=\"toggleSearchBar()\"\n                  *ngIf=\"hasSearch && !showSearchBar\">\n        <ion-icon slot=\"icon-only\" name=\"search\"></ion-icon>\n      </ion-button>\n\n      <!-- close button -->\n      <ion-button *ngIf=\"hasClose\"\n                  (tap)=\"tapClose($event)\"\n                  class=\"visible-xs visible-sm visible-mobile\">\n        <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n      </ion-button>\n\n      <!-- validate button -->\n      <ion-button *ngIf=\"hasValidate\"\n                  (tap)=\"tapValidate($event)\"\n                  class=\"visible-xs visible-sm visible-mobile\">\n        <ion-icon slot=\"icon-only\" name=\"save\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n\n  <!-- progress bar -->\n  <mat-progress-bar [color]=\"color\" [mode]=\"progressBarMode$ | async\">\n  </mat-progress-bar>\n</ion-header>\n",
                 providers: [
                     { provide: ToolbarToken, useExisting: ToolbarComponent }
                 ],
@@ -8438,6 +8550,7 @@ ToolbarComponent.decorators = [
             },] }
 ];
 ToolbarComponent.ctorParameters = () => [
+    { type: ActivatedRoute },
     { type: Router },
     { type: IonRouterOutlet },
     { type: ChangeDetectorRef },
@@ -8459,7 +8572,8 @@ ToolbarComponent.propDecorators = {
     onValidateAndClose: [{ type: Output }],
     onBackClick: [{ type: Output }],
     onSearch: [{ type: Output }],
-    searchbar: [{ type: ViewChild, args: ['searchbar', { static: true },] }]
+    searchbar: [{ type: ViewChild, args: ['searchbar', { static: true },] }],
+    menuToggle: [{ type: ViewChild, args: ['menuToggle', { static: true },] }]
 };
 
 class MatPaginatorI18n extends MatPaginatorIntl {
@@ -8746,7 +8860,7 @@ class AppFormField {
 AppFormField.decorators = [
     { type: Component, args: [{
                 selector: 'app-form-field',
-                template: "<ng-container [ngSwitch]=\"type\">\n\n  <!-- integer -->\n  <mat-form-field *ngSwitchCase=\"'integer'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n    <input matInput #matInput\n           type=\"number\"\n           autocomplete=\"off\"\n           [readonly]=\"readonly\"\n           [min]=\"definition.minValue\"\n           [max]=\"definition.maxValue\"\n           pattern=\"-?[0-9]*\"\n           step=\"1\"\n           [appAutofocus]=\"autofocus\"\n           [placeholder]=\"placeholder\"\n           (keyup.enter)=\"onKeyupEnter.emit($event)\"\n           (keypress)=\"filterNumberInput($event, false)\"\n           [formControl]=\"formControl\"\n           [required]=\"required\"\n           [tabIndex]=\"tabindex\"\n           (click)=\"selectInputContent($event)\">\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{(compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate:formControl.errors['min'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('pattern')\">\n      {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('integer')\">\n      {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- double -->\n  <mat-form-field *ngSwitchCase=\"'double'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n\n    <input matInput #matInput\n           type=\"number\"\n           decimal=\"true\"\n           autocomplete=\"off\"\n           [min]=\"definition.minValue\"\n           [max]=\"definition.maxValue\"\n           [appAutofocus]=\"autofocus\"\n           [readonly]=\"readonly\"\n           [placeholder]=\"placeholder\"\n           [step]=\"numberInputStep\"\n           (keypress)=\"filterNumberInput($event, true)\"\n           [formControl]=\"formControl\"\n           [required]=\"required\"\n           [tabIndex]=\"tabindex\"\n           (click)=\"selectInputContent($event)\">\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN')| translate:formControl.errors['min'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('maxDecimals')\">\n      {{ (compact ? 'ERROR.FIELD_MAXIMUM_DECIMALS_COMPACT' : 'ERROR.FIELD_MAXIMUM_DECIMALS')| translate:{max:\n      definition.maximumNumberDecimals} }}</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- boolean -->\n  <mat-boolean-field *ngSwitchCase=\"'boolean'\" #matInput\n                     [class]=\"classList\"\n                     [formControl]=\"formControl\"\n                     [placeholder]=\"placeholder\"\n                     [floatLabel]=\"floatLabel\"\n                     [required]=\"required\"\n                     [compact]=\"compact\"\n                     [tabindex]=\"tabindex\"\n                     [readonly]=\"readonly\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-boolean-field>\n\n  <!-- date -->\n  <mat-date-field *ngSwitchCase=\"'date'\" #matInput\n                  [class]=\"classList\"\n                  [formControl]=\"formControl\"\n                  [placeholder]=\"compact ? ('COMMON.DATE_PLACEHOLDER'|translate): placeholder\"\n                  [floatLabel]=\"floatLabel\"\n                  [required]=\"required\"\n                  [readonly]=\"readonly\"\n                  [compact]=\"compact\"\n                  [tabindex]=\"tabindex\"\n                  [autofocus]=\"autofocus\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-date-field>\n\n  <!-- date time -->\n  <mat-date-time-field *ngSwitchCase=\"'dateTime'\" #matInput\n                       [class]=\"classList\"\n                       [formControl]=\"formControl\"\n                       [placeholder]=\"compact ? ('COMMON.DATE_TIME_PLACEHOLDER'|translate): placeholder\"\n                       [floatLabel]=\"floatLabel\"\n                       [required]=\"required\"\n                       [readonly]=\"readonly\"\n                       [compact]=\"compact\"\n                       [tabindex]=\"tabindex\"\n                       [autofocus]=\"autofocus\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-date-time-field>\n\n  <!-- enum -->\n  <mat-form-field *ngSwitchCase=\"'enum'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n    <mat-select [formControl]=\"formControl\"\n                [placeholder]=\"placeholder\"\n                [required]=\"required\"\n                [tabindex]=\"tabindex\"\n                (keyup.enter)=\"onKeyupEnter.emit($event)\">\n      <mat-option *ngFor=\"let item of definition.values\" [value]=\"item.key || item\">{{ (item.value || item) | translate }}</mat-option>\n    </mat-select>\n\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- color -->\n  <mat-form-field *ngSwitchCase=\"'color'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n\n    <ion-icon margin-right name=\"color-fill\" matPrefix></ion-icon>\n\n    <input matInput autocomplete=\"off\"\n           [appAutofocus]=\"autofocus\"\n           [formControl]=\"formControl\"\n           [style.color]=\"getColorContrast(formControl.value)\"\n           [style.background]=\"formControl.value\"\n           [colorPicker]=\"formControl.value\"\n           (colorPickerChange)=\"writeValue($event)\"\n           [cpSaveClickOutside]=\"true\"\n           cpPosition=\"top\"\n           cpOutputFormat=\"hex\"\n           [cpOKButton]=\"false\"\n           [required]=\"required\"/>\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n  </mat-form-field>\n\n  <!-- string -->\n  <mat-form-field *ngSwitchCase=\"'string'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n    <input matInput #matInput\n           autocomplete=\"off\"\n           [appAutofocus]=\"autofocus\"\n           [formControl]=\"formControl\"\n           [placeholder]=\"placeholder\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [tabIndex]=\"tabindex\"\n           (click)=\"selectInputContent($event)\"\n           (keypress)=\"filterAlphanumericalInput($event)\"\n           (keyup.enter)=\"onKeyupEnter.emit($event)\">\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- auto-complete -->\n  <mat-autocomplete-field *ngSwitchCase=\"'entity'\"\n                          [class]=\"classList\"\n                          [autofocus]=\"autofocus\"\n                          [placeholder]=\"placeholder\"\n                          [floatLabel]=\"floatLabel\"\n                          [formControl]=\"formControl\"\n                          [config]=\"definition.autocomplete\"\n                          [required]=\"required\"\n                          [displayWith]=\"getDisplayValueFn(definition)\">\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <ng-content select=\"[matSuffix]\"></ng-content>\n  </mat-autocomplete-field>\n\n  <!-- multi auto-complete -->\n  <mat-chips-field *ngSwitchCase=\"'entities'\"\n                    [class]=\"classList\"\n                    [placeholder]=\"placeholder\"\n                    [floatLabel]=\"floatLabel\"\n                    [formControl]=\"formControl\"\n                    [config]=\"definition.autocomplete\"\n                    [required]=\"required\"\n                    [displayWith]=\"getDisplayValueFn(definition)\">\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <ng-content select=\"[matSuffix]\"></ng-content>\n  </mat-chips-field>\n\n  <!-- other -->\n  <div *ngSwitchDefault>\n    <mat-error *ngIf=\"type\">Unknown type {{type}} for option {{definition.key}}. Please report this error.</mat-error>\n    <mat-error *ngIf=\"!type\">Error on option field. Please check console log for details.</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </div>\n\n</ng-container>\n",
+                template: "<ng-container [ngSwitch]=\"type\">\n\n  <!-- integer -->\n  <mat-form-field *ngSwitchCase=\"'integer'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n    <input matInput #matInput\n           type=\"number\"\n           autocomplete=\"off\"\n           [readonly]=\"readonly\"\n           [min]=\"definition.minValue\"\n           [max]=\"definition.maxValue\"\n           pattern=\"-?[0-9]*\"\n           step=\"1\"\n           [appAutofocus]=\"autofocus\"\n           [placeholder]=\"placeholder\"\n           (keyup.enter)=\"onKeyupEnter.emit($event)\"\n           (keypress)=\"filterNumberInput($event, false)\"\n           [formControl]=\"formControl\"\n           [required]=\"required\"\n           [tabIndex]=\"tabindex\"\n           (click)=\"selectInputContent($event)\">\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{(compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate:formControl.errors['min'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('pattern')\">\n      {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('integer')\">\n      {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- double -->\n  <mat-form-field *ngSwitchCase=\"'double'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n\n    <input matInput #matInput\n           type=\"number\"\n           decimal=\"true\"\n           autocomplete=\"off\"\n           [min]=\"definition.minValue\"\n           [max]=\"definition.maxValue\"\n           [appAutofocus]=\"autofocus\"\n           [readonly]=\"readonly\"\n           [placeholder]=\"placeholder\"\n           [step]=\"numberInputStep\"\n           (keypress)=\"filterNumberInput($event, true)\"\n           [formControl]=\"formControl\"\n           [required]=\"required\"\n           [tabIndex]=\"tabindex\"\n           (click)=\"selectInputContent($event)\">\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('decimal')\" translate>ERROR.FIELD_NOT_VALID_DECIMAL</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN')| translate:formControl.errors['min'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('maxDecimals')\">\n      {{ (compact ? 'ERROR.FIELD_MAXIMUM_DECIMALS_COMPACT' : 'ERROR.FIELD_MAXIMUM_DECIMALS')| translate:{maxDecimals:\n      definition.maximumNumberDecimals} }}</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- boolean -->\n  <mat-boolean-field *ngSwitchCase=\"'boolean'\" #matInput\n                     [class]=\"classList\"\n                     [formControl]=\"formControl\"\n                     [placeholder]=\"placeholder\"\n                     [floatLabel]=\"floatLabel\"\n                     [required]=\"required\"\n                     [compact]=\"compact\"\n                     [tabindex]=\"tabindex\"\n                     [readonly]=\"readonly\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-boolean-field>\n\n  <!-- date -->\n  <mat-date-field *ngSwitchCase=\"'date'\" #matInput\n                  [class]=\"classList\"\n                  [formControl]=\"formControl\"\n                  [placeholder]=\"compact ? ('COMMON.DATE_PLACEHOLDER'|translate): placeholder\"\n                  [floatLabel]=\"floatLabel\"\n                  [required]=\"required\"\n                  [readonly]=\"readonly\"\n                  [compact]=\"compact\"\n                  [tabindex]=\"tabindex\"\n                  [autofocus]=\"autofocus\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-date-field>\n\n  <!-- date time -->\n  <mat-date-time-field *ngSwitchCase=\"'dateTime'\" #matInput\n                       [class]=\"classList\"\n                       [formControl]=\"formControl\"\n                       [placeholder]=\"compact ? ('COMMON.DATE_TIME_PLACEHOLDER'|translate): placeholder\"\n                       [floatLabel]=\"floatLabel\"\n                       [required]=\"required\"\n                       [readonly]=\"readonly\"\n                       [compact]=\"compact\"\n                       [tabindex]=\"tabindex\"\n                       [autofocus]=\"autofocus\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-date-time-field>\n\n  <!-- enum -->\n  <mat-form-field *ngSwitchCase=\"'enum'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n    <mat-select [formControl]=\"formControl\"\n                [placeholder]=\"placeholder\"\n                [required]=\"required\"\n                [tabindex]=\"tabindex\"\n                (keyup.enter)=\"onKeyupEnter.emit($event)\">\n      <mat-option *ngFor=\"let item of definition.values\" [value]=\"item.key || item\">{{ (item.value || item) | translate }}</mat-option>\n    </mat-select>\n\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- color -->\n  <mat-form-field *ngSwitchCase=\"'color'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n\n    <ion-icon margin-right name=\"color-fill\" matPrefix></ion-icon>\n\n    <input matInput autocomplete=\"off\"\n           [appAutofocus]=\"autofocus\"\n           [formControl]=\"formControl\"\n           [style.color]=\"getColorContrast(formControl.value)\"\n           [style.background]=\"formControl.value\"\n           [colorPicker]=\"formControl.value\"\n           (colorPickerChange)=\"writeValue($event)\"\n           [cpSaveClickOutside]=\"true\"\n           cpPosition=\"top\"\n           cpOutputFormat=\"hex\"\n           [cpOKButton]=\"false\"\n           [required]=\"required\"/>\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n  </mat-form-field>\n\n  <!-- string -->\n  <mat-form-field *ngSwitchCase=\"'string'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n    <input matInput #matInput\n           autocomplete=\"off\"\n           [appAutofocus]=\"autofocus\"\n           [formControl]=\"formControl\"\n           [placeholder]=\"placeholder\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [tabIndex]=\"tabindex\"\n           (click)=\"selectInputContent($event)\"\n           (keypress)=\"filterAlphanumericalInput($event)\"\n           (keyup.enter)=\"onKeyupEnter.emit($event)\">\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- auto-complete -->\n  <mat-autocomplete-field *ngSwitchCase=\"'entity'\"\n                          [class]=\"classList\"\n                          [autofocus]=\"autofocus\"\n                          [placeholder]=\"placeholder\"\n                          [floatLabel]=\"floatLabel\"\n                          [formControl]=\"formControl\"\n                          [config]=\"definition.autocomplete\"\n                          [required]=\"required\"\n                          [displayWith]=\"getDisplayValueFn(definition)\">\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <ng-content select=\"[matSuffix]\"></ng-content>\n  </mat-autocomplete-field>\n\n  <!-- multi auto-complete -->\n  <mat-chips-field *ngSwitchCase=\"'entities'\"\n                    [class]=\"classList\"\n                    [placeholder]=\"placeholder\"\n                    [floatLabel]=\"floatLabel\"\n                    [formControl]=\"formControl\"\n                    [config]=\"definition.autocomplete\"\n                    [required]=\"required\"\n                    [displayWith]=\"getDisplayValueFn(definition)\">\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <ng-content select=\"[matSuffix]\"></ng-content>\n  </mat-chips-field>\n\n  <!-- other -->\n  <div *ngSwitchDefault>\n    <mat-error *ngIf=\"type\">Unknown type {{type}} for option {{definition.key}}. Please report this error.</mat-error>\n    <mat-error *ngIf=\"!type\">Error on option field. Please check console log for details.</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </div>\n\n</ng-container>\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -9730,10 +9844,6 @@ class EntityUtils {
         return isNotNil(obj.__typename) && (typeof obj.fromObject === 'function') && (typeof obj.asObject === 'function');
     }
     // Check that the object has a NOT nil attribute (ID by default)
-    static isNotEntity(obj) {
-        return isNil(obj.__typename) || (typeof obj.fromObject !== 'function') || (typeof obj.asObject !== 'function');
-    }
-    // Check that the object has a NOT nil attribute (ID by default)
     static isNotEmpty(obj, checkedAttribute) {
         return !!obj && obj[checkedAttribute] !== null && obj[checkedAttribute] !== undefined;
     }
@@ -9813,6 +9923,8 @@ class EntityUtils {
         (items || []).forEach(EntityUtils.cleanIdAndUpdateDate);
     }
     static sort(data, sortBy, sortDirection) {
+        if (!data || data.length <= 1 || !sortBy)
+            return data;
         return data.sort(this.sortComparator(sortBy, sortDirection));
     }
     static sortComparator(sortBy, sortDirection) {
@@ -11837,11 +11949,10 @@ class EntityStore {
     /**
      *
      * @param opts
-     *  opts.force : force all entities to be persist, and not only if dirty
+     *  opts.skipIfPristine = false persist all entities, even if not dirty
      */
-    persist(opts) {
+    persist(opts = { skipIfPristine: true }) {
         return __awaiter(this, void 0, void 0, function* () {
-            opts = Object.assign({ skipIfPristine: this.policy.skipNonLocalEntities }, opts);
             // Skip is not dirty
             if (opts.skipIfPristine && !this._dirty) {
                 console.debug(`[entity-storage] Persisting ${this.name} not need. Skip`);
@@ -12051,7 +12162,7 @@ class EntityStore {
         if (variables.size === 0)
             return { data: [], total };
         // Sort by
-        if (data.length && variables.sortBy) {
+        if (variables.sortBy) {
             EntityUtils.sort(data, variables.sortBy, variables.sortDirection);
         }
         // Slice in a page (using offset and size)
@@ -12124,6 +12235,33 @@ class EntitiesStorage extends StartableService {
     get dirty() {
         return this._dirty || Object.values(this._data).some(store => store.dirty);
     }
+    ngOnStart() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const now = Date.now();
+            console.info(`[entities-storage] Starting entity storage...`);
+            // Restore stores
+            yield this.restoreLocally();
+            // Start a save timer
+            this.registerSubscription(merge(this._$save, timer(this._saveTimerPeriod, this._saveTimerPeriod))
+                .pipe(
+            // Avoid to many call (e.g. when $save AND timer are triggered
+            throttleTime(this._saveTimerPeriod))
+                .subscribe(() => this.storeLocally({ skipIfPristine: true })));
+            // Save, when platform is in pause
+            this.registerSubscription(this.platform.pause.subscribe(() => __awaiter(this, void 0, void 0, function* () {
+                console.warn(`[entities-storage] Platform will pause: saving...`);
+                yield this.storeLocally({ skipIfPristine: true });
+                console.warn(`[entities-storage] Platform will pause: saving [OK]`);
+            })));
+            console.info(`[entities-storage] Starting [OK] in ${Date.now() - now}ms`);
+            return this._data;
+        });
+    }
+    ngOnStop() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.storeLocally({ skipIfPristine: true });
+        });
+    }
     watchAll(entityName, variables, opts) {
         // Make sure store is ready
         if (!this.started) {
@@ -12389,34 +12527,8 @@ class EntitiesStorage extends StartableService {
             this._$save.emit();
         });
     }
-    persist() {
-        if (this._dirty) {
-            return this.storeLocally();
-        }
-        return Promise.resolve();
-    }
-    ngOnStart() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const now = Date.now();
-            console.info(`[entities-storage] Starting entity storage...`);
-            // Restore sequences
-            yield this.restoreLocally();
-            // Start a save timer
-            this.registerSubscription(merge(this._$save, timer(this._saveTimerPeriod, this._saveTimerPeriod))
-                .pipe(
-            // Avoid to many call (e.g. when $save AND timer are triggered
-            throttleTime(this._saveTimerPeriod))
-                .subscribe(() => this.storeLocally()));
-            console.info(`[entities-storage] Starting [OK] in ${Date.now() - now}ms`);
-            return this._data;
-        });
-    }
-    ngOnStop() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.dirty) {
-                yield this.storeLocally();
-            }
-        });
+    persist(opts = { skipIfPristine: true }) {
+        return this.storeLocally(opts);
     }
     /* -- protected methods -- */
     getEntityStore(name, opts) {
@@ -12455,9 +12567,9 @@ class EntitiesStorage extends StartableService {
                 console.debug(`[entities-storage] Restoring entities [OK] ${entitiesCount} entities found in ${Date.now() - now}ms`);
         });
     }
-    storeLocally() {
+    storeLocally(opts = { skipIfPristine: true }) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this.dirty)
+            if (opts.skipIfPristine && !this.dirty)
                 return; // skip
             // Saving progress: report this save later
             if (this._saving) {
@@ -12481,11 +12593,11 @@ class EntitiesStorage extends StartableService {
                     console.warn(`[entities-storage] Persisting ${entityName}: store not found!`);
                     return;
                 }
-                // SKip store if not dirty
-                if (!entityStore.dirty)
-                    return Promise.resolve(); // Skip
+                // SKip store if pristine
+                if (opts.skipIfPristine && !entityStore.dirty)
+                    return Promise.resolve();
                 // Persist store
-                return (entityStore.dirty ? entityStore.persist() : Promise.resolve(entityStore.length))
+                return entityStore.persist(opts)
                     .then(count => {
                     // If no entity found, remove from the entity names array
                     if (!count) {
@@ -12734,9 +12846,6 @@ class ReferentialUtils {
         // A referential entity should always have a 'id' filled (can be negative is local and temporary)
         return EntityUtils.isNotEmpty(obj, 'id');
     }
-    static isNotEmptyReferential(obj) {
-        return EntityUtils.isNotEmpty(obj, 'id');
-    }
     static isEmpty(obj) {
         return EntityUtils.isEmpty(obj, 'id');
     }
@@ -14637,7 +14746,7 @@ class AccountService extends BaseGraphqlService {
         return this._$additionalFields.getValue();
     }
     get $additionalFields() {
-        return this._$additionalFields;
+        return this._$additionalFields.asObservable();
     }
     getAdditionalField(key) {
         return this._$additionalFields.getValue().find(f => f.key === key);
@@ -15684,6 +15793,196 @@ ConfigService.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [APP_CONFIG_OPTIONS,] }] }
 ];
 
+class UploadFile extends File {
+}
+class FileResponse {
+    constructor(init) {
+        this.type = 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';
+    }
+}
+function isProgressEvent(event) {
+    return event && (event.type === HttpEventType.UploadProgress
+        || event.type === HttpEventType.DownloadProgress);
+}
+function isResponseEvent(event) {
+    return event && event.type === HttpEventType.Response;
+}
+
+class UploadFilePopover {
+    constructor(popoverController, translate, cd) {
+        this.popoverController = popoverController;
+        this.translate = translate;
+        this.cd = cd;
+        this.uniqueFile = false;
+        this.instantUpload = false;
+        this.importing = false;
+    }
+    get files() {
+        return this.uploader.files;
+    }
+    get disabled() {
+        return this.importing || isEmptyArray(this.files);
+    }
+    get valid() {
+        return isNotEmptyArray(this.files);
+    }
+    onValidate(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event === null || event === void 0 ? void 0 : event.stopPropagation();
+            // Avoid multiple call
+            if (this.importing)
+                return;
+            console.debug('[upload-file-popover] Validate form: will upload all files...');
+            try {
+                this.importing = true;
+                this.resetError();
+                try {
+                    // Wait processing files finished
+                    yield this.uploader.waitIdle();
+                    // upload all files
+                    yield this.uploader.uploadFiles();
+                    const files = (this.uploader.processedFiles || [])
+                        .filter(file => !file.deleting); // Remove deleting file (deletion in progress)
+                    // Nothing to upload: close popover
+                    if (isEmptyArray(files))
+                        return this.cancel();
+                    // check errors
+                    const errors = files.map(file => file.error).filter(isNotNilOrBlank);
+                    // If error: stop
+                    if (errors.length) {
+                        errors.forEach((error) => console.error(error));
+                        throw { message: 'FILE.UPLOAD.ERROR' };
+                    }
+                    // return files
+                    yield this.popoverController.dismiss(files);
+                }
+                catch (err) {
+                    this.error = (err && err.message) || err;
+                }
+            }
+            finally {
+                this.importing = false;
+                this.cd.markForCheck();
+            }
+        });
+    }
+    cancel() {
+        return this.popoverController.dismiss();
+    }
+    resetError() {
+        if (this.error) {
+            this.error = null;
+            this.cd.markForCheck();
+        }
+    }
+}
+UploadFilePopover.decorators = [
+    { type: 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: ViewEncapsulation.None,
+                changeDetection: 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 = () => [
+    { type: PopoverController },
+    { type: TranslateService },
+    { type: ChangeDetectorRef }
+];
+UploadFilePopover.propDecorators = {
+    uploader: [{ type: ViewChild, args: ['uploader', { static: true },] }],
+    fileExtension: [{ type: Input }],
+    title: [{ type: Input }],
+    uniqueFile: [{ type: Input }],
+    instantUpload: [{ type: Input }],
+    uploadFn: [{ type: Input }],
+    deleteFn: [{ type: Input }],
+    maxParallelUpload: [{ type: Input }]
+};
+
+const MimeTypes = Object.freeze({
+    ANDROID_APK: 'application/vnd.android.package-archive'
+});
+class FilesUtils {
+    static showUploadPopover(popoverController, event, opts) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const modal = yield popoverController.create({
+                component: UploadFilePopover,
+                componentProps: opts,
+                backdropDismiss: false,
+                keyboardClose: false,
+                event,
+                translucent: true,
+                cssClass: 'popover-large',
+            });
+            yield modal.present();
+            const { data, role } = yield modal.onDidDismiss();
+            return {
+                role,
+                data: data ? data : undefined
+            };
+        });
+    }
+    static readAsText(file, encoding) {
+        const $progress = new Subject();
+        const reader = new FileReader();
+        encoding = (encoding || 'UTF-8').toLowerCase();
+        // Listen progress
+        reader.onprogress = (e) => {
+            const total = e.total || 1;
+            const loaded = e.total || 0;
+            if (loaded < total)
+                $progress.next({ type: HttpEventType.UploadProgress, loaded, total });
+        };
+        // Listen end
+        reader.onloadend = (e) => {
+            const body = reader.result;
+            if (typeof body === 'string') {
+                $progress.next(new FileResponse({ body }));
+                $progress.complete();
+            }
+            else {
+                console.error(`Cannot read file '${file.name}' as text`);
+                $progress.error(`Cannot read file as text`);
+            }
+        };
+        // Listen error
+        reader.onerror = (event) => {
+            console.error('[files] Error while reading file:', event);
+            $progress.error(event);
+        };
+        // Start reading the file
+        reader.readAsText(file, encoding);
+        return $progress.asObservable();
+    }
+}
+class UriUtils {
+    /**
+     * Extract the filename, from an uri (using the last slash)
+     * @param uri
+     */
+    static getFilename(uri) {
+        if (!uri)
+            return uri;
+        let filename = uri.trim();
+        // Get last part (or all string, if no '/')
+        const lastSlashIndex = filename.lastIndexOf('/');
+        if (lastSlashIndex !== -1 && lastSlashIndex !== uri.length - 1) {
+            filename = filename.substring(lastSlashIndex + 1);
+        }
+        // Remove query params
+        const queryParamIndex = filename.indexOf('?');
+        if (queryParamIndex !== -1) {
+            filename = filename.substring(0, queryParamIndex);
+        }
+        return filename;
+    }
+}
+
 const moment$4 = momentImported;
 const AndroidOsEnvironment = Object.freeze({
     DIRECTORY_DOWNLOADS: 'Download',
@@ -15720,7 +16019,7 @@ class PlatformService extends StartableService {
         switch (platformName) {
             case 'mobile':
             case 'mobileweb':
-                // Exclude Windows touch screens - see SUMARIS issue #323
+                // Exclude Windows touch screens - see sumaris-app issues #323 and #346
                 return this.platform.is(platformName) && !isWindows(window);
             default:
                 return this.platform.is(platformName);
@@ -15774,6 +16073,7 @@ class PlatformService extends StartableService {
                 this._cordova = this.is('cordova');
                 this._android = this.is('android');
                 this._ios = this.is('ios');
+                this.configureClassList(this._mobile);
                 this.configureCordovaPlugins();
                 // Force some settings
                 this.settings.mobile = this._mobile;
@@ -15808,7 +16108,7 @@ class PlatformService extends StartableService {
                     this.accountService.tokenType = tokenType;
                 });
                 // Hide the splashscreen (if mobile) - after 1s - and play start sound
-                if (this.mobile) {
+                if (this._mobile) {
                     setTimeout(() => {
                         var _a;
                         (_a = this.splashScreen) === null || _a === void 0 ? void 0 : _a.hide();
@@ -15844,34 +16144,48 @@ class PlatformService extends StartableService {
         return this._downloadingJobs.get(uri);
     }
     download(request) {
+        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
-            let location$ = this._downloadingJobs.get(request.uri);
-            if (location$)
-                return location$;
-            request = Object.assign(Object.assign({ visibleInDownloadsUi: true, notificationVisibility: 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));
+            let job$ = this._downloadingJobs.get(request.uri);
+            if (job$)
+                return job$;
+            // Compute subPath (final filename)
+            let 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';
+            }
+            const downloadRequest = Object.assign(Object.assign({ visibleInDownloadsUi: true, notificationVisibility: NotificationVisibility.VisibleNotifyCompleted }, request), { filename: undefined, destinationInExternalPublicDir: !request.destinationInExternalFilesDir
+                    ? Object.assign(Object.assign({ dirType: AndroidOsEnvironment.DIRECTORY_DOWNLOADS }, request.destinationInExternalPublicDir), { subPath }) : undefined, destinationInExternalFilesDir: request.destinationInExternalFilesDir
+                    ? Object.assign(Object.assign({ dirType: AndroidOsEnvironment.DIRECTORY_DOWNLOADS }, request.destinationInExternalFilesDir), { subPath }) : undefined });
             // Start download
-            location$ = from(this.downloader.download(request));
+            console.debug('[platform] Downloading, using request: ' + JSON.stringify(downloadRequest));
+            job$ = from(this.downloader.download(downloadRequest));
             // Remember this request uri
-            this._downloadingJobs.set(request.uri, location$);
-            return location$
+            this._downloadingJobs.set(downloadRequest.uri, job$);
+            return job$
                 .pipe(tap(location => {
                 console.info('[platform] File successfully downloaded at:' + location);
-                // Forget the request
-                this._downloadingJobs.delete(request.uri);
+                // Forget job
+                this._downloadingJobs.delete(downloadRequest.uri);
                 return location;
             }), catchError(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.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.destinationInExternalPublicDir) === null || _a === void 0 ? void 0 : _a.dirType) === AndroidOsEnvironment.DIRECTORY_DOWNLOADS) {
+                    downloadRequest.destinationInExternalPublicDir.dirType = AndroidOsEnvironment.DIRECTORY_DOWNLOADS_OLD;
+                    return this.download(downloadRequest);
                 }
                 throw err;
             }));
@@ -15896,6 +16210,17 @@ class PlatformService extends StartableService {
         //}
     }
     /* -- protected methods -- */
+    configureClassList(mobile, win = window) {
+        var _a, _b;
+        if (mobile)
+            return; // Nothing to do
+        // Workaround, for MS Windows touch screen (detected as mobile, but forced as desktop)
+        if (!mobile && (((_a = win.document.documentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('plt-mobile')) || ((_b = win.document.documentElement.classList) === null || _b === void 0 ? void 0 : _b.contains('plt-mobileweb')))) {
+            console.warn('[platform] Force class list to: <html class="plt-desktop">. Workaround for Windows touch screen.');
+            win.document.documentElement.classList.remove('plt-mobile', 'plt-mobileweb');
+            win.document.documentElement.classList.add('plt-desktop');
+        }
+    }
     configureCordovaPlugins() {
         console.info('[platform] Configuring Cordova plugins...');
         if (this.statusBar) {
@@ -16223,24 +16548,6 @@ MatStepperI18n.ctorParameters = () => [
     { type: TranslateService }
 ];
 
-class UploadFile extends File {
-}
-class FileResponse {
-    constructor(init) {
-        this.type = 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';
-    }
-}
-function isProgressEvent(event) {
-    return event && (event.type === HttpEventType.UploadProgress
-        || event.type === HttpEventType.DownloadProgress);
-}
-function isResponseEvent(event) {
-    return event && event.type === HttpEventType.Response;
-}
-
 class UploadFileComponent {
     constructor(cd, translate) {
         this.cd = cd;
@@ -16435,99 +16742,6 @@ UploadFileComponent.propDecorators = {
     maxParallelUpload: [{ type: Input }]
 };
 
-class UploadFilePopover {
-    constructor(popoverController, translate, cd) {
-        this.popoverController = popoverController;
-        this.translate = translate;
-        this.cd = cd;
-        this.uniqueFile = false;
-        this.instantUpload = false;
-        this.importing = false;
-    }
-    get files() {
-        return this.uploader.files;
-    }
-    get disabled() {
-        return this.importing || isEmptyArray(this.files);
-    }
-    get valid() {
-        return isNotEmptyArray(this.files);
-    }
-    onValidate(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            event === null || event === void 0 ? void 0 : event.stopPropagation();
-            // Avoid multiple call
-            if (this.importing)
-                return;
-            console.debug('[upload-file-popover] Validate form: will upload all files...');
-            try {
-                this.importing = true;
-                this.resetError();
-                try {
-                    // Wait processing files finished
-                    yield this.uploader.waitIdle();
-                    // upload all files
-                    yield this.uploader.uploadFiles();
-                    const files = (this.uploader.processedFiles || [])
-                        .filter(file => !file.deleting); // Remove deleting file (deletion in progress)
-                    // Nothing to upload: close popover
-                    if (isEmptyArray(files))
-                        return this.cancel();
-                    // check errors
-                    const errors = files.map(file => file.error).filter(isNotNilOrBlank);
-                    // If error: stop
-                    if (errors.length) {
-                        errors.forEach((error) => console.error(error));
-                        throw { message: 'FILE.UPLOAD.ERROR' };
-                    }
-                    // return files
-                    yield this.popoverController.dismiss(files);
-                }
-                catch (err) {
-                    this.error = (err && err.message) || err;
-                }
-            }
-            finally {
-                this.importing = false;
-                this.cd.markForCheck();
-            }
-        });
-    }
-    cancel() {
-        return this.popoverController.dismiss();
-    }
-    resetError() {
-        if (this.error) {
-            this.error = null;
-            this.cd.markForCheck();
-        }
-    }
-}
-UploadFilePopover.decorators = [
-    { type: 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: ViewEncapsulation.None,
-                changeDetection: 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 = () => [
-    { type: PopoverController },
-    { type: TranslateService },
-    { type: ChangeDetectorRef }
-];
-UploadFilePopover.propDecorators = {
-    uploader: [{ type: ViewChild, args: ['uploader', { static: true },] }],
-    fileExtension: [{ type: Input }],
-    title: [{ type: Input }],
-    uniqueFile: [{ type: Input }],
-    instantUpload: [{ type: Input }],
-    uploadFn: [{ type: Input }],
-    deleteFn: [{ type: Input }],
-    maxParallelUpload: [{ type: Input }]
-};
-
 const APP_TESTING_PAGES = new InjectionToken('testingPages');
 class SharedTestsPage {
     constructor(route, router, translate, pages) {
@@ -16910,8 +17124,8 @@ class ComponentDirtyGuard {
     }
     canDeactivate(component, currentRoute, currentState, nextState) {
         return __awaiter(this, void 0, void 0, function* () {
-            const dirty = component.dirty;
-            const valid = component.valid;
+            const dirty = component === null || component === void 0 ? void 0 : component.dirty;
+            const valid = component === null || component === void 0 ? void 0 : component.valid;
             let can = {
                 confirmed: !dirty,
                 save: false,
@@ -17791,6 +18005,7 @@ class JobUtils {
         return progression;
     }
     static fetchAllPages(loadPageFn, opts) {
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
             const maxProgression = toNumber(opts === null || opts === void 0 ? void 0 : opts.maxProgression, 100);
             const progression = opts === null || opts === void 0 ? void 0 : opts.progression;
@@ -17823,7 +18038,7 @@ class JobUtils {
                         progressionStep = maxProgression / pageCount;
                         // DEBUG
                         if (opts && opts.logPrefix)
-                            console.debug(`${opts.logPrefix} {pageCount: ${pageCount}, progression: ${progression.value}, pageProgressionStep: ${progressionStep}}`);
+                            console.debug(`${opts.logPrefix} {pageCount: ${pageCount}, progress: ${(_a = progression.value) === null || _a === void 0 ? void 0 : _a.toFixed(2)}, pageProgressStep: ${progressionStep === null || progressionStep === void 0 ? void 0 : progressionStep.toFixed(1)}}`);
                     }
                 }
                 // Increment progression on each iteration (if possible)
@@ -17850,7 +18065,7 @@ class JobUtils {
             }
             // DEBUG
             if (opts && opts.logPrefix)
-                console.debug(`${opts.logPrefix} All pages fetched - {progression: ${progression.value}, lastProgressionStep: ${progressionStep}`);
+                console.debug(`${opts.logPrefix} All pages fetched - {progress: ${(_b = progression.value) === null || _b === void 0 ? void 0 : _b.toFixed(2)}, lastProgressStep: ${progressionStep === null || progressionStep === void 0 ? void 0 : progressionStep.toFixed(1)}`);
             // Final increment
             if (progression && progressionStep > 0) {
                 progression.next(progression.value + progressionStep);
@@ -17863,60 +18078,6 @@ class JobUtils {
     }
 }
 
-class FilesUtils {
-    static showUploadPopover(popoverController, event, opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const modal = yield popoverController.create({
-                component: UploadFilePopover,
-                componentProps: opts,
-                backdropDismiss: false,
-                keyboardClose: false,
-                event,
-                translucent: true,
-                cssClass: 'popover-large',
-            });
-            yield modal.present();
-            const { data, role } = yield modal.onDidDismiss();
-            return {
-                role,
-                data: data ? data : undefined
-            };
-        });
-    }
-    static readAsText(file, encoding) {
-        const $progress = new Subject();
-        const reader = new FileReader();
-        encoding = (encoding || 'UTF-8').toLowerCase();
-        // Listen progress
-        reader.onprogress = (e) => {
-            const total = e.total || 1;
-            const loaded = e.total || 0;
-            if (loaded < total)
-                $progress.next({ type: HttpEventType.UploadProgress, loaded, total });
-        };
-        // Listen end
-        reader.onloadend = (e) => {
-            const body = reader.result;
-            if (typeof body === 'string') {
-                $progress.next(new FileResponse({ body }));
-                $progress.complete();
-            }
-            else {
-                console.error(`Cannot read file '${file.name}' as text`);
-                $progress.error(`Cannot read file as text`);
-            }
-        };
-        // Listen error
-        reader.onerror = (event) => {
-            console.error('[files] Error while reading file:', event);
-            $progress.error(event);
-        };
-        // Start reading the file
-        reader.readAsText(file, encoding);
-        return $progress.asObservable();
-    }
-}
-
 /**
  * Define here theme colors
  */
@@ -18723,7 +18884,7 @@ HomePage.decorators = [
     { type: Component, args: [{
                 moduleId: module.id.toString(),
                 selector: 'app-page-home',
-                template: "<app-toolbar [canGoBack]=\"false\"\n             visible-xs visible-sm visible-mobile>\n\n  <!-- change locale button -->\n  <ion-button slot=\"end\" *ngIf=\"currentLocaleCode; let code\"\n              [matMenuTriggerFor]=\"localeMenu\">\n    <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n    <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n  </ion-button>\n</app-toolbar>\n\n<!-- change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <button *ngFor=\"let item of locales\"\n          mat-menu-item\n          (click)=\"changeLanguage(item.key)\">\n    <ion-label>{{item.value}}</ion-label>\n  </button>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" no-padding-xs>\n\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!loading\">\n    <div class=\"spinner\" *ngIf=\"loading && showSpinner\">\n      <p>Loading...</p>\n      <div class=\"sk-cube1 sk-cube\"></div>\n      <div class=\"sk-cube2 sk-cube\"></div>\n      <div class=\"sk-cube4 sk-cube\"></div>\n      <div class=\"sk-cube3 sk-cube\"></div>\n    </div>\n  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  <div hidden-xs hidden-sm hidden-mobile>\n    <ion-toolbar translucent>\n      <ion-buttons slot=\"start\">\n        <ion-menu-toggle>\n          <ion-button color=\"light\" fill=\"clear\">\n            <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n          </ion-button>\n        </ion-menu-toggle>\n      </ion-buttons>\n\n      <ion-buttons slot=\"end\">\n        <!-- change locale button -->\n        <ion-button color=\"secondary\" fill=\"solid\"\n                    *ngIf=\"currentLocaleCode; let code\"\n                    [matMenuTriggerFor]=\"localeMenu\">\n          <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n          <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n        </ion-button>\n      </ion-buttons>\n    </ion-toolbar>\n  </div>\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\"\n                           showInstallButton=\"true\">\n  </app-install-upgrade-card>\n\n  <!-- Welcome card -->\n  <ion-card *ngIf=\"!loading\"\n            class=\"main welcome ion-padding ion-text-center ion-align-self-center\"\n            @fadeInAnimation>\n    <ion-card-header>\n      <ion-card-title class=\"ion-text-center\">\n        <span *ngIf=\"isWeb\" [innerHTML]=\"'HOME.WELCOME_WEB'|translate: {appName: appName}\"></span>\n        <span *ngIf=\"!isWeb\" [innerHTML]=\"'HOME.WELCOME_APP'|translate: {appName: appName}\"></span>\n      </ion-card-title>\n      <ion-card-subtitle [innerHTML]=\"description\">\n      </ion-card-subtitle>\n    </ion-card-header>\n    <ion-card-content class=\"ion-no-padding\">\n      <ion-text color=\"primary\">\n        <img class=\"logo\" *ngIf=\"logo\" src=\"{{ logo }}\">\n      </ion-text>\n      <!-- register help text -->\n      <ion-text *ngIf=\"!isLogin && canRegister\">\n        <br/>\n        <span translate>HOME.REGISTER_HELP</span>\n      </ion-text>\n    </ion-card-content>\n\n    <ion-footer class=\"ion-padding-top\">\n\n      <!-- If NOT login -->\n      <ng-container *ngIf=\"!isLogin; else loginButtons;\">\n\n        <ion-button *ngIf=\"canRegister\" expand=\"block\" color=\"tertiary\" (click)=\"register()\">\n          <span translate>HOME.BTN_REGISTER</span>\n        </ion-button>\n        <ion-button expand=\"block\" color=\"light\" [routerLink]=\"['/']\" (click)=\"login()\">\n          <span translate>AUTH.BTN_LOGIN</span>\n        </ion-button>\n\n      </ng-container>\n\n      <!-- If user login -->\n      <ng-template #loginButtons>\n\n        <!-- Feature buttons -->\n        <ng-container *ngIf=\"$filteredButtons | async as buttons\">\n          <ng-container *ngFor=\"let item of buttons\">\n            <ion-button *ngIf=\"item.path\"\n                        expand=\"block\" color=\"tertiary\"\n                        [class]=\"item.cssClass\"\n                        [routerLink]=\"item.path\"\n                        routerDirection=\"root\">\n              <ion-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n              <mat-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n              <ion-text>{{'HOME.BTN_DATA_ENTRY'|translate: {name: (item.title | translate) } }}</ion-text>\n            </ion-button>\n\n            <!-- divider -->\n            <div *ngIf=\"!item.path && !item.action\" [class]=\"item.cssClass\">\n              <ion-label translate>{{item.title}}&nbsp;</ion-label>\n            </div>\n          </ng-container>\n\n          <!--<p *ngIf=\"buttons.length\" class=\"visible-mobile\">&nbsp;</p>-->\n        </ng-container>\n\n        <ion-button *ngIf=\"showAccountButton\" expand=\"block\" color=\"secondary\" [routerLink]=\"['/account']\">\n          <ion-icon slot=\"start\" class=\"ion-float-start\" name=\"person-circle\"></ion-icon>\n          <ion-text translate>HOME.BTN_MY_ACCOUNT</ion-text>\n        </ion-button>\n\n        <p hidden-xs hidden-sm hidden-mobile>\n          <ion-text [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: {displayName: accountName }\"></ion-text>\n          <br/>\n          <ion-text>\n            <a href=\"#\" (click)=\"logout($event)\">\n              <span translate>HOME.BTN_DISCONNECT</span>\n            </a>\n          </ion-text>\n        </p>\n\n\n      </ng-template>\n\n    </ion-footer>\n  </ion-card>\n\n  <!-- Page history -->\n  <ion-grid *ngIf=\"!loading && isLogin && pageHistory.length; else bottomBanner\"\n            class=\"history-container ion-align-self-center\">\n    <ion-row>\n      <ion-col size=\"12\" size-xl=\"\" *ngFor=\"let page of pageHistory; trackBy: getPagePath\"\n               class=\"ion-text-center\">\n        <ion-card class=\"ion-align-self-start ion-text-start\" @fadeInAnimation>\n          <ion-card-header class=\"ion-no-padding\">\n            <!-- top bar -->\n            <ion-card-subtitle>\n              <button type=\"button\" tabindex=\"-1\"\n                      (click)=\"settings.removePageHistory(page.path)\"\n                      mat-icon-button class=\"ion-float-start ion-no-margin\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <ion-label [innerHTML]=\"page.subtitle|translate\"></ion-label>\n              <ion-text class=\"ion-float-end\" [title]=\"page.time|dateFormat:{time: true}\">\n                <small><ion-icon name=\"time-outline\"></ion-icon>&nbsp;{{ page.time|dateFromNow }}</small>&nbsp;\n              </ion-text>\n            </ion-card-subtitle>\n\n            <!-- main page -->\n            <ion-card-title class=\"ion-no-margin ion-no-padding\">\n              <ion-item  detail=\"true\"\n                         tappable class=\"text-1x\"\n                         [routerLink]=\"page.path\"\n                         routerDirection=\"root\" lines=\"none\">\n                <!-- page icon-->\n                <ion-icon *ngIf=\"page.icon\"    slot=\"start\" [name]=\"page.icon\"></ion-icon>\n                <mat-icon *ngIf=\"page.matIcon\" slot=\"start\">{{page.matIcon}}</mat-icon>\n\n                <ion-label color=\"primary\" [innerHTML]=\"page.title\"></ion-label>\n              </ion-item>\n            </ion-card-title>\n          </ion-card-header>\n\n          <!-- children pages -->\n          <ion-card-content class=\"ion-no-padding ion-padding-start\" *ngIf=\"page.children?.length\">\n            <ion-list class=\"ion-no-padding\">\n              <ion-item  detail=\"true\"\n                         *ngFor=\"let childPage of page.children\"\n                         tappable class=\"text-1x\"\n                        [routerLink]=\"childPage.path\"\n                        routerDirection=\"root\">\n                <!-- page icon-->\n                <ion-icon *ngIf=\"childPage.icon\"    slot=\"start\" color=\"dark\" [name]=\"childPage.icon\"></ion-icon>\n                <mat-icon *ngIf=\"childPage.matIcon\" slot=\"start\" color=\"dark\">{{childPage.matIcon}}</mat-icon>\n\n                <ion-label color=\"dark\" [innerHTML]=\"childPage.title\"></ion-label>\n              </ion-item>\n            </ion-list>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Display configured Departments logos -->\n  <ng-template #bottomBanner>\n    <div class=\"bottom-banner ion-text-center ion-padding\" *ngIf=\"!loadingBanner\" @fadeInAnimation>\n      <a href=\"{{ item.siteUrl }}\" *ngFor=\"let item of $partners | async \">\n        <img class=\"logo\" src=\"{{ item.logo }}\" alt=\"{{item.label}}\"  [title]=\"item.label\" />\n      </a>\n    </div>\n  </ng-template>\n\n\n</ion-content>\n",
+                template: "<app-toolbar [canGoBack]=\"false\"\n             visible-xs visible-sm visible-mobile>\n\n  <!-- change locale button -->\n  <ion-button slot=\"end\" *ngIf=\"currentLocaleCode; let code\"\n              [matMenuTriggerFor]=\"localeMenu\">\n    <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n    <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n  </ion-button>\n</app-toolbar>\n\n<!-- change locale menu -->\n<mat-menu #localeMenu=\"matMenu\">\n  <button *ngFor=\"let item of locales\"\n          mat-menu-item\n          (click)=\"changeLanguage(item.key)\">\n    <ion-label>{{item.value}}</ion-label>\n  </button>\n</mat-menu>\n\n<ion-content [ngStyle]=\"contentStyle\" no-padding-xs>\n\n  <!-- loading spinner -->\n  <div class=\"loading-page\" [class.cdk-visually-hidden]=\"!loading\">\n    <div class=\"spinner\" *ngIf=\"loading && showSpinner\">\n      <p [innerHTML]=\"'COMMON.LOADING_DOTS'|translate\"></p>\n      <div class=\"sk-cube1 sk-cube\"></div>\n      <div class=\"sk-cube2 sk-cube\"></div>\n      <div class=\"sk-cube4 sk-cube\"></div>\n      <div class=\"sk-cube3 sk-cube\"></div>\n    </div>\n  </div>\n\n  <!-- Desktop: translucent top toolbar -->\n  <div hidden-xs hidden-sm hidden-mobile>\n    <ion-toolbar translucent>\n      <ion-buttons slot=\"start\">\n        <ion-menu-toggle>\n          <ion-button color=\"light\" fill=\"clear\">\n            <ion-icon slot=\"icon-only\" name=\"menu\"></ion-icon>\n          </ion-button>\n        </ion-menu-toggle>\n      </ion-buttons>\n\n      <ion-buttons slot=\"end\">\n        <!-- change locale button -->\n        <ion-button color=\"secondary\" fill=\"solid\"\n                    *ngIf=\"currentLocaleCode; let code\"\n                    [matMenuTriggerFor]=\"localeMenu\">\n          <ion-label class=\"ion-text-uppercase\">&nbsp;{{ code }}</ion-label>\n          <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n        </ion-button>\n      </ion-buttons>\n    </ion-toolbar>\n  </div>\n\n  <!-- Install (and upgrade) card -->\n  <app-install-upgrade-card [isLogin]=\"isLogin\"\n                           showInstallButton=\"true\">\n  </app-install-upgrade-card>\n\n  <!-- Welcome card -->\n  <ion-card *ngIf=\"!loading\"\n            class=\"main welcome ion-padding ion-text-center ion-align-self-center\"\n            @fadeInAnimation>\n    <ion-card-header>\n      <ion-card-title class=\"ion-text-center\">\n        <span *ngIf=\"isWeb\" [innerHTML]=\"'HOME.WELCOME_WEB'|translate: {appName: appName}\"></span>\n        <span *ngIf=\"!isWeb\" [innerHTML]=\"'HOME.WELCOME_APP'|translate: {appName: appName}\"></span>\n      </ion-card-title>\n      <ion-card-subtitle [innerHTML]=\"description\">\n      </ion-card-subtitle>\n    </ion-card-header>\n    <ion-card-content class=\"ion-no-padding\">\n      <ion-text color=\"primary\">\n        <img class=\"logo\" *ngIf=\"logo\" src=\"{{ logo }}\">\n      </ion-text>\n      <!-- register help text -->\n      <ion-text *ngIf=\"!isLogin && canRegister\">\n        <br/>\n        <span translate>HOME.REGISTER_HELP</span>\n      </ion-text>\n    </ion-card-content>\n\n    <ion-footer class=\"ion-padding-top\">\n\n      <!-- If NOT login -->\n      <ng-container *ngIf=\"!isLogin; else loginButtons;\">\n\n        <ion-button *ngIf=\"canRegister\" expand=\"block\" color=\"tertiary\" (click)=\"register()\">\n          <span translate>HOME.BTN_REGISTER</span>\n        </ion-button>\n        <ion-button expand=\"block\" color=\"light\" [routerLink]=\"['/']\" (click)=\"login()\">\n          <span translate>AUTH.BTN_LOGIN</span>\n        </ion-button>\n\n      </ng-container>\n\n      <!-- If user login -->\n      <ng-template #loginButtons>\n\n        <!-- Feature buttons -->\n        <ng-container *ngIf=\"$filteredButtons | async as buttons\">\n          <ng-container *ngFor=\"let item of buttons\">\n            <ion-button *ngIf=\"item.path\"\n                        expand=\"block\" color=\"tertiary\"\n                        [class]=\"item.cssClass\"\n                        [routerLink]=\"item.path\"\n                        routerDirection=\"root\">\n              <ion-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n              <mat-icon slot=\"start\" class=\"ion-float-start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n              <ion-text>{{'HOME.BTN_DATA_ENTRY'|translate: {name: (item.title | translate) } }}</ion-text>\n            </ion-button>\n\n            <!-- divider -->\n            <div *ngIf=\"!item.path && !item.action\" [class]=\"item.cssClass\">\n              <ion-label translate>{{item.title}}&nbsp;</ion-label>\n            </div>\n          </ng-container>\n\n          <!--<p *ngIf=\"buttons.length\" class=\"visible-mobile\">&nbsp;</p>-->\n        </ng-container>\n\n        <ion-button *ngIf=\"showAccountButton\" expand=\"block\" color=\"secondary\" [routerLink]=\"['/account']\">\n          <ion-icon slot=\"start\" class=\"ion-float-start\" name=\"person-circle\"></ion-icon>\n          <ion-text translate>HOME.BTN_MY_ACCOUNT</ion-text>\n        </ion-button>\n\n        <p hidden-xs hidden-sm hidden-mobile>\n          <ion-text [innerHTML]=\"'HOME.NOT_THIS_ACCOUNT_QUESTION' | translate: {displayName: accountName }\"></ion-text>\n          <br/>\n          <ion-text>\n            <a href=\"#\" (click)=\"logout($event)\">\n              <span translate>HOME.BTN_DISCONNECT</span>\n            </a>\n          </ion-text>\n        </p>\n\n\n      </ng-template>\n\n    </ion-footer>\n  </ion-card>\n\n  <!-- Page history -->\n  <ion-grid *ngIf=\"!loading && isLogin && pageHistory.length; else bottomBanner\"\n            class=\"history-container ion-align-self-center\">\n    <ion-row>\n      <ion-col size=\"12\" size-xl=\"\" *ngFor=\"let page of pageHistory; trackBy: getPagePath\"\n               class=\"ion-text-center\">\n        <ion-card class=\"ion-align-self-start ion-text-start\" @fadeInAnimation>\n          <ion-card-header class=\"ion-no-padding\">\n            <!-- top bar -->\n            <ion-card-subtitle>\n              <button type=\"button\" tabindex=\"-1\"\n                      (click)=\"settings.removePageHistory(page.path)\"\n                      mat-icon-button class=\"ion-float-start ion-no-margin\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <ion-label [innerHTML]=\"page.subtitle|translate\"></ion-label>\n              <ion-text class=\"ion-float-end\" [title]=\"page.time|dateFormat:{time: true}\">\n                <small><ion-icon name=\"time-outline\"></ion-icon>&nbsp;{{ page.time|dateFromNow }}</small>&nbsp;\n              </ion-text>\n            </ion-card-subtitle>\n\n            <!-- main page -->\n            <ion-card-title class=\"ion-no-margin ion-no-padding\">\n              <ion-item  detail=\"true\"\n                         tappable class=\"text-1x\"\n                         [routerLink]=\"page.path\"\n                         routerDirection=\"root\" lines=\"none\">\n                <!-- page icon-->\n                <ion-icon *ngIf=\"page.icon\"    slot=\"start\" [name]=\"page.icon\"></ion-icon>\n                <mat-icon *ngIf=\"page.matIcon\" slot=\"start\">{{page.matIcon}}</mat-icon>\n\n                <ion-label color=\"primary\" [innerHTML]=\"page.title\"></ion-label>\n              </ion-item>\n            </ion-card-title>\n          </ion-card-header>\n\n          <!-- children pages -->\n          <ion-card-content class=\"ion-no-padding ion-padding-start\" *ngIf=\"page.children?.length\">\n            <ion-list class=\"ion-no-padding\">\n              <ion-item  detail=\"true\"\n                         *ngFor=\"let childPage of page.children\"\n                         tappable class=\"text-1x\"\n                        [routerLink]=\"childPage.path\"\n                        routerDirection=\"root\">\n                <!-- page icon-->\n                <ion-icon *ngIf=\"childPage.icon\"    slot=\"start\" color=\"dark\" [name]=\"childPage.icon\"></ion-icon>\n                <mat-icon *ngIf=\"childPage.matIcon\" slot=\"start\" color=\"dark\">{{childPage.matIcon}}</mat-icon>\n\n                <ion-label color=\"dark\" [innerHTML]=\"childPage.title\"></ion-label>\n              </ion-item>\n            </ion-list>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Display configured Departments logos -->\n  <ng-template #bottomBanner>\n    <div class=\"bottom-banner ion-text-center ion-padding\" *ngIf=\"!loadingBanner\" @fadeInAnimation>\n      <a href=\"{{ item.siteUrl }}\" *ngFor=\"let item of $partners | async \">\n        <img class=\"logo\" src=\"{{ item.logo }}\" alt=\"{{item.label}}\"  [title]=\"item.label\" />\n      </a>\n    </div>\n  </ng-template>\n\n\n</ion-content>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 animations: [fadeInAnimation, slideUpDownAnimation],
                 styles: ["h1,h2,h3,h4,h5{white-space:normal}.center,ion-content ion-card.welcome img{text-align:center;display:inline-block}ion-content{--background:transparent;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;display:inline-block;padding:15px}ion-content,ion-content .loading-page{background-color:var(--ion-color-primary)}ion-content .loading-page{display:block;height:100%;width:100%;position:absolute;z-index:5;transition:background .5s linear;-webkit-transition:background 1.5s linear}ion-content .loading-page.hidden{background-color:rgba(var(--ion-color-primary),0)}ion-content ion-card{z-index:9}ion-content ion-card ion-card-header{display:block}ion-content ion-card ion-card-header ion-card-subtitle,ion-content ion-card ion-card-header ion-card-title{display:block;width:100%}ion-content ion-card.main{min-width:240px;max-width:400px;margin-left:auto;margin-right:auto}ion-content ion-card.welcome{background-color:hsla(0,0%,100%,.7)}ion-content ion-card.welcome button{margin-top:16px}ion-content ion-card.welcome img{max-width:250px}ion-content .history-container{margin-left:auto;margin-right:auto}ion-content .history-container ion-card{display:inline-block;box-sizing:border-box;z-index:8;min-width:240px;max-width:400px;width:100%;margin-left:auto;margin-right:auto;background-color:hsla(0,0%,100%,.7)}ion-content .history-container ion-card ion-card-header ion-card-subtitle{height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle button[float-start]{z-index:99;margin:0}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label{line-height:40px}ion-content .history-container ion-card ion-card-header ion-card-subtitle ion-label[float-end]{padding-right:16px;font-weight:400}ion-content .history-container ion-card ion-card-header ion-card-title ion-item{--ion-item-background:$transparent;--ion-item-icon-color:var(--ion-color-primary);--ion-item-text-color:var(--ion-color-primary)}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-header ion-card-title ion-item mat-icon[slot=start]{margin-right:unset;-webkit-margin-end:16px!important;margin-inline-end:16px!important;color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-label,ion-content .history-container ion-card ion-card-header ion-card-title ion-item ion-text{color:var(--ion-item-text-color)!important;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}ion-content .history-container ion-card ion-card-content ion-list{--ion-item-background:var(--ion-color-transparent)}ion-content .history-container ion-card ion-card-content ion-list ion-item{--ion-item-icon-color:var(--ion-color-dark);--ion-item-text-color:var(--ion-color-dark)}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-icon[slot=start],ion-content .history-container ion-card ion-card-content ion-list ion-item mat-icon[slot=start]{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor;margin-right:unset;-webkit-margin-end:16px!important;margin-inline-end:16px!important}ion-content .history-container ion-card ion-card-content ion-list ion-item ion-label,ion-content .history-container ion-card ion-card-content ion-list ion-item ion-text{color:var(--ion-item-text-color)!important}ion-content .bottom-banner{background-color:hsla(0,0%,100%,.7);min-width:240px;z-index:0;position:absolute;left:16px;right:16px;bottom:16px}ion-content .bottom-banner img.logo{max-height:50px;margin-left:8px}ion-content ion-text{text-align:center}@media screen and (max-width:575px){ion-content ion-card{min-width:160px;width:calc(100% - 20px);max-width:100%;margin-left:10px;margin-right:10px}ion-content ion-card h1{margin-top:0;font-size:20px}ion-content ion-card ion-card-content ion-button{margin-top:8px}ion-content .bottom-banner{display:block;position:unset}ion-content .bottom-banner img.logo{max-height:30px}}@media screen and (max-width:767px) and (min-width:576px){ion-content{min-height:555px}ion-content .bottom-banner img.logo{max-height:40px}}@media screen and (min-width:768px){ion-content{min-height:calc(100% - 100px)}}"]
@@ -18970,8 +19131,9 @@ class AccountPage extends AppForm {
             this.setValue(this.accountService.account);
             this.markAsPristine();
         }));
-        this.registerSubscription(this.accountService.$additionalFields.subscribe((additionalFields) => {
-            this.additionalFields = additionalFields.slice();
+        this.registerSubscription(this.accountService.$additionalFields
+            .subscribe((additionalFields) => {
+            this.additionalFields = additionalFields.slice(); // Copy
             if (accountService.isLogin()) {
                 this.onLogin(this.accountService.account);
             }
@@ -19105,9 +19267,21 @@ class AccountPage extends AppForm {
         this.form.controls.pubkey.disable();
         // Always disable some additional fields
         this.additionalFields
-            .filter(field => field.extra && field.extra.account && field.extra.account.disabled || false)
             .forEach(field => {
-            this.form.controls[field.key].disable();
+            var _a, _b;
+            const control = this.form.controls[field.key];
+            if (!control)
+                return; // Skip
+            const disabled = ((_a = field.extra) === null || _a === void 0 ? void 0 : _a.account) && field.extra.account.disabled || false;
+            if (disabled && control.enabled) {
+                control.disable();
+            }
+            const required = ((_b = field.extra) === null || _b === void 0 ? void 0 : _b.account) && field.extra.account.required || false;
+            if (!field.required && required) {
+                control.setValidators(control.validator
+                    ? Validators.compose([control.validator, Validators.required])
+                    : Validators.required);
+            }
         });
         this.markForCheck();
     }
@@ -19164,11 +19338,62 @@ EntityMetadataComponent.propDecorators = {
     showRecorder: [{ type: Input }]
 };
 
+const DEFAULT_MENU_SHOW_WHEN = 'lg';
+class MenuService {
+    constructor() {
+        this._$toggled = new Subject();
+        this._$opened = new Subject();
+        this._$splitPaneWhen = new BehaviorSubject(DEFAULT_MENU_SHOW_WHEN);
+        this._$enabled = new BehaviorSubject(true);
+    }
+    get opened() {
+        return this._$opened.asObservable();
+    }
+    get splitPaneWhen() {
+        return this._$splitPaneWhen.asObservable();
+    }
+    get enabled() {
+        return this._$enabled.asObservable();
+    }
+    toggle() {
+        this._$toggled.next();
+    }
+    enable(value) {
+        this._$enabled.next(value);
+    }
+    setSplitPaneShowWhen(value) {
+        if (this._$splitPaneWhen.value !== value) {
+            this._$splitPaneWhen.next(value);
+        }
+    }
+    toggleSplitPaneWhen() {
+        if (this._$splitPaneWhen.value !== false) {
+            this._$splitPaneWhen.next(false);
+        }
+        else {
+            this._$splitPaneWhen.next(DEFAULT_MENU_SHOW_WHEN);
+        }
+    }
+    _markAsOpened() {
+        this._$opened.next(true);
+    }
+    _markAsClosed() {
+        this._$opened.next(false);
+    }
+}
+MenuService.ɵprov = ɵɵdefineInjectable({ factory: function MenuService_Factory() { return new MenuService(); }, token: MenuService, providedIn: "root" });
+MenuService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+
 class FormButtonsBarToken {
 }
 class FormButtonsBarComponent {
-    constructor(hotkeys) {
+    constructor(hotkeys, menu) {
         this.hotkeys = hotkeys;
+        this.menu = menu;
         this._subscription = new Subscription();
         this.disabled = false;
         this.disabledCancel = false;
@@ -19200,15 +19425,16 @@ class FormButtonsBarComponent {
 FormButtonsBarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-form-buttons-bar',
-                template: "<ion-toolbar [class]=\"classList\">\n  <ion-row class=\"ion-no-padding\" nowrap>\n    <ion-col>\n      <ng-content></ng-content>\n    </ion-col>\n\n    <ion-col size=\"auto\">\n\n      <!-- close (go back) -->\n      <ion-button fill=\"clear\" color=\"dark\" (click)=\"onBack.emit($event)\"\n                  (keyup.enter)=\"onBack.emit($event)\"\n                  *ngIf=\"onBack.observers | isNotEmptyArray\">\n        <ion-label translate>COMMON.BTN_CLOSE</ion-label>\n      </ion-button>\n\n      <!-- reload -->\n      <ion-button fill=\"clear\" color=\"dark\" (click)=\"onCancel.emit($event)\"\n                  (keyup.enter)=\"onCancel.emit($event)\"\n                  [disabled]=\"disabledCancel\">\n        <ion-icon slot=\"start\" name=\"refresh\"></ion-icon>\n        <ion-label translate>COMMON.BTN_RESET</ion-label>\n      </ion-button>\n\n      <!-- next -->\n      <ion-button fill=\"solid\" (click)=\"onNext.emit($event)\" (keyup.enter)=\"onNext.emit($event)\" *ngIf=\"onNext.observers | isNotEmptyArray\">\n        <ion-label translate>COMMON.BTN_NEXT</ion-label>\n        <ion-icon slot=\"end\" name=\"arrow-forward\"></ion-icon>\n      </ion-button>\n\n      <!-- save -->\n      <ion-button [fill]=\"disabled ? 'clear' : 'solid'\"\n                  (click)=\"onSave.emit($event)\"\n                  (keyup.enter)=\"onSave.emit($event)\" color=\"danger\"\n                  [disabled]=\"disabled\">\n        <ion-label [innerHTML]=\"'COMMON.BTN_SAVE_WITH_SHORTCUT'|translate\" [title]=\"'COMMON.BTN_SAVE_WITH_SHORTCUT_HELP'|translate\"></ion-label>\n      </ion-button>\n    </ion-col>\n  </ion-row>\n</ion-toolbar>\n",
+                template: "\n<ion-toolbar [class]=\"classList\">\n  <ion-row class=\"ion-no-padding\" nowrap>\n    <!-- show menu button -->\n    <ion-col size=\"auto\" class=\"hidden-xs hidden-sm\">\n      <ion-menu-toggle>\n        <button\n          mat-icon-button\n          color=\"accent\"\n          [title]=\"'COMMON.BTN_SHOW_MENU' | translate\"\n          (click)=\"menu.toggleSplitPaneWhen()\">\n          <mat-icon><span>&#xbb;</span></mat-icon>\n        </button>\n      </ion-menu-toggle>\n    </ion-col>\n\n    <ion-col>\n      <ng-content></ng-content>\n    </ion-col>\n\n    <ion-col size=\"auto\">\n\n      <!-- close (go back) -->\n      <ion-button fill=\"clear\" color=\"dark\" (click)=\"onBack.emit($event)\"\n                  (keyup.enter)=\"onBack.emit($event)\"\n                  *ngIf=\"onBack.observers | isNotEmptyArray\">\n        <ion-label translate>COMMON.BTN_CLOSE</ion-label>\n      </ion-button>\n\n      <!-- reload -->\n      <ion-button fill=\"clear\" color=\"dark\" (click)=\"onCancel.emit($event)\"\n                  (keyup.enter)=\"onCancel.emit($event)\"\n                  [disabled]=\"disabledCancel\">\n        <ion-icon slot=\"start\" name=\"refresh\"></ion-icon>\n        <ion-label translate>COMMON.BTN_RESET</ion-label>\n      </ion-button>\n\n      <!-- next -->\n      <ion-button fill=\"solid\" (click)=\"onNext.emit($event)\" (keyup.enter)=\"onNext.emit($event)\" *ngIf=\"onNext.observers | isNotEmptyArray\">\n        <ion-label translate>COMMON.BTN_NEXT</ion-label>\n        <ion-icon slot=\"end\" name=\"arrow-forward\"></ion-icon>\n      </ion-button>\n\n      <!-- save -->\n      <ion-button [fill]=\"disabled ? 'clear' : 'solid'\"\n                  (click)=\"onSave.emit($event)\"\n                  (keyup.enter)=\"onSave.emit($event)\" color=\"danger\"\n                  [disabled]=\"disabled\">\n        <ion-label [innerHTML]=\"'COMMON.BTN_SAVE_WITH_SHORTCUT'|translate\" [title]=\"'COMMON.BTN_SAVE_WITH_SHORTCUT_HELP'|translate\"></ion-label>\n      </ion-button>\n    </ion-col>\n  </ion-row>\n</ion-toolbar>\n",
                 providers: [
                     { provide: FormButtonsBarToken, useExisting: FormButtonsBarComponent }
                 ],
-                styles: [":host{width:100%}:host ion-toolbar{height:var(--app-form-buttons-bar-height);padding:0 6px}:host ion-col{padding:0}"]
+                styles: [":host{width:100%}:host ion-toolbar{height:var(--app-form-buttons-bar-height);padding:0 6px}:host ion-col{padding:0}ion-menu-toggle button{top:4px}"]
             },] }
 ];
 FormButtonsBarComponent.ctorParameters = () => [
-    { type: Hotkeys }
+    { type: Hotkeys },
+    { type: MenuService }
 ];
 FormButtonsBarComponent.propDecorators = {
     disabled: [{ type: Input }],
@@ -20084,7 +20310,7 @@ AppListForm.decorators = [
                 selector: 'app-list-form',
                 template: "\n<ng-container *ngIf=\"!loading; else listSkeleton\">\n\n  <!-- List -->\n  <ion-list class=\"ion-no-padding\" >\n\n    <ng-container *ngFor=\"let itemControl of itemControls; index as i; last as last\">\n      <ion-item *ngIf=\"itemControl.value; let item\"\n                [class.disabled]=\"disabled\" tappable\n                (click)=\"onItemClick($event, item)\"\n                [color]=\"selection.isSelected(item) ? 'secondary100' : undefined\"\n                [button]=\"selectionChanges.observers.length > 0\">\n        <ion-label>{{displayWith(item)}}</ion-label>\n\n        <!-- buttons -->\n        <ion-buttons slot=\"end\" *ngIf=\"enabled\" class=\"action-buttons\">\n          <ion-button fill=\"clear\" (click)=\"removeAt(i)\">\n            <ion-icon slot=\"icon-only\" name=\"trash\"></ion-icon>\n          </ion-button>\n\n          <ion-button *ngFor=\"let button of options.buttons\"\n                      fill=\"clear\" [color]=\"button.color\"\n                      [class.cdk-visually-hidden]=\"button.disabled|async\"\n                      (click)=\"onItemButtonClick(button, $event, item, i)\"\n                      [title]=\"(button.title || '')|translate\">\n            <ion-icon slot=\"icon-only\" [name]=\"button.icon\"></ion-icon>\n          </ion-button>\n\n        </ion-buttons>\n      </ion-item>\n    </ng-container>\n  </ion-list>\n\n  <!-- Add button -->\n  <ion-button color=\"tertiary\" fill=\"clear\"\n              *ngIf=\"enabled && onNewItem.observers.length; else emptyText\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"onNewClick($event)\" >\n    <ion-icon slot=\"start\" name=\"add\"></ion-icon>\n    <ion-label translate>COMMON.BTN_ADD</ion-label>\n  </ion-button>\n\n  <!-- Empty (if readonly) -->\n  <ng-template #emptyText>\n    <ion-text  *ngIf=\"!length\" color=\"medium\"><i translate>COMMON.EMPTY_OPTION</i></ion-text>\n  </ng-template>\n</ng-container>\n\n<ng-template #listSkeleton>\n\n  <ion-list>\n    <ng-container *ngTemplateOutlet=\"itemSkeleton\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"itemSkeleton\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"itemSkeleton\"></ng-container>\n  </ion-list>\n\n</ng-template>\n\n<ng-template #itemSkeleton>\n\n  <ion-item>\n    <ion-label>\n      <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n    </ion-label>\n  </ion-item>\n\n</ng-template>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{--ion-item-background-selected:var(--ion-color-secondary100);--ion-item-text-color-selected:var(--ion-color-secondary100-contrast);--ion-item-icon-color-selected:var(--ion-color-secondary100-contrast)}ion-item.disabled ion-label{color:var(--ion-color-medium-shade,grey)}ion-item .action-buttons{visibility:hidden;display:none}ion-item:hover{height:48px!important}ion-item:hover .action-buttons{margin-top:-1px;visibility:visible;display:block}ion-item.selected{background:var(--ion-item-background-selected)!important;--color-hover:var(--ion-item-background-selected)!important}ion-item.selected ion-label,ion-item.selected ion-text{color:var(--ion-item-text-color-selected)!important}ion-item.selected:hover{--color-hover:var(--ion-item-background-selected)!important;--ion-item-icon-color-selected:var(--ion-item-icon-color)!important;--ion-item-text-color-selected:var(--ion-item-text-color)!important}"]
+                styles: [":host{--ion-item-background-selected:var(--ion-color-secondary100);--ion-item-color-selected:var(--ion-color-secondary100-contrast)}ion-item.disabled ion-label{color:var(--ion-color-medium-shade,grey)}ion-item{--min-height:48px;background-color:var(--ion-item-background)}ion-item ion-label,ion-item ion-text{color:var(--ion-item-color)}ion-item .action-buttons{visibility:hidden;display:none}ion-item:hover{height:var(--min-height);--ion-item-background-color:var(--ion-color-light);--ion-item-color:var(--ion-color-light-contrast)}ion-item:hover .action-buttons{margin-top:-1px;visibility:visible;display:block}ion-item.selected{--ion-item-background-color-hover:var(--ion-item-background-selected)!important;--ion-item-color-hover:var(--ion-item-color-selected)!important}"]
             },] }
 ];
 AppListForm.ctorParameters = () => [
@@ -20145,9 +20371,6 @@ PersonToStringPipe.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
 
-const MimeTypes = Object.freeze({
-    ANDROID_APK: 'application/vnd.android.package-archive'
-});
 class AppInstallUpgradeCard {
     constructor(modalCtrl, configService, toastController, alertController, translate, cd, platform, network, environment) {
         this.modalCtrl = modalCtrl;
@@ -20160,7 +20383,6 @@ class AppInstallUpgradeCard {
         this.network = network;
         this.environment = environment;
         this._subscription = new Subscription();
-        this._showUpdateOfflineFeature = false;
         this.loading = true;
         this.hasDownloader = false;
         this.downloading = false;
@@ -20168,16 +20390,6 @@ class AppInstallUpgradeCard {
         this.showUpgradeWarning = true;
         this.showOfflineWarning = true;
         this.showInstallButton = false;
-        this.onUpdateOfflineModeClick = new EventEmitter();
-    }
-    set showUpdateOfflineFeature(value) {
-        if (value === this._showUpdateOfflineFeature)
-            return; // Skip
-        this._showUpdateOfflineFeature = value;
-        this.markForCheck();
-    }
-    get showUpdateOfflineFeature() {
-        return this._showUpdateOfflineFeature;
     }
     ngOnInit() {
         this.offline = this.network.offline;
@@ -20201,7 +20413,6 @@ class AppInstallUpgradeCard {
     ngOnDestroy() {
         this._subscription.unsubscribe();
         this._subscription = null;
-        this.onUpdateOfflineModeClick.complete();
         this.installLinks = null;
         this.upgradeLinks = null;
     }
@@ -20352,10 +20563,10 @@ class AppInstallUpgradeCard {
                 let title;
                 let mimeType;
                 // Get file name
-                let filename = this.getFilename(url);
+                let filename = UriUtils.getFilename(url);
                 let 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)
@@ -20366,11 +20577,9 @@ class AppInstallUpgradeCard {
                         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, url, platform: 'android', version, filename, title, mimeType });
@@ -20382,18 +20591,6 @@ class AppInstallUpgradeCard {
         //}
         return result;
     }
-    getFilename(url) {
-        if (!url)
-            return;
-        // Get last part (or all string, if no '/')
-        let filename = url.substring(url.lastIndexOf('/') + 1);
-        const queryParamIndex = filename.indexOf('?');
-        if (queryParamIndex !== -1) {
-            // Remove query params
-            return filename.substring(0, queryParamIndex);
-        }
-        return filename;
-    }
     listenDownloadJobs() {
         // Listening downloading promise, if exists
         (this.upgradeLinks || []).forEach(link => {
@@ -20491,7 +20688,7 @@ class AppInstallUpgradeCard {
 AppInstallUpgradeCard.decorators = [
     { type: Component, args: [{
                 selector: 'app-install-upgrade-card',
-                template: "\n\n<!-- Offline mode card-->\n<ion-card *ngIf=\"showOfflineWarning && (!loading && offline || waitingNetwork)\"\n          color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\" *ngIf=\"!waitingNetwork; else waitingNetworkText\">\n            <h4>\n            <b *ngIf=\"isLogin; else notLogin\"  [innerHTML]=\"'NETWORK.INFO.OFFLINE_OR_UNAUTHORIZED'| translate\"></b>\n            <ng-template #notLogin>\n              <b [innerHTML]=\"'NETWORK.INFO.OFFLINE'| translate\"></b>\n            </ng-template>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.OFFLINE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n          <ng-template #waitingNetworkText>\n            <ion-text class=\"ion-text-wrap\" [innerHTML]=\"'NETWORK.INFO.RETRY_TO_CONNECT'| translate\"></ion-text>\n          </ng-template>\n        </ion-col>\n        <ion-col size=\"auto\">\n\n          <!-- Retry button -->\n          <ion-button *ngIf=\"!waitingNetwork; else waitingSpinner\" color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"tryOnline()\">\n            <span translate>NETWORK.BTN_CHECK_ALIVE</span>\n          </ion-button>\n\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Upgrade links -->\n<ion-card *ngIf=\"showUpgradeWarning && !loading && !offline && upgradeLinks\"\n          color=\"accent\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of upgradeLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3>\n              <span *ngIf=\"link.version\" [innerHTML]=\"'INFO.UPDATE_APP_TO_VERSION'| translate: link\"></span>\n              <span *ngIf=\"!link.version\" [innerHTML]=\"'INFO.UPDATE_APP'| translate: link\"></span>\n            </h3>\n            <h4>\n              <small *ngIf=\"last\" [innerHTML]=\"'INFO.UPDATE_APP_HELP'|translate\"></small>\n            </h4>\n          </ion-text>\n        </ion-col>\n\n        <ion-col size=\"auto\">\n          <ng-container *ngTemplateOutlet=\"downloadButton; context: { $implicit: link  }\"></ng-container>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Install links -->\n<ion-card *ngIf=\"showInstallButton && !loading && !offline && installLinks\"\n          color=\"secondary\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of installLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3 [innerHTML]=\"'INFO.DOWNLOAD_APP_TITLE'| translate: {name: link.name, platform: getPlatformName(link.platform) }\"></h3>\n            <h4><small *ngIf=\"last\" [innerHTML]=\"'INFO.DOWNLOAD_APP_HELP'|translate\"></small></h4>\n          </ion-text>\n        </ion-col>\n        <ion-col size=\"auto\">\n          <ng-container *ngTemplateOutlet=\"downloadButton; context: { $implicit: link  }\"></ng-container>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Update offline feature card-->\n<ion-card *ngIf=\"showUpdateOfflineFeature && !loading && !offline\"\n          color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h4>\n              <b [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE'| translate\"></b>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n        </ion-col>\n        <ion-col size=\"auto\">\n\n          <!-- Retry button -->\n          <ion-button color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"onUpdateOfflineModeClick.emit($event)\">\n            <span translate>NETWORK.BTN_UPDATE</span>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Display a download button, depending on the link URL, and the device platform -->\n<ng-template #downloadButton let-link>\n\n  <ng-container *ngIf=\"link.filename; else redirectButton\">\n\n    <ng-container *ngIf=\"hasDownloader; else webDownloadButton\">\n      <!-- Download using platform -->\n      <ion-button (click)=\"download($event, asLink(link))\"\n                  *ngIf=\"!link.location; else openButton\"\n                  [disabled]=\"link.downloading\"\n                  color=\"tertiary\" class=\"ion-float-end\">\n        <ion-icon slot=\"start\" *ngIf=\"!link.downloading\" name=\"download\"></ion-icon>\n        <ion-spinner slot=\"start\" class=\"ion-no-padding\" *ngIf=\"link.downloading\"></ion-spinner>\n        <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n      </ion-button>\n\n      <!-- Open APK button -->\n      <ng-template #openButton>\n        <ion-button *ngIf=\"link.location\"\n                    (click)=\"openFile($event, link)\"\n                    color=\"tertiary\" class=\"ion-float-end\" >\n          <ion-label translate>COMMON.BTN_INSTALL</ion-label>\n        </ion-button>\n      </ng-template>\n    </ng-container>\n\n    <!-- Web download button -->\n    <ng-template #webDownloadButton>\n      <ion-button [download]=\"link.downloadFilename\"\n                  [href]=\"link.url\"\n                  color=\"tertiary\" class=\"ion-float-end\" >\n        <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n      </ion-button>\n    </ng-template>\n  </ng-container>\n\n  <!-- Web redirect button -->\n  <ng-template #redirectButton>\n    <ion-button [href]=\"link.url\" rel=\"external\" color=\"tertiary\" class=\"ion-float-end\" target=\"_blank\">\n      <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n    </ion-button>\n  </ng-template>\n</ng-template>\n\n\n<!-- Waiting spinner -->\n<ng-template #waitingSpinner>\n  <ion-spinner color=\"light\"></ion-spinner>\n</ng-template>\n",
+                template: "\n\n<!-- Offline mode card-->\n<ion-card *ngIf=\"showOfflineWarning && (!loading && offline || waitingNetwork)\"\n          color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\" *ngIf=\"!waitingNetwork; else waitingNetworkText\">\n            <h4>\n            <b *ngIf=\"isLogin; else notLogin\"  [innerHTML]=\"'NETWORK.INFO.OFFLINE_OR_UNAUTHORIZED'| translate\"></b>\n            <ng-template #notLogin>\n              <b [innerHTML]=\"'NETWORK.INFO.OFFLINE'| translate\"></b>\n            </ng-template>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.OFFLINE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n          <ng-template #waitingNetworkText>\n            <ion-text class=\"ion-text-wrap\" [innerHTML]=\"'NETWORK.INFO.RETRY_TO_CONNECT'| translate\"></ion-text>\n          </ng-template>\n        </ion-col>\n        <ion-col size=\"auto\">\n\n          <!-- Retry button -->\n          <ion-button *ngIf=\"!waitingNetwork; else waitingSpinner\" color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"tryOnline()\">\n            <span translate>NETWORK.BTN_CHECK_ALIVE</span>\n          </ion-button>\n\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Upgrade links -->\n<ion-card *ngIf=\"showUpgradeWarning && !loading && !offline && upgradeLinks\"\n          color=\"accent\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of upgradeLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3>\n              <span *ngIf=\"link.version\" [innerHTML]=\"'INFO.UPDATE_APP_TO_VERSION'| translate: link\"></span>\n              <span *ngIf=\"!link.version\" [innerHTML]=\"'INFO.UPDATE_APP'| translate: link\"></span>\n            </h3>\n            <h4>\n              <small *ngIf=\"last\" [innerHTML]=\"'INFO.UPDATE_APP_HELP'|translate\"></small>\n            </h4>\n          </ion-text>\n        </ion-col>\n\n        <ion-col size=\"auto\">\n          <ng-container *ngTemplateOutlet=\"downloadButton; context: { $implicit: link  }\"></ng-container>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Install links -->\n<ion-card *ngIf=\"showInstallButton && !loading && !offline && installLinks\"\n          color=\"secondary\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of installLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3 [innerHTML]=\"'INFO.DOWNLOAD_APP_TITLE'| translate: {name: link.name, platform: getPlatformName(link.platform) }\"></h3>\n            <h4><small *ngIf=\"last\" [innerHTML]=\"'INFO.DOWNLOAD_APP_HELP'|translate\"></small></h4>\n          </ion-text>\n        </ion-col>\n        <ion-col size=\"auto\">\n          <ng-container *ngTemplateOutlet=\"downloadButton; context: { $implicit: link  }\"></ng-container>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Display a download button, depending on the link URL, and the device platform -->\n<ng-template #downloadButton let-link>\n\n  <ng-container *ngIf=\"link.filename; else redirectButton\">\n\n    <ng-container *ngIf=\"hasDownloader; else webDownloadButton\">\n      <!-- Download using platform -->\n      <ion-button (click)=\"download($event, asLink(link))\"\n                  *ngIf=\"!link.location; else openButton\"\n                  [disabled]=\"link.downloading\"\n                  color=\"tertiary\" class=\"ion-float-end\">\n        <ion-icon slot=\"start\" *ngIf=\"!link.downloading\" name=\"download\"></ion-icon>\n        <ion-spinner slot=\"start\" class=\"ion-no-padding\" *ngIf=\"link.downloading\"></ion-spinner>\n        <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n      </ion-button>\n\n      <!-- Open APK button -->\n      <ng-template #openButton>\n        <ion-button *ngIf=\"link.location\"\n                    (click)=\"openFile($event, link)\"\n                    color=\"tertiary\" class=\"ion-float-end\" >\n          <ion-label translate>COMMON.BTN_INSTALL</ion-label>\n        </ion-button>\n      </ng-template>\n    </ng-container>\n\n    <!-- Web download button -->\n    <ng-template #webDownloadButton>\n      <ion-button [download]=\"link.downloadFilename\"\n                  [href]=\"link.url\"\n                  color=\"tertiary\" class=\"ion-float-end\" >\n        <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n      </ion-button>\n    </ng-template>\n  </ng-container>\n\n  <!-- Web redirect button -->\n  <ng-template #redirectButton>\n    <ion-button [href]=\"link.url\" rel=\"external\" color=\"tertiary\" class=\"ion-float-end\" target=\"_blank\">\n      <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n    </ion-button>\n  </ng-template>\n</ng-template>\n\n\n<!-- Waiting spinner -->\n<ng-template #waitingSpinner>\n  <ion-spinner color=\"light\"></ion-spinner>\n</ng-template>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 animations: [slideUpDownAnimation],
                 styles: ["ion-text small{font-size:85%}"]
@@ -20512,9 +20709,7 @@ AppInstallUpgradeCard.propDecorators = {
     isLogin: [{ type: Input }],
     showUpgradeWarning: [{ type: Input }],
     showOfflineWarning: [{ type: Input }],
-    showInstallButton: [{ type: Input }],
-    showUpdateOfflineFeature: [{ type: Input }],
-    onUpdateOfflineModeClick: [{ type: Output }]
+    showInstallButton: [{ type: Input }]
 };
 
 class IsLoginAccountPipe {
@@ -20627,33 +20822,7 @@ ActionsColumnComponent.propDecorators = {
     forward: [{ type: Output }]
 };
 
-class MenuService {
-    constructor() {
-        this._toggledSubject = new Subject();
-        this._visibleSubject = new Subject();
-    }
-    get menuToggled$() {
-        return this._toggledSubject.asObservable();
-    }
-    get menuVisible$() {
-        return this._visibleSubject.asObservable();
-    }
-    toggleMenu() {
-        this._toggledSubject.next();
-    }
-    menuVisible(value) {
-        this._visibleSubject.next(value);
-    }
-}
-MenuService.ɵprov = ɵɵdefineInjectable({ factory: function MenuService_Factory() { return new MenuService(); }, token: MenuService, providedIn: "root" });
-MenuService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-
 const APP_MENU_ITEMS = new InjectionToken('menuItems');
-const SPLIT_PANE_SHOW_WHEN = 'lg';
 class MenuComponent {
     constructor(platformService, accountService, router, menu, modalCtrl, alertController, translate, configService, cd, menuService, environment, items) {
         this.platformService = platformService;
@@ -20672,28 +20841,35 @@ class MenuComponent {
         this.loading = true;
         this.isLogin = false;
         this.$items = new BehaviorSubject(undefined);
-        this.appVersion = this.environment.version;
+        this.id = 'menu';
+        this.menuId = 'left';
         this.side = 'left';
+        this.contentId = 'menu-content';
+        this.appVersion = this.environment.version;
         this._debug = !environment.production;
     }
     ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.splitPaneOpened = true;
-            this.splitPane.when = SPLIT_PANE_SHOW_WHEN;
+            this.splitPane.when = yield firstNotNilPromise(this.menuService.splitPaneWhen);
             // Wait platform started
             yield this.platformService.ready();
-            this.splitPaneOpened = true;
             // Listen to menu service event
-            this.menuService.menuToggled$
-                .subscribe(() => this.toggleSplitPane());
+            this.menuService.splitPaneWhen
+                .subscribe((value) => this.setSplitPaneWhen(value));
+            this.menuService.enabled
+                .subscribe((value) => this.enable(value));
+            this.menuService.opened
+                // Avoid duplicated events
+                .pipe(distinctUntilChanged())
+                .subscribe((value) => value ? this.open() : this.close());
             // Update component when refresh is need (=login events or config changed)
             this._subscription.add(merge(this.accountService.onLogin, this.accountService.onLogout, this.configService.config
                 .pipe(tap(config => this._config = config)))
                 .pipe(
             // Wait account service ready (can be restarted)
-            mergeMap(() => this.accountService.ready()))
-                .subscribe(account => {
-                if (this.accountService.isLogin()) {
+            mergeMap(() => this.accountService.ready()), map(() => this.accountService.isLogin()), distinctUntilChanged())
+                .subscribe(login => {
+                if (login) {
                     this.onLogin(this.accountService.account);
                 }
                 else {
@@ -20721,8 +20897,6 @@ class MenuComponent {
             if (!skipRedirect)
                 console.debug('[menu] logout');
             this.isLogin = false;
-            //this.splitPaneOpened = false;
-            //this.splitPane.when = false;
             this.accountAvatar = null;
             this.accountEmail = null;
             this.accountName = null;
@@ -20751,7 +20925,8 @@ class MenuComponent {
                         text: translations['COMMON.BTN_CANCEL'],
                         role: 'cancel',
                         cssClass: 'secondary'
-                    }, {
+                    },
+                    {
                         text: translations['AUTH.LOGOUT.BTN_CONFIRM'],
                         cssClass: 'ion-color-primary',
                         handler: () => {
@@ -20766,9 +20941,40 @@ class MenuComponent {
             yield alert.present();
         });
     }
-    menuClose() {
+    enable(value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const enabled = yield this.menu.isEnabled(this.menuId);
+            if (enabled !== value) {
+                yield this.menu.enable(value, this.menuId);
+                if (!value)
+                    yield this.close();
+            }
+        });
+    }
+    open() {
+        return __awaiter(this, void 0, void 0, function* () {
+            console.debug('[menu] Checking open event...');
+            const opened = yield this.menu.isOpen(this.menuId);
+            if (!opened) {
+                console.debug('[menu] Opening menu');
+                yield this.menu.open(this.menuId);
+                // Propage to service
+                this.menuService._markAsOpened();
+            }
+            return true;
+        });
+    }
+    close() {
         return __awaiter(this, void 0, void 0, function* () {
-            return this.menu.close('left');
+            console.debug('[menu] Checking close event...');
+            const opened = yield this.menu.isOpen(this.menuId);
+            if (opened) {
+                console.debug('[menu] Closing menu');
+                yield this.menu.close(this.menuId);
+                // Propage to service
+                this.menuService._markAsClosed();
+            }
+            return true;
         });
     }
     openAboutModal(event) {
@@ -20777,24 +20983,33 @@ class MenuComponent {
             return modal.present();
         });
     }
-    toggleSplitPane(event) {
+    setSplitPaneWhen(value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            console.debug('[menu] Checking splitPane when...');
+            if (this.splitPane.when !== value) {
+                console.debug('[menu] Set splitPane when to ' + value);
+                this.splitPane.when = value;
+                this.detectChanges();
+                // Propagate to the menu service
+                setTimeout(() => this.menuService.setSplitPaneShowWhen(value), 200);
+            }
+        });
+    }
+    toggleSplitPaneShow(event) {
         if (event && event.defaultPrevented)
             return;
         if (event)
             event.preventDefault();
-        this.splitPaneOpened = !this.splitPaneOpened;
-        if (!this.splitPaneOpened) {
-            this.splitPane.when = false;
+        if (this.splitPane.when === false) {
+            return this.setSplitPaneWhen(DEFAULT_MENU_SHOW_WHEN);
         }
         else {
-            this.splitPane.when = SPLIT_PANE_SHOW_WHEN;
+            return this.setSplitPaneWhen(false);
         }
-        this.menuService.menuVisible(this.splitPaneOpened);
-        this.detectChanges();
     }
     doAction(action, event) {
         return __awaiter(this, void 0, void 0, function* () {
-            this.menuClose();
+            this.close();
             switch (action) {
                 case 'logout':
                     yield this.logout();
@@ -20880,7 +21095,7 @@ class MenuComponent {
 MenuComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-menu',
-                template: "<ion-split-pane #splitPane contentId=\"menu-content\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu id=\"menu\" menuId=\"left\" contentId=\"menu-content\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"menuClose()\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px;\"/>\n              <span *ngIf=\"!logo\" width=\"108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n\n            <button mat-button type=\"button\"\n                    [routerLink]=\"['/account']\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"ion-color-primary\"\n                    (click)=\"menuClose()\">\n              <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                <h3 class=\"no-margin username\">\n                  <b>{{accountName}}</b>\n                </h3>\n                <h4>{{accountEmail}}</h4>\n              </ion-label>\n            </button>\n\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of $items | async\">\n\n          <!-- link -->\n          <ion-item *ngIf=\"!loading && item.path\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    [routerLink]=\"item.path\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"selected\"\n                    [routerLinkActiveOptions]=\"{exact: (item.path === '/')}\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- action -->\n          <ion-item *ngIf=\"!loading && item.action\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    (click)=\"doAction(item.action, $event)\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- divider -->\n          <ion-item-divider @fadeInAnimation\n                            class=\"{{item.cssClass}} {{item.color}}\"\n                            *ngIf=\"!loading && !item.path && !item.action\">\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item-divider>\n\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPane($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPaneOpened ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPaneOpened ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\n</ion-split-pane>\n",
+                template: "<ion-split-pane #splitPane [contentId]=\"contentId\" (swiperight)=\"onSwipeRight($event)\">\n\n  <ion-menu [id]=\"id\" [menuId]=\"menuId\" contentId=\"menu-content\">\n    <ion-header>\n\n      <ion-toolbar @fadeInAnimation *ngIf=\"isLogin; else notLogin\" class=\"ion-toolbar-top\">\n        <ion-grid>\n          <ion-row>\n            <ion-col size=\"4\">\n              <button type=\"button\" mat-flat-button\n                      class=\"user-avatar\" [class.primary]=\"!accountAvatar\"\n                      [style.background-image]=\"'url('+(accountAvatar||'./assets/img/person.png')+')'\"\n                      [routerLink]=\"['/account']\"\n                      routerDirection=\"root\"\n                      routerLinkActive=\"ion-color-primary\"\n                      (click)=\"close()\">\n              </button>\n            </ion-col>\n            <ion-col size=\"8\" class=\"user-logo\">\n              <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"108px;\"/>\n              <span *ngIf=\"!logo\" width=\"108px;\">{{appName}}</span>\n            </ion-col>\n          </ion-row>\n          <ion-row class=\"ion-no-padding\">\n\n            <button mat-button type=\"button\"\n                    [routerLink]=\"['/account']\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"ion-color-primary\"\n                    (click)=\"close()\">\n              <ion-label color=\"primary\" class=\"ion-text-wrap ion-text-start\">\n                <h3 class=\"no-margin username\">\n                  <b>{{accountName}}</b>\n                </h3>\n                <h4>{{accountEmail}}</h4>\n              </ion-label>\n            </button>\n\n          </ion-row>\n        </ion-grid>\n\n      </ion-toolbar>\n\n      <!-- User not logged -->\n      <ng-template #notLogin>\n        <mat-toolbar class=\"ion-padding\" @fadeInAnimation\n                     style=\"height: unset; display: block; margin: auto; text-align: center;\">\n          <img *ngIf=\"logo\" src=\"{{logo}}\" [title]=\"'APP_NAME'|translate: {appName: appName}\" width=\"150px;\">\n          <span *ngIf=\"!logo\" style=\"width: 150px\">{{appName}}</span>\n        </mat-toolbar>\n      </ng-template>\n    </ion-header>\n\n    <ion-content [class.has-user-header]=\"isLogin\">\n\n      <ion-list lines=\"none\">\n        <ion-menu-toggle auto-hide=\"false\"\n                         [class.flex-spacer]=\"item.cssClass == 'flex-spacer'\"\n                         *ngFor=\"let item of $items | async\">\n\n          <!-- link -->\n          <ion-item *ngIf=\"!loading && item.path\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    [routerLink]=\"item.path\"\n                    routerDirection=\"root\"\n                    routerLinkActive=\"selected\"\n                    [routerLinkActiveOptions]=\"{exact: (item.path === '/')}\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- action -->\n          <ion-item *ngIf=\"!loading && item.action\"\n                    @fadeInAnimation\n                    class=\"{{item.cssClass}} {{item.color}} text-1x\"\n                    tappable\n                    (click)=\"doAction(item.action, $event)\">\n            <ion-icon slot=\"start\" *ngIf=\"item.icon\" [name]=\"item.icon\"></ion-icon>\n            <mat-icon slot=\"start\" *ngIf=\"item.matIcon\">{{item.matIcon}}</mat-icon>\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item>\n\n          <!-- divider -->\n          <ion-item-divider @fadeInAnimation\n                            class=\"{{item.cssClass}} {{item.color}}\"\n                            *ngIf=\"!loading && !item.path && !item.action\">\n            <ion-label translate>{{item.title}}</ion-label>\n          </ion-item-divider>\n\n        </ion-menu-toggle>\n      </ion-list>\n    </ion-content>\n\n    <ion-footer class=\"hidden-xs hidden-sm\">\n      <ion-toolbar>\n\n        <ion-buttons slot=\"start\">\n          <ion-button mat-icon-button color=\"accent\" (click)=\"openAboutModal($event)\">\n            <mat-icon slot=\"icon-only\">help_outline</mat-icon>\n          </ion-button>\n        </ion-buttons>\n\n        <ion-title (click)=\"openAboutModal($event)\" color=\"medium\">\n          {{'MENU.FOOTER_VERSION_ABOUT'| translate: {version: appVersion} }}\n        </ion-title>\n\n        <ion-buttons slot=\"end\">\n          <button mat-icon-button color=\"accent\" (click)=\"toggleSplitPaneShow($event)\"\n                  class=\"hidden-xs hidden-sm hidden-md\"\n                  [title]=\"(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') |translate\">\n            <mat-icon><span>{{splitPane.when ? '&#xab;' : '&#xbb;'}}</span></mat-icon>\n          </button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-footer>\n\n  </ion-menu>\n\n  <ng-content></ng-content>\n\n</ion-split-pane>\n",
                 animations: [fadeInAnimation],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: ["ion-menu{--ion-item-background:transparent;--ion-item-divider-background:transparent;--ion-item-icon-color:var(--ion-color-primary-tint);--ion-item-text-color:var(--ion-color-primary-tint);--ion-item-background-selected:var(--ion-color-secondary100);--ion-item-text-color-selected:var(--ion-color-primary);--ion-item-icon-color-selected:var(--ion-color-primary);--ion-item-text-color-disable:var(--ion-color-medium);--ion-item-icon-color-disable:var(--ion-color-medium)}ion-menu ion-header ion-text{color:var(--ion-color-primary)}ion-menu ion-header .user-avatar{background-size:cover;background-repeat:no-repeat;background-position:50%;background-color:var(--ion-color-secondary);border:1px solid var(--ion-color-primary);overflow:hidden!important;font-size:var(--avatar-size,60px)!important;line-height:var(--avatar-size,60px);height:var(--avatar-size,60px)!important;width:var(--avatar-size,60px)!important;border-radius:50%;display:inline-block}ion-menu ion-header .user-logo{text-align:right}ion-menu ion-header .user-logo img{max-width:120px;max-height:var(--avatar-size,60px);width:auto}ion-menu ion-header .username{padding-top:0;margin-top:0;margin-bottom:0;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}ion-menu ion-header button[mat-button]{padding:0;text-align:start!important;width:100%}ion-menu .scroll-content{margin-top:79px!important}ion-menu .has-user-header .scroll-content{margin-top:188px!important}ion-menu ion-content.has-profile-header{--offset-top:188px}ion-menu ion-content.no-profile-header{--offset-top:79px}ion-menu ion-content ion-list{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start}ion-menu ion-content ion-list ion-menu-toggle.flex-spacer{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end}ion-menu ion-content ion-list ion-item.primary{--ion-item-icon-color:var(--ion-color-primary-tint);--ion-item-text-color:var(--ion-color-primary-tint)}ion-menu ion-content ion-list ion-item.secondary{--ion-item-icon-color:var(--ion-color-secondary-tint);--ion-item-text-color:var(--ion-color-secondary-tint)}ion-menu ion-content ion-list ion-item.tertiary{--ion-item-icon-color:var(--ion-color-tertiary-tint);--ion-item-text-color:var(--ion-color-tertiary-tint)}ion-menu ion-content ion-list ion-item.danger{--ion-item-icon-color:var(--ion-color-danger-tint);--ion-item-text-color:var(--ion-color-danger-tint)}ion-menu ion-content ion-list ion-item.medium{--ion-item-icon-color:var(--ion-color-medium-shade);--ion-item-text-color:var(--ion-color-medium-shade)}ion-menu ion-content ion-list ion-item.dark{--ion-item-icon-color:var(--ion-color-dark-tint);--ion-item-text-color:var(--ion-color-dark-tint)}ion-menu ion-content ion-list ion-item ion-icon,ion-menu ion-content ion-list ion-item mat-icon{color:var(--ion-item-icon-color)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item ion-label,ion-menu ion-content ion-list ion-item ion-text{color:var(--ion-item-text-color)!important}ion-menu ion-content ion-list ion-item.selected{background-color:var(--ion-item-background-selected)!important;--color-hover:var(--ion-item-background-selected)!important}ion-menu ion-content ion-list ion-item.selected ion-icon,ion-menu ion-content ion-list ion-item.selected mat-icon{color:var(--ion-item-icon-color-selected)!important;fill:currentColor;stroke:currentColor}ion-menu ion-content ion-list ion-item.selected ion-label,ion-menu ion-content ion-list ion-item.selected ion-text{color:var(--ion-item-text-color-selected)!important}ion-menu ion-content ion-list ion-item.selected:hover{--color-hover:var(--ion-item-background-selected)!important;--ion-item-icon-color-selected:var(--ion-item-icon-color)!important;--ion-item-text-color-selected:var(--ion-item-text-color)!important}ion-menu ion-footer{display:block!important}ion-menu ion-footer ion-toolbar ion-title{cursor:pointer;font-size:12pt;font-weight:400;text-align:center;padding:0 8px}ion-menu ion-footer ion-toolbar ion-button{--width:40px}@media screen and (max-width:767px){ion-menu ion-footer{display:none!important;visibility:hidden!important}}@media screen and (min-width:768px){ion-menu ion-scroll{overflow-y:auto!important}ion-menu .user-avatar{font-size:var(--avatar-size,80px)!important;line-height:var(--avatar-size,80px);height:var(--avatar-size,80px)!important;width:var(--avatar-size,80px)!important}ion-menu .user-logo img{max-height:var(--avatar-size,80px)}}"]
@@ -20901,10 +21116,13 @@ MenuComponent.ctorParameters = () => [
     { type: Array, decorators: [{ type: Optional }, { type: Inject, args: [APP_MENU_ITEMS,] }] }
 ];
 MenuComponent.propDecorators = {
+    id: [{ type: Input }],
+    menuId: [{ type: Input }],
+    side: [{ type: Input }],
+    contentId: [{ type: Input }],
     logo: [{ type: Input }],
     appName: [{ type: Input }],
     appVersion: [{ type: Input }],
-    side: [{ type: Input }],
     splitPane: [{ type: ViewChild, args: ['splitPane', { static: true },] }]
 };
 
@@ -20958,6 +21176,30 @@ AppIconComponent.propDecorators = {
     ref: [{ type: Input }]
 };
 
+class AppUpdateOfflineModeCard {
+    constructor() {
+        this.onUpdateClick = new EventEmitter();
+    }
+    ngOnDestroy() {
+        this.onUpdateClick.complete();
+    }
+}
+AppUpdateOfflineModeCard.decorators = [
+    { type: Component, args: [{
+                selector: 'app-update-offline-mode-card',
+                template: "\n<!-- Update offline feature card-->\n<ion-card color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngIf=\"!progressionValue; else progression\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\" >\n            <h4>\n              <b [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE'| translate\"></b>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n        </ion-col>\n\n        <!-- Update button -->\n        <ion-col size=\"auto\">\n          <ion-button color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"onUpdateClick.emit($event)\">\n            <span translate>NETWORK.BTN_UPDATE</span>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ng-template #progression>\n        <ion-row>\n          <ion-col>\n            <ion-text class=\"ion-text-wrap\" [innerHTML]=\"progressionMessage\"></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-progress-bar [value]=\"progressionValue / 100\"></ion-progress-bar>\n          </ion-col>\n        </ion-row>\n      </ng-template>\n    </ion-grid>\n\n\n  </ion-card-content>\n</ion-card>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                animations: [slideUpDownAnimation],
+                styles: ["ion-text small{font-size:85%}"]
+            },] }
+];
+AppUpdateOfflineModeCard.ctorParameters = () => [];
+AppUpdateOfflineModeCard.propDecorators = {
+    progressionMessage: [{ type: Input }],
+    progressionValue: [{ type: Input }],
+    onUpdateClick: [{ type: Output }]
+};
+
 class CoreModule {
     static forRoot() {
         console.info('[core] Creating module (root)');
@@ -20978,7 +21220,6 @@ CoreModule.decorators = [
                     CacheModule,
                     IonicStorageModule,
                     NgxJdenticonModule,
-                    TranslateModule.forChild(),
                     // Sub modules
                     AppGraphQLModule,
                     AppMenuModule
@@ -21005,6 +21246,7 @@ CoreModule.decorators = [
                     // Network
                     SelectPeerModal,
                     AppInstallUpgradeCard,
+                    AppUpdateOfflineModeCard,
                     // Other components
                     TableSelectColumnsComponent,
                     ActionsColumnComponent,
@@ -21040,6 +21282,7 @@ CoreModule.decorators = [
                     AppPropertiesForm,
                     AppListForm,
                     AppInstallUpgradeCard,
+                    AppUpdateOfflineModeCard,
                     DepartmentToStringPipe,
                     AppIconComponent,
                     TextPopover,
@@ -21048,6 +21291,9 @@ CoreModule.decorators = [
             },] }
 ];
 
+const moment$5 = momentImported;
+const tz = momentTZImported;
+
 class AuthGuardService {
     constructor(accountService, modalCtrl, router, environment) {
         this.accountService = accountService;
@@ -21567,6 +21813,8 @@ class AppTableUtils {
     }
 }
 
+class AppTableDataSourceOptions {
+}
 // @dynamic
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 class EntitiesTableDataSource extends TableDataSource {
@@ -21575,27 +21823,34 @@ class EntitiesTableDataSource extends TableDataSource {
      *
      * @param dataService A service to load and save data
      * @param dataType Type of data contained by the Table. If not specified, then `data` with at least one element must be specified.
+     * @param environment
      * @param validatorService Service that create instances of the FormGroup used to validate row fields.
      * @param config Additional configuration for table.
      */
     constructor(dataType, dataService, validatorService, config) {
-        super([], dataType, validatorService, Object.assign({ dataServiceOptions: {}, debug: config && config.suppressErrors === false, keepOriginalDataAfterConfirm: false }, config));
+        super([], dataType, validatorService, config);
         this.dataService = dataService;
         this._creating = false;
         this._saving = false;
+        this._useValidator = false;
         this._stopWatching$ = new Subject();
         this._editingRowCount = 0;
         this._fetchMoreFn = null;
         this.loadingSubject = new BehaviorSubject(undefined);
+        this._options = Object.assign({ dataServiceOptions: {}, debug: config && config.suppressErrors === false, keepOriginalDataAfterConfirm: false }, config);
+        this._useValidator = isNotNil(validatorService);
         this._logTypeName = removeEnd((new dataType()).__typename || 'UnknownVO', 'VO');
         // For DEV ONLY
-        this._debug = this.config.debug === true;
+        this._debug = this._options.debug === true;
     }
     get serviceOptions() {
-        return this.config.dataServiceOptions;
+        return this._options.dataServiceOptions;
     }
     set serviceOptions(value) {
-        this.config.dataServiceOptions = value;
+        this._options.dataServiceOptions = value;
+    }
+    get options() {
+        return this._options;
     }
     get loaded() {
         return this.loadingSubject.value === false; // Should be false when undefined (initial state)
@@ -21603,11 +21858,12 @@ class EntitiesTableDataSource extends TableDataSource {
     get loading() {
         return this.loadingSubject.value !== false; // Should be true when undefined (initial state)
     }
-    disconnect(collectionViewer) {
-        super.disconnect(collectionViewer);
+    ngOnDestroy() {
         this._stopWatching$.next();
         this._stopWatching$.complete();
+        this._stopWatching$.unsubscribe();
         this.loadingSubject.complete();
+        this.loadingSubject.unsubscribe();
     }
     watchAll(offset, size, sortBy, sortDirection, filter) {
         this._stopWatching$.next();
@@ -21651,26 +21907,27 @@ class EntitiesTableDataSource extends TableDataSource {
                 // Get all rows
                 const rows = yield this.getRows();
                 // Finish editing all rows
-                const confirmed = yield this.confirmRows(rows);
+                const invalidRows = rows.filter(row => row.editing && !row.confirmEditCreate());
                 // Cannot finish some rows: error
-                if (!confirmed) {
+                if (invalidRows.length) {
                     // log errors
                     if (this._debug)
-                        this.getEditingRows(rows).forEach(row => AppTableUtils.logRowErrors(row, `[table-datasource] ${this._logTypeName} row #${row.id}`));
+                        invalidRows.forEach(row => AppTableUtils.logRowErrors(row, `[table-datasource] ${this._logTypeName} row #${row.id}`));
                     // Stop with an error
                     throw { code: ErrorCodes.TABLE_INVALID_ROW_ERROR, message: 'ERROR.TABLE_INVALID_ROW_ERROR' };
                 }
                 this._editingRowCount = 0;
                 let data;
                 let dataToSave;
-                if (!!this.validatorService) {
+                if (this._useValidator) {
                     dataToSave = [];
                     data = rows.map(row => {
-                        const entity = this.toEntity(row.currentData);
+                        const currentData = new this.dataConstructor();
+                        currentData.fromObject(row.currentData);
                         // Filter to keep only dirty row
                         if (onlyDirtyRows && row.validator.dirty)
-                            dataToSave.push(entity);
-                        return entity;
+                            dataToSave.push(currentData);
+                        return currentData;
                     });
                     if (!onlyDirtyRows)
                         dataToSave = data;
@@ -21707,33 +21964,25 @@ class EntitiesTableDataSource extends TableDataSource {
             }
         });
     }
-    getDataFromRows(rows, options = { originalData: false, toEntity: false }) {
-        if (options.toEntity) {
-            return super.getDataFromRows(rows, options)
-                .map(data => this.toEntity(data));
+    updateDatasource(data, opts) {
+        if (this._debug)
+            console.debug(`[table-datasource] Updating datasource with data:`, data);
+        super.updateDatasource(data, opts);
+        if (!opts || opts.emitEvent !== false) {
+            this.markAsLoaded();
         }
-        return super.getDataFromRows(rows, options);
     }
-    toEntity(data) {
-        if (EntityUtils.isNotEntity(data)) {
-            const entity = new this.dataConstructor();
-            entity.fromObject(data);
-            return entity;
-        }
-        return data;
+    // Overwrite default signature
+    createNew(insertAt) {
+        this.asyncCreateNew(insertAt);
     }
-    updateDatasource(data, opts = { emitEvent: true }) {
-        const _super = Object.create(null, {
-            updateDatasource: { get: () => super.updateDatasource }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this._debug)
-                console.debug(`[table-datasource] Updating datasource with data:`, data);
-            yield _super.updateDatasource.call(this, data, opts);
-            if (opts.emitEvent) {
-                this.markAsLoaded();
-            }
-        });
+    connect(collectionViewer) {
+        // DEBUG console.debug("[entities-datasource] connect");
+        return super.connect(collectionViewer);
+    }
+    disconnect(collectionViewer) {
+        super.disconnect(collectionViewer);
+        this._stopWatching$.next();
     }
     waitIdle(debounceTimeMs) {
         return firstFalsePromise(this.loadingSubject
@@ -21742,60 +21991,34 @@ class EntitiesTableDataSource extends TableDataSource {
         ));
     }
     confirmCreate(row) {
-        const _super = Object.create(null, {
-            confirmCreate: { get: () => super.confirmCreate }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!(yield _super.confirmCreate.call(this, row)))
-                return false;
-            if (row.editing && row.validator) {
-                console.warn('[table-datasource] Row still has {editing: true} after confirmCreate()! Force editing to false');
-                row.validator.disable({ onlySelf: true, emitEvent: false });
-            }
-            return true;
-        });
+        if (!super.confirmCreate(row))
+            return false;
+        if (row.editing && row.validator) {
+            console.warn('[table-datasource] Row still has {editing: true} after confirmCreate()! Force editing to false');
+            row.validator.disable({ onlySelf: true, emitEvent: false });
+        }
+        return true;
     }
     confirmEdit(row) {
-        const _super = Object.create(null, {
-            confirmEdit: { get: () => super.confirmEdit }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!(yield _super.confirmEdit.call(this, row)))
-                return false;
-            if (row.editing && row.validator) {
-                console.warn('[table-datasource] Row still has {editing: true} after confirmCreate()! Force editing to false');
-                row.validator.disable({ onlySelf: true, emitEvent: false });
-            }
-            return true;
-        });
+        if (!super.confirmEdit(row))
+            return false;
+        if (row.editing && row.validator) {
+            console.warn('[table-datasource] Row still has {editing: true} after confirmCreate()! Force editing to false');
+            row.validator.disable({ onlySelf: true, emitEvent: false });
+        }
+        return true;
     }
     startEdit(row) {
-        const _super = Object.create(null, {
-            startEdit: { get: () => super.startEdit }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            if (row.editing)
-                return; // Already editing
-            if (this._debug)
-                console.debug('[table-datasource] Start to edit row', row);
-            const done = yield _super.startEdit.call(this, row);
-            if (done)
-                this._editingRowCount++;
-            return done;
-        });
+        if (this._debug)
+            console.debug('[table-datasource] Start to edit row', row);
+        row.startEdit();
+        this._editingRowCount++;
     }
-    cancel(row) {
-        const _super = Object.create(null, {
-            cancel: { get: () => super.cancel }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this._debug)
-                console.debug('[table-datasource] Cancelling row', row);
-            const done = yield _super.cancel.call(this, row);
-            if (done)
-                this._editingRowCount--;
-            return done;
-        });
+    cancelOrDelete(row) {
+        if (this._debug)
+            console.debug('[table-datasource] Cancelling or deleting row', row);
+        row.cancelOrDelete();
+        this._editingRowCount--;
     }
     handleError(error, message) {
         const errorMsg = error && error.message || error;
@@ -21810,77 +22033,59 @@ class EntitiesTableDataSource extends TableDataSource {
         throw error;
     }
     delete(id) {
-        const _super = Object.create(null, {
-            delete: { get: () => super.delete }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            // If new row: not need to propagate to the dataService
-            if (id === -1) {
-                return _super.delete.call(this, id);
-            }
-            const row = this.getRow(id);
-            if (!row) {
-                console.error(`[table-datasource] Row to delete with id=${id} not found`);
-                return;
-            }
-            this.markAsLoading();
-            try {
-                yield this.dataService.deleteAll([row.currentData], this.serviceOptions);
-                // Make sure row has been deleted (because GrapQHl cache remove can failed)
-                yield sleep(300);
+        // If new row: not need to propagate to the dataService
+        if (id === -1) {
+            return super.delete(id);
+        }
+        const row = this.getRow(id);
+        if (!row) {
+            console.error(`[table-datasource] Row to delete with id=${id} not found`);
+            return;
+        }
+        this.loadingSubject.next(true);
+        this.dataService.deleteAll([row.currentData], this.serviceOptions)
+            .catch(err => this.handleErrorPromise(err))
+            .then(() => {
+            setTimeout(() => {
+                // make sure row has been deleted (because GrapQHl cache remove can failed)
                 const present = this.getRow(id) === row;
-                if (present) {
-                    console.warn('[table-datasource] Force deletion of 1 row (Is service applying deletion to observable ?)');
-                    yield _super.delete.call(this, id);
-                }
-            }
-            catch (err) {
-                this.handleErrorPromise(err);
-            }
-            finally {
-                this.markAsLoaded();
-            }
+                if (present)
+                    super.delete(id);
+                this.loadingSubject.next(false);
+            }, 300);
         });
     }
     deleteAll(rows) {
-        const _super = Object.create(null, {
-            delete: { get: () => super.delete }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            this.markAsLoading();
-            const data = this.getDataFromRows(rows);
-            const rowsById = rows.reduce((res, row) => {
-                res[row.id] = row;
-                return res;
-            }, {});
-            const self = this;
-            try {
-                yield this.dataService.deleteAll(data, this.serviceOptions);
-                // Workaround, to be sure all rows has been deleted
-                // Sometimes, the service miss deletion, or GrapQHl cache remove failed
-                const rowNotDeleted = Object.getOwnPropertyNames(rowsById).reduce((res, id) => {
-                    const row = rowsById[id];
-                    const present = self.getRow(+id) === row;
-                    return present ? res.concat(row) : res;
-                }, []).sort((a, b) => a.id > b.id ? -1 : 1);
-                // Apply missing deletion
-                if (isNotEmptyArray(rowNotDeleted)) {
-                    console.warn(`[table-datasource] Force deletion of ${rowNotDeleted.length} rows (Is service applying deletion to observable ?)`);
-                    yield Promise.all(rowNotDeleted.map(r => _super.delete.call(this, r.id)));
-                }
-            }
-            catch (err) {
-                this.handleErrorPromise(err);
-            }
-            finally {
-                this.markAsLoaded();
+        this.markAsLoading();
+        const data = rows.map(r => r.currentData);
+        const rowsById = rows.reduce((res, row) => {
+            res[row.id] = row;
+            return res;
+        }, {});
+        const self = this;
+        const selfDelete = super.delete;
+        return this.dataService.deleteAll(data, this.serviceOptions)
+            .catch(err => this.handleErrorPromise(err))
+            .then(() => {
+            // Workaround, to be sure all rows has been deleted
+            // Sometimes, the service miss deletion, or GrapQHl cache remove failed
+            const rowNotDeleted = Object.getOwnPropertyNames(rowsById).reduce((res, id) => {
+                const row = rowsById[id];
+                const present = self.getRow(+id) === row;
+                return present ? res.concat(row) : res;
+            }, []).sort((a, b) => a.id > b.id ? -1 : 1);
+            // Apply missing deletion
+            if (isNotEmptyArray(rowNotDeleted)) {
+                console.warn(`[table-datasource] Force deletion of ${rowNotDeleted.length} rows (Is service applying deletion to observable ?)`);
+                rowNotDeleted.forEach(r => selfDelete.call(self, r.id));
             }
+            this.loadingSubject.next(false);
         });
     }
     getRows() {
-        return this.rowsSubject.toPromise();
+        return firstNotNilPromise(this.connect(null));
     }
-    createNew(insertAt) {
+    asyncCreateNew(insertAt) {
         const _super = Object.create(null, {
             createNew: { get: () => super.createNew }
         });
@@ -21888,39 +22093,22 @@ class EntitiesTableDataSource extends TableDataSource {
             if (this._creating)
                 return; // Avoid multiple call (should never occur)
             this._creating = true;
-            const done = yield _super.createNew.call(this, insertAt);
-            if (done && this.config.onRowCreated) {
-                const row = this.getRow(-1);
-                try {
-                    yield this.config.onRowCreated(row);
-                }
-                catch (err) {
-                    console.error(err && err.message || err, err);
-                    // Continue
+            _super.createNew.call(this, insertAt);
+            const row = this.getRow(-1);
+            if (row && this._options && this._options.onRowCreated) {
+                const res = this._options.onRowCreated(row);
+                // If async function, wait the end before ending
+                if (res instanceof Promise) {
+                    try {
+                        yield res;
+                    }
+                    catch (err) {
+                        console.error(err && err.message || err, err);
+                    }
                 }
             }
-            if (done)
-                this._editingRowCount++;
+            this._editingRowCount++;
             this._creating = false;
-            return done;
-        });
-    }
-    createRowValidator() {
-        const _super = Object.create(null, {
-            createRowValidator: { get: () => super.createRowValidator }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            const validator = yield _super.createRowValidator.call(this);
-            if (validator && this.config.onRowValidator) {
-                try {
-                    yield this.config.onRowValidator(validator);
-                }
-                catch (err) {
-                    console.error(err && err.message || err, err);
-                    // Continue
-                }
-            }
-            return validator;
         });
     }
     getData() {
@@ -21935,7 +22123,7 @@ class EntitiesTableDataSource extends TableDataSource {
         });
         return __awaiter(this, void 0, void 0, function* () {
             if (!this._fetchMoreFn)
-                return false;
+                return false; // Avoid multiple call
             if (this._editingRowCount > 0) {
                 console.warn('Cannot fetch more because still editing row');
                 return;
@@ -21949,10 +22137,9 @@ class EntitiesTableDataSource extends TableDataSource {
             if (isNotEmptyArray(res === null || res === void 0 ? void 0 : res.data))
                 return false;
             // Update the data source
-            // TODO review this, to keep existing rows, instead of creating new TableElement + validator !
             const existingData = yield this.getData();
-            yield _super.updateDatasource.call(this, existingData.concat(...res.data), opts);
-            // Store next fetchMore function
+            _super.updateDatasource.call(this, existingData.concat(...res.data), opts);
+            // Remember fetchMore
             this._fetchMoreFn = res.fetchMore;
             return true;
         });
@@ -21975,8 +22162,8 @@ EntitiesTableDataSource.decorators = [
 EntitiesTableDataSource.ctorParameters = () => [
     { type: Function },
     { type: undefined },
-    { type: undefined },
-    { type: undefined }
+    { type: ValidatorService },
+    { type: AppTableDataSourceOptions }
 ];
 
 const SETTINGS_DISPLAY_COLUMNS = 'displayColumns';
@@ -22368,6 +22555,7 @@ class AppTable {
         }
     }
     ngOnDestroy() {
+        var _a;
         this._subscription.unsubscribe();
         // Unsubscribe column value changes
         Object.keys(this._cellValueChangesDefs).forEach(col => this.stopCellValueChanges(col, true));
@@ -22392,6 +22580,7 @@ class AppTable {
         this.onError.unsubscribe();
         this._destroy$.next();
         this._destroy$.unsubscribe();
+        (_a = this._dataSource) === null || _a === void 0 ? void 0 : _a.ngOnDestroy();
     }
     updateView(res, opts) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -22433,7 +22622,7 @@ class AppTable {
             this._dataSourceLoadingSubscription.unsubscribe();
             this._subscription.remove(this._dataSourceLoadingSubscription);
         }
-        (_a = this._dataSource) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_a = this._dataSource) === null || _a === void 0 ? void 0 : _a.ngOnDestroy();
         this._dataSource = null;
     }
     addColumnDef(column) {
@@ -22488,15 +22677,18 @@ class AppTable {
         return true;
     }
     confirmAndForward(event, row) {
-        return __awaiter(this, void 0, void 0, function* () {
-            row = row || this.editedRow;
-            const done = yield this.confirmEditCreate(event, row);
-            if (done) {
-                // Edit next row
-                this.editRowById(event, row.id + 1, { focusColumn: this.firstUserColumn });
+        var _a;
+        row = row || this.editedRow;
+        if (!this.confirmEditCreate(event, row)) {
+            // If pending: Wait end of validation, then loop
+            if ((_a = row.validator) === null || _a === void 0 ? void 0 : _a.pending) {
+                return AppFormUtils.waitWhilePending(row.validator).then(() => this.confirmAndForward(event, row));
             }
-            return done;
-        });
+            return false;
+        }
+        // Edit next row
+        this.editRowById(event, row.id + 1, { focusColumn: this.firstUserColumn });
+        return true;
     }
     editRowById(event, id, opts) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -22520,44 +22712,48 @@ class AppTable {
      */
     confirmEditCreate(event, row) {
         var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            row = row || this.editedRow;
-            if (!row || !row.editing)
-                return true; // no row to confirm
-            // Stop event
-            event === null || event === void 0 ? void 0 : event.stopPropagation();
-            // Confirmation edition or creation
-            const done = yield row.confirmEditCreate();
-            if (done) {
-                // If edit finished, forget edited row
-                if (row === this.editedRow) {
-                    this.editedRow = undefined;
-                }
-                // Mark table as dirty (if row is dirty)
-                if ((_a = row.validator) === null || _a === void 0 ? void 0 : _a.dirty) {
-                    this.markAsDirty({ emitEvent: false /* because of resetError() */ });
-                }
-                // Clear error
-                this.resetError();
-                // Emit the confirm event
-                this.onConfirmEditCreateRow.next(row);
-            }
-            else if (row.validator) {
-                // NOT confirmed = row has error
-                if (this.debug) {
-                    console.warn('[table] Cannot confirm row, because invalid');
-                    AppFormUtils.logFormErrors(row.validator, '[table] ');
-                }
-                // fix: mark all controls as touched to show errors
-                row.validator.markAllAsTouched();
-                // Compute row error, and propagate to table's error
-                if (this.propagateRowError) {
-                    const error = this.getRowError(row);
-                    this.setError(error);
-                }
+        row = row || this.editedRow;
+        if (!row || !row.editing)
+            return true; // no row to confirm
+        // Stop event
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        // Confirmation edition or creation
+        const confirmed = row.confirmEditCreate();
+        if (confirmed) {
+            // If edit finished, forget edited row
+            if (row === this.editedRow) {
+                this.editedRow = undefined;
             }
-            return done;
-        });
+            // Mark table as dirty (if row is dirty)
+            if ((_a = row.validator) === null || _a === void 0 ? void 0 : _a.dirty) {
+                this.markAsDirty({ emitEvent: false /* because of resetError() */ });
+            }
+            // Clear error
+            this.resetError();
+            // Emit the confirm event
+            this.onConfirmEditCreateRow.next(row);
+            return true; // Continue
+        }
+        if (row.validator) {
+            // If pending: Wait end of validation, then loop
+            if (row.validator.pending) {
+                AppFormUtils.waitWhilePending(row.validator).then(() => this.confirmEditCreate(event, row));
+                return false;
+            }
+            // NOT confirmed = row has error
+            if (this.debug) {
+                console.warn('[table] Cannot confirm row, because invalid');
+                AppFormUtils.logFormErrors(row.validator, '[table] ');
+            }
+            // fix: mark all controls as touched to show errors
+            row.validator.markAllAsTouched();
+            // Compute row error, and propagate to table's error
+            if (this.propagateRowError) {
+                const error = this.getRowError(row);
+                this.setError(error);
+            }
+        }
+        return false;
     }
     cancelOrDelete(event, row, opts) {
         // Delete new row
@@ -22602,7 +22798,6 @@ class AppTable {
             // Keep edited row id (should be done BEFORE confirmEditCreate() )
             this.previouslyEditedRowId = opts.keepEditing ? ((((_a = this.editedRow) === null || _a === void 0 ? void 0 : _a.editing) ? this.editedRow.id : undefined) || ((_b = this.singleSelectedRow) === null || _b === void 0 ? void 0 : _b.id)) : undefined;
             const previouslyEditedData = opts.keepEditing ? (isNotNil(this.previouslyEditedRowId) && ((_c = this.editedRow) === null || _c === void 0 ? void 0 : _c.currentData) || ((_d = this.singleSelectedRow) === null || _d === void 0 ? void 0 : _d.currentData)) : undefined;
-            // TODO: remove this, has it redundant with dataSource.confirmAllRows() called in dataSource.save()
             if (!this.confirmEditCreate()) {
                 throw { code: ErrorCodes.TABLE_INVALID_ROW_ERROR, message: 'ERROR.TABLE_INVALID_ROW_ERROR' };
             }
@@ -23160,7 +23355,7 @@ class AppTable {
                     console.warn('[table] Opening row details, but data has no id!');
                     return false;
                 }
-                return yield this.router.navigate([id], {
+                return this.router.navigate(['.', id.toString()], {
                     relativeTo: this.route,
                     queryParams: {}
                 });
@@ -23257,9 +23452,7 @@ class AppTable {
     addRowToTable(insertAt) {
         return __awaiter(this, void 0, void 0, function* () {
             this.focusFirstColumn = true;
-            const done = yield this._dataSource.createNew(insertAt);
-            if (!done)
-                return undefined;
+            yield this._dataSource.asyncCreateNew(insertAt);
             this.editedRow = this._dataSource.getRow(-1);
             // Emit start editing event
             this.onStartEditingRow.emit(this.editedRow);
@@ -23390,64 +23583,59 @@ class AppTable {
         }
     }
     deleteNewRow(event, row) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (row.id !== -1)
-                throw new Error('Row must have id = -1');
-            event === null || event === void 0 ? void 0 : event.stopPropagation();
-            this.selection.clear();
-            this.editedRow = undefined; // unselect row
-            const done = yield this._dataSource.cancelOrDelete(row);
-            if (done) {
-                this.onCancelOrDeleteRow.next(row);
-                this.resetError();
-                this.totalRowCount--;
-                this.visibleRowCount--;
-            }
-            return done;
-        });
+        if (row.id !== -1)
+            throw new Error('Row must have id = -1');
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        this.selection.clear();
+        this.editedRow = undefined; // unselect row
+        this._dataSource.cancelOrDelete(row);
+        this.onCancelOrDeleteRow.next(row);
+        this.resetError();
+        this.totalRowCount--;
+        this.visibleRowCount--;
     }
     deleteExistingRow(event, row, opts) {
         // Make sure row will be cancelled, and NOT deleted
         if (row.id === -1)
             throw new Error('Row must have an id');
         if (event === null || event === void 0 ? void 0 : event.defaultPrevented)
-            return Promise.resolve(false); // SKip
+            return 0; // SKip
         event === null || event === void 0 ? void 0 : event.preventDefault();
-        return this.deleteRow(null, row, opts);
+        this.deleteRow(null, row, opts);
     }
     cancelExistingRow(event, row, opts) {
         var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            // Make sure row will be cancelled, and NOT deleted
-            if (row.id === -1 || !row.editing)
-                throw new Error('Row cannot be canceling, but only deleting');
-            const confirmed = (!opts || opts.interactive !== false);
-            // Ask user confirmation, if cancel
-            if (!confirmed && ((_a = row.validator) === null || _a === void 0 ? void 0 : _a.dirty) && (this.confirmBeforeCancel || this.onBeforeCancelRows.observers.length > 0)) {
-                event.stopPropagation();
-                const confirm = yield this.canCancelRows([row], opts);
-                // If not confirmed: stop
-                if (!confirm)
-                    return false;
-            }
-            const keepEditing = row.editing && (!opts || opts.keepEditing !== false);
-            this.editedRow = undefined; // unselect row
-            this._dataSource.cancelOrDelete(row);
-            this.onCancelOrDeleteRow.next(row);
-            // Mark row as pristine
-            this.checkIfRowPristine(row);
-            // Restore editing state
-            if (keepEditing) {
-                this.editRow(undefined, row);
-            }
-            return true;
-        });
+        // Make sure row will be cancelled, and NOT deleted
+        if (row.id === -1 || !row.editing)
+            throw new Error('Row cannot be canceling, but only deleting');
+        const confirmed = (!opts || opts.interactive !== false);
+        // Ask user confirmation, if cancel
+        if (!confirmed && ((_a = row.validator) === null || _a === void 0 ? void 0 : _a.dirty) && (this.confirmBeforeCancel || this.onBeforeCancelRows.observers.length > 0)) {
+            event.stopPropagation();
+            this.canCancelRows([row], opts)
+                .then(confirm => {
+                // If confirmed, loop
+                if (confirm)
+                    this.cancelExistingRow(event, row, { interactive: false });
+            });
+            return;
+        }
+        const keepEditing = row.editing && (!opts || opts.keepEditing !== false);
+        this.editedRow = undefined; // unselect row
+        this._dataSource.cancelOrDelete(row);
+        this.onCancelOrDeleteRow.next(row);
+        // Mark row as pristine
+        this.checkIfRowPristine(row);
+        // Restore editing state
+        if (keepEditing) {
+            this.editRow(undefined, row);
+        }
     }
     checkIfRowPristine(row, opts) {
         var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
             // Mark row as pristine
-            const markRowAsPristine = ((_a = this.dataSource) === null || _a === void 0 ? void 0 : _a.config.keepOriginalDataAfterConfirm) === true;
+            const markRowAsPristine = ((_a = this.dataSource) === null || _a === void 0 ? void 0 : _a.options.keepOriginalDataAfterConfirm) === true;
             if (markRowAsPristine) {
                 (_b = row.validator) === null || _b === void 0 ? void 0 : _b.markAsPristine();
                 // Check if table is now pristine
@@ -24255,6 +24443,12 @@ class AppEntityEditor extends AppTabEditor {
         this.onUpdateView.complete();
         this.onUpdateView.unsubscribe();
     }
+    waitIdle(opts) {
+        // Wait end of saving
+        if (this.saving)
+            return waitFor(() => this.saving !== true);
+        return super.waitIdle(opts);
+    }
     /**
      * Load data from the snapshot route
      *
@@ -24373,7 +24567,7 @@ class AppEntityEditor extends AppTabEditor {
             const idChanged = isNotNil(data.id)
                 && this.previousDataId !== undefined // Ignore if first loading (=undefined)
                 && this.previousDataId !== data.id;
-            opts = Object.assign({ updateRoute: this._autoUpdateRoute && idChanged && !this.loading, openTabIndex: this._autoOpenNextTab && idChanged && isNil(this.previousDataId) && this.computeNextTabIndex() }, opts);
+            opts = Object.assign({ updateRoute: this._autoUpdateRoute && idChanged && !this.loading }, opts);
             this.data = data;
             this.previousDataId = data.id || null;
             yield this.ready();
@@ -24424,18 +24618,25 @@ class AppEntityEditor extends AppTabEditor {
             // Save the opened tab into the queryParams
             this.queryParams.tab = this.selectedTabIndex;
             // Update route location
-            const forcedQueryParams = {};
-            forcedQueryParams[this._pathIdAttribute] = data && isNotNil(data.id) ? data.id : 'new';
-            if (data && isNotNil(data.id)) {
+            if (isNotNil(data === null || data === void 0 ? void 0 : data.id)) {
+                const queryParams = Object.assign({}, this.queryParams);
+                queryParams[this._pathIdAttribute] = data.id;
+                if (this.debug)
+                    console.debug('[entity-editor] Updating route using params: ', queryParams);
                 yield this.router.navigate(['.'], {
                     relativeTo: this.route,
-                    queryParams: Object.assign(Object.assign({}, this.queryParams), forcedQueryParams)
+                    queryParams
                 });
             }
+            // Move to ../new
             else {
+                const queryParams = Object.assign({}, this.queryParams);
+                queryParams[this._pathIdAttribute] = 'new';
+                if (this.debug)
+                    console.debug('[entity-editor] Updating route to \'../new\' using params: ', queryParams);
                 yield this.router.navigate(['..', 'new'], {
                     relativeTo: this.route,
-                    queryParams: Object.assign(Object.assign({}, this.queryParams), forcedQueryParams)
+                    queryParams
                 });
             }
             yield this.updateRoute(data, this.queryParams);
@@ -24445,7 +24646,7 @@ class AppEntityEditor extends AppTabEditor {
      * Update the route location, and open the next tab
      */
     updateTabIndex(tabIndex) {
-        if (isNotNil(tabIndex) && tabIndex > this.selectedTabIndex) {
+        if (isNotNil(tabIndex) && tabIndex !== this.selectedTabIndex) {
             this.selectedTabIndex = tabIndex;
             this.markForCheck();
         }
@@ -24501,6 +24702,8 @@ class AppEntityEditor extends AppTabEditor {
             if (this.debug)
                 console.debug('[data-editor] Saving data...');
             try {
+                // Compute next tab index (if enable)
+                const nextTabIndex = this._autoOpenNextTab && isNil(this.previousDataId) && this.computeNextTabIndex();
                 // Get data
                 const data = yield this.getValue();
                 this.disable();
@@ -24508,7 +24711,9 @@ class AppEntityEditor extends AppTabEditor {
                 const updatedData = yield this.dataService.save(data, opts);
                 yield this.onEntitySaved(updatedData);
                 // Update the view (e.g metadata)
-                yield this.updateView(updatedData, opts);
+                yield this.updateView(updatedData, Object.assign({ 
+                    // Open next tab only if user has not changed it
+                    openTabIndex: nextTabIndex > this._selectedTabIndex ? nextTabIndex : undefined }, opts));
                 // Subscribe to remote changes
                 if (!this._listenChangesSubscription)
                     this.startListenRemoteChanges();
@@ -24728,7 +24933,8 @@ class AppEntityEditor extends AppTabEditor {
             // If NOT data, then add to page history
             if (!this.isNewData) {
                 const page = yield this.computePageHistory(title);
-                return this.addToPageHistory(page);
+                if (page)
+                    return this.addToPageHistory(page);
             }
         });
     }
@@ -24741,6 +24947,8 @@ class AppEntityEditor extends AppTabEditor {
     }
     computePageHistory(title) {
         return __awaiter(this, void 0, void 0, function* () {
+            if (this.debug)
+                console.debug('[entity-editor] Computing page history, using url: ' + this.router.url);
             return {
                 title,
                 path: this.router.url
@@ -24771,7 +24979,8 @@ class AppEntityEditor extends AppTabEditor {
             fetchPolicy: 'no-cache' }, opts));
     }
     markForCheck() {
-        this.cd.markForCheck();
+        var _a;
+        (_a = this.cd) === null || _a === void 0 ? void 0 : _a.markForCheck();
     }
     /* -- private functions -- */
     /**
@@ -24856,7 +25065,7 @@ AppInMemoryTable.ctorParameters = () => [
     { type: Function },
     { type: InMemoryEntitiesService },
     { type: ValidatorService },
-    { type: undefined },
+    { type: AppTableDataSourceOptions },
     { type: undefined }
 ];
 AppInMemoryTable.propDecorators = {
@@ -25880,7 +26089,7 @@ class PersonService extends BaseEntityService {
     }
     suggest(value, filter, sortBy, sortDirection) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (ReferentialUtils.isNotEmpty(value))
+            if (EntityUtils.isNotEmpty(value, 'id'))
                 return { data: [value] };
             value = (typeof value === 'string' && value !== '*') && value || undefined;
             sortBy = sortBy || filter.searchAttribute || (filter.searchAttributes && filter.searchAttributes[0]);
@@ -26032,11 +26241,7 @@ class UsersPage extends AppTable {
             switch (authTokenType) {
                 case "basic":
                     this.setShowColumn('pubkey', false, { emitEvent: false });
-                    this.setShowColumn('username', true, { emitEvent: false });
-                    this.setShowColumn('usernameExtranet', true, { emitEvent: false });
-                    break;
                 case "basic-and-token":
-                    this.setShowColumn('pubkey', true, { emitEvent: false });
                     this.setShowColumn('username', true, { emitEvent: false });
                     this.setShowColumn('usernameExtranet', true, { emitEvent: false });
                     break;
@@ -26248,6 +26453,7 @@ class AutocompleteTestPage {
             missingEntity: [null, SharedValidators.entity],
             disableEntity: [null, SharedValidators.entity],
             entities: [null, SharedFormArrayValidators.requiredArrayMinLength(1)],
+            farEntity: [null, SharedValidators.entity]
         });
         this.form.get('disableEntity').disable();
     }
@@ -26256,8 +26462,7 @@ class AutocompleteTestPage {
         this.autocompleteFields.add('entity-suggestFn', {
             suggestFn: (value, filter) => this.suggest(value, filter),
             attributes: ['label', 'name'],
-            displayWith: this.entityToString,
-            showAllOnFocus: false
+            displayWith: this.entityToString
         });
         // From items array
         this.autocompleteFields.add('entity-items', {
@@ -26285,22 +26490,34 @@ class AutocompleteTestPage {
             attributes: ['label', 'name', 'description', 'comments'],
             displayWith: this.entityToString
         });
-        // For mutliple value
+        // Far entity, in the list
+        this.autocompleteFields.add('entity-far', {
+            suggestFn: (value, filter) => this.suggest(value, filter),
+            attributes: ['label', 'name'],
+            displayWith: this.entityToString
+        });
+        // For multiple value
         this.autocompleteFields.add('entities-items-filter', {
             service: {
                 suggest: (value, filter) => this.suggest(value, filter)
             },
             attributes: ['label', 'name'],
             multiple: true
-            //displayWith: this.entitiesToString
         });
-        this.loadData();
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.farEntityField.suggestLengthThreshold = 2;
+            this.farEntityField.reloadItems();
+        }, 2000);
+        setTimeout(() => this.loadData(), 1000);
     }
     // Load the form with data
     loadData() {
         return __awaiter(this, void 0, void 0, function* () {
             const 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'
@@ -26337,7 +26554,7 @@ class AutocompleteTestPage {
                     total,
                     data: res.data,
                     fetchMore: (variables) => __awaiter(this, void 0, void 0, function* () {
-                        yield sleep(1000);
+                        yield sleep(1000); // Simulate access to server
                         return this.suggest(value, Object.assign(Object.assign({}, filter), variables));
                     })
                 };
@@ -26380,12 +26597,15 @@ class AutocompleteTestPage {
 AutocompleteTestPage.decorators = [
     { type: Component, args: [{
                 selector: 'app-autocomplete-test',
-                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar>\n    <a mat-tab-link\n       [active]=\"mode==='mobile'\"\n       (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='desktop'\"\n       (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='memory'\"\n       (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link\n       [active]=\"mode==='temp'\"\n       (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!--<ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n    </ion-grid>-->\n\n\n    <ion-grid *ngIf=\"mode === 'memory'\">\n\n      <!-- debugging memory leak -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Debug memory leak</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Items type\">\n            <mat-select (selectionChange)=\"memoryAutocompleteFieldName=$event.value\" [value]=\"memoryAutocompleteFieldName\">\n              <mat-option value=\"entity-$items\">Observable</mat-option>\n              <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n        <ion-col size=\"1\" class=\"ion-no-padding\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Mobile ?\">\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field formControlName=\"entity\"\n                                  *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n                                  [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                                  [mobile]=\"memoryMobile\"\n                                  [equals]=\"equals\"\n                                  [logPrefix]=\"'[combo-memory-leak]'\">\n          </mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  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                  Entity far in the list (not in first page)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre style=\"white-space: normal !important;\">value: {{stringify(form.controls.farEntity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"farEntity\" #farEntityField\n                                      [config]=\"autocompleteFields.get('entity-far')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-far]'\"\n                                      [debug]=\"true\"\n                                      [required]=\"true\"\n                                      [clearable]=\"true\"\n                                      placeholder=\"Far entity (in the list)\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-1]'\"\n                                      [required]=\"true\"\n                                      placeholder=\"Suggest field\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Items is an Observable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-observable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [clearable]=\"true\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      suggestLengthThreshold=\"3\"\n                                      [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n                                      required\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      mobile=\"true\"\n                                      multiple=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Change filter\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre></pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-button (click)=\"updateFilter(filterChangeField, 'entity-items-filter')\">Filter on: {{autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}</ion-button>\n                  </ion-col>\n                  <ion-col>\n                    <mat-autocomplete-field formControlName=\"entity\" #filterChangeField\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-filter]'\"\n                    ></mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"min-width-large\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"true\"\n                                      class=\"min-width-large\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Fullscreen\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-mobile-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Desktop mode -->\n    <ion-grid *ngIf=\"mode === 'desktop'\">\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Desktop mode</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  items from suggest function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [clearable]=\"true\"\n                                      [logPrefix]=\"'[combo-desktop-suggest]'\">\n              </mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      suggestLengthThreshold=\"3\"\n                                      [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an array\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: [], value: {{stringify(form.controls.entity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items')\"\n                                      [logPrefix]=\"'[combo-desktop-array-1]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      mobile=\"false\"\n                                      multiple=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-missing]'\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size panel\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-disable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                      [readonly]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"mat-autocomplete-panel-full-size\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      class=\"mat-autocomplete-panel-full-size\"\n                                      panelWidth=\"100vw\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelWidth: string</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                  <ion-col size=\"3\">\n                    <mat-checkbox #showIcons [checked]=\"false\">\n                      Icons ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"false\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                      <mat-icon matPrefix *ngIf=\"showIcons.checked\">keyboard_arrow_right</mat-icon>\n                      <mat-icon matSuffix *ngIf=\"showIcons.checked\">keyboard_arrow_left</mat-icon>\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
             },] }
 ];
 AutocompleteTestPage.ctorParameters = () => [
     { type: FormBuilder }
 ];
+AutocompleteTestPage.propDecorators = {
+    farEntityField: [{ type: ViewChild, args: ['farEntityField',] }]
+};
 
 class LatLongTestPage {
     constructor(formBuilder) {
@@ -26446,20 +26666,20 @@ class LatLongTestPage {
 LatLongTestPage.decorators = [
     { type: Component, args: [{
                 selector: 'app-latlong-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>Lat/Long field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!-- Empty value -->\n    <form *ngIf=\"form.get('empty') as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row><ion-col><ion-text><h4>Empty, with defaults</h4></ion-text></ion-col></ion-row>\n\n      <ion-row >\n\n        <!-- DD Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Format DD, defaultSign '-'\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"latitude\"\n                                       type=\"latitude\"\n                                       latLongPattern=\"DD\"\n                                       defaultSign=\"-\"\n                                       placeholder=\"Latitude\">\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"longitude\"\n                                       type=\"longitude\"\n                                       latLongPattern=\"DD\"\n                                       defaultSign=\"-\"\n                                       placeholder=\"Longitude\">\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix\n                              (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Format DDMM, defaultSign '+'\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"latitude\"\n                                       type=\"latitude\"\n                                       latLongPattern=\"DDMM\"\n                                       defaultSign=\"+\"\n                                       placeholder=\"Latitude\">\n\n                      <mat-icon matPrefix >room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix\n                              (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"longitude\"\n                                       type=\"longitude\"\n                                       latLongPattern=\"DDMM\"\n                                       defaultSign=\"+\"\n                                       placeholder=\"Longitude\">\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix\n                              (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Mobile + DDMM -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Mobile=true\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"latitude\"\n                                       type=\"latitude\"\n                                       latLongPattern=\"DDMM\"\n                                       defaultSign=\"+\"\n                                       placeholder=\"Latitude\"\n                                       mobile=\"true\">\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"longitude\"\n                                       type=\"longitude\"\n                                       latLongPattern=\"DDMM\"\n                                       defaultSign=\"+\"\n                                       placeholder=\"Longitude\">\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n    </form>\n\n    <form *ngIf=\"form.get('enable') as formGroup\" [formGroup]=\"formGroup\">\n      <ion-grid>\n        <!-- With value -->\n        <ion-row><ion-col><ion-text><h4>With value</h4></ion-text></ion-col></ion-row>\n\n        <ion-row>\n\n          <!-- DD -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">\n                    Format DD\n                  </ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"latitude\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DD\"\n                                         placeholder=\"Latitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"longitude\"\n                                         type=\"longitude\"\n                                         latLongPattern=\"DD\"\n                                         placeholder=\"Longitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- DDMMSS -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">\n                    Format DDMM\n                  </ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"latitude\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Latitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"longitude\"\n                                         type=\"longitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Longitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n\n          <!-- DDMMSS -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">\n                    Format DDMMSS\n                  </ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"latitude\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DDMMSS\"\n                                         placeholder=\"Latitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"longitude\"\n                                         type=\"longitude\"\n                                         latLongPattern=\"DDMMSS\"\n                                         placeholder=\"Longitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <!-- Disable  -->\n    <form *ngIf=\"form.get('disable') as formGroup\" [formGroup]=\"formGroup\">\n      <ion-grid>\n        <ion-row><ion-col><ion-text><h4>Disabled control</h4></ion-text></ion-col></ion-row>\n        <ion-row>\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-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"latitude\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Latitude\">\n                        <mat-icon matPrefix>room</mat-icon>\n                        <mat-icon matSuffix>gps_fixed</mat-icon>\n                      </mat-latlong-field>\n                    </ion-col>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"longitude\"\n                                         type=\"longitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Longitude\">\n                        <mat-icon matPrefix>room</mat-icon>\n                        <button type=\"button\" mat-icon-button matSuffix\n                                (click)=\"geoPosition($event)\">\n                          <mat-icon>gps_fixed</mat-icon>\n                        </button>\n                      </mat-latlong-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                    Readonly (control is enable)\n                  </ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n\n                <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                </mat-checkbox>\n\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field #readonlyField [formControl]=\"form.get('enable.latitude')\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Latitude\"\n                                         [readonly]=\"true\">\n                        <mat-icon matPrefix>room</mat-icon>\n                        <mat-icon matSuffix>gps_fixed</mat-icon>\n                      </mat-latlong-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\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>Lat/Long field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!-- Empty value -->\n    <form *ngIf=\"form.get('empty') as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row><ion-col><ion-text><h4>Empty, with defaults</h4></ion-text></ion-col></ion-row>\n\n      <ion-row >\n\n        <!-- DD Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Format DD, defaultSign '-'\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"latitude\"\n                                       type=\"latitude\"\n                                       latLongPattern=\"DD\"\n                                       defaultSign=\"-\"\n                                       placeholder=\"Latitude\">\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"longitude\"\n                                       type=\"longitude\"\n                                       latLongPattern=\"DD\"\n                                       defaultSign=\"-\"\n                                       placeholder=\"Longitude\">\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix\n                              (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Format DDMM, defaultSign '+'\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"latitude\"\n                                       type=\"latitude\"\n                                       latLongPattern=\"DDMM\"\n                                       defaultSign=\"+\"\n                                       placeholder=\"Latitude\">\n\n                      <mat-icon matPrefix >room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix\n                              (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"longitude\"\n                                       type=\"longitude\"\n                                       latLongPattern=\"DDMM\"\n                                       defaultSign=\"+\"\n                                       placeholder=\"Longitude\">\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix\n                              (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n    </ion-grid>\n    </form>\n\n    <form *ngIf=\"form.get('enable') as formGroup\" [formGroup]=\"formGroup\">\n      <ion-grid>\n        <!-- With value -->\n        <ion-row><ion-col><ion-text><h4>With value</h4></ion-text></ion-col></ion-row>\n\n        <ion-row>\n\n          <!-- DD -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">\n                    Format DD\n                  </ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"latitude\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DD\"\n                                         placeholder=\"Latitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"longitude\"\n                                         type=\"longitude\"\n                                         latLongPattern=\"DD\"\n                                         placeholder=\"Longitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- DDMMSS -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">\n                    Format DDMM\n                  </ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"latitude\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Latitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"longitude\"\n                                         type=\"longitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Longitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n\n          <!-- DDMMSS -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">\n                    Format DDMMSS\n                  </ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"latitude\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DDMMSS\"\n                                         placeholder=\"Latitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"longitude\"\n                                         type=\"longitude\"\n                                         latLongPattern=\"DDMMSS\"\n                                         placeholder=\"Longitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <!-- Disable  -->\n    <form *ngIf=\"form.get('disable') as formGroup\" [formGroup]=\"formGroup\">\n      <ion-grid>\n        <ion-row><ion-col><ion-text><h4>Disabled control</h4></ion-text></ion-col></ion-row>\n        <ion-row>\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-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"latitude\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Latitude\">\n                        <mat-icon matPrefix>room</mat-icon>\n                        <mat-icon matSuffix>gps_fixed</mat-icon>\n                      </mat-latlong-field>\n                    </ion-col>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"longitude\"\n                                         type=\"longitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Longitude\">\n                        <mat-icon matPrefix>room</mat-icon>\n                        <button type=\"button\" mat-icon-button matSuffix\n                                (click)=\"geoPosition($event)\">\n                          <mat-icon>gps_fixed</mat-icon>\n                        </button>\n                      </mat-latlong-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                    Readonly (control is enable)\n                  </ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n\n                <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                </mat-checkbox>\n\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field #readonlyField [formControl]=\"form.get('enable.latitude')\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Latitude\"\n                                         [readonly]=\"true\">\n                        <mat-icon matPrefix>room</mat-icon>\n                        <mat-icon matSuffix>gps_fixed</mat-icon>\n                      </mat-latlong-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n  </form>\n\n</ion-content>\n"
             },] }
 ];
 LatLongTestPage.ctorParameters = () => [
     { type: FormBuilder }
 ];
 
-const moment$5 = momentImported;
+const moment$6 = momentImported;
 class SwipeTestPage {
     constructor(formBuilder, dateFormatPipe) {
         this.formBuilder = formBuilder;
         this.dateFormatPipe = dateFormatPipe;
         this.$dates = new BehaviorSubject(undefined);
-        this._today = moment$5().startOf('day');
+        this._today = moment$6().startOf('day');
         this.form = formBuilder.group({
             empty: [null, Validators.required],
             date: [null, Validators.compose([Validators.required, SharedValidators.validDate])],
@@ -26472,7 +26692,7 @@ class SwipeTestPage {
     ngOnInit() {
         const dates = [];
         for (let d = 0; d < 7; d++) {
-            dates[d] = moment$5(this._today).add(d - 3, 'day');
+            dates[d] = moment$6(this._today).add(d - 3, 'day');
         }
         this.$dates.next(dates);
         this.loadData();
@@ -26513,7 +26733,7 @@ SwipeTestPage.ctorParameters = () => [
     { type: DateFormatPipe }
 ];
 
-const moment$6 = momentImported;
+const moment$7 = momentImported;
 class DateTimeTestPage {
     constructor(platform, formBuilder, cd) {
         this.platform = platform;
@@ -26525,7 +26745,8 @@ class DateTimeTestPage {
         this.memoryMobile = true;
         this.stringify = JSON.stringify;
         this.form = formBuilder.group({
-            empty: [null, Validators.required],
+            empty: [null],
+            emptyRequired: [null, Validators.required],
             enable: [null, Validators.required],
             disable: [null, Validators.required],
             readonly: [null]
@@ -26544,9 +26765,10 @@ class DateTimeTestPage {
     // Load the form with data
     loadData() {
         return __awaiter(this, void 0, void 0, function* () {
-            const now = moment$6();
+            const now = moment$7();
             const data = {
-                empty: toDateISOString(now.clone().add(2, 'hours')),
+                empty: null,
+                emptyRequired: null,
                 enable: toDateISOString(now),
                 disable: now,
                 readonly: now
@@ -26596,7 +26818,7 @@ class DateTimeTestPage {
 DateTimeTestPage.decorators = [
     { type: Component, args: [{
                 selector: 'app-data-time-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>Date/Time field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <!-- debugging memory leak -->\n      <ion-row><ion-col><ion-text><h4>Debug memory leak</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\">Start timer</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n        </ion-col>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput type=\"text\" hidden>\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [value]=\"memoryMobile\">\n              Mobile ?\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n        <ion-col>\n          <mat-date-time-field formControlName=\"empty\"\n                               *ngIf=\"!memoryHide\"\n                               placeholder=\"Date/Time\"\n                               [required]=\"true\"\n                               [mobile]=\"memoryMobile\"\n                               [clearable]=\"true\">\n            <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n          </mat-date-time-field>\n        </ion-col>\n      </ion-row>\n\n      <!-- Mobile mode -->\n      <ion-row><ion-col><ion-text><h4>Mobile mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <!-- debug console -->\n      <ion-row>\n        <!-- buttons -->\n        <ion-col size=\"2\">\n          <!-- submit form -->\n          <ion-button (click)=\"doSubmit($event)\"\n                      fill=\"outline\">\n            <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n\n          <!-- clear log  -->\n          <ion-button (click)=\"clearLogPanel()\"\n                      fill=\"outline\">\n            <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </ion-col>\n        <ion-col size=\"10\" *ngIf=\"showLogPanel\">\n          <ion-text color=\"primary\">Log:<br/></ion-text>\n          <div class=\"ion-padding-start\">\n            <ion-text color=\"medium\">\n              <small [innerHTML]=\"logContent\"></small>\n            </ion-text>\n          </div>\n        </ion-col>\n      </ion-row>\n\n      <!-- Desktop mode -->\n      <ion-row><ion-col><ion-text><h4>Desktop mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Readonly  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly toggle\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.readonly.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-date-time-field #readonlyField formControlName=\"readonly\"\n                                   placeholder=\"Date/Time\"\n                                   [readonly]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\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>Date/Time field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <!-- debugging memory leak -->\n      <ion-row><ion-col><ion-text><h4>Debug memory leak</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\">Start timer</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n        </ion-col>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput type=\"text\" hidden>\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [value]=\"memoryMobile\">\n              Mobile ?\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n        <ion-col>\n          <mat-date-time-field formControlName=\"emptyRequired\"\n                               *ngIf=\"!memoryHide\"\n                               placeholder=\"Date/Time\"\n                               [required]=\"true\"\n                               [mobile]=\"memoryMobile\"\n                               [clearable]=\"true\">\n            <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n          </mat-date-time-field>\n        </ion-col>\n      </ion-row>\n\n      <!-- Mobile mode -->\n      <ion-row><ion-col><ion-text><h4>Mobile mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty value + required -->\n        <ion-col>\n\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"emptyRequired\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <!-- debug console -->\n      <ion-row>\n        <!-- buttons -->\n        <ion-col size=\"2\">\n          <!-- submit form -->\n          <ion-button (click)=\"doSubmit($event)\"\n                      fill=\"outline\">\n            <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n\n          <!-- clear log  -->\n          <ion-button (click)=\"clearLogPanel()\"\n                      fill=\"outline\">\n            <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </ion-col>\n        <ion-col size=\"10\" *ngIf=\"showLogPanel\">\n          <ion-text color=\"primary\">Log:<br/></ion-text>\n          <div class=\"ion-padding-start\">\n            <ion-text color=\"medium\">\n              <small [innerHTML]=\"logContent\"></small>\n            </ion-text>\n          </div>\n        </ion-col>\n      </ion-row>\n\n      <!-- Desktop mode -->\n      <ion-row><ion-col><ion-text><h4>Desktop mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty required value -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"emptyRequired\"\n                                   placeholder=\"Date/Time\"\n                                   required\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Readonly  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly toggle\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.readonly.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-date-time-field #readonlyField formControlName=\"readonly\"\n                                   placeholder=\"Date/Time\"\n                                   [readonly]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n</ion-content>\n"
             },] }
 ];
 DateTimeTestPage.ctorParameters = () => [
@@ -26788,7 +27010,7 @@ NumpadTestPage.ctorParameters = () => [
     { type: FormBuilder }
 ];
 
-const moment$7 = momentImported;
+const moment$8 = momentImported;
 class DateTestPage {
     constructor(formBuilder, cd) {
         this.formBuilder = formBuilder;
@@ -26821,7 +27043,7 @@ class DateTestPage {
     // Load the form with data
     loadData() {
         return __awaiter(this, void 0, void 0, function* () {
-            const now = moment$7();
+            const now = moment$8();
             const nowAtMahe = now.clone().tz(this.timezone).startOf('day');
             const data = {
                 empty: null,
@@ -27567,5 +27789,5 @@ CoreTestingModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_MENU_ITEMS, APP_TESTING_PAGES, AboutModal, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, Alerts, AndroidOsEnvironment, AnimationState, AppEditor, AppEditorOptions, AppEntityEditor, AppForm, AppFormField, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppInMemoryTable, AppInstallUpgradeCard, AppListForm, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppTabEditor, AppTabEditorOptions, AppTable, AppTableUtils, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayLengthPipe, ArrayPluckPipe, AudioProvider, AuthForm, AuthGuardService, AuthModal, AutocompleteTestPage, AutofocusDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CoreTestingModule, CryptoService, DATE_ISO_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFromNowPipe, DateTimeTestPage, DateUtils, Department, DepartmentToStringPipe, DragAndDropDirective, DurationPipe, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesService, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, Fragments$1 as Fragments, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNotNilOrBlankPipe, IsNotOnFieldModePipe, IsOnFieldModePipe, JobUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatBadgeIconDirective, MatBooleanField, MatChipsField, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItems, MenuService, Message, MessageFilter, MessageForm, MessageModal, MessageService, MessageTypeList, MessageTypes, ModalToolbarComponent, NetworkService, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, OddPipe, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialUtils, ReferentialValidatorService, RegisterConfirmPage, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, SettingsPage, SharedAsyncValidators, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBadgeIconModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedValidators, SocialErrorCodes, SocialModule, Software, StartableService, StatusById, StatusIds, StatusList, StrIncludesPipe, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TextForm, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ToStringPipe, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UserEvent, UserEventFilter, UserEventFragments, UserEventService, UserEventTypes, UserEventsTable, UserSettings, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, isAndroid, isBlankString, isControlHasInput, isCordova, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isProgressEvent, isResponseEvent, isTouchUi, isWindows, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, updateValueAndValidity, waitFor, waitForTrue, waitIdle, waitWhilePending, ɵ0, CustomReuseStrategy as ɵa, MatNumpadDomService as ɵb, isFocusableElement as ɵc, RegisterForm as ɵd, AccountValidatorService as ɵe, RegisterModal as ɵf, UserSettingsValidatorService as ɵg, LocalSettingsValidatorService as ɵh, AppIconComponent as ɵi, DateTestPage as ɵj, NumpadTestPage as ɵk, MatBadgeIconTestPage as ɵl, ToastTestingModule as ɵm, ToastTestingPage as ɵn };
+export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_MENU_ITEMS, APP_TESTING_PAGES, AboutModal, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, Alerts, AndroidOsEnvironment, AnimationState, AppEditor, AppEditorOptions, AppEntityEditor, AppForm, AppFormField, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppInMemoryTable, AppInstallUpgradeCard, AppListForm, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppTabEditor, AppTabEditorOptions, AppTable, AppTableDataSourceOptions, AppTableUtils, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayLengthPipe, ArrayPluckPipe, AudioProvider, AuthForm, AuthGuardService, AuthModal, AutocompleteTestPage, AutofocusDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CoreTestingModule, CryptoService, DATE_ISO_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_MENU_SHOW_WHEN, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFromNowPipe, DateTimeTestPage, DateUtils, Department, DepartmentToStringPipe, DragAndDropDirective, DurationPipe, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesService, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe, Fragments$1 as Fragments, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNotNilOrBlankPipe, IsNotOnFieldModePipe, IsOnFieldModePipe, JobUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatBadgeIconDirective, MatBooleanField, MatChipsField, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItems, MenuService, Message, MessageFilter, MessageForm, MessageModal, MessageService, MessageTypeList, MessageTypes, MimeTypes, ModalToolbarComponent, NetworkService, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, OddPipe, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialUtils, ReferentialValidatorService, RegisterConfirmPage, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, SettingsPage, SharedAsyncValidators, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBadgeIconModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedValidators, SocialErrorCodes, SocialModule, Software, StartableService, StatusById, StatusIds, StatusList, StrIncludesPipe, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TextForm, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ToStringPipe, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UriUtils, UserEvent, UserEventFilter, UserEventFragments, UserEventService, UserEventTypes, UserEventsTable, UserSettings, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, escapeRegExp, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, isAndroid, isBlankString, isControlHasInput, isCordova, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isProgressEvent, isResponseEvent, isTouchUi, isWindows, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moment$5 as moment, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, tz, uncapitalizeFirstLetter, updateValueAndValidity, waitFor, waitForTrue, waitIdle, waitWhilePending, ɵ0, CustomReuseStrategy as ɵa, MatNumpadDomService as ɵb, isFocusableElement as ɵc, RegisterForm as ɵd, AccountValidatorService as ɵe, RegisterModal as ɵf, UserSettingsValidatorService as ɵg, LocalSettingsValidatorService as ɵh, AppUpdateOfflineModeCard as ɵi, AppIconComponent as ɵj, DateTestPage as ɵk, NumpadTestPage as ɵl, MatBadgeIconTestPage as ɵm, ToastTestingModule as ɵn, ToastTestingPage as ɵo };
 //# sourceMappingURL=sumaris-net.ngx-components.js.map