@sumaris-net/ngx-components 0.26.2 → 0.26.6

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

@@ -1199,6 +1199,7 @@
             this.onDropButtonClick = new i0.EventEmitter(true);
             this.onKeydownEscape = new i0.EventEmitter();
             this.onKeyupEnter = new i0.EventEmitter();
+            this.onKeydownTab = new i0.EventEmitter();
         }
         Object.defineProperty(MatAutocompleteField.prototype, "itemCount", {
             get: function () {
@@ -1832,7 +1833,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                      (keydown.tab)=\"onKeydownTab.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                   (keydown.tab)=\"onKeydownTab.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}"]
@@ -1884,6 +1885,7 @@
         onDropButtonClick: [{ type: i0.Output, args: ['dropButtonClick',] }],
         onKeydownEscape: [{ type: i0.Output, args: ['keydown.escape',] }],
         onKeyupEnter: [{ type: i0.Output, args: ['keyup.enter',] }],
+        onKeydownTab: [{ type: i0.Output, args: ['keydown.tab',] }],
         matSelect: [{ type: i0.ViewChild, args: ['matSelect',] }],
         matInputText: [{ type: i0.ViewChild, args: ['matInputText',] }],
         matAutocomplete: [{ type: i0.ViewChild, args: [autocomplete.MatAutocomplete,] }],
@@ -3983,12 +3985,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 +4019,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 +4043,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 +4069,7 @@
                 },] }
     ];
     FormErrorTranslatePipe.ctorParameters = function () { return [
-        { type: FormErrorAdapter }
+        { type: FormErrorTranslator }
     ]; };
 
     var SharedPipesModule = /** @class */ (function () {
@@ -7760,6 +7762,89 @@
                 },] }
     ];
 
+    var MatBadgeIconDirective = /** @class */ (function () {
+        function MatBadgeIconDirective(el) {
+            this.el = el;
+        }
+        MatBadgeIconDirective.prototype.ngOnInit = function () {
+            this.size = this.size || 'medium';
+            this.color = this.color || 'primary';
+            if (this.color === 'warn')
+                this.color = 'warning';
+            var fontSize;
+            switch (this.size) {
+                case 'large':
+                    fontSize = '24px';
+                    break;
+                case 'medium':
+                    fontSize = '22px';
+                    break;
+                case 'small':
+                    fontSize = '16px';
+                    break;
+            }
+            var badge = this.el.nativeElement.querySelector('.mat-badge-content');
+            badge.style.display = 'flex';
+            badge.style.alignItems = 'center';
+            badge.style.justifyContent = 'center';
+            // 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 + "; pointer-events: none;\" name=\"" + this.ionIcon + "\"></ion-icon>";
+            }
+        };
+        return MatBadgeIconDirective;
+    }());
+    MatBadgeIconDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[matBadgeIcon], [ionBadgeIcon]',
+                    inputs: [
+                        'size: matBadgeSize',
+                        'color: matBadgeColor',
+                        'fill: matBadgeFill',
+                    ]
+                },] }
+    ];
+    MatBadgeIconDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    MatBadgeIconDirective.propDecorators = {
+        matIcon: [{ type: i0.Input, args: ['matBadgeIcon',] }],
+        ionIcon: [{ type: i0.Input, args: ['ionBadgeIcon',] }]
+    };
+
+    var SharedMatBadgeIconModule = /** @class */ (function () {
+        function SharedMatBadgeIconModule() {
+        }
+        return SharedMatBadgeIconModule;
+    }());
+    SharedMatBadgeIconModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        i1$4.CommonModule,
+                        i1$5.IonicModule,
+                        badge.MatBadgeModule,
+                    ],
+                    exports: [
+                        MatBadgeIconDirective
+                    ],
+                    declarations: [
+                        MatBadgeIconDirective
+                    ]
+                },] }
+    ];
+
     var modules = [
         // Angular material components
         i1$3.MatCommonModule,
@@ -7801,7 +7886,8 @@
         SharedMatBooleanModule,
         SharedMatNumpadModule,
         SharedMatSwipeModule,
-        MaterialChipsModule
+        MaterialChipsModule,
+        SharedMatBadgeIconModule
     ];
     var SharedMaterialModule = /** @class */ (function () {
         function SharedMaterialModule() {
@@ -9234,6 +9320,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); }));
@@ -18462,7 +18552,7 @@
     MaterialTestingPage.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-material-testing',
-                    template: "\n<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Material components</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <ion-list>\n\n    <ion-item-divider>Shared Material components</ion-item-divider>\n\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./datetime')\">\n      Date/Time field\n    </ion-item>\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./autocomplete')\">\n      Autocomplete field\n    </ion-item>\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./latlong')\">\n      Lat/Long field\n    </ion-item>\n<!--    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./numpad')\">-->\n<!--      Numeric pad component-->\n<!--    </ion-item>-->\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./swipe')\">\n      Swipe component\n    </ion-item>\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./chips')\">\n      Chips component\n    </ion-item>\n\n    <ng-container *ngIf=\"pages && pages.length\">\n      <ion-item-divider>Other components</ion-item-divider>\n\n      <ion-item *ngFor=\"let item of pages\"\n                tappable class=\"text-1x\"\n                (click)=\"openPage(item.page)\">{{item.label}}</ion-item>\n\n    </ng-container>\n  </ion-list>\n\n</ion-content>\n"
+                    template: "\n<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Material components</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <ion-list>\n\n    <ion-item-divider>Shared Material components</ion-item-divider>\n\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./datetime')\">\n      Date/Time field\n    </ion-item>\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./autocomplete')\">\n      Autocomplete field\n    </ion-item>\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./latlong')\">\n      Lat/Long field\n    </ion-item>\n<!--    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./numpad')\">-->\n<!--      Numeric pad component-->\n<!--    </ion-item>-->\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./swipe')\">\n      Swipe component\n    </ion-item>\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./chips')\">\n      Chips component\n    </ion-item>\n\n    <ion-item-divider>Directive</ion-item-divider>\n    <ion-item tappable class=\"text-1x\" (click)=\"openPage('./badge-icon')\">\n      Badge icon directive\n    </ion-item>\n\n    <ng-container *ngIf=\"pages && pages.length\">\n      <ion-item-divider>Other components</ion-item-divider>\n\n      <ion-item *ngFor=\"let item of pages\"\n                tappable class=\"text-1x\"\n                (click)=\"openPage(item.page)\">{{item.label}}</ion-item>\n\n    </ng-container>\n  </ion-list>\n\n</ion-content>\n"
                 },] }
     ];
     MaterialTestingPage.ctorParameters = function () { return [
@@ -18747,6 +18837,18 @@
         { type: i1.FormBuilder }
     ]; };
 
+    var MatBadgeIconTestPage = /** @class */ (function () {
+        function MatBadgeIconTestPage() {
+        }
+        return MatBadgeIconTestPage;
+    }());
+    MatBadgeIconTestPage.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'mat-badge-icon-test',
+                    template: "\n<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>matBadgeIcon directive</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <!-- small badge -->\n  <p>\n    <ion-text color=\"tertiary\">\n      <span matBadge matIcon=\"check\"\n            matBadgeSize=\"small\"\n            matBadgeColor=\"accent\"\n            matBadgeOverlap=\"false\">Small badge</span>\n    </ion-text>\n  </p>\n\n  <!-- medium badge -->\n  <p>\n    <ion-text matBadge matBadgeIcon=\"check\"\n              matBadgeSize=\"medium\"\n              matBadgeColor=\"tertiary\"\n              matBadgeOverlap=\"false\"\n    >Medium badge</ion-text>\n  </p>\n\n  <!-- small badge -->\n  <p>\n    <ion-label matBadge matBadgeIcon=\"close\" matBadgeSize=\"large\"\n          matBadgeOverlap=\"false\">Large badge</ion-label>\n  </p>\n\n  <!-- default size badge -->\n  <p>\n    <ion-label matBadge matBadgeIcon=\"check\" matBadgeColor=\"success\"\n            matBadgeOverlap=\"false\">Badge (no size, no color)\n    </ion-label>\n  </p>\n\n  <!-- ion icon -->\n  <p>\n    <ion-label matBadge\n               ionBadgeIcon=\"checkmark\"\n               matBadgeColor=\"success\"\n            matBadgeOverlap=\"false\">Badge with ion-icon\n    </ion-label>\n  </p>\n\n  <!-- ion icon clear -->\n  <p>\n    <ion-label matBadge\n               ionBadgeIcon=\"checkmark-circle\"\n               matBadgeColor=\"tertiary\"\n               matBadgeFill=\"clear\"\n               matBadgeOverlap=\"false\">Badge with clear icon\n    </ion-label>\n  </p>\n\n\n</ion-content>\n"
+                },] }
+    ];
+
     var routes$1 = [
         {
             path: '',
@@ -18782,6 +18884,11 @@
             path: 'chips',
             pathMatch: 'full',
             component: ChipsTestPage
+        },
+        {
+            path: 'badge-icon',
+            pathMatch: 'full',
+            component: MatBadgeIconTestPage
         }
     ];
     var MaterialTestingModule = /** @class */ (function () {
@@ -18806,7 +18913,8 @@
                         LatLongTestPage,
                         // NumpadTestPage,
                         SwipeTestPage,
-                        ChipsTestPage
+                        ChipsTestPage,
+                        MatBadgeIconTestPage
                     ],
                     exports: [
                         SharedMaterialModule,
@@ -18921,7 +19029,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); }
             });
@@ -20235,6 +20343,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); }));
@@ -23418,7 +23527,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({
@@ -25768,7 +25877,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);
@@ -27795,8 +27904,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;
@@ -28049,12 +28158,15 @@
     exports["ɵ0"] = ɵ0$5;
     exports["ɵa"] = CustomReuseStrategy;
     exports["ɵb"] = MatNumpadDomService;
-    exports["ɵc"] = isFocusableElement;
-    exports["ɵd"] = RegisterForm;
-    exports["ɵe"] = AccountValidatorService;
-    exports["ɵf"] = RegisterModal;
-    exports["ɵg"] = UserSettingsValidatorService;
-    exports["ɵh"] = LocalSettingsValidatorService;
+    exports["ɵc"] = SharedMatBadgeIconModule;
+    exports["ɵd"] = MatBadgeIconDirective;
+    exports["ɵe"] = isFocusableElement;
+    exports["ɵf"] = MatBadgeIconTestPage;
+    exports["ɵg"] = RegisterForm;
+    exports["ɵh"] = AccountValidatorService;
+    exports["ɵi"] = RegisterModal;
+    exports["ɵj"] = UserSettingsValidatorService;
+    exports["ɵk"] = LocalSettingsValidatorService;
 
     Object.defineProperty(exports, '__esModule', { value: true });