@sumaris-net/ngx-components 1.17.1 → 1.18.1

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

@@ -1,9 +1,12 @@
-import { InjectionToken, EventEmitter, Component, forwardRef, ChangeDetectionStrategy, ChangeDetectorRef, Optional, Input, Output, ViewChild, ɵɵdefineInjectable, ɵɵinject, Pipe, Injectable, Directive, Inject, NgModule, ElementRef, TemplateRef, ViewContainerRef, HostBinding, HostListener, ViewChildren, ComponentFactoryResolver, ApplicationRef, INJECTOR, Injector, Renderer2, ViewEncapsulation } from '@angular/core';
+import * as i0 from '@angular/core';
+import { InjectionToken, EventEmitter, Component, forwardRef, ChangeDetectionStrategy, ChangeDetectorRef, Optional, Input, Output, ViewChild, Pipe, Injectable, Directive, Inject, NgModule, ElementRef, TemplateRef, ViewContainerRef, HostBinding, HostListener, ViewChildren, ComponentFactoryResolver, ApplicationRef, Injector, Renderer2, ViewEncapsulation } from '@angular/core';
+import * as i1$3 from '@angular/common';
 import { CommonModule, DOCUMENT, Location } from '@angular/common';
 import { CdkTableModule } from '@angular/cdk/table';
 import { A11yModule } from '@angular/cdk/a11y';
 import { OverlayModule, OverlayContainer, FullscreenOverlayContainer, Overlay } from '@angular/cdk/overlay';
 import { ScrollingModule } from '@angular/cdk/scrolling';
+import * as i1$2 from '@angular/material/core';
 import { DateAdapter, MatCommonModule, MatRippleModule } from '@angular/material/core';
 import { MatTableModule, MatTable, MatColumnDef } from '@angular/material/table';
 import { MatSortModule, MatSort } from '@angular/material/sort';
@@ -27,52 +30,63 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i2$1 from '@angular/material/dialog';
 import { MatDialogModule, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
 import { MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteModule, MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '@angular/material/autocomplete';
 import { __awaiter, __decorate } from 'tslib';
+import * as i1$6 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormGroupDirective, AbstractControl, FormGroup, FormArray, FormControl, ReactiveFormsModule, Validators, 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 { trigger, transition, style, animate, state } from '@angular/animations';
+import * as i1$1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import * as i1$4 from '@ionic/angular';
 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 * as i1 from '@angular/material-moment-adapter';
 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';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { trigger, state, style, transition, animate } from '@angular/animations';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatChipsModule } from '@angular/material/chips';
+import * as i3$3 from '@angular/router';
 import { Router, ActivatedRoute, RouterModule, RouteReuseStrategy } from '@angular/router';
+import * as i1$5 from '@angular/platform-browser';
 import { HammerGestureConfig, EventManager } from '@angular/platform-browser';
+import * as i2$2 from '@angular/common/http';
 import { HttpResponse, HttpClient, HttpHeaders, HttpEventType, HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { ColorPickerModule } from 'ngx-color-picker';
-import { NativeAudio as NativeAudio$1 } from '@ionic-native/native-audio/ngx';
-import { Vibration as Vibration$1 } from '@ionic-native/vibration/ngx';
+import { NativeAudio } from '@ionic-native/native-audio/ngx';
+import { Vibration } from '@ionic-native/vibration/ngx';
 import { AudioManagement } from '@ionic-native/audio-management/ngx';
-import { NativeAudio } from '@ionic-native/native-audio/ngx/index';
-import { Vibration } from '@ionic-native/vibration/ngx/index';
-import { AudioManagement as AudioManagement$1 } from '@ionic-native/audio-management/ngx/index';
+import * as i2 from '@ionic-native/native-audio/ngx/index';
+import * as i3 from '@ionic-native/vibration/ngx/index';
+import * as i4 from '@ionic-native/audio-management/ngx/index';
 import * as uuidv4Imported from 'uuid/v4';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { MarkdownModule } from 'ngx-markdown';
 import { sign, box, hash, verify } from 'tweetnacl';
+import * as i3$1 from '@ionic/storage';
 import { Storage, IonicStorageModule } from '@ionic/storage';
 import 'zone.js/dist/zone-error';
-import { SplashScreen as SplashScreen$1 } from '@ionic-native/splash-screen/ngx';
-import { Connection, Network as Network$1 } from '@ionic-native/network/ngx';
-import { CacheService as CacheService$1, CacheModule } from 'ionic-cache';
-import { CacheService } from 'ionic-cache/dist/cache.service';
-import { Network } from '@ionic-native/network/ngx/index';
-import { SplashScreen } from '@ionic-native/splash-screen/ngx/index';
-import { StatusBar as StatusBar$1 } from '@ionic-native/status-bar/ngx';
+import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+import { Connection, Network } from '@ionic-native/network/ngx';
+import { CacheService, CacheModule } from 'ionic-cache';
+import * as i6 from 'ionic-cache/dist/cache.service';
+import * as i9 from '@ionic-native/network/ngx/index';
+import * as i10 from '@ionic-native/splash-screen/ngx/index';
+import { StatusBar } from '@ionic-native/status-bar/ngx';
+import * as i2$4 from '@angular/cdk/platform';
 import { Platform as Platform$1 } from '@angular/cdk/platform';
-import { InAppBrowser as InAppBrowser$1 } from '@ionic-native/in-app-browser/ngx';
+import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
 import { ApolloLink, NetworkStatus, InMemoryCache, ApolloClient, gql } from '@apollo/client/core';
+import * as i2$3 from 'apollo-angular';
 import { Apollo } from 'apollo-angular';
 import { WebSocketLink } from '@apollo/client/link/ws';
 import { getMainDefinition } from '@apollo/client/utilities';
@@ -80,13 +94,14 @@ import { RetryLink } from '@apollo/client/link/retry';
 import QueueLink from 'apollo-link-queue';
 import SerializingLink from 'apollo-link-serialize';
 import loggerLink from 'apollo-link-logger';
+import * as i3$2 from 'apollo-angular/http';
 import { HttpLink } from 'apollo-angular/http';
 import { IonicStorageWrapper, persistCache } from 'apollo3-cache-persist';
-import { NotificationVisibility, Downloader as Downloader$1 } from '@ionic-native/downloader/ngx';
-import { StatusBar } from '@ionic-native/status-bar/ngx/index';
-import { Keyboard as Keyboard$1 } from '@ionic-native/keyboard/ngx/index';
-import { InAppBrowser } from '@ionic-native/in-app-browser/ngx/index';
-import { Downloader } from '@ionic-native/downloader/ngx/index';
+import { NotificationVisibility, Downloader } from '@ionic-native/downloader/ngx';
+import * as i14 from '@ionic-native/status-bar/ngx/index';
+import * as i15 from '@ionic-native/keyboard/ngx/index';
+import * as i17 from '@ionic-native/in-app-browser/ngx/index';
+import * as i18 from '@ionic-native/downloader/ngx/index';
 import { CdkTextareaAutosize } from '@angular/cdk/text-field';
 import { ValidatorService, TableDataSource } from '@e-is/ngx-material-table';
 import { SelectionModel } from '@angular/cdk/collections';
@@ -942,6 +957,136 @@ function fromScrollEndEvent(element, threshold) {
         .pipe(filter(() => isEnd()));
 }
 
+// import the required animation functions from the angular animations module
+const fadeInAnimation = 
+// trigger name for attaching this animation to an element using the [@triggerName] syntax
+trigger('fadeInAnimation', [
+    // route 'enter' transition
+    transition(':enter', [
+        // css styles at start of transition
+        style({ opacity: 0 }),
+        // animation and styles at end of transition
+        animate('.3s', style({ opacity: 1 }))
+    ]),
+]);
+const fadeInOutAnimation = 
+// trigger name for attaching this animation to an element using the [@triggerName] syntax
+trigger('fadeInOutAnimation', [
+    // route 'enter' transition
+    transition(':enter', [
+        // css styles at start of transition
+        style({ opacity: 0 }),
+        // animation and styles at end of transition
+        animate('.3s', style({ opacity: 1 }))
+    ]),
+    // route 'leave' transition
+    transition(':leave', [
+        // animation and styles at end of transition
+        animate('.5s ease-in-out', style({
+            opacity: 0
+        }))
+    ]),
+]);
+const slideInOutAnimation = 
+// trigger name for attaching this animation to an element using the [@triggerName] syntax
+trigger('slideInOutAnimation', [
+    // end state styles for route container (host)
+    state('*', style({
+        // the view covers the whole screen with a semi tranparent background
+        position: 'relative',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        opacity: 1
+    })),
+    // route 'enter' transition
+    transition(':enter', [
+        // styles at start of transition
+        style({
+            // start with the content positioned off the right of the screen,
+            // -400% is required instead of -100% because the negative position adds to the width of the element
+            left: '400%',
+            // start with background opacity set to 0 (invisible)
+            opacity: 0
+        }),
+        // animation and styles at end of transition
+        animate('.3s ease-in-out', style({
+            // transition the right position to 0 which slides the content into view
+            left: 0,
+            // transition the background opacity to 0.8 to fade it in
+            opacity: 0.8
+        }))
+    ]),
+    // route 'leave' transition
+    transition(':leave', [
+        // animation and styles at end of transition
+        animate('.5s ease-in-out', style({
+            // transition the right position to -400% which slides the content out of view
+            left: '400%',
+            // transition the background opacity to 0 to fade it out
+            opacity: 0
+        }))
+    ])
+]);
+const slideUpDownAnimation = 
+// trigger name for attaching this animation to an element using the [@triggerName] syntax
+trigger('slideUpDownAnimation', [
+    // end state styles for route container (host)
+    state('*', style({
+        transform: 'translateY(0)',
+        opacity: 1
+    })),
+    // route 'enter' transition
+    transition(':enter', [
+        // styles at start of transition
+        style({
+            transform: 'translateY(-400%)',
+            opacity: 0
+        }),
+        // animation and styles at end of transition
+        animate('.3s ease-in-out', style({
+            transform: 'translateY(0)',
+            opacity: 1
+        }))
+    ]),
+    // route 'leave' transition
+    transition(':leave', [
+        // animation and styles at end of transition
+        animate('.5s ease-in-out', style({
+            transform: 'translateY(-100%)',
+            opacity: 0
+        }))
+    ])
+]);
+
+/* ---
+ * Source: https://github.com/ionic-team/ionic-framework/blob/b0d53ca73619585671d8cf4dc24e47f826495a0a/core/src/utils/platform.ts
+ * --- */
+const matchMedia = (win, query) => win.matchMedia(query).matches;
+const testUserAgent = (win, expr) => {
+    const userAgent = win.navigator.userAgent || win.navigator.vendor || window.opera;
+    return expr.test(userAgent);
+};
+const isWindows = (win) => testUserAgent(win, /windows/i);
+const isTouchUi = (win) => matchMedia(win, '(any-pointer:coarse)');
+const isMobile = (win) => isCordova(window) || isAndroid(win) || isIOS(window) || (isTouchUi(win) && !isWindows(win));
+const isIpad = (win) => {
+    // iOS 12 and below
+    if (testUserAgent(win, /iPad/i)) {
+        return true;
+    }
+    // iOS 13+
+    if (testUserAgent(win, /Macintosh/i) && isMobile(win)) {
+        return true;
+    }
+    return false;
+};
+const ɵ0$c = isIpad;
+const isIOS = (win) => testUserAgent(win, /iPhone|iPod/i) || isIpad(win);
+const isAndroid = (win) => testUserAgent(win, /android|sink/i);
+const isCordova = (win) => !!(win['cordova'] || win['phonegap'] || win['PhoneGap']);
+
 class MatAutocompleteConfigHolder {
     constructor(options) {
         this.options = options;
@@ -963,8 +1108,8 @@ class MatAutocompleteConfigHolder {
         // Keep original the function from options, when exists
         const attributesOrFn = attributes.map((a, index) => typeof a === 'function' && options.attributes[index] || a);
         const filter = Object.assign({ searchAttribute: attributes.length === 1 ? attributes[0] : undefined, searchAttributes: attributes.length > 1 ? attributes : undefined }, options.filter);
-        const displayWith = options.displayWith || ((obj) => obj && joinPropertiesPath(obj, attributes));
-        const equals = options.equals || ((o1, o2) => o1 && o2 && o1.id === o2.id);
+        const displayWith = options.displayWith || MatAutocompleteFieldUtils.createDisplayFn(attributes, options.multiple);
+        const equals = options.equals || MatAutocompleteFieldUtils.defaultEquals;
         const config = Object.assign(Object.assign({}, options), { attributes: attributesOrFn, suggestFn,
             filter,
             displayWith,
@@ -979,14 +1124,31 @@ class MatAutocompleteConfigHolder {
         return this.fields[fieldName] || this.add(fieldName);
     }
 }
-const noop = (_) => { };
-const ɵ0 = noop;
+class MatAutocompleteFieldUtils {
+    static createDisplayFn(displayAttributes, multiple) {
+        // if multiple (manage array)
+        if (multiple) {
+            return (value) => {
+                return Array.isArray(value)
+                    ? (value || []).map(obj => obj && joinPropertiesPath(obj, displayAttributes)).join(', ')
+                    : value && joinPropertiesPath(value, displayAttributes);
+            };
+        }
+        // Join properties
+        return (obj) => obj && joinPropertiesPath(obj, displayAttributes);
+    }
+    static defaultEquals(o1, o2) {
+        return isNotNil(o1 === null || o1 === void 0 ? void 0 : o1.id) && o1.id === (o2 === null || o2 === void 0 ? void 0 : o2.id);
+    }
+}
+const noop$8 = (_) => { };
+const ɵ0$b = noop$8;
 class MatAutocompleteField {
     constructor(cd, formGroupDir) {
         this.cd = cd;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop;
-        this._onTouchedCallback = noop;
+        this._onChangeCallback = noop$8;
+        this._onTouchedCallback = noop$8;
         this.logPrefix = '[mat-autocomplete] ';
         this.formControlName = null;
         this.required = false;
@@ -994,12 +1156,13 @@ class MatAutocompleteField {
         this.debounceTime = null;
         this.i18nPrefix = 'REFERENTIAL.';
         this.noResultMessage = 'COMMON.NO_RESULT';
-        this.multiple = false;
         this.itemSize = '48px';
         this.fetchMoreThreshold = '15%';
         this.suggestLengthThreshold = null;
         this.showLoadingSpinner = true;
         this.debug = false;
+        this.showSearchBar = true;
+        this.stickySearchBar = false;
         this.clicked = new EventEmitter();
         this.blurred = new EventEmitter();
         this.focused = new EventEmitter();
@@ -1079,6 +1242,9 @@ class MatAutocompleteField {
     get loading() {
         return isNil(this.$filteredItems.value);
     }
+    get desktop() {
+        return !this.mobile;
+    }
     ngOnInit() {
         var _a, _b;
         this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName);
@@ -1096,6 +1262,7 @@ class MatAutocompleteField {
             this.displayColumnNames = this.displayColumnNames || this.config.columnNames;
             this.displayWith = this.displayWith || this.config.displayWith;
             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));
@@ -1105,8 +1272,11 @@ class MatAutocompleteField {
             this.highlightAccent = toBoolean(this.highlightAccent, toBoolean(this.config.highlightAccent));
         }
         // Default values
+        this.multiple = toBoolean(this.multiple, false);
+        this.mobile = toBoolean(this.mobile, this.multiple || isMobile(window));
         this.displayAttributes = this.displayAttributes || ((_a = this.filter) === null || _a === void 0 ? void 0 : _a.attributes) || ['label', 'name'];
-        this.displayWith = this.displayWith || ((obj) => obj && joinPropertiesPath(obj, this.displayAttributes));
+        this.displayWith = this.displayWith || MatAutocompleteFieldUtils.createDisplayFn(this.displayAttributes, this.multiple);
+        this.equals = this.equals || MatAutocompleteFieldUtils.defaultEquals;
         this.displayColumnSizes = this.displayColumnSizes
             // if only column: auto size
             || (this.displayAttributes.length === 1 && [undefined])
@@ -1114,24 +1284,21 @@ class MatAutocompleteField {
             // - if label then col size = 2
             // - if rankOrder then col size = 1
             // - ese => auto size
-            || this.displayAttributes.map(attr => (attr && attr.endsWith('label')) ? 2
-                : ((attr && attr.endsWith('rankOrder')) ? 1
-                    : undefined));
+            || this.displayAttributes.map(attr => attr && (attr.endsWith('label') ? 3
+                : (attr.endsWith('rankOrder') ? 2
+                    : undefined)));
         this.displayColumnNames = this.displayAttributes.map((attr, index) => this.displayColumnNames && this.displayColumnNames[index] ||
             (this.i18nPrefix + changeCaseToUnderscore(attr).toUpperCase()));
-        this.mobile = toBoolean(this.mobile, false);
-        this.searchable = !this.mobile && !this.multiple;
-        this.equals = this.equals || ((o1, o2) => o1 && o2 && o1.id === o2.id);
         const classList = (_b = this.classList) === null || _b === void 0 ? void 0 : _b.split(' ');
         this.panelWidth = this.panelWidth || (classList && ((classList.includes('min-width-medium') && '300px')
             || (classList.includes('min-width-large') && '400px')
             || (classList.includes('min-width-xlarge') && '450px')
             || (classList.includes('mat-autocomplete-panel-full-size') && '100vw')));
         this.showPanelOnFocus = toBoolean(this.showPanelOnFocus, true);
-        this.debounceTime = toNumber(this.debounceTime, 250);
+        this.debounceTime = toNumber(this.debounceTime, this.mobile ? 650 : 250);
         this.highlightAccent = toBoolean(this.highlightAccent, false);
         this.suggestLengthThreshold = this.suggestLengthThreshold || 0;
-        this.matAutocompletePosition = this.matAutocompletePosition || (this.mobile && this.searchable ? 'above' : 'auto'); // On mobile, set position to above (because of bottom keyboard)
+        this.matAutocompletePosition = this.matAutocompletePosition || 'auto';
         // No suggestFn: filter on the given items
         if (!this.suggestFn) {
             const suggestFromArrayFn = (value, filter) => __awaiter(this, void 0, void 0, function* () {
@@ -1152,10 +1319,10 @@ class MatAutocompleteField {
                 return this.suggestFn(value, filter); // Loop
             });
         }
-        else if (!this.searchable) {
+        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.searchable), // Close subscription, when enabling search (no more mat-select)
-            switchMap((filter) => this.suggest('*', filter)))
+            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)));
         }
         // Send value to suggest when :
@@ -1171,11 +1338,17 @@ class MatAutocompleteField {
         this._reload$, 
         // Search text (no distinctUntilChanged() because of the debounceTime() pipe)
         this.formControl.valueChanges
-            .pipe(filter(value => this.enabled && this.searchable && isNotNilString(value)), 
+            .pipe(filter(value => this.enabled && isNotNilString(value)), 
         // Mark as loading (to show loading spinner) - earlier as possible, so before the debounce time
         tap(_ => this.showLoadingSpinner && this.markAsLoading()), 
         // Filter if not enough character
-        filter(value => value.length >= this.suggestLengthThreshold), 
+        filter(value => {
+            if (value.length >= this.suggestLengthThreshold)
+                return true;
+            // Update display value, to enable the message "not enough characters"
+            this.displayValue = value;
+            return false;
+        }), 
         // Wait a debounce time
         debounceTime(this.debounceTime)
         // DEBUG
@@ -1183,37 +1356,34 @@ class MatAutocompleteField {
         ), 
         // Object set: use it (no distinctUntilChanged() pipe need)
         this.formControl.valueChanges
-            .pipe(startWith(this.formControl.value), filter(value => (this.searchable && isNotNil(value) && typeof value === 'object')), tap(value => {
+            .pipe(startWith(this.formControl.value), filter(value => (!this.mobile && 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 + ' object changes:', value)
+            var _a;
             // Update the display value (if need)
             const displayValue = this.displayWith(value) || '';
             if (this.displayValue !== displayValue) {
                 this.displayValue = displayValue;
                 // Apply to the input[type=text] field
-                if (this.matInputText && this.matInputText.nativeElement) {
+                if ((_a = this.matInputText) === null || _a === void 0 ? void 0 : _a.nativeElement) {
                     this.matInputText.nativeElement.value = this.displayValue;
                 }
             }
-        })
-        // DEBUG
-        //,tap(value => this.debug && console.debug(this.logPrefix + ' Received an object value: ', value))
-        ), 
+        })), 
         // On dropdown button click (no distinctUntilChanged(), nor debounceTime)
         this.dropButtonClick
-            .pipe(filter(event => this.searchable && this.enabled && (!event || !event.defaultPrevented)), map(_ => this.showAllOnFocus ? '*' : this.formControl.value), 
+            .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
         merge(
         // Focus or click => Load all
         merge(this.focused, this.clicked)
-            .pipe(filter(_ => this.enabled && this.searchable), map(_ => this.showAllOnFocus ? '*' : this.formControl.value)
+            .pipe(filter(_ => this.enabled && !this.mobile), map(_ => this.showAllOnFocus ? '*' : this.formControl.value)
         // DEBUG
         //,tap(value => this.debug && console.debug(this.logPrefix + ' Received focused or clicked event: ', value))
         ), merge(this.$inputItems, this._$filter)
-            .pipe(filter(_ => this.searchable && this.enabled), map(_ => this.formControl.value)))
+            .pipe(filter(_ => this.enabled), map(_ => this.formControl.value)))
             .pipe(
         // Make sure there is enough characters
         filter(thresholdFilterFn), 
@@ -1246,7 +1416,7 @@ class MatAutocompleteField {
         fetchMoreItemsChanges)
             .subscribe(items => {
             // Make sure control value is inside (mat-select)
-            if (items && !this.searchable) {
+            if (items && this.mobile) {
                 const value = this.formControl.value;
                 if (isNotNil(value) && typeof value === 'object' && items.findIndex(item => this.equals(item, value)) === -1) {
                     // If form value is missing: add it to the list
@@ -1260,7 +1430,7 @@ class MatAutocompleteField {
         this._subscription.add(this.blurred
             .pipe(
         // Skip if not searchable
-        filter(_ => this.searchable), map(_ => this.formControl.value)
+        filter(_ => !this.mobile), map(_ => this.formControl.value)
         // DEBUG
         //,tap(value => this.debug && console.debug(this.logPrefix + ' Received blurred event: ', value)),
         )
@@ -1284,6 +1454,7 @@ class MatAutocompleteField {
                 this.$filteredItems.next(undefined);
             }
             this._implicitValue = null; // reset the implicit value
+            this.closePanel(); // Clone panel
         }));
         // Listen form control status change
         this._subscription.add(this.formControl.statusChanges
@@ -1294,6 +1465,7 @@ class MatAutocompleteField {
             .subscribe(() => this.checkIfTouched()));
         this._subscription.add(this.keydownEscape.subscribe(event => {
             if (this.isOpen) {
+                // Avoid form or page to manage escape event
                 event === null || event === void 0 ? void 0 : event.stopPropagation();
                 event === null || event === void 0 ? void 0 : event.preventDefault();
                 // DEBUG
@@ -1329,7 +1501,6 @@ class MatAutocompleteField {
         this.equals = null;
         this.suggestFn = null;
         this.$filteredItems = null;
-        this.matSelectItems$ = null;
         this.config = null;
         this.classList = null;
         this._onChangeCallback = null;
@@ -1344,8 +1515,13 @@ class MatAutocompleteField {
      * Allow to reload content. Useful when filter has been changed but not detected
      */
     reloadItems(value) {
+        var _a;
         // Force a refresh
         this._reload$.next(value || '*');
+        // Clear the search bar, because options will not correspond
+        if (!this.isOpen && isNotNilOrBlank((_a = this.ionSearchbar) === null || _a === void 0 ? void 0 : _a.value)) {
+            this.ionSearchbar.value = null;
+        }
     }
     writeValue(value) {
         // DEBUG
@@ -1369,15 +1545,15 @@ class MatAutocompleteField {
         this.cd.markForCheck();
     }
     focus() {
-        var _a;
-        if (this.searchable) {
-            focusInput(this.matInputText);
+        if (this.mobile) {
+            this.matSelect.focus();
         }
         else {
-            (_a = this.matSelect) === null || _a === void 0 ? void 0 : _a.focus();
+            focusInput(this.matInputText);
         }
     }
     filterInputTextFocusEvent(event) {
+        var _a;
         if (!event || event.defaultPrevented)
             return;
         // Ignore event from mat-option
@@ -1392,7 +1568,7 @@ class MatAutocompleteField {
         }
         // DEBUG
         //if (this.debug) console.debug(this.logPrefix + ' Select input content');
-        const hasContent = true; // selectInputContent(event);
+        const hasContent = isNotNilOrBlank((_a = event.target) === null || _a === void 0 ? void 0 : _a.value);
         // If combo is empty, or if has content but should force to show panel on focus
         if (!hasContent || this.showPanelOnFocus || this.showAllOnFocus) {
             // DEBUG
@@ -1412,18 +1588,38 @@ class MatAutocompleteField {
                 event.stopPropagation();
             event.returnValue = false;
             // DEBUG
-            if (this.debug)
-                console.debug(this.logPrefix + " Cancelling blur event");
+            //if (this.debug) console.debug(this.logPrefix + " Cancelling blur event");
             return false;
         }
-        //DEBUG
-        if (this.debug)
-            console.debug(this.logPrefix + ' Blur: move caret to the beginning');
+        // DEBUG
+        //if (this.debug) console.debug(this.logPrefix + ' Blur: move caret to the beginning');
         // Move caret to the beginning (fix issue IMAGINE-469)
         selectInputRange(event.target, 0, 0);
         this.blurred.emit(event);
         return true;
     }
+    ionSearchBarChanged(event) {
+        if (!event || event.defaultPrevented || !this.matSelect.panelOpen)
+            return;
+        // DEBUG
+        //console.debug(this.logPrefix + " Received <ion-searchbar> changes", event.detail.data);
+        event.preventDefault();
+        event.detail.preventDefault();
+        event.stopPropagation();
+        event.detail.stopPropagation();
+        this.markAsLoading();
+        this.reloadItems(event.detail.data);
+        // TODO avoid mat-select to focus the option
+        /*if (this.multiple) {
+          this.matSelect._elementRef;
+        }*/
+    }
+    ionSearchBarClear(event) {
+        if (!event || event.defaultPrevented || !this.matSelect.panelOpen)
+            return;
+        this.markAsLoading();
+        this.reloadItems();
+    }
     filterMatSelectFocusEvent(event) {
         if (!event || event.defaultPrevented)
             return;
@@ -1449,20 +1645,6 @@ class MatAutocompleteField {
         this.blurred.emit(event);
         return true;
     }
-    toggleSearch(event) {
-        const searchable = !this.searchable;
-        if (searchable && this.searchable && this.matInputText) {
-            this.focus();
-        }
-        else {
-            this.searchable = searchable;
-            if (searchable) {
-                this.autofocus = true;
-                this.showPanelOnFocus = false;
-            }
-            this.markForCheck();
-        }
-    }
     clearValue(event) {
         this.writeValue(null);
         event.stopPropagation();
@@ -1512,7 +1694,7 @@ class MatAutocompleteField {
     }
     get isOpen() {
         var _a, _b;
-        return (this.searchable && ((_a = this.autocomplete) === null || _a === void 0 ? void 0 : _a.isOpen))
+        return (!this.mobile && ((_a = this.autocomplete) === null || _a === void 0 ? void 0 : _a.isOpen))
             || ((_b = this.matSelect) === null || _b === void 0 ? void 0 : _b.panelOpen)
             || false;
     }
@@ -1551,8 +1733,7 @@ class MatAutocompleteField {
                 res = data;
             }
             // DEBUG
-            if (this.debug)
-                console.debug(this.logPrefix + ' Filtered items by suggestFn:', value, res);
+            //if (this.debug) console.debug(this.logPrefix + ' Filtered items by suggestFn:', value, res);
             return res;
         });
     }
@@ -1571,7 +1752,7 @@ class MatAutocompleteField {
         });
     }
     updateImplicitValue(items) {
-        if (this.searchable) {
+        if (!this.mobile) {
             // Store implicit value (will use it onBlur if not other value selected)
             if (items && items.length === 1) {
                 this._implicitValue = items[0];
@@ -1624,12 +1805,13 @@ 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          <!-- Basic select -->\n          <mat-select #matSelect\n                      *ngIf=\"!searchable; else searchableTemplate\"\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                      [required]=\"required\">\n            <mat-select-trigger>{{ displayWith(value) }}</mat-select-trigger>\n\n            <!-- header -->\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\n            <!-- None option -->\n            <mat-option *ngIf=\"!required\" 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; let items\">\n              <!-- No item option -->\n              <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                <ion-label>{{noResultMessage | translate}}</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>{{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            <ion-row class=\"mat-autocomplete-footer ion-no-padding\">\n              <ion-col>\n                <ion-text *ngIf=\"itemCount; let count\" 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-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 #searchableTemplate>\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\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\n              <ng-container *ngIf=\"$filteredItems | async; else loadingTemplate; let items\">\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=\"(matInputText.value | 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              <ion-row class=\"mat-autocomplete-footer ion-no-padding\">\n                <ion-col>\n                  <ion-text *ngIf=\"itemCount; let count\" 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=\"searchable\"\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 type=\"button\" mat-icon-button tabindex=\"-1\"\n          *ngIf=\"enabled && mobile && !searchable && !multiple\"\n          [title]=\"'COMMON.BTN_SEARCH'|translate\"\n          (click)=\"toggleSearch($event)\">\n    <mat-icon>search</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",
+                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)=\"ionSearchBarClear($event)\"\n                           (ionInput)=\"ionSearchBarChanged($event)\"\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 | highlight: { search: ionSearchbar.value, withAccent: highlightAccent }\"></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",
                 providers: [{
                         provide: NG_VALUE_ACCESSOR,
                         multi: true,
                         useExisting: forwardRef(() => MatAutocompleteField)
                     }],
+                animations: [slideInOutAnimation],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [":host{display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}mat-icon.select-arrow{color:rgba(0,0,0,.47);font-size:150%}"]
             },] }
@@ -1670,6 +1852,8 @@ MatAutocompleteField.propDecorators = {
     suggestLengthThreshold: [{ type: Input }],
     showLoadingSpinner: [{ type: Input }],
     debug: [{ type: Input }],
+    showSearchBar: [{ type: Input }],
+    stickySearchBar: [{ type: Input }],
     clicked: [{ type: Output, args: ['click',] }],
     blurred: [{ type: Output, args: ['blur',] }],
     focused: [{ type: Output, args: ['focus',] }],
@@ -1677,6 +1861,7 @@ MatAutocompleteField.propDecorators = {
     keydownEscape: [{ type: Output, args: ['keydown.escape',] }],
     keyupEnter: [{ type: Output, args: ['keyup.enter',] }],
     matSelect: [{ type: ViewChild, args: ['matSelect',] }],
+    ionSearchbar: [{ type: ViewChild, args: ['ionSearchbar',] }],
     matInputText: [{ type: ViewChild, args: ['matInputText',] }],
     autocomplete: [{ type: ViewChild, args: [MatAutocomplete,] }],
     autocompleteTrigger: [{ type: ViewChild, args: [MatAutocompleteTrigger,] }],
@@ -1706,7 +1891,7 @@ class DateFormatPipe {
         return this.dateAdapter.format(date, displayFormat);
     }
 }
-DateFormatPipe.ɵprov = ɵɵdefineInjectable({ factory: function DateFormatPipe_Factory() { return new DateFormatPipe(ɵɵinject(MomentDateAdapter), ɵɵinject(TranslateService)); }, token: DateFormatPipe, providedIn: "root" });
+DateFormatPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function DateFormatPipe_Factory() { return new DateFormatPipe(i0.ɵɵinject(i1.MomentDateAdapter), i0.ɵɵinject(i1$1.TranslateService)); }, token: DateFormatPipe, providedIn: "root" });
 DateFormatPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'dateFormat'
@@ -1718,7 +1903,7 @@ DateFormatPipe.ctorParameters = () => [
     { type: TranslateService }
 ];
 
-const moment = momentImported;
+const moment$7 = momentImported;
 class DateDiffDurationPipe {
     constructor(dateAdapter, translate) {
         this.dateAdapter = dateAdapter;
@@ -1734,17 +1919,17 @@ class DateDiffDurationPipe {
         return this.format(startDate, endDate);
     }
     format(startDate, endDate) {
-        const duration = moment.duration(endDate.diff(startDate));
+        const duration = moment$7.duration(endDate.diff(startDate));
         if (duration.asMinutes() < 0)
             return '';
-        const timeDuration = moment(0)
+        const timeDuration = moment$7(0)
             .hour(duration.hours())
             .minute(duration.minutes());
         const days = Math.floor(duration.asDays());
         return (days > 0 ? days.toString() + (this.dayUnit + ' ') : '') + timeDuration.format('HH:mm');
     }
 }
-DateDiffDurationPipe.ɵprov = ɵɵdefineInjectable({ factory: function DateDiffDurationPipe_Factory() { return new DateDiffDurationPipe(ɵɵinject(DateAdapter), ɵɵinject(TranslateService)); }, token: DateDiffDurationPipe, providedIn: "root" });
+DateDiffDurationPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function DateDiffDurationPipe_Factory() { return new DateDiffDurationPipe(i0.ɵɵinject(i1$2.DateAdapter), i0.ɵɵinject(i1$1.TranslateService)); }, token: DateDiffDurationPipe, providedIn: "root" });
 DateDiffDurationPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'dateDiffDuration'
@@ -1765,7 +1950,7 @@ class DateFromNowPipe {
         return date ? date.fromNow(args && args.withoutSuffix) : '';
     }
 }
-DateFromNowPipe.ɵprov = ɵɵdefineInjectable({ factory: function DateFromNowPipe_Factory() { return new DateFromNowPipe(ɵɵinject(MomentDateAdapter)); }, token: DateFromNowPipe, providedIn: "root" });
+DateFromNowPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function DateFromNowPipe_Factory() { return new DateFromNowPipe(i0.ɵɵinject(i1.MomentDateAdapter)); }, token: DateFromNowPipe, providedIn: "root" });
 DateFromNowPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'dateFromNow'
@@ -1834,7 +2019,7 @@ function formatToDD(value, opts) {
                 value *= -1;
         }
     }
-    let degrees = roundFloat(value, opts.maxDecimals).toString();
+    let degrees = roundFloat$1(value, opts.maxDecimals).toString();
     // Add sign
     let sign = negative ? '-' : '+';
     if (opts.placeholderChar) {
@@ -1885,7 +2070,7 @@ function formatToDDMMSS(value, opts) {
     }
     let degrees = Math.trunc(value);
     let minutes = Math.trunc((value - degrees) * 60);
-    let seconds = roundFloat(((value - degrees) * 60 - minutes) * 60, opts.maxDecimals);
+    let seconds = roundFloat$1(((value - degrees) * 60 - minutes) * 60, opts.maxDecimals);
     while (seconds >= 60) {
         seconds -= 60;
         minutes += 1;
@@ -1953,7 +2138,7 @@ function formatToDDMM(value, opts) {
         }
     }
     let degrees = Math.trunc(value);
-    let minutes = roundFloat((value - degrees) * 60, opts.maxDecimals);
+    let minutes = roundFloat$1((value - degrees) * 60, opts.maxDecimals);
     while (minutes >= 60) {
         minutes -= 60;
         degrees += 1;
@@ -2004,15 +2189,15 @@ function parseLatitudeOrLongitude(input, pattern, maxDecimals, placeholderChar)
         return NaN;
     }
     if (pattern === 'DD')
-        return roundFloat(degrees, maxDecimals);
+        return roundFloat$1(degrees, maxDecimals);
     const minutes = (pattern === 'DDMMSS' || pattern === 'DDMM') && parts[1] && parseFloat(parts[1].replace(/,/g, '.')) || 0;
     const seconds = (pattern === 'DDMMSS') && parts[2] && parseFloat(parts[2].replace(/,/g, '.')) || 0;
     const direction = ((pattern === 'DDMMSS') && parts[3]) || ((pattern === 'DDMM') && parts[2]) || undefined;
     const sign = (direction && (direction === 's' || direction === 'S' || direction === 'w' || direction === 'W')) ? -1 : 1;
     degrees = sign * (degrees + minutes / 60 + seconds / (60 * 60));
-    return roundFloat(degrees, maxDecimals);
+    return roundFloat$1(degrees, maxDecimals);
 }
-function roundFloat(input, maxDecimals) {
+function roundFloat$1(input, maxDecimals) {
     if (maxDecimals > 0) {
         const powDecimal = Math.pow(10, maxDecimals);
         return Math.trunc(input * powDecimal + 0.5) / powDecimal;
@@ -2032,7 +2217,7 @@ class LatLongFormatPipe {
         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.ɵprov = i0.ɵɵdefineInjectable({ factory: function LatLongFormatPipe_Factory() { return new LatLongFormatPipe(); }, token: LatLongFormatPipe, providedIn: "root" });
 LatLongFormatPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'latLongFormat'
@@ -2044,7 +2229,7 @@ class LatitudeFormatPipe {
         this.transform = formatLatitude;
     }
 }
-LatitudeFormatPipe.ɵprov = ɵɵdefineInjectable({ factory: function LatitudeFormatPipe_Factory() { return new LatitudeFormatPipe(); }, token: LatitudeFormatPipe, providedIn: "root" });
+LatitudeFormatPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function LatitudeFormatPipe_Factory() { return new LatitudeFormatPipe(); }, token: LatitudeFormatPipe, providedIn: "root" });
 LatitudeFormatPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'latitudeFormat'
@@ -2056,7 +2241,7 @@ class LongitudeFormatPipe {
         this.transform = formatLongitude;
     }
 }
-LongitudeFormatPipe.ɵprov = ɵɵdefineInjectable({ factory: function LongitudeFormatPipe_Factory() { return new LongitudeFormatPipe(); }, token: LongitudeFormatPipe, providedIn: "root" });
+LongitudeFormatPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function LongitudeFormatPipe_Factory() { return new LongitudeFormatPipe(); }, token: LongitudeFormatPipe, providedIn: "root" });
 LongitudeFormatPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'longitudeFormat'
@@ -2076,7 +2261,7 @@ class NumberFormatPipe {
         }
     }
 }
-NumberFormatPipe.ɵprov = ɵɵdefineInjectable({ factory: function NumberFormatPipe_Factory() { return new NumberFormatPipe(); }, token: NumberFormatPipe, providedIn: "root" });
+NumberFormatPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function NumberFormatPipe_Factory() { return new NumberFormatPipe(); }, token: NumberFormatPipe, providedIn: "root" });
 NumberFormatPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'numberFormat'
@@ -2116,7 +2301,7 @@ class HighlightPipe {
         }
     }
 }
-HighlightPipe.ɵprov = ɵɵdefineInjectable({ factory: function HighlightPipe_Factory() { return new HighlightPipe(); }, token: HighlightPipe, providedIn: "root" });
+HighlightPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function HighlightPipe_Factory() { return new HighlightPipe(); }, token: HighlightPipe, providedIn: "root" });
 HighlightPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'highlight'
@@ -2181,7 +2366,7 @@ FileSizePipe.decorators = [
     { type: Pipe, args: [{ name: 'fileSize' },] }
 ];
 
-const moment$1 = momentImported;
+const moment$6 = momentImported;
 const tz = momentTZImported;
 const DATE_UNIX_TIMESTAMP = 'X';
 const DATE_UNIX_MS_TIMESTAMP = 'x';
@@ -2258,32 +2443,32 @@ function fromDateISOString(value) {
     if (!value || isMoment(value))
         return value;
     // Parse the input value, as a ISO date time
-    const date = moment$1(value, DATE_ISO_PATTERN);
+    const date = moment$6(value, DATE_ISO_PATTERN);
     if (date.isValid())
         return date;
     // Not valid: trying to convert from unix timestamp
     if (typeof value === 'string') {
         console.warn('Wrong date format - Trying to convert from local time: ' + value);
         if (value.length === 10) {
-            return moment$1(value, DATE_UNIX_TIMESTAMP);
+            return moment$6(value, DATE_UNIX_TIMESTAMP);
         }
         else if (value.length === 13) {
-            return moment$1(value, DATE_UNIX_MS_TIMESTAMP);
+            return moment$6(value, DATE_UNIX_MS_TIMESTAMP);
         }
     }
     console.warn('Unable to parse date: ' + value);
     return undefined;
 }
 function fromUnixTimestamp(timeInSec) {
-    return moment$1(timeInSec, DATE_UNIX_TIMESTAMP);
+    return moment$6(timeInSec, DATE_UNIX_TIMESTAMP);
 }
 function fromUnixMsTimestamp(timeInMs) {
-    return moment$1(timeInMs, DATE_UNIX_MS_TIMESTAMP);
+    return moment$6(timeInMs, DATE_UNIX_MS_TIMESTAMP);
 }
 function toDuration(value, unit) {
     if (!value)
         return undefined;
-    const duration = moment$1.duration(value, unit);
+    const duration = moment$6.duration(value, unit);
     // fix 990+ ms
     if (duration.milliseconds() >= 990) {
         duration.add(1000 - duration.milliseconds(), 'ms');
@@ -2312,7 +2497,7 @@ class DurationPipe {
         return (days > 0 ? days.toString() + (this.dayUnit + ' ') : '') + hour + ':' + minute;
     }
 }
-DurationPipe.ɵprov = ɵɵdefineInjectable({ factory: function DurationPipe_Factory() { return new DurationPipe(ɵɵinject(TranslateService)); }, token: DurationPipe, providedIn: "root" });
+DurationPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function DurationPipe_Factory() { return new DurationPipe(i0.ɵɵinject(i1$1.TranslateService)); }, token: DurationPipe, providedIn: "root" });
 DurationPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'duration'
@@ -2333,7 +2518,7 @@ class MathAbsPipe {
         }
     }
 }
-MathAbsPipe.ɵprov = ɵɵdefineInjectable({ factory: function MathAbsPipe_Factory() { return new MathAbsPipe(); }, token: MathAbsPipe, providedIn: "root" });
+MathAbsPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function MathAbsPipe_Factory() { return new MathAbsPipe(); }, token: MathAbsPipe, providedIn: "root" });
 MathAbsPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'mathAbs'
@@ -2345,7 +2530,7 @@ class EvenPipe {
         return val % 2 === 0;
     }
 }
-EvenPipe.ɵprov = ɵɵdefineInjectable({ factory: function EvenPipe_Factory() { return new EvenPipe(); }, token: EvenPipe, providedIn: "root" });
+EvenPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function EvenPipe_Factory() { return new EvenPipe(); }, token: EvenPipe, providedIn: "root" });
 EvenPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'even'
@@ -2357,7 +2542,7 @@ class OddPipe {
         return val % 2 !== 0;
     }
 }
-OddPipe.ɵprov = ɵɵdefineInjectable({ factory: function OddPipe_Factory() { return new OddPipe(); }, token: OddPipe, providedIn: "root" });
+OddPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function OddPipe_Factory() { return new OddPipe(); }, token: OddPipe, providedIn: "root" });
 OddPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'odd'
@@ -2465,7 +2650,7 @@ class MapGetPipe {
         return val[key];
     }
 }
-MapGetPipe.ɵprov = ɵɵdefineInjectable({ factory: function MapGetPipe_Factory() { return new MapGetPipe(); }, token: MapGetPipe, providedIn: "root" });
+MapGetPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function MapGetPipe_Factory() { return new MapGetPipe(); }, token: MapGetPipe, providedIn: "root" });
 MapGetPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'mapGet'
@@ -2479,7 +2664,7 @@ class MapKeysPipe {
         return Object.keys(map);
     }
 }
-MapKeysPipe.ɵprov = ɵɵdefineInjectable({ factory: function MapKeysPipe_Factory() { return new MapKeysPipe(); }, token: MapKeysPipe, providedIn: "root" });
+MapKeysPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function MapKeysPipe_Factory() { return new MapKeysPipe(); }, token: MapKeysPipe, providedIn: "root" });
 MapKeysPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'mapKeys'
@@ -2493,7 +2678,7 @@ class MapValuesPipe {
         return Object.values(map);
     }
 }
-MapValuesPipe.ɵprov = ɵɵdefineInjectable({ factory: function MapValuesPipe_Factory() { return new MapValuesPipe(); }, token: MapValuesPipe, providedIn: "root" });
+MapValuesPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function MapValuesPipe_Factory() { return new MapValuesPipe(); }, token: MapValuesPipe, providedIn: "root" });
 MapValuesPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'mapValues'
@@ -2506,7 +2691,7 @@ class IsNotNilOrBlankPipe {
         return isNotNilOrBlank(value);
     }
 }
-IsNotNilOrBlankPipe.ɵprov = ɵɵdefineInjectable({ factory: function IsNotNilOrBlankPipe_Factory() { return new IsNotNilOrBlankPipe(); }, token: IsNotNilOrBlankPipe, providedIn: "root" });
+IsNotNilOrBlankPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function IsNotNilOrBlankPipe_Factory() { return new IsNotNilOrBlankPipe(); }, token: IsNotNilOrBlankPipe, providedIn: "root" });
 IsNotNilOrBlankPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'isNotNilOrBlank'
@@ -2518,7 +2703,7 @@ class IsNilOrBlankPipe {
         return isNilOrBlank(value);
     }
 }
-IsNilOrBlankPipe.ɵprov = ɵɵdefineInjectable({ factory: function IsNilOrBlankPipe_Factory() { return new IsNilOrBlankPipe(); }, token: IsNilOrBlankPipe, providedIn: "root" });
+IsNilOrBlankPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function IsNilOrBlankPipe_Factory() { return new IsNilOrBlankPipe(); }, token: IsNilOrBlankPipe, providedIn: "root" });
 IsNilOrBlankPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'isNilOrBlank'
@@ -2530,7 +2715,7 @@ class ToStringPipe {
         return (value !== null && value !== undefined) ? value.toString() : '';
     }
 }
-ToStringPipe.ɵprov = ɵɵdefineInjectable({ factory: function ToStringPipe_Factory() { return new ToStringPipe(); }, token: ToStringPipe, providedIn: "root" });
+ToStringPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function ToStringPipe_Factory() { return new ToStringPipe(); }, token: ToStringPipe, providedIn: "root" });
 ToStringPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'toString'
@@ -2542,7 +2727,7 @@ class StrLengthPipe {
         return value && value.length || 0;
     }
 }
-StrLengthPipe.ɵprov = ɵɵdefineInjectable({ factory: function StrLengthPipe_Factory() { return new StrLengthPipe(); }, token: StrLengthPipe, providedIn: "root" });
+StrLengthPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function StrLengthPipe_Factory() { return new StrLengthPipe(); }, token: StrLengthPipe, providedIn: "root" });
 StrLengthPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'strLength'
@@ -2554,7 +2739,7 @@ class StrIncludesPipe {
         return (value === null || value === void 0 ? void 0 : value.includes(searchString, position)) || false;
     }
 }
-StrIncludesPipe.ɵprov = ɵɵdefineInjectable({ factory: function StrIncludesPipe_Factory() { return new StrIncludesPipe(); }, token: StrIncludesPipe, providedIn: "root" });
+StrIncludesPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function StrIncludesPipe_Factory() { return new StrIncludesPipe(); }, token: StrIncludesPipe, providedIn: "root" });
 StrIncludesPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'strIncludes'
@@ -2631,7 +2816,7 @@ class TranslateContextService {
         return translations[keys[keys.length - 1]]; // Return the last keys translation
     }
 }
-TranslateContextService.ɵprov = ɵɵdefineInjectable({ factory: function TranslateContextService_Factory() { return new TranslateContextService(ɵɵinject(TranslateService)); }, token: TranslateContextService, providedIn: "root" });
+TranslateContextService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TranslateContextService_Factory() { return new TranslateContextService(i0.ɵɵinject(i1$1.TranslateService)); }, token: TranslateContextService, providedIn: "root" });
 TranslateContextService.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
@@ -2681,7 +2866,7 @@ class PropertyGetPipe {
         args && args.defaultValue);
     }
 }
-PropertyGetPipe.ɵprov = ɵɵdefineInjectable({ factory: function PropertyGetPipe_Factory() { return new PropertyGetPipe(); }, token: PropertyGetPipe, providedIn: "root" });
+PropertyGetPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function PropertyGetPipe_Factory() { return new PropertyGetPipe(); }, token: PropertyGetPipe, providedIn: "root" });
 PropertyGetPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'propertyGet'
@@ -2706,7 +2891,7 @@ NgInitDirective.propDecorators = {
     ngInit: [{ type: Output }]
 };
 
-const moment$2 = momentImported;
+const moment$5 = momentImported;
 // @dynamic
 class SharedValidators {
     static getDoubleRegexp(maxDecimals) {
@@ -2787,7 +2972,7 @@ class SharedValidators {
     }
     static validDate(control) {
         const value = control.value;
-        const date = !value || moment$2.isMoment(value) ? value : moment$2(control.value, DATE_ISO_PATTERN);
+        const date = !value || moment$5.isMoment(value) ? value : moment$5(control.value, DATE_ISO_PATTERN);
         if (date && (!date.isValid() || date.year() < 1970)) {
             return { validDate: true };
         }
@@ -3899,7 +4084,7 @@ class FormErrorTranslator {
         return errorKey;
     }
 }
-FormErrorTranslator.ɵprov = ɵɵdefineInjectable({ factory: function FormErrorTranslator_Factory() { return new FormErrorTranslator(ɵɵinject(TranslateService), ɵɵinject(APP_FORM_ERROR_I18N_KEYS, 8)); }, token: FormErrorTranslator, providedIn: "root" });
+FormErrorTranslator.ɵprov = i0.ɵɵdefineInjectable({ factory: function FormErrorTranslator_Factory() { return new FormErrorTranslator(i0.ɵɵinject(i1$1.TranslateService), i0.ɵɵinject(APP_FORM_ERROR_I18N_KEYS, 8)); }, token: FormErrorTranslator, providedIn: "root" });
 FormErrorTranslator.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
@@ -3979,7 +4164,7 @@ class FormGetPipe {
         return form.get(path);
     }
 }
-FormGetPipe.ɵprov = ɵɵdefineInjectable({ factory: function FormGetPipe_Factory() { return new FormGetPipe(); }, token: FormGetPipe, providedIn: "root" });
+FormGetPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function FormGetPipe_Factory() { return new FormGetPipe(); }, token: FormGetPipe, providedIn: "root" });
 FormGetPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'formGet'
@@ -3991,7 +4176,7 @@ class FormGetControlPipe {
         return form.get(path);
     }
 }
-FormGetControlPipe.ɵprov = ɵɵdefineInjectable({ factory: function FormGetControlPipe_Factory() { return new FormGetControlPipe(); }, token: FormGetControlPipe, providedIn: "root" });
+FormGetControlPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function FormGetControlPipe_Factory() { return new FormGetControlPipe(); }, token: FormGetControlPipe, providedIn: "root" });
 FormGetControlPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'formGetControl'
@@ -4003,7 +4188,7 @@ class FormGetArrayPipe {
         return form.get(path);
     }
 }
-FormGetArrayPipe.ɵprov = ɵɵdefineInjectable({ factory: function FormGetArrayPipe_Factory() { return new FormGetArrayPipe(); }, token: FormGetArrayPipe, providedIn: "root" });
+FormGetArrayPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function FormGetArrayPipe_Factory() { return new FormGetArrayPipe(); }, token: FormGetArrayPipe, providedIn: "root" });
 FormGetArrayPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'formGetArray'
@@ -4015,7 +4200,7 @@ class FormGetGroupPipe {
         return form.get(path);
     }
 }
-FormGetGroupPipe.ɵprov = ɵɵdefineInjectable({ factory: function FormGetGroupPipe_Factory() { return new FormGetGroupPipe(); }, token: FormGetGroupPipe, providedIn: "root" });
+FormGetGroupPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function FormGetGroupPipe_Factory() { return new FormGetGroupPipe(); }, token: FormGetGroupPipe, providedIn: "root" });
 FormGetGroupPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'formGetGroup'
@@ -4113,40 +4298,13 @@ SharedPipesModule.decorators = [
             },] }
 ];
 
-/* ---
- * Source: https://github.com/ionic-team/ionic-framework/blob/b0d53ca73619585671d8cf4dc24e47f826495a0a/core/src/utils/platform.ts
- * --- */
-const matchMedia = (win, query) => win.matchMedia(query).matches;
-const testUserAgent = (win, expr) => {
-    const userAgent = win.navigator.userAgent || win.navigator.vendor || window.opera;
-    return expr.test(userAgent);
-};
-const isWindows = (win) => testUserAgent(win, /windows/i);
-const isTouchUi = (win) => matchMedia(win, '(any-pointer:coarse)');
-const isMobile = (win) => isTouchUi(win) && !isWindows(win);
-const isIpad = (win) => {
-    // iOS 12 and below
-    if (testUserAgent(win, /iPad/i)) {
-        return true;
-    }
-    // iOS 13+
-    if (testUserAgent(win, /Macintosh/i) && isMobile(win)) {
-        return true;
-    }
-    return false;
-};
-const ɵ0$1 = isIpad;
-const isIOS = (win) => testUserAgent(win, /iPhone|iPod/i) || isIpad(win);
-const isAndroid = (win) => testUserAgent(win, /android|sink/i);
-const isCordova = (win) => !!(win['cordova'] || win['phonegap'] || win['PhoneGap']);
-
 // Import the core angular services.
 // ----------------------------------------------------------------------------------- //
 // ----------------------------------------------------------------------------------- //
 const BASE_TIMER_DELAY = 100;
 class AutofocusDirective {
     // I initialize the autofocus directive.
-    constructor(elementRef, keyboard) {
+    constructor(platform, elementRef, keyboard) {
         this.keyboard = keyboard;
         this._timer = null;
         this._elementRef = elementRef;
@@ -4221,6 +4379,7 @@ AutofocusDirective.decorators = [
             },] }
 ];
 AutofocusDirective.ctorParameters = () => [
+    { type: Platform },
     { type: ElementRef },
     { type: Keyboard, decorators: [{ type: Optional }] }
 ];
@@ -4370,9 +4529,9 @@ function parseDuration(input, maxDecimals, placeholderChar) {
     const hour = parseInt(durationParts[0] || '0');
     const minute = parseInt(durationParts[1] || '0');
     const value = hour + (minute + 0.5) / 60;
-    return roundFloat$1(value, maxDecimals);
+    return roundFloat(value, maxDecimals);
 }
-function roundFloat$1(input, maxDecimals) {
+function roundFloat(input, maxDecimals) {
     if (maxDecimals > 0) {
         const powDecimal = Math.pow(10, maxDecimals);
         return Math.trunc(input * powDecimal + 0.5) / powDecimal;
@@ -4396,18 +4555,17 @@ const MASKS = {
         DD: [/[+-]/, /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, '°']
     }
 };
-const noop$1 = () => {
+const noop$7 = () => {
 };
-const ɵ0$2 = noop$1;
+const ɵ0$a = noop$7;
 class MatLatLongField {
-    constructor(platform, translate, formBuilder, cd, formGroupDir) {
-        this.platform = platform;
+    constructor(translate, formBuilder, cd, formGroupDir) {
         this.translate = translate;
         this.formBuilder = formBuilder;
         this.cd = cd;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$1;
-        this._onTouchedCallback = noop$1;
+        this._onChangeCallback = noop$7;
+        this._onTouchedCallback = noop$7;
         this._subscription = new Subscription();
         this.disabling = false;
         this.writing = false;
@@ -4418,7 +4576,6 @@ class MatLatLongField {
         this.required = false;
         this.onBlur = new EventEmitter();
         this.onFocus = new EventEmitter();
-        this.mobile = this.platform.is('mobile');
     }
     get disabled() {
         return this.readonly || this.formControl.disabled;
@@ -4431,6 +4588,7 @@ 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];
@@ -4692,7 +4850,6 @@ MatLatLongField.decorators = [
             },] }
 ];
 MatLatLongField.ctorParameters = () => [
-    { type: Platform },
     { type: TranslateService },
     { type: FormBuilder },
     { type: ChangeDetectorRef },
@@ -4744,30 +4901,29 @@ SharedMatLatLongModule.decorators = [
             },] }
 ];
 
-const DEFAULT_VALUE_ACCESSOR = {
+const DEFAULT_VALUE_ACCESSOR$5 = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => MatDate),
     multi: true
 };
-const DAY_MASK = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
-const noop$2 = () => { };
-const ɵ0$3 = noop$2;
+const DAY_MASK$2 = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
+const noop$6 = () => { };
+const ɵ0$9 = noop$6;
 class MatDate {
-    constructor(platform, dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
-        this.platform = platform;
+    constructor(dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
         this.dateAdapter = dateAdapter;
         this.translate = translate;
         this.formBuilder = formBuilder;
         this.cd = cd;
         this.keyboard = keyboard;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$2;
-        this._onTouchedCallback = noop$2;
+        this._onChangeCallback = noop$6;
+        this._onTouchedCallback = noop$6;
         this._subscription = new Subscription();
         this._writing = true;
         this._disabling = false;
         this._readonly = false;
-        this.dayMask = DAY_MASK;
+        this.dayMask = DAY_MASK$2;
         this.floatLabel = 'auto';
         this.compact = false;
         this.placeholderChar = DEFAULT_PLACEHOLDER_CHAR;
@@ -4797,11 +4953,12 @@ class MatDate {
         return this.formControl.value;
     }
     ngOnInit() {
-        this.mobile = isNil(this.mobile) ? this.platform.is('mobile') : this.mobile;
-        this._keyboardHideDelay = this.mobile && KEYBOARD_HIDE_DELAY_MS || 0;
         this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName);
         if (!this.formControl)
             throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-date-field>.');
+        this.mobile = isNotNil(this.mobile) ? this.mobile : isMobile(window);
+        // Workaround because ion-datetime has issue (do not returned a ISO date)
+        this._keyboardHideDelay = this.mobile && KEYBOARD_HIDE_DELAY_MS || 0;
         this.required = toBoolean(this.required, this.formControl.validator === Validators.required);
         // Add 'validDate' validator (when existing validator are null or required, to be sure to keep it)
         if (!this.formControl.validator || this.formControl.validator === Validators.required) {
@@ -5054,14 +5211,13 @@ MatDate.decorators = [
                 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: displayPattern} }}</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]=\"dayControl\"\n           [textMask]=\"{mask: dayMask, 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]=\"dayControl\"\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_TIME</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",
                 providers: [
-                    DEFAULT_VALUE_ACCESSOR,
+                    DEFAULT_VALUE_ACCESSOR$5,
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [":host{display:inline-block;width:100%;position:relative}:host [no-padding]{--ion-grid-column-padding:0}:host [nowrap]{flex-wrap:nowrap}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field .datetime-md,mat-form-field ion-datetime{padding:0!important}ion-col.day{min-width:100px}ion-col.day .mat-form-field-subscript-wrapper{overflow:visible;right:-64px;width:calc(100% + 64px)}ion-col.day .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper{display:flex}ion-col.day .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper .mat-form-field-hint-spacer{flex:1 0 1em}ion-col.hour{min-width:55px;max-width:65px}ion-col.hour mat-form-field{width:100%}ion-col.hour mat-form-field input[type=text],ion-col.hour mat-form-field mat-label{text-align:left;min-width:50px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:100px}.hour .mat-form-field-label{max-width:40px}.hour mat-form-field.mat-form-field-should-float .mat-form-field-placeholder{max-width:inherit}mat-error{text-align:right;width:100%}"]
             },] }
 ];
 MatDate.ctorParameters = () => [
-    { type: Platform },
     { type: DateAdapter },
     { type: TranslateService },
     { type: FormBuilder },
@@ -5070,12 +5226,12 @@ MatDate.ctorParameters = () => [
     { type: FormGroupDirective, decorators: [{ type: Optional }] }
 ];
 MatDate.propDecorators = {
+    mobile: [{ type: Input }],
     formControl: [{ type: Input }],
     formControlName: [{ type: Input }],
     placeholder: [{ type: Input }],
     floatLabel: [{ type: Input }],
     required: [{ type: Input }],
-    mobile: [{ type: Input }],
     compact: [{ type: Input }],
     placeholderChar: [{ type: Input }],
     autofocus: [{ type: Input }],
@@ -5089,33 +5245,32 @@ MatDate.propDecorators = {
     matInputs: [{ type: ViewChildren, args: ['matInput',] }]
 };
 
-const DEFAULT_VALUE_ACCESSOR$1 = {
+const DEFAULT_VALUE_ACCESSOR$4 = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => MatDateTime),
     multi: true
 };
 const DAY_MASK$1 = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
 const HOUR_REGEXP = /^[012][0-9][:][012345][0-9]$/;
-const HOUR_MASK = [/[012]/, /\d/, ':', /[012345]/, /\d/];
-const noop$3 = () => { };
-const ɵ0$4 = noop$3;
+const HOUR_MASK$1 = [/[012]/, /\d/, ':', /[012345]/, /\d/];
+const noop$5 = () => { };
+const ɵ0$8 = noop$5;
 class MatDateTime {
-    constructor(platform, dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
-        this.platform = platform;
+    constructor(dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
         this.dateAdapter = dateAdapter;
         this.translate = translate;
         this.formBuilder = formBuilder;
         this.cd = cd;
         this.keyboard = keyboard;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$3;
-        this._onTouchedCallback = noop$3;
+        this._onChangeCallback = noop$5;
+        this._onTouchedCallback = noop$5;
         this._subscription = new Subscription();
         this._writing = true;
         this._disabling = false;
         this._readonly = false;
         this.dayMask = DAY_MASK$1;
-        this.hourMask = HOUR_MASK;
+        this.hourMask = HOUR_MASK$1;
         this.floatLabel = 'auto';
         this.compact = false;
         this.placeholderChar = DEFAULT_PLACEHOLDER_CHAR;
@@ -5144,11 +5299,12 @@ class MatDateTime {
         return this.formControl.value;
     }
     ngOnInit() {
-        this.mobile = isNil(this.mobile) ? this.platform.is('mobile') : this.mobile;
-        this._keyboardHideDelay = this.mobile && KEYBOARD_HIDE_DELAY_MS || 0;
         this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName);
         if (!this.formControl)
             throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-date-time-field>.');
+        this.mobile = isNotNil(this.mobile) ? this.mobile : isMobile(window);
+        // Workaround because ion-datetime has issue (do not returned a ISO date)
+        this._keyboardHideDelay = this.mobile && KEYBOARD_HIDE_DELAY_MS || 0;
         this.required = toBoolean(this.required, this.formControl.validator === Validators.required);
         // Add 'validDate' validator (when existing validator are null or required, to be sure to keep it)
         if (!this.formControl.validator || this.formControl.validator === Validators.required) {
@@ -5428,14 +5584,13 @@ MatDateTime.decorators = [
                 selector: 'mat-date-time-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: displayPattern} }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable >\n  <ion-grid class=\"ion-no-padding\">\n    <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\">\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]=\"dayControl\"\n                 [textMask]=\"{mask: dayMask, 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]=\"dayControl\"\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        </mat-form-field>\n        <mat-datepicker #datePicker\n                        [touchUi]=\"mobile\"\n                        [disabled]=\"formControl.disabled\"\n                        [startAt]=\"startDate\"></mat-datepicker>\n        <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\" >\n          <!-- errors -->\n          <ng-container [ngSwitch]=\"formControl.touched && formControl.errors|mapKeys|arrayFirst\">\n            <mat-error *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</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        </div>\n\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && (hourControl.invalid || formControl.invalid)\">\n          <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.TIME</mat-label>\n          <input matInput #matInput type=\"text\"\n                 *ngIf=\"!mobile\"\n                 [formControl]=\"hourControl\"\n                 autocomplete=\"off\"\n                 min=\"0\" max=\"23\"\n                 [textMask]=\"{mask: hourMask, keepCharPositions: true, placeholderChar: placeholderChar, guide: true}\"\n                 [placeholder]=\"'COMMON.TIME_PLACEHOLDER'|translate\"\n                 [required]=\"required\"\n                 (keyup.arrowdown)=\"openTimePicker($event)\"\n                 (keyup.escape)=\"preventEvent($event)\"\n                 (blur)=\"checkIfTouched()\"\n                 [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n\n          <input matInput #matInput type=\"text\"\n                 *ngIf=\"mobile\"\n                 [formControl]=\"hourControl\"\n                 (click)=\"openTimePickerIfMobile($event)\"\n                 readonly>\n\n          <input matInput type=\"text\"\n                 [formControl]=\"hourControl\"\n                 hidden\n                 [ngxTimepicker]=\"timePicker\"\n                 [format]=\"24\">\n\n          <button matSuffix type=\"button\" mat-icon-button\n                  tabindex=\"-1\"\n                  *ngIf=\"!compact && !mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (click)=\"openTimePicker($event)\" >\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n          <button matSuffix type=\"button\" mat-icon-button\n                  tabindex=\"-1\"\n                  *ngIf=\"!compact && mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (click)=\"openTimePickerIfMobile($event)\">\n            <mat-icon>access_time</mat-icon>\n          </button>\n\n          <ngx-material-timepicker #timePicker [@.disabled]=\"true\"\n                                   (timeSet)=\"onTimePickerChange($event)\"\n                                   [ESC]=\"!mobile\"\n                                   [defaultTime]=\"'00:00'\"\n                                   [cancelBtnTmpl]=\"timePickerCancelButton\"\n                                   [confirmBtnTmpl]=\"timePickerOkButton\"\n                                   [preventOverlayClick]=\"mobile\"\n                                   [enableKeyboardInput]=\"false\"\n                                   [disableAnimation]=\"true\">\n            <!-- cancel button -->\n            <ng-template #timePickerCancelButton>\n              <ion-button fill=\"clear\" color=\"dark\">\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n            </ng-template>\n\n            <!-- confirm button -->\n            <ng-template #timePickerOkButton>\n              <ion-button fill=\"solid\" color=\"tertiary\">\n                <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n              </ion-button>\n            </ng-template>\n\n          </ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\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$1,
+                    DEFAULT_VALUE_ACCESSOR$4,
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field .datetime-md{padding:0!important}ion-row.no-wrap{flex-wrap:nowrap}ion-col.day{min-width:100px}ion-col.day .mat-form-field-subscript-wrapper{overflow:visible;right:-64px;width:calc(100% + 64px)}ion-col.day .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper{display:flex}ion-col.day .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper .mat-form-field-hint-spacer{flex:1 0 1em}ion-col.hour{min-width:55px;max-width:65px}ion-col.hour mat-form-field{width:100%}ion-col.hour mat-form-field input[type=text],ion-col.hour mat-form-field mat-label{text-align:left;min-width:50px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:100px}.hour .mat-form-field-label{max-width:40px}.hour mat-form-field.mat-form-field-should-float .mat-form-field-placeholder{max-width:inherit}mat-error{text-align:right;width:100%}"]
             },] }
 ];
 MatDateTime.ctorParameters = () => [
-    { type: Platform },
     { type: DateAdapter },
     { type: TranslateService },
     { type: FormBuilder },
@@ -5463,17 +5618,17 @@ MatDateTime.propDecorators = {
     matInputs: [{ type: ViewChildren, args: ['matInput',] }]
 };
 
-const DEFAULT_VALUE_ACCESSOR$2 = {
+const DEFAULT_VALUE_ACCESSOR$3 = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => MatDateShort),
     multi: true
 };
-const DAY_MASK$2 = [/\d/, /\d/, /\d/, /\d/];
+const DAY_MASK = [/\d/, /\d/, /\d/, /\d/];
 const noop$4 = () => {
 };
-const ɵ0$5 = noop$4;
+const ɵ0$7 = noop$4;
 class MatDateShort {
-    constructor(platform, dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
+    constructor(dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
         this.dateAdapter = dateAdapter;
         this.translate = translate;
         this.formBuilder = formBuilder;
@@ -5484,16 +5639,13 @@ class MatDateShort {
         this._onTouchedCallback = noop$4;
         this.writing = true;
         this.disabling = false;
-        this.dayMask = DAY_MASK$2;
+        this.dayMask = DAY_MASK;
         this.disabled = false;
         this.floatLabel = 'auto';
         this.readonly = false;
         this.compact = false;
         this.placeholderChar = DEFAULT_PLACEHOLDER_CHAR;
         this.clearable = false;
-        // Workaround because ion-datetime has issue (do not returned a ISO date)
-        this.mobile = platform.is('mobile');
-        this.keyboardHideDelay = this.mobile && KEYBOARD_HIDE_DELAY_MS || 0;
         this.locale = (translate.currentLang || translate.defaultLang).substr(0, 2);
     }
     set tabindex(value) {
@@ -5512,6 +5664,9 @@ class MatDateShort {
         this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName);
         if (!this.formControl)
             throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-date-short-field>.');
+        this.mobile = isNotNil(this.mobile) ? this.mobile : isMobile(window);
+        // Workaround because ion-datetime has issue (do not returned a ISO date)
+        this.keyboardHideDelay = this.mobile && KEYBOARD_HIDE_DELAY_MS || 0;
         // Redirect errors from main control, into day sub control
         const $error = new BehaviorSubject(null);
         this.required = toBoolean(this.required, this.formControl.validator === Validators.required);
@@ -5729,14 +5884,13 @@ MatDateShort.decorators = [
                 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",
                 providers: [
-                    DEFAULT_VALUE_ACCESSOR$2,
+                    DEFAULT_VALUE_ACCESSOR$3,
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [":host{display:inline-block;width:100%;position:relative}:host [no-padding]{--ion-grid-column-padding:0}:host [nowrap]{flex-wrap:nowrap}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field .datetime-md,mat-form-field ion-datetime{padding:0!important}ion-col.day{min-width:100px}ion-col.day .mat-form-field-subscript-wrapper{overflow:visible;right:-64px;width:calc(100% + 64px)}ion-col.day .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper{display:flex}ion-col.day .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper .mat-form-field-hint-spacer{flex:1 0 1em}ion-col.hour{min-width:55px;max-width:65px}ion-col.hour mat-form-field{width:100%}ion-col.hour mat-form-field input[type=text],ion-col.hour mat-form-field mat-label{text-align:left;min-width:50px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:100px}.hour .mat-form-field-label{max-width:40px}.hour mat-form-field.mat-form-field-should-float .mat-form-field-placeholder{max-width:inherit}mat-error{text-align:right;width:100%}"]
             },] }
 ];
 MatDateShort.ctorParameters = () => [
-    { type: Platform },
     { type: DateAdapter },
     { type: TranslateService },
     { type: FormBuilder },
@@ -5745,6 +5899,7 @@ MatDateShort.ctorParameters = () => [
     { type: FormGroupDirective, decorators: [{ type: Optional }] }
 ];
 MatDateShort.propDecorators = {
+    mobile: [{ type: Input }],
     disabled: [{ type: Input }],
     formControl: [{ type: Input }],
     formControlName: [{ type: Input }],
@@ -5797,16 +5952,16 @@ SharedMatDateTimeModule.decorators = [
             },] }
 ];
 
-const DEFAULT_VALUE_ACCESSOR$3 = {
+const DEFAULT_VALUE_ACCESSOR$2 = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => MatDuration),
     multi: true
 };
 const HOUR_TIME_PATTERN = /[0-9]\d\d:[0-5]\d/;
-const HOUR_MASK$1 = [/\d/, /\d/, /\d/, ':', /[0-5]/, /\d/];
-const noop$5 = () => {
+const HOUR_MASK = [/\d/, /\d/, /\d/, ':', /[0-5]/, /\d/];
+const noop$3 = () => {
 };
-const ɵ0$6 = noop$5;
+const ɵ0$6 = noop$3;
 class MatDuration {
     constructor(platform, dateAdapter, translate, formBuilder, cd, formGroupDir) {
         this.dateAdapter = dateAdapter;
@@ -5815,11 +5970,11 @@ class MatDuration {
         this.cd = cd;
         this.formGroupDir = formGroupDir;
         this._subscription = new Subscription();
-        this._onChangeCallback = noop$5;
-        this._onTouchedCallback = noop$5;
+        this._onChangeCallback = noop$3;
+        this._onTouchedCallback = noop$3;
         this.writing = true;
         this.disabling = false;
-        this.hourMask = HOUR_MASK$1;
+        this.hourMask = HOUR_MASK;
         this.disabled = false;
         this.floatLabel = 'auto';
         this.readonly = false;
@@ -5999,7 +6154,7 @@ MatDuration.decorators = [
                 selector: 'mat-duration-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|duration }}</ion-text>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\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    <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.TIME</mat-label>\n\n    <div matPrefix><ng-content select=\"[matPrefix]\"></ng-content></div>\n\n    <input matInput #matInput type=\"text\"\n           autocomplete=\"off\"\n           [formControl]=\"textControl\"\n           [textMask]=\"{mask: hourMask, keepCharPositions: true, placeholderChar: placeholderChar, guide: true}\"\n           [placeholder]=\"'COMMON.DURATION_PLACEHOLDER'|translate\"\n           [required]=\"required\"\n           (keydown.tab)=\"moveCaretToSeparator($event, true)\"\n           (keydown.shift.tab)=\"moveCaretToSeparator($event, false)\"\n           (keyup.escape)=\"preventEvent($event)\"\n           (blur)=\"checkIfTouched()\"\n           [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n\n\n    <!-- errors -->\n    <mat-error *ngIf=\"!formControl.hasError('required') && textControl.hasError('pattern')\" translate>ERROR.FIELD_NOT_VALID_PATTERN</mat-error>\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\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n</ng-template>\n\n",
                 providers: [
-                    DEFAULT_VALUE_ACCESSOR$3,
+                    DEFAULT_VALUE_ACCESSOR$2,
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [":host{display:inline-block;min-width:140px;position:relative;--ion-grid-column-padding:0}:host,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%}"]
@@ -6056,22 +6211,22 @@ SharedMatDurationModule.decorators = [
             },] }
 ];
 
-const DEFAULT_VALUE_ACCESSOR$4 = {
+const DEFAULT_VALUE_ACCESSOR$1 = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => MatBooleanField),
     multi: true
 };
-const noop$6 = () => {
+const noop$2 = () => {
 };
-const ɵ0$7 = noop$6;
+const ɵ0$5 = noop$2;
 class MatBooleanField {
     constructor(translate, formBuilder, cd, formGroupDir) {
         this.translate = translate;
         this.formBuilder = formBuilder;
         this.cd = cd;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$6;
-        this._onTouchedCallback = noop$6;
+        this._onChangeCallback = noop$2;
+        this._onTouchedCallback = noop$2;
         this._writing = false;
         this.showRadio = false;
         this.disabled = false;
@@ -6234,7 +6389,7 @@ MatBooleanField.decorators = [
                 selector: 'mat-boolean-field',
                 template: "<mat-form-field  *ngIf=\"readonly; else writable\"\n                 [floatLabel]=\"floatLabel\"\n                 class=\"mat-form-field-disabled {{classList}}\">\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n  <input matInput hidden type=\"text\" readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{(formControl.value == null && 'COMMON.EMPTY_OPTION' || (formControl.value === true && yesLabel) || noLabel) | translate }}</ion-text>\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<ng-template #writable>\n  <ng-container [ngSwitch]=\"style\">\n\n    <!-- Radio -->\n    <mat-form-field *ngSwitchCase=\"'radio'\"\n                    [floatLabel]=\"showRadio && (!floatLabel || floatLabel === 'auto') ? 'always': floatLabel\"\n                    class=\"mat-boolean-field mat-boolean-field-radio {{classList}}\">\n      <mat-label *ngIf=\"placeholder && floatLabel!=='never'\">\n        {{placeholder}}\n        <span [hidden]=\"showRadio\">({{yesLabel|translate}}/{{'COMMON.NO'|translate}})</span>\n      </mat-label>\n      <div matPrefix>\n        <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n      </div>\n      <input matInput #fakeInput type=\"text\" readonly=\"true\"\n             [formControl]=\"formControl\"\n             (focus)=\"_onFocusFakeInput($event)\"\n             [required]=\"required\"\n             [class.cdk-visually-hidden]=\"showRadio\"\n             [tabindex]=\"tabindex\">\n\n      <!-- radio button -->\n      <mat-radio-group [hidden]=\"!showRadio\"\n                       [formControl]=\"formControl\"\n                       (change)=\"onRadioValueChanged($event)\">\n        <mat-radio-button #yesButton [value]=\"true\">\n          <span>{{yesLabel|translate}}</span>\n        </mat-radio-button>&nbsp;\n        <mat-radio-button #noButton [value]=\"false\">\n          <span>{{noLabel|translate}}</span>\n        </mat-radio-button>\n      </mat-radio-group>\n\n      <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n      <div matSuffix>\n        <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n      </div>\n    </mat-form-field>\n\n    <!-- Checkbox -->\n    <mat-form-field *ngSwitchCase=\"'checkbox'\"\n                    [floatLabel]=\"floatLabel\"\n                    class=\"mat-boolean-field mat-boolean-field-checkbox {{classList}}\">\n      <mat-label *ngIf=\"placeholder && !showRadio\">\n        {{placeholder}}\n      </mat-label>\n      <div matPrefix>\n        <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n      </div>\n      <input matInput #matInput\n             [formControl]=\"formControl\"\n             (focus)=\"_onFocusFakeInput($event)\"\n             [required]=\"required\"\n             [class.cdk-visually-hidden]=\"showRadio\"\n             [tabindex]=\"tabindex\">\n\n      <ion-label>&nbsp;</ion-label>\n\n      <!-- checkbox, when compact -->\n      <mat-checkbox #checkboxButton\n                    [formControl]=\"formControl\"\n                    (change)=\"onCheckboxValueChanged($event)\"\n                    [indeterminate]=\"value===undefined\"\n                    [hidden]=\"!showRadio\"\n                    [tabindex]=\"tabindex\">\n      </mat-checkbox>\n\n      <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n      <div matSuffix>\n        <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n      </div>\n    </mat-form-field>\n\n    <!-- Buttons -->\n    <mat-form-field *ngSwitchCase=\"'button'\"\n                    [floatLabel]=\"floatLabel === 'never' ? 'never' : 'always'\"\n                    class=\"mat-boolean-field mat-boolean-field-button {{classList}}\">\n      <div matPrefix>\n        <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n      </div>\n      <input matInput type=\"text\" hidden\n             [formControl]=\"formControl\"\n             [placeholder]=\"placeholder\"\n             [required]=\"required\">\n      <div class=\"mat-form-field-buttons\"\n           [style.--buttons-col-count]=\"buttonsColCount\"\n           *ngIf=\"!formControl.disabled; else disabledLabel\">\n        <!-- yes -->\n        <ion-button class=\"mat-form-field-button\"\n                    [tabindex]=\"_tabindex\"\n                    (click)=\"writeValue(true, $event)\"\n                    (keyup.enter)=\"writeValue(true, $event)\"\n                    [color]=\"_value == null ? 'tertiary' : (_value === true) ? 'accent' : 'light'\">\n          <ion-icon *ngIf=\"showButtonIcons && yesIcon; let icon\" slot=\"start\" [name]=\"icon\"></ion-icon>\n          {{yesLabel|translate}}\n        </ion-button>\n\n        <!-- No button -->\n        <ion-button class=\"mat-form-field-button\"\n                    [tabindex]=\"_tabindex !== undefined ? (_tabindex + 1) : undefined\"\n                    (click)=\"writeValue(false, $event)\"\n                    (keyup.enter)=\"writeValue(false, $event)\"\n                    [color]=\"_value == null ? 'tertiary' : (_value === false) ? 'accent' : 'light'\">\n          <ion-icon *ngIf=\"showButtonIcons && noIcon; let icon\" slot=\"start\" [name]=\"icon\"></ion-icon>\n          {{noLabel|translate}}\n        </ion-button>\n      </div>\n      <ng-template #disabledLabel>\n        <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n      </ng-template>\n\n      <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n      <div matSuffix>\n        <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n      </div>\n\n    </mat-form-field>\n  </ng-container>\n\n</ng-template>\n\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
                 providers: [
-                    DEFAULT_VALUE_ACCESSOR$4
+                    DEFAULT_VALUE_ACCESSOR$1
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [":host{width:100%}.mat-form-field.mat-boolean-field-radio{margin-top:-2px}.mat-form-field.mat-boolean-field-button{margin-top:-4px}.mat-form-field .mat-form-field-buttons{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}.mat-form-field .mat-form-field-buttons .mat-form-field-button{--flex-basis:calc(100% / var(--buttons-col-count, 2));flex:0 1 var(--flex-basis);max-width:min(var(--flex-basis),150px);white-space:normal;padding:0 2px;height:40px}"]
@@ -6480,7 +6635,7 @@ class MatNumpadDomService {
         this.appRef.detachView(this.componentRef.hostView);
     }
 }
-MatNumpadDomService.ɵprov = ɵɵdefineInjectable({ factory: function MatNumpadDomService_Factory() { return new MatNumpadDomService(ɵɵinject(ComponentFactoryResolver), ɵɵinject(ApplicationRef), ɵɵinject(INJECTOR), ɵɵinject(DOCUMENT, 8)); }, token: MatNumpadDomService, providedIn: "root" });
+MatNumpadDomService.ɵprov = i0.ɵɵdefineInjectable({ factory: function MatNumpadDomService_Factory() { return new MatNumpadDomService(i0.ɵɵinject(i0.ComponentFactoryResolver), i0.ɵɵinject(i0.ApplicationRef), i0.ɵɵinject(i0.INJECTOR), i0.ɵɵinject(i1$3.DOCUMENT, 8)); }, token: MatNumpadDomService, providedIn: "root" });
 MatNumpadDomService.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root'
@@ -6844,7 +6999,7 @@ SharedMatNumpadModule.decorators = [
             },] }
 ];
 
-const DEFAULT_VALUE_ACCESSOR$5 = {
+const DEFAULT_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => MatSwipeField),
     multi: true
@@ -7107,7 +7262,7 @@ MatSwipeField.decorators = [
     { type: Component, args: [{
                 selector: 'mat-swipe-field',
                 template: "<mat-form-field [floatLabel]=\"showSlides && (!floatLabel || floatLabel === 'auto') ? 'always': floatLabel\"\n                [class]=\"classList\"\n                [class.mat-form-field-disabled]=\"disabled\">\n  <mat-label *ngIf=\"placeholder && floatLabel!=='never'\">\n    {{placeholder}}\n  </mat-label>\n  <input matInput #fakeInput type=\"text\"\n         [formControl]=\"formControl\"\n         [readonly]=\"true\"\n         (focus)=\"_onFocusFakeInput($event)\"\n         [required]=\"required\"\n         [class.cdk-visually-hidden]=\"showSlides\"\n         [tabindex]=\"tabindex\">\n\n  <div class=\"slides-container\" [class.hidden]=\"!showSlides\">\n    <ion-slides #slides\n                [options]=\"slidesOptions\"\n                (ionSlidesDidLoad)=\"slidesLoaded()\"\n                (ionSlideReachStart)=\"reachStart(true)\"\n                (ionSlideReachEnd)=\"reachEnd(true)\"\n                (ionSlideNextEnd)=\"reachStart(false)\"\n                (ionSlidePrevEnd)=\"reachEnd(false)\"\n                (ionSlideDidChange)=\"slideChanged()\"\n    >\n      <ion-slide *ngFor=\"let item of $items | async\">\n        <ion-label>{{ displayWith(item) }}</ion-label>\n      </ion-slide>\n\n    </ion-slides>\n  </div>\n\n  <button #prevButton\n          mat-icon-button\n          type=\"button\"\n          class=\"button-prev\"\n          [hidden]=\"!showSlides\"\n          [disabled]=\"previousDisabled\"\n          (click)=\"previous()\">\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n  <button #nextButton\n          mat-icon-button\n          type=\"button\"\n          class=\"button-next\"\n          [hidden]=\"!showSlides\"\n          [disabled]=\"nextDisabled\"\n          (click)=\"next()\">\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n\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  <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\n</mat-form-field>\n",
-                providers: [DEFAULT_VALUE_ACCESSOR$5],
+                providers: [DEFAULT_VALUE_ACCESSOR],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [":host{display:inline-block;width:100%;position:relative}input.hidden{display:none}.slides-container .swiper-slide{font-size:16px!important}.slides-container.hidden{visibility:hidden;height:0!important}.button-next,.button-prev{position:absolute;top:calc(50% - 20px);z-index:10}.button-prev{left:0;right:auto}.button-next{left:auto;right:0}"]
             },] }
@@ -7165,14 +7320,14 @@ SharedMatSwipeModule.decorators = [
             },] }
 ];
 
-const noop$7 = () => { };
-const ɵ0$8 = noop$7;
+const noop$1 = () => { };
+const ɵ0$4 = noop$1;
 class MatChipsField {
     constructor(cd, formGroupDir) {
         this.cd = cd;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$7;
-        this._onTouchedCallback = noop$7;
+        this._onChangeCallback = noop$1;
+        this._onTouchedCallback = noop$1;
         this.logPrefix = '[mat-chips] ';
         this.formControlName = null;
         this.required = false;
@@ -7293,9 +7448,9 @@ class MatChipsField {
             // - if label then col size = 2
             // - if rankOrder then col size = 1
             // - ese => auto size
-            || this.displayAttributes.map(attr => (attr && attr.endsWith('label')) ? 2
-                : ((attr && attr.endsWith('rankOrder')) ? 1
-                    : undefined));
+            || this.displayAttributes.map(attr => attr && (attr.endsWith('label') ? 3
+                : (attr.endsWith('rankOrder') ? 2
+                    : undefined)));
         this.displayColumnNames = this.displayAttributes.map((attr, index) => this.displayColumnNames && this.displayColumnNames[index] ||
             (this.i18nPrefix + changeCaseToUnderscore(attr).toUpperCase()));
         this.mobile = toBoolean(this.mobile, false);
@@ -7313,18 +7468,18 @@ class MatChipsField {
         // No suggestFn: filter on the given items
         if (!this.suggestFn) {
             const suggestFromArrayFn = (value, filter) => __awaiter(this, void 0, void 0, function* () {
-                if (this.debug)
-                    console.debug(this.logPrefix + ' Calling suggestFromArray with value=', value);
+                // DEBUG
+                //if (this.debug) console.debug(this.logPrefix + ' Calling suggestFromArray with value=', value);
                 return suggestFromArray(this.$inputItems.value, value, Object.assign({ searchAttributes: this.displayAttributes }, filter));
             });
             // Wait (once) that items are loaded, then call suggest from array fn
             this.suggestFn = (value, filter) => __awaiter(this, void 0, void 0, function* () {
                 if (isNil(this.$inputItems.value)) {
-                    if (this.debug)
-                        console.debug('[mat-chips] Waiting items to be set...');
+                    // DEBUG
+                    //if (this.debug) console.debug('[mat-chips] Waiting items to be set...');
                     yield firstNotNilPromise(this.$inputItems);
-                    if (this.debug)
-                        console.debug('[mat-chips] Received items:', this.$inputItems.value);
+                    // DEBUG
+                    //if (this.debug) console.debug('[mat-chips] Received items:', this.$inputItems.value);
                 }
                 this.suggestFn = suggestFromArrayFn;
                 return this.suggestFn(value, filter); // Loop
@@ -7353,9 +7508,7 @@ class MatChipsField {
         ), 
         // Object set: use it (no distinctUntilChanged() pipe need)
         this.inputControl.valueChanges
-            .pipe(startWith(this.inputControl.value), filter(value => isNotNil(value) && typeof value === 'object'), 
-        // DEBUG
-        tap(value => this.debug && console.debug(this.logPrefix + ' Received an object value: ', value))), 
+            .pipe(startWith(this.inputControl.value), filter(value => isNotNil(value) && typeof value === 'object')), 
         // On dropdown button click (no distinctUntilChanged(), nor debounceTime)
         this.dropButtonClick
             .pipe(filter(event => this.enabled && (!event || !event.defaultPrevented)), tap(_ => this.matInputText.nativeElement.focus()), map(_ => this.showAllOnFocus ? '*' : this.formControl.value), 
@@ -7428,6 +7581,7 @@ class MatChipsField {
                 this.$filteredItems.next(undefined);
             }
             this._implicitValue = null; // reset the implicit value
+            this.closePanel(); // Clone panel
         }));
         // Listen form control status change
         this._subscription.add(this.formControl.statusChanges
@@ -7438,6 +7592,7 @@ class MatChipsField {
             .subscribe(() => this.checkIfTouched()));
         this._subscription.add(this.keydownEscape.subscribe(event => {
             if (this.isOpen) {
+                // Avoid form or page to manage escape event
                 event === null || event === void 0 ? void 0 : event.stopPropagation();
                 event === null || event === void 0 ? void 0 : event.preventDefault();
                 // DEBUG
@@ -7525,8 +7680,8 @@ class MatChipsField {
             value = [value];
         }
         if (value !== this.formControl.value) {
-            if (this.debug)
-                console.debug(this.logPrefix + ' Writing value: ', value);
+            // DEBUG
+            //if (this.debug) console.debug(this.logPrefix + ' Writing value: ', value);
             this.formControl.patchValue(value, { emitEvent: false });
             this._onChangeCallback(value);
         }
@@ -7559,15 +7714,17 @@ class MatChipsField {
             if (event.stopPropagation)
                 event.stopPropagation();
             event.returnValue = false;
-            if (this.debug)
-                console.debug(this.logPrefix + ' Cancelling focus event');
+            // DEBUG
+            //if (this.debug) console.debug(this.logPrefix + ' Cancelling focus event');
             return false;
         }
+        // DEBUG
+        //if (this.debug) console.debug(this.logPrefix + ' Select input content');
         const hasContent = selectInputContent(event);
         // If combo is empty, or if has content but should force to show panel on focus
         if (!hasContent || (this.showPanelOnFocus && this.showAllOnFocus)) {
-            if (this.debug)
-                console.debug(this.logPrefix + ' Emit focus event');
+            // DEBUG
+            //if (this.debug) console.debug(this.logPrefix + ' Emit focus event');
             this.focused.emit(event);
             return true;
         }
@@ -7582,11 +7739,12 @@ class MatChipsField {
             if (event.stopPropagation)
                 event.stopPropagation();
             event.returnValue = false;
-            //DEBUG console.debug(this.logPrefix + " Cancelling blur event");
+            //DEBUG
+            //if (this.debug) console.debug(this.logPrefix + " Cancelling blur event");
             return false;
         }
-        //DEBUG
-        //console.debug(this.logPrefix + ' Blur: move caret to the beginning');
+        // DEBUG
+        //if (this.debug) console.debug(this.logPrefix + ' Blur: move caret to the beginning');
         // Move caret to the beginning (fix issue IMAGINE-469)
         selectInputRange(event.target, 0, 0);
         this.blurred.emit(event);
@@ -7724,7 +7882,7 @@ MatChipsField.decorators = [
     { type: Component, args: [{
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'mat-chips-field',
-                template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field [floatLabel]=\"floatLabel\" class=\"material-chips\" [class.mat-form-field-disabled]=\"disabled\">\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <mat-label>{{placeholder}}</mat-label>\n        <mat-chip-list #chipList\n                       (focus)=\"filterChipsFocusEvent($event)\" >\n          <mat-chip\n            *ngFor=\"let item of value\"\n            [selectable]=\"false\"\n            [removable]=\"!disabled\"\n            (removed)=\"remove(item)\"\n            [color]=\"chipColor\"\n            >\n            {{displayWith(item)}}\n            <mat-icon matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n          </mat-chip>\n\n          <input #matInputText type=\"text\"\n                 [matAutocomplete]=\"autocomplete\"\n                 [matAutocompletePosition]=\"matAutocompletePosition\"\n                 [formControl]=\"inputControl\"\n                 [appAutofocus]=\"autofocus\"\n                 [tabindex]=\"_tabindex\"\n                 [readonly]=\"disabled\"\n                 [hidden]=\"disabled\"\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                 [matChipInputFor]=\"chipList\"\n          >\n        </mat-chip-list>\n\n        <!-- autocomplete -->\n        <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                          (optionSelected)=\"add($event)\"\n                          autoActiveFirstOption\n                          [displayWith]=\"displayWith\"\n                          [class]=\"classList\"\n                          [panelWidth]=\"panelWidth\">\n          <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n            <ion-col *ngFor=\"let attr of displayAttributes; index as i; last as last\" [size]=\"displayColumnSizes[i]\">\n              <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              <ion-text color=\"light\" *ngIf=\"last && itemCount; let count\" 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          <ng-container *ngIf=\"$filteredItems | async; else loadingTemplate; let items\">\n            <!-- No item option -->\n            <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n              <ion-label>{{noResultMessage | translate}}</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: inputControl.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=\"(matInputText.value | 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-autocomplete>\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        <ng-content select=\"[matError]\"></ng-content>\n\n      </mat-form-field>\n\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 mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"dropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button 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",
+                template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field [floatLabel]=\"floatLabel\" class=\"material-chips\" [class.mat-form-field-disabled]=\"disabled\">\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <mat-label>{{placeholder}}</mat-label>\n        <mat-chip-list #chipList\n                       (focus)=\"filterChipsFocusEvent($event)\" >\n          <mat-chip\n            *ngFor=\"let item of value\"\n            [selectable]=\"false\"\n            [removable]=\"!disabled\"\n            (removed)=\"remove(item)\"\n            [color]=\"chipColor\"\n            >\n            {{displayWith(item)}}\n            <mat-icon matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n          </mat-chip>\n\n          <input #matInputText type=\"text\"\n                 [matAutocomplete]=\"autocomplete\"\n                 [matAutocompletePosition]=\"matAutocompletePosition\"\n                 [formControl]=\"inputControl\"\n                 [appAutofocus]=\"autofocus\"\n                 [tabindex]=\"_tabindex\"\n                 [readonly]=\"disabled\"\n                 [hidden]=\"disabled\"\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                 [matChipInputFor]=\"chipList\"\n          >\n        </mat-chip-list>\n\n        <!-- autocomplete -->\n        <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                          (optionSelected)=\"add($event)\"\n                          autoActiveFirstOption\n                          [displayWith]=\"displayWith\"\n                          [class]=\"classList\"\n                          [panelWidth]=\"panelWidth\">\n          <ion-row class=\"mat-autocomplete-header ion-no-padding column\">\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          <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>{{noResultMessage | translate}}</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: inputControl.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          <!-- 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=\"(matInputText.value | 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-autocomplete>\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        <ng-content select=\"[matError]\"></ng-content>\n\n      </mat-form-field>\n\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 mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"dropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button 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",
                 providers: [{
                         provide: NG_VALUE_ACCESSOR,
                         multi: true,
@@ -8041,7 +8199,7 @@ class ProgressBarService {
         }
     }
 }
-ProgressBarService.ɵprov = ɵɵdefineInjectable({ factory: function ProgressBarService_Factory() { return new ProgressBarService(); }, token: ProgressBarService, providedIn: "root" });
+ProgressBarService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ProgressBarService_Factory() { return new ProgressBarService(); }, token: ProgressBarService, providedIn: "root" });
 ProgressBarService.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
@@ -8085,7 +8243,7 @@ class AppGestureConfig extends HammerGestureConfig {
         return mc;
     }
 }
-AppGestureConfig.ɵprov = ɵɵdefineInjectable({ factory: function AppGestureConfig_Factory() { return new AppGestureConfig(); }, token: AppGestureConfig, providedIn: "root" });
+AppGestureConfig.ɵprov = i0.ɵɵdefineInjectable({ factory: function AppGestureConfig_Factory() { return new AppGestureConfig(); }, token: AppGestureConfig, providedIn: "root" });
 AppGestureConfig.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
@@ -8310,7 +8468,7 @@ class MatPaginatorI18n extends MatPaginatorIntl {
         this.previousPageLabel = this.translate.instant('COMMON.PAGINATOR.PREVIOUS_PAGE');
     }
 }
-MatPaginatorI18n.ɵprov = ɵɵdefineInjectable({ factory: function MatPaginatorI18n_Factory() { return new MatPaginatorI18n(ɵɵinject(TranslateService)); }, token: MatPaginatorI18n, providedIn: "root" });
+MatPaginatorI18n.ɵprov = i0.ɵɵdefineInjectable({ factory: function MatPaginatorI18n_Factory() { return new MatPaginatorI18n(i0.ɵɵinject(i1$1.TranslateService)); }, token: MatPaginatorI18n, providedIn: "root" });
 MatPaginatorI18n.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
@@ -8400,17 +8558,17 @@ function getColorContrast(color, bw) {
     return rgbArrayToHex(rgb.map(v => 255 - v));
 }
 
-const noop$8 = () => {
+const noop = () => {
 };
-const ɵ0$9 = noop$8;
+const ɵ0$3 = noop;
 class AppFormField {
     constructor(translate, cd, injector, formGroupDir) {
         this.translate = translate;
         this.cd = cd;
         this.injector = injector;
         this.formGroupDir = formGroupDir;
-        this._onChangeCallback = noop$8;
-        this._onTouchedCallback = noop$8;
+        this._onChangeCallback = noop;
+        this._onTouchedCallback = noop;
         this.readonly = false;
         this.compact = false;
         this.floatLabel = 'auto';
@@ -8846,14 +9004,14 @@ class AudioProvider extends StartableService {
         });
     }
 }
-AudioProvider.ɵprov = ɵɵdefineInjectable({ factory: function AudioProvider_Factory() { return new AudioProvider(ɵɵinject(Platform), ɵɵinject(NativeAudio, 8), ɵɵinject(Vibration, 8), ɵɵinject(AudioManagement$1, 8)); }, token: AudioProvider, providedIn: "root" });
+AudioProvider.ɵprov = i0.ɵɵdefineInjectable({ factory: function AudioProvider_Factory() { return new AudioProvider(i0.ɵɵinject(i1$4.Platform), i0.ɵɵinject(i2.NativeAudio, 8), i0.ɵɵinject(i3.Vibration, 8), i0.ɵɵinject(i4.AudioManagement, 8)); }, token: AudioProvider, providedIn: "root" });
 AudioProvider.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
 AudioProvider.ctorParameters = () => [
     { type: Platform },
-    { type: NativeAudio$1, decorators: [{ type: Optional }] },
-    { type: Vibration$1, decorators: [{ type: Optional }] },
+    { type: NativeAudio, decorators: [{ type: Optional }] },
+    { type: Vibration, decorators: [{ type: Optional }] },
     { type: AudioManagement, decorators: [{ type: Optional }] }
 ];
 
@@ -8938,7 +9096,7 @@ class Hotkeys {
         });
     }
 }
-Hotkeys.ɵprov = ɵɵdefineInjectable({ factory: function Hotkeys_Factory() { return new Hotkeys(ɵɵinject(EventManager), ɵɵinject(MatDialog), ɵɵinject(DOCUMENT), ɵɵinject(ModalController), ɵɵinject(PopoverController)); }, token: Hotkeys, providedIn: "root" });
+Hotkeys.ɵprov = i0.ɵɵdefineInjectable({ factory: function Hotkeys_Factory() { return new Hotkeys(i0.ɵɵinject(i1$5.EventManager), i0.ɵɵinject(i2$1.MatDialog), i0.ɵɵinject(i1$3.DOCUMENT), i0.ɵɵinject(i1$4.ModalController), i0.ɵɵinject(i1$4.PopoverController)); }, token: Hotkeys, providedIn: "root" });
 Hotkeys.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root'
@@ -9113,7 +9271,7 @@ class Base64ImageReader {
     }
 }
 
-const uuidv4 = uuidv4Imported;
+const uuidv4$1 = uuidv4Imported;
 class FileService {
     constructor(platform, 
     //private transfer: FileTransfer,
@@ -9150,7 +9308,7 @@ class FileService {
             const lastSlashIndex = source.lastIndexOf('/');
             if (lastSlashIndex === -1)
                 throw new Error('Invalid URL: ' + source);
-            const fileName = lastSlashIndex < (source.length - 1) && source.substring(lastSlashIndex + 1) || uuidv4();
+            const fileName = lastSlashIndex < (source.length - 1) && source.substring(lastSlashIndex + 1) || uuidv4$1();
             // Download into the file system
             if (responseType === 'file' && this.canUseFileSystem) {
                 console.warn(`WARN: [file] Fetching image {${source}} in local file...`);
@@ -9206,7 +9364,7 @@ class FileService {
         this._started = true;
     }
 }
-FileService.ɵprov = ɵɵdefineInjectable({ factory: function FileService_Factory() { return new FileService(ɵɵinject(Platform), ɵɵinject(HttpClient), ɵɵinject(ENVIRONMENT)); }, token: FileService, providedIn: "root" });
+FileService.ɵprov = i0.ɵɵdefineInjectable({ factory: function FileService_Factory() { return new FileService(i0.ɵɵinject(i1$4.Platform), i0.ɵɵinject(i2$2.HttpClient), i0.ɵɵinject(ENVIRONMENT)); }, token: FileService, providedIn: "root" });
 FileService.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root',
@@ -9372,7 +9530,7 @@ class Base58 {
 Base58.alphabet = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz';
 
 const scrypt = require('scrypt-async');
-const sha256 = require('hash.js/lib/hash/sha/256');
+const sha256$1 = require('hash.js/lib/hash/sha/256');
 const sha512 = require('hash.js/lib/hash/sha/512');
 const nacl = {
     sign,
@@ -9476,7 +9634,7 @@ class CryptoService {
      * Hash (using SHA256) a message
      */
     sha256(message) {
-        return sha256().update(message).digest('hex');
+        return sha256$1().update(message).digest('hex');
     }
     /**
      * Hash (using SHA512) a message
@@ -9489,7 +9647,7 @@ class CryptoService {
         return nacl.util.encodeBase64(m);
     }
 }
-CryptoService.ɵprov = ɵɵdefineInjectable({ factory: function CryptoService_Factory() { return new CryptoService(); }, token: CryptoService, providedIn: "root" });
+CryptoService.ɵprov = i0.ɵɵdefineInjectable({ factory: function CryptoService_Factory() { return new CryptoService(); }, token: CryptoService, providedIn: "root" });
 CryptoService.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
@@ -9972,109 +10130,6 @@ Peer = Peer_1 = __decorate([
     EntityClass({ typename: 'PeerVO' })
 ], Peer);
 
-// import the required animation functions from the angular animations module
-const fadeInAnimation = 
-// trigger name for attaching this animation to an element using the [@triggerName] syntax
-trigger('fadeInAnimation', [
-    // route 'enter' transition
-    transition(':enter', [
-        // css styles at start of transition
-        style({ opacity: 0 }),
-        // animation and styles at end of transition
-        animate('.3s', style({ opacity: 1 }))
-    ]),
-]);
-const fadeInOutAnimation = 
-// trigger name for attaching this animation to an element using the [@triggerName] syntax
-trigger('fadeInOutAnimation', [
-    // route 'enter' transition
-    transition(':enter', [
-        // css styles at start of transition
-        style({ opacity: 0 }),
-        // animation and styles at end of transition
-        animate('.3s', style({ opacity: 1 }))
-    ]),
-    // route 'leave' transition
-    transition(':leave', [
-        // animation and styles at end of transition
-        animate('.5s ease-in-out', style({
-            opacity: 0
-        }))
-    ]),
-]);
-const slideInOutAnimation = 
-// trigger name for attaching this animation to an element using the [@triggerName] syntax
-trigger('slideInOutAnimation', [
-    // end state styles for route container (host)
-    state('*', style({
-        // the view covers the whole screen with a semi tranparent background
-        position: 'relative',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        opacity: 1
-    })),
-    // route 'enter' transition
-    transition(':enter', [
-        // styles at start of transition
-        style({
-            // start with the content positioned off the right of the screen,
-            // -400% is required instead of -100% because the negative position adds to the width of the element
-            left: '400%',
-            // start with background opacity set to 0 (invisible)
-            opacity: 0
-        }),
-        // animation and styles at end of transition
-        animate('.3s ease-in-out', style({
-            // transition the right position to 0 which slides the content into view
-            left: 0,
-            // transition the background opacity to 0.8 to fade it in
-            opacity: 0.8
-        }))
-    ]),
-    // route 'leave' transition
-    transition(':leave', [
-        // animation and styles at end of transition
-        animate('.5s ease-in-out', style({
-            // transition the right position to -400% which slides the content out of view
-            left: '400%',
-            // transition the background opacity to 0 to fade it out
-            opacity: 0
-        }))
-    ])
-]);
-const slideUpDownAnimation = 
-// trigger name for attaching this animation to an element using the [@triggerName] syntax
-trigger('slideUpDownAnimation', [
-    // end state styles for route container (host)
-    state('*', style({
-        transform: 'translateY(0)',
-        opacity: 1
-    })),
-    // route 'enter' transition
-    transition(':enter', [
-        // styles at start of transition
-        style({
-            transform: 'translateY(-400%)',
-            opacity: 0
-        }),
-        // animation and styles at end of transition
-        animate('.3s ease-in-out', style({
-            transform: 'translateY(0)',
-            opacity: 1
-        }))
-    ]),
-    // route 'leave' transition
-    transition(':leave', [
-        // animation and styles at end of transition
-        animate('.5s ease-in-out', style({
-            transform: 'translateY(-100%)',
-            opacity: 0
-        }))
-    ])
-]);
-
 class HttpUtils {
     static getText(http, uri, opts) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -10352,7 +10407,7 @@ SelectPeerModal.propDecorators = {
     onRefresh: [{ type: Input }]
 };
 
-const moment$3 = momentImported;
+const moment$4 = momentImported;
 const SETTINGS_STORAGE_KEY = 'settings';
 const SETTINGS_TRANSIENT_PROPERTIES = ['mobile', 'touchUi' /*deprecated*/];
 // fixme: this constant points to static environment
@@ -10414,7 +10469,7 @@ class LocalSettingsService extends StartableService {
     ngOnStart() {
         console.info('[settings] Starting service...');
         // Restoring local settings
-        this._data.mobile = isNotNil(this._data.mobile) ? this._data.mobile : isMobile(window);
+        this._data.mobile = isNotNil(this._data.mobile) ? this._data.mobile : (isCordova(window) || isMobile(window));
         this._data.usageMode = (isAndroid(window) || isIOS(window)) ? 'FIELD' : 'DESK'; // FIELD by default if Android or iOS
         // Restoring local settings
         return this.restoreLocally();
@@ -10595,11 +10650,11 @@ class LocalSettingsService extends StartableService {
         if (!feature) {
             feature = {
                 name: featureName.toLowerCase(),
-                lastSyncDate: moment$3().toISOString()
+                lastSyncDate: moment$4().toISOString()
             };
         }
         else {
-            feature.lastSyncDate = moment$3().toISOString();
+            feature.lastSyncDate = moment$4().toISOString();
         }
         this.saveOfflineFeature(feature);
     }
@@ -10760,7 +10815,7 @@ class LocalSettingsService extends StartableService {
         if (!page || !page.title || !page.path)
             throw Error('Missing required argument \'page\', \'page.path\' or \'page.title\'');
         // Set time
-        page.time = page.time || moment$3();
+        page.time = page.time || moment$4();
         // Clean the title (remove <small> tags)
         if (!opts || opts.removeTitleSmallTag !== false) {
             const tagIndex = page.title.indexOf('</small>');
@@ -10776,7 +10831,7 @@ class LocalSettingsService extends StartableService {
         return page;
     }
 }
-LocalSettingsService.ɵprov = ɵɵdefineInjectable({ factory: function LocalSettingsService_Factory() { return new LocalSettingsService(ɵɵinject(TranslateService), ɵɵinject(Platform), ɵɵinject(Storage), ɵɵinject(ENVIRONMENT), ɵɵinject(APP_LOCAL_SETTINGS, 8), ɵɵinject(APP_LOCAL_SETTINGS_OPTIONS, 8)); }, token: LocalSettingsService, providedIn: "root" });
+LocalSettingsService.ɵprov = i0.ɵɵdefineInjectable({ factory: function LocalSettingsService_Factory() { return new LocalSettingsService(i0.ɵɵinject(i1$1.TranslateService), i0.ɵɵinject(i1$4.Platform), i0.ɵɵinject(i3$1.Storage), i0.ɵɵinject(ENVIRONMENT), i0.ɵɵinject(APP_LOCAL_SETTINGS, 8), i0.ɵɵinject(APP_LOCAL_SETTINGS_OPTIONS, 8)); }, token: LocalSettingsService, providedIn: "root" });
 LocalSettingsService.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root',
@@ -11493,7 +11548,7 @@ class NetworkService extends StartableService {
         });
     }
 }
-NetworkService.ɵprov = ɵɵdefineInjectable({ factory: function NetworkService_Factory() { return new NetworkService(ɵɵinject(DOCUMENT), ɵɵinject(Platform), ɵɵinject(ModalController), ɵɵinject(CryptoService), ɵɵinject(Storage), ɵɵinject(LocalSettingsService), ɵɵinject(CacheService), ɵɵinject(HttpClient), ɵɵinject(ENVIRONMENT), ɵɵinject(Network, 8), ɵɵinject(SplashScreen, 8), ɵɵinject(TranslateService, 8), ɵɵinject(ToastController, 8)); }, token: NetworkService, providedIn: "root" });
+NetworkService.ɵprov = i0.ɵɵdefineInjectable({ factory: function NetworkService_Factory() { return new NetworkService(i0.ɵɵinject(i1$3.DOCUMENT), i0.ɵɵinject(i1$4.Platform), i0.ɵɵinject(i1$4.ModalController), i0.ɵɵinject(CryptoService), i0.ɵɵinject(i3$1.Storage), i0.ɵɵinject(LocalSettingsService), i0.ɵɵinject(i6.CacheService), i0.ɵɵinject(i2$2.HttpClient), i0.ɵɵinject(ENVIRONMENT), i0.ɵɵinject(i9.Network, 8), i0.ɵɵinject(i10.SplashScreen, 8), i0.ɵɵinject(i1$1.TranslateService, 8), i0.ɵɵinject(i1$4.ToastController, 8)); }, token: NetworkService, providedIn: "root" });
 NetworkService.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
@@ -11504,16 +11559,16 @@ NetworkService.ctorParameters = () => [
     { type: CryptoService },
     { type: Storage },
     { type: LocalSettingsService },
-    { type: CacheService$1 },
+    { type: CacheService },
     { type: HttpClient },
     { type: undefined, decorators: [{ type: Inject, args: [ENVIRONMENT,] }] },
-    { type: Network$1, decorators: [{ type: Optional }] },
-    { type: SplashScreen$1, decorators: [{ type: Optional }] },
+    { type: Network, decorators: [{ type: Optional }] },
+    { type: SplashScreen, decorators: [{ type: Optional }] },
     { type: TranslateService, decorators: [{ type: Optional }] },
     { type: ToastController, decorators: [{ type: Optional }] }
 ];
 
-const ErrorCodes = {
+const ErrorCodes$2 = {
     UNKNOWN_ERROR: 0,
     LOAD_ACCOUNT_ERROR: 1,
     BAD_PASSWORD: 2,
@@ -11865,7 +11920,7 @@ class EntityStore {
                 }
                 catch (err) {
                     console.error(err);
-                    throw { code: ErrorCodes.ENTITY_STORAGE_MIGRATION_FAILED, message: 'ERROR.ENTITY_STORAGE_MIGRATION_FAILED', details: err };
+                    throw { code: ErrorCodes$2.ENTITY_STORAGE_MIGRATION_FAILED, message: 'ERROR.ENTITY_STORAGE_MIGRATION_FAILED', details: err };
                 }
             }
             // Emit update event
@@ -12439,7 +12494,7 @@ class EntitiesStorage extends StartableService {
 }
 EntitiesStorage.TRASH_PREFIX = 'Trash#';
 EntitiesStorage.REMOTE_PREFIX = 'Remote#';
-EntitiesStorage.ɵprov = ɵɵdefineInjectable({ factory: function EntitiesStorage_Factory() { return new EntitiesStorage(ɵɵinject(Platform), ɵɵinject(ProgressBarService), ɵɵinject(Storage), ɵɵinject(ENVIRONMENT), ɵɵinject(APP_LOCAL_STORAGE_TYPE_POLICIES, 8)); }, token: EntitiesStorage, providedIn: "root" });
+EntitiesStorage.ɵprov = i0.ɵɵdefineInjectable({ factory: function EntitiesStorage_Factory() { return new EntitiesStorage(i0.ɵɵinject(i1$4.Platform), i0.ɵɵinject(ProgressBarService), i0.ɵɵinject(i3$1.Storage), i0.ɵɵinject(ENVIRONMENT), i0.ɵɵinject(APP_LOCAL_STORAGE_TYPE_POLICIES, 8)); }, token: EntitiesStorage, providedIn: "root" });
 EntitiesStorage.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
@@ -12576,10 +12631,10 @@ function referentialToString(obj, properties) {
 function referentialsToString(values, properties, separator) {
     return (values || []).map(v => referentialToString(v, properties)).join(separator || ', ');
 }
-const ɵ0$a = StatusIds.ENABLE, ɵ1 = StatusIds.DISABLE, ɵ2 = StatusIds.TEMPORARY;
+const ɵ0$2 = StatusIds.ENABLE, ɵ1 = StatusIds.DISABLE, ɵ2 = StatusIds.TEMPORARY;
 const StatusList = Object.freeze([
     {
-        id: ɵ0$a,
+        id: ɵ0$2,
         icon: 'checkmark',
         label: 'REFERENTIAL.STATUS_ENUM.ENABLE'
     },
@@ -12854,7 +12909,7 @@ function accountToString(data) {
             (data.lastName || '')) || '';
 }
 
-const uuidv4$1 = uuidv4Imported;
+const uuidv4 = uuidv4Imported;
 const _global = typeof global !== 'undefined' ? global : (typeof window !== 'undefined' ? window : {});
 const NativeWebSocket = _global.WebSocket || _global.MozWebSocket;
 /**
@@ -12898,7 +12953,7 @@ function createTrackerLink(opts) {
         // Skip if not tracked
         if (!context || !context.tracked)
             return forward(operation);
-        const id = context.serializationKey || uuidv4$1();
+        const id = context.serializationKey || uuidv4();
         console.debug(`[apollo-tracker-link] Watching tracked query {${operation.operationName}#${id}}`);
         // Clean context, before calling JSON.stringify (remove unused attributes)
         const cleanContext = Object.assign(Object.assign({}, context), { optimisticResponse: null, cache: null });
@@ -13394,7 +13449,7 @@ class GraphqlService extends StartableService {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.network.ready();
             console.info('[graphql] Starting graphql...');
-            const mobile = this.platform.is('mobile') || this.platform.is('mobileweb');
+            const mobile = isMobile(window);
             const enableTrackMutationQueries = !mobile;
             const peer = this.network.peer;
             if (!peer)
@@ -13561,7 +13616,7 @@ class GraphqlService extends StartableService {
         (err.networkError && ((err.networkError.error && this.toAppError(err.networkError.error))
             || this.toAppError(err.networkError)
             || (err.networkError.error && this.createAppErrorByCode(err.networkError.error.status))
-            || this.createAppErrorByCode(ErrorCodes.UNKNOWN_NETWORK_ERROR)))
+            || this.createAppErrorByCode(ErrorCodes$2.UNKNOWN_NETWORK_ERROR)))
             // If graphQL: try to convert the first error found
             || (err.graphQLErrors && err.graphQLErrors.length && this.toAppError(err.graphQLErrors[0]))
             || this.toAppError(err)
@@ -13569,7 +13624,7 @@ class GraphqlService extends StartableService {
             || (err.graphQLErrors && err.graphQLErrors[0])
             || err;
         console.error('[graphql] ' + (error && error.message || error), error.stack || '');
-        if (error && error.code === ErrorCodes.UNKNOWN_NETWORK_ERROR && err.networkError && err.networkError.message) {
+        if (error && error.code === ErrorCodes$2.UNKNOWN_NETWORK_ERROR && err.networkError && err.networkError.message) {
             console.error('[graphql] original error: ' + err.networkError.message);
             this.onNetworkError.next(error);
         }
@@ -13605,7 +13660,7 @@ class GraphqlService extends StartableService {
                 return 'ERROR.UNAUTHORIZED';
             case ServerErrorCodes.FORBIDDEN:
                 return 'ERROR.FORBIDDEN';
-            case ErrorCodes.UNKNOWN_NETWORK_ERROR:
+            case ErrorCodes$2.UNKNOWN_NETWORK_ERROR:
                 return 'ERROR.UNKNOWN_NETWORK_ERROR';
             case ServerErrorCodes.BAD_UPDATE_DATE:
                 return 'ERROR.BAD_UPDATE_DATE';
@@ -13636,7 +13691,7 @@ class GraphqlService extends StartableService {
         return undefined;
     }
 }
-GraphqlService.ɵprov = ɵɵdefineInjectable({ factory: function GraphqlService_Factory() { return new GraphqlService(ɵɵinject(Platform), ɵɵinject(Apollo), ɵɵinject(HttpLink), ɵɵinject(NetworkService), ɵɵinject(Storage), ɵɵinject(CryptoService), ɵɵinject(ENVIRONMENT), ɵɵinject(APP_GRAPHQL_TYPE_POLICIES, 8)); }, token: GraphqlService, providedIn: "root" });
+GraphqlService.ɵprov = i0.ɵɵdefineInjectable({ factory: function GraphqlService_Factory() { return new GraphqlService(i0.ɵɵinject(i1$4.Platform), i0.ɵɵinject(i2$3.Apollo), i0.ɵɵinject(i3$2.HttpLink), i0.ɵɵinject(NetworkService), i0.ɵɵinject(i3$1.Storage), i0.ɵɵinject(CryptoService), i0.ɵɵinject(ENVIRONMENT), i0.ɵɵinject(APP_GRAPHQL_TYPE_POLICIES, 8)); }, token: GraphqlService, providedIn: "root" });
 GraphqlService.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root'
@@ -13653,7 +13708,7 @@ GraphqlService.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [APP_GRAPHQL_TYPE_POLICIES,] }] }
 ];
 
-const sha256$1 = require('hash.js/lib/hash/sha/256');
+const sha256 = require('hash.js/lib/hash/sha/256');
 class BaseGraphqlServiceOptions {
 }
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
@@ -13804,8 +13859,8 @@ class BaseGraphqlService extends StartableService {
     }
     /* -- protected methods -- */
     computeMutableWatchQueryId(opts) {
-        const queryName = opts.queryName || sha256$1().update(JSON.stringify(opts.query)).digest('hex').substring(0, 8);
-        const variablesKey = opts.variables && sha256$1().update(JSON.stringify(opts.variables)).digest('hex').substring(0, 8) || '';
+        const queryName = opts.queryName || sha256().update(JSON.stringify(opts.query)).digest('hex').substring(0, 8);
+        const variablesKey = opts.variables && sha256().update(JSON.stringify(opts.variables)).digest('hex').substring(0, 8) || '';
         return [queryName, opts.arrayFieldName, variablesKey].join('|');
     }
     findMutableWatchQueries(opts) {
@@ -13875,7 +13930,7 @@ const DEFAULT_AVATAR_IMAGE = 'assets/img/person.png';
 /* ------------------------------------
  * GraphQL queries
  * ------------------------------------*/
-const Fragments = {
+const Fragments$1 = {
     account: gql `
     fragment AccountFragment on AccountVO {
       id
@@ -13910,14 +13965,14 @@ const Fragments = {
   }`
 };
 // Load account query
-const LoadQuery = gql `
+const LoadQuery$1 = gql `
   query Account {
     data: account {
       ...AccountFragment
     }
   }
-  ${Fragments.account}
-  ${Fragments.settings}
+  ${Fragments$1.account}
+  ${Fragments$1.settings}
 `;
 // Check email query
 const IsEmailExistsQuery = gql `
@@ -13932,21 +13987,21 @@ const AccountMutations = {
       ...AccountFragment
     }
   }
-  ${Fragments.account}
-  ${Fragments.settings}`,
+  ${Fragments$1.account}
+  ${Fragments$1.settings}`,
     create: gql `mutation CreateAccount($data:AccountVOInput){
     data: createAccount(account: $data){
       ...AccountFragment
     }
   }
-  ${Fragments.account}
-  ${Fragments.settings}`,
+  ${Fragments$1.account}
+  ${Fragments$1.settings}`,
     saveSettings: gql `mutation SaveSettings($data:UserSettingsVOInput){
     data: saveSettings(settings: $data){
       ...UserSettingsFragment
     }
   }
-  ${Fragments.settings}`
+  ${Fragments$1.settings}`
 };
 // Sent confirmation email
 const SendConfirmEmailMutation = gql `
@@ -14261,7 +14316,7 @@ class AccountService extends BaseGraphqlService {
             catch (error) {
                 console.error(error);
                 this.resetData();
-                throw { code: ErrorCodes.UNKNOWN_ERROR, message: 'ERROR.SCRYPT_ERROR' };
+                throw { code: ErrorCodes$2.UNKNOWN_ERROR, message: 'ERROR.SCRYPT_ERROR' };
             }
             // Store pubkey+keypair
             this._cache.pubkey = Base58.encode(keypair.publicKey);
@@ -14295,7 +14350,7 @@ class AccountService extends BaseGraphqlService {
             }
             catch (err) {
                 // If account not found, check if email is valid
-                if (err && +(err.code) === ErrorCodes.LOAD_ACCOUNT_ERROR) {
+                if (err && +(err.code) === ErrorCodes$2.LOAD_ACCOUNT_ERROR) {
                     // Check email exists
                     if (data.username.indexOf('@') !== -1) {
                         let isEmailExists;
@@ -14307,11 +14362,11 @@ class AccountService extends BaseGraphqlService {
                         }
                         // Email not exists (no account)
                         if (!isEmailExists) {
-                            throw { code: ErrorCodes.UNKNOWN_ACCOUNT_EMAIL, message: 'ERROR.UNKNOWN_ACCOUNT_EMAIL' };
+                            throw { code: ErrorCodes$2.UNKNOWN_ACCOUNT_EMAIL, message: 'ERROR.UNKNOWN_ACCOUNT_EMAIL' };
                         }
                     }
                     // Email exists, so error = 'bad password'
-                    throw { code: ErrorCodes.BAD_PASSWORD, message: 'ERROR.BAD_PASSWORD' };
+                    throw { code: ErrorCodes$2.BAD_PASSWORD, message: 'ERROR.BAD_PASSWORD' };
                 }
                 throw err; // resend the first error
             }
@@ -14457,8 +14512,8 @@ class AccountService extends BaseGraphqlService {
             // Load remotely
             else {
                 const { data } = yield this.graphql.query({
-                    query: LoadQuery,
-                    error: { code: ErrorCodes.LOAD_ACCOUNT_ERROR, message: 'ERROR.LOAD_ACCOUNT_ERROR' },
+                    query: LoadQuery$1,
+                    error: { code: ErrorCodes$2.LOAD_ACCOUNT_ERROR, message: 'ERROR.LOAD_ACCOUNT_ERROR' },
                     fetchPolicy: opts && opts.fetchPolicy || 'no-cache' || undefined
                 });
                 json = data;
@@ -14485,7 +14540,7 @@ class AccountService extends BaseGraphqlService {
         return __awaiter(this, void 0, void 0, function* () {
             const isEmailExists = yield this.isEmailExists(email);
             if (isEmailExists) {
-                throw { code: ErrorCodes.EMAIL_ALREADY_REGISTERED, message: 'ERROR.EMAIL_ALREADY_REGISTERED' };
+                throw { code: ErrorCodes$2.EMAIL_ALREADY_REGISTERED, message: 'ERROR.EMAIL_ALREADY_REGISTERED' };
             }
         });
     }
@@ -14521,7 +14576,7 @@ class AccountService extends BaseGraphqlService {
                     locale
                 },
                 error: {
-                    code: ErrorCodes.SENT_CONFIRMATION_EMAIL_FAILED,
+                    code: ErrorCodes$2.SENT_CONFIRMATION_EMAIL_FAILED,
                     message: 'ERROR.SENT_ACCOUNT_CONFIRMATION_EMAIL_FAILED'
                 }
             });
@@ -14537,7 +14592,7 @@ class AccountService extends BaseGraphqlService {
                     code
                 },
                 error: {
-                    code: ErrorCodes.CONFIRM_EMAIL_FAILED,
+                    code: ErrorCodes$2.CONFIRM_EMAIL_FAILED,
                     message: 'ERROR.CONFIRM_ACCOUNT_EMAIL_FAILED'
                 }
             });
@@ -14616,7 +14671,7 @@ class AccountService extends BaseGraphqlService {
                     throw error;
                 console.error(error);
                 throw {
-                    code: ErrorCodes.LOAD_ACCOUNT_ERROR,
+                    code: ErrorCodes$2.LOAD_ACCOUNT_ERROR,
                     message: 'ERROR.LOAD_ACCOUNT_ERROR'
                 };
             }
@@ -14786,7 +14841,7 @@ class AccountService extends BaseGraphqlService {
             if (!isNew) {
                 const existingAccount = yield this.load({ fetchPolicy: 'network-only' });
                 if (!existingAccount || !existingAccount.updateDate) {
-                    throw { code: ErrorCodes.ACCOUNT_NOT_EXISTS, message: 'ERROR.ACCOUNT_NOT_EXISTS' };
+                    throw { code: ErrorCodes$2.ACCOUNT_NOT_EXISTS, message: 'ERROR.ACCOUNT_NOT_EXISTS' };
                 }
                 this.copyIdAndUpdateDate(existingAccount, account);
             }
@@ -14798,7 +14853,7 @@ class AccountService extends BaseGraphqlService {
                 mutation: isNew ? AccountMutations.create : AccountMutations.save,
                 variables: { data: json },
                 error: {
-                    code: ErrorCodes.SAVE_ACCOUNT_ERROR,
+                    code: ErrorCodes$2.SAVE_ACCOUNT_ERROR,
                     message: 'ERROR.SAVE_ACCOUNT_ERROR'
                 }
             });
@@ -14825,7 +14880,7 @@ class AccountService extends BaseGraphqlService {
                 mutation: AccountMutations.saveSettings,
                 variables: { data: json },
                 error: {
-                    code: ErrorCodes.SAVE_SETTINGS_ERROR,
+                    code: ErrorCodes$2.SAVE_SETTINGS_ERROR,
                     message: 'ERROR.SAVE_SETTINGS_ERROR'
                 }
             });
@@ -14847,7 +14902,7 @@ class AccountService extends BaseGraphqlService {
             if (counter > 4) {
                 if (this._debug)
                     console.debug(`[account] Failed to authentication on pod (after ${counter} attempts)`);
-                throw { code: ErrorCodes.AUTH_SERVER_ERROR, message: 'ERROR.AUTH_SERVER_ERROR' };
+                throw { code: ErrorCodes$2.AUTH_SERVER_ERROR, message: 'ERROR.AUTH_SERVER_ERROR' };
             }
             // Check if valid
             if (token) {
@@ -14857,7 +14912,7 @@ class AccountService extends BaseGraphqlService {
                         token
                     },
                     error: {
-                        code: ErrorCodes.UNAUTHORIZED,
+                        code: ErrorCodes$2.UNAUTHORIZED,
                         message: 'ERROR.UNAUTHORIZED'
                     },
                     fetchPolicy: 'no-cache'
@@ -14873,7 +14928,7 @@ class AccountService extends BaseGraphqlService {
             }
             // Generate a new token
             const challengeError = {
-                code: ErrorCodes.AUTH_CHALLENGE_ERROR,
+                code: ErrorCodes$2.AUTH_CHALLENGE_ERROR,
                 message: 'ERROR.AUTH_CHALLENGE_ERROR'
             };
             const data = yield this.graphql.query({
@@ -14951,7 +15006,7 @@ class AccountService extends BaseGraphqlService {
             query: AccountSubscriptions.listenChanges,
             variables,
             error: {
-                code: ErrorCodes.SUBSCRIBE_ACCOUNT_ERROR,
+                code: ErrorCodes$2.SUBSCRIBE_ACCOUNT_ERROR,
                 message: 'ERROR.ACCOUNT.SUBSCRIBE_ERROR'
             }
         }).pipe(map(({ data }) => data), 
@@ -14980,7 +15035,7 @@ class AccountService extends BaseGraphqlService {
         return Toasts.show(this.toastController, this.translate, opts);
     }
 }
-AccountService.ɵprov = ɵɵdefineInjectable({ factory: function AccountService_Factory() { return new AccountService(ɵɵinject(CryptoService), ɵɵinject(NetworkService), ɵɵinject(GraphqlService), ɵɵinject(LocalSettingsService), ɵɵinject(Storage), ɵɵinject(FileService), ɵɵinject(TranslateService, 8), ɵɵinject(ToastController, 8), ɵɵinject(ENVIRONMENT)); }, token: AccountService, providedIn: "root" });
+AccountService.ɵprov = i0.ɵɵdefineInjectable({ factory: function AccountService_Factory() { return new AccountService(i0.ɵɵinject(CryptoService), i0.ɵɵinject(NetworkService), i0.ɵɵinject(GraphqlService), i0.ɵɵinject(LocalSettingsService), i0.ɵɵinject(i3$1.Storage), i0.ɵɵinject(FileService), i0.ɵɵinject(i1$1.TranslateService, 8), i0.ɵɵinject(i1$4.ToastController, 8), i0.ɵɵinject(ENVIRONMENT)); }, token: AccountService, providedIn: "root" });
 AccountService.decorators = [
     { type: Injectable, args: [{ providedIn: 'root', deps: [ENVIRONMENT] },] }
 ];
@@ -15248,7 +15303,7 @@ const CONFIGURATION_STORAGE_KEY = 'configuration';
 /* ------------------------------------
  * GraphQL queries
  * ------------------------------------*/
-const Fragments$1 = {
+const Fragments = {
     config: gql `
     fragment ConfigFragment on ConfigurationVO {
       id
@@ -15275,13 +15330,13 @@ const Fragments$1 = {
     }
   `
 };
-const LoadQuery$1 = gql `
+const LoadQuery = gql `
 query Configuration{
   data: configuration{
     ...ConfigFragment
   }
 }
-  ${Fragments$1.config}
+  ${Fragments.config}
 `;
 // Save (create or update) account mutation
 const SaveMutation = gql `
@@ -15290,7 +15345,7 @@ const SaveMutation = gql `
        ...ConfigFragment
     }
   }
-  ${Fragments$1.config}
+  ${Fragments.config}
 `;
 const ClearCache = gql `
   query ClearCache($name: String) {
@@ -15341,12 +15396,12 @@ class ConfigService extends BaseGraphqlService {
         return __awaiter(this, void 0, void 0, function* () {
             const now = Date.now();
             console.debug('[config] Loading Pod configuration...');
-            const query = opts && opts.query || LoadQuery$1;
+            const query = opts && opts.query || LoadQuery;
             const variables = opts && opts.variables || undefined;
             const res = yield this.graphql.query({
                 query,
                 variables,
-                error: { code: ErrorCodes.LOAD_CONFIG_ERROR, message: 'ERROR.LOAD_CONFIG_ERROR' },
+                error: { code: ErrorCodes$2.LOAD_CONFIG_ERROR, message: 'ERROR.LOAD_CONFIG_ERROR' },
                 fetchPolicy: opts && opts.fetchPolicy || undefined /*default*/
             });
             const data = res && res.data ? Configuration.fromObject(res.data) : undefined;
@@ -15379,7 +15434,7 @@ class ConfigService extends BaseGraphqlService {
                     data: json
                 },
                 error: {
-                    code: ErrorCodes.SAVE_CONFIG_ERROR,
+                    code: ErrorCodes$2.SAVE_CONFIG_ERROR,
                     message: 'ERROR.SAVE_CONFIG_ERROR'
                 }
             });
@@ -15405,7 +15460,7 @@ class ConfigService extends BaseGraphqlService {
             const res = yield this.graphql.query({
                 query: CacheStatistics,
                 variables: null,
-                error: { code: ErrorCodes.LOAD_CONFIG_ERROR, message: 'ERROR.LOAD_CONFIG_ERROR' },
+                error: { code: ErrorCodes$2.LOAD_CONFIG_ERROR, message: 'ERROR.LOAD_CONFIG_ERROR' },
                 fetchPolicy: 'network-only'
             });
             const data = res && res.cacheStatistics || undefined;
@@ -15421,7 +15476,7 @@ class ConfigService extends BaseGraphqlService {
             const res = yield this.graphql.query({
                 query: ClearCache,
                 variables,
-                error: { code: ErrorCodes.LOAD_CONFIG_ERROR, message: 'ERROR.LOAD_CONFIG_ERROR' },
+                error: { code: ErrorCodes$2.LOAD_CONFIG_ERROR, message: 'ERROR.LOAD_CONFIG_ERROR' },
                 fetchPolicy: 'no-cache'
             });
             const data = res && res.clearCache || undefined;
@@ -15508,7 +15563,7 @@ class ConfigService extends BaseGraphqlService {
             else {
                 let now = this._debug && Date.now();
                 // Convert images, for offline usage
-                if (this.network.online && this.platform.is('mobile')) {
+                if (this.network.online && isMobile(window)) {
                     const jobs = [];
                     // Download logos
                     if (data.largeLogo && data.largeLogo.startsWith('http')) {
@@ -15580,7 +15635,7 @@ class ConfigService extends BaseGraphqlService {
         });
     }
 }
-ConfigService.ɵprov = ɵɵdefineInjectable({ factory: function ConfigService_Factory() { return new ConfigService(ɵɵinject(Platform), ɵɵinject(GraphqlService), ɵɵinject(Storage), ɵɵinject(NetworkService), ɵɵinject(FileService), ɵɵinject(ToastController), ɵɵinject(TranslateService), ɵɵinject(AccountService), ɵɵinject(ENVIRONMENT), ɵɵinject(APP_CONFIG_OPTIONS, 8)); }, token: ConfigService, providedIn: "root" });
+ConfigService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ConfigService_Factory() { return new ConfigService(i0.ɵɵinject(i1$4.Platform), i0.ɵɵinject(GraphqlService), i0.ɵɵinject(i3$1.Storage), i0.ɵɵinject(NetworkService), i0.ɵɵinject(FileService), i0.ɵɵinject(i1$4.ToastController), i0.ɵɵinject(i1$1.TranslateService), i0.ɵɵinject(AccountService), i0.ɵɵinject(ENVIRONMENT), i0.ɵɵinject(APP_CONFIG_OPTIONS, 8)); }, token: ConfigService, providedIn: "root" });
 ConfigService.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root',
@@ -15600,7 +15655,7 @@ ConfigService.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [APP_CONFIG_OPTIONS,] }] }
 ];
 
-const moment$4 = momentImported;
+const moment$3 = momentImported;
 const AndroidOsEnvironment = Object.freeze({
     DIRECTORY_DOWNLOADS: 'Download',
     DIRECTORY_DOWNLOADS_OLD: 'Downloads',
@@ -15635,14 +15690,15 @@ class PlatformService extends StartableService {
     is(platformName) {
         switch (platformName) {
             case 'mobile':
-                // Use custom mobile detection - see SUMARIS issue #323
-                return isMobile(window);
+            case 'mobileweb':
+                // Exclude Windows touch screens - see SUMARIS issue #323
+                return this.platform.is(platformName) && !isWindows(window);
             default:
                 return this.platform.is(platformName);
         }
     }
     get mobile() {
-        return isNotNil(this._mobile) ? this._mobile : isMobile(window);
+        return isNotNil(this._mobile) ? this._mobile : this.is('mobile');
     }
     /**
      * Say if opened has been opened inside an Android or iOs App.
@@ -15657,17 +15713,17 @@ class PlatformService extends StartableService {
     isIOSCordova() {
         return this._ios && this._cordova || false;
     }
-    isWeb() {
-        return !this._cordova || (!this._android && !this._ios);
-    }
     isApp() {
-        return this._cordova && (this._android || this._ios);
+        return this.isAndroidCordova() || this.isIOSCordova();
+    }
+    isWeb() {
+        return !this.isApp();
     }
     isMobileWeb() {
-        return isMobile(window) && this.isWeb();
+        return this.mobile && this.isWeb();
     }
     get canDownload() {
-        return !!this.downloader && this.isAndroidCordova();
+        return this.downloader && this.isAndroidCordova();
     }
     get canOpenFile() {
         return false;
@@ -15834,16 +15890,16 @@ class PlatformService extends StartableService {
                 }
                 // config moment lib
                 try {
-                    moment$4.locale(event.lang);
+                    moment$3.locale(event.lang);
                     console.debug('[platform] Use locale {' + event.lang + '}');
                 }
                 // If error, fallback to en
                 catch (err) {
-                    moment$4.locale('en');
+                    moment$3.locale('en');
                     console.warn('[platform] Unknown local for moment lib. Using default [en]');
                 }
                 // Config date adapter
-                this.dateAdapter.setLocale(moment$4.locale());
+                this.dateAdapter.setLocale(moment$3.locale());
             }
         });
         this.settings.onChange.subscribe(data => {
@@ -16044,7 +16100,7 @@ class PlatformService extends StartableService {
         });
     }
 }
-PlatformService.ɵprov = ɵɵdefineInjectable({ factory: function PlatformService_Factory() { return new PlatformService(ɵɵinject(Platform), ɵɵinject(Platform$1), ɵɵinject(ToastController), ɵɵinject(TranslateService), ɵɵinject(MomentDateAdapter), ɵɵinject(EntitiesStorage), ɵɵinject(LocalSettingsService), ɵɵinject(NetworkService), ɵɵinject(AccountService), ɵɵinject(ConfigService), ɵɵinject(CacheService), ɵɵinject(Storage), ɵɵinject(AudioProvider), ɵɵinject(ENVIRONMENT), ɵɵinject(StatusBar, 8), ɵɵinject(Keyboard$1, 8), ɵɵinject(SplashScreen, 8), ɵɵinject(InAppBrowser, 8), ɵɵinject(Downloader, 8)); }, token: PlatformService, providedIn: "root" });
+PlatformService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PlatformService_Factory() { return new PlatformService(i0.ɵɵinject(i1$4.Platform), i0.ɵɵinject(i2$4.Platform), i0.ɵɵinject(i1$4.ToastController), i0.ɵɵinject(i1$1.TranslateService), i0.ɵɵinject(i1.MomentDateAdapter), i0.ɵɵinject(EntitiesStorage), i0.ɵɵinject(LocalSettingsService), i0.ɵɵinject(NetworkService), i0.ɵɵinject(AccountService), i0.ɵɵinject(ConfigService), i0.ɵɵinject(i6.CacheService), i0.ɵɵinject(i3$1.Storage), i0.ɵɵinject(AudioProvider), i0.ɵɵinject(ENVIRONMENT), i0.ɵɵinject(i14.StatusBar, 8), i0.ɵɵinject(i15.Keyboard, 8), i0.ɵɵinject(i10.SplashScreen, 8), i0.ɵɵinject(i17.InAppBrowser, 8), i0.ɵɵinject(i18.Downloader, 8)); }, token: PlatformService, providedIn: "root" });
 PlatformService.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
@@ -16059,15 +16115,15 @@ PlatformService.ctorParameters = () => [
     { type: NetworkService },
     { type: AccountService },
     { type: ConfigService },
-    { type: CacheService$1 },
+    { type: CacheService },
     { type: Storage },
     { type: AudioProvider },
     { type: undefined, decorators: [{ type: Inject, args: [ENVIRONMENT,] }] },
-    { type: StatusBar$1, decorators: [{ type: Optional }] },
+    { type: StatusBar, decorators: [{ type: Optional }] },
     { type: Keyboard, decorators: [{ type: Optional }] },
-    { type: SplashScreen$1, decorators: [{ type: Optional }] },
-    { type: InAppBrowser$1, decorators: [{ type: Optional }] },
-    { type: Downloader$1, decorators: [{ type: Optional }] }
+    { type: SplashScreen, decorators: [{ type: Optional }] },
+    { type: InAppBrowser, decorators: [{ type: Optional }] },
+    { type: Downloader, decorators: [{ type: Optional }] }
 ];
 
 class AppHelpModal {
@@ -16131,7 +16187,7 @@ class MatStepperI18n extends MatStepperIntl {
         this.optionalLabel = this.translate.instant('COMMON.OPTIONAL');
     }
 }
-MatStepperI18n.ɵprov = ɵɵdefineInjectable({ factory: function MatStepperI18n_Factory() { return new MatStepperI18n(ɵɵinject(TranslateService)); }, token: MatStepperI18n, providedIn: "root" });
+MatStepperI18n.ɵprov = i0.ɵɵdefineInjectable({ factory: function MatStepperI18n_Factory() { return new MatStepperI18n(i0.ɵɵinject(i1$1.TranslateService)); }, token: MatStepperI18n, providedIn: "root" });
 MatStepperI18n.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
@@ -17967,7 +18023,7 @@ function state2side(state) {
             return 1;
     }
 }
-const ɵ0$b = (defaultStateSize) => [
+const ɵ0$1 = (defaultStateSize) => [
     Math.round((rgbArrayMap.red[0] - 50) / defaultStateSize),
     Math.round((255 - rgbArrayMap.red[1]) / defaultStateSize),
     Math.round((255 - rgbArrayMap.red[2]) / defaultStateSize)
@@ -17975,7 +18031,7 @@ const ɵ0$b = (defaultStateSize) => [
 const SCALE_OPTIONS_DEFAULT = {
     startColor: rgbArrayMap.red,
     startStates: [0, 2, 3],
-    startStepsFn: ɵ0$b
+    startStepsFn: ɵ0$1
 };
 /**
  * Internal function, that create a colors scale, using iteration
@@ -18772,7 +18828,7 @@ class UserSettingsValidatorService extends AppValidatorService {
         });
     }
 }
-UserSettingsValidatorService.ɵprov = ɵɵdefineInjectable({ factory: function UserSettingsValidatorService_Factory() { return new UserSettingsValidatorService(ɵɵinject(FormBuilder)); }, token: UserSettingsValidatorService, providedIn: "root" });
+UserSettingsValidatorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function UserSettingsValidatorService_Factory() { return new UserSettingsValidatorService(i0.ɵɵinject(i1$6.FormBuilder)); }, token: UserSettingsValidatorService, providedIn: "root" });
 UserSettingsValidatorService.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
@@ -18816,7 +18872,7 @@ class AccountValidatorService extends AppValidatorService {
         return validatorFns.length ? Validators.compose(validatorFns) : validatorFns.length === 1 ? validatorFns[0] : undefined;
     }
 }
-AccountValidatorService.ɵprov = ɵɵdefineInjectable({ factory: function AccountValidatorService_Factory() { return new AccountValidatorService(ɵɵinject(FormBuilder), ɵɵinject(AccountService)); }, token: AccountValidatorService, providedIn: "root" });
+AccountValidatorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function AccountValidatorService_Factory() { return new AccountValidatorService(i0.ɵɵinject(i1$6.FormBuilder), i0.ɵɵinject(AccountService)); }, token: AccountValidatorService, providedIn: "root" });
 AccountValidatorService.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
@@ -19381,7 +19437,7 @@ class LocalSettingsValidatorService extends AppValidatorService {
         });
     }
 }
-LocalSettingsValidatorService.ɵprov = ɵɵdefineInjectable({ factory: function LocalSettingsValidatorService_Factory() { return new LocalSettingsValidatorService(ɵɵinject(FormBuilder), ɵɵinject(NetworkService)); }, token: LocalSettingsValidatorService, providedIn: "root" });
+LocalSettingsValidatorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function LocalSettingsValidatorService_Factory() { return new LocalSettingsValidatorService(i0.ɵɵinject(i1$6.FormBuilder), i0.ɵɵinject(NetworkService)); }, token: LocalSettingsValidatorService, providedIn: "root" });
 LocalSettingsValidatorService.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
@@ -20000,7 +20056,7 @@ class IsOnFieldModePipe {
         return value === 'FIELD';
     }
 }
-IsOnFieldModePipe.ɵprov = ɵɵdefineInjectable({ factory: function IsOnFieldModePipe_Factory() { return new IsOnFieldModePipe(); }, token: IsOnFieldModePipe, providedIn: "root" });
+IsOnFieldModePipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function IsOnFieldModePipe_Factory() { return new IsOnFieldModePipe(); }, token: IsOnFieldModePipe, providedIn: "root" });
 IsOnFieldModePipe.decorators = [
     { type: Pipe, args: [{
                 name: 'isOnField'
@@ -20012,7 +20068,7 @@ class IsNotOnFieldModePipe {
         return value !== 'FIELD';
     }
 }
-IsNotOnFieldModePipe.ɵprov = ɵɵdefineInjectable({ factory: function IsNotOnFieldModePipe_Factory() { return new IsNotOnFieldModePipe(); }, token: IsNotOnFieldModePipe, providedIn: "root" });
+IsNotOnFieldModePipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function IsNotOnFieldModePipe_Factory() { return new IsNotOnFieldModePipe(); }, token: IsNotOnFieldModePipe, providedIn: "root" });
 IsNotOnFieldModePipe.decorators = [
     { type: Pipe, args: [{
                 name: 'isNotOnField'
@@ -20027,7 +20083,7 @@ class PersonToStringPipe {
         return PersonUtils.personToString(value);
     }
 }
-PersonToStringPipe.ɵprov = ɵɵdefineInjectable({ factory: function PersonToStringPipe_Factory() { return new PersonToStringPipe(); }, token: PersonToStringPipe, providedIn: "root" });
+PersonToStringPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function PersonToStringPipe_Factory() { return new PersonToStringPipe(); }, token: PersonToStringPipe, providedIn: "root" });
 PersonToStringPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'personToString'
@@ -20412,7 +20468,7 @@ class IsLoginAccountPipe {
         return value && value.pubkey && true;
     }
 }
-IsLoginAccountPipe.ɵprov = ɵɵdefineInjectable({ factory: function IsLoginAccountPipe_Factory() { return new IsLoginAccountPipe(); }, token: IsLoginAccountPipe, providedIn: "root" });
+IsLoginAccountPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function IsLoginAccountPipe_Factory() { return new IsLoginAccountPipe(); }, token: IsLoginAccountPipe, providedIn: "root" });
 IsLoginAccountPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'isLogin'
@@ -20424,7 +20480,7 @@ class AccountToStringPipe {
         return accountToString(value);
     }
 }
-AccountToStringPipe.ɵprov = ɵɵdefineInjectable({ factory: function AccountToStringPipe_Factory() { return new AccountToStringPipe(); }, token: AccountToStringPipe, providedIn: "root" });
+AccountToStringPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function AccountToStringPipe_Factory() { return new AccountToStringPipe(); }, token: AccountToStringPipe, providedIn: "root" });
 AccountToStringPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'accountToString'
@@ -20439,7 +20495,7 @@ class DepartmentToStringPipe {
         return departmentToString(value);
     }
 }
-DepartmentToStringPipe.ɵprov = ɵɵdefineInjectable({ factory: function DepartmentToStringPipe_Factory() { return new DepartmentToStringPipe(); }, token: DepartmentToStringPipe, providedIn: "root" });
+DepartmentToStringPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function DepartmentToStringPipe_Factory() { return new DepartmentToStringPipe(); }, token: DepartmentToStringPipe, providedIn: "root" });
 DepartmentToStringPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'departmentToString'
@@ -20535,7 +20591,7 @@ class MenuService {
         this._visibleSubject.next(value);
     }
 }
-MenuService.ɵprov = ɵɵdefineInjectable({ factory: function MenuService_Factory() { return new MenuService(); }, token: MenuService, providedIn: "root" });
+MenuService.ɵprov = i0.ɵɵdefineInjectable({ factory: function MenuService_Factory() { return new MenuService(); }, token: MenuService, providedIn: "root" });
 MenuService.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root'
@@ -20991,7 +21047,7 @@ class AuthGuardService {
         }));
     }
 }
-AuthGuardService.ɵprov = ɵɵdefineInjectable({ factory: function AuthGuardService_Factory() { return new AuthGuardService(ɵɵinject(AccountService), ɵɵinject(ModalController), ɵɵinject(Router), ɵɵinject(ENVIRONMENT)); }, token: AuthGuardService, providedIn: "root" });
+AuthGuardService.ɵprov = i0.ɵɵdefineInjectable({ factory: function AuthGuardService_Factory() { return new AuthGuardService(i0.ɵɵinject(AccountService), i0.ɵɵinject(i1$4.ModalController), i0.ɵɵinject(i3$3.Router), i0.ɵɵinject(ENVIRONMENT)); }, token: AuthGuardService, providedIn: "root" });
 AuthGuardService.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
@@ -21033,7 +21089,7 @@ class BaseEntityService extends BaseGraphqlService {
             query,
             variables: { id },
             fetchPolicy: opts && opts.fetchPolicy || undefined,
-            error: { code: ErrorCodes.LOAD_DATA_ERROR, message: 'REFERENTIAL.ERROR.LOAD_DATA_ERROR' }
+            error: { code: ErrorCodes$2.LOAD_DATA_ERROR, message: 'REFERENTIAL.ERROR.LOAD_DATA_ERROR' }
         })
             .pipe(map(({ data }) => (!opts || opts.toEntity !== false)
             ? (data && this.fromObject(data))
@@ -21048,7 +21104,7 @@ class BaseEntityService extends BaseGraphqlService {
                 query,
                 variables: { id },
                 fetchPolicy: opts && opts.fetchPolicy || undefined,
-                error: { code: ErrorCodes.LOAD_DATA_ERROR, message: 'REFERENTIAL.ERROR.LOAD_DATA_ERROR' }
+                error: { code: ErrorCodes$2.LOAD_DATA_ERROR, message: 'REFERENTIAL.ERROR.LOAD_DATA_ERROR' }
             });
             // Convert to entity
             return (!opts || opts.toEntity !== false)
@@ -21079,7 +21135,7 @@ class BaseEntityService extends BaseGraphqlService {
             totalFieldName: withTotal ? 'total' : undefined,
             insertFilterFn: filter && filter.asFilterFn(),
             variables,
-            error: { code: ErrorCodes.LOAD_DATA_ERROR, message: 'REFERENTIAL.ERROR.LOAD_DATA_ERROR' },
+            error: { code: ErrorCodes$2.LOAD_DATA_ERROR, message: 'REFERENTIAL.ERROR.LOAD_DATA_ERROR' },
             fetchPolicy: opts && opts.fetchPolicy || undefined
         })
             .pipe(map(({ data, total }) => {
@@ -21115,7 +21171,7 @@ class BaseEntityService extends BaseGraphqlService {
             const { data, total } = yield this.graphql.query({
                 query,
                 variables,
-                error: { code: ErrorCodes.LOAD_DATA_ERROR, message: 'ERROR.LOAD_DATA_ERROR' },
+                error: { code: ErrorCodes$2.LOAD_DATA_ERROR, message: 'ERROR.LOAD_DATA_ERROR' },
                 fetchPolicy: opts && opts.fetchPolicy || 'network-only'
             });
             const entities = (!opts || opts.toEntity !== false) ?
@@ -21154,7 +21210,7 @@ class BaseEntityService extends BaseGraphqlService {
                 variables: {
                     filter: filter && filter.asPodObject()
                 },
-                error: { code: ErrorCodes.LOAD_DATA_ERROR, message: 'ERROR.COUNT_DATA_ERROR' },
+                error: { code: ErrorCodes$2.LOAD_DATA_ERROR, message: 'ERROR.COUNT_DATA_ERROR' },
                 fetchPolicy: opts && opts.fetchPolicy || 'network-only'
             });
             return res.total;
@@ -21190,7 +21246,7 @@ class BaseEntityService extends BaseGraphqlService {
                 variables: {
                     data: json
                 },
-                error: { code: ErrorCodes.SAVE_DATA_ERROR, message: 'ERROR.SAVE_DATA_ERROR' },
+                error: { code: ErrorCodes$2.SAVE_DATA_ERROR, message: 'ERROR.SAVE_DATA_ERROR' },
                 update: (proxy, { data }) => {
                     const savedEntities = data && data.data;
                     if (savedEntities) {
@@ -21246,7 +21302,7 @@ class BaseEntityService extends BaseGraphqlService {
                 variables: {
                     data: json
                 },
-                error: { code: ErrorCodes.SAVE_DATA_ERROR, message: 'ERROR.SAVE_DATA_ERROR' },
+                error: { code: ErrorCodes$2.SAVE_DATA_ERROR, message: 'ERROR.SAVE_DATA_ERROR' },
                 update: (cache, { data }) => {
                     // Update entity
                     const savedEntity = data && data.data;
@@ -21294,7 +21350,7 @@ class BaseEntityService extends BaseGraphqlService {
                 refetchQueries: this.getRefetchQueriesForMutation(opts),
                 awaitRefetchQueries: opts && opts.awaitRefetchQueries,
                 variables: { ids },
-                error: { code: ErrorCodes.DELETE_DATA_ERROR, message: 'ERROR.DELETE_DATA_ERROR' },
+                error: { code: ErrorCodes$2.DELETE_DATA_ERROR, message: 'ERROR.DELETE_DATA_ERROR' },
                 update: (cache, res) => {
                     // Remove from cache
                     if (this.watchQueriesUpdatePolicy === 'update-cache') {
@@ -21335,7 +21391,7 @@ class BaseEntityService extends BaseGraphqlService {
                 refetchQueries: this.getRefetchQueriesForMutation(opts),
                 awaitRefetchQueries: opts && opts.awaitRefetchQueries,
                 variables: { id },
-                error: { code: ErrorCodes.DELETE_DATA_ERROR, message: 'ERROR.DELETE_DATA_ERROR' },
+                error: { code: ErrorCodes$2.DELETE_DATA_ERROR, message: 'ERROR.DELETE_DATA_ERROR' },
                 update: (proxy, res) => {
                     // Remove from cache
                     if (this.watchQueriesUpdatePolicy === 'update-cache') {
@@ -21371,7 +21427,7 @@ class BaseEntityService extends BaseGraphqlService {
             fetchPolicy: opts && opts.fetchPolicy || 'no-cache',
             variables,
             error: {
-                code: ErrorCodes.SUBSCRIBE_DATA_ERROR,
+                code: ErrorCodes$2.SUBSCRIBE_DATA_ERROR,
                 message: 'ERROR.SUBSCRIBE_DATA_ERROR'
             }
         })
@@ -21557,7 +21613,7 @@ class EntitiesTableDataSource extends TableDataSource {
                     if (this._debug)
                         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' };
+                    throw { code: ErrorCodes$2.TABLE_INVALID_ROW_ERROR, message: 'ERROR.TABLE_INVALID_ROW_ERROR' };
                 }
                 this._editingRowCount = 0;
                 let data;
@@ -22428,14 +22484,14 @@ class AppTable {
         return __awaiter(this, void 0, void 0, function* () {
             opts = Object.assign({ keepEditing: this.keepEditedRowOnSave }, opts);
             if (this.readOnly) {
-                throw { code: ErrorCodes.TABLE_READ_ONLY, message: 'ERROR.TABLE_READ_ONLY' };
+                throw { code: ErrorCodes$2.TABLE_READ_ONLY, message: 'ERROR.TABLE_READ_ONLY' };
             }
             this.resetError();
             // 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;
             if (!this.confirmEditCreate()) {
-                throw { code: ErrorCodes.TABLE_INVALID_ROW_ERROR, message: 'ERROR.TABLE_INVALID_ROW_ERROR' };
+                throw { code: ErrorCodes$2.TABLE_INVALID_ROW_ERROR, message: 'ERROR.TABLE_INVALID_ROW_ERROR' };
             }
             // Mark as saving
             this.markAsSaving();
@@ -22554,7 +22610,7 @@ class AppTable {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
             if (this.readOnly) {
-                throw { code: ErrorCodes.TABLE_READ_ONLY, message: 'ERROR.TABLE_READ_ONLY' };
+                throw { code: ErrorCodes$2.TABLE_READ_ONLY, message: 'ERROR.TABLE_READ_ONLY' };
             }
             if (event === null || event === void 0 ? void 0 : event.defaultPrevented)
                 return 0; // SKip
@@ -24134,7 +24190,7 @@ class AppEntityEditor extends AppTabEditor {
                 try {
                     const data = yield this.dataService.load(id, opts);
                     if (!data)
-                        throw { code: ErrorCodes.DATA_NOT_FOUND_ERROR, message: 'ERROR.DATA_NO_FOUND' };
+                        throw { code: ErrorCodes$2.DATA_NOT_FOUND_ERROR, message: 'ERROR.DATA_NO_FOUND' };
                     this._usageMode = this.computeUsageMode(data);
                     yield this.onEntityLoaded(data, opts);
                     yield this.updateView(data, opts);
@@ -25086,7 +25142,7 @@ class UserEventService extends BaseGraphqlService {
         EntityUtils.copyIdAndUpdateDate(source, target);
     }
 }
-UserEventService.ɵprov = ɵɵdefineInjectable({ factory: function UserEventService_Factory() { return new UserEventService(ɵɵinject(GraphqlService), ɵɵinject(AccountService), ɵɵinject(NetworkService), ɵɵinject(TranslateService), ɵɵinject(ToastController), ɵɵinject(ENVIRONMENT)); }, token: UserEventService, providedIn: "root" });
+UserEventService.ɵprov = i0.ɵɵdefineInjectable({ factory: function UserEventService_Factory() { return new UserEventService(i0.ɵɵinject(GraphqlService), i0.ɵɵinject(AccountService), i0.ɵɵinject(NetworkService), i0.ɵɵinject(i1$1.TranslateService), i0.ɵɵinject(i1$4.ToastController), i0.ɵɵinject(ENVIRONMENT)); }, token: UserEventService, providedIn: "root" });
 UserEventService.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
@@ -25467,7 +25523,7 @@ class PersonService extends BaseEntityService {
         return target;
     }
 }
-PersonService.ɵprov = ɵɵdefineInjectable({ factory: function PersonService_Factory() { return new PersonService(ɵɵinject(GraphqlService), ɵɵinject(PlatformService), ɵɵinject(NetworkService), ɵɵinject(EntitiesStorage)); }, token: PersonService, providedIn: "root" });
+PersonService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PersonService_Factory() { return new PersonService(i0.ɵɵinject(GraphqlService), i0.ɵɵinject(PlatformService), i0.ɵɵinject(NetworkService), i0.ɵɵinject(EntitiesStorage)); }, token: PersonService, providedIn: "root" });
 PersonService.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
@@ -25498,7 +25554,7 @@ class PersonValidatorService {
         return this.formBuilder.group(formConfig);
     }
 }
-PersonValidatorService.ɵprov = ɵɵdefineInjectable({ factory: function PersonValidatorService_Factory() { return new PersonValidatorService(ɵɵinject(FormBuilder), ɵɵinject(AccountValidatorService)); }, token: PersonValidatorService, providedIn: "root" });
+PersonValidatorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PersonValidatorService_Factory() { return new PersonValidatorService(i0.ɵɵinject(i1$6.FormBuilder), i0.ɵɵinject(AccountValidatorService)); }, token: PersonValidatorService, providedIn: "root" });
 PersonValidatorService.decorators = [
     { type: Injectable, args: [{ providedIn: 'root' },] }
 ];
@@ -25692,16 +25748,16 @@ AdminModule.decorators = [
 ];
 AdminModule.ctorParameters = () => [];
 
-const ɵ0$c = {
+const ɵ0 = {
     profile: 'ADMIN'
 };
-const routes = [
+const routes$5 = [
     {
         path: 'users',
         pathMatch: 'full',
         component: UsersPage,
         canActivate: [AuthGuardService],
-        data: ɵ0$c
+        data: ɵ0
     }
 ];
 class AdminRoutingModule {
@@ -25711,33 +25767,33 @@ AdminRoutingModule.decorators = [
                 imports: [
                     SharedRoutingModule,
                     AdminModule,
-                    RouterModule.forChild(routes)
+                    RouterModule.forChild(routes$5)
                 ],
                 exports: [RouterModule]
             },] }
 ];
 
-const ErrorCodes$2 = {
+const ErrorCodes = {
     LOAD_PERSONS_ERROR: 100,
     SAVE_PERSONS_ERROR: 101,
     DELETE_PERSONS_ERROR: 102,
 };
 
-class EntityTestClass {
+class EntityTestClass$1 {
 }
-const FAKE_ENTITIES = [
+const FAKE_ENTITIES$1 = [
     { id: 1, label: 'AAA', name: 'Item A', description: 'Very long description A', comments: 'Very very long comments... again for A' },
     { id: 2, label: 'BBB', name: 'Item B', description: 'Very long description B', comments: 'Very very long comments... again for B' },
     { id: 3, label: 'CCC', name: 'Item C', description: 'Very long description C', comments: 'Very very long comments... again for C' }
 ];
-function deepCopy(values, size) {
+function deepCopy$1(values, size) {
     if (isNil(size)) {
-        return (values || FAKE_ENTITIES).map(entity => Object.assign({}, entity));
+        return (values || FAKE_ENTITIES$1).map(entity => Object.assign({}, entity));
     }
     let result = [];
     let i = 1;
     while (result.length < size) {
-        result = result.concat((values || FAKE_ENTITIES).map(entity => {
+        result = result.concat((values || FAKE_ENTITIES$1).map(entity => {
             const name = entity.name + ' #' + i;
             return Object.assign(Object.assign({}, entity), { id: i++, name });
         }));
@@ -25747,7 +25803,7 @@ function deepCopy(values, size) {
 class AutocompleteTestPage {
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
-        this._items = deepCopy(FAKE_ENTITIES, 100);
+        this._items = deepCopy$1(FAKE_ENTITIES$1, 100);
         this._$items = new BehaviorSubject(undefined);
         this.autocompleteFields = new MatAutocompleteConfigHolder();
         this.memoryHide = false;
@@ -25758,6 +25814,7 @@ class AutocompleteTestPage {
             entity: [null, SharedValidators.entity],
             missingEntity: [null, SharedValidators.entity],
             disableEntity: [null, SharedValidators.entity],
+            entities: [null, SharedFormArrayValidators.requiredArrayMinLength(1)],
         });
         this.form.get('disableEntity').disable();
     }
@@ -25791,22 +25848,32 @@ class AutocompleteTestPage {
         });
         // From items
         this.autocompleteFields.add('entity-items-large', {
-            items: FAKE_ENTITIES.slice(),
+            items: FAKE_ENTITIES$1.slice(),
             attributes: ['label', 'name', 'description', 'comments'],
             displayWith: this.entityToString
         });
+        // For mutliple 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();
     }
     // Load the form with data
     loadData() {
         return __awaiter(this, void 0, void 0, function* () {
             const data = {
-                entity: deepCopy(FAKE_ENTITIES)[0],
+                entity: deepCopy$1(FAKE_ENTITIES$1)[0],
                 // This item is NOT in the items list => i should be displayed anyway
                 missingEntity: {
                     id: -1, label: '??', name: 'Missing item'
                 },
-                disableEntity: deepCopy(FAKE_ENTITIES)[2]
+                disableEntity: deepCopy$1(FAKE_ENTITIES$1)[2],
+                entities: deepCopy$1(FAKE_ENTITIES$1)
             };
             this.form.setValue(data);
             // Load observables
@@ -25821,6 +25888,9 @@ class AutocompleteTestPage {
     entityToString(item) {
         return [item && item.label || undefined, item && item.name || undefined].filter(isNotNil).join(' - ');
     }
+    entitiesToString(items) {
+        return (items || []).map(this.entityToString).join(', ');
+    }
     suggest(value, filter) {
         return __awaiter(this, void 0, void 0, function* () {
             filter = Object.assign({ offset: 0, size: 30 }, filter);
@@ -25864,9 +25934,10 @@ class AutocompleteTestPage {
         this.memoryTimer = null;
         this.memoryHide = false;
     }
-    updateFilter(fieldName) {
+    updateFilter(autocompleteField, fieldName) {
         const filter = this.autocompleteFields.get(fieldName).filter || {};
         filter.searchAttribute = (!filter || filter.searchAttribute !== 'name') ? 'name' : 'label';
+        autocompleteField.reloadItems();
     }
     /* -- protected methods -- */
     stringify(value) {
@@ -25876,7 +25947,7 @@ class AutocompleteTestPage {
 AutocompleteTestPage.decorators = [
     { type: Component, args: [{
                 selector: 'app-autocomplete-test',
-                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar>\n    <a mat-tab-link\n       [active]=\"mode==='mobile'\"\n       (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='desktop'\"\n       (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='memory'\"\n       (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link\n       [active]=\"mode==='temp'\"\n       (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!--<ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n    </ion-grid>-->\n\n\n    <ion-grid *ngIf=\"mode === 'memory'\">\n\n      <!-- debugging memory leak -->\n      <ion-row>\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                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [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('entity-items-filter')\">Filter on: {{autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}</ion-button>\n                  </ion-col>\n                  <ion-col>\n                    <mat-autocomplete-field formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [mobile]=\"true\"\n                                            [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      </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-suggest]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an array\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\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-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-missing]'\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size panel\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-disable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                      [readonly]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"mat-autocomplete-panel-full-size\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      class=\"mat-autocomplete-panel-full-size\"\n                                      panelWidth=\"100vw\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelWidth: string</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                  <ion-col size=\"3\">\n                    <mat-checkbox #showIcons [checked]=\"false\">\n                      Icons ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"false\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                      <mat-icon matPrefix *ngIf=\"showIcons.checked\">keyboard_arrow_right</mat-icon>\n                      <mat-icon matSuffix *ngIf=\"showIcons.checked\">keyboard_arrow_left</mat-icon>\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
+                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar>\n    <a mat-tab-link\n       [active]=\"mode==='mobile'\"\n       (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='desktop'\"\n       (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='memory'\"\n       (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link\n       [active]=\"mode==='temp'\"\n       (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!--<ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n    </ion-grid>-->\n\n\n    <ion-grid *ngIf=\"mode === 'memory'\">\n\n      <!-- debugging memory leak -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Debug memory leak</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Items type\">\n            <mat-select (selectionChange)=\"memoryAutocompleteFieldName=$event.value\" [value]=\"memoryAutocompleteFieldName\">\n              <mat-option value=\"entity-$items\">Observable</mat-option>\n              <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n        <ion-col size=\"1\" class=\"ion-no-padding\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Mobile ?\">\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field formControlName=\"entity\"\n                                  *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n                                  [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                                  [mobile]=\"memoryMobile\"\n                                  [equals]=\"equals\"\n                                  [logPrefix]=\"'[combo-memory-leak]'\">\n          </mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"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                                      [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              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      mobile=\"true\"\n                                      multiple=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Change filter\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre></pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-button (click)=\"updateFilter(filterChangeField, 'entity-items-filter')\">Filter on: {{autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}</ion-button>\n                  </ion-col>\n                  <ion-col>\n                    <mat-autocomplete-field formControlName=\"entity\" #filterChangeField\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-filter]'\"\n                    ></mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"min-width-large\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"true\"\n                                      class=\"min-width-large\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"true\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-mobile-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Fullscreen\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-mobile-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Desktop mode -->\n    <ion-grid *ngIf=\"mode === 'desktop'\">\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Desktop mode</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  items from suggest function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-suggest]'\">\n              </mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  search with a suggestLengthThreshold\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      suggestLengthThreshold=\"3\"\n                                      [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an array\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: [], value: {{stringify(form.controls.entity.value)}}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items')\"\n                                      [logPrefix]=\"'[combo-desktop-array-1]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [equals]=\"equals\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Multiple value\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>multiple: true</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entities\"\n                                      [config]=\"autocompleteFields.get('entities-items-filter')\"\n                                      [placeholder]=\"'Multiple'\"\n                                      mobile=\"false\"\n                                      multiple=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-multiple]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-missing]'\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size panel\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>class: 'mat-autocomplete-panel-full-size'</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n                                      [debug]=\"true\"\n                                      [showAllOnFocus]=\"true\"\n                                      [showPanelOnFocus]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-disable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                      [readonly]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>class=\"mat-autocomplete-panel-full-size\"</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      class=\"mat-autocomplete-panel-full-size\"\n                                      panelWidth=\"100vw\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>panelWidth: string</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      panelWidth=\"400px\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-desktop-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid>\n                <ion-row>\n                  <ion-col size=\"3\">\n                    <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                      Readonly ?\n                    </mat-checkbox>\n                  </ion-col>\n                  <ion-col size=\"3\">\n                    <mat-checkbox #showIcons [checked]=\"false\">\n                      Icons ?\n                    </mat-checkbox>\n                  </ion-col>\n                </ion-row>\n                <ion-row>\n                  <ion-col>\n                    <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [placeholder]=\"'Entity'\"\n                                            [mobile]=\"false\"\n                                            [equals]=\"equals\"\n                                            [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                            [readonly]=\"true\"\n                                            [clearable]=\"!readonlyField.readonly\">\n                      <mat-icon matPrefix *ngIf=\"showIcons.checked\">keyboard_arrow_right</mat-icon>\n                      <mat-icon matSuffix *ngIf=\"showIcons.checked\">keyboard_arrow_left</mat-icon>\n                    </mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
             },] }
 ];
 AutocompleteTestPage.ctorParameters = () => [
@@ -25949,13 +26020,13 @@ LatLongTestPage.ctorParameters = () => [
     { type: FormBuilder }
 ];
 
-const moment$5 = momentImported;
+const moment$2 = 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$2().startOf('day');
         this.form = formBuilder.group({
             empty: [null, Validators.required],
             date: [null, Validators.compose([Validators.required, SharedValidators.validDate])],
@@ -25968,7 +26039,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$2(this._today).add(d - 3, 'day');
         }
         this.$dates.next(dates);
         this.loadData();
@@ -26009,7 +26080,7 @@ SwipeTestPage.ctorParameters = () => [
     { type: DateFormatPipe }
 ];
 
-const moment$6 = momentImported;
+const moment$1 = momentImported;
 class DateTimeTestPage {
     constructor(platform, formBuilder, cd) {
         this.platform = platform;
@@ -26032,8 +26103,7 @@ class DateTimeTestPage {
         disableControl.disable();
         // Copy the 'enable' value, into the disable control
         this.form.get('enable').valueChanges.subscribe(value => disableControl.setValue(value));
-        const mobile = platform.is('mobile');
-        this.showLogPanel = this.showLogPanel || mobile;
+        this.showLogPanel = this.showLogPanel || isMobile(window);
     }
     ngOnInit() {
         setTimeout(() => this.loadData(), 250);
@@ -26041,7 +26111,7 @@ class DateTimeTestPage {
     // Load the form with data
     loadData() {
         return __awaiter(this, void 0, void 0, function* () {
-            const now = moment$6();
+            const now = moment$1();
             const data = {
                 empty: toDateISOString(now.clone().add(2, 'hours')),
                 enable: toDateISOString(now),
@@ -26102,9 +26172,9 @@ DateTimeTestPage.ctorParameters = () => [
     { type: ChangeDetectorRef }
 ];
 
-class EntityTestClass$1 {
+class EntityTestClass {
 }
-const FAKE_ENTITIES$1 = [
+const FAKE_ENTITIES = [
     { id: 1, label: 'AAA', name: 'Item A' },
     { id: 2, label: 'BBB', name: 'Item B' },
     { id: 3, label: 'CCC', name: 'Item C' },
@@ -26113,14 +26183,14 @@ const FAKE_ENTITIES$1 = [
     { id: 6, label: 'FFF', name: 'Item F' },
     { id: 7, label: 'GGG', name: 'Item G' }
 ];
-function deepCopy$1(values, size) {
+function deepCopy(values, size) {
     if (isNil(size)) {
-        return (values || FAKE_ENTITIES$1).map(entity => Object.assign({}, entity));
+        return (values || FAKE_ENTITIES).map(entity => Object.assign({}, entity));
     }
     let result = [];
     let i = 1;
     while (result.length < size) {
-        result = result.concat((values || FAKE_ENTITIES$1).map(entity => {
+        result = result.concat((values || FAKE_ENTITIES).map(entity => {
             const name = entity.name + ' #' + i;
             return Object.assign(Object.assign({}, entity), { id: i++, name });
         }));
@@ -26130,7 +26200,7 @@ function deepCopy$1(values, size) {
 class ChipsTestPage {
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
-        this._items = deepCopy$1(FAKE_ENTITIES$1, 100);
+        this._items = deepCopy(FAKE_ENTITIES, 100);
         this._$items = new BehaviorSubject(undefined);
         this.autocompleteFields = new MatAutocompleteConfigHolder();
         this.form = formBuilder.group({
@@ -26169,7 +26239,7 @@ class ChipsTestPage {
     // Load the form with data
     loadData() {
         return __awaiter(this, void 0, void 0, function* () {
-            const items = deepCopy$1(FAKE_ENTITIES$1);
+            const items = deepCopy(FAKE_ENTITIES);
             const data = {
                 entity: items.slice(0, 1),
                 entityInitial: items.slice(1, 2),
@@ -26285,10 +26355,9 @@ NumpadTestPage.ctorParameters = () => [
     { type: FormBuilder }
 ];
 
-const moment$7 = momentImported;
+const moment = momentImported;
 class DateTestPage {
-    constructor(platform, formBuilder, cd) {
-        this.platform = platform;
+    constructor(formBuilder, cd) {
         this.formBuilder = formBuilder;
         this.cd = cd;
         this.showLogPanel = true;
@@ -26310,8 +26379,7 @@ class DateTestPage {
         disableControl.disable();
         // Copy the 'enable' value, into the disable control
         this.form.get('enable').valueChanges.subscribe(value => disableControl.setValue(value));
-        const mobile = platform.is('mobile');
-        this.showLogPanel = this.showLogPanel || mobile;
+        this.showLogPanel = this.showLogPanel || isMobile(window);
     }
     ngOnInit() {
         setTimeout(() => this.loadData(), 250);
@@ -26319,7 +26387,7 @@ class DateTestPage {
     // Load the form with data
     loadData() {
         return __awaiter(this, void 0, void 0, function* () {
-            const now = moment$7();
+            const now = moment();
             const nowAtMahe = now.clone().tz(this.timezone).startOf('day');
             const data = {
                 empty: toDateISOString(now.clone().add(2, 'hours')),
@@ -26380,7 +26448,6 @@ DateTestPage.decorators = [
             },] }
 ];
 DateTestPage.ctorParameters = () => [
-    { type: Platform },
     { type: FormBuilder },
     { type: ChangeDetectorRef }
 ];
@@ -26397,7 +26464,7 @@ const SHARED_MATERIAL_TESTING_PAGES = [
     { label: 'Shared directives', divider: true },
     { label: 'Badge icon directive', page: '/testing/shared/badge-icon' }
 ];
-const routes$1 = [
+const routes$4 = [
     {
         path: '',
         pathMatch: 'full',
@@ -26454,7 +26521,7 @@ MaterialTestingModule.decorators = [
                     ReactiveFormsModule,
                     SharedMaterialModule,
                     TranslateModule.forChild(),
-                    RouterModule.forChild(routes$1)
+                    RouterModule.forChild(routes$4)
                 ],
                 declarations: [
                     DateTimeTestPage,
@@ -26515,7 +26582,7 @@ ToastTestingPage.ctorParameters = () => [
     { type: TranslateService }
 ];
 
-const routes$2 = [
+const routes$3 = [
     {
         path: 'toast',
         pathMatch: 'full',
@@ -26530,7 +26597,7 @@ ToastTestingModule.decorators = [
                     CommonModule,
                     IonicModule,
                     TranslateModule.forChild(),
-                    RouterModule.forChild(routes$2)
+                    RouterModule.forChild(routes$3)
                 ],
                 declarations: [
                     ToastTestingPage
@@ -26593,7 +26660,7 @@ UploadFileTestingPage.ctorParameters = () => [
     { type: PopoverController }
 ];
 
-const routes$3 = [
+const routes$2 = [
     {
         path: 'upload-file',
         pathMatch: 'full',
@@ -26608,7 +26675,7 @@ UploadFileTestingModule.decorators = [
                     CommonModule,
                     IonicModule,
                     TranslateModule.forChild(),
-                    RouterModule.forChild(routes$3)
+                    RouterModule.forChild(routes$2)
                 ],
                 declarations: [
                     UploadFileTestingPage
@@ -26989,7 +27056,7 @@ TextPopoverTestingPage.ctorParameters = () => [
     { type: PopoverController }
 ];
 
-const routes$4 = [
+const routes$1 = [
     {
         path: 'text-popover',
         pathMatch: 'full',
@@ -27004,7 +27071,7 @@ TextPopoverTestingModule.decorators = [
                     CommonModule,
                     IonicModule,
                     TranslateModule.forChild(),
-                    RouterModule.forChild(routes$4)
+                    RouterModule.forChild(routes$1)
                 ],
                 declarations: [
                     TextPopoverTestingPage
@@ -27021,7 +27088,7 @@ const CORE_TESTING_PAGES = [
     { label: 'Table', page: '/testing/core/table' },
     { label: 'Text popover', page: '/testing/core/text-popover' }
 ];
-const routes$5 = [
+const routes = [
     {
         path: '',
         pathMatch: 'full',
@@ -27045,7 +27112,7 @@ CoreTestingModule.decorators = [
                 imports: [
                     CommonModule,
                     TranslateModule.forChild(),
-                    RouterModule.forChild(routes$5),
+                    RouterModule.forChild(routes),
                     // Sub modules
                     TableTestingModule,
                     TextPopoverTestingModule
@@ -27065,5 +27132,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, 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_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, ErrorCodes$2 as ErrorCodes, 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, 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, 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, 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, isControlHasInput, isCordova, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, 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$1 as ɵ0, CustomReuseStrategy as ɵa, MatNumpadDomService as ɵb, isFocusableElement as ɵc, RegisterForm as ɵd, AccountValidatorService as ɵe, RegisterModal as ɵf, UserSettingsValidatorService as ɵg, LocalSettingsValidatorService as ɵh, 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_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, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, 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, 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, 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, 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, isControlHasInput, isCordova, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, 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$c as ɵ0, CustomReuseStrategy as ɵa, MatNumpadDomService as ɵb, isFocusableElement as ɵc, RegisterForm as ɵd, AccountValidatorService as ɵe, RegisterModal as ɵf, UserSettingsValidatorService as ɵg, LocalSettingsValidatorService as ɵh, AppIconComponent as ɵi, DateTestPage as ɵj, NumpadTestPage as ɵk, MatBadgeIconTestPage as ɵl, ToastTestingModule as ɵm, ToastTestingPage as ɵn };
 //# sourceMappingURL=sumaris-net.ngx-components.js.map