@sumaris-net/ngx-components 1.17.1 → 1.18.1

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/table'), require('@angular/cdk/a11y'), require('@angular/cdk/overlay'), require('@angular/cdk/scrolling'), require('@angular/material/core'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/checkbox'), require('@angular/material/expansion'), require('@angular/material/toolbar'), require('@angular/material/icon'), require('@angular/material/button'), require('@angular/material/menu'), require('@angular/material/select'), require('@angular/material/card'), require('@angular/material/tabs'), require('@angular/material/stepper'), require('@angular/material/list'), require('@angular/material/button-toggle'), require('@angular/material/progress-spinner'), require('@angular/material/progress-bar'), require('@angular/material/radio'), require('@angular/material/badge'), require('@angular/material/slide-toggle'), require('@angular/material/dialog'), require('@angular/material/autocomplete'), require('@angular/forms'), require('rxjs'), require('rxjs/operators'), require('@ngx-translate/core'), require('@ionic/angular'), require('moment'), require('@angular/material-moment-adapter'), require('moment-timezone'), require('@ionic-native/keyboard/ngx'), require('angular2-text-mask'), require('ngx-material-timepicker'), require('@angular/material/datepicker'), require('@angular/animations'), require('@angular/material/divider'), require('@angular/material/tooltip'), require('@angular/material/chips'), require('@angular/router'), require('@angular/platform-browser'), require('@angular/common/http'), require('ngx-color-picker'), require('@ionic-native/native-audio/ngx'), require('@ionic-native/vibration/ngx'), require('@ionic-native/audio-management/ngx'), require('@ionic-native/native-audio/ngx/index'), require('@ionic-native/vibration/ngx/index'), require('@ionic-native/audio-management/ngx/index'), require('uuid/v4'), require('@angular/cdk/drag-drop'), require('ngx-markdown'), require('tweetnacl'), require('@ionic/storage'), require('zone.js/dist/zone-error'), require('@ionic-native/splash-screen/ngx'), require('@ionic-native/network/ngx'), require('ionic-cache'), require('ionic-cache/dist/cache.service'), require('@ionic-native/network/ngx/index'), require('@ionic-native/splash-screen/ngx/index'), require('@ionic-native/status-bar/ngx'), require('@angular/cdk/platform'), require('@ionic-native/in-app-browser/ngx'), require('@apollo/client/core'), require('apollo-angular'), require('@apollo/client/link/ws'), require('@apollo/client/utilities'), require('@apollo/client/link/retry'), require('apollo-link-queue'), require('apollo-link-serialize'), require('apollo-link-logger'), require('apollo-angular/http'), require('apollo3-cache-persist'), require('@ionic-native/downloader/ngx'), require('@ionic-native/status-bar/ngx/index'), require('@ionic-native/keyboard/ngx/index'), require('@ionic-native/in-app-browser/ngx/index'), require('@ionic-native/downloader/ngx/index'), require('@angular/cdk/text-field'), require('@e-is/ngx-material-table'), require('@angular/cdk/collections'), require('ngx-jdenticon'), require('tweetnacl-util'), require('scrypt-async'), require('hammerjs')) :
-    typeof define === 'function' && define.amd ? define('@sumaris-net/ngx-components', ['exports', '@angular/core', '@angular/common', '@angular/cdk/table', '@angular/cdk/a11y', '@angular/cdk/overlay', '@angular/cdk/scrolling', '@angular/material/core', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/material/form-field', '@angular/material/input', '@angular/material/checkbox', '@angular/material/expansion', '@angular/material/toolbar', '@angular/material/icon', '@angular/material/button', '@angular/material/menu', '@angular/material/select', '@angular/material/card', '@angular/material/tabs', '@angular/material/stepper', '@angular/material/list', '@angular/material/button-toggle', '@angular/material/progress-spinner', '@angular/material/progress-bar', '@angular/material/radio', '@angular/material/badge', '@angular/material/slide-toggle', '@angular/material/dialog', '@angular/material/autocomplete', '@angular/forms', 'rxjs', 'rxjs/operators', '@ngx-translate/core', '@ionic/angular', 'moment', '@angular/material-moment-adapter', 'moment-timezone', '@ionic-native/keyboard/ngx', 'angular2-text-mask', 'ngx-material-timepicker', '@angular/material/datepicker', '@angular/animations', '@angular/material/divider', '@angular/material/tooltip', '@angular/material/chips', '@angular/router', '@angular/platform-browser', '@angular/common/http', 'ngx-color-picker', '@ionic-native/native-audio/ngx', '@ionic-native/vibration/ngx', '@ionic-native/audio-management/ngx', '@ionic-native/native-audio/ngx/index', '@ionic-native/vibration/ngx/index', '@ionic-native/audio-management/ngx/index', 'uuid/v4', '@angular/cdk/drag-drop', 'ngx-markdown', 'tweetnacl', '@ionic/storage', 'zone.js/dist/zone-error', '@ionic-native/splash-screen/ngx', '@ionic-native/network/ngx', 'ionic-cache', 'ionic-cache/dist/cache.service', '@ionic-native/network/ngx/index', '@ionic-native/splash-screen/ngx/index', '@ionic-native/status-bar/ngx', '@angular/cdk/platform', '@ionic-native/in-app-browser/ngx', '@apollo/client/core', 'apollo-angular', '@apollo/client/link/ws', '@apollo/client/utilities', '@apollo/client/link/retry', 'apollo-link-queue', 'apollo-link-serialize', 'apollo-link-logger', 'apollo-angular/http', 'apollo3-cache-persist', '@ionic-native/downloader/ngx', '@ionic-native/status-bar/ngx/index', '@ionic-native/keyboard/ngx/index', '@ionic-native/in-app-browser/ngx/index', '@ionic-native/downloader/ngx/index', '@angular/cdk/text-field', '@e-is/ngx-material-table', '@angular/cdk/collections', 'ngx-jdenticon', 'tweetnacl-util', 'scrypt-async', 'hammerjs'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sumaris-net'] = global['sumaris-net'] || {}, global['sumaris-net']['ngx-components'] = {}), global.ng.core, global.ng.common, global.ng.cdk.table, global.ng.cdk.a11y, global.ng.cdk.overlay, global.ng.cdk.scrolling, global.ng.material.core, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.material.formField, global.ng.material.input, global.ng.material.checkbox, global.ng.material.expansion, global.ng.material.toolbar, global.ng.material.icon, global.ng.material.button, global.ng.material.menu, global.ng.material.select, global.ng.material.card, global.ng.material.tabs, global.ng.material.stepper, global.ng.material.list, global.ng.material.buttonToggle, global.ng.material.progressSpinner, global.ng.material.progressBar, global.ng.material.radio, global.ng.material.badge, global.ng.material.slideToggle, global.ng.material.dialog, global.ng.material.autocomplete, global.ng.forms, global.rxjs, global.rxjs.operators, global['ngx-translate'].core, global.ionic.angular, global.moment, global.ng.materialMomentAdapter, global['moment-timezone'], global['ionic-native'].keyboard.ngx, global['angular2-text-mask'], global['ngx-material-timepicker'], global.ng.material.datepicker, global.ng.animations, global.ng.material.divider, global.ng.material.tooltip, global.ng.material.chips, global.ng.router, global.ng.platformBrowser, global.ng.common.http, global['ngx-color-picker'], global['ionic-native']['native-audio'].ngx, global['ionic-native'].vibration.ngx, global['ionic-native']['audio-management'].ngx, global['ionic-native']['native-audio'].ngx.index, global['ionic-native'].vibration.ngx.index, global['ionic-native']['audio-management'].ngx.index, global.uuid.v4, global.ng.cdk.dragDrop, global['ngx-markdown'], global.tweetnacl, global.ionic.storage, null, global['ionic-native']['splash-screen'].ngx, global['ionic-native'].network.ngx, global['ionic-cache'], global['ionic-cache/dist/cache'].service, global['ionic-native'].network.ngx.index, global['ionic-native']['splash-screen'].ngx.index, global['ionic-native']['status-bar'].ngx, global.ng.cdk.platform, global['ionic-native']['in-app-browser'].ngx, global.apollo.client.core, global['apollo-angular'], global.apollo.client.link.ws, global.apollo.client.utilities, global.apollo.client.link.retry, global['apollo-link-queue'], global['apollo-link-serialize'], global['apollo-link-logger'], global['apollo-angular'].http, global['apollo3-cache-persist'], global['ionic-native'].downloader.ngx, global['ionic-native']['status-bar'].ngx.index, global['ionic-native'].keyboard.ngx.index, global['ionic-native']['in-app-browser'].ngx.index, global['ionic-native'].downloader.ngx.index, global.ng.cdk.textField, global['e-is']['ngx-material-table'], global.ng.cdk.collections, global['ngx-jdenticon']));
-}(this, (function (exports, i0, i1$4, table$1, a11y, overlay, scrolling, i1$3, table, sort$1, paginator, formField, input, checkbox, expansion, toolbar, icon, button, menu, select, card, tabs, stepper, list, buttonToggle, progressSpinner, progressBar, radio, badge, slideToggle, i2, autocomplete, i1, rxjs, operators, i1$2, i1$5, momentImported, i1$1, momentTZImported, ngx, angular2TextMask, ngxMaterialTimepicker, datepicker, animations, divider, tooltip, chips, i3, i1$6, i2$1, ngxColorPicker, ngx$2, ngx$3, ngx$1, i2$2, i3$1, i4, uuidv4Imported, dragDrop, ngxMarkdown, tweetnacl, i3$2, zoneError, ngx$5, ngx$4, ionicCache, i6, i9, i10, ngx$7, i2$4, ngx$8, core, i2$3, ws, utilities, retry, QueueLink, SerializingLink, loggerLink, i3$3, apollo3CachePersist, ngx$6, i14, i15, i17, i18, textField, ngxMaterialTable, collections, ngxJdenticon) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/table'), require('@angular/cdk/a11y'), require('@angular/cdk/overlay'), require('@angular/cdk/scrolling'), require('@angular/material/core'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/checkbox'), require('@angular/material/expansion'), require('@angular/material/toolbar'), require('@angular/material/icon'), require('@angular/material/button'), require('@angular/material/menu'), require('@angular/material/select'), require('@angular/material/card'), require('@angular/material/tabs'), require('@angular/material/stepper'), require('@angular/material/list'), require('@angular/material/button-toggle'), require('@angular/material/progress-spinner'), require('@angular/material/progress-bar'), require('@angular/material/radio'), require('@angular/material/badge'), require('@angular/material/slide-toggle'), require('@angular/material/dialog'), require('@angular/material/autocomplete'), require('@angular/forms'), require('rxjs'), require('rxjs/operators'), require('@angular/animations'), require('@ngx-translate/core'), require('@ionic/angular'), require('moment'), require('@angular/material-moment-adapter'), require('moment-timezone'), require('@ionic-native/keyboard/ngx'), require('angular2-text-mask'), require('ngx-material-timepicker'), require('@angular/material/datepicker'), require('@angular/material/divider'), require('@angular/material/tooltip'), require('@angular/material/chips'), require('@angular/router'), require('@angular/platform-browser'), require('@angular/common/http'), require('ngx-color-picker'), require('@ionic-native/native-audio/ngx'), require('@ionic-native/vibration/ngx'), require('@ionic-native/audio-management/ngx'), require('@ionic-native/native-audio/ngx/index'), require('@ionic-native/vibration/ngx/index'), require('@ionic-native/audio-management/ngx/index'), require('uuid/v4'), require('@angular/cdk/drag-drop'), require('ngx-markdown'), require('tweetnacl'), require('@ionic/storage'), require('zone.js/dist/zone-error'), require('@ionic-native/splash-screen/ngx'), require('@ionic-native/network/ngx'), require('ionic-cache'), require('ionic-cache/dist/cache.service'), require('@ionic-native/network/ngx/index'), require('@ionic-native/splash-screen/ngx/index'), require('@ionic-native/status-bar/ngx'), require('@angular/cdk/platform'), require('@ionic-native/in-app-browser/ngx'), require('@apollo/client/core'), require('apollo-angular'), require('@apollo/client/link/ws'), require('@apollo/client/utilities'), require('@apollo/client/link/retry'), require('apollo-link-queue'), require('apollo-link-serialize'), require('apollo-link-logger'), require('apollo-angular/http'), require('apollo3-cache-persist'), require('@ionic-native/downloader/ngx'), require('@ionic-native/status-bar/ngx/index'), require('@ionic-native/keyboard/ngx/index'), require('@ionic-native/in-app-browser/ngx/index'), require('@ionic-native/downloader/ngx/index'), require('@angular/cdk/text-field'), require('@e-is/ngx-material-table'), require('@angular/cdk/collections'), require('ngx-jdenticon'), require('tweetnacl-util'), require('scrypt-async'), require('hammerjs')) :
+    typeof define === 'function' && define.amd ? define('@sumaris-net/ngx-components', ['exports', '@angular/core', '@angular/common', '@angular/cdk/table', '@angular/cdk/a11y', '@angular/cdk/overlay', '@angular/cdk/scrolling', '@angular/material/core', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/material/form-field', '@angular/material/input', '@angular/material/checkbox', '@angular/material/expansion', '@angular/material/toolbar', '@angular/material/icon', '@angular/material/button', '@angular/material/menu', '@angular/material/select', '@angular/material/card', '@angular/material/tabs', '@angular/material/stepper', '@angular/material/list', '@angular/material/button-toggle', '@angular/material/progress-spinner', '@angular/material/progress-bar', '@angular/material/radio', '@angular/material/badge', '@angular/material/slide-toggle', '@angular/material/dialog', '@angular/material/autocomplete', '@angular/forms', 'rxjs', 'rxjs/operators', '@angular/animations', '@ngx-translate/core', '@ionic/angular', 'moment', '@angular/material-moment-adapter', 'moment-timezone', '@ionic-native/keyboard/ngx', 'angular2-text-mask', 'ngx-material-timepicker', '@angular/material/datepicker', '@angular/material/divider', '@angular/material/tooltip', '@angular/material/chips', '@angular/router', '@angular/platform-browser', '@angular/common/http', 'ngx-color-picker', '@ionic-native/native-audio/ngx', '@ionic-native/vibration/ngx', '@ionic-native/audio-management/ngx', '@ionic-native/native-audio/ngx/index', '@ionic-native/vibration/ngx/index', '@ionic-native/audio-management/ngx/index', 'uuid/v4', '@angular/cdk/drag-drop', 'ngx-markdown', 'tweetnacl', '@ionic/storage', 'zone.js/dist/zone-error', '@ionic-native/splash-screen/ngx', '@ionic-native/network/ngx', 'ionic-cache', 'ionic-cache/dist/cache.service', '@ionic-native/network/ngx/index', '@ionic-native/splash-screen/ngx/index', '@ionic-native/status-bar/ngx', '@angular/cdk/platform', '@ionic-native/in-app-browser/ngx', '@apollo/client/core', 'apollo-angular', '@apollo/client/link/ws', '@apollo/client/utilities', '@apollo/client/link/retry', 'apollo-link-queue', 'apollo-link-serialize', 'apollo-link-logger', 'apollo-angular/http', 'apollo3-cache-persist', '@ionic-native/downloader/ngx', '@ionic-native/status-bar/ngx/index', '@ionic-native/keyboard/ngx/index', '@ionic-native/in-app-browser/ngx/index', '@ionic-native/downloader/ngx/index', '@angular/cdk/text-field', '@e-is/ngx-material-table', '@angular/cdk/collections', 'ngx-jdenticon', 'tweetnacl-util', 'scrypt-async', 'hammerjs'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["sumaris-net"] = global["sumaris-net"] || {}, global["sumaris-net"]["ngx-components"] = {}), global.ng.core, global.ng.common, global.ng.cdk.table, global.ng.cdk.a11y, global.ng.cdk.overlay, global.ng.cdk.scrolling, global.ng.material.core, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.material.formField, global.ng.material.input, global.ng.material.checkbox, global.ng.material.expansion, global.ng.material.toolbar, global.ng.material.icon, global.ng.material.button, global.ng.material.menu, global.ng.material.select, global.ng.material.card, global.ng.material.tabs, global.ng.material.stepper, global.ng.material.list, global.ng.material.buttonToggle, global.ng.material.progressSpinner, global.ng.material.progressBar, global.ng.material.radio, global.ng.material.badge, global.ng.material.slideToggle, global.ng.material.dialog, global.ng.material.autocomplete, global.ng.forms, global.rxjs, global.rxjs.operators, global.ng.animations, global["ngx-translate"].core, global.ionic.angular, global.moment, global.ng.materialMomentAdapter, global["moment-timezone"], global["ionic-native"].keyboard.ngx, global["angular2-text-mask"], global["ngx-material-timepicker"], global.ng.material.datepicker, global.ng.material.divider, global.ng.material.tooltip, global.ng.material.chips, global.ng.router, global.ng.platformBrowser, global.ng.common.http, global["ngx-color-picker"], global["ionic-native"]["native-audio"].ngx, global["ionic-native"].vibration.ngx, global["ionic-native"]["audio-management"].ngx, global["ionic-native"]["native-audio"].ngx.index, global["ionic-native"].vibration.ngx.index, global["ionic-native"]["audio-management"].ngx.index, global.uuid.v4, global.ng.cdk.dragDrop, global["ngx-markdown"], global.tweetnacl, global.ionic.storage, null, global["ionic-native"]["splash-screen"].ngx, global["ionic-native"].network.ngx, global["ionic-cache"], global["ionic-cache/dist/cache"].service, global["ionic-native"].network.ngx.index, global["ionic-native"]["splash-screen"].ngx.index, global["ionic-native"]["status-bar"].ngx, global.ng.cdk.platform, global["ionic-native"]["in-app-browser"].ngx, global.apollo.client.core, global["apollo-angular"], global.apollo.client.link.ws, global.apollo.client.utilities, global.apollo.client.link.retry, global["apollo-link-queue"], global["apollo-link-serialize"], global["apollo-link-logger"], global["apollo-angular"].http, global["apollo3-cache-persist"], global["ionic-native"].downloader.ngx, global["ionic-native"]["status-bar"].ngx.index, global["ionic-native"].keyboard.ngx.index, global["ionic-native"]["in-app-browser"].ngx.index, global["ionic-native"].downloader.ngx.index, global.ng.cdk.textField, global["e-is"]["ngx-material-table"], global.ng.cdk.collections, global["ngx-jdenticon"]));
+})(this, (function (exports, i0, i1$4, table$1, a11y, overlay, scrolling, i1$3, table, sort$1, paginator, formField, input, checkbox, expansion, toolbar, icon, button, menu, select, card, tabs, stepper, list, buttonToggle, progressSpinner, progressBar, radio, badge, slideToggle, i2, autocomplete, i1, rxjs, operators, animations, i1$2, i1$5, momentImported, i1$1, momentTZImported, ngx, angular2TextMask, ngxMaterialTimepicker, datepicker, divider, tooltip, chips, i3, i1$6, i2$1, ngxColorPicker, ngx$2, ngx$3, ngx$1, i2$2, i3$1, i4, uuidv4Imported, dragDrop, ngxMarkdown, tweetnacl, i3$2, zoneError, ngx$5, ngx$4, ionicCache, i6, i9, i10, ngx$7, i2$4, ngx$8, core, i2$3, ws, utilities, retry, QueueLink, SerializingLink, loggerLink, i3$3, apollo3CachePersist, ngx$6, i14, i15, i17, i18, textField, ngxMaterialTable, collections, ngxJdenticon) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,23 +15,46 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$4);
+    var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$3);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2);
+    var i1__namespace$6 = /*#__PURE__*/_interopNamespace(i1);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$2);
+    var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$5);
     var momentImported__namespace = /*#__PURE__*/_interopNamespace(momentImported);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1$1);
     var momentTZImported__namespace = /*#__PURE__*/_interopNamespace(momentTZImported);
+    var i3__namespace$3 = /*#__PURE__*/_interopNamespace(i3);
+    var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$6);
+    var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$1);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2$2);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3$1);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var uuidv4Imported__namespace = /*#__PURE__*/_interopNamespace(uuidv4Imported);
+    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$2);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
+    var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
+    var i2__namespace$4 = /*#__PURE__*/_interopNamespace(i2$4);
+    var i2__namespace$3 = /*#__PURE__*/_interopNamespace(i2$3);
     var QueueLink__default = /*#__PURE__*/_interopDefaultLegacy(QueueLink);
     var SerializingLink__default = /*#__PURE__*/_interopDefaultLegacy(SerializingLink);
     var loggerLink__default = /*#__PURE__*/_interopDefaultLegacy(loggerLink);
+    var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$3);
+    var i14__namespace = /*#__PURE__*/_interopNamespace(i14);
+    var i15__namespace = /*#__PURE__*/_interopNamespace(i15);
+    var i17__namespace = /*#__PURE__*/_interopNamespace(i17);
+    var i18__namespace = /*#__PURE__*/_interopNamespace(i18);
 
     var ENVIRONMENT = new i0.InjectionToken('ENV');
     var Environment = /** @class */ (function () {
@@ -1219,6 +1242,136 @@
             .pipe(operators.filter(function () { return isEnd(); }));
     }
 
+    // import the required animation functions from the angular animations module
+    var fadeInAnimation = 
+    // trigger name for attaching this animation to an element using the [@triggerName] syntax
+    animations.trigger('fadeInAnimation', [
+        // route 'enter' transition
+        animations.transition(':enter', [
+            // css styles at start of transition
+            animations.style({ opacity: 0 }),
+            // animation and styles at end of transition
+            animations.animate('.3s', animations.style({ opacity: 1 }))
+        ]),
+    ]);
+    var fadeInOutAnimation = 
+    // trigger name for attaching this animation to an element using the [@triggerName] syntax
+    animations.trigger('fadeInOutAnimation', [
+        // route 'enter' transition
+        animations.transition(':enter', [
+            // css styles at start of transition
+            animations.style({ opacity: 0 }),
+            // animation and styles at end of transition
+            animations.animate('.3s', animations.style({ opacity: 1 }))
+        ]),
+        // route 'leave' transition
+        animations.transition(':leave', [
+            // animation and styles at end of transition
+            animations.animate('.5s ease-in-out', animations.style({
+                opacity: 0
+            }))
+        ]),
+    ]);
+    var slideInOutAnimation = 
+    // trigger name for attaching this animation to an element using the [@triggerName] syntax
+    animations.trigger('slideInOutAnimation', [
+        // end state styles for route container (host)
+        animations.state('*', animations.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
+        animations.transition(':enter', [
+            // styles at start of transition
+            animations.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
+            animations.animate('.3s ease-in-out', animations.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
+        animations.transition(':leave', [
+            // animation and styles at end of transition
+            animations.animate('.5s ease-in-out', animations.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
+            }))
+        ])
+    ]);
+    var slideUpDownAnimation = 
+    // trigger name for attaching this animation to an element using the [@triggerName] syntax
+    animations.trigger('slideUpDownAnimation', [
+        // end state styles for route container (host)
+        animations.state('*', animations.style({
+            transform: 'translateY(0)',
+            opacity: 1
+        })),
+        // route 'enter' transition
+        animations.transition(':enter', [
+            // styles at start of transition
+            animations.style({
+                transform: 'translateY(-400%)',
+                opacity: 0
+            }),
+            // animation and styles at end of transition
+            animations.animate('.3s ease-in-out', animations.style({
+                transform: 'translateY(0)',
+                opacity: 1
+            }))
+        ]),
+        // route 'leave' transition
+        animations.transition(':leave', [
+            // animation and styles at end of transition
+            animations.animate('.5s ease-in-out', animations.style({
+                transform: 'translateY(-100%)',
+                opacity: 0
+            }))
+        ])
+    ]);
+
+    /* ---
+     * Source: https://github.com/ionic-team/ionic-framework/blob/b0d53ca73619585671d8cf4dc24e47f826495a0a/core/src/utils/platform.ts
+     * --- */
+    var matchMedia = function (win, query) { return win.matchMedia(query).matches; };
+    var testUserAgent = function (win, expr) {
+        var userAgent = win.navigator.userAgent || win.navigator.vendor || window.opera;
+        return expr.test(userAgent);
+    };
+    var isWindows = function (win) { return testUserAgent(win, /windows/i); };
+    var isTouchUi = function (win) { return matchMedia(win, '(any-pointer:coarse)'); };
+    var isMobile = function (win) { return isCordova(window) || isAndroid(win) || isIOS(window) || (isTouchUi(win) && !isWindows(win)); };
+    var isIpad = function (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;
+    };
+    var ɵ0$c = isIpad;
+    var isIOS = function (win) { return testUserAgent(win, /iPhone|iPod/i) || isIpad(win); };
+    var isAndroid = function (win) { return testUserAgent(win, /android|sink/i); };
+    var isCordova = function (win) { return !!(win['cordova'] || win['phonegap'] || win['PhoneGap']); };
+
     var MatAutocompleteConfigHolder = /** @class */ (function () {
         function MatAutocompleteConfigHolder(options) {
             this.options = options;
@@ -1240,8 +1393,8 @@
             // Keep original the function from options, when exists
             var attributesOrFn = attributes.map(function (a, index) { return typeof a === 'function' && options.attributes[index] || a; });
             var filter = Object.assign({ searchAttribute: attributes.length === 1 ? attributes[0] : undefined, searchAttributes: attributes.length > 1 ? attributes : undefined }, options.filter);
-            var displayWith = options.displayWith || (function (obj) { return obj && joinPropertiesPath(obj, attributes); });
-            var equals = options.equals || (function (o1, o2) { return o1 && o2 && o1.id === o2.id; });
+            var displayWith = options.displayWith || MatAutocompleteFieldUtils.createDisplayFn(attributes, options.multiple);
+            var equals = options.equals || MatAutocompleteFieldUtils.defaultEquals;
             var config = Object.assign(Object.assign({}, options), { attributes: attributesOrFn, suggestFn: suggestFn,
                 filter: filter,
                 displayWith: displayWith,
@@ -1257,14 +1410,34 @@
         };
         return MatAutocompleteConfigHolder;
     }());
-    var noop = function (_) { };
-    var ɵ0 = noop;
+    var MatAutocompleteFieldUtils = /** @class */ (function () {
+        function MatAutocompleteFieldUtils() {
+        }
+        MatAutocompleteFieldUtils.createDisplayFn = function (displayAttributes, multiple) {
+            // if multiple (manage array)
+            if (multiple) {
+                return function (value) {
+                    return Array.isArray(value)
+                        ? (value || []).map(function (obj) { return obj && joinPropertiesPath(obj, displayAttributes); }).join(', ')
+                        : value && joinPropertiesPath(value, displayAttributes);
+                };
+            }
+            // Join properties
+            return function (obj) { return obj && joinPropertiesPath(obj, displayAttributes); };
+        };
+        MatAutocompleteFieldUtils.defaultEquals = function (o1, o2) {
+            return isNotNil(o1 === null || o1 === void 0 ? void 0 : o1.id) && o1.id === (o2 === null || o2 === void 0 ? void 0 : o2.id);
+        };
+        return MatAutocompleteFieldUtils;
+    }());
+    var noop$8 = function (_) { };
+    var ɵ0$b = noop$8;
     var MatAutocompleteField = /** @class */ (function () {
         function MatAutocompleteField(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;
@@ -1272,12 +1445,13 @@
             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 i0.EventEmitter();
             this.blurred = new i0.EventEmitter();
             this.focused = new i0.EventEmitter();
@@ -1398,6 +1572,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(MatAutocompleteField.prototype, "desktop", {
+            get: function () {
+                return !this.mobile;
+            },
+            enumerable: false,
+            configurable: true
+        });
         MatAutocompleteField.prototype.ngOnInit = function () {
             var _this = this;
             var _a, _b;
@@ -1416,6 +1597,7 @@
                 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));
@@ -1425,8 +1607,11 @@
                 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 || (function (obj) { return 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])
@@ -1434,24 +1619,21 @@
                 // - if label then col size = 2
                 // - if rankOrder then col size = 1
                 // - ese => auto size
-                || this.displayAttributes.map(function (attr) { return (attr && attr.endsWith('label')) ? 2
-                    : ((attr && attr.endsWith('rankOrder')) ? 1
-                        : undefined); });
+                || this.displayAttributes.map(function (attr) { return attr && (attr.endsWith('label') ? 3
+                    : (attr.endsWith('rankOrder') ? 2
+                        : undefined)); });
             this.displayColumnNames = this.displayAttributes.map(function (attr, index) { return _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 || (function (o1, o2) { return o1 && o2 && o1.id === o2.id; });
             var 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) {
                 var suggestFromArrayFn_1 = function (value, filter) { return __awaiter(_this, void 0, void 0, function () {
@@ -1482,10 +1664,10 @@
                     });
                 }); };
             }
-            else if (!this.searchable) {
+            else if (this.mobile) {
                 // Manually fill input items, from the given suggest function
-                this._subscription.add(this._$filter.pipe(operators.startWith(this.filter), operators.debounceTime(250), operators.takeWhile(function (_) { return !_this.searchable; }), // Close subscription, when enabling search (no more mat-select)
-                operators.switchMap(function (filter) { return _this.suggest('*', filter); }))
+                this._subscription.add(this._$filter.pipe(operators.startWith(this.filter), operators.debounceTime(250), operators.takeWhile(function (_) { return _this.mobile; }), // Close subscription, when not mobile (no more mat-select)
+                operators.filter(function (_) { return _this.suggestLengthThreshold <= 0; }), operators.switchMap(function (filter) { return _this.suggest('*', filter); }))
                     .subscribe(function (items) { return _this.$inputItems.next(items); }));
             }
             // Send value to suggest when :
@@ -1501,11 +1683,17 @@
             this._reload$, 
             // Search text (no distinctUntilChanged() because of the debounceTime() pipe)
             this.formControl.valueChanges
-                .pipe(operators.filter(function (value) { return _this.enabled && _this.searchable && isNotNilString(value); }), 
+                .pipe(operators.filter(function (value) { return _this.enabled && isNotNilString(value); }), 
             // Mark as loading (to show loading spinner) - earlier as possible, so before the debounce time
             operators.tap(function (_) { return _this.showLoadingSpinner && _this.markAsLoading(); }), 
             // Filter if not enough character
-            operators.filter(function (value) { return value.length >= _this.suggestLengthThreshold; }), 
+            operators.filter(function (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
             operators.debounceTime(this.debounceTime)
             // DEBUG
@@ -1513,37 +1701,34 @@
             ), 
             // Object set: use it (no distinctUntilChanged() pipe need)
             this.formControl.valueChanges
-                .pipe(operators.startWith(this.formControl.value), operators.filter(function (value) { return (_this.searchable && isNotNil(value) && typeof value === 'object'); }), operators.tap(function (value) {
+                .pipe(operators.startWith(this.formControl.value), operators.filter(function (value) { return (!_this.mobile && isNotNil(value) && typeof value === 'object'); }), operators.tap(function (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)
                 var 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(operators.filter(function (event) { return _this.searchable && _this.enabled && (!event || !event.defaultPrevented); }), operators.map(function (_) { return _this.showAllOnFocus ? '*' : _this.formControl.value; }), 
+                .pipe(operators.filter(function (event) { return !_this.mobile && _this.enabled && (!event || !event.defaultPrevented); }), operators.map(function (_) { return _this.showAllOnFocus ? '*' : _this.formControl.value; }), 
             // Make sure there is enough characters
             operators.filter(thresholdFilterFn)), 
             // Merge some observables, with a common distinctUntilChanged() pipe, and NO debounceTime
             rxjs.merge(
             // Focus or click => Load all
             rxjs.merge(this.focused, this.clicked)
-                .pipe(operators.filter(function (_) { return _this.enabled && _this.searchable; }), operators.map(function (_) { return _this.showAllOnFocus ? '*' : _this.formControl.value; })
+                .pipe(operators.filter(function (_) { return _this.enabled && !_this.mobile; }), operators.map(function (_) { return _this.showAllOnFocus ? '*' : _this.formControl.value; })
             // DEBUG
             //,tap(value => this.debug && console.debug(this.logPrefix + ' Received focused or clicked event: ', value))
             ), rxjs.merge(this.$inputItems, this._$filter)
-                .pipe(operators.filter(function (_) { return _this.searchable && _this.enabled; }), operators.map(function (_) { return _this.formControl.value; })))
+                .pipe(operators.filter(function (_) { return _this.enabled; }), operators.map(function (_) { return _this.formControl.value; })))
                 .pipe(
             // Make sure there is enough characters
             operators.filter(thresholdFilterFn), 
@@ -1576,7 +1761,7 @@
             fetchMoreItemsChanges)
                 .subscribe(function (items) {
                 // Make sure control value is inside (mat-select)
-                if (items && !_this.searchable) {
+                if (items && _this.mobile) {
                     var value_1 = _this.formControl.value;
                     if (isNotNil(value_1) && typeof value_1 === 'object' && items.findIndex(function (item) { return _this.equals(item, value_1); }) === -1) {
                         // If form value is missing: add it to the list
@@ -1590,7 +1775,7 @@
             this._subscription.add(this.blurred
                 .pipe(
             // Skip if not searchable
-            operators.filter(function (_) { return _this.searchable; }), operators.map(function (_) { return _this.formControl.value; })
+            operators.filter(function (_) { return !_this.mobile; }), operators.map(function (_) { return _this.formControl.value; })
             // DEBUG
             //,tap(value => this.debug && console.debug(this.logPrefix + ' Received blurred event: ', value)),
             )
@@ -1614,6 +1799,7 @@
                     _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
@@ -1624,6 +1810,7 @@
                 .subscribe(function () { return _this.checkIfTouched(); }));
             this._subscription.add(this.keydownEscape.subscribe(function (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
@@ -1659,7 +1846,6 @@
             this.equals = null;
             this.suggestFn = null;
             this.$filteredItems = null;
-            this.matSelectItems$ = null;
             this.config = null;
             this.classList = null;
             this._onChangeCallback = null;
@@ -1674,8 +1860,13 @@
          * Allow to reload content. Useful when filter has been changed but not detected
          */
         MatAutocompleteField.prototype.reloadItems = function (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;
+            }
         };
         MatAutocompleteField.prototype.writeValue = function (value) {
             // DEBUG
@@ -1699,15 +1890,15 @@
             this.cd.markForCheck();
         };
         MatAutocompleteField.prototype.focus = function () {
-            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);
             }
         };
         MatAutocompleteField.prototype.filterInputTextFocusEvent = function (event) {
+            var _a;
             if (!event || event.defaultPrevented)
                 return;
             // Ignore event from mat-option
@@ -1722,7 +1913,7 @@
             }
             // DEBUG
             //if (this.debug) console.debug(this.logPrefix + ' Select input content');
-            var hasContent = true; // selectInputContent(event);
+            var 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
@@ -1742,18 +1933,38 @@
                     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;
         };
+        MatAutocompleteField.prototype.ionSearchBarChanged = function (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;
+            }*/
+        };
+        MatAutocompleteField.prototype.ionSearchBarClear = function (event) {
+            if (!event || event.defaultPrevented || !this.matSelect.panelOpen)
+                return;
+            this.markAsLoading();
+            this.reloadItems();
+        };
         MatAutocompleteField.prototype.filterMatSelectFocusEvent = function (event) {
             if (!event || event.defaultPrevented)
                 return;
@@ -1779,20 +1990,6 @@
             this.blurred.emit(event);
             return true;
         };
-        MatAutocompleteField.prototype.toggleSearch = function (event) {
-            var 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();
-            }
-        };
         MatAutocompleteField.prototype.clearValue = function (event) {
             this.writeValue(null);
             event.stopPropagation();
@@ -1845,7 +2042,7 @@
         Object.defineProperty(MatAutocompleteField.prototype, "isOpen", {
             get: function () {
                 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;
             },
@@ -1891,8 +2088,7 @@
                                 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 [2 /*return*/, res];
                     }
                 });
@@ -1920,7 +2116,7 @@
             });
         };
         MatAutocompleteField.prototype.updateImplicitValue = function (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];
@@ -1974,12 +2170,13 @@
         { type: i0.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: i1.NG_VALUE_ACCESSOR,
                             multi: true,
                             useExisting: i0.forwardRef(function () { return MatAutocompleteField; })
                         }],
+                    animations: [slideInOutAnimation],
                     changeDetection: i0.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%}"]
                 },] }
@@ -2020,6 +2217,8 @@
         suggestLengthThreshold: [{ type: i0.Input }],
         showLoadingSpinner: [{ type: i0.Input }],
         debug: [{ type: i0.Input }],
+        showSearchBar: [{ type: i0.Input }],
+        stickySearchBar: [{ type: i0.Input }],
         clicked: [{ type: i0.Output, args: ['click',] }],
         blurred: [{ type: i0.Output, args: ['blur',] }],
         focused: [{ type: i0.Output, args: ['focus',] }],
@@ -2027,6 +2226,7 @@
         keydownEscape: [{ type: i0.Output, args: ['keydown.escape',] }],
         keyupEnter: [{ type: i0.Output, args: ['keyup.enter',] }],
         matSelect: [{ type: i0.ViewChild, args: ['matSelect',] }],
+        ionSearchbar: [{ type: i0.ViewChild, args: ['ionSearchbar',] }],
         matInputText: [{ type: i0.ViewChild, args: ['matInputText',] }],
         autocomplete: [{ type: i0.ViewChild, args: [autocomplete.MatAutocomplete,] }],
         autocompleteTrigger: [{ type: i0.ViewChild, args: [autocomplete.MatAutocompleteTrigger,] }],
@@ -2057,7 +2257,7 @@
         };
         return DateFormatPipe;
     }());
-    DateFormatPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function DateFormatPipe_Factory() { return new DateFormatPipe(i0.ɵɵinject(i1$1.MomentDateAdapter), i0.ɵɵinject(i1$2.TranslateService)); }, token: DateFormatPipe, providedIn: "root" });
+    DateFormatPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DateFormatPipe_Factory() { return new DateFormatPipe(i0__namespace.ɵɵinject(i1__namespace.MomentDateAdapter), i0__namespace.ɵɵinject(i1__namespace$1.TranslateService)); }, token: DateFormatPipe, providedIn: "root" });
     DateFormatPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'dateFormat'
@@ -2069,7 +2269,7 @@
         { type: i1$2.TranslateService }
     ]; };
 
-    var moment = momentImported__namespace;
+    var moment$7 = momentImported__namespace;
     var DateDiffDurationPipe = /** @class */ (function () {
         function DateDiffDurationPipe(dateAdapter, translate) {
             var _this = this;
@@ -2086,10 +2286,10 @@
             return this.format(startDate, endDate);
         };
         DateDiffDurationPipe.prototype.format = function (startDate, endDate) {
-            var duration = moment.duration(endDate.diff(startDate));
+            var duration = moment$7.duration(endDate.diff(startDate));
             if (duration.asMinutes() < 0)
                 return '';
-            var timeDuration = moment(0)
+            var timeDuration = moment$7(0)
                 .hour(duration.hours())
                 .minute(duration.minutes());
             var days = Math.floor(duration.asDays());
@@ -2097,7 +2297,7 @@
         };
         return DateDiffDurationPipe;
     }());
-    DateDiffDurationPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function DateDiffDurationPipe_Factory() { return new DateDiffDurationPipe(i0.ɵɵinject(i1$3.DateAdapter), i0.ɵɵinject(i1$2.TranslateService)); }, token: DateDiffDurationPipe, providedIn: "root" });
+    DateDiffDurationPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DateDiffDurationPipe_Factory() { return new DateDiffDurationPipe(i0__namespace.ɵɵinject(i1__namespace$2.DateAdapter), i0__namespace.ɵɵinject(i1__namespace$1.TranslateService)); }, token: DateDiffDurationPipe, providedIn: "root" });
     DateDiffDurationPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'dateDiffDuration'
@@ -2119,7 +2319,7 @@
         };
         return DateFromNowPipe;
     }());
-    DateFromNowPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function DateFromNowPipe_Factory() { return new DateFromNowPipe(i0.ɵɵinject(i1$1.MomentDateAdapter)); }, token: DateFromNowPipe, providedIn: "root" });
+    DateFromNowPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DateFromNowPipe_Factory() { return new DateFromNowPipe(i0__namespace.ɵɵinject(i1__namespace.MomentDateAdapter)); }, token: DateFromNowPipe, providedIn: "root" });
     DateFromNowPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'dateFromNow'
@@ -2188,7 +2388,7 @@
                     value *= -1;
             }
         }
-        var degrees = roundFloat(value, opts.maxDecimals).toString();
+        var degrees = roundFloat$1(value, opts.maxDecimals).toString();
         // Add sign
         var sign = negative ? '-' : '+';
         if (opts.placeholderChar) {
@@ -2239,7 +2439,7 @@
         }
         var degrees = Math.trunc(value);
         var minutes = Math.trunc((value - degrees) * 60);
-        var seconds = roundFloat(((value - degrees) * 60 - minutes) * 60, opts.maxDecimals);
+        var seconds = roundFloat$1(((value - degrees) * 60 - minutes) * 60, opts.maxDecimals);
         while (seconds >= 60) {
             seconds -= 60;
             minutes += 1;
@@ -2307,7 +2507,7 @@
             }
         }
         var degrees = Math.trunc(value);
-        var minutes = roundFloat((value - degrees) * 60, opts.maxDecimals);
+        var minutes = roundFloat$1((value - degrees) * 60, opts.maxDecimals);
         while (minutes >= 60) {
             minutes -= 60;
             degrees += 1;
@@ -2358,15 +2558,15 @@
             return NaN;
         }
         if (pattern === 'DD')
-            return roundFloat(degrees, maxDecimals);
+            return roundFloat$1(degrees, maxDecimals);
         var minutes = (pattern === 'DDMMSS' || pattern === 'DDMM') && parts[1] && parseFloat(parts[1].replace(/,/g, '.')) || 0;
         var seconds = (pattern === 'DDMMSS') && parts[2] && parseFloat(parts[2].replace(/,/g, '.')) || 0;
         var direction = ((pattern === 'DDMMSS') && parts[3]) || ((pattern === 'DDMM') && parts[2]) || undefined;
         var 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) {
             var powDecimal = Math.pow(10, maxDecimals);
             return Math.trunc(input * powDecimal + 0.5) / powDecimal;
@@ -2389,7 +2589,7 @@
         };
         return LatLongFormatPipe;
     }());
-    LatLongFormatPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function LatLongFormatPipe_Factory() { return new LatLongFormatPipe(); }, token: LatLongFormatPipe, providedIn: "root" });
+    LatLongFormatPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function LatLongFormatPipe_Factory() { return new LatLongFormatPipe(); }, token: LatLongFormatPipe, providedIn: "root" });
     LatLongFormatPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'latLongFormat'
@@ -2402,7 +2602,7 @@
         }
         return LatitudeFormatPipe;
     }());
-    LatitudeFormatPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function LatitudeFormatPipe_Factory() { return new LatitudeFormatPipe(); }, token: LatitudeFormatPipe, providedIn: "root" });
+    LatitudeFormatPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function LatitudeFormatPipe_Factory() { return new LatitudeFormatPipe(); }, token: LatitudeFormatPipe, providedIn: "root" });
     LatitudeFormatPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'latitudeFormat'
@@ -2415,7 +2615,7 @@
         }
         return LongitudeFormatPipe;
     }());
-    LongitudeFormatPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function LongitudeFormatPipe_Factory() { return new LongitudeFormatPipe(); }, token: LongitudeFormatPipe, providedIn: "root" });
+    LongitudeFormatPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function LongitudeFormatPipe_Factory() { return new LongitudeFormatPipe(); }, token: LongitudeFormatPipe, providedIn: "root" });
     LongitudeFormatPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'longitudeFormat'
@@ -2438,7 +2638,7 @@
         };
         return NumberFormatPipe;
     }());
-    NumberFormatPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function NumberFormatPipe_Factory() { return new NumberFormatPipe(); }, token: NumberFormatPipe, providedIn: "root" });
+    NumberFormatPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function NumberFormatPipe_Factory() { return new NumberFormatPipe(); }, token: NumberFormatPipe, providedIn: "root" });
     NumberFormatPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'numberFormat'
@@ -2481,7 +2681,7 @@
         };
         return HighlightPipe;
     }());
-    HighlightPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function HighlightPipe_Factory() { return new HighlightPipe(); }, token: HighlightPipe, providedIn: "root" });
+    HighlightPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function HighlightPipe_Factory() { return new HighlightPipe(); }, token: HighlightPipe, providedIn: "root" });
     HighlightPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'highlight'
@@ -2549,7 +2749,7 @@
         { type: i0.Pipe, args: [{ name: 'fileSize' },] }
     ];
 
-    var moment$1 = momentImported__namespace;
+    var moment$6 = momentImported__namespace;
     var tz = momentTZImported__namespace;
     var DATE_UNIX_TIMESTAMP = 'X';
     var DATE_UNIX_MS_TIMESTAMP = 'x';
@@ -2627,32 +2827,32 @@
         if (!value || momentImported.isMoment(value))
             return value;
         // Parse the input value, as a ISO date time
-        var date = moment$1(value, DATE_ISO_PATTERN);
+        var 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;
-        var duration = moment$1.duration(value, unit);
+        var duration = moment$6.duration(value, unit);
         // fix 990+ ms
         if (duration.milliseconds() >= 990) {
             duration.add(1000 - duration.milliseconds(), 'ms');
@@ -2682,7 +2882,7 @@
         };
         return DurationPipe;
     }());
-    DurationPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function DurationPipe_Factory() { return new DurationPipe(i0.ɵɵinject(i1$2.TranslateService)); }, token: DurationPipe, providedIn: "root" });
+    DurationPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DurationPipe_Factory() { return new DurationPipe(i0__namespace.ɵɵinject(i1__namespace$1.TranslateService)); }, token: DurationPipe, providedIn: "root" });
     DurationPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'duration'
@@ -2706,7 +2906,7 @@
         };
         return MathAbsPipe;
     }());
-    MathAbsPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function MathAbsPipe_Factory() { return new MathAbsPipe(); }, token: MathAbsPipe, providedIn: "root" });
+    MathAbsPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function MathAbsPipe_Factory() { return new MathAbsPipe(); }, token: MathAbsPipe, providedIn: "root" });
     MathAbsPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'mathAbs'
@@ -2721,7 +2921,7 @@
         };
         return EvenPipe;
     }());
-    EvenPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function EvenPipe_Factory() { return new EvenPipe(); }, token: EvenPipe, providedIn: "root" });
+    EvenPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function EvenPipe_Factory() { return new EvenPipe(); }, token: EvenPipe, providedIn: "root" });
     EvenPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'even'
@@ -2736,7 +2936,7 @@
         };
         return OddPipe;
     }());
-    OddPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function OddPipe_Factory() { return new OddPipe(); }, token: OddPipe, providedIn: "root" });
+    OddPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function OddPipe_Factory() { return new OddPipe(); }, token: OddPipe, providedIn: "root" });
     OddPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'odd'
@@ -2868,7 +3068,7 @@
         };
         return MapGetPipe;
     }());
-    MapGetPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function MapGetPipe_Factory() { return new MapGetPipe(); }, token: MapGetPipe, providedIn: "root" });
+    MapGetPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function MapGetPipe_Factory() { return new MapGetPipe(); }, token: MapGetPipe, providedIn: "root" });
     MapGetPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'mapGet'
@@ -2885,7 +3085,7 @@
         };
         return MapKeysPipe;
     }());
-    MapKeysPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function MapKeysPipe_Factory() { return new MapKeysPipe(); }, token: MapKeysPipe, providedIn: "root" });
+    MapKeysPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function MapKeysPipe_Factory() { return new MapKeysPipe(); }, token: MapKeysPipe, providedIn: "root" });
     MapKeysPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'mapKeys'
@@ -2902,7 +3102,7 @@
         };
         return MapValuesPipe;
     }());
-    MapValuesPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function MapValuesPipe_Factory() { return new MapValuesPipe(); }, token: MapValuesPipe, providedIn: "root" });
+    MapValuesPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function MapValuesPipe_Factory() { return new MapValuesPipe(); }, token: MapValuesPipe, providedIn: "root" });
     MapValuesPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'mapValues'
@@ -2918,7 +3118,7 @@
         };
         return IsNotNilOrBlankPipe;
     }());
-    IsNotNilOrBlankPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function IsNotNilOrBlankPipe_Factory() { return new IsNotNilOrBlankPipe(); }, token: IsNotNilOrBlankPipe, providedIn: "root" });
+    IsNotNilOrBlankPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function IsNotNilOrBlankPipe_Factory() { return new IsNotNilOrBlankPipe(); }, token: IsNotNilOrBlankPipe, providedIn: "root" });
     IsNotNilOrBlankPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'isNotNilOrBlank'
@@ -2933,7 +3133,7 @@
         };
         return IsNilOrBlankPipe;
     }());
-    IsNilOrBlankPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function IsNilOrBlankPipe_Factory() { return new IsNilOrBlankPipe(); }, token: IsNilOrBlankPipe, providedIn: "root" });
+    IsNilOrBlankPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function IsNilOrBlankPipe_Factory() { return new IsNilOrBlankPipe(); }, token: IsNilOrBlankPipe, providedIn: "root" });
     IsNilOrBlankPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'isNilOrBlank'
@@ -2948,7 +3148,7 @@
         };
         return ToStringPipe;
     }());
-    ToStringPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function ToStringPipe_Factory() { return new ToStringPipe(); }, token: ToStringPipe, providedIn: "root" });
+    ToStringPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ToStringPipe_Factory() { return new ToStringPipe(); }, token: ToStringPipe, providedIn: "root" });
     ToStringPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'toString'
@@ -2963,7 +3163,7 @@
         };
         return StrLengthPipe;
     }());
-    StrLengthPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function StrLengthPipe_Factory() { return new StrLengthPipe(); }, token: StrLengthPipe, providedIn: "root" });
+    StrLengthPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function StrLengthPipe_Factory() { return new StrLengthPipe(); }, token: StrLengthPipe, providedIn: "root" });
     StrLengthPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'strLength'
@@ -2978,7 +3178,7 @@
         };
         return StrIncludesPipe;
     }());
-    StrIncludesPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function StrIncludesPipe_Factory() { return new StrIncludesPipe(); }, token: StrIncludesPipe, providedIn: "root" });
+    StrIncludesPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function StrIncludesPipe_Factory() { return new StrIncludesPipe(); }, token: StrIncludesPipe, providedIn: "root" });
     StrIncludesPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'strIncludes'
@@ -3069,7 +3269,7 @@
         };
         return TranslateContextService;
     }());
-    TranslateContextService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TranslateContextService_Factory() { return new TranslateContextService(i0.ɵɵinject(i1$2.TranslateService)); }, token: TranslateContextService, providedIn: "root" });
+    TranslateContextService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function TranslateContextService_Factory() { return new TranslateContextService(i0__namespace.ɵɵinject(i1__namespace$1.TranslateService)); }, token: TranslateContextService, providedIn: "root" });
     TranslateContextService.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
@@ -3126,7 +3326,7 @@
         };
         return PropertyGetPipe;
     }());
-    PropertyGetPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function PropertyGetPipe_Factory() { return new PropertyGetPipe(); }, token: PropertyGetPipe, providedIn: "root" });
+    PropertyGetPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function PropertyGetPipe_Factory() { return new PropertyGetPipe(); }, token: PropertyGetPipe, providedIn: "root" });
     PropertyGetPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'propertyGet'
@@ -3152,7 +3352,7 @@
         ngInit: [{ type: i0.Output }]
     };
 
-    var moment$2 = momentImported__namespace;
+    var moment$5 = momentImported__namespace;
     // @dynamic
     var SharedValidators = /** @class */ (function () {
         function SharedValidators() {
@@ -3235,7 +3435,7 @@
         };
         SharedValidators.validDate = function (control) {
             var value = control.value;
-            var date = !value || moment$2.isMoment(value) ? value : moment$2(control.value, DATE_ISO_PATTERN);
+            var date = !value || moment$5.isMoment(value) ? value : moment$5(control.value, DATE_ISO_PATTERN);
             if (date && (!date.isValid() || date.year() < 1970)) {
                 return { validDate: true };
             }
@@ -4442,7 +4642,7 @@
         };
         return FormErrorTranslator;
     }());
-    FormErrorTranslator.ɵprov = i0.ɵɵdefineInjectable({ factory: function FormErrorTranslator_Factory() { return new FormErrorTranslator(i0.ɵɵinject(i1$2.TranslateService), i0.ɵɵinject(APP_FORM_ERROR_I18N_KEYS, 8)); }, token: FormErrorTranslator, providedIn: "root" });
+    FormErrorTranslator.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function FormErrorTranslator_Factory() { return new FormErrorTranslator(i0__namespace.ɵɵinject(i1__namespace$1.TranslateService), i0__namespace.ɵɵinject(APP_FORM_ERROR_I18N_KEYS, 8)); }, token: FormErrorTranslator, providedIn: "root" });
     FormErrorTranslator.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
@@ -4527,7 +4727,7 @@
         };
         return FormGetPipe;
     }());
-    FormGetPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function FormGetPipe_Factory() { return new FormGetPipe(); }, token: FormGetPipe, providedIn: "root" });
+    FormGetPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function FormGetPipe_Factory() { return new FormGetPipe(); }, token: FormGetPipe, providedIn: "root" });
     FormGetPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'formGet'
@@ -4542,7 +4742,7 @@
         };
         return FormGetControlPipe;
     }());
-    FormGetControlPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function FormGetControlPipe_Factory() { return new FormGetControlPipe(); }, token: FormGetControlPipe, providedIn: "root" });
+    FormGetControlPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function FormGetControlPipe_Factory() { return new FormGetControlPipe(); }, token: FormGetControlPipe, providedIn: "root" });
     FormGetControlPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'formGetControl'
@@ -4557,7 +4757,7 @@
         };
         return FormGetArrayPipe;
     }());
-    FormGetArrayPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function FormGetArrayPipe_Factory() { return new FormGetArrayPipe(); }, token: FormGetArrayPipe, providedIn: "root" });
+    FormGetArrayPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function FormGetArrayPipe_Factory() { return new FormGetArrayPipe(); }, token: FormGetArrayPipe, providedIn: "root" });
     FormGetArrayPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'formGetArray'
@@ -4572,7 +4772,7 @@
         };
         return FormGetGroupPipe;
     }());
-    FormGetGroupPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function FormGetGroupPipe_Factory() { return new FormGetGroupPipe(); }, token: FormGetGroupPipe, providedIn: "root" });
+    FormGetGroupPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function FormGetGroupPipe_Factory() { return new FormGetGroupPipe(); }, token: FormGetGroupPipe, providedIn: "root" });
     FormGetGroupPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'formGetGroup'
@@ -4673,40 +4873,13 @@
                 },] }
     ];
 
-    /* ---
-     * Source: https://github.com/ionic-team/ionic-framework/blob/b0d53ca73619585671d8cf4dc24e47f826495a0a/core/src/utils/platform.ts
-     * --- */
-    var matchMedia = function (win, query) { return win.matchMedia(query).matches; };
-    var testUserAgent = function (win, expr) {
-        var userAgent = win.navigator.userAgent || win.navigator.vendor || window.opera;
-        return expr.test(userAgent);
-    };
-    var isWindows = function (win) { return testUserAgent(win, /windows/i); };
-    var isTouchUi = function (win) { return matchMedia(win, '(any-pointer:coarse)'); };
-    var isMobile = function (win) { return isTouchUi(win) && !isWindows(win); };
-    var isIpad = function (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;
-    };
-    var ɵ0$1 = isIpad;
-    var isIOS = function (win) { return testUserAgent(win, /iPhone|iPod/i) || isIpad(win); };
-    var isAndroid = function (win) { return testUserAgent(win, /android|sink/i); };
-    var isCordova = function (win) { return !!(win['cordova'] || win['phonegap'] || win['PhoneGap']); };
-
     // Import the core angular services.
     // ----------------------------------------------------------------------------------- //
     // ----------------------------------------------------------------------------------- //
     var BASE_TIMER_DELAY = 100;
     var AutofocusDirective = /** @class */ (function () {
         // I initialize the autofocus directive.
-        function AutofocusDirective(elementRef, keyboard) {
+        function AutofocusDirective(platform, elementRef, keyboard) {
             this.keyboard = keyboard;
             this._timer = null;
             this._elementRef = elementRef;
@@ -4783,6 +4956,7 @@
                 },] }
     ];
     AutofocusDirective.ctorParameters = function () { return [
+        { type: i1$5.Platform },
         { type: i0.ElementRef },
         { type: ngx.Keyboard, decorators: [{ type: i0.Optional }] }
     ]; };
@@ -4944,9 +5118,9 @@
         var hour = parseInt(durationParts[0] || '0');
         var minute = parseInt(durationParts[1] || '0');
         var 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) {
             var powDecimal = Math.pow(10, maxDecimals);
             return Math.trunc(input * powDecimal + 0.5) / powDecimal;
@@ -4970,18 +5144,17 @@
             DD: [/[+-]/, /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, '°']
         }
     };
-    var noop$1 = function () {
+    var noop$7 = function () {
     };
-    var ɵ0$2 = noop$1;
+    var ɵ0$a = noop$7;
     var MatLatLongField = /** @class */ (function () {
-        function MatLatLongField(platform, translate, formBuilder, cd, formGroupDir) {
-            this.platform = platform;
+        function MatLatLongField(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 rxjs.Subscription();
             this.disabling = false;
             this.writing = false;
@@ -4992,7 +5165,6 @@
             this.required = false;
             this.onBlur = new i0.EventEmitter();
             this.onFocus = new i0.EventEmitter();
-            this.mobile = this.platform.is('mobile');
         }
         Object.defineProperty(MatLatLongField.prototype, "disabled", {
             get: function () {
@@ -5014,6 +5186,7 @@
         });
         MatLatLongField.prototype.ngOnInit = function () {
             var _this = this;
+            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];
@@ -5278,7 +5451,6 @@
                 },] }
     ];
     MatLatLongField.ctorParameters = function () { return [
-        { type: i1$5.Platform },
         { type: i1$2.TranslateService },
         { type: i1.FormBuilder },
         { type: i0.ChangeDetectorRef },
@@ -5333,30 +5505,29 @@
                 },] }
     ];
 
-    var DEFAULT_VALUE_ACCESSOR = {
+    var DEFAULT_VALUE_ACCESSOR$5 = {
         provide: i1.NG_VALUE_ACCESSOR,
         useExisting: i0.forwardRef(function () { return MatDate; }),
         multi: true
     };
-    var DAY_MASK = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
-    var noop$2 = function () { };
-    var ɵ0$3 = noop$2;
+    var DAY_MASK$2 = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
+    var noop$6 = function () { };
+    var ɵ0$9 = noop$6;
     var MatDate = /** @class */ (function () {
-        function MatDate(platform, dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
-            this.platform = platform;
+        function MatDate(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 rxjs.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;
@@ -5400,11 +5571,12 @@
         });
         MatDate.prototype.ngOnInit = function () {
             var _this = this;
-            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 === i1.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 === i1.Validators.required) {
@@ -5679,14 +5851,13 @@
                     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: i0.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 = function () { return [
-        { type: i1$5.Platform },
         { type: i1$3.DateAdapter },
         { type: i1$2.TranslateService },
         { type: i1.FormBuilder },
@@ -5695,12 +5866,12 @@
         { type: i1.FormGroupDirective, decorators: [{ type: i0.Optional }] }
     ]; };
     MatDate.propDecorators = {
+        mobile: [{ type: i0.Input }],
         formControl: [{ type: i0.Input }],
         formControlName: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         floatLabel: [{ type: i0.Input }],
         required: [{ type: i0.Input }],
-        mobile: [{ type: i0.Input }],
         compact: [{ type: i0.Input }],
         placeholderChar: [{ type: i0.Input }],
         autofocus: [{ type: i0.Input }],
@@ -5714,33 +5885,32 @@
         matInputs: [{ type: i0.ViewChildren, args: ['matInput',] }]
     };
 
-    var DEFAULT_VALUE_ACCESSOR$1 = {
+    var DEFAULT_VALUE_ACCESSOR$4 = {
         provide: i1.NG_VALUE_ACCESSOR,
         useExisting: i0.forwardRef(function () { return MatDateTime; }),
         multi: true
     };
     var DAY_MASK$1 = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
     var HOUR_REGEXP = /^[012][0-9][:][012345][0-9]$/;
-    var HOUR_MASK = [/[012]/, /\d/, ':', /[012345]/, /\d/];
-    var noop$3 = function () { };
-    var ɵ0$4 = noop$3;
+    var HOUR_MASK$1 = [/[012]/, /\d/, ':', /[012345]/, /\d/];
+    var noop$5 = function () { };
+    var ɵ0$8 = noop$5;
     var MatDateTime = /** @class */ (function () {
-        function MatDateTime(platform, dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
-            this.platform = platform;
+        function MatDateTime(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 rxjs.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;
@@ -5783,11 +5953,12 @@
         });
         MatDateTime.prototype.ngOnInit = function () {
             var _this = this;
-            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 === i1.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 === i1.Validators.required) {
@@ -6098,14 +6269,13 @@
                     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: i0.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 = function () { return [
-        { type: i1$5.Platform },
         { type: i1$3.DateAdapter },
         { type: i1$2.TranslateService },
         { type: i1.FormBuilder },
@@ -6133,17 +6303,17 @@
         matInputs: [{ type: i0.ViewChildren, args: ['matInput',] }]
     };
 
-    var DEFAULT_VALUE_ACCESSOR$2 = {
+    var DEFAULT_VALUE_ACCESSOR$3 = {
         provide: i1.NG_VALUE_ACCESSOR,
         useExisting: i0.forwardRef(function () { return MatDateShort; }),
         multi: true
     };
-    var DAY_MASK$2 = [/\d/, /\d/, /\d/, /\d/];
+    var DAY_MASK = [/\d/, /\d/, /\d/, /\d/];
     var noop$4 = function () {
     };
-    var ɵ0$5 = noop$4;
+    var ɵ0$7 = noop$4;
     var MatDateShort = /** @class */ (function () {
-        function MatDateShort(platform, dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
+        function MatDateShort(dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
             this.dateAdapter = dateAdapter;
             this.translate = translate;
             this.formBuilder = formBuilder;
@@ -6154,16 +6324,13 @@
             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);
         }
         Object.defineProperty(MatDateShort.prototype, "tabindex", {
@@ -6192,6 +6359,9 @@
             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
             var $error = new rxjs.BehaviorSubject(null);
             this.required = toBoolean(this.required, this.formControl.validator === i1.Validators.required);
@@ -6431,14 +6601,13 @@
                     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: i0.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 = function () { return [
-        { type: i1$5.Platform },
         { type: i1$3.DateAdapter },
         { type: i1$2.TranslateService },
         { type: i1.FormBuilder },
@@ -6447,6 +6616,7 @@
         { type: i1.FormGroupDirective, decorators: [{ type: i0.Optional }] }
     ]; };
     MatDateShort.propDecorators = {
+        mobile: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         formControl: [{ type: i0.Input }],
         formControlName: [{ type: i0.Input }],
@@ -6502,16 +6672,16 @@
                 },] }
     ];
 
-    var DEFAULT_VALUE_ACCESSOR$3 = {
+    var DEFAULT_VALUE_ACCESSOR$2 = {
         provide: i1.NG_VALUE_ACCESSOR,
         useExisting: i0.forwardRef(function () { return MatDuration; }),
         multi: true
     };
     var HOUR_TIME_PATTERN = /[0-9]\d\d:[0-5]\d/;
-    var HOUR_MASK$1 = [/\d/, /\d/, /\d/, ':', /[0-5]/, /\d/];
-    var noop$5 = function () {
+    var HOUR_MASK = [/\d/, /\d/, /\d/, ':', /[0-5]/, /\d/];
+    var noop$3 = function () {
     };
-    var ɵ0$6 = noop$5;
+    var ɵ0$6 = noop$3;
     var MatDuration = /** @class */ (function () {
         function MatDuration(platform, dateAdapter, translate, formBuilder, cd, formGroupDir) {
             this.dateAdapter = dateAdapter;
@@ -6520,11 +6690,11 @@
             this.cd = cd;
             this.formGroupDir = formGroupDir;
             this._subscription = new rxjs.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;
@@ -6717,7 +6887,7 @@
                     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: i0.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%}"]
@@ -6777,22 +6947,22 @@
                 },] }
     ];
 
-    var DEFAULT_VALUE_ACCESSOR$4 = {
+    var DEFAULT_VALUE_ACCESSOR$1 = {
         provide: i1.NG_VALUE_ACCESSOR,
         useExisting: i0.forwardRef(function () { return MatBooleanField; }),
         multi: true
     };
-    var noop$6 = function () {
+    var noop$2 = function () {
     };
-    var ɵ0$7 = noop$6;
+    var ɵ0$5 = noop$2;
     var MatBooleanField = /** @class */ (function () {
         function MatBooleanField(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;
@@ -6967,7 +7137,7 @@
                     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: i0.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}"]
@@ -7054,6 +7224,7 @@
         return MatNumpadEvent;
     }(KeyboardEvent));
 
+    exports.AnimationState = void 0;
     (function (AnimationState) {
         AnimationState["ENTER"] = "enter";
         AnimationState["ENTER_INPUT"] = "enter-input";
@@ -7221,7 +7392,7 @@
         };
         return MatNumpadDomService;
     }());
-    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$4.DOCUMENT, 8)); }, token: MatNumpadDomService, providedIn: "root" });
+    MatNumpadDomService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function MatNumpadDomService_Factory() { return new MatNumpadDomService(i0__namespace.ɵɵinject(i0__namespace.ComponentFactoryResolver), i0__namespace.ɵɵinject(i0__namespace.ApplicationRef), i0__namespace.ɵɵinject(i0__namespace.INJECTOR), i0__namespace.ɵɵinject(i1__namespace$3.DOCUMENT, 8)); }, token: MatNumpadDomService, providedIn: "root" });
     MatNumpadDomService.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root'
@@ -7627,7 +7798,7 @@
                 },] }
     ];
 
-    var DEFAULT_VALUE_ACCESSOR$5 = {
+    var DEFAULT_VALUE_ACCESSOR = {
         provide: i1.NG_VALUE_ACCESSOR,
         useExisting: i0.forwardRef(function () { return MatSwipeField; }),
         multi: true
@@ -7947,7 +8118,7 @@
         { type: i0.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: i0.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}"]
                 },] }
@@ -8008,14 +8179,14 @@
                 },] }
     ];
 
-    var noop$7 = function () { };
-    var ɵ0$8 = noop$7;
+    var noop$1 = function () { };
+    var ɵ0$4 = noop$1;
     var MatChipsField = /** @class */ (function () {
         function MatChipsField(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;
@@ -8174,9 +8345,9 @@
                 // - if label then col size = 2
                 // - if rankOrder then col size = 1
                 // - ese => auto size
-                || this.displayAttributes.map(function (attr) { return (attr && attr.endsWith('label')) ? 2
-                    : ((attr && attr.endsWith('rankOrder')) ? 1
-                        : undefined); });
+                || this.displayAttributes.map(function (attr) { return attr && (attr.endsWith('label') ? 3
+                    : (attr.endsWith('rankOrder') ? 2
+                        : undefined)); });
             this.displayColumnNames = this.displayAttributes.map(function (attr, index) { return _this.displayColumnNames && _this.displayColumnNames[index] ||
                 (_this.i18nPrefix + changeCaseToUnderscore(attr).toUpperCase()); });
             this.mobile = toBoolean(this.mobile, false);
@@ -8195,8 +8366,8 @@
             if (!this.suggestFn) {
                 var suggestFromArrayFn_1 = function (value, filter) { return __awaiter(_this, void 0, void 0, function () {
                     return __generator(this, function (_c) {
-                        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 [2 /*return*/, suggestFromArray(this.$inputItems.value, value, Object.assign({ searchAttributes: this.displayAttributes }, filter))];
                     });
                 }); };
@@ -8206,13 +8377,13 @@
                         switch (_c.label) {
                             case 0:
                                 if (!isNil(this.$inputItems.value)) return [3 /*break*/, 2];
-                                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...');
                                 return [4 /*yield*/, firstNotNilPromise(this.$inputItems)];
                             case 1:
+                                // DEBUG
+                                //if (this.debug) console.debug('[mat-chips] Waiting items to be set...');
                                 _c.sent();
-                                if (this.debug)
-                                    console.debug('[mat-chips] Received items:', this.$inputItems.value);
                                 _c.label = 2;
                             case 2:
                                 this.suggestFn = suggestFromArrayFn_1;
@@ -8244,9 +8415,7 @@
             ), 
             // Object set: use it (no distinctUntilChanged() pipe need)
             this.inputControl.valueChanges
-                .pipe(operators.startWith(this.inputControl.value), operators.filter(function (value) { return isNotNil(value) && typeof value === 'object'; }), 
-            // DEBUG
-            operators.tap(function (value) { return _this.debug && console.debug(_this.logPrefix + ' Received an object value: ', value); })), 
+                .pipe(operators.startWith(this.inputControl.value), operators.filter(function (value) { return isNotNil(value) && typeof value === 'object'; })), 
             // On dropdown button click (no distinctUntilChanged(), nor debounceTime)
             this.dropButtonClick
                 .pipe(operators.filter(function (event) { return _this.enabled && (!event || !event.defaultPrevented); }), operators.tap(function (_) { return _this.matInputText.nativeElement.focus(); }), operators.map(function (_) { return _this.showAllOnFocus ? '*' : _this.formControl.value; }), 
@@ -8319,6 +8488,7 @@
                     _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
@@ -8329,6 +8499,7 @@
                 .subscribe(function () { return _this.checkIfTouched(); }));
             this._subscription.add(this.keydownEscape.subscribe(function (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
@@ -8416,8 +8587,8 @@
                 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);
             }
@@ -8450,15 +8621,17 @@
                 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');
             var 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;
             }
@@ -8473,11 +8646,12 @@
                 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);
@@ -8634,7 +8808,7 @@
         { type: i0.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: i1.NG_VALUE_ACCESSOR,
                             multi: true,
@@ -8983,7 +9157,7 @@
         };
         return ProgressBarService;
     }());
-    ProgressBarService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ProgressBarService_Factory() { return new ProgressBarService(); }, token: ProgressBarService, providedIn: "root" });
+    ProgressBarService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ProgressBarService_Factory() { return new ProgressBarService(); }, token: ProgressBarService, providedIn: "root" });
     ProgressBarService.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
@@ -9030,7 +9204,7 @@
         };
         return AppGestureConfig;
     }(i1$6.HammerGestureConfig));
-    AppGestureConfig.ɵprov = i0.ɵɵdefineInjectable({ factory: function AppGestureConfig_Factory() { return new AppGestureConfig(); }, token: AppGestureConfig, providedIn: "root" });
+    AppGestureConfig.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function AppGestureConfig_Factory() { return new AppGestureConfig(); }, token: AppGestureConfig, providedIn: "root" });
     AppGestureConfig.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
@@ -9297,7 +9471,7 @@
         };
         return MatPaginatorI18n;
     }(paginator.MatPaginatorIntl));
-    MatPaginatorI18n.ɵprov = i0.ɵɵdefineInjectable({ factory: function MatPaginatorI18n_Factory() { return new MatPaginatorI18n(i0.ɵɵinject(i1$2.TranslateService)); }, token: MatPaginatorI18n, providedIn: "root" });
+    MatPaginatorI18n.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function MatPaginatorI18n_Factory() { return new MatPaginatorI18n(i0__namespace.ɵɵinject(i1__namespace$1.TranslateService)); }, token: MatPaginatorI18n, providedIn: "root" });
     MatPaginatorI18n.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
@@ -9389,17 +9563,17 @@
         return rgbArrayToHex(rgb.map(function (v) { return 255 - v; }));
     }
 
-    var noop$8 = function () {
+    var noop = function () {
     };
-    var ɵ0$9 = noop$8;
+    var ɵ0$3 = noop;
     var AppFormField = /** @class */ (function () {
         function AppFormField(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';
@@ -9957,7 +10131,7 @@
         };
         return AudioProvider;
     }(StartableService));
-    AudioProvider.ɵprov = i0.ɵɵdefineInjectable({ factory: function AudioProvider_Factory() { return new AudioProvider(i0.ɵɵinject(i1$5.Platform), i0.ɵɵinject(i2$2.NativeAudio, 8), i0.ɵɵinject(i3$1.Vibration, 8), i0.ɵɵinject(i4.AudioManagement, 8)); }, token: AudioProvider, providedIn: "root" });
+    AudioProvider.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function AudioProvider_Factory() { return new AudioProvider(i0__namespace.ɵɵinject(i1__namespace$4.Platform), i0__namespace.ɵɵinject(i2__namespace.NativeAudio, 8), i0__namespace.ɵɵinject(i3__namespace.Vibration, 8), i0__namespace.ɵɵinject(i4__namespace.AudioManagement, 8)); }, token: AudioProvider, providedIn: "root" });
     AudioProvider.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
@@ -10067,7 +10241,7 @@
         };
         return Hotkeys;
     }());
-    Hotkeys.ɵprov = i0.ɵɵdefineInjectable({ factory: function Hotkeys_Factory() { return new Hotkeys(i0.ɵɵinject(i1$6.EventManager), i0.ɵɵinject(i2.MatDialog), i0.ɵɵinject(i1$4.DOCUMENT), i0.ɵɵinject(i1$5.ModalController), i0.ɵɵinject(i1$5.PopoverController)); }, token: Hotkeys, providedIn: "root" });
+    Hotkeys.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function Hotkeys_Factory() { return new Hotkeys(i0__namespace.ɵɵinject(i1__namespace$5.EventManager), i0__namespace.ɵɵinject(i2__namespace$1.MatDialog), i0__namespace.ɵɵinject(i1__namespace$3.DOCUMENT), i0__namespace.ɵɵinject(i1__namespace$4.ModalController), i0__namespace.ɵɵinject(i1__namespace$4.PopoverController)); }, token: Hotkeys, providedIn: "root" });
     Hotkeys.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root'
@@ -10272,7 +10446,7 @@
         return Base64ImageReader;
     }());
 
-    var uuidv4 = uuidv4Imported__namespace;
+    var uuidv4$1 = uuidv4Imported__namespace;
     var FileService = /** @class */ (function () {
         function FileService(platform, 
         //private transfer: FileTransfer,
@@ -10318,7 +10492,7 @@
                             lastSlashIndex = source.lastIndexOf('/');
                             if (lastSlashIndex === -1)
                                 throw new Error('Invalid URL: ' + source);
-                            fileName = lastSlashIndex < (source.length - 1) && source.substring(lastSlashIndex + 1) || uuidv4();
+                            fileName = lastSlashIndex < (source.length - 1) && source.substring(lastSlashIndex + 1) || uuidv4$1();
                             if (!(responseType === 'file' && this.canUseFileSystem)) return [3 /*break*/, 4];
                             console.warn("WARN: [file] Fetching image {" + source + "} in local file...");
                             targetFilePath = this._imageDirectory + fileName;
@@ -10381,7 +10555,7 @@
         };
         return FileService;
     }());
-    FileService.ɵprov = i0.ɵɵdefineInjectable({ factory: function FileService_Factory() { return new FileService(i0.ɵɵinject(i1$5.Platform), i0.ɵɵinject(i2$1.HttpClient), i0.ɵɵinject(ENVIRONMENT)); }, token: FileService, providedIn: "root" });
+    FileService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function FileService_Factory() { return new FileService(i0__namespace.ɵɵinject(i1__namespace$4.Platform), i0__namespace.ɵɵinject(i2__namespace$2.HttpClient), i0__namespace.ɵɵinject(ENVIRONMENT)); }, token: FileService, providedIn: "root" });
     FileService.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root',
@@ -10548,7 +10722,7 @@
     Base58.alphabet = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz';
 
     var scrypt = require('scrypt-async');
-    var sha256 = require('hash.js/lib/hash/sha/256');
+    var sha256$1 = require('hash.js/lib/hash/sha/256');
     var sha512 = require('hash.js/lib/hash/sha/512');
     var nacl = {
         sign: tweetnacl.sign,
@@ -10654,7 +10828,7 @@
          * Hash (using SHA256) a message
          */
         CryptoService.prototype.sha256 = function (message) {
-            return sha256().update(message).digest('hex');
+            return sha256$1().update(message).digest('hex');
         };
         /**
          * Hash (using SHA512) a message
@@ -10668,7 +10842,7 @@
         };
         return CryptoService;
     }());
-    CryptoService.ɵprov = i0.ɵɵdefineInjectable({ factory: function CryptoService_Factory() { return new CryptoService(); }, token: CryptoService, providedIn: "root" });
+    CryptoService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function CryptoService_Factory() { return new CryptoService(); }, token: CryptoService, providedIn: "root" });
     CryptoService.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
@@ -11198,109 +11372,6 @@
         EntityClass({ typename: 'PeerVO' })
     ], exports.Peer);
 
-    // import the required animation functions from the angular animations module
-    var fadeInAnimation = 
-    // trigger name for attaching this animation to an element using the [@triggerName] syntax
-    animations.trigger('fadeInAnimation', [
-        // route 'enter' transition
-        animations.transition(':enter', [
-            // css styles at start of transition
-            animations.style({ opacity: 0 }),
-            // animation and styles at end of transition
-            animations.animate('.3s', animations.style({ opacity: 1 }))
-        ]),
-    ]);
-    var fadeInOutAnimation = 
-    // trigger name for attaching this animation to an element using the [@triggerName] syntax
-    animations.trigger('fadeInOutAnimation', [
-        // route 'enter' transition
-        animations.transition(':enter', [
-            // css styles at start of transition
-            animations.style({ opacity: 0 }),
-            // animation and styles at end of transition
-            animations.animate('.3s', animations.style({ opacity: 1 }))
-        ]),
-        // route 'leave' transition
-        animations.transition(':leave', [
-            // animation and styles at end of transition
-            animations.animate('.5s ease-in-out', animations.style({
-                opacity: 0
-            }))
-        ]),
-    ]);
-    var slideInOutAnimation = 
-    // trigger name for attaching this animation to an element using the [@triggerName] syntax
-    animations.trigger('slideInOutAnimation', [
-        // end state styles for route container (host)
-        animations.state('*', animations.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
-        animations.transition(':enter', [
-            // styles at start of transition
-            animations.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
-            animations.animate('.3s ease-in-out', animations.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
-        animations.transition(':leave', [
-            // animation and styles at end of transition
-            animations.animate('.5s ease-in-out', animations.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
-            }))
-        ])
-    ]);
-    var slideUpDownAnimation = 
-    // trigger name for attaching this animation to an element using the [@triggerName] syntax
-    animations.trigger('slideUpDownAnimation', [
-        // end state styles for route container (host)
-        animations.state('*', animations.style({
-            transform: 'translateY(0)',
-            opacity: 1
-        })),
-        // route 'enter' transition
-        animations.transition(':enter', [
-            // styles at start of transition
-            animations.style({
-                transform: 'translateY(-400%)',
-                opacity: 0
-            }),
-            // animation and styles at end of transition
-            animations.animate('.3s ease-in-out', animations.style({
-                transform: 'translateY(0)',
-                opacity: 1
-            }))
-        ]),
-        // route 'leave' transition
-        animations.transition(':leave', [
-            // animation and styles at end of transition
-            animations.animate('.5s ease-in-out', animations.style({
-                transform: 'translateY(-100%)',
-                opacity: 0
-            }))
-        ])
-    ]);
-
     var HttpUtils = /** @class */ (function () {
         function HttpUtils() {
         }
@@ -11641,7 +11712,7 @@
         onRefresh: [{ type: i0.Input }]
     };
 
-    var moment$3 = momentImported__namespace;
+    var moment$4 = momentImported__namespace;
     var SETTINGS_STORAGE_KEY = 'settings';
     var SETTINGS_TRANSIENT_PROPERTIES = ['mobile', 'touchUi' /*deprecated*/];
     // fixme: this constant points to static environment
@@ -11729,7 +11800,7 @@
         LocalSettingsService.prototype.ngOnStart = function () {
             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();
@@ -11943,11 +12014,11 @@
             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);
         };
@@ -12141,7 +12212,7 @@
             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) {
                 var tagIndex = page.title.indexOf('</small>');
@@ -12158,7 +12229,7 @@
         };
         return LocalSettingsService;
     }(StartableService));
-    LocalSettingsService.ɵprov = i0.ɵɵdefineInjectable({ factory: function LocalSettingsService_Factory() { return new LocalSettingsService(i0.ɵɵinject(i1$2.TranslateService), i0.ɵɵinject(i1$5.Platform), i0.ɵɵinject(i3$2.Storage), i0.ɵɵinject(ENVIRONMENT), i0.ɵɵinject(APP_LOCAL_SETTINGS, 8), i0.ɵɵinject(APP_LOCAL_SETTINGS_OPTIONS, 8)); }, token: LocalSettingsService, providedIn: "root" });
+    LocalSettingsService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function LocalSettingsService_Factory() { return new LocalSettingsService(i0__namespace.ɵɵinject(i1__namespace$1.TranslateService), i0__namespace.ɵɵinject(i1__namespace$4.Platform), i0__namespace.ɵɵinject(i3__namespace$1.Storage), i0__namespace.ɵɵinject(ENVIRONMENT), i0__namespace.ɵɵinject(APP_LOCAL_SETTINGS, 8), i0__namespace.ɵɵinject(APP_LOCAL_SETTINGS_OPTIONS, 8)); }, token: LocalSettingsService, providedIn: "root" });
     LocalSettingsService.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root',
@@ -13039,7 +13110,7 @@
         };
         return NetworkService;
     }(StartableService));
-    NetworkService.ɵprov = i0.ɵɵdefineInjectable({ factory: function NetworkService_Factory() { return new NetworkService(i0.ɵɵinject(i1$4.DOCUMENT), i0.ɵɵinject(i1$5.Platform), i0.ɵɵinject(i1$5.ModalController), i0.ɵɵinject(CryptoService), i0.ɵɵinject(i3$2.Storage), i0.ɵɵinject(LocalSettingsService), i0.ɵɵinject(i6.CacheService), i0.ɵɵinject(i2$1.HttpClient), i0.ɵɵinject(ENVIRONMENT), i0.ɵɵinject(i9.Network, 8), i0.ɵɵinject(i10.SplashScreen, 8), i0.ɵɵinject(i1$2.TranslateService, 8), i0.ɵɵinject(i1$5.ToastController, 8)); }, token: NetworkService, providedIn: "root" });
+    NetworkService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function NetworkService_Factory() { return new NetworkService(i0__namespace.ɵɵinject(i1__namespace$3.DOCUMENT), i0__namespace.ɵɵinject(i1__namespace$4.Platform), i0__namespace.ɵɵinject(i1__namespace$4.ModalController), i0__namespace.ɵɵinject(CryptoService), i0__namespace.ɵɵinject(i3__namespace$1.Storage), i0__namespace.ɵɵinject(LocalSettingsService), i0__namespace.ɵɵinject(i6__namespace.CacheService), i0__namespace.ɵɵinject(i2__namespace$2.HttpClient), i0__namespace.ɵɵinject(ENVIRONMENT), i0__namespace.ɵɵinject(i9__namespace.Network, 8), i0__namespace.ɵɵinject(i10__namespace.SplashScreen, 8), i0__namespace.ɵɵinject(i1__namespace$1.TranslateService, 8), i0__namespace.ɵɵinject(i1__namespace$4.ToastController, 8)); }, token: NetworkService, providedIn: "root" });
     NetworkService.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
@@ -13059,7 +13130,7 @@
         { type: i1$5.ToastController, decorators: [{ type: i0.Optional }] }
     ]; };
 
-    var ErrorCodes = {
+    var ErrorCodes$2 = {
         UNKNOWN_ERROR: 0,
         LOAD_ACCOUNT_ERROR: 1,
         BAD_PASSWORD: 2,
@@ -13476,7 +13547,7 @@
                         case 13:
                             err_1 = _b.sent();
                             console.error(err_1);
-                            throw { code: ErrorCodes.ENTITY_STORAGE_MIGRATION_FAILED, message: 'ERROR.ENTITY_STORAGE_MIGRATION_FAILED', details: err_1 };
+                            throw { code: ErrorCodes$2.ENTITY_STORAGE_MIGRATION_FAILED, message: 'ERROR.ENTITY_STORAGE_MIGRATION_FAILED', details: err_1 };
                         case 14:
                             // Emit update event
                             if (!opts || opts.emitEvent !== false) {
@@ -14253,7 +14324,7 @@
     }(StartableService));
     EntitiesStorage.TRASH_PREFIX = 'Trash#';
     EntitiesStorage.REMOTE_PREFIX = 'Remote#';
-    EntitiesStorage.ɵprov = i0.ɵɵdefineInjectable({ factory: function EntitiesStorage_Factory() { return new EntitiesStorage(i0.ɵɵinject(i1$5.Platform), i0.ɵɵinject(ProgressBarService), i0.ɵɵinject(i3$2.Storage), i0.ɵɵinject(ENVIRONMENT), i0.ɵɵinject(APP_LOCAL_STORAGE_TYPE_POLICIES, 8)); }, token: EntitiesStorage, providedIn: "root" });
+    EntitiesStorage.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function EntitiesStorage_Factory() { return new EntitiesStorage(i0__namespace.ɵɵinject(i1__namespace$4.Platform), i0__namespace.ɵɵinject(ProgressBarService), i0__namespace.ɵɵinject(i3__namespace$1.Storage), i0__namespace.ɵɵinject(ENVIRONMENT), i0__namespace.ɵɵinject(APP_LOCAL_STORAGE_TYPE_POLICIES, 8)); }, token: EntitiesStorage, providedIn: "root" });
     EntitiesStorage.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
@@ -14409,10 +14480,10 @@
     function referentialsToString(values, properties, separator) {
         return (values || []).map(function (v) { return referentialToString(v, properties); }).join(separator || ', ');
     }
-    var ɵ0$a = StatusIds.ENABLE, ɵ1 = StatusIds.DISABLE, ɵ2 = StatusIds.TEMPORARY;
+    var ɵ0$2 = StatusIds.ENABLE, ɵ1 = StatusIds.DISABLE, ɵ2 = StatusIds.TEMPORARY;
     var StatusList = Object.freeze([
         {
-            id: ɵ0$a,
+            id: ɵ0$2,
             icon: 'checkmark',
             label: 'REFERENTIAL.STATUS_ENUM.ENABLE'
         },
@@ -14715,7 +14786,7 @@
                 (data.lastName || '')) || '';
     }
 
-    var uuidv4$1 = uuidv4Imported__namespace;
+    var uuidv4 = uuidv4Imported__namespace;
     var _global = typeof global !== 'undefined' ? global : (typeof window !== 'undefined' ? window : {});
     var NativeWebSocket = _global.WebSocket || _global.MozWebSocket;
     /**
@@ -14759,7 +14830,7 @@
             // Skip if not tracked
             if (!context || !context.tracked)
                 return forward(operation);
-            var id = context.serializationKey || uuidv4$1();
+            var id = context.serializationKey || uuidv4();
             console.debug("[apollo-tracker-link] Watching tracked query {" + operation.operationName + "#" + id + "}");
             // Clean context, before calling JSON.stringify (remove unused attributes)
             var cleanContext = Object.assign(Object.assign({}, context), { optimisticResponse: null, cache: null });
@@ -15333,7 +15404,7 @@
                         case 1:
                             _a.sent();
                             console.info('[graphql] Starting graphql...');
-                            mobile = this.platform.is('mobile') || this.platform.is('mobileweb');
+                            mobile = isMobile(window);
                             enableTrackMutationQueries = !mobile;
                             peer = this.network.peer;
                             if (!peer)
@@ -15390,14 +15461,14 @@
                             mutationLinks = void 0;
                             // Add queue to store tracked queries, when offline
                             if (enableTrackMutationQueries) {
-                                serializingLink = new SerializingLink__default['default']();
+                                serializingLink = new SerializingLink__default["default"]();
                                 trackerLink = createTrackerLink({
                                     storage: storage,
                                     onNetworkStatusChange: this._networkStatusChanged$,
                                     debounce: 1000,
                                     debug: true
                                 });
-                                queueLink_1 = new QueueLink__default['default']();
+                                queueLink_1 = new QueueLink__default["default"]();
                                 this.registerSubscription(this._networkStatusChanged$
                                     .subscribe(function (type) {
                                     // Network is offline: start buffering into queue
@@ -15412,7 +15483,7 @@
                                     }
                                 }));
                                 mutationLinks = [
-                                    loggerLink__default['default'],
+                                    loggerLink__default["default"],
                                     queueLink_1,
                                     trackerLink,
                                     queueLink_1,
@@ -15519,7 +15590,7 @@
             (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)
@@ -15527,7 +15598,7 @@
                 || (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);
             }
@@ -15563,7 +15634,7 @@
                     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';
@@ -15595,7 +15666,7 @@
         };
         return GraphqlService;
     }(StartableService));
-    GraphqlService.ɵprov = i0.ɵɵdefineInjectable({ factory: function GraphqlService_Factory() { return new GraphqlService(i0.ɵɵinject(i1$5.Platform), i0.ɵɵinject(i2$3.Apollo), i0.ɵɵinject(i3$3.HttpLink), i0.ɵɵinject(NetworkService), i0.ɵɵinject(i3$2.Storage), i0.ɵɵinject(CryptoService), i0.ɵɵinject(ENVIRONMENT), i0.ɵɵinject(APP_GRAPHQL_TYPE_POLICIES, 8)); }, token: GraphqlService, providedIn: "root" });
+    GraphqlService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function GraphqlService_Factory() { return new GraphqlService(i0__namespace.ɵɵinject(i1__namespace$4.Platform), i0__namespace.ɵɵinject(i2__namespace$3.Apollo), i0__namespace.ɵɵinject(i3__namespace$2.HttpLink), i0__namespace.ɵɵinject(NetworkService), i0__namespace.ɵɵinject(i3__namespace$1.Storage), i0__namespace.ɵɵinject(CryptoService), i0__namespace.ɵɵinject(ENVIRONMENT), i0__namespace.ɵɵinject(APP_GRAPHQL_TYPE_POLICIES, 8)); }, token: GraphqlService, providedIn: "root" });
     GraphqlService.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root'
@@ -15612,7 +15683,7 @@
         { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [APP_GRAPHQL_TYPE_POLICIES,] }] }
     ]; };
 
-    var sha256$1 = require('hash.js/lib/hash/sha/256');
+    var sha256 = require('hash.js/lib/hash/sha/256');
     var BaseGraphqlServiceOptions = /** @class */ (function () {
         function BaseGraphqlServiceOptions() {
         }
@@ -15782,8 +15853,8 @@
         };
         /* -- protected methods -- */
         BaseGraphqlService.prototype.computeMutableWatchQueryId = function (opts) {
-            var queryName = opts.queryName || sha256$1().update(JSON.stringify(opts.query)).digest('hex').substring(0, 8);
-            var variablesKey = opts.variables && sha256$1().update(JSON.stringify(opts.variables)).digest('hex').substring(0, 8) || '';
+            var queryName = opts.queryName || sha256().update(JSON.stringify(opts.query)).digest('hex').substring(0, 8);
+            var variablesKey = opts.variables && sha256().update(JSON.stringify(opts.variables)).digest('hex').substring(0, 8) || '';
             return [queryName, opts.arrayFieldName, variablesKey].join('|');
         };
         BaseGraphqlService.prototype.findMutableWatchQueries = function (opts) {
@@ -15856,19 +15927,19 @@
     /* ------------------------------------
      * GraphQL queries
      * ------------------------------------*/
-    var Fragments = {
-        account: core.gql(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    fragment AccountFragment on AccountVO {\n      id\n      firstName\n      lastName\n      email\n      pubkey\n      avatar\n      statusId\n      updateDate\n      creationDate\n      profiles\n      settings {\n        ...UserSettingsFragment\n      }\n      department {\n        id\n        label\n        name\n        __typename\n      }\n      __typename\n    }"], ["\n    fragment AccountFragment on AccountVO {\n      id\n      firstName\n      lastName\n      email\n      pubkey\n      avatar\n      statusId\n      updateDate\n      creationDate\n      profiles\n      settings {\n        ...UserSettingsFragment\n      }\n      department {\n        id\n        label\n        name\n        __typename\n      }\n      __typename\n    }"]))),
-        settings: core.gql(templateObject_2 || (templateObject_2 = __makeTemplateObject(["fragment UserSettingsFragment on UserSettingsVO {\n    id\n    locale\n    latLongFormat\n    content\n    nonce\n    updateDate\n    __typename\n  }"], ["fragment UserSettingsFragment on UserSettingsVO {\n    id\n    locale\n    latLongFormat\n    content\n    nonce\n    updateDate\n    __typename\n  }"])))
+    var Fragments$1 = {
+        account: core.gql(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n    fragment AccountFragment on AccountVO {\n      id\n      firstName\n      lastName\n      email\n      pubkey\n      avatar\n      statusId\n      updateDate\n      creationDate\n      profiles\n      settings {\n        ...UserSettingsFragment\n      }\n      department {\n        id\n        label\n        name\n        __typename\n      }\n      __typename\n    }"], ["\n    fragment AccountFragment on AccountVO {\n      id\n      firstName\n      lastName\n      email\n      pubkey\n      avatar\n      statusId\n      updateDate\n      creationDate\n      profiles\n      settings {\n        ...UserSettingsFragment\n      }\n      department {\n        id\n        label\n        name\n        __typename\n      }\n      __typename\n    }"]))),
+        settings: core.gql(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["fragment UserSettingsFragment on UserSettingsVO {\n    id\n    locale\n    latLongFormat\n    content\n    nonce\n    updateDate\n    __typename\n  }"], ["fragment UserSettingsFragment on UserSettingsVO {\n    id\n    locale\n    latLongFormat\n    content\n    nonce\n    updateDate\n    __typename\n  }"])))
     };
     // Load account query
-    var LoadQuery = core.gql(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  query Account {\n    data: account {\n      ...AccountFragment\n    }\n  }\n  ", "\n  ", "\n"], ["\n  query Account {\n    data: account {\n      ...AccountFragment\n    }\n  }\n  ", "\n  ", "\n"])), Fragments.account, Fragments.settings);
+    var LoadQuery$1 = core.gql(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  query Account {\n    data: account {\n      ...AccountFragment\n    }\n  }\n  ", "\n  ", "\n"], ["\n  query Account {\n    data: account {\n      ...AccountFragment\n    }\n  }\n  ", "\n  ", "\n"])), Fragments$1.account, Fragments$1.settings);
     // Check email query
-    var IsEmailExistsQuery = core.gql(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  query IsEmailExists($email: String, $hash: String){\n    isEmailExists(email: $email, hash: $hash)\n  }\n"], ["\n  query IsEmailExists($email: String, $hash: String){\n    isEmailExists(email: $email, hash: $hash)\n  }\n"])));
+    var IsEmailExistsQuery = core.gql(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  query IsEmailExists($email: String, $hash: String){\n    isEmailExists(email: $email, hash: $hash)\n  }\n"], ["\n  query IsEmailExists($email: String, $hash: String){\n    isEmailExists(email: $email, hash: $hash)\n  }\n"])));
     // Save (create or update) account mutation
     var AccountMutations = {
-        save: core.gql(templateObject_5 || (templateObject_5 = __makeTemplateObject([" mutation SaveAccount($data:AccountVOInput){\n    data: saveAccount(account: $data){\n      ...AccountFragment\n    }\n  }\n  ", "\n  ", ""], [" mutation SaveAccount($data:AccountVOInput){\n    data: saveAccount(account: $data){\n      ...AccountFragment\n    }\n  }\n  ", "\n  ", ""])), Fragments.account, Fragments.settings),
-        create: core.gql(templateObject_6 || (templateObject_6 = __makeTemplateObject(["mutation CreateAccount($data:AccountVOInput){\n    data: createAccount(account: $data){\n      ...AccountFragment\n    }\n  }\n  ", "\n  ", ""], ["mutation CreateAccount($data:AccountVOInput){\n    data: createAccount(account: $data){\n      ...AccountFragment\n    }\n  }\n  ", "\n  ", ""])), Fragments.account, Fragments.settings),
-        saveSettings: core.gql(templateObject_7 || (templateObject_7 = __makeTemplateObject(["mutation SaveSettings($data:UserSettingsVOInput){\n    data: saveSettings(settings: $data){\n      ...UserSettingsFragment\n    }\n  }\n  ", ""], ["mutation SaveSettings($data:UserSettingsVOInput){\n    data: saveSettings(settings: $data){\n      ...UserSettingsFragment\n    }\n  }\n  ", ""])), Fragments.settings)
+        save: core.gql(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject([" mutation SaveAccount($data:AccountVOInput){\n    data: saveAccount(account: $data){\n      ...AccountFragment\n    }\n  }\n  ", "\n  ", ""], [" mutation SaveAccount($data:AccountVOInput){\n    data: saveAccount(account: $data){\n      ...AccountFragment\n    }\n  }\n  ", "\n  ", ""])), Fragments$1.account, Fragments$1.settings),
+        create: core.gql(templateObject_6 || (templateObject_6 = __makeTemplateObject(["mutation CreateAccount($data:AccountVOInput){\n    data: createAccount(account: $data){\n      ...AccountFragment\n    }\n  }\n  ", "\n  ", ""], ["mutation CreateAccount($data:AccountVOInput){\n    data: createAccount(account: $data){\n      ...AccountFragment\n    }\n  }\n  ", "\n  ", ""])), Fragments$1.account, Fragments$1.settings),
+        saveSettings: core.gql(templateObject_7 || (templateObject_7 = __makeTemplateObject(["mutation SaveSettings($data:UserSettingsVOInput){\n    data: saveSettings(settings: $data){\n      ...UserSettingsFragment\n    }\n  }\n  ", ""], ["mutation SaveSettings($data:UserSettingsVOInput){\n    data: saveSettings(settings: $data){\n      ...UserSettingsFragment\n    }\n  }\n  ", ""])), Fragments$1.settings)
     };
     // Sent confirmation email
     var SendConfirmEmailMutation = core.gql(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  mutation sendAccountConfirmationEmail($email:String, $locale:String){\n    sendAccountConfirmationEmail(email: $email, locale: $locale)\n  }\n"], ["\n  mutation sendAccountConfirmationEmail($email:String, $locale:String){\n    sendAccountConfirmationEmail(email: $email, locale: $locale)\n  }\n"])));
@@ -16236,7 +16307,7 @@
                             error_3 = _b.sent();
                             console.error(error_3);
                             this.resetData();
-                            throw { code: ErrorCodes.UNKNOWN_ERROR, message: 'ERROR.SCRYPT_ERROR' };
+                            throw { code: ErrorCodes$2.UNKNOWN_ERROR, message: 'ERROR.SCRYPT_ERROR' };
                         case 4:
                             // Store pubkey+keypair
                             this._cache.pubkey = Base58.encode(keypair.publicKey);
@@ -16272,7 +16343,7 @@
                             return [3 /*break*/, 18];
                         case 11:
                             err_1 = _b.sent();
-                            if (!(err_1 && +(err_1.code) === ErrorCodes.LOAD_ACCOUNT_ERROR)) return [3 /*break*/, 17];
+                            if (!(err_1 && +(err_1.code) === ErrorCodes$2.LOAD_ACCOUNT_ERROR)) return [3 /*break*/, 17];
                             if (!(data.username.indexOf('@') !== -1)) return [3 /*break*/, 16];
                             isEmailExists = void 0;
                             _b.label = 12;
@@ -16288,12 +16359,12 @@
                         case 15:
                             // 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' };
                             }
                             _b.label = 16;
                         case 16: 
                         // 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' };
                         case 17: throw err_1; // resend the first error
                         case 18:
                             _b.trys.push([18, 20, , 21]);
@@ -16489,8 +16560,8 @@
                             _b.label = 3;
                         case 3: return [3 /*break*/, 6];
                         case 4: return [4 /*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
                             })];
                         case 5:
@@ -16528,7 +16599,7 @@
                         case 1:
                             isEmailExists = _b.sent();
                             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' };
                             }
                             return [2 /*return*/];
                     }
@@ -16578,7 +16649,7 @@
                                         locale: locale
                                     },
                                     error: {
-                                        code: ErrorCodes.SENT_CONFIRMATION_EMAIL_FAILED,
+                                        code: ErrorCodes$2.SENT_CONFIRMATION_EMAIL_FAILED,
                                         message: 'ERROR.SENT_ACCOUNT_CONFIRMATION_EMAIL_FAILED'
                                     }
                                 })];
@@ -16601,7 +16672,7 @@
                                         code: code
                                     },
                                     error: {
-                                        code: ErrorCodes.CONFIRM_EMAIL_FAILED,
+                                        code: ErrorCodes$2.CONFIRM_EMAIL_FAILED,
                                         message: 'ERROR.CONFIRM_ACCOUNT_EMAIL_FAILED'
                                     }
                                 })];
@@ -16701,7 +16772,7 @@
                                 throw error_7;
                             console.error(error_7);
                             throw {
-                                code: ErrorCodes.LOAD_ACCOUNT_ERROR,
+                                code: ErrorCodes$2.LOAD_ACCOUNT_ERROR,
                                 message: 'ERROR.LOAD_ACCOUNT_ERROR'
                             };
                         case 6: return [2 /*return*/];
@@ -16912,7 +16983,7 @@
                         case 1:
                             existingAccount = _b.sent();
                             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);
                             _b.label = 2;
@@ -16924,7 +16995,7 @@
                                     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'
                                     }
                                 })];
@@ -16958,7 +17029,7 @@
                                     mutation: AccountMutations.saveSettings,
                                     variables: { data: json },
                                     error: {
-                                        code: ErrorCodes.SAVE_SETTINGS_ERROR,
+                                        code: ErrorCodes$2.SAVE_SETTINGS_ERROR,
                                         message: 'ERROR.SAVE_SETTINGS_ERROR'
                                     }
                                 })];
@@ -16989,7 +17060,7 @@
                             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' };
                             }
                             if (!token) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.graphql.query({
@@ -16998,7 +17069,7 @@
                                         token: token
                                     },
                                     error: {
-                                        code: ErrorCodes.UNAUTHORIZED,
+                                        code: ErrorCodes$2.UNAUTHORIZED,
                                         message: 'ERROR.UNAUTHORIZED'
                                     },
                                     fetchPolicy: 'no-cache'
@@ -17015,7 +17086,7 @@
                             _b.label = 2;
                         case 2:
                             challengeError = {
-                                code: ErrorCodes.AUTH_CHALLENGE_ERROR,
+                                code: ErrorCodes$2.AUTH_CHALLENGE_ERROR,
                                 message: 'ERROR.AUTH_CHALLENGE_ERROR'
                             };
                             return [4 /*yield*/, this.graphql.query({
@@ -17102,7 +17173,7 @@
                 query: AccountSubscriptions.listenChanges,
                 variables: variables,
                 error: {
-                    code: ErrorCodes.SUBSCRIBE_ACCOUNT_ERROR,
+                    code: ErrorCodes$2.SUBSCRIBE_ACCOUNT_ERROR,
                     message: 'ERROR.ACCOUNT.SUBSCRIBE_ERROR'
                 }
             }).pipe(operators.map(function (_b) {
@@ -17135,7 +17206,7 @@
         };
         return AccountService;
     }(BaseGraphqlService));
-    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$2.Storage), i0.ɵɵinject(FileService), i0.ɵɵinject(i1$2.TranslateService, 8), i0.ɵɵinject(i1$5.ToastController, 8), i0.ɵɵinject(ENVIRONMENT)); }, token: AccountService, providedIn: "root" });
+    AccountService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function AccountService_Factory() { return new AccountService(i0__namespace.ɵɵinject(CryptoService), i0__namespace.ɵɵinject(NetworkService), i0__namespace.ɵɵinject(GraphqlService), i0__namespace.ɵɵinject(LocalSettingsService), i0__namespace.ɵɵinject(i3__namespace$1.Storage), i0__namespace.ɵɵinject(FileService), i0__namespace.ɵɵinject(i1__namespace$1.TranslateService, 8), i0__namespace.ɵɵinject(i1__namespace$4.ToastController, 8), i0__namespace.ɵɵinject(ENVIRONMENT)); }, token: AccountService, providedIn: "root" });
     AccountService.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root', deps: [ENVIRONMENT] },] }
     ];
@@ -17150,7 +17221,7 @@
         { type: i1$5.ToastController, decorators: [{ type: i0.Optional }] },
         { type: undefined, decorators: [{ type: i0.Inject, args: [ENVIRONMENT,] }] }
     ]; };
-    var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
+    var templateObject_1$4, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
 
     var Software_1, Configuration_1;
     // @dynamic
@@ -17408,13 +17479,13 @@
     /* ------------------------------------
      * GraphQL queries
      * ------------------------------------*/
-    var Fragments$1 = {
-        config: core.gql(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    fragment ConfigFragment on ConfigurationVO {\n      id\n      label\n      name\n      description\n      comments\n      properties\n      smallLogo\n      largeLogo\n      backgroundImages\n      partners {\n        id\n        label\n        name\n        logo\n        siteUrl\n        __typename\n      }\n      updateDate\n      creationDate\n      statusId\n      __typename\n    }\n  "], ["\n    fragment ConfigFragment on ConfigurationVO {\n      id\n      label\n      name\n      description\n      comments\n      properties\n      smallLogo\n      largeLogo\n      backgroundImages\n      partners {\n        id\n        label\n        name\n        logo\n        siteUrl\n        __typename\n      }\n      updateDate\n      creationDate\n      statusId\n      __typename\n    }\n  "])))
+    var Fragments = {
+        config: core.gql(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n    fragment ConfigFragment on ConfigurationVO {\n      id\n      label\n      name\n      description\n      comments\n      properties\n      smallLogo\n      largeLogo\n      backgroundImages\n      partners {\n        id\n        label\n        name\n        logo\n        siteUrl\n        __typename\n      }\n      updateDate\n      creationDate\n      statusId\n      __typename\n    }\n  "], ["\n    fragment ConfigFragment on ConfigurationVO {\n      id\n      label\n      name\n      description\n      comments\n      properties\n      smallLogo\n      largeLogo\n      backgroundImages\n      partners {\n        id\n        label\n        name\n        logo\n        siteUrl\n        __typename\n      }\n      updateDate\n      creationDate\n      statusId\n      __typename\n    }\n  "])))
     };
-    var LoadQuery$1 = core.gql(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\nquery Configuration{\n  data: configuration{\n    ...ConfigFragment\n  }\n}\n  ", "\n"], ["\nquery Configuration{\n  data: configuration{\n    ...ConfigFragment\n  }\n}\n  ", "\n"])), Fragments$1.config);
+    var LoadQuery = core.gql(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\nquery Configuration{\n  data: configuration{\n    ...ConfigFragment\n  }\n}\n  ", "\n"], ["\nquery Configuration{\n  data: configuration{\n    ...ConfigFragment\n  }\n}\n  ", "\n"])), Fragments.config);
     // Save (create or update) account mutation
-    var SaveMutation = core.gql(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  mutation SaveConfiguration($data: ConfigurationVOInput){\n    data: saveConfiguration(config: $data){\n       ...ConfigFragment\n    }\n  }\n  ", "\n"], ["\n  mutation SaveConfiguration($data: ConfigurationVOInput){\n    data: saveConfiguration(config: $data){\n       ...ConfigFragment\n    }\n  }\n  ", "\n"])), Fragments$1.config);
-    var ClearCache = core.gql(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  query ClearCache($name: String) {\n    clearCache(name: $name)\n  }\n"], ["\n  query ClearCache($name: String) {\n    clearCache(name: $name)\n  }\n"])));
+    var SaveMutation = core.gql(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  mutation SaveConfiguration($data: ConfigurationVOInput){\n    data: saveConfiguration(config: $data){\n       ...ConfigFragment\n    }\n  }\n  ", "\n"], ["\n  mutation SaveConfiguration($data: ConfigurationVOInput){\n    data: saveConfiguration(config: $data){\n       ...ConfigFragment\n    }\n  }\n  ", "\n"])), Fragments.config);
+    var ClearCache = core.gql(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  query ClearCache($name: String) {\n    clearCache(name: $name)\n  }\n"], ["\n  query ClearCache($name: String) {\n    clearCache(name: $name)\n  }\n"])));
     var CacheStatistics = core.gql(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  query CacheStatistics {\n    cacheStatistics\n  }\n"], ["\n  query CacheStatistics {\n    cacheStatistics\n  }\n"])));
     var APP_CONFIG_OPTIONS = new i0.InjectionToken('defaultOptions');
     var ConfigService = /** @class */ (function (_super) {
@@ -17474,12 +17545,12 @@
                         case 0:
                             now = Date.now();
                             console.debug('[config] Loading Pod configuration...');
-                            query = opts && opts.query || LoadQuery$1;
+                            query = opts && opts.query || LoadQuery;
                             variables = opts && opts.variables || undefined;
                             return [4 /*yield*/, this.graphql.query({
                                     query: query,
                                     variables: 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*/
                                 })];
                         case 1:
@@ -17521,7 +17592,7 @@
                                         data: json
                                     },
                                     error: {
-                                        code: ErrorCodes.SAVE_CONFIG_ERROR,
+                                        code: ErrorCodes$2.SAVE_CONFIG_ERROR,
                                         message: 'ERROR.SAVE_CONFIG_ERROR'
                                     }
                                 })];
@@ -17556,7 +17627,7 @@
                             return [4 /*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'
                                 })];
                         case 1:
@@ -17580,7 +17651,7 @@
                             return [4 /*yield*/, this.graphql.query({
                                     query: ClearCache,
                                     variables: 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'
                                 })];
                         case 1:
@@ -17696,7 +17767,7 @@
                             return [3 /*break*/, 8];
                         case 2:
                             now = this._debug && Date.now();
-                            if (!(this.network.online && this.platform.is('mobile'))) return [3 /*break*/, 6];
+                            if (!(this.network.online && isMobile(window))) return [3 /*break*/, 6];
                             jobs_1 = [];
                             // Download logos
                             if (data.largeLogo && data.largeLogo.startsWith('http')) {
@@ -17780,7 +17851,7 @@
         };
         return ConfigService;
     }(BaseGraphqlService));
-    ConfigService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ConfigService_Factory() { return new ConfigService(i0.ɵɵinject(i1$5.Platform), i0.ɵɵinject(GraphqlService), i0.ɵɵinject(i3$2.Storage), i0.ɵɵinject(NetworkService), i0.ɵɵinject(FileService), i0.ɵɵinject(i1$5.ToastController), i0.ɵɵinject(i1$2.TranslateService), i0.ɵɵinject(AccountService), i0.ɵɵinject(ENVIRONMENT), i0.ɵɵinject(APP_CONFIG_OPTIONS, 8)); }, token: ConfigService, providedIn: "root" });
+    ConfigService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ConfigService_Factory() { return new ConfigService(i0__namespace.ɵɵinject(i1__namespace$4.Platform), i0__namespace.ɵɵinject(GraphqlService), i0__namespace.ɵɵinject(i3__namespace$1.Storage), i0__namespace.ɵɵinject(NetworkService), i0__namespace.ɵɵinject(FileService), i0__namespace.ɵɵinject(i1__namespace$4.ToastController), i0__namespace.ɵɵinject(i1__namespace$1.TranslateService), i0__namespace.ɵɵinject(AccountService), i0__namespace.ɵɵinject(ENVIRONMENT), i0__namespace.ɵɵinject(APP_CONFIG_OPTIONS, 8)); }, token: ConfigService, providedIn: "root" });
     ConfigService.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root',
@@ -17799,9 +17870,9 @@
         { type: undefined, decorators: [{ type: i0.Inject, args: [ENVIRONMENT,] }] },
         { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [APP_CONFIG_OPTIONS,] }] }
     ]; };
-    var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
+    var templateObject_1$3, templateObject_2$3, templateObject_3$2, templateObject_4$2, templateObject_5$1;
 
-    var moment$4 = momentImported__namespace;
+    var moment$3 = momentImported__namespace;
     var AndroidOsEnvironment = Object.freeze({
         DIRECTORY_DOWNLOADS: 'Download',
         DIRECTORY_DOWNLOADS_OLD: 'Downloads',
@@ -17838,15 +17909,16 @@
         PlatformService.prototype.is = function (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);
             }
         };
         Object.defineProperty(PlatformService.prototype, "mobile", {
             get: function () {
-                return isNotNil(this._mobile) ? this._mobile : isMobile(window);
+                return isNotNil(this._mobile) ? this._mobile : this.is('mobile');
             },
             enumerable: false,
             configurable: true
@@ -17864,18 +17936,18 @@
         PlatformService.prototype.isIOSCordova = function () {
             return this._ios && this._cordova || false;
         };
-        PlatformService.prototype.isWeb = function () {
-            return !this._cordova || (!this._android && !this._ios);
-        };
         PlatformService.prototype.isApp = function () {
-            return this._cordova && (this._android || this._ios);
+            return this.isAndroidCordova() || this.isIOSCordova();
+        };
+        PlatformService.prototype.isWeb = function () {
+            return !this.isApp();
         };
         PlatformService.prototype.isMobileWeb = function () {
-            return isMobile(window) && this.isWeb();
+            return this.mobile && this.isWeb();
         };
         Object.defineProperty(PlatformService.prototype, "canDownload", {
             get: function () {
-                return !!this.downloader && this.isAndroidCordova();
+                return this.downloader && this.isAndroidCordova();
             },
             enumerable: false,
             configurable: true
@@ -18071,16 +18143,16 @@
                     }
                     // 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(function (data) {
@@ -18333,7 +18405,7 @@
         };
         return PlatformService;
     }(StartableService));
-    PlatformService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PlatformService_Factory() { return new PlatformService(i0.ɵɵinject(i1$5.Platform), i0.ɵɵinject(i2$4.Platform), i0.ɵɵinject(i1$5.ToastController), i0.ɵɵinject(i1$2.TranslateService), i0.ɵɵinject(i1$1.MomentDateAdapter), i0.ɵɵinject(EntitiesStorage), i0.ɵɵinject(LocalSettingsService), i0.ɵɵinject(NetworkService), i0.ɵɵinject(AccountService), i0.ɵɵinject(ConfigService), i0.ɵɵinject(i6.CacheService), i0.ɵɵinject(i3$2.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.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function PlatformService_Factory() { return new PlatformService(i0__namespace.ɵɵinject(i1__namespace$4.Platform), i0__namespace.ɵɵinject(i2__namespace$4.Platform), i0__namespace.ɵɵinject(i1__namespace$4.ToastController), i0__namespace.ɵɵinject(i1__namespace$1.TranslateService), i0__namespace.ɵɵinject(i1__namespace.MomentDateAdapter), i0__namespace.ɵɵinject(EntitiesStorage), i0__namespace.ɵɵinject(LocalSettingsService), i0__namespace.ɵɵinject(NetworkService), i0__namespace.ɵɵinject(AccountService), i0__namespace.ɵɵinject(ConfigService), i0__namespace.ɵɵinject(i6__namespace.CacheService), i0__namespace.ɵɵinject(i3__namespace$1.Storage), i0__namespace.ɵɵinject(AudioProvider), i0__namespace.ɵɵinject(ENVIRONMENT), i0__namespace.ɵɵinject(i14__namespace.StatusBar, 8), i0__namespace.ɵɵinject(i15__namespace.Keyboard, 8), i0__namespace.ɵɵinject(i10__namespace.SplashScreen, 8), i0__namespace.ɵɵinject(i17__namespace.InAppBrowser, 8), i0__namespace.ɵɵinject(i18__namespace.Downloader, 8)); }, token: PlatformService, providedIn: "root" });
     PlatformService.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
@@ -18431,7 +18503,7 @@
         };
         return MatStepperI18n;
     }(stepper.MatStepperIntl));
-    MatStepperI18n.ɵprov = i0.ɵɵdefineInjectable({ factory: function MatStepperI18n_Factory() { return new MatStepperI18n(i0.ɵɵinject(i1$2.TranslateService)); }, token: MatStepperI18n, providedIn: "root" });
+    MatStepperI18n.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function MatStepperI18n_Factory() { return new MatStepperI18n(i0__namespace.ɵɵinject(i1__namespace$1.TranslateService)); }, token: MatStepperI18n, providedIn: "root" });
     MatStepperI18n.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
@@ -20644,7 +20716,7 @@
                 return 1;
         }
     }
-    var ɵ0$b = function (defaultStateSize) { return [
+    var ɵ0$1 = function (defaultStateSize) { return [
         Math.round((rgbArrayMap.red[0] - 50) / defaultStateSize),
         Math.round((255 - rgbArrayMap.red[1]) / defaultStateSize),
         Math.round((255 - rgbArrayMap.red[2]) / defaultStateSize)
@@ -20652,7 +20724,7 @@
     var 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
@@ -21583,7 +21655,7 @@
         };
         return UserSettingsValidatorService;
     }(AppValidatorService));
-    UserSettingsValidatorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function UserSettingsValidatorService_Factory() { return new UserSettingsValidatorService(i0.ɵɵinject(i1.FormBuilder)); }, token: UserSettingsValidatorService, providedIn: "root" });
+    UserSettingsValidatorService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function UserSettingsValidatorService_Factory() { return new UserSettingsValidatorService(i0__namespace.ɵɵinject(i1__namespace$6.FormBuilder)); }, token: UserSettingsValidatorService, providedIn: "root" });
     UserSettingsValidatorService.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
@@ -21631,7 +21703,7 @@
         };
         return AccountValidatorService;
     }(AppValidatorService));
-    AccountValidatorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function AccountValidatorService_Factory() { return new AccountValidatorService(i0.ɵɵinject(i1.FormBuilder), i0.ɵɵinject(AccountService)); }, token: AccountValidatorService, providedIn: "root" });
+    AccountValidatorService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function AccountValidatorService_Factory() { return new AccountValidatorService(i0__namespace.ɵɵinject(i1__namespace$6.FormBuilder), i0__namespace.ɵɵinject(AccountService)); }, token: AccountValidatorService, providedIn: "root" });
     AccountValidatorService.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
@@ -22262,7 +22334,7 @@
         };
         return LocalSettingsValidatorService;
     }(AppValidatorService));
-    LocalSettingsValidatorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function LocalSettingsValidatorService_Factory() { return new LocalSettingsValidatorService(i0.ɵɵinject(i1.FormBuilder), i0.ɵɵinject(NetworkService)); }, token: LocalSettingsValidatorService, providedIn: "root" });
+    LocalSettingsValidatorService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function LocalSettingsValidatorService_Factory() { return new LocalSettingsValidatorService(i0__namespace.ɵɵinject(i1__namespace$6.FormBuilder), i0__namespace.ɵɵinject(NetworkService)); }, token: LocalSettingsValidatorService, providedIn: "root" });
     LocalSettingsValidatorService.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
@@ -23042,7 +23114,7 @@
         };
         return IsOnFieldModePipe;
     }());
-    IsOnFieldModePipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function IsOnFieldModePipe_Factory() { return new IsOnFieldModePipe(); }, token: IsOnFieldModePipe, providedIn: "root" });
+    IsOnFieldModePipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function IsOnFieldModePipe_Factory() { return new IsOnFieldModePipe(); }, token: IsOnFieldModePipe, providedIn: "root" });
     IsOnFieldModePipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'isOnField'
@@ -23057,7 +23129,7 @@
         };
         return IsNotOnFieldModePipe;
     }());
-    IsNotOnFieldModePipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function IsNotOnFieldModePipe_Factory() { return new IsNotOnFieldModePipe(); }, token: IsNotOnFieldModePipe, providedIn: "root" });
+    IsNotOnFieldModePipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function IsNotOnFieldModePipe_Factory() { return new IsNotOnFieldModePipe(); }, token: IsNotOnFieldModePipe, providedIn: "root" });
     IsNotOnFieldModePipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'isNotOnField'
@@ -23075,7 +23147,7 @@
         };
         return PersonToStringPipe;
     }());
-    PersonToStringPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function PersonToStringPipe_Factory() { return new PersonToStringPipe(); }, token: PersonToStringPipe, providedIn: "root" });
+    PersonToStringPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function PersonToStringPipe_Factory() { return new PersonToStringPipe(); }, token: PersonToStringPipe, providedIn: "root" });
     PersonToStringPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'personToString'
@@ -23539,7 +23611,7 @@
         };
         return IsLoginAccountPipe;
     }());
-    IsLoginAccountPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function IsLoginAccountPipe_Factory() { return new IsLoginAccountPipe(); }, token: IsLoginAccountPipe, providedIn: "root" });
+    IsLoginAccountPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function IsLoginAccountPipe_Factory() { return new IsLoginAccountPipe(); }, token: IsLoginAccountPipe, providedIn: "root" });
     IsLoginAccountPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'isLogin'
@@ -23554,7 +23626,7 @@
         };
         return AccountToStringPipe;
     }());
-    AccountToStringPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function AccountToStringPipe_Factory() { return new AccountToStringPipe(); }, token: AccountToStringPipe, providedIn: "root" });
+    AccountToStringPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function AccountToStringPipe_Factory() { return new AccountToStringPipe(); }, token: AccountToStringPipe, providedIn: "root" });
     AccountToStringPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'accountToString'
@@ -23572,7 +23644,7 @@
         };
         return DepartmentToStringPipe;
     }());
-    DepartmentToStringPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function DepartmentToStringPipe_Factory() { return new DepartmentToStringPipe(); }, token: DepartmentToStringPipe, providedIn: "root" });
+    DepartmentToStringPipe.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DepartmentToStringPipe_Factory() { return new DepartmentToStringPipe(); }, token: DepartmentToStringPipe, providedIn: "root" });
     DepartmentToStringPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'departmentToString'
@@ -23678,7 +23750,7 @@
         };
         return MenuService;
     }());
-    MenuService.ɵprov = i0.ɵɵdefineInjectable({ factory: function MenuService_Factory() { return new MenuService(); }, token: MenuService, providedIn: "root" });
+    MenuService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function MenuService_Factory() { return new MenuService(); }, token: MenuService, providedIn: "root" });
     MenuService.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root'
@@ -24223,7 +24295,7 @@
         };
         return AuthGuardService;
     }());
-    AuthGuardService.ɵprov = i0.ɵɵdefineInjectable({ factory: function AuthGuardService_Factory() { return new AuthGuardService(i0.ɵɵinject(AccountService), i0.ɵɵinject(i1$5.ModalController), i0.ɵɵinject(i3.Router), i0.ɵɵinject(ENVIRONMENT)); }, token: AuthGuardService, providedIn: "root" });
+    AuthGuardService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function AuthGuardService_Factory() { return new AuthGuardService(i0__namespace.ɵɵinject(AccountService), i0__namespace.ɵɵinject(i1__namespace$4.ModalController), i0__namespace.ɵɵinject(i3__namespace$3.Router), i0__namespace.ɵɵinject(ENVIRONMENT)); }, token: AuthGuardService, providedIn: "root" });
     AuthGuardService.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
@@ -24268,7 +24340,7 @@
                 query: query,
                 variables: { id: 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(operators.map(function (_b) {
                 var data = _b.data;
@@ -24290,7 +24362,7 @@
                                     query: query,
                                     variables: { id: 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' }
                                 })];
                         case 1:
                             data = (_b.sent()).data;
@@ -24326,7 +24398,7 @@
                 totalFieldName: withTotal ? 'total' : undefined,
                 insertFilterFn: filter && filter.asFilterFn(),
                 variables: 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(operators.map(function (_b) {
@@ -24368,7 +24440,7 @@
                             return [4 /*yield*/, this.graphql.query({
                                     query: query,
                                     variables: 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'
                                 })];
                         case 1:
@@ -24416,7 +24488,7 @@
                                     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'
                                 })];
                         case 3:
@@ -24461,7 +24533,7 @@
                                     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: function (proxy, _b) {
                                         var data = _b.data;
                                         var savedEntities = data && data.data;
@@ -24528,7 +24600,7 @@
                                     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: function (cache, _b) {
                                         var data = _b.data;
                                         // Update entity
@@ -24586,7 +24658,7 @@
                                     refetchQueries: this.getRefetchQueriesForMutation(opts),
                                     awaitRefetchQueries: opts && opts.awaitRefetchQueries,
                                     variables: { ids: 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: function (cache, res) {
                                         // Remove from cache
                                         if (_this.watchQueriesUpdatePolicy === 'update-cache') {
@@ -24639,7 +24711,7 @@
                                     refetchQueries: this.getRefetchQueriesForMutation(opts),
                                     awaitRefetchQueries: opts && opts.awaitRefetchQueries,
                                     variables: { id: 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: function (proxy, res) {
                                         // Remove from cache
                                         if (_this.watchQueriesUpdatePolicy === 'update-cache') {
@@ -24681,7 +24753,7 @@
                 fetchPolicy: opts && opts.fetchPolicy || 'no-cache',
                 variables: variables,
                 error: {
-                    code: ErrorCodes.SUBSCRIBE_DATA_ERROR,
+                    code: ErrorCodes$2.SUBSCRIBE_DATA_ERROR,
                     message: 'ERROR.SUBSCRIBE_DATA_ERROR'
                 }
             })
@@ -24904,7 +24976,7 @@
                                 if (this._debug)
                                     invalidRows.forEach(function (row) { return 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;
                             data = void 0;
@@ -25924,14 +25996,14 @@
                         case 0:
                             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;
                             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();
@@ -26088,7 +26160,7 @@
                     switch (_e.label) {
                         case 0:
                             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 [2 /*return*/, 0]; // SKip
@@ -27988,7 +28060,7 @@
                         case 8:
                             data = _c.sent();
                             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);
                             return [4 /*yield*/, this.onEntityLoaded(data, opts)];
                         case 9:
@@ -28780,10 +28852,10 @@
     exports.UserEventFilter = __decorate([
         EntityClass({ typename: 'UserEventVO' })
     ], exports.UserEventFilter);
-    var SaveQuery = core.gql(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  mutation SaveUserEvent($data: UserEventVOInput){\n    data: saveUserEvent(userEvent: $data){\n      ...UserEventFragment\n    }\n  }\n  ", "\n"], ["\n  mutation SaveUserEvent($data: UserEventVOInput){\n    data: saveUserEvent(userEvent: $data){\n      ...UserEventFragment\n    }\n  }\n  ", "\n"])), SocialFragments.userEvent);
-    var LoadAllQuery = core.gql(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  query UserEvents($filter: UserEventFilterVOInput, $page: PageInput){\n    data: userEvents(filter: $filter, page: $page){\n      ...LightUserEventFragment\n    }\n  }\n  ", "\n"], ["\n  query UserEvents($filter: UserEventFilterVOInput, $page: PageInput){\n    data: userEvents(filter: $filter, page: $page){\n      ...LightUserEventFragment\n    }\n  }\n  ", "\n"])), SocialFragments.lightUserEvent);
-    var DeleteByIdsMutation = core.gql(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  mutation DeleteUserEvents($ids:[Int]){\n    deleteUserEvents(ids: $ids)\n  }\n"], ["\n  mutation DeleteUserEvents($ids:[Int]){\n    deleteUserEvents(ids: $ids)\n  }\n"])));
-    var LoadAllWithContentQuery = core.gql(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  query UserEventsWithContent($filter: UserEventFilterVOInput, $page: PageInput){\n    data: userEvents(filter: $filter, page: $page){\n      ...UserEventFragment\n    }\n  }\n  ", "\n"], ["\n  query UserEventsWithContent($filter: UserEventFilterVOInput, $page: PageInput){\n    data: userEvents(filter: $filter, page: $page){\n      ...UserEventFragment\n    }\n  }\n  ", "\n"])), SocialFragments.userEvent);
+    var SaveQuery = core.gql(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  mutation SaveUserEvent($data: UserEventVOInput){\n    data: saveUserEvent(userEvent: $data){\n      ...UserEventFragment\n    }\n  }\n  ", "\n"], ["\n  mutation SaveUserEvent($data: UserEventVOInput){\n    data: saveUserEvent(userEvent: $data){\n      ...UserEventFragment\n    }\n  }\n  ", "\n"])), SocialFragments.userEvent);
+    var LoadAllQuery = core.gql(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  query UserEvents($filter: UserEventFilterVOInput, $page: PageInput){\n    data: userEvents(filter: $filter, page: $page){\n      ...LightUserEventFragment\n    }\n  }\n  ", "\n"], ["\n  query UserEvents($filter: UserEventFilterVOInput, $page: PageInput){\n    data: userEvents(filter: $filter, page: $page){\n      ...LightUserEventFragment\n    }\n  }\n  ", "\n"])), SocialFragments.lightUserEvent);
+    var DeleteByIdsMutation = core.gql(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  mutation DeleteUserEvents($ids:[Int]){\n    deleteUserEvents(ids: $ids)\n  }\n"], ["\n  mutation DeleteUserEvents($ids:[Int]){\n    deleteUserEvents(ids: $ids)\n  }\n"])));
+    var LoadAllWithContentQuery = core.gql(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  query UserEventsWithContent($filter: UserEventFilterVOInput, $page: PageInput){\n    data: userEvents(filter: $filter, page: $page){\n      ...UserEventFragment\n    }\n  }\n  ", "\n"], ["\n  query UserEventsWithContent($filter: UserEventFilterVOInput, $page: PageInput){\n    data: userEvents(filter: $filter, page: $page){\n      ...UserEventFragment\n    }\n  }\n  ", "\n"])), SocialFragments.userEvent);
     var UserEventService = /** @class */ (function (_super) {
         __extends(UserEventService, _super);
         function UserEventService(graphql, accountService, network, translate, toastController, environment) {
@@ -29104,7 +29176,7 @@
         };
         return UserEventService;
     }(BaseGraphqlService));
-    UserEventService.ɵprov = i0.ɵɵdefineInjectable({ factory: function UserEventService_Factory() { return new UserEventService(i0.ɵɵinject(GraphqlService), i0.ɵɵinject(AccountService), i0.ɵɵinject(NetworkService), i0.ɵɵinject(i1$2.TranslateService), i0.ɵɵinject(i1$5.ToastController), i0.ɵɵinject(ENVIRONMENT)); }, token: UserEventService, providedIn: "root" });
+    UserEventService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function UserEventService_Factory() { return new UserEventService(i0__namespace.ɵɵinject(GraphqlService), i0__namespace.ɵɵinject(AccountService), i0__namespace.ɵɵinject(NetworkService), i0__namespace.ɵɵinject(i1__namespace$1.TranslateService), i0__namespace.ɵɵinject(i1__namespace$4.ToastController), i0__namespace.ɵɵinject(ENVIRONMENT)); }, token: UserEventService, providedIn: "root" });
     UserEventService.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
@@ -29116,7 +29188,7 @@
         { type: i1$5.ToastController },
         { type: undefined, decorators: [{ type: i0.Inject, args: [ENVIRONMENT,] }] }
     ]; };
-    var templateObject_1$3, templateObject_2$3, templateObject_3$2, templateObject_4$2;
+    var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1;
 
     var ICONS_MAP = {
         DEBUG_DATA: { matIcon: 'bug_report' },
@@ -29378,16 +29450,16 @@
     ], exports.PersonFilter);
 
     var PersonFragments = {
-        person: core.gql(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["fragment PersonFragment on PersonVO {\n    id\n    firstName\n    lastName\n    email\n    pubkey\n    avatar\n    statusId\n    updateDate\n    creationDate\n    profiles\n    username\n    usernameExtranet\n    department {\n      id\n      label\n      name\n      logo\n      __typename\n    }\n    __typename\n  }"], ["fragment PersonFragment on PersonVO {\n    id\n    firstName\n    lastName\n    email\n    pubkey\n    avatar\n    statusId\n    updateDate\n    creationDate\n    profiles\n    username\n    usernameExtranet\n    department {\n      id\n      label\n      name\n      logo\n      __typename\n    }\n    __typename\n  }"])))
+        person: core.gql(templateObject_1 || (templateObject_1 = __makeTemplateObject(["fragment PersonFragment on PersonVO {\n    id\n    firstName\n    lastName\n    email\n    pubkey\n    avatar\n    statusId\n    updateDate\n    creationDate\n    profiles\n    username\n    usernameExtranet\n    department {\n      id\n      label\n      name\n      logo\n      __typename\n    }\n    __typename\n  }"], ["fragment PersonFragment on PersonVO {\n    id\n    firstName\n    lastName\n    email\n    pubkey\n    avatar\n    statusId\n    updateDate\n    creationDate\n    profiles\n    username\n    usernameExtranet\n    department {\n      id\n      label\n      name\n      logo\n      __typename\n    }\n    __typename\n  }"])))
     };
     // Load persons query
     var PersonQueries = {
-        loadAll: core.gql(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n    query Persons($offset: Int, $size: Int, $sortBy: String, $sortDirection: String, $filter: PersonFilterVOInput){\n      data: persons(filter: $filter, offset: $offset, size: $size, sortBy: $sortBy, sortDirection: $sortDirection){\n        ...PersonFragment\n      }\n    }\n    ", ""], ["\n    query Persons($offset: Int, $size: Int, $sortBy: String, $sortDirection: String, $filter: PersonFilterVOInput){\n      data: persons(filter: $filter, offset: $offset, size: $size, sortBy: $sortBy, sortDirection: $sortDirection){\n        ...PersonFragment\n      }\n    }\n    ", ""])), PersonFragments.person),
-        loadAllWithTotal: core.gql(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n    query PersonsWithTotal($offset: Int, $size: Int, $sortBy: String, $sortDirection: String, $filter: PersonFilterVOInput){\n      data: persons(filter: $filter, offset: $offset, size: $size, sortBy: $sortBy, sortDirection: $sortDirection){\n        ...PersonFragment\n      }\n      total: personsCount(filter: $filter)\n    }\n    ", ""], ["\n    query PersonsWithTotal($offset: Int, $size: Int, $sortBy: String, $sortDirection: String, $filter: PersonFilterVOInput){\n      data: persons(filter: $filter, offset: $offset, size: $size, sortBy: $sortBy, sortDirection: $sortDirection){\n        ...PersonFragment\n      }\n      total: personsCount(filter: $filter)\n    }\n    ", ""])), PersonFragments.person)
+        loadAll: core.gql(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    query Persons($offset: Int, $size: Int, $sortBy: String, $sortDirection: String, $filter: PersonFilterVOInput){\n      data: persons(filter: $filter, offset: $offset, size: $size, sortBy: $sortBy, sortDirection: $sortDirection){\n        ...PersonFragment\n      }\n    }\n    ", ""], ["\n    query Persons($offset: Int, $size: Int, $sortBy: String, $sortDirection: String, $filter: PersonFilterVOInput){\n      data: persons(filter: $filter, offset: $offset, size: $size, sortBy: $sortBy, sortDirection: $sortDirection){\n        ...PersonFragment\n      }\n    }\n    ", ""])), PersonFragments.person),
+        loadAllWithTotal: core.gql(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    query PersonsWithTotal($offset: Int, $size: Int, $sortBy: String, $sortDirection: String, $filter: PersonFilterVOInput){\n      data: persons(filter: $filter, offset: $offset, size: $size, sortBy: $sortBy, sortDirection: $sortDirection){\n        ...PersonFragment\n      }\n      total: personsCount(filter: $filter)\n    }\n    ", ""], ["\n    query PersonsWithTotal($offset: Int, $size: Int, $sortBy: String, $sortDirection: String, $filter: PersonFilterVOInput){\n      data: persons(filter: $filter, offset: $offset, size: $size, sortBy: $sortBy, sortDirection: $sortDirection){\n        ...PersonFragment\n      }\n      total: personsCount(filter: $filter)\n    }\n    ", ""])), PersonFragments.person)
     };
     var PersonMutations = {
-        saveAll: core.gql(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n    mutation savePersons($data:[PersonVOInput]){\n      data: savePersons(persons: $data){\n        ...PersonFragment\n      }\n    }\n    ", ""], ["\n    mutation savePersons($data:[PersonVOInput]){\n      data: savePersons(persons: $data){\n        ...PersonFragment\n      }\n    }\n    ", ""])), PersonFragments.person),
-        deleteAll: core.gql(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n    mutation deletePersons($ids:[Int]){\n      deletePersons(ids: $ids)\n    }"], ["\n    mutation deletePersons($ids:[Int]){\n      deletePersons(ids: $ids)\n    }"])))
+        saveAll: core.gql(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    mutation savePersons($data:[PersonVOInput]){\n      data: savePersons(persons: $data){\n        ...PersonFragment\n      }\n    }\n    ", ""], ["\n    mutation savePersons($data:[PersonVOInput]){\n      data: savePersons(persons: $data){\n        ...PersonFragment\n      }\n    }\n    ", ""])), PersonFragments.person),
+        deleteAll: core.gql(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    mutation deletePersons($ids:[Int]){\n      deletePersons(ids: $ids)\n    }"], ["\n    mutation deletePersons($ids:[Int]){\n      deletePersons(ids: $ids)\n    }"])))
     };
     var PersonService = /** @class */ (function (_super_1) {
         __extends(PersonService, _super_1);
@@ -29508,7 +29580,7 @@
         };
         return PersonService;
     }(BaseEntityService));
-    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.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function PersonService_Factory() { return new PersonService(i0__namespace.ɵɵinject(GraphqlService), i0__namespace.ɵɵinject(PlatformService), i0__namespace.ɵɵinject(NetworkService), i0__namespace.ɵɵinject(EntitiesStorage)); }, token: PersonService, providedIn: "root" });
     PersonService.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
@@ -29518,7 +29590,7 @@
         { type: NetworkService },
         { type: EntitiesStorage }
     ]; };
-    var templateObject_1$4, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2;
+    var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
     var PersonValidatorService = /** @class */ (function () {
         function PersonValidatorService(formBuilder, accountValidatorService) {
@@ -29541,7 +29613,7 @@
         };
         return PersonValidatorService;
     }());
-    PersonValidatorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PersonValidatorService_Factory() { return new PersonValidatorService(i0.ɵɵinject(i1.FormBuilder), i0.ɵɵinject(AccountValidatorService)); }, token: PersonValidatorService, providedIn: "root" });
+    PersonValidatorService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function PersonValidatorService_Factory() { return new PersonValidatorService(i0__namespace.ɵɵinject(i1__namespace$6.FormBuilder), i0__namespace.ɵɵinject(AccountValidatorService)); }, token: PersonValidatorService, providedIn: "root" });
     PersonValidatorService.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
@@ -29752,16 +29824,16 @@
     ];
     AdminModule.ctorParameters = function () { return []; };
 
-    var ɵ0$c = {
+    var ɵ0 = {
         profile: 'ADMIN'
     };
-    var routes = [
+    var routes$5 = [
         {
             path: 'users',
             pathMatch: 'full',
             component: UsersPage,
             canActivate: [AuthGuardService],
-            data: ɵ0$c
+            data: ɵ0
         }
     ];
     var AdminRoutingModule = /** @class */ (function () {
@@ -29774,36 +29846,36 @@
                     imports: [
                         SharedRoutingModule,
                         AdminModule,
-                        i3.RouterModule.forChild(routes)
+                        i3.RouterModule.forChild(routes$5)
                     ],
                     exports: [i3.RouterModule]
                 },] }
     ];
 
-    var ErrorCodes$2 = {
+    var ErrorCodes = {
         LOAD_PERSONS_ERROR: 100,
         SAVE_PERSONS_ERROR: 101,
         DELETE_PERSONS_ERROR: 102,
     };
 
-    var EntityTestClass = /** @class */ (function () {
+    var EntityTestClass$1 = /** @class */ (function () {
         function EntityTestClass() {
         }
         return EntityTestClass;
     }());
-    var FAKE_ENTITIES = [
+    var 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(function (entity) { return Object.assign({}, entity); });
+            return (values || FAKE_ENTITIES$1).map(function (entity) { return Object.assign({}, entity); });
         }
         var result = [];
         var i = 1;
         while (result.length < size) {
-            result = result.concat((values || FAKE_ENTITIES).map(function (entity) {
+            result = result.concat((values || FAKE_ENTITIES$1).map(function (entity) {
                 var name = entity.name + ' #' + i;
                 return Object.assign(Object.assign({}, entity), { id: i++, name: name });
             }));
@@ -29813,7 +29885,7 @@
     var AutocompleteTestPage = /** @class */ (function () {
         function AutocompleteTestPage(formBuilder) {
             this.formBuilder = formBuilder;
-            this._items = deepCopy(FAKE_ENTITIES, 100);
+            this._items = deepCopy$1(FAKE_ENTITIES$1, 100);
             this._$items = new rxjs.BehaviorSubject(undefined);
             this.autocompleteFields = new MatAutocompleteConfigHolder();
             this.memoryHide = false;
@@ -29824,6 +29896,7 @@
                 entity: [null, SharedValidators.entity],
                 missingEntity: [null, SharedValidators.entity],
                 disableEntity: [null, SharedValidators.entity],
+                entities: [null, SharedFormArrayValidators.requiredArrayMinLength(1)],
             });
             this.form.get('disableEntity').disable();
         }
@@ -29858,10 +29931,19 @@
             });
             // 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: function (value, filter) { return _this.suggest(value, filter); }
+                },
+                attributes: ['label', 'name'],
+                multiple: true
+                //displayWith: this.entitiesToString
+            });
             this.loadData();
         };
         // Load the form with data
@@ -29871,12 +29953,13 @@
                 var _this = this;
                 return __generator(this, function (_a) {
                     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
@@ -29896,6 +29979,9 @@
         AutocompleteTestPage.prototype.entityToString = function (item) {
             return [item && item.label || undefined, item && item.name || undefined].filter(isNotNil).join(' - ');
         };
+        AutocompleteTestPage.prototype.entitiesToString = function (items) {
+            return (items || []).map(this.entityToString).join(', ');
+        };
         AutocompleteTestPage.prototype.suggest = function (value, filter) {
             return __awaiter(this, void 0, void 0, function () {
                 var res, total, nextOffset;
@@ -29949,9 +30035,10 @@
             this.memoryTimer = null;
             this.memoryHide = false;
         };
-        AutocompleteTestPage.prototype.updateFilter = function (fieldName) {
+        AutocompleteTestPage.prototype.updateFilter = function (autocompleteField, fieldName) {
             var filter = this.autocompleteFields.get(fieldName).filter || {};
             filter.searchAttribute = (!filter || filter.searchAttribute !== 'name') ? 'name' : 'label';
+            autocompleteField.reloadItems();
         };
         /* -- protected methods -- */
         AutocompleteTestPage.prototype.stringify = function (value) {
@@ -29962,7 +30049,7 @@
     AutocompleteTestPage.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-autocomplete-test',
-                    template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar>\n    <a mat-tab-link\n       [active]=\"mode==='mobile'\"\n       (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='desktop'\"\n       (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='memory'\"\n       (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link\n       [active]=\"mode==='temp'\"\n       (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!--<ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n    </ion-grid>-->\n\n\n    <ion-grid *ngIf=\"mode === 'memory'\">\n\n      <!-- debugging memory leak -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Debug memory leak</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Items type\">\n            <mat-select (selectionChange)=\"memoryAutocompleteFieldName=$event.value\" [value]=\"memoryAutocompleteFieldName\">\n              <mat-option value=\"entity-$items\">Observable</mat-option>\n              <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n        <ion-col size=\"1\" class=\"ion-no-padding\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Mobile ?\">\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field formControlName=\"entity\"\n                                  *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n                                  [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                                  [mobile]=\"memoryMobile\"\n                                  [equals]=\"equals\"\n                                  [logPrefix]=\"'[combo-memory-leak]'\">\n          </mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-1]'\"\n                                      [required]=\"true\"\n                                      placeholder=\"Suggest field\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Items is an Observable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [logPrefix]=\"'[combo-mobile-observable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [equals]=\"equals\"\n                                      [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 = function () { return [
@@ -30041,13 +30128,13 @@
         { type: i1.FormBuilder }
     ]; };
 
-    var moment$5 = momentImported__namespace;
+    var moment$2 = momentImported__namespace;
     var SwipeTestPage = /** @class */ (function () {
         function SwipeTestPage(formBuilder, dateFormatPipe) {
             this.formBuilder = formBuilder;
             this.dateFormatPipe = dateFormatPipe;
             this.$dates = new rxjs.BehaviorSubject(undefined);
-            this._today = moment$5().startOf('day');
+            this._today = moment$2().startOf('day');
             this.form = formBuilder.group({
                 empty: [null, i1.Validators.required],
                 date: [null, i1.Validators.compose([i1.Validators.required, SharedValidators.validDate])],
@@ -30061,7 +30148,7 @@
             var _this = this;
             var dates = [];
             for (var 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();
@@ -30108,7 +30195,7 @@
         { type: DateFormatPipe }
     ]; };
 
-    var moment$6 = momentImported__namespace;
+    var moment$1 = momentImported__namespace;
     var DateTimeTestPage = /** @class */ (function () {
         function DateTimeTestPage(platform, formBuilder, cd) {
             this.platform = platform;
@@ -30131,8 +30218,7 @@
             disableControl.disable();
             // Copy the 'enable' value, into the disable control
             this.form.get('enable').valueChanges.subscribe(function (value) { return disableControl.setValue(value); });
-            var mobile = platform.is('mobile');
-            this.showLogPanel = this.showLogPanel || mobile;
+            this.showLogPanel = this.showLogPanel || isMobile(window);
         }
         DateTimeTestPage.prototype.ngOnInit = function () {
             var _this = this;
@@ -30144,7 +30230,7 @@
                 var now, data;
                 var _this = this;
                 return __generator(this, function (_a) {
-                    now = moment$6();
+                    now = moment$1();
                     data = {
                         empty: toDateISOString(now.clone().add(2, 'hours')),
                         enable: toDateISOString(now),
@@ -30209,12 +30295,12 @@
         { type: i0.ChangeDetectorRef }
     ]; };
 
-    var EntityTestClass$1 = /** @class */ (function () {
+    var EntityTestClass = /** @class */ (function () {
         function EntityTestClass() {
         }
         return EntityTestClass;
     }());
-    var FAKE_ENTITIES$1 = [
+    var FAKE_ENTITIES = [
         { id: 1, label: 'AAA', name: 'Item A' },
         { id: 2, label: 'BBB', name: 'Item B' },
         { id: 3, label: 'CCC', name: 'Item C' },
@@ -30223,14 +30309,14 @@
         { 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(function (entity) { return Object.assign({}, entity); });
+            return (values || FAKE_ENTITIES).map(function (entity) { return Object.assign({}, entity); });
         }
         var result = [];
         var i = 1;
         while (result.length < size) {
-            result = result.concat((values || FAKE_ENTITIES$1).map(function (entity) {
+            result = result.concat((values || FAKE_ENTITIES).map(function (entity) {
                 var name = entity.name + ' #' + i;
                 return Object.assign(Object.assign({}, entity), { id: i++, name: name });
             }));
@@ -30240,7 +30326,7 @@
     var ChipsTestPage = /** @class */ (function () {
         function ChipsTestPage(formBuilder) {
             this.formBuilder = formBuilder;
-            this._items = deepCopy$1(FAKE_ENTITIES$1, 100);
+            this._items = deepCopy(FAKE_ENTITIES, 100);
             this._$items = new rxjs.BehaviorSubject(undefined);
             this.autocompleteFields = new MatAutocompleteConfigHolder();
             this.form = formBuilder.group({
@@ -30283,7 +30369,7 @@
                 var items, data;
                 var _this = this;
                 return __generator(this, function (_a) {
-                    items = deepCopy$1(FAKE_ENTITIES$1);
+                    items = deepCopy(FAKE_ENTITIES);
                     data = {
                         entity: items.slice(0, 1),
                         entityInitial: items.slice(1, 2),
@@ -30420,10 +30506,9 @@
         { type: i1.FormBuilder }
     ]; };
 
-    var moment$7 = momentImported__namespace;
+    var moment = momentImported__namespace;
     var DateTestPage = /** @class */ (function () {
-        function DateTestPage(platform, formBuilder, cd) {
-            this.platform = platform;
+        function DateTestPage(formBuilder, cd) {
             this.formBuilder = formBuilder;
             this.cd = cd;
             this.showLogPanel = true;
@@ -30445,8 +30530,7 @@
             disableControl.disable();
             // Copy the 'enable' value, into the disable control
             this.form.get('enable').valueChanges.subscribe(function (value) { return disableControl.setValue(value); });
-            var mobile = platform.is('mobile');
-            this.showLogPanel = this.showLogPanel || mobile;
+            this.showLogPanel = this.showLogPanel || isMobile(window);
         }
         DateTestPage.prototype.ngOnInit = function () {
             var _this = this;
@@ -30458,7 +30542,7 @@
                 var now, nowAtMahe, data;
                 var _this = this;
                 return __generator(this, function (_a) {
-                    now = moment$7();
+                    now = moment();
                     nowAtMahe = now.clone().tz(this.timezone).startOf('day');
                     data = {
                         empty: toDateISOString(now.clone().add(2, 'hours')),
@@ -30523,7 +30607,6 @@
                 },] }
     ];
     DateTestPage.ctorParameters = function () { return [
-        { type: i1$5.Platform },
         { type: i1.FormBuilder },
         { type: i0.ChangeDetectorRef }
     ]; };
@@ -30540,7 +30623,7 @@
         { label: 'Shared directives', divider: true },
         { label: 'Badge icon directive', page: '/testing/shared/badge-icon' }
     ];
-    var routes$1 = [
+    var routes$4 = [
         {
             path: '',
             pathMatch: 'full',
@@ -30600,7 +30683,7 @@
                         i1.ReactiveFormsModule,
                         SharedMaterialModule,
                         i1$2.TranslateModule.forChild(),
-                        i3.RouterModule.forChild(routes$1)
+                        i3.RouterModule.forChild(routes$4)
                     ],
                     declarations: [
                         DateTimeTestPage,
@@ -30662,7 +30745,7 @@
         { type: i1$2.TranslateService }
     ]; };
 
-    var routes$2 = [
+    var routes$3 = [
         {
             path: 'toast',
             pathMatch: 'full',
@@ -30680,7 +30763,7 @@
                         i1$4.CommonModule,
                         i1$5.IonicModule,
                         i1$2.TranslateModule.forChild(),
-                        i3.RouterModule.forChild(routes$2)
+                        i3.RouterModule.forChild(routes$3)
                     ],
                     declarations: [
                         ToastTestingPage
@@ -30760,7 +30843,7 @@
         { type: i1$5.PopoverController }
     ]; };
 
-    var routes$3 = [
+    var routes$2 = [
         {
             path: 'upload-file',
             pathMatch: 'full',
@@ -30778,7 +30861,7 @@
                         i1$4.CommonModule,
                         i1$5.IonicModule,
                         i1$2.TranslateModule.forChild(),
-                        i3.RouterModule.forChild(routes$3)
+                        i3.RouterModule.forChild(routes$2)
                     ],
                     declarations: [
                         UploadFileTestingPage
@@ -31202,7 +31285,7 @@
         { type: i1$5.PopoverController }
     ]; };
 
-    var routes$4 = [
+    var routes$1 = [
         {
             path: 'text-popover',
             pathMatch: 'full',
@@ -31220,7 +31303,7 @@
                         i1$4.CommonModule,
                         i1$5.IonicModule,
                         i1$2.TranslateModule.forChild(),
-                        i3.RouterModule.forChild(routes$4)
+                        i3.RouterModule.forChild(routes$1)
                     ],
                     declarations: [
                         TextPopoverTestingPage
@@ -31237,7 +31320,7 @@
         { label: 'Table', page: '/testing/core/table' },
         { label: 'Text popover', page: '/testing/core/text-popover' }
     ];
-    var routes$5 = [
+    var routes = [
         {
             path: '',
             pathMatch: 'full',
@@ -31264,7 +31347,7 @@
                     imports: [
                         i1$4.CommonModule,
                         i1$2.TranslateModule.forChild(),
-                        i3.RouterModule.forChild(routes$5),
+                        i3.RouterModule.forChild(routes),
                         // Sub modules
                         TableTestingModule,
                         TextPopoverTestingModule
@@ -31387,7 +31470,7 @@
     exports.EntityStore = EntityStore;
     exports.EntityUtils = EntityUtils;
     exports.Environment = Environment;
-    exports.ErrorCodes = ErrorCodes$2;
+    exports.ErrorCodes = ErrorCodes;
     exports.EvenPipe = EvenPipe;
     exports.FileResponse = FileResponse;
     exports.FileService = FileService;
@@ -31403,7 +31486,7 @@
     exports.FormGetControlPipe = FormGetControlPipe;
     exports.FormGetGroupPipe = FormGetGroupPipe;
     exports.FormGetPipe = FormGetPipe;
-    exports.Fragments = Fragments$1;
+    exports.Fragments = Fragments;
     exports.GraphqlService = GraphqlService;
     exports.HAMMER_PRESS_TIME = HAMMER_PRESS_TIME;
     exports.HAMMER_TAP_TIME = HAMMER_TAP_TIME;
@@ -31684,23 +31767,23 @@
     exports.waitForTrue = waitForTrue;
     exports.waitIdle = waitIdle;
     exports.waitWhilePending = waitWhilePending;
-    exports.ɵ0 = ɵ0$1;
-    exports.ɵa = CustomReuseStrategy;
-    exports.ɵb = MatNumpadDomService;
-    exports.ɵc = isFocusableElement;
-    exports.ɵd = RegisterForm;
-    exports.ɵe = AccountValidatorService;
-    exports.ɵf = RegisterModal;
-    exports.ɵg = UserSettingsValidatorService;
-    exports.ɵh = LocalSettingsValidatorService;
-    exports.ɵi = AppIconComponent;
-    exports.ɵj = DateTestPage;
-    exports.ɵk = NumpadTestPage;
-    exports.ɵl = MatBadgeIconTestPage;
-    exports.ɵm = ToastTestingModule;
-    exports.ɵn = ToastTestingPage;
+    exports["ɵ0"] = ɵ0$c;
+    exports["ɵa"] = CustomReuseStrategy;
+    exports["ɵb"] = MatNumpadDomService;
+    exports["ɵc"] = isFocusableElement;
+    exports["ɵd"] = RegisterForm;
+    exports["ɵe"] = AccountValidatorService;
+    exports["ɵf"] = RegisterModal;
+    exports["ɵg"] = UserSettingsValidatorService;
+    exports["ɵh"] = LocalSettingsValidatorService;
+    exports["ɵi"] = AppIconComponent;
+    exports["ɵj"] = DateTestPage;
+    exports["ɵk"] = NumpadTestPage;
+    exports["ɵl"] = MatBadgeIconTestPage;
+    exports["ɵm"] = ToastTestingModule;
+    exports["ɵn"] = ToastTestingPage;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=sumaris-net.ngx-components.umd.js.map