@sumaris-net/ngx-components 0.26.4 → 0.27.0

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

@@ -1832,7 +1832,7 @@
         { type: i0.Component, args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: 'mat-autocomplete-field',
-                    template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field *ngIf=\"_readonly; else writable\"\n                      [floatLabel]=\"floatLabel\"\n                      [title]=\"displayValue\"\n                      class=\"mat-form-field-disabled\">\n\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        <!-- readonly -->\n        <ng-container>\n          <input matInput hidden type=\"text\"\n                 [placeholder]=\"placeholder\"\n                 [formControl]=\"formControl\" readonly>\n          <ion-text>{{displayWith(value)}}</ion-text>\n        </ng-container>\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n      </mat-form-field>\n\n      <ng-template #writable>\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-disabled]=\"disabled\"\n                        [title]=\"displayValue\">\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Basic select -->\n          <mat-select #matSelect\n                      *ngIf=\"!searchable; else searchableTemplate\"\n                      [placeholder]=\"placeholder\"\n                      [formControl]=\"formControl\"\n                      [tabindex]=\"_tabindex\"\n                      [panelClass]=\"classList\"\n                      [style.width]=\"panelWidth\"\n                      (focus)=\"filterMatSelectFocusEvent($event)\"\n                      (blur)=\"filterMatSelectBlurEvent($event)\"\n                      (keydown.escape)=\"onKeydownEscape.emit($event)\"\n                      [compareWith]=\"compareWith\"\n                      [multiple]=\"multiple\"\n                      [required]=\"required\">\n            <mat-select-trigger>{{ displayWith(value) }}</mat-select-trigger>\n\n            <!-- header -->\n            <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n              <ion-col *ngFor=\"let attr of displayAttributes; index as i; last as isLast\" [size]=\"displayColumnSizes[i]\">\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              </ion-col>\n            </ion-row>\n\n            <!-- None option -->\n            <mat-option *ngIf=\"!required\" class=\"ion-no-padding\">\n              <ion-row class=\"ion-no-padding\">\n                <ion-col class=\"ion-no-padding\">\n                  <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <ng-container *ngIf=\"$filteredItems | async; let items\">\n              <!-- No item option -->\n              <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                <ion-label>{{noResultMessage | translate}}</ion-label>\n              </mat-option>\n\n              <!-- options -->\n              <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item.classList\">\n                  <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                           [size]=\"displayColumnSizes[i]\">\n                    <ion-text>{{item | propertyGet: path }}</ion-text>\n                  </ion-col>\n                </ion-row>\n              </mat-option>\n\n              <!-- More item -->\n              <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initMatSelectInfiniteScroll()\"\n                          class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n\n          <!--\n            NOTE :\n             - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n          -->\n          <ng-template #searchableTemplate>\n            <input matInput #matInputText type=\"text\"\n                   [matAutocomplete]=\"autocomplete\"\n                   [matAutocompletePosition]=\"matAutocompletePosition\"\n                   [formControl]=\"formControl\"\n                   [placeholder]=\"placeholder\"\n                   [appAutofocus]=\"autofocus\"\n                   [tabindex]=\"_tabindex\"\n                   [required]=\"required\"\n                   (click)=\"onClick.emit($event)\"\n                   (focus)=\"filterInputTextFocusInEvent($event)\"\n                   (blur)=\"filterInputTextBlurEvent($event)\"\n                   (keydown.escape)=\"onKeydownEscape.emit($event)\"\n                   (keyup.enter)=\"onKeyupEnter.emit($event)\"\n                   (keyup.arrowdown)=\"!autocomplete.opened && onDropButtonClick.emit($event)\">\n\n            <!-- autocomplete -->\n            <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                              autoActiveFirstOption\n                              [displayWith]=\"displayWith\"\n                              [class]=\"classList\"\n                              [class.cdk-visually-hidden]=\"!searchable\"\n                              [panelWidth]=\"panelWidth\">\n\n              <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n                <ion-col *ngFor=\"let attr of displayAttributes; index as i; last as last\" [size]=\"displayColumnSizes[i]\">\n                  <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                  <ion-text color=\"light\" *ngIf=\"last && itemCount; let count \" class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n                </ion-col>\n              </ion-row>\n\n              <ng-container *ngIf=\"$filteredItems | async; else loadingTemplate; let items\">\n                <!-- No item option -->\n                <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                  <ion-label>{{noResultMessage | translate}}</ion-label>\n                </mat-option>\n\n                <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                  <ion-row [classList]=\"item.classList\">\n                    <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                             [size]=\"displayColumnSizes[i]\">\n                      <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: formControl.value, withAccent: highlightAccent }\"></ion-text>\n                    </ion-col>\n                  </ion-row>\n                </mat-option>\n\n                <!-- More item -->\n                <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-container>\n\n              <!-- Loading spinner -->\n              <ng-template #loadingTemplate>\n                <mat-option *ngIf=\"(matInputText.value | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-template>\n\n              <!-- Need more characters -->\n              <ng-template #waitMoreCharacterTemplate>\n                <mat-option class=\"ion-padding text-italic\" disabled>\n                  <ion-label>\n                    {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n                  </ion-label>\n                </mat-option>\n              </ng-template>\n            </mat-autocomplete>\n\n          </ng-template>\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n          <ng-content select=\"[matError]\"></ng-content>\n\n        </mat-form-field>\n      </ng-template>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"searchable\"\n          (click)=\"onDropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\"\n          *ngIf=\"enabled && mobile && !searchable && !multiple\"\n          [title]=\"'COMMON.BTN_SEARCH'|translate\"\n          (click)=\"toggleSearch($event)\">\n    <mat-icon>search</mat-icon>\n  </button>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
+                    template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field *ngIf=\"_readonly; else writable\"\n                      [floatLabel]=\"floatLabel\"\n                      [title]=\"displayValue\"\n                      class=\"mat-form-field-disabled\">\n\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        <!-- readonly -->\n        <ng-container>\n          <input matInput hidden type=\"text\"\n                 [placeholder]=\"placeholder\"\n                 [formControl]=\"formControl\" readonly>\n          <ion-text>{{displayWith(value)}}</ion-text>\n        </ng-container>\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n      </mat-form-field>\n\n      <ng-template #writable>\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-disabled]=\"disabled\"\n                        [title]=\"displayValue\">\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Basic select -->\n          <mat-select #matSelect\n                      *ngIf=\"!searchable; else searchableTemplate\"\n                      [placeholder]=\"placeholder\"\n                      [formControl]=\"formControl\"\n                      [tabindex]=\"_tabindex\"\n                      [panelClass]=\"classList\"\n                      [style.width]=\"panelWidth\"\n                      (focus)=\"filterMatSelectFocusEvent($event)\"\n                      (blur)=\"filterMatSelectBlurEvent($event)\"\n                      (keydown.escape)=\"onKeydownEscape.emit($event)\"\n                      (keyup.enter)=\"onKeyupEnter.emit($event)\"\n                      [compareWith]=\"compareWith\"\n                      [multiple]=\"multiple\"\n                      [required]=\"required\">\n            <mat-select-trigger>{{ displayWith(value) }}</mat-select-trigger>\n\n            <!-- header -->\n            <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n              <ion-col *ngFor=\"let attr of displayAttributes; index as i; last as isLast\" [size]=\"displayColumnSizes[i]\">\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              </ion-col>\n            </ion-row>\n\n            <!-- None option -->\n            <mat-option *ngIf=\"!required\" class=\"ion-no-padding\">\n              <ion-row class=\"ion-no-padding\">\n                <ion-col class=\"ion-no-padding\">\n                  <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <ng-container *ngIf=\"$filteredItems | async; let items\">\n              <!-- No item option -->\n              <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                <ion-label>{{noResultMessage | translate}}</ion-label>\n              </mat-option>\n\n              <!-- options -->\n              <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item.classList\">\n                  <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                           [size]=\"displayColumnSizes[i]\">\n                    <ion-text>{{item | propertyGet: path }}</ion-text>\n                  </ion-col>\n                </ion-row>\n              </mat-option>\n\n              <!-- More item -->\n              <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initMatSelectInfiniteScroll()\"\n                          class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n\n          <!--\n            NOTE :\n             - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n          -->\n          <ng-template #searchableTemplate>\n            <input matInput #matInputText type=\"text\"\n                   [matAutocomplete]=\"autocomplete\"\n                   [matAutocompletePosition]=\"matAutocompletePosition\"\n                   [formControl]=\"formControl\"\n                   [placeholder]=\"placeholder\"\n                   [appAutofocus]=\"autofocus\"\n                   [tabindex]=\"_tabindex\"\n                   [required]=\"required\"\n                   (click)=\"onClick.emit($event)\"\n                   (focus)=\"filterInputTextFocusInEvent($event)\"\n                   (blur)=\"filterInputTextBlurEvent($event)\"\n                   (keydown.escape)=\"onKeydownEscape.emit($event)\"\n                   (keyup.enter)=\"onKeyupEnter.emit($event)\"\n                   (keyup.arrowdown)=\"!autocomplete.opened && onDropButtonClick.emit($event)\">\n\n            <!-- autocomplete -->\n            <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                              autoActiveFirstOption\n                              [displayWith]=\"displayWith\"\n                              [class]=\"classList\"\n                              [class.cdk-visually-hidden]=\"!searchable\"\n                              [panelWidth]=\"panelWidth\">\n\n              <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n                <ion-col *ngFor=\"let attr of displayAttributes; index as i; last as last\" [size]=\"displayColumnSizes[i]\">\n                  <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                  <ion-text color=\"light\" *ngIf=\"last && itemCount; let count \" class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n                </ion-col>\n              </ion-row>\n\n              <ng-container *ngIf=\"$filteredItems | async; else loadingTemplate; let items\">\n                <!-- No item option -->\n                <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                  <ion-label>{{noResultMessage | translate}}</ion-label>\n                </mat-option>\n\n                <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                  <ion-row [classList]=\"item.classList\">\n                    <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                             [size]=\"displayColumnSizes[i]\">\n                      <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: formControl.value, withAccent: highlightAccent }\"></ion-text>\n                    </ion-col>\n                  </ion-row>\n                </mat-option>\n\n                <!-- More item -->\n                <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-container>\n\n              <!-- Loading spinner -->\n              <ng-template #loadingTemplate>\n                <mat-option *ngIf=\"(matInputText.value | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-template>\n\n              <!-- Need more characters -->\n              <ng-template #waitMoreCharacterTemplate>\n                <mat-option class=\"ion-padding text-italic\" disabled>\n                  <ion-label>\n                    {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n                  </ion-label>\n                </mat-option>\n              </ng-template>\n            </mat-autocomplete>\n\n          </ng-template>\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n          <ng-content select=\"[matError]\"></ng-content>\n\n        </mat-form-field>\n      </ng-template>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"searchable\"\n          (click)=\"onDropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\"\n          *ngIf=\"enabled && mobile && !searchable && !multiple\"\n          [title]=\"'COMMON.BTN_SEARCH'|translate\"\n          (click)=\"toggleSearch($event)\">\n    <mat-icon>search</mat-icon>\n  </button>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
                     providers: [DEFAULT_VALUE_ACCESSOR$6],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [":host{display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}mat-icon.select-arrow{color:rgba(0,0,0,.47);font-size:150%}.fact-scroll-viewport{height:100%;width:100%}.fact-item{height:54px;display:flex}.fact-item .fact-date{min-width:100px;text-align:center;font-size:24pt}.fact-item .fact-date,.fact-item .fact-text{height:100%;align-items:center;justify-content:center;display:flex}.fact-item .fact-text{border-radius:10px}cdk-virtual-scroll-viewport{border:1px solid #000}cdk-virtual-scroll-viewport li{list-style:none}"]
@@ -3983,12 +3983,12 @@
     }());
 
     var APP_FORM_ERROR_I18N_KEYS = new i0.InjectionToken('appFormErrorKeys');
-    var FormErrorAdapter = /** @class */ (function () {
-        function FormErrorAdapter(translate, errorI18nKeys) {
+    var FormErrorTranslator = /** @class */ (function () {
+        function FormErrorTranslator(translate, errorI18nKeys) {
             this.translate = translate;
             this.errorI18nKeys = Object.assign(Object.assign({}, SharedValidators.I18N_ERROR_KEYS), errorI18nKeys);
         }
-        FormErrorAdapter.prototype.translateErrors = function (control, opts) {
+        FormErrorTranslator.prototype.translateErrors = function (control, opts) {
             var _this = this;
             if (!control || !control.invalid)
                 return '';
@@ -4017,14 +4017,14 @@
                 return res + (res.length ? separator : '') + formError;
             }, "");
         };
-        FormErrorAdapter.prototype.translateControlPath = function (path, opts) {
+        FormErrorTranslator.prototype.translateControlPath = function (path, opts) {
             if (opts === null || opts === void 0 ? void 0 : opts.controlPathTranslator) {
                 return opts === null || opts === void 0 ? void 0 : opts.controlPathTranslator.translateControlPath(path);
             }
             var i18nKey = (opts && opts.i18nPrefix || '') + changeCaseToUnderscore(path).toUpperCase();
             return this.translate.instant(i18nKey);
         };
-        FormErrorAdapter.prototype.translateError = function (errorKey, errorContent) {
+        FormErrorTranslator.prototype.translateError = function (errorKey, errorContent) {
             var i18nKey = this.errorI18nKeys[errorKey]
                 // Try to generate a standard error key, like 'ERROR.FIELD_xxx_xxx'
                 || ('ERROR.FIELD_' + changeCaseToUnderscore(errorKey).toUpperCase());
@@ -4041,13 +4041,13 @@
             console.error("[form-error-adapter] Cannot translate error key '" + errorKey + "'. Please add more formErrorsKey into APP_FORM_ERROR_I18N_KEYS injection token");
             return errorKey;
         };
-        return FormErrorAdapter;
+        return FormErrorTranslator;
     }());
-    FormErrorAdapter.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function FormErrorAdapter_Factory() { return new FormErrorAdapter(i0__namespace.ɵɵinject(i1__namespace$1.TranslateService), i0__namespace.ɵɵinject(APP_FORM_ERROR_I18N_KEYS, 8)); }, token: FormErrorAdapter, providedIn: "root" });
-    FormErrorAdapter.decorators = [
+    FormErrorTranslator.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function FormErrorTranslator_Factory() { return new FormErrorTranslator(i0__namespace.ɵɵinject(i1__namespace$1.TranslateService), i0__namespace.ɵɵinject(APP_FORM_ERROR_I18N_KEYS, 8)); }, token: FormErrorTranslator, providedIn: "root" });
+    FormErrorTranslator.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
     ];
-    FormErrorAdapter.ctorParameters = function () { return [
+    FormErrorTranslator.ctorParameters = function () { return [
         { type: i1$2.TranslateService },
         { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [APP_FORM_ERROR_I18N_KEYS,] }] }
     ]; };
@@ -4067,7 +4067,7 @@
                 },] }
     ];
     FormErrorTranslatePipe.ctorParameters = function () { return [
-        { type: FormErrorAdapter }
+        { type: FormErrorTranslator }
     ]; };
 
     var SharedPipesModule = /** @class */ (function () {
@@ -7785,19 +7785,21 @@
             badge.style.display = 'flex';
             badge.style.alignItems = 'center';
             badge.style.justifyContent = 'center';
-            if (this.fill !== 'clear') {
-                badge.style.background = "var(--ion-color-" + this.color + ")";
-                badge.style.color = "var(--ion-color-" + this.color + "-contrast)";
-            }
-            else {
+            // fill: 'clear'
+            if (this.fill === 'clear') {
                 badge.style.color = "var(--ion-color-" + this.color + ")";
                 badge.style.background = 'transparent';
             }
+            // fill: 'solid' (default value)
+            else {
+                badge.style.background = "var(--ion-color-" + this.color + ")";
+                badge.style.color = "var(--ion-color-" + this.color + "-contrast)";
+            }
             if (this.matIcon) {
                 badge.innerHTML = "<i class=\"material-icons\" style=\"font-size: " + fontSize + ";\">" + this.matIcon + "</i>";
             }
             else if (this.ionIcon) {
-                badge.innerHTML = "<ion-icon style=\"font-size: " + fontSize + ";\" name=\"" + this.ionIcon + "\"></ion-icon>";
+                badge.innerHTML = "<ion-icon style=\"font-size: " + fontSize + "; pointer-events: none;\" name=\"" + this.ionIcon + "\"></ion-icon>";
             }
         };
         return MatBadgeIconDirective;
@@ -8535,13 +8537,14 @@
     };
 
     var StartableService = /** @class */ (function () {
-        function StartableService(platform) {
+        function StartableService(prerequisiteService) {
             this.onStart = new rxjs.Subject();
             this._debug = false;
+            this._startByReadyFunction = true; // should start when calling ready() ?
             this._data = null;
             this._started = false;
-            this._startPrerequisite = platform
-                ? function () { return platform.ready(); }
+            this._startPrerequisite = prerequisiteService
+                ? function () { return prerequisiteService.ready(); }
                 : function () { return Promise.resolve(); };
         }
         StartableService.prototype.start = function () {
@@ -8626,9 +8629,15 @@
             configurable: true
         });
         StartableService.prototype.ready = function () {
+            var _this = this;
             if (this._started)
                 return Promise.resolve(this._data);
-            return this.start();
+            if (this._startPromise)
+                return this._startPromise;
+            if (this._startByReadyFunction)
+                return this.start();
+            return waitFor(function () { return _this._started; })
+                .then(function () { return _this._data; });
         };
         StartableService.prototype.ngOnStop = function () {
             return __awaiter(this, void 0, void 0, function () {
@@ -9316,6 +9325,10 @@
         ModalToolbarComponent.prototype.ngOnInit = function () {
             var _this = this;
             this.canValidate = toBoolean(this.canValidate, this.validate.observers.length > 0);
+            // Ctrl+S
+            this._subscription.add(this.hotkeys.addShortcut({ keys: 'control.s', description: 'COMMON.BTN_VALIDATE', elementName: this.modalName })
+                .pipe(operators.filter(function () { return _this.canValidate; }))
+                .subscribe(function (event) { return _this.validate.emit(event); }));
             // Escape
             this._subscription.add(this.hotkeys.addShortcut({ keys: 'escape', description: 'COMMON.BTN_CLOSE', elementName: this.modalName })
                 .subscribe(function (event) { return _this.cancel.emit(event); }));
@@ -14072,7 +14085,6 @@
                                     .append('Authorization', authorization);
                                 //.append('X-App-Name', environment.name)
                                 //.append('X-App-Version', environment.version)
-                                ;
                                 // Use the setContext method to set the HTTP headers.
                                 operation.setContext(Object.assign(Object.assign({}, operation.getContext()), { headers: headers }));
                                 // Call the next link in the middleware chain.
@@ -16458,41 +16470,38 @@
     var templateObject_1$3, templateObject_2$3, templateObject_3$2, templateObject_4$2, templateObject_5$1;
 
     var moment$2 = momentImported__namespace;
-    var PlatformService = /** @class */ (function () {
+    var PlatformService = /** @class */ (function (_super) {
+        __extends(PlatformService, _super);
         function PlatformService(platform, cdkPlatform, toastController, translate, dateAdapter, entitiesStorage, settings, networkService, accountService, configService, cache, storage, audioProvider, environment, statusBar, keyboard, splashScreen, browser, downloader) {
-            this.platform = platform;
-            this.cdkPlatform = cdkPlatform;
-            this.toastController = toastController;
-            this.translate = translate;
-            this.dateAdapter = dateAdapter;
-            this.entitiesStorage = entitiesStorage;
-            this.settings = settings;
-            this.networkService = networkService;
-            this.accountService = accountService;
-            this.configService = configService;
-            this.cache = cache;
-            this.storage = storage;
-            this.audioProvider = audioProvider;
-            this.environment = environment;
-            this.statusBar = statusBar;
-            this.keyboard = keyboard;
-            this.splashScreen = splashScreen;
-            this.browser = browser;
-            this.downloader = downloader;
-            this._started = false;
-            this._downloadingJobs = new Map();
-            this._debug = !environment.production;
-            if (this._debug)
+            var _this = _super.call(this, platform) || this;
+            _this.platform = platform;
+            _this.cdkPlatform = cdkPlatform;
+            _this.toastController = toastController;
+            _this.translate = translate;
+            _this.dateAdapter = dateAdapter;
+            _this.entitiesStorage = entitiesStorage;
+            _this.settings = settings;
+            _this.networkService = networkService;
+            _this.accountService = accountService;
+            _this.configService = configService;
+            _this.cache = cache;
+            _this.storage = storage;
+            _this.audioProvider = audioProvider;
+            _this.environment = environment;
+            _this.statusBar = statusBar;
+            _this.keyboard = keyboard;
+            _this.splashScreen = splashScreen;
+            _this.browser = browser;
+            _this.downloader = downloader;
+            _this._downloadingJobs = new Map();
+            _this._debug = !environment.production;
+            if (_this._debug)
                 console.debug('[platform] Creating service');
-            this.start();
+            _this.start()
+                // Manage error
+                .catch(function (err) { return _this.onStartupError(err); });
+            return _this;
         }
-        Object.defineProperty(PlatformService.prototype, "started", {
-            get: function () {
-                return this._started;
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(PlatformService.prototype, "mobile", {
             get: function () {
                 return isNotNil(this._mobile) ? this._mobile : this.platform.is('mobile');
@@ -16526,80 +16535,81 @@
         PlatformService.prototype.height = function () {
             return this.platform.height();
         };
-        PlatformService.prototype.start = function () {
-            var _this = this;
-            if (this._startPromise)
-                return this._startPromise;
-            if (this._started)
-                return Promise.resolve();
-            this._started = false;
-            var now = Date.now();
-            this.accountService.tokenType = undefined;
-            console.info('[platform] Starting platform...');
-            this._startPromise = this.platform.ready()
-                .then(function () {
-                _this._mobile = _this.platform.is('mobile');
-                _this._cordova = _this.platform.is('cordova');
-                _this._android = _this.platform.is('android');
-                _this.configureCordovaPlugins(_this._mobile);
-                _this.touchUi = _this._mobile || _this.platform.is('tablet') || _this.platform.is('phablet');
-                // Force mobile in settings
-                if (_this._mobile) {
-                    _this.settings.mobile = _this._mobile;
-                    _this.settings.touchUi = _this.touchUi;
-                }
-                _this.configureTranslate();
-            })
-                .then(function () { return _this.storageReady(); })
-                .then(function (forage) { return _this.migrateStorage(forage); })
-                .then(function () { return Promise.all([
-                _this.entitiesStorage.ready(),
-                _this.cache.ready().then(function () { return _this.configureCache(); }),
-                _this.settings.ready(),
-                _this.networkService.ready(),
-                _this.audioProvider.ready()
-            ]); })
-                .then(function () {
-                _this._started = true;
-                _this._startPromise = undefined;
-                console.info("[platform] Starting platform [OK] {mobile: " + _this._mobile + ", touchUi: " + _this.touchUi + ", canDownload: " + _this.canDownload + "} in " + (Date.now() - now) + "ms");
-                // Update cache configuration when network changed
-                _this.networkService.onNetworkStatusChanges.subscribe(function (type) { return _this.configureCache(type !== 'none'); });
-                // Update authentication type
-                _this.configService.config
-                    .pipe(operators.map(function (config) { return config === null || config === void 0 ? void 0 : config.getProperty(CORE_CONFIG_OPTIONS.AUTH_TOKEN_TYPE); }), operators.filter(isNotNilOrBlank), operators.distinctUntilChanged())
-                    .subscribe(function (tokenType) {
-                    console.info("[platform] Using auth token type {" + tokenType + "}");
-                    _this.accountService.tokenType = tokenType;
-                });
-                // Wait 1 more seconds, before hiding the splash screen
-                setTimeout(function () {
-                    if (_this.splashScreen)
-                        _this.splashScreen.hide();
-                    // Play startup sound
-                    _this.audioProvider.playStartupSound();
-                }, 1000);
-            })
-                // Manage error
-                .catch(function (err) { return _this.onStartupError(err); });
-            return this._startPromise;
-        };
-        /**
-         * Wait platform is ready.<br/>
-         * Important: this will NOT start the platform, has it should be started by the AppComponent
-         *
-         * @param opts
-         */
-        PlatformService.prototype.ready = function (opts) {
-            var _this = this;
-            var period = opts && opts.checkPeriod || 300;
-            if (this._started)
-                return Promise.resolve();
-            return rxjs.timer(period, period)
-                .pipe(
-            // For DEBUG :
-            //tap(() => this._debug && console.debug("Waiting platform ready...")),
-            operators.filter(function () { return _this._started; }), operators.first()).toPromise();
+        PlatformService.prototype.ngOnStart = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var now, forage, err_1;
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            now = Date.now();
+                            this.accountService.tokenType = undefined;
+                            console.info('[platform] Starting platform...');
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 6, , 7]);
+                            this._mobile = this.platform.is('mobile');
+                            this._cordova = this.platform.is('cordova');
+                            this._android = this.platform.is('android');
+                            this.configureCordovaPlugins(this._mobile);
+                            this.touchUi = this._mobile || this.platform.is('tablet') || this.platform.is('phablet');
+                            // Force mobile in settings
+                            if (this._mobile) {
+                                this.settings.mobile = this._mobile;
+                                this.settings.touchUi = this.touchUi;
+                            }
+                            // Configure translation
+                            return [4 /*yield*/, this.configureTranslate()];
+                        case 2:
+                            // Configure translation
+                            _b.sent();
+                            return [4 /*yield*/, this.storageReady()];
+                        case 3:
+                            forage = _b.sent();
+                            return [4 /*yield*/, this.migrateStorage(forage)];
+                        case 4:
+                            _b.sent();
+                            // Start root services
+                            return [4 /*yield*/, Promise.all([
+                                    this.entitiesStorage.ready(),
+                                    this.cache.ready().then(function () { return _this.configureCache(); }),
+                                    this.settings.ready(),
+                                    this.networkService.ready(),
+                                    this.audioProvider.ready()
+                                ])];
+                        case 5:
+                            // Start root services
+                            _b.sent();
+                            console.info("[platform] Starting platform [OK] {mobile: " + this._mobile + ", touchUi: " + this.touchUi + ", downloader: " + this.canDownload + "} in " + (Date.now() - now) + "ms");
+                            // Update cache configuration when network changed
+                            this.networkService.onNetworkStatusChanges
+                                .pipe(operators.skip(1)) // Skip the first event (behavior subject send event immediately)
+                                .subscribe(function (type) { return _this.configureCache(type !== 'none'); });
+                            // Update authentication type
+                            this.configService.config
+                                .pipe(operators.map(function (config) { return config === null || config === void 0 ? void 0 : config.getProperty(CORE_CONFIG_OPTIONS.AUTH_TOKEN_TYPE); }), operators.filter(isNotNilOrBlank), operators.distinctUntilChanged())
+                                .subscribe(function (tokenType) {
+                                console.info("[platform] Using auth token type {" + tokenType + "}");
+                                _this.accountService.tokenType = tokenType;
+                            });
+                            // Hide the splashscreen (if mobile) - after 1s
+                            if (this.mobile) {
+                                setTimeout(function () {
+                                    var _a;
+                                    (_a = _this.splashScreen) === null || _a === void 0 ? void 0 : _a.hide();
+                                    // Play startup sound
+                                    _this.audioProvider.playStartupSound();
+                                }, 1000);
+                            }
+                            return [3 /*break*/, 7];
+                        case 6:
+                            err_1 = _b.sent();
+                            // Manage startup error
+                            return [2 /*return*/, this.onStartupError(err_1)];
+                        case 7: return [2 /*return*/];
+                    }
+                });
+            });
         };
         PlatformService.prototype.open = function (url, target, features, replace) {
             console.info("[platform] Opening link: " + url);
@@ -16712,22 +16722,22 @@
             });
         };
         PlatformService.prototype.configureCache = function (online) {
-            online = isNotNil(online) ? online : this.cache.isOnline();
+            online = toBoolean(online, this.cache.isOnline());
             var cacheTTL = online ? 3600 /* 1h */ : 3600 * 24 * 30; /* 1 month */
-            console.info("[platform] Configuring cache [OK] {online: " + online + "}, {timeToLive: " + cacheTTL / 3600 + "h}, {offlineInvalidate: false}");
+            console.info("[platform] Configuring cache [OK] {online: " + online + ", timeToLive: " + cacheTTL / 3600 + "h, offlineInvalidate: false}");
             this.cache.setDefaultTTL(cacheTTL);
             this.cache.setOfflineInvalidate(false); // Do not invalidate cache when offline
         };
         PlatformService.prototype.storageReady = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var forage, driver;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             console.info("[platform] Starting storage...");
                             return [4 /*yield*/, this.storage.ready()];
                         case 1:
-                            forage = _a.sent();
+                            forage = _b.sent();
                             driver = forage.driver();
                             if (isNil(driver)) {
                                 console.error('[platform] NO DRIVER DEFINED IN STORAGE. Local storage cannot be used !');
@@ -16742,9 +16752,9 @@
         };
         PlatformService.prototype.migrateStorage = function (forage) {
             return __awaiter(this, void 0, void 0, function () {
-                var canMigrate, oldForage, keys, now, toast_1, duration, err_1;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                var canMigrate, oldForage, keys, now, toast_1, duration, err_2;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             canMigrate = forage &&
                                 ((forage.driver() === 'cordovaSQLiteDriver' && (forage.supports(forage.INDEXEDDB) || forage.supports(forage.WEBSQL))) ||
@@ -16758,13 +16768,13 @@
                             });
                             return [4 /*yield*/, oldForage.keys()];
                         case 1:
-                            keys = _a.sent();
+                            keys = _b.sent();
                             if (!isEmptyArray(keys)) return [3 /*break*/, 3];
                             // Drop the old instance (not need anymore)
                             console.debug("[platform] Old storage is empty: dropping unused instance {name: '" + forage.config().name + "', driver: '" + oldForage.driver() + "'}");
                             return [4 /*yield*/, oldForage.dropInstance()];
                         case 2:
-                            _a.sent();
+                            _b.sent();
                             return [3 /*break*/, 12];
                         case 3:
                             now = Date.now();
@@ -16772,13 +16782,13 @@
                             return [4 /*yield*/, this.showToast({ message: 'INFO.DATA_MIGRATION_STARTED',
                                     duration: 30000 })];
                         case 4:
-                            toast_1 = _a.sent();
-                            _a.label = 5;
+                            toast_1 = _b.sent();
+                            _b.label = 5;
                         case 5:
-                            _a.trys.push([5, 9, , 12]);
+                            _b.trys.push([5, 9, , 12]);
                             return [4 /*yield*/, StorageUtils.copy(oldForage, forage, { keys: keys, deleteAfterCopy: false })];
                         case 6:
-                            _a.sent();
+                            _b.sent();
                             duration = Date.now() - now;
                             setTimeout(function () { return toast_1.dismiss(); }, Math.max(2000 - duration, 0));
                             return [4 /*yield*/, this.showToast({ message: 'INFO.DATA_MIGRATION_SUCCEED',
@@ -16786,26 +16796,26 @@
                                     showCloseButton: true
                                 })];
                         case 7:
-                            _a.sent();
+                            _b.sent();
                             console.info('[platform] Starting storage migration [OK]');
                             // Drop the old instance
                             console.info("[platform] Drop old storage {name: '" + forage.config().name + "', driver: '" + oldForage.driver() + "'}");
                             return [4 /*yield*/, oldForage.dropInstance()];
                         case 8:
-                            _a.sent();
+                            _b.sent();
                             return [3 /*break*/, 12];
                         case 9:
-                            err_1 = _a.sent();
-                            console.error(err_1 && err_1.message || err_1, err_1);
+                            err_2 = _b.sent();
+                            console.error(err_2 && err_2.message || err_2, err_2);
                             return [4 /*yield*/, toast_1.dismiss()];
                         case 10:
-                            _a.sent();
+                            _b.sent();
                             return [4 /*yield*/, this.showToast({ message: 'ERROR.DATA_MIGRATION_FAILED',
                                     type: 'error',
                                     showCloseButton: true
                                 })];
                         case 11:
-                            _a.sent();
+                            _b.sent();
                             return [3 /*break*/, 12];
                         case 12: return [2 /*return*/];
                     }
@@ -16821,8 +16831,8 @@
         PlatformService.prototype.onStartupError = function (err) {
             return __awaiter(this, void 0, void 0, function () {
                 var message, detailsMessage;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             console.error('[platform] Failed starting the platform! ', err);
                             message = err && err.message || err;
@@ -16834,14 +16844,14 @@
                             if (!this.translate) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.translate.get(message).toPromise()];
                         case 1:
-                            message = _a.sent();
+                            message = _b.sent();
                             if (err && err.code) {
                                 message += " {code: " + err.code + "}";
                             }
                             return [3 /*break*/, 3];
                         case 2:
                             message = "Fatal error: Please contact your administrator.\n\n{code: " + (err && err.code || 'null') + ", message: \"" + message + "\"}";
-                            _a.label = 3;
+                            _b.label = 3;
                         case 3:
                             if (!this.toastController) return [3 /*break*/, 5];
                             if (detailsMessage) {
@@ -16854,7 +16864,7 @@
                                     message: message
                                 })];
                         case 4:
-                            _a.sent();
+                            _b.sent();
                             return [3 /*break*/, 6];
                         case 5:
                             if (window) {
@@ -16868,14 +16878,14 @@
                                 if (err && err.details)
                                     console.error('cause', err.details);
                             }
-                            _a.label = 6;
+                            _b.label = 6;
                         case 6: return [2 /*return*/];
                     }
                 });
             });
         };
         return PlatformService;
-    }());
+    }(StartableService));
     PlatformService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function PlatformService_Factory() { return new PlatformService(i0__namespace.ɵɵinject(i1__namespace$4.Platform), i0__namespace.ɵɵinject(i2__namespace$4.Platform), i0__namespace.ɵɵinject(i1__namespace$4.ToastController), i0__namespace.ɵɵinject(i1__namespace$1.TranslateService), i0__namespace.ɵɵinject(i1__namespace.MomentDateAdapter), i0__namespace.ɵɵinject(EntitiesStorage), i0__namespace.ɵɵinject(LocalSettingsService), i0__namespace.ɵɵinject(NetworkService), i0__namespace.ɵɵinject(AccountService), i0__namespace.ɵɵinject(ConfigService), i0__namespace.ɵɵinject(i6__namespace.CacheService), i0__namespace.ɵɵinject(i3__namespace$1.Storage), i0__namespace.ɵɵinject(AudioProvider), i0__namespace.ɵɵinject(ENVIRONMENT), i0__namespace.ɵɵinject(i14__namespace.StatusBar, 8), i0__namespace.ɵɵinject(i15__namespace.Keyboard, 8), i0__namespace.ɵɵinject(i10__namespace.SplashScreen, 8), i0__namespace.ɵɵinject(i17__namespace.InAppBrowser, 8), i0__namespace.ɵɵinject(i18__namespace.Downloader, 8)); }, token: PlatformService, providedIn: "root" });
     PlatformService.decorators = [
         { type: i0.Injectable, args: [{ providedIn: 'root' },] }
@@ -19021,7 +19031,7 @@
             if (form)
                 this.setForm(form);
             this.settings = injector.get(LocalSettingsService);
-            this.errorTranslator = injector.get(FormErrorAdapter);
+            this.errorTranslator = injector.get(FormErrorTranslator);
             this.autocompleteHelper = new MatAutocompleteConfigHolder(this.settings && {
                 getUserAttributes: function (a, b) { return _this.settings.getFieldDisplayAttributes(a, b); }
             });
@@ -20335,6 +20345,7 @@
             this.onSave = new i0.EventEmitter();
             this.onNext = new i0.EventEmitter();
             this.onBack = new i0.EventEmitter();
+            // Ctrl+S
             this._subscription.add(hotkeys.addShortcut({ keys: 'control.s', description: 'COMMON.BTN_SAVE' })
                 .pipe(operators.filter(function (e) { return !_this.disabled; }))
                 .subscribe(function (event) { return _this.onSave.emit(event); }));
@@ -23518,7 +23529,7 @@
             this._paginator = null;
             this.mobile = this.platform.is('mobile');
             this.translate = injector === null || injector === void 0 ? void 0 : injector.get(i1$2.TranslateService);
-            this.formErrorAdapter = injector === null || injector === void 0 ? void 0 : injector.get(FormErrorAdapter);
+            this.formErrorAdapter = injector === null || injector === void 0 ? void 0 : injector.get(FormErrorTranslator);
             this.alertCtrl = injector === null || injector === void 0 ? void 0 : injector.get(i1$5.AlertController);
             this.toastController = injector === null || injector === void 0 ? void 0 : injector.get(i1$5.ToastController);
             this._autocompleteConfigHolder = new MatAutocompleteConfigHolder({
@@ -25868,7 +25879,7 @@
                 enableListenChanges: (injector.get(ENVIRONMENT).listenRemoteChanges === true), pathIdAttribute: 'id', autoLoad: true, autoUpdateRoute: true, i18nPrefix: ''
             }, options);
             _this.settings = injector.get(LocalSettingsService);
-            _this.formErrorAdapter = injector.get(FormErrorAdapter);
+            _this.formErrorAdapter = injector.get(FormErrorTranslator);
             _this.cd = injector.get(i0.ChangeDetectorRef);
             _this.dateFormat = injector.get(DateFormatPipe);
             _this.toastController = injector.get(i1$5.ToastController);
@@ -27895,8 +27906,8 @@
     exports.FormArrayHelper = FormArrayHelper;
     exports.FormButtonsBarComponent = FormButtonsBarComponent;
     exports.FormButtonsBarToken = FormButtonsBarToken;
-    exports.FormErrorAdapter = FormErrorAdapter;
     exports.FormErrorTranslatePipe = FormErrorTranslatePipe;
+    exports.FormErrorTranslator = FormErrorTranslator;
     exports.FormFieldValuesHolder = FormFieldValuesHolder;
     exports.Fragments = Fragments;
     exports.GraphqlService = GraphqlService;