@sumaris-net/ngx-components 1.6.6 → 1.6.11

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

@@ -1189,9 +1189,10 @@ class MatAutocompleteField {
         // Filter if not enough character
         filter(value => value.length >= this.suggestLengthThreshold), 
         // Wait a debounce time
-        debounceTime(this.debounceTime), 
+        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.formControl.valueChanges
             .pipe(startWith(this.formControl.value), filter(value => (this.searchable && isNotNil(value) && typeof value === 'object')), tap(value => {
@@ -1207,35 +1208,38 @@ class MatAutocompleteField {
                     this.matInputText.nativeElement.value = this.displayValue;
                 }
             }
-        }), 
+        })
         // DEBUG
-        tap(value => 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(filter(event => this.searchable && this.enabled && (!event || !event.defaultPrevented)), map(_ => this.showAllOnFocus ? '*' : this.formControl.value), 
-        // Make enough characters
+        // Make sure there is enough characters
         filter(thresholdFilterFn)), 
         // Merge some observables, with a common distinctUntilChanged() pipe, and NO debounceTime
         merge(
         // Focus or click => Load all
         merge(this.focused, this.clicked)
-            .pipe(filter(_ => this.enabled && this.searchable), map(_ => this.showAllOnFocus ? '*' : this.formControl.value), 
-        // DEBUG
-        tap(value => this.debug && console.debug(this.logPrefix + ' Received focused or clicked event: ', value))), merge(this.$inputItems, this._$filter)
-            .pipe(filter(_ => this.searchable && this.enabled), map(_ => this.formControl.value), 
+            .pipe(filter(_ => this.enabled && this.searchable), map(_ => this.showAllOnFocus ? '*' : this.formControl.value)
         // DEBUG
-        tap(value => 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))
+        ), merge(this.$inputItems, this._$filter)
+            .pipe(filter(_ => this.searchable && this.enabled), map(_ => this.formControl.value)))
             .pipe(
         // Make sure there is enough characters
         filter(thresholdFilterFn), 
         // Distinguish changes
         // - do NOT filter if loading, to force update after a blur event
-        distinctUntilChanged((v1, v2) => !this.loading && (v1 === v2 || this.equals(v1, v2)))))
+        distinctUntilChanged((v1, v2) => !this.loading && (v1 === v2 || this.equals(v1, v2)))
+        // DEBUG
+        //,tap(value => this.debug && console.debug(this.logPrefix + ' Received update event: ', value))
+        ))
             .pipe(
         // Suggest values
         mergeMap(value => this.suggest(value, this.filter)), 
         // DEBUG
-        tap(items => 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)
         tap(items => this.updateImplicitValue(items)));
         // Fetch more events
@@ -1268,9 +1272,10 @@ class MatAutocompleteField {
         this._subscription.add(this.blurred
             .pipe(
         // Skip if not searchable
-        filter(_ => this.searchable), map(_ => this.formControl.value), 
+        filter(_ => this.searchable), map(_ => this.formControl.value)
         // DEBUG
-        tap(value => console.debug(this.logPrefix + ' Received blurred event: ', value)))
+        //,tap(value => this.debug && console.debug(this.logPrefix + ' Received blurred event: ', value)),
+        )
             .subscribe(value => {
             // When leave component without object, use implicit value if :
             // - an explicit value
@@ -1356,7 +1361,7 @@ class MatAutocompleteField {
     }
     writeValue(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);
@@ -1394,18 +1399,16 @@ class MatAutocompleteField {
                 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');
         const 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;
         }
@@ -4502,7 +4505,7 @@ class MatDate {
     ngOnInit() {
         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 === Validators.required);
         // Redirect errors from main control, into day sub control
         const $error = new BehaviorSubject(null);
@@ -4599,44 +4602,6 @@ class MatDate {
         this.markForCheck();
         this._onChangeCallback(dateStr);
     }
-    updatePattern(pattern) {
-        pattern = pattern !== 'COMMON.DATE_PATTERN' ? pattern : 'L';
-        if (this.displayPattern !== pattern) {
-            this.displayPattern = pattern;
-            this.dayPattern = pattern;
-            this.markForCheck();
-        }
-    }
-    onFormChange(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, '');
-        }
-        let 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
-        const 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);
-    }
-    checkIfTouched() {
-        if (this.dayControl.touched) {
-            this.markForCheck();
-            this._onTouchedCallback();
-        }
-    }
     openDatePickerIfMobile(event, datePicker) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.mobile || event.defaultPrevented)
@@ -4676,7 +4641,45 @@ class MatDate {
             }
         });
     }
-    /* -- protected method -- */
+    /* -- private method -- */
+    updatePattern(pattern) {
+        pattern = pattern !== 'COMMON.DATE_PATTERN' ? pattern : 'L';
+        if (this.displayPattern !== pattern) {
+            this.displayPattern = pattern;
+            this.dayPattern = pattern;
+            this.markForCheck();
+        }
+    }
+    onFormChange(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, '');
+        }
+        let 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
+        const 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);
+    }
+    checkIfTouched() {
+        if (this.dayControl.touched) {
+            this.markForCheck();
+            this._onTouchedCallback();
+        }
+    }
     waitKeyboardHide(waitKeyboardDelay) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.keyboard || !this.keyboard.isVisible)
@@ -4756,13 +4759,13 @@ const noop$5 = () => {
 };
 const ɵ0$8 = noop$5;
 class MatDateTime {
-    constructor(platform, dateAdapter, translate, formBuilder, keyboard, cd, formGroupDir) {
+    constructor(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;
@@ -4801,7 +4804,7 @@ class MatDateTime {
     }
     ngOnInit() {
         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>.');
@@ -4925,10 +4928,6 @@ class MatDateTime {
         this.disabling = false;
         this.markForCheck();
     }
-    updatePattern(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');
-    }
     onDatePickerChange(event) {
         // Make sure event is valid
         if (!event || (event.value !== null && !isMoment(event.value))) {
@@ -4966,7 +4965,7 @@ class MatDateTime {
                 return;
             this.preventEvent(event);
             // Make sure the keyboard is closed
-            yield this.hideKeyboard(false);
+            yield this.waitKeyboardHide(false);
             // Open the picker
             this.openDatePicker(null, datePicker);
         });
@@ -4987,7 +4986,7 @@ class MatDateTime {
                 return;
             this.preventEvent(event);
             // Make sure the keyboard is closed
-            yield this.hideKeyboard(true);
+            yield this.waitKeyboardHide(true);
             // Open the picker
             this.openTimePicker(null);
         });
@@ -5006,12 +5005,6 @@ class MatDateTime {
             event.stopPropagation();
         event.returnValue = false;
     }
-    checkIfTouched() {
-        if (this.dateFormControl.touched || this.timeFormControl.touched) {
-            this._onTouchedCallback();
-            this.markForCheck();
-        }
-    }
     focus() {
         if (!this.matInputs.length)
             return;
@@ -5027,7 +5020,31 @@ class MatDateTime {
         this.markAsTouched();
         this.markAsDirty();
     }
-    /* -- protected method -- */
+    /* -- private method -- */
+    updatePattern(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');
+    }
+    checkIfTouched() {
+        if (this.dateFormControl.touched || this.timeFormControl.touched) {
+            this._onTouchedCallback();
+            this.markForCheck();
+        }
+    }
+    waitKeyboardHide(waitKeyboardDelay) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.keyboard || !this.keyboard.isVisible)
+                return; // ok, already hidden (or not accessible)
+            // Force keyboard to be hide
+            this.keyboard.hide();
+            // Wait hide occur
+            yield this.keyboard.onKeyboardHide().pipe(first()).toPromise();
+            // Wait an additional delay if need (depending on the OS)
+            if (this.keyboardHideDelay > 0 && waitKeyboardDelay) {
+                yield sleep(this.keyboardHideDelay);
+            }
+        });
+    }
     emitChange(value) {
         // Get the model value
         const dateStr = toDateISOString(value) || null;
@@ -5040,20 +5057,6 @@ class MatDateTime {
             this.checkIfTouched();
         }
     }
-    hideKeyboard(waitIsHidden) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.keyboard.isVisible)
-                return; // ok, already hidden
-            // Force keyboard to be hide
-            this.keyboard.hide();
-            // Wait hide occur
-            yield this.keyboard.onKeyboardHide().pipe(first()).toPromise();
-            // Wait an additional delay if need (depending on the OS)
-            if (this.waitHideKeyboardDelay > 0 && waitIsHidden) {
-                yield sleep(this.waitHideKeyboardDelay);
-            }
-        });
-    }
     updateTabIndex() {
         if (isNil(this._tabindex) || this._tabindex === -1)
             return; // skip
@@ -5094,8 +5097,8 @@ MatDateTime.ctorParameters = () => [
     { type: DateAdapter },
     { type: TranslateService },
     { type: FormBuilder },
-    { type: Keyboard },
     { type: ChangeDetectorRef },
+    { type: Keyboard, decorators: [{ type: Optional }] },
     { type: FormGroupDirective, decorators: [{ type: Optional }] }
 ];
 MatDateTime.propDecorators = {
@@ -5165,7 +5168,7 @@ class MatDateShort {
     ngOnInit() {
         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
         const $error = new BehaviorSubject(null);
         this.required = toBoolean(this.required, this.formControl.validator === Validators.required);
@@ -5507,7 +5510,7 @@ class MatDuration {
         }
         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 === Validators.required);
         // Redirect errors from main control, into day sub control
         const $error = new BehaviorSubject(null);
@@ -5886,7 +5889,7 @@ class MatBooleanField {
 MatBooleanField.decorators = [
     { type: 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
                 ],
@@ -5924,8 +5927,7 @@ MatBooleanField.propDecorators = {
     yesButton: [{ type: ViewChild, args: ['yesButton',] }],
     noButton: [{ type: ViewChild, args: ['noButton',] }],
     checkboxButton: [{ type: ViewChild, args: ['checkboxButton',] }],
-    fakeInput: [{ type: ViewChild, args: ['fakeInput',] }],
-    suffixDiv: [{ type: ViewChild, args: ['suffix', { static: false },] }]
+    fakeInput: [{ type: ViewChild, args: ['fakeInput',] }]
 };
 
 class SharedMatBooleanModule {
@@ -7004,7 +7006,7 @@ class MatChipsField {
         // Wait a debounce time
         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
@@ -7020,18 +7022,25 @@ class MatChipsField {
         merge(
         // Focus or click => Load all
         merge(this.focused, this.clicked)
-            .pipe(filter(_ => this.enabled), map((_) => this.showAllOnFocus ? '*' : this.inputControl.value)), merge(this.$inputItems, this._$filter)
+            .pipe(filter(_ => this.enabled), map((_) => this.showAllOnFocus ? '*' : this.inputControl.value)
+        // DEBUG
+        //,tap(value => this.debug && console.debug(this.logPrefix + ' Received focused or clicked event: ', value))
+        ), merge(this.$inputItems, this._$filter)
             .pipe(filter(_ => this.enabled), map(_ => this.inputControl.value)))
             .pipe(
         // Make sure there is enough characters
         filter(thresholdFilterFn), 
         // Distinguish changes
-        distinctUntilChanged()))
+        // - do NOT filter if loading, to force update after a blur event
+        distinctUntilChanged((v1, v2) => !this.loading && (v1 === v2 || this.equals(v1, v2)))
+        // DEBUG
+        //,tap(value => this.debug && console.debug(this.logPrefix + ' Received update event: ', value))
+        ))
             .pipe(
         // Suggest values
         mergeMap(value => 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)
         tap(items => this.updateImplicitValue(items)));
         // Fetch more events
@@ -7052,7 +7061,10 @@ class MatChipsField {
             .subscribe(items => this.$filteredItems.next(items)));
         // Applying implicit value, on blur
         this._subscription.add(this.blurred
-            .pipe(map(_ => this.formControl.value))
+            .pipe(map(_ => this.formControl.value)
+        // DEBUG
+        //,tap(value => this.debug && console.debug(this.logPrefix + ' Received blurred event: ', value)),
+        )
             .subscribe(value => {
             // When leave component without object, use implicit value if :
             // - an explicit value
@@ -7164,6 +7176,8 @@ class MatChipsField {
         this._reload$.next(value || '*');
     }
     writeValue(value) {
+        // DEBUG
+        // if (this.debug) console.debug(this.logPrefix + ' Writing value: ', value);
         if (value && !Array.isArray(value)) {
             value = [value];
         }
@@ -7415,9 +7429,9 @@ MatChipsField.propDecorators = {
     showLoadingSpinner: [{ type: Input }],
     chipColor: [{ type: Input }],
     debug: [{ type: Input }],
-    clicked: [{ type: Output }],
-    blurred: [{ type: Output }],
-    focused: [{ type: Output }],
+    clicked: [{ type: Output, args: ['click',] }],
+    blurred: [{ type: Output, args: ['blur',] }],
+    focused: [{ type: Output, args: ['focus',] }],
     dropButtonClick: [{ type: Output }],
     keydownEscape: [{ type: Output, args: ['keydown.escape',] }],
     keyupEnter: [{ type: Output, args: ['keyup.enter',] }],
@@ -8135,7 +8149,7 @@ class AppFormField {
 AppFormField.decorators = [
     { type: Component, args: [{
                 selector: 'app-form-field',
-                template: "<ng-container [ngSwitch]=\"type\">\n\n  <!-- integer -->\n  <mat-form-field *ngSwitchCase=\"'integer'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n    <input matInput #matInput\n           type=\"number\"\n           autocomplete=\"off\"\n           [readonly]=\"readonly\"\n           [min]=\"definition.minValue\"\n           [max]=\"definition.maxValue\"\n           pattern=\"-?[0-9]*\"\n           step=\"1\"\n           [appAutofocus]=\"autofocus\"\n           [placeholder]=\"placeholder\"\n           (keyup.enter)=\"onKeyupEnter.emit($event)\"\n           (keypress)=\"filterNumberInput($event, false)\"\n           [formControl]=\"formControl\"\n           [required]=\"required\"\n           [tabIndex]=\"tabindex\"\n           (click)=\"selectInputContent($event)\">\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{(compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate:formControl.errors['min'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('pattern')\">\n      {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('integer')\">\n      {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>\n\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- double -->\n  <mat-form-field *ngSwitchCase=\"'double'\" [floatLabel]=\"floatLabel\" [class]=\"classList\">\n\n    <input matInput #matInput\n           type=\"number\"\n           decimal=\"true\"\n           autocomplete=\"off\"\n           [min]=\"definition.minValue\"\n           [max]=\"definition.maxValue\"\n           [appAutofocus]=\"autofocus\"\n           [readonly]=\"readonly\"\n           [placeholder]=\"placeholder\"\n           [step]=\"numberInputStep\"\n           (keypress)=\"filterNumberInput($event, true)\"\n           [formControl]=\"formControl\"\n           [required]=\"required\"\n           [tabIndex]=\"tabindex\"\n           (click)=\"selectInputContent($event)\">\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN')| translate:formControl.errors['min'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('maxDecimals')\">\n      {{ (compact ? 'ERROR.FIELD_MAXIMUM_DECIMALS_COMPACT' : 'ERROR.FIELD_MAXIMUM_DECIMALS')| translate:{max:\n      definition.maximumNumberDecimals} }}</mat-error>\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <!-- boolean -->\n  <mat-boolean-field *ngSwitchCase=\"'boolean'\" #matInput\n                     [class]=\"classList\"\n                     [formControl]=\"formControl\"\n                     [placeholder]=\"placeholder\"\n                     [floatLabel]=\"floatLabel\"\n                     [required]=\"required\"\n                     [compact]=\"compact\"\n                     [tabindex]=\"tabindex\"\n                     [readonly]=\"readonly\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-boolean-field>\n\n  <!-- date -->\n  <mat-date-field *ngSwitchCase=\"'date'\" #matInput\n                  [class]=\"classList\"\n                  [formControl]=\"formControl\"\n                  [placeholder]=\"compact ? ('COMMON.DATE_PLACEHOLDER'|translate): placeholder\"\n                  [floatLabel]=\"floatLabel\"\n                  [required]=\"required\"\n                  [readonly]=\"readonly\"\n                  [compact]=\"compact\"\n                  [tabindex]=\"tabindex\"\n                  [autofocus]=\"autofocus\">\n    <div matSuffix>\n      <ng-content select=\"[matSuffix]\"></ng-content>\n    </div>\n  </mat-date-field>\n\n  <!-- date time -->\n  <mat-date-time-field *ngSwitchCase=\"'dateTime'\"\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: NG_VALUE_ACCESSOR,
@@ -17511,7 +17525,7 @@ class AuthForm extends AppForm {
                 this.form.get('username').setValidators(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
@@ -21381,13 +21395,6 @@ class AppTable {
     markAsLoaded(opts) {
         this.setLoading(false, opts);
     }
-    markRowAsDirty(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);
-    }
     markAsReady(opts) {
         if (this.readySubject.value !== true) {
             this.readySubject.next(true);
@@ -22508,6 +22515,13 @@ class AppTable {
     equals(d1, d2) {
         return EntityUtils.equals(d1, d2, 'id');
     }
+    markRowAsDirty(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 -- */
     setLoading(value, opts) {
         if (this.loadingSubject.value !== value) {