@sumaris-net/ngx-components 1.6.6 → 1.6.11

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

@@ -1,7 +1,7 @@
 (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('@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('@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', '@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', '@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["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.ngx$6, global["ionic-native"]["status-bar"].ngx.index, global["ionic-native"].keyboard.ngx.index, global["ionic-native"]["in-app-browser"].ngx.index, global.i18, global["e-is"]["ngx-material-table"], global.ng.cdk.collections, global["ngx-jdenticon"]));
+    (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["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["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, 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, ngxMaterialTable, collections, ngxJdenticon) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -1528,9 +1528,10 @@
             // Filter if not enough character
             operators.filter(function (value) { return value.length >= _this.suggestLengthThreshold; }), 
             // Wait a debounce time
-            operators.debounceTime(this.debounceTime), 
+            operators.debounceTime(this.debounceTime)
             // DEBUG
-            operators.tap(function (value) { return console.debug(_this.logPrefix + ' Search text changes:', value); })), 
+            //,tap((value) => this.debug && console.debug(this.logPrefix + ' Search text changes:', value))
+            ), 
             // 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) {
@@ -1546,35 +1547,38 @@
                         _this.matInputText.nativeElement.value = _this.displayValue;
                     }
                 }
-            }), 
+            })
             // DEBUG
-            operators.tap(function (value) { return _this.debug && console.debug(_this.logPrefix + ' Received an object value: ', value); })), 
+            //,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; }), 
-            // Make enough characters
+            // 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; }), 
-            // DEBUG
-            operators.tap(function (value) { return _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 && _this.searchable; }), operators.map(function (_) { return _this.showAllOnFocus ? '*' : _this.formControl.value; })
             // DEBUG
-            operators.tap(function (value) { return _this.debug && console.debug(_this.logPrefix + ' Received $inputItems or filter event: ', value); })))
+            //,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(
             // Make sure there is enough characters
             operators.filter(thresholdFilterFn), 
             // Distinguish changes
             // - do NOT filter if loading, to force update after a blur event
-            operators.distinctUntilChanged(function (v1, v2) { return !_this.loading && (v1 === v2 || _this.equals(v1, v2)); })))
+            operators.distinctUntilChanged(function (v1, v2) { return !_this.loading && (v1 === v2 || _this.equals(v1, v2)); })
+            // DEBUG
+            //,tap(value => this.debug && console.debug(this.logPrefix + ' Received update event: ', value))
+            ))
                 .pipe(
             // Suggest values
             operators.mergeMap(function (value) { return _this.suggest(value, _this.filter); }), 
             // DEBUG
-            operators.tap(function (items) { return _this.debug && console.debug(_this.logPrefix + ' Received from suggest: ', items); }), 
+            //tap(items => this.debug && console.debug(this.logPrefix + ' Received from suggest: ', items)),
             // Store implicit value (will use it onBlur if not other value selected)
             operators.tap(function (items) { return _this.updateImplicitValue(items); }));
             // Fetch more events
@@ -1607,9 +1611,10 @@
             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.searchable; }), operators.map(function (_) { return _this.formControl.value; })
             // DEBUG
-            operators.tap(function (value) { return console.debug(_this.logPrefix + ' Received blurred event: ', value); }))
+            //,tap(value => this.debug && console.debug(this.logPrefix + ' Received blurred event: ', value)),
+            )
                 .subscribe(function (value) {
                 // When leave component without object, use implicit value if :
                 // - an explicit value
@@ -1695,7 +1700,7 @@
         };
         MatAutocompleteField.prototype.writeValue = function (value) {
             // DEBUG
-            // console.debug(this.logPrefix + ' Writing value: ', value);
+            // if (this.debug) console.debug(this.logPrefix + ' Writing value: ', value);
             if (value !== this.formControl.value) {
                 this.formControl.patchValue(value, { emitEvent: false });
                 this._onChangeCallback(value);
@@ -1733,18 +1738,16 @@
                     event.stopPropagation();
                 event.returnValue = false;
                 // DEBUG
-                if (this.debug)
-                    console.debug(this.logPrefix + ' Cancelling focus event');
+                //if (this.debug) console.debug(this.logPrefix + ' Cancelling focus event');
                 return false;
             }
-            if (this.debug)
-                console.debug(this.logPrefix + ' Select input content');
+            // DEBUG
+            //if (this.debug) console.debug(this.logPrefix + ' Select input content');
             var hasContent = true; // selectInputContent(event);
             // If combo is empty, or if has content but should force to show panel on focus
             if (!hasContent || this.showPanelOnFocus || this.showAllOnFocus) {
                 // DEBUG
-                if (this.debug)
-                    console.debug(this.logPrefix + ' Emit focus event');
+                //if (this.debug) console.debug(this.logPrefix + ' Emit focus event');
                 this.focused.emit();
                 return true;
             }
@@ -5091,7 +5094,7 @@
             var _this = this;
             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>.');
+                throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-date-field>.');
             this.required = toBoolean(this.required, this.formControl.validator === i1.Validators.required);
             // Redirect errors from main control, into day sub control
             var $error = new rxjs.BehaviorSubject(null);
@@ -5188,44 +5191,6 @@
             this.markForCheck();
             this._onChangeCallback(dateStr);
         };
-        MatDate.prototype.updatePattern = function (pattern) {
-            pattern = pattern !== 'COMMON.DATE_PATTERN' ? pattern : 'L';
-            if (this.displayPattern !== pattern) {
-                this.displayPattern = pattern;
-                this.dayPattern = pattern;
-                this.markForCheck();
-            }
-        };
-        MatDate.prototype.onFormChange = function (dayValue) {
-            if (this.writing)
-                return; // Skip if call by self
-            this.writing = true;
-            // Make to remove placeholder chars
-            while (dayValue && dayValue.indexOf(this.placeholderChar) !== -1) {
-                dayValue = dayValue.replace(this.placeholderChar, '');
-            }
-            var date;
-            // Parse day string
-            date = dayValue && this.dateAdapter.parse(dayValue, this.dayPattern) || null;
-            // Reset time
-            date = date && date.utc(true).hour(0).minute(0).seconds(0).millisecond(0);
-            // update date picker
-            this._value = date && this.dateAdapter.parse(date.clone(), DATE_ISO_PATTERN);
-            // Get the model value
-            var dateStr = date && date.isValid() && this.dateAdapter.format(date, DATE_ISO_PATTERN).replace('+00:00', 'Z') || date;
-            //console.debug("[mat-date-time] Setting date: ", dateStr);
-            this.formControl.patchValue(dateStr, { emitEvent: false });
-            //this.formControl.updateValueAndValidity();
-            this.writing = false;
-            this.markForCheck();
-            this._onChangeCallback(dateStr);
-        };
-        MatDate.prototype.checkIfTouched = function () {
-            if (this.dayControl.touched) {
-                this.markForCheck();
-                this._onTouchedCallback();
-            }
-        };
         MatDate.prototype.openDatePickerIfMobile = function (event, datePicker) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
@@ -5275,7 +5240,45 @@
                 }
             });
         };
-        /* -- protected method -- */
+        /* -- private method -- */
+        MatDate.prototype.updatePattern = function (pattern) {
+            pattern = pattern !== 'COMMON.DATE_PATTERN' ? pattern : 'L';
+            if (this.displayPattern !== pattern) {
+                this.displayPattern = pattern;
+                this.dayPattern = pattern;
+                this.markForCheck();
+            }
+        };
+        MatDate.prototype.onFormChange = function (dayValue) {
+            if (this.writing)
+                return; // Skip if call by self
+            this.writing = true;
+            // Make to remove placeholder chars
+            while (dayValue && dayValue.indexOf(this.placeholderChar) !== -1) {
+                dayValue = dayValue.replace(this.placeholderChar, '');
+            }
+            var date;
+            // Parse day string
+            date = dayValue && this.dateAdapter.parse(dayValue, this.dayPattern) || null;
+            // Reset time
+            date = date && date.utc(true).hour(0).minute(0).seconds(0).millisecond(0);
+            // update date picker
+            this._value = date && this.dateAdapter.parse(date.clone(), DATE_ISO_PATTERN);
+            // Get the model value
+            var dateStr = date && date.isValid() && this.dateAdapter.format(date, DATE_ISO_PATTERN).replace('+00:00', 'Z') || date;
+            //console.debug("[mat-date-time] Setting date: ", dateStr);
+            this.formControl.patchValue(dateStr, { emitEvent: false });
+            //this.formControl.updateValueAndValidity();
+            this.writing = false;
+            this.markForCheck();
+            this._onChangeCallback(dateStr);
+        };
+        MatDate.prototype.checkIfTouched = function () {
+            if (this.dayControl.touched) {
+                this.markForCheck();
+                this._onTouchedCallback();
+            }
+        };
         MatDate.prototype.waitKeyboardHide = function (waitKeyboardDelay) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
@@ -5367,13 +5370,13 @@
     };
     var ɵ0$8 = noop$5;
     var MatDateTime = /** @class */ (function () {
-        function MatDateTime(platform, dateAdapter, translate, formBuilder, keyboard, cd, formGroupDir) {
+        function MatDateTime(platform, dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
             this.platform = platform;
             this.dateAdapter = dateAdapter;
             this.translate = translate;
             this.formBuilder = formBuilder;
-            this.keyboard = keyboard;
             this.cd = cd;
+            this.keyboard = keyboard;
             this.formGroupDir = formGroupDir;
             this._onChangeCallback = noop$5;
             this._onTouchedCallback = noop$5;
@@ -5426,7 +5429,7 @@
         MatDateTime.prototype.ngOnInit = function () {
             var _this = this;
             this.mobile = isNil(this.mobile) ? this.platform.is('mobile') : this.mobile;
-            this.waitHideKeyboardDelay = this.mobile && KEYBOARD_HIDE_DELAY_MS || 0;
+            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>.');
@@ -5550,10 +5553,6 @@
             this.disabling = false;
             this.markForCheck();
         };
-        MatDateTime.prototype.updatePattern = function (patterns) {
-            this.displayPattern = (patterns['COMMON.DATE_TIME_PATTERN'] !== 'COMMON.DATE_TIME_PATTERN' ? patterns['COMMON.DATE_TIME_PATTERN'] : 'L LT');
-            this.dayPattern = (patterns['COMMON.DATE_PATTERN'] !== 'COMMON.DATE_PATTERN' ? patterns['COMMON.DATE_PATTERN'] : 'L');
-        };
         MatDateTime.prototype.onDatePickerChange = function (event) {
             // Make sure event is valid
             if (!event || (event.value !== null && !momentImported.isMoment(event.value))) {
@@ -5594,7 +5593,7 @@
                                 return [2 /*return*/];
                             this.preventEvent(event);
                             // Make sure the keyboard is closed
-                            return [4 /*yield*/, this.hideKeyboard(false)];
+                            return [4 /*yield*/, this.waitKeyboardHide(false)];
                         case 1:
                             // Make sure the keyboard is closed
                             _a.sent();
@@ -5624,7 +5623,7 @@
                                 return [2 /*return*/];
                             this.preventEvent(event);
                             // Make sure the keyboard is closed
-                            return [4 /*yield*/, this.hideKeyboard(true)];
+                            return [4 /*yield*/, this.waitKeyboardHide(true)];
                         case 1:
                             // Make sure the keyboard is closed
                             _a.sent();
@@ -5649,12 +5648,6 @@
                 event.stopPropagation();
             event.returnValue = false;
         };
-        MatDateTime.prototype.checkIfTouched = function () {
-            if (this.dateFormControl.touched || this.timeFormControl.touched) {
-                this._onTouchedCallback();
-                this.markForCheck();
-            }
-        };
         MatDateTime.prototype.focus = function () {
             var _this = this;
             if (!this.matInputs.length)
@@ -5671,26 +5664,24 @@
             this.markAsTouched();
             this.markAsDirty();
         };
-        /* -- protected method -- */
-        MatDateTime.prototype.emitChange = function (value) {
-            // Get the model value
-            var dateStr = toDateISOString(value) || null;
-            if (this.formControl.value !== dateStr) {
-                // DEBUG
-                //console.debug('[matèdate-time] Emit new value: ' + dateStr);
-                // Changes comes from inside function: use the callback
-                this._onChangeCallback(dateStr);
-                // Check if need to update controls
-                this.checkIfTouched();
+        /* -- private method -- */
+        MatDateTime.prototype.updatePattern = function (patterns) {
+            this.displayPattern = (patterns['COMMON.DATE_TIME_PATTERN'] !== 'COMMON.DATE_TIME_PATTERN' ? patterns['COMMON.DATE_TIME_PATTERN'] : 'L LT');
+            this.dayPattern = (patterns['COMMON.DATE_PATTERN'] !== 'COMMON.DATE_PATTERN' ? patterns['COMMON.DATE_PATTERN'] : 'L');
+        };
+        MatDateTime.prototype.checkIfTouched = function () {
+            if (this.dateFormControl.touched || this.timeFormControl.touched) {
+                this._onTouchedCallback();
+                this.markForCheck();
             }
         };
-        MatDateTime.prototype.hideKeyboard = function (waitIsHidden) {
+        MatDateTime.prototype.waitKeyboardHide = function (waitKeyboardDelay) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            if (!this.keyboard.isVisible)
-                                return [2 /*return*/]; // ok, already hidden
+                            if (!this.keyboard || !this.keyboard.isVisible)
+                                return [2 /*return*/]; // ok, already hidden (or not accessible)
                             // Force keyboard to be hide
                             this.keyboard.hide();
                             // Wait hide occur
@@ -5698,8 +5689,8 @@
                         case 1:
                             // Wait hide occur
                             _a.sent();
-                            if (!(this.waitHideKeyboardDelay > 0 && waitIsHidden)) return [3 /*break*/, 3];
-                            return [4 /*yield*/, sleep(this.waitHideKeyboardDelay)];
+                            if (!(this.keyboardHideDelay > 0 && waitKeyboardDelay)) return [3 /*break*/, 3];
+                            return [4 /*yield*/, sleep(this.keyboardHideDelay)];
                         case 2:
                             _a.sent();
                             _a.label = 3;
@@ -5708,6 +5699,18 @@
                 });
             });
         };
+        MatDateTime.prototype.emitChange = function (value) {
+            // Get the model value
+            var dateStr = toDateISOString(value) || null;
+            if (this.formControl.value !== dateStr) {
+                // DEBUG
+                //console.debug('[matèdate-time] Emit new value: ' + dateStr);
+                // Changes comes from inside function: use the callback
+                this._onChangeCallback(dateStr);
+                // Check if need to update controls
+                this.checkIfTouched();
+            }
+        };
         MatDateTime.prototype.updateTabIndex = function () {
             var _this = this;
             if (isNil(this._tabindex) || this._tabindex === -1)
@@ -5750,8 +5753,8 @@
         { type: i1$3.DateAdapter },
         { type: i1$2.TranslateService },
         { type: i1.FormBuilder },
-        { type: ngx.Keyboard },
         { type: i0.ChangeDetectorRef },
+        { type: ngx.Keyboard, decorators: [{ type: i0.Optional }] },
         { type: i1.FormGroupDirective, decorators: [{ type: i0.Optional }] }
     ]; };
     MatDateTime.propDecorators = {
@@ -5831,7 +5834,7 @@
             var _this = this;
             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>.');
+                throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-date-short-field>.');
             // 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);
@@ -6208,7 +6211,7 @@
             }
             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>.');
+                throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-duration-field>.');
             this.required = toBoolean(this.required, this.formControl.validator === i1.Validators.required);
             // Redirect errors from main control, into day sub control
             var $error = new rxjs.BehaviorSubject(null);
@@ -6605,7 +6608,7 @@
     MatBooleanField.decorators = [
         { type: i0.Component, args: [{
                     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  <div class=\"cdk-visually-hidden\">\n    <div #suffix><ng-content select=\"[matSuffix]\"></ng-content></div>\n  </div>\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",
+                    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$1
                     ],
@@ -6643,8 +6646,7 @@
         yesButton: [{ type: i0.ViewChild, args: ['yesButton',] }],
         noButton: [{ type: i0.ViewChild, args: ['noButton',] }],
         checkboxButton: [{ type: i0.ViewChild, args: ['checkboxButton',] }],
-        fakeInput: [{ type: i0.ViewChild, args: ['fakeInput',] }],
-        suffixDiv: [{ type: i0.ViewChild, args: ['suffix', { static: false },] }]
+        fakeInput: [{ type: i0.ViewChild, args: ['fakeInput',] }]
     };
 
     var SharedMatBooleanModule = /** @class */ (function () {
@@ -7882,7 +7884,7 @@
             // Wait a debounce time
             operators.debounceTime(this.debounceTime)
             // DEBUG
-            //tap((value) => console.debug(this.logPrefix + ' Search text changes:', value))
+            //,tap((value) => this.debug && console.debug(this.logPrefix + ' Search text changes:', value))
             ), 
             // Object set: use it (no distinctUntilChanged() pipe need)
             this.inputControl.valueChanges
@@ -7898,18 +7900,25 @@
             rxjs.merge(
             // Focus or click => Load all
             rxjs.merge(this.focused, this.clicked)
-                .pipe(operators.filter(function (_) { return _this.enabled; }), operators.map(function (_) { return _this.showAllOnFocus ? '*' : _this.inputControl.value; })), rxjs.merge(this.$inputItems, this._$filter)
+                .pipe(operators.filter(function (_) { return _this.enabled; }), operators.map(function (_) { return _this.showAllOnFocus ? '*' : _this.inputControl.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.enabled; }), operators.map(function (_) { return _this.inputControl.value; })))
                 .pipe(
             // Make sure there is enough characters
             operators.filter(thresholdFilterFn), 
             // Distinguish changes
-            operators.distinctUntilChanged()))
+            // - do NOT filter if loading, to force update after a blur event
+            operators.distinctUntilChanged(function (v1, v2) { return !_this.loading && (v1 === v2 || _this.equals(v1, v2)); })
+            // DEBUG
+            //,tap(value => this.debug && console.debug(this.logPrefix + ' Received update event: ', value))
+            ))
                 .pipe(
             // Suggest values
             operators.mergeMap(function (value) { return _this.suggest(value, _this.filter); }), 
             // DEBUG
-            //tap(items => console.debug(this.logPrefix + ' Received from suggest: ', items)),
+            //tap(items => this.debug && console.debug(this.logPrefix + ' Received from suggest: ', items)),
             // Store implicit value (will use it onBlur if not other value selected)
             operators.tap(function (items) { return _this.updateImplicitValue(items); }));
             // Fetch more events
@@ -7930,7 +7939,10 @@
                 .subscribe(function (items) { return _this.$filteredItems.next(items); }));
             // Applying implicit value, on blur
             this._subscription.add(this.blurred
-                .pipe(operators.map(function (_) { return _this.formControl.value; }))
+                .pipe(operators.map(function (_) { return _this.formControl.value; })
+            // DEBUG
+            //,tap(value => this.debug && console.debug(this.logPrefix + ' Received blurred event: ', value)),
+            )
                 .subscribe(function (value) {
                 // When leave component without object, use implicit value if :
                 // - an explicit value
@@ -8042,6 +8054,8 @@
             this._reload$.next(value || '*');
         };
         MatChipsField.prototype.writeValue = function (value) {
+            // DEBUG
+            // if (this.debug) console.debug(this.logPrefix + ' Writing value: ', value);
             if (value && !Array.isArray(value)) {
                 value = [value];
             }
@@ -8312,9 +8326,9 @@
         showLoadingSpinner: [{ type: i0.Input }],
         chipColor: [{ type: i0.Input }],
         debug: [{ type: i0.Input }],
-        clicked: [{ type: i0.Output }],
-        blurred: [{ type: i0.Output }],
-        focused: [{ type: i0.Output }],
+        clicked: [{ type: i0.Output, args: ['click',] }],
+        blurred: [{ type: i0.Output, args: ['blur',] }],
+        focused: [{ type: i0.Output, args: ['focus',] }],
         dropButtonClick: [{ type: i0.Output }],
         keydownEscape: [{ type: i0.Output, args: ['keydown.escape',] }],
         keyupEnter: [{ type: i0.Output, args: ['keyup.enter',] }],
@@ -9101,7 +9115,7 @@
     AppFormField.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-form-field',
-                    template: "<ng-container [ngSwitch]=\"type\">\n\n  <!-- integer -->\n  <mat-form-field *ngSwitchCase=\"'integer'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n    <input matInput #matInput\n           type=\"number\"\n           autocomplete=\"off\"\n           [readonly]=\"readonly\"\n           [min]=\"definition.minValue\"\n           [max]=\"definition.maxValue\"\n           pattern=\"-?[0-9]*\"\n           step=\"1\"\n           [appAutofocus]=\"autofocus\"\n           [placeholder]=\"placeholder\"\n           (keyup.enter)=\"onKeyupEnter.emit($event)\"\n           (keypress)=\"filterNumberInput($event, false)\"\n           [formControl]=\"formControl\"\n           [required]=\"required\"\n           [tabIndex]=\"tabindex\"\n           (click)=\"selectInputContent($event)\">\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{(compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate:formControl.errors['min'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('pattern')\">\n      {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('integer')\">\n      {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- double -->\n  <mat-form-field *ngSwitchCase=\"'double'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n\n    <input matInput #matInput\n           type=\"number\"\n           decimal=\"true\"\n           autocomplete=\"off\"\n           [min]=\"definition.minValue\"\n           [max]=\"definition.maxValue\"\n           [appAutofocus]=\"autofocus\"\n           [readonly]=\"readonly\"\n           [placeholder]=\"placeholder\"\n           [step]=\"numberInputStep\"\n           (keypress)=\"filterNumberInput($event, true)\"\n           [formControl]=\"formControl\"\n           [required]=\"required\"\n           [tabIndex]=\"tabindex\"\n           (click)=\"selectInputContent($event)\">\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN')| translate:formControl.errors['min'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('maxDecimals')\">\n      {{ (compact ? 'ERROR.FIELD_MAXIMUM_DECIMALS_COMPACT' : 'ERROR.FIELD_MAXIMUM_DECIMALS')| translate:{max:\n      definition.maximumNumberDecimals} }}</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- boolean -->\n  <mat-boolean-field *ngSwitchCase=\"'boolean'\" #matInput\n                     [class]=\"classList\"\n                     [formControl]=\"formControl\"\n                     [placeholder]=\"placeholder\"\n                     [floatLabel]=\"floatLabel\"\n                     [required]=\"required\"\n                     [compact]=\"compact\"\n                     [tabindex]=\"tabindex\"\n                     [readonly]=\"readonly\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-boolean-field>\n\n  <!-- date -->\n  <mat-date-field *ngSwitchCase=\"'date'\" #matInput\n                  [class]=\"classList\"\n                  [formControl]=\"formControl\"\n                  [placeholder]=\"compact ? ('COMMON.DATE_PLACEHOLDER'|translate): placeholder\"\n                  [floatLabel]=\"floatLabel\"\n                  [required]=\"required\"\n                  [readonly]=\"readonly\"\n                  [compact]=\"compact\"\n                  [tabindex]=\"tabindex\"\n                  [autofocus]=\"autofocus\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-date-field>\n\n  <!-- date time -->\n  <mat-date-time-field *ngSwitchCase=\"'dateTime'\"\n                       [class]=\"classList\"\n                       [formControl]=\"formControl\"\n                       [placeholder]=\"compact ? ('COMMON.DATE_TIME_PLACEHOLDER'|translate): placeholder\"\n                       [floatLabel]=\"floatLabel\"\n                       [required]=\"required\"\n                       [readonly]=\"readonly\"\n                       [compact]=\"compact\"\n                       [tabindex]=\"tabindex\"\n                       [autofocus]=\"autofocus\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-date-time-field>\n\n  <!-- enum -->\n  <mat-form-field *ngSwitchCase=\"'enum'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n    <mat-select [formControl]=\"formControl\"\n                [placeholder]=\"placeholder\"\n                [required]=\"required\"\n                [tabindex]=\"tabindex\"\n                (keyup.enter)=\"onKeyupEnter.emit($event)\">\n      <mat-option *ngFor=\"let item of definition.values\" [value]=\"item.key || item\">{{ (item.value || item) | translate }}</mat-option>\n    </mat-select>\n\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- color -->\n  <mat-form-field *ngSwitchCase=\"'color'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n\n    <ion-icon margin-right name=\"color-fill\" matPrefix></ion-icon>\n\n    <input matInput autocomplete=\"off\"\n           [appAutofocus]=\"autofocus\"\n           [formControl]=\"formControl\"\n           [style.color]=\"getColorContrast(formControl.value)\"\n           [style.background]=\"formControl.value\"\n           [colorPicker]=\"formControl.value\"\n           (colorPickerChange)=\"writeValue($event)\"\n           [cpSaveClickOutside]=\"true\"\n           cpPosition=\"top\"\n           cpOutputFormat=\"hex\"\n           [cpOKButton]=\"false\"\n           [required]=\"required\"/>\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n  </mat-form-field>\n\n  <!-- string -->\n  <mat-form-field *ngSwitchCase=\"'string'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n    <input matInput #matInput\n           autocomplete=\"off\"\n           [appAutofocus]=\"autofocus\"\n           [formControl]=\"formControl\"\n           [placeholder]=\"placeholder\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [tabIndex]=\"tabindex\"\n           (click)=\"selectInputContent($event)\"\n           (keypress)=\"filterAlphanumericalInput($event)\"\n           (keyup.enter)=\"onKeyupEnter.emit($event)\">\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- auto-complete -->\n  <mat-autocomplete-field *ngSwitchCase=\"'entity'\"\n                          [class]=\"classList\"\n                          [autofocus]=\"autofocus\"\n                          [placeholder]=\"placeholder\"\n                          [floatLabel]=\"floatLabel\"\n                          [formControl]=\"formControl\"\n                          [config]=\"definition.autocomplete\"\n                          [required]=\"required\"\n                          [displayWith]=\"getDisplayValueFn(definition)\">\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <ng-content select=\"[matSuffix]\"></ng-content>\n  </mat-autocomplete-field>\n\n  <!-- multi auto-complete -->\n  <mat-chips-field *ngSwitchCase=\"'entities'\"\n                    [class]=\"classList\"\n                    [placeholder]=\"placeholder\"\n                    [floatLabel]=\"floatLabel\"\n                    [formControl]=\"formControl\"\n                    [config]=\"definition.autocomplete\"\n                    [required]=\"required\"\n                    [displayWith]=\"getDisplayValueFn(definition)\">\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <ng-content select=\"[matSuffix]\"></ng-content>\n  </mat-chips-field>\n\n  <!-- other -->\n  <div *ngSwitchDefault>\n    <mat-error *ngIf=\"type\">Unknown type {{type}} for option {{definition.key}}. Please report this error.</mat-error>\n    <mat-error *ngIf=\"!type\">Error on option field. Please check console log for details.</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </div>\n\n</ng-container>\n",
+                    template: "<ng-container [ngSwitch]=\"type\">\n\n  <!-- integer -->\n  <mat-form-field *ngSwitchCase=\"'integer'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n    <input matInput #matInput\n           type=\"number\"\n           autocomplete=\"off\"\n           [readonly]=\"readonly\"\n           [min]=\"definition.minValue\"\n           [max]=\"definition.maxValue\"\n           pattern=\"-?[0-9]*\"\n           step=\"1\"\n           [appAutofocus]=\"autofocus\"\n           [placeholder]=\"placeholder\"\n           (keyup.enter)=\"onKeyupEnter.emit($event)\"\n           (keypress)=\"filterNumberInput($event, false)\"\n           [formControl]=\"formControl\"\n           [required]=\"required\"\n           [tabIndex]=\"tabindex\"\n           (click)=\"selectInputContent($event)\">\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{(compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate:formControl.errors['min'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('pattern')\">\n      {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('integer')\">\n      {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- double -->\n  <mat-form-field *ngSwitchCase=\"'double'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n\n    <input matInput #matInput\n           type=\"number\"\n           decimal=\"true\"\n           autocomplete=\"off\"\n           [min]=\"definition.minValue\"\n           [max]=\"definition.maxValue\"\n           [appAutofocus]=\"autofocus\"\n           [readonly]=\"readonly\"\n           [placeholder]=\"placeholder\"\n           [step]=\"numberInputStep\"\n           (keypress)=\"filterNumberInput($event, true)\"\n           [formControl]=\"formControl\"\n           [required]=\"required\"\n           [tabIndex]=\"tabindex\"\n           (click)=\"selectInputContent($event)\">\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN')| translate:formControl.errors['min'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('maxDecimals')\">\n      {{ (compact ? 'ERROR.FIELD_MAXIMUM_DECIMALS_COMPACT' : 'ERROR.FIELD_MAXIMUM_DECIMALS')| translate:{max:\n      definition.maximumNumberDecimals} }}</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- boolean -->\n  <mat-boolean-field *ngSwitchCase=\"'boolean'\" #matInput\n                     [class]=\"classList\"\n                     [formControl]=\"formControl\"\n                     [placeholder]=\"placeholder\"\n                     [floatLabel]=\"floatLabel\"\n                     [required]=\"required\"\n                     [compact]=\"compact\"\n                     [tabindex]=\"tabindex\"\n                     [readonly]=\"readonly\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-boolean-field>\n\n  <!-- date -->\n  <mat-date-field *ngSwitchCase=\"'date'\" #matInput\n                  [class]=\"classList\"\n                  [formControl]=\"formControl\"\n                  [placeholder]=\"compact ? ('COMMON.DATE_PLACEHOLDER'|translate): placeholder\"\n                  [floatLabel]=\"floatLabel\"\n                  [required]=\"required\"\n                  [readonly]=\"readonly\"\n                  [compact]=\"compact\"\n                  [tabindex]=\"tabindex\"\n                  [autofocus]=\"autofocus\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-date-field>\n\n  <!-- date time -->\n  <mat-date-time-field *ngSwitchCase=\"'dateTime'\" #matInput\n                       [class]=\"classList\"\n                       [formControl]=\"formControl\"\n                       [placeholder]=\"compact ? ('COMMON.DATE_TIME_PLACEHOLDER'|translate): placeholder\"\n                       [floatLabel]=\"floatLabel\"\n                       [required]=\"required\"\n                       [readonly]=\"readonly\"\n                       [compact]=\"compact\"\n                       [tabindex]=\"tabindex\"\n                       [autofocus]=\"autofocus\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-date-time-field>\n\n  <!-- enum -->\n  <mat-form-field *ngSwitchCase=\"'enum'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n    <mat-select [formControl]=\"formControl\"\n                [placeholder]=\"placeholder\"\n                [required]=\"required\"\n                [tabindex]=\"tabindex\"\n                (keyup.enter)=\"onKeyupEnter.emit($event)\">\n      <mat-option *ngFor=\"let item of definition.values\" [value]=\"item.key || item\">{{ (item.value || item) | translate }}</mat-option>\n    </mat-select>\n\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- color -->\n  <mat-form-field *ngSwitchCase=\"'color'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n\n    <ion-icon margin-right name=\"color-fill\" matPrefix></ion-icon>\n\n    <input matInput autocomplete=\"off\"\n           [appAutofocus]=\"autofocus\"\n           [formControl]=\"formControl\"\n           [style.color]=\"getColorContrast(formControl.value)\"\n           [style.background]=\"formControl.value\"\n           [colorPicker]=\"formControl.value\"\n           (colorPickerChange)=\"writeValue($event)\"\n           [cpSaveClickOutside]=\"true\"\n           cpPosition=\"top\"\n           cpOutputFormat=\"hex\"\n           [cpOKButton]=\"false\"\n           [required]=\"required\"/>\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n  </mat-form-field>\n\n  <!-- string -->\n  <mat-form-field *ngSwitchCase=\"'string'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n    <input matInput #matInput\n           autocomplete=\"off\"\n           [appAutofocus]=\"autofocus\"\n           [formControl]=\"formControl\"\n           [placeholder]=\"placeholder\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [tabIndex]=\"tabindex\"\n           (click)=\"selectInputContent($event)\"\n           (keypress)=\"filterAlphanumericalInput($event)\"\n           (keyup.enter)=\"onKeyupEnter.emit($event)\">\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- auto-complete -->\n  <mat-autocomplete-field *ngSwitchCase=\"'entity'\"\n                          [class]=\"classList\"\n                          [autofocus]=\"autofocus\"\n                          [placeholder]=\"placeholder\"\n                          [floatLabel]=\"floatLabel\"\n                          [formControl]=\"formControl\"\n                          [config]=\"definition.autocomplete\"\n                          [required]=\"required\"\n                          [displayWith]=\"getDisplayValueFn(definition)\">\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <ng-content select=\"[matSuffix]\"></ng-content>\n  </mat-autocomplete-field>\n\n  <!-- multi auto-complete -->\n  <mat-chips-field *ngSwitchCase=\"'entities'\"\n                    [class]=\"classList\"\n                    [placeholder]=\"placeholder\"\n                    [floatLabel]=\"floatLabel\"\n                    [formControl]=\"formControl\"\n                    [config]=\"definition.autocomplete\"\n                    [required]=\"required\"\n                    [displayWith]=\"getDisplayValueFn(definition)\">\n    <ng-content select=\"[matPrefix]\"></ng-content>\n    <ng-content select=\"[matSuffix]\"></ng-content>\n  </mat-chips-field>\n\n  <!-- other -->\n  <div *ngSwitchDefault>\n    <mat-error *ngIf=\"type\">Unknown type {{type}} for option {{definition.key}}. Please report this error.</mat-error>\n    <mat-error *ngIf=\"!type\">Error on option field. Please check console log for details.</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </div>\n\n</ng-container>\n",
                     providers: [
                         {
                             provide: i1.NG_VALUE_ACCESSOR,
@@ -20107,7 +20121,7 @@
                     _this.form.get('username').setValidators(i1.Validators.required);
                 }
                 // Enable/disable registration link
-                _this.canRegister = config.getProperty(CORE_CONFIG_OPTIONS.REGISTRATION_ENABLE);
+                _this.canRegister = config.getPropertyAsBoolean(CORE_CONFIG_OPTIONS.REGISTRATION_ENABLE);
                 _this.markForCheck();
             }));
             // For DEV only
@@ -24724,13 +24738,6 @@
         AppTable.prototype.markAsLoaded = function (opts) {
             this.setLoading(false, opts);
         };
-        AppTable.prototype.markRowAsDirty = function (row, opts) {
-            var _a;
-            row = row || this.editedRow;
-            if (row)
-                (_a = row.validator) === null || _a === void 0 ? void 0 : _a.markAsDirty(opts);
-            this.markAsDirty(opts);
-        };
         AppTable.prototype.markAsReady = function (opts) {
             if (this.readySubject.value !== true) {
                 this.readySubject.next(true);
@@ -26083,6 +26090,13 @@
         AppTable.prototype.equals = function (d1, d2) {
             return EntityUtils.equals(d1, d2, 'id');
         };
+        AppTable.prototype.markRowAsDirty = function (row, opts) {
+            var _a;
+            row = row || this.editedRow;
+            if (row)
+                (_a = row.validator) === null || _a === void 0 ? void 0 : _a.markAsDirty(opts);
+            this.markAsDirty(opts);
+        };
         /* -- private method -- */
         AppTable.prototype.setLoading = function (value, opts) {
             if (this.loadingSubject.value !== value) {