@sumaris-net/ngx-components 1.3.11 → 1.4.3

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

@@ -1266,7 +1266,6 @@
             this.required = false;
             this.clearable = false;
             this.debounceTime = null;
-            this.highlightAccent = false;
             this.i18nPrefix = 'REFERENTIAL.';
             this.noResultMessage = 'COMMON.NO_RESULT';
             this.matAutocompletePosition = 'auto';
@@ -1401,9 +1400,10 @@
                 this.mobile = toBoolean(this.mobile, this.config.mobile);
                 this.suggestLengthThreshold = toNumber(this.suggestLengthThreshold, this.config.suggestLengthThreshold || 0);
                 this.showAllOnFocus = toBoolean(this.showAllOnFocus, toBoolean(this.config.showAllOnFocus, this.suggestLengthThreshold === 0));
-                this.showPanelOnFocus = toBoolean(this.showPanelOnFocus, toBoolean(this.config.showPanelOnFocus, true));
+                this.showPanelOnFocus = toBoolean(this.showPanelOnFocus, toBoolean(this.config.showPanelOnFocus));
                 this.classList = this.classList || this.config.class;
                 this.debounceTime = toNumber(this.debounceTime, this.config.debounceTime);
+                this.highlightAccent = toBoolean(this.highlightAccent, toBoolean(this.config.highlightAccent));
             }
             // Default values
             this.displayAttributes = this.displayAttributes || ((_a = this.filter) === null || _a === void 0 ? void 0 : _a.attributes) || ['label', 'name'];
@@ -1431,7 +1431,9 @@
                 || (classList.includes('min-width-large') && '400px')
                 || (classList.includes('min-width-xlarge') && '450px')
                 || (classList.includes('mat-autocomplete-panel-full-size') && '100vw')));
+            this.showPanelOnFocus = toBoolean(this.showPanelOnFocus, true);
             this.debounceTime = toNumber(this.debounceTime, 250);
+            this.highlightAccent = toBoolean(this.highlightAccent, false);
             this.suggestLengthThreshold = this.suggestLengthThreshold || 0;
             // No suggestFn: filter on the given items
             if (!this.suggestFn) {
@@ -1474,7 +1476,7 @@
             this._reload$, 
             // Search text (no distinctUntilChanged() because of the debounceTime() pipe)
             this.formControl.valueChanges
-                .pipe(operators.filter(function (value) { return _this.searchable && isNotNilString(value); }), 
+                .pipe(operators.filter(function (value) { return _this.enabled && _this.searchable && isNotNilString(value); }), 
             // Mark as loading (to show loading spinner) - earlier as possible, so before the debounce time
             operators.tap(function (value) {
                 if (_this.showLoadingSpinner) {
@@ -1484,7 +1486,9 @@
             // 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); })), 
             // Object set: use it (no distinctUntilChanged() pipe need)
             this.formControl.valueChanges
                 .pipe(operators.startWith(this.formControl.value), operators.filter(function (value) { return _this.searchable && (typeof value === 'object'); }), operators.tap(function (value) {
@@ -1499,7 +1503,9 @@
                         _this.matInputText.nativeElement.value = _this.displayValue;
                     }
                 }
-            })), 
+            }), 
+            // DEBUG
+            operators.tap(function (value) { return console.debug(_this.logPrefix + ' Received an object value: ', value); })), 
             // Merge some observables, with a common distinctUntilChanged() pipe, and NO debounceTime
             rxjs.merge(
             // Focus or click => Load all
@@ -1513,10 +1519,10 @@
             // If value is a string (and is not = '*'), filter if not enough character
             operators.filter(function (value) { return value === '*' || !(typeof value === 'string') || value.length >= _this.suggestLengthThreshold; }), 
             // Distinguish changes
-            operators.distinctUntilChanged()))
-                .pipe(
+            operators.distinctUntilChanged(), 
             // DEBUG
-            //tap(value => console.debug(this.logPrefix + ' Received update event: ', value)),
+            operators.tap(function (value) { return console.debug(_this.logPrefix + ' Received update event: ', value); })))
+                .pipe(
             // Suggest values
             operators.mergeMap(function (value) { return _this.suggest(value, _this.filter); }), 
             // DEBUG
@@ -3792,7 +3798,7 @@
                 Object.keys(control.errors).forEach(function (error) { return console.warn(logPrefix + " -> " + (path || '') + " (" + error + ")"); });
             }
             if (control.controls) {
-                Object.keys(control.controls).forEach(function (child) { return logFormErrors(control.controls[child], logPrefix, (path ? path + "/" + child : child)); } // Recursive call
+                Object.keys(control.controls).forEach(function (child) { return logFormErrors(control.controls[child], logPrefix, (path ? path + "." + child : child)); } // Recursive call
                 );
             }
         }
@@ -3802,7 +3808,7 @@
                 Object.keys(control.errors).forEach(function (error) { return console.warn(logPrefix + " -> " + (path || '') + " (" + error + ")"); });
             }
             control.controls.forEach(function (child, index) {
-                logFormErrors(child, logPrefix, (path ? path + "#" + index : "#" + index)); // Recursive call
+                logFormErrors(child, logPrefix, (path ? path + "." + index : "" + index)); // Recursive call
             });
         }
         // Other control's errors
@@ -3840,7 +3846,7 @@
         // Form array
         else if (control instanceof i1.FormArray) {
             control.controls.forEach(function (child, index) {
-                getFormErrors(child, Object.assign(Object.assign({}, opts), { controlName: (opts.controlName || '') + '#' + index, result: opts.result // Make sure to keep the same result object
+                getFormErrors(child, Object.assign(Object.assign({}, opts), { controlName: (opts.controlName || '') + '.' + index, result: opts.result // Make sure to keep the same result object
                 }));
             });
         }
@@ -5310,6 +5316,7 @@
             this.compact = false;
             this.placeholderChar = DEFAULT_PLACEHOLDER_CHAR;
             this.autofocus = false;
+            this.startDate = null;
             this.clearable = false;
             this.locale = (translate.currentLang || translate.defaultLang).substr(0, 2);
         }
@@ -5677,19 +5684,19 @@
         { type: i1.FormGroupDirective, decorators: [{ type: i0.Optional }] }
     ]; };
     MatDateTime.propDecorators = {
-        mobile: [{ type: i0.Input }],
         formControl: [{ type: i0.Input }],
         formControlName: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         floatLabel: [{ type: i0.Input }],
         required: [{ type: i0.Input }],
+        mobile: [{ type: i0.Input }],
         compact: [{ type: i0.Input }],
         placeholderChar: [{ type: i0.Input }],
         autofocus: [{ type: i0.Input }],
-        readonly: [{ type: i0.Input }],
-        tabindex: [{ type: i0.Input }],
         startDate: [{ type: i0.Input }],
         clearable: [{ type: i0.Input }],
+        readonly: [{ type: i0.Input }],
+        tabindex: [{ type: i0.Input }],
         datePicker: [{ type: i0.ViewChild, args: ['datePicker',] }],
         timePicker: [{ type: i0.ViewChild, args: ['timePicker',] }],
         matInputs: [{ type: i0.ViewChildren, args: ['matInput',] }]
@@ -6409,17 +6416,6 @@
             this.showRadio = this.showRadio || this.floatLabel === 'always';
             this.updateTabIndex();
         };
-        MatBooleanField.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            // Inject suffix elements, into the first injection point found
-            if (this.suffixDiv) {
-                this.suffixInjections.find(function (item) {
-                    item.nativeElement.append(_this.suffixDiv.nativeElement);
-                    _this.suffixDiv.nativeElement.classList.remove('cdk-visually-hidden');
-                    return true; // take only the first injection point
-                });
-            }
-        };
         MatBooleanField.prototype.writeValue = function (value, event) {
             var _this = this;
             if (this._writing)
@@ -6538,7 +6534,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  <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</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\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      <div matSuffix #injectMatSuffix></div>\n\n      <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\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\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      <div matSuffix #injectMatSuffix></div>\n\n      <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\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      <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      <div matSuffix #injectMatSuffix></div>\n\n      <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\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",
+                    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",
                     providers: [
                         DEFAULT_VALUE_ACCESSOR$1
                     ],
@@ -6577,8 +6573,7 @@
         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 },] }],
-        suffixInjections: [{ type: i0.ViewChildren, args: ['injectMatSuffix',] }]
+        suffixDiv: [{ type: i0.ViewChild, args: ['suffix', { static: false },] }]
     };
 
     var SharedMatBooleanModule = /** @class */ (function () {
@@ -8343,7 +8338,9 @@
                             return [3 /*break*/, 7];
                         case 4:
                             if (!this._defaultBackHref) return [3 /*break*/, 6];
-                            return [4 /*yield*/, this.router.navigateByUrl(this._defaultBackHref)];
+                            return [4 /*yield*/, this.router.navigateByUrl(this._defaultBackHref, {
+                                    replaceUrl: true
+                                })];
                         case 5:
                             _a.sent();
                             return [3 /*break*/, 7];