@sumaris-net/ngx-components 1.20.26 → 1.20.29

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

@@ -500,67 +500,6 @@
     function removeDiacritics(text) {
         return text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
     }
-    function suggestFromArray(items, value, opts) {
-        var _this = this;
-        if (isNotNil(value) && typeof value === 'object')
-            return { data: [value] };
-        value = (typeof value === 'string' && value !== '*') && value.toUpperCase() || undefined;
-        var keys = opts && (opts.searchAttribute && [opts.searchAttribute] || opts.searchAttributes) || ['label'];
-        if (!items) {
-            return { data: [], total: 0 };
-        }
-        // Filter items
-        var filteredItems = items;
-        if (isNotNilOrBlank(value)) {
-            // If wildcard, search using regexp
-            if (value.indexOf('*') !== -1) {
-                value = value.replace(/[*]+/g, '.*');
-                filteredItems = filteredItems.filter(function (v) { return keys.findIndex(function (key) { return matchUpperCase(getPropertyByPathAsString(v, key), value); }) !== -1; });
-            }
-            // Else (no wildcard), search using startsWith
-            else {
-                filteredItems = filteredItems.filter(function (v) { return keys.findIndex(function (key) { return startsWithUpperCase(getPropertyByPathAsString(v, key), value); }) !== -1; });
-            }
-        }
-        // Exclude ids
-        if (isNotEmptyArray(opts === null || opts === void 0 ? void 0 : opts.excludedIds)) {
-            filteredItems = filteredItems.filter(function (v) { return !opts.excludedIds.includes(+v['id']); });
-        }
-        // Sort
-        if (!opts || opts.skipSort !== true) {
-            // Make to copy input items, before sorting (if not yet already done)
-            if (filteredItems === items)
-                filteredItems = filteredItems.slice();
-            // Sort by keys
-            filteredItems.sort(propertiesPathComparator(keys));
-        }
-        var total = filteredItems.length || 0;
-        // Pagination (truncate if need)
-        var pageData = filteredItems;
-        if (opts) {
-            if ((opts.offset || 0) > 0) {
-                pageData = pageData.slice(opts.offset);
-            }
-            if (isNotNil(opts.size) && pageData.length > opts.size) {
-                pageData = pageData.slice(0, opts.size);
-            }
-        }
-        var result = {
-            data: pageData,
-            total: total
-        };
-        // Add fetch more capability, if total was fetched
-        var nextOffset = (opts && opts.offset || 0) + pageData.length;
-        if (nextOffset < total) {
-            result.fetchMore = function (_) { return __awaiter(_this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    return [2 /*return*/, suggestFromArray(filteredItems, undefined /*OPTIMISATION: already applied*/, Object.assign(Object.assign({}, opts), { offset: nextOffset, skipSort: true, excludedIds: undefined // OPTIMISATION: already filtered
-                        }))];
-                });
-            }); };
-        }
-        return result;
-    }
     function suggestFromStringArray(values, value, options) {
         value = (typeof value === 'string' && value !== '*') && value.toUpperCase() || undefined;
         if (isNilOrBlank(value))
@@ -1377,6 +1316,68 @@
         return _cache.mobile;
     };
 
+    function suggestFromArray(items, value, opts) {
+        var _this = this;
+        if (isNotNil(value) && typeof value === 'object')
+            return { data: [value] };
+        value = (typeof value === 'string' && value !== '*') && value.toUpperCase() || undefined;
+        var keys = opts && (opts.searchAttribute && [opts.searchAttribute] || opts.searchAttributes) || ['label'];
+        if (!items) {
+            return { data: [], total: 0 };
+        }
+        // Filter items
+        var filteredItems = items;
+        if (isNotNilOrBlank(value)) {
+            // If wildcard, search using regexp
+            if (value.indexOf('*') !== -1) {
+                value = value.replace(/[*]+/g, '.*');
+                filteredItems = filteredItems.filter(function (v) { return keys.findIndex(function (key) { return matchUpperCase(getPropertyByPathAsString(v, key), value); }) !== -1; });
+            }
+            // Else (no wildcard), search using startsWith
+            else {
+                filteredItems = filteredItems.filter(function (v) { return keys.findIndex(function (key) { return startsWithUpperCase(getPropertyByPathAsString(v, key), value); }) !== -1; });
+            }
+        }
+        // Exclude ids
+        if (isNotEmptyArray(opts === null || opts === void 0 ? void 0 : opts.excludedIds)) {
+            filteredItems = filteredItems.filter(function (v) { return !opts.excludedIds.includes(+v['id']); });
+        }
+        // Sort
+        if (!opts || opts.skipSort !== true) {
+            // Make to copy input items, before sorting (if not yet already done)
+            if (filteredItems === items)
+                filteredItems = filteredItems.slice();
+            // Sort by keys
+            filteredItems.sort(propertiesPathComparator(keys));
+        }
+        var total = filteredItems.length || 0;
+        // Pagination (truncate if need)
+        var pageData = filteredItems;
+        if (opts) {
+            if ((opts.offset || 0) > 0) {
+                pageData = pageData.slice(opts.offset);
+            }
+            if (isNotNil(opts.size) && pageData.length > opts.size) {
+                pageData = pageData.slice(0, opts.size);
+            }
+        }
+        var result = {
+            data: pageData,
+            total: total
+        };
+        // Add fetch more capability, if total was fetched
+        var nextOffset = (opts && opts.offset || 0) + pageData.length;
+        if (nextOffset < total) {
+            result.fetchMore = function (_) { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, suggestFromArray(filteredItems, undefined /*OPTIMISATION: already applied*/, Object.assign(Object.assign({}, opts), { offset: nextOffset, skipSort: true, excludedIds: undefined // OPTIMISATION: already filtered
+                        }))];
+                });
+            }); };
+        }
+        return result;
+    }
+
     var MatAutocompleteConfigHolder = /** @class */ (function () {
         function MatAutocompleteConfigHolder(options) {
             this.options = options;
@@ -2202,7 +2203,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      <!-- readonly -->\n      <mat-form-field *ngIf=\"_readonly; else writable\"\n                      [floatLabel]=\"floatLabel\"\n                      [appearance]=\"appearance\"\n                      [title]=\"displayValue\"\n                      class=\"mat-form-field-disabled\">\n\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        <input matInput hidden type=\"text\"\n               [placeholder]=\"placeholder\"\n               [formControl]=\"formControl\" readonly>\n        <ion-text>{{displayWith(value)}}</ion-text>\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          <!-- Mobile or Multiple (use <mat-select>) -->\n          <mat-select #matSelect\n                      *ngIf=\"mobile || multiple; else desktopTemplate\"\n                      [disableRipple]=\"true\"\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)=\"keydownEscape.emit($event)\"\n                      (keyup.enter)=\"keyupEnter.emit($event)\"\n                      [compareWith]=\"equals\"\n                      [multiple]=\"multiple\"\n                      [typeaheadDebounceInterval]=\"debounceTime * 10\"\n                      [required]=\"required\">\n            <mat-select-trigger>{{ displayWith(value) }}</mat-select-trigger>\n\n            <!-- Search bar -->\n            <mat-option  class=\"mat-select-searchbar\" *ngIf=\"showSearchBar\"\n                         [class.mat-select-searchbar-sticky]=\"stickySearchBar\"\n                         disabled>\n              <ion-searchbar #ionSearchbar\n                             inputmode=\"search\"\n                             autocomplete=\"off\"\n                             animated=\"true\"\n                             showClearButton=\"true\"\n                             [debounce]=\"debounceTime\"\n                             (ionClear)=\"markAsLoading()\"\n                             (ionInput)=\"markAsLoading()\"\n                             (ionChange)=\"ionSearchBarChanged($event, $event.detail.value)\"\n                             [placeholder]=\"'COMMON.BTN_SEARCH'|translate\"\n              ></ion-searchbar>\n            </mat-option>\n\n            <!-- Headers -->\n            <ion-row class=\"mat-select-header column ion-no-padding\"\n                     [class.multiple]=\"multiple\"\n                     [class.mat-select-searchbar-sticky]=\"showSearchBar && stickySearchBar\">\n              <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [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 && !multiple && !clearable\" 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 as items; else loadingTemplate\">\n              <!-- No item option -->\n              <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                <ion-label><i>{{noResultMessage | translate}}</i></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 [innerHTML]=\"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\n            <!-- footer -->\n            <mat-option *ngIf=\"itemCount as count\" class=\"mat-option-footer mat-autocomplete-footer ion-no-padding\" disabled>\n              <ion-text class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n            </mat-option>\n\n            <!-- Loading spinner -->\n            <ng-template #loadingTemplate>\n              <mat-option *ngIf=\"(displayValue | 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-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 #desktopTemplate>\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)=\"clicked.emit($event)\"\n                   (focus)=\"filterInputTextFocusEvent($event)\"\n                   (blur)=\"filterInputTextBlurEvent($event)\"\n                   (keydown.escape)=\"keydownEscape.emit($event)\"\n                   (keyup.enter)=\"keyupEnter.emit($event)\"\n                   (keyup.arrowdown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\">\n\n            <!-- autocomplete -->\n            <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                              autoActiveFirstOption\n                              [displayWith]=\"displayWith\"\n                              [class]=\"classList\"\n                              [panelWidth]=\"panelWidth\">\n              <!-- Headers -->\n              <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n                <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n                  <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                </ion-col>\n              </ion-row>\n\n              <!-- Options -->\n              <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n                <!-- No item option -->\n                <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                  <ion-label><i>{{noResultMessage | translate}}</i></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=\"(displayValue | 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\n              <!-- footer -->\n              <ion-row *ngIf=\"itemCount; let count\" class=\"mat-autocomplete-footer ion-no-padding\">\n                <ion-col>\n                  <ion-text 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            </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</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=\"!mobile && !multiple\"\n          (click)=\"dropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</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\n<ng-template #headers>\n  <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n    <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n      <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n    </ion-col>\n  </ion-row>\n</ng-template>\n\n<ng-template #options>\n\n\n</ng-template>\n\n",
+                    template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <!-- readonly -->\n      <mat-form-field *ngIf=\"_readonly; else writable\"\n                      [floatLabel]=\"floatLabel\"\n                      [appearance]=\"appearance\"\n                      [title]=\"displayValue\"\n                      class=\"mat-form-field-disabled\">\n\n        <mat-label>{{placeholder}}</mat-label>\n\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        <input matInput hidden type=\"text\" readonly=\"true\"\n               [formControl]=\"formControl\" >\n        <ion-text>{{displayWith(value)}}</ion-text>\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                        [appearance]=\"appearance\"\n                        [class.mat-form-field-disabled]=\"disabled\"\n                        [title]=\"displayValue\">\n\n          <mat-label>{{placeholder}}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Mobile or Multiple (use <mat-select>) -->\n          <mat-select #matSelect\n                      *ngIf=\"mobile || multiple; else desktopTemplate\"\n                      [disableRipple]=\"true\"\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)=\"keydownEscape.emit($event)\"\n                      (keyup.enter)=\"keyupEnter.emit($event)\"\n                      [compareWith]=\"equals\"\n                      [multiple]=\"multiple\"\n                      [typeaheadDebounceInterval]=\"debounceTime * 10\"\n                      [required]=\"required\">\n            <mat-select-trigger>{{ displayWith(value) }}</mat-select-trigger>\n\n            <!-- Search bar -->\n            <mat-option  class=\"mat-select-searchbar\" *ngIf=\"showSearchBar\"\n                         [class.mat-select-searchbar-sticky]=\"stickySearchBar\"\n                         disabled>\n              <ion-searchbar #ionSearchbar\n                             inputmode=\"search\"\n                             autocomplete=\"off\"\n                             animated=\"true\"\n                             showClearButton=\"true\"\n                             [debounce]=\"debounceTime\"\n                             (ionClear)=\"markAsLoading()\"\n                             (ionInput)=\"markAsLoading()\"\n                             (ionChange)=\"ionSearchBarChanged($event, $event.detail.value)\"\n                             [placeholder]=\"'COMMON.BTN_SEARCH'|translate\"\n              ></ion-searchbar>\n            </mat-option>\n\n            <!-- Headers -->\n            <ion-row class=\"mat-select-header column ion-no-padding\"\n                     [class.multiple]=\"multiple\"\n                     [class.mat-select-searchbar-sticky]=\"showSearchBar && stickySearchBar\">\n              <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [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 && !multiple && !clearable\" 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 as items; else loadingTemplate\">\n              <!-- No item option -->\n              <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                <ion-label><i>{{noResultMessage | translate}}</i></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 [innerHTML]=\"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\n            <!-- footer -->\n            <mat-option *ngIf=\"itemCount as count\" class=\"mat-option-footer mat-autocomplete-footer ion-no-padding\" disabled>\n              <ion-text class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n            </mat-option>\n\n            <!-- Loading spinner -->\n            <ng-template #loadingTemplate>\n              <mat-option *ngIf=\"(displayValue | 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-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 #desktopTemplate>\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)=\"clicked.emit($event)\"\n                   (focus)=\"filterInputTextFocusEvent($event)\"\n                   (blur)=\"filterInputTextBlurEvent($event)\"\n                   (keydown.escape)=\"keydownEscape.emit($event)\"\n                   (keyup.enter)=\"keyupEnter.emit($event)\"\n                   (keyup.arrowdown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\">\n\n            <!-- autocomplete -->\n            <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                              autoActiveFirstOption\n                              [displayWith]=\"displayWith\"\n                              [class]=\"classList\"\n                              [panelWidth]=\"panelWidth\">\n              <!-- Headers -->\n              <ion-row class=\"mat-autocomplete-header column ion-no-padding\">\n                <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n                  <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                </ion-col>\n              </ion-row>\n\n              <!-- Options -->\n              <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\n                <!-- No item option -->\n                <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                  <ion-label><i>{{noResultMessage | translate}}</i></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=\"(displayValue | 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\n              <!-- footer -->\n              <ion-row *ngIf=\"itemCount; let count\" class=\"mat-autocomplete-footer ion-no-padding\">\n                <ion-col>\n                  <ion-text 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            </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</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=\"!mobile && !multiple\"\n          (click)=\"dropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</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\n<ng-template #headers>\n  <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n    <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n      <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n    </ion-col>\n  </ion-row>\n</ng-template>\n\n",
                     providers: [{
                             provide: i1.NG_VALUE_ACCESSOR,
                             multi: true,
@@ -2700,9 +2701,9 @@
                 var cleanedSearchText = removeDiacritics(searchRegexp).toUpperCase();
                 var index = removeDiacritics(value.toUpperCase()).indexOf(cleanedSearchText);
                 if (index !== -1) {
-                    return value.substr(0, index - 1) +
-                        '<b>' + value.substr(index, cleanedSearchText.length) + '</b>' +
-                        value.substr(index + cleanedSearchText.length);
+                    return value.substring(0, index - 1) +
+                        '<b>' + value.substring(index, cleanedSearchText.length) + '</b>' +
+                        value.substring(index + cleanedSearchText.length);
                 }
                 return value;
             }
@@ -3150,12 +3151,10 @@
         };
         return IsNotNilOrBlankPipe;
     }());
-    IsNotNilOrBlankPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function IsNotNilOrBlankPipe_Factory() { return new IsNotNilOrBlankPipe(); }, token: IsNotNilOrBlankPipe, providedIn: "root" });
     IsNotNilOrBlankPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'isNotNilOrBlank'
-                },] },
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+                },] }
     ];
     var IsNilOrBlankPipe = /** @class */ (function () {
         function IsNilOrBlankPipe() {
@@ -3165,12 +3164,10 @@
         };
         return IsNilOrBlankPipe;
     }());
-    IsNilOrBlankPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function IsNilOrBlankPipe_Factory() { return new IsNilOrBlankPipe(); }, token: IsNilOrBlankPipe, providedIn: "root" });
     IsNilOrBlankPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'isNilOrBlank'
-                },] },
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+                },] }
     ];
     var ToStringPipe = /** @class */ (function () {
         function ToStringPipe() {
@@ -3180,12 +3177,10 @@
         };
         return ToStringPipe;
     }());
-    ToStringPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function ToStringPipe_Factory() { return new ToStringPipe(); }, token: ToStringPipe, providedIn: "root" });
     ToStringPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'toString'
-                },] },
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+                },] }
     ];
     var StrLengthPipe = /** @class */ (function () {
         function StrLengthPipe() {
@@ -3195,12 +3190,10 @@
         };
         return StrLengthPipe;
     }());
-    StrLengthPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function StrLengthPipe_Factory() { return new StrLengthPipe(); }, token: StrLengthPipe, providedIn: "root" });
     StrLengthPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'strLength'
-                },] },
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+                },] }
     ];
     var StrIncludesPipe = /** @class */ (function () {
         function StrIncludesPipe() {
@@ -3210,12 +3203,10 @@
         };
         return StrIncludesPipe;
     }());
-    StrIncludesPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function StrIncludesPipe_Factory() { return new StrIncludesPipe(); }, token: StrIncludesPipe, providedIn: "root" });
     StrIncludesPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'strIncludes'
-                },] },
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+                },] }
     ];
 
     var TranslateContextService = /** @class */ (function () {
@@ -4796,8 +4787,7 @@
                 },] }
     ];
     var FormGetValuePipe = /** @class */ (function () {
-        function FormGetValuePipe(adapter, _ref) {
-            this.adapter = adapter;
+        function FormGetValuePipe(_ref) {
             this._ref = _ref;
             this.value = undefined;
             this._lastControl = null;
@@ -4865,7 +4855,6 @@
                 },] }
     ];
     FormGetValuePipe.ctorParameters = function () { return [
-        { type: FormErrorTranslator },
         { type: i0.ChangeDetectorRef }
     ]; };
 
@@ -5673,7 +5662,7 @@
     MatLatLongField.decorators = [
         { type: i0.Component, args: [{
                     selector: 'mat-latlong-field',
-                    template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                class=\"mat-form-field-disabled\">\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\"\n         readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{_format(formControl.value) }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n\n  <ion-grid class=\"ion-no-padding\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <ion-col class=\"text ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-disabled]=\"formControl.disabled\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\">\n\n          <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <input matInput #inputElement\n                 type=\"text\"\n                 autocomplete=\"off\"\n                 [textMask]=\"textMaskConfig\"\n                 [formControl]=\"textFormControl\"\n                 [placeholder]=\"inputPlaceholder|translate\"\n                 (keypress)=\"onKeypress($event)\"\n                 (keydown.tab)=\"moveCaretToSeparator($event, true)\"\n                 (keydown.shift.tab)=\"moveCaretToSeparator($event, false)\"\n                 (focus)=\"_onFocus($event)\"\n                 (blur)=\"_onBlur($event)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\">\n\n          <div matSuffix *ngIf=\"!showSignControl\">\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\">\n\n            <!-- errors -->\n            <mat-error *ngIf=\"formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey\" [ngSwitch]=\"errorKey\">\n              <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n              <span *ngSwitchCase=\"'latitude'\" translate>ERROR.FIELD_NOT_VALID_LATITUDE</span>\n              <span *ngSwitchCase=\"'longitude'\" translate>ERROR.FIELD_NOT_VALID_LONGITUDE</span>\n              <span *ngSwitchCase=\"'min'\">{{'ERROR.FIELD_MIN_COMPACT'|translate: {min: _format(formControl.errors.min.min) } }}</span>\n              <span *ngSwitchCase=\"'max'\">{{'ERROR.FIELD_MAX_COMPACT'|translate: {max: _format(formControl.errors.max.max) } }}</span>\n              <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n            </mat-error>\n            <ng-content select=\"mat-error\"></ng-content>\n\n            <!-- mat hint -->\n            <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n              <div class=\"mat-form-field-hint-spacer\"></div>\n              <ng-content select=\"mat-hint\"></ng-content>\n            </div>\n          </div>\n        </mat-form-field>\n      </ion-col>\n\n      <!-- sign -->\n      <ion-col class=\"sign ion-no-padding\" [ngSwitch]=\"type\" *ngIf=\"showSignControl\">\n\n          <!-- sign on latitude -->\n          <mat-form-field *ngSwitchCase=\"'latitude'\"\n                          floatLabel=\"never\"\n                          [class.mat-form-field-invalid]=\"formControl.touched && signFormControl.invalid\">\n            <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER</mat-label>\n            <mat-select [formControl]=\"signFormControl\"\n                        [tabindex]=\"tabindex+1\">\n              <mat-option [value]=\"1\">{{'COMMON.LAT_LONG.LAT_SIGN_N'|translate}}</mat-option>\n              <mat-option [value]=\"-1\" >{{'COMMON.LAT_LONG.LAT_SIGN_S'|translate}}</mat-option>\n            </mat-select>\n\n            <div matSuffix>\n              <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n            </div>\n          </mat-form-field>\n\n          <!-- sign on longitude -->\n          <mat-form-field floatLabel=\"never\"\n                          *ngSwitchCase=\"'longitude'\"\n                          [class.mat-form-field-invalid]=\"formControl.touched && signFormControl.invalid\">\n            <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER</mat-label>\n            <mat-select [formControl]=\"signFormControl\"\n                        [tabindex]=\"tabindex+2\">\n              <mat-option [value]=\"1\" translate>{{'COMMON.LAT_LONG.LONG_SIGN_E'|translate}}</mat-option>\n              <mat-option [value]=\"-1\" translate>{{'COMMON.LAT_LONG.LONG_SIGN_W'|translate}}</mat-option>\n            </mat-select>\n\n            <div matSuffix>\n              <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n            </div>\n          </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
+                    template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                [appearance]=\"appearance\"\n                class=\"mat-form-field-disabled\">\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\"\n         readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{_format(formControl.value) }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n\n  <ion-grid class=\"ion-no-padding\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <ion-col class=\"text ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [appearance]=\"appearance\"\n                        [class.mat-form-field-disabled]=\"formControl.disabled\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\">\n\n          <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <input matInput #inputElement\n                 type=\"text\"\n                 autocomplete=\"off\"\n                 [textMask]=\"textMaskConfig\"\n                 [formControl]=\"textFormControl\"\n                 [placeholder]=\"inputPlaceholder|translate\"\n                 (keypress)=\"onKeypress($event)\"\n                 (keydown.tab)=\"moveCaretToSeparator($event, true)\"\n                 (keydown.shift.tab)=\"moveCaretToSeparator($event, false)\"\n                 (focus)=\"_onFocus($event)\"\n                 (blur)=\"_onBlur($event)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\">\n\n          <div matSuffix *ngIf=\"!showSignControl\">\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\">\n\n            <!-- errors -->\n            <mat-error *ngIf=\"formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey\" [ngSwitch]=\"errorKey\">\n              <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n              <span *ngSwitchCase=\"'latitude'\" translate>ERROR.FIELD_NOT_VALID_LATITUDE</span>\n              <span *ngSwitchCase=\"'longitude'\" translate>ERROR.FIELD_NOT_VALID_LONGITUDE</span>\n              <span *ngSwitchCase=\"'min'\">{{'ERROR.FIELD_MIN_COMPACT'|translate: {min: _format(formControl.errors.min.min) } }}</span>\n              <span *ngSwitchCase=\"'max'\">{{'ERROR.FIELD_MAX_COMPACT'|translate: {max: _format(formControl.errors.max.max) } }}</span>\n              <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n            </mat-error>\n            <ng-content select=\"mat-error\"></ng-content>\n\n            <!-- mat hint -->\n            <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n              <div class=\"mat-form-field-hint-spacer\"></div>\n              <ng-content select=\"mat-hint\"></ng-content>\n            </div>\n          </div>\n        </mat-form-field>\n      </ion-col>\n\n      <!-- sign -->\n      <ion-col class=\"sign ion-no-padding\" [ngSwitch]=\"type\" *ngIf=\"showSignControl\">\n\n          <!-- sign on latitude -->\n          <mat-form-field *ngSwitchCase=\"'latitude'\"\n                          floatLabel=\"never\"\n                          [appearance]=\"appearance\"\n                          [class.mat-form-field-invalid]=\"formControl.touched && signFormControl.invalid\">\n            <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER</mat-label>\n            <mat-select [formControl]=\"signFormControl\"\n                        [tabindex]=\"tabindex+1\">\n              <mat-option [value]=\"1\">{{'COMMON.LAT_LONG.LAT_SIGN_N'|translate}}</mat-option>\n              <mat-option [value]=\"-1\" >{{'COMMON.LAT_LONG.LAT_SIGN_S'|translate}}</mat-option>\n            </mat-select>\n\n            <div matSuffix>\n              <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n            </div>\n          </mat-form-field>\n\n          <!-- sign on longitude -->\n          <mat-form-field floatLabel=\"never\"\n                          *ngSwitchCase=\"'longitude'\"\n                          [class.mat-form-field-invalid]=\"formControl.touched && signFormControl.invalid\">\n            <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER</mat-label>\n            <mat-select [formControl]=\"signFormControl\"\n                        [tabindex]=\"tabindex+2\">\n              <mat-option [value]=\"1\" translate>{{'COMMON.LAT_LONG.LONG_SIGN_E'|translate}}</mat-option>\n              <mat-option [value]=\"-1\" translate>{{'COMMON.LAT_LONG.LONG_SIGN_W'|translate}}</mat-option>\n            </mat-select>\n\n            <div matSuffix>\n              <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n            </div>\n          </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
                     providers: [
                         {
                             provide: i1.NG_VALUE_ACCESSOR,
@@ -5697,6 +5686,7 @@
         pattern: [{ type: i0.Input, args: ['latLongPattern',] }],
         required: [{ type: i0.Input }],
         floatLabel: [{ type: i0.Input }],
+        appearance: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         tabindex: [{ type: i0.Input }],
         defaultSign: [{ type: i0.Input }],
@@ -6094,7 +6084,7 @@
     MatDate.decorators = [
         { type: i0.Component, args: [{
                     selector: 'mat-date-field',
-                    template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                class=\"mat-form-field-disabled\">\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\"\n         readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{formControl.value|dateFormat: {pattern: datePattern} }}</ion-text>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n  <mat-form-field [floatLabel]=\"floatLabel\">\n\n    <mat-label>{{placeholder}}</mat-label>\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"!mobile\"\n           [formControl]=\"textControl\"\n           [textMask]=\"{mask: mask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n           [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n           (blur)=\"checkIfTouched()\"\n           (keyup.arrowdown)=\"openDatePicker($event, datePicker)\"\n           (keyup.escape)=\"preventEvent($event)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           [appAutofocus]=\"autofocus\">\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"mobile\"\n           [formControl]=\"textControl\"\n           (click)=\"openDatePickerIfMobile($event, datePicker)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           readonly>\n\n    <!-- Hide the final input -->\n    <input matInput type=\"text\" [formControl]=\"formControl\"\n           hidden\n           [matDatepicker]=\"datePicker\"\n           [matDatepickerFilter]=\"datePickerFilter\"\n           (dateChange)=\"onDatePickerChange($event)\">\n\n    <button type=\"button\" mat-icon-button tabindex=\"-1\" matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"formControl.disabled\">\n      <div *ngIf=\"mobile; then iconDate; else iconDesktop\"></div>\n    </button>\n    <button matSuffix mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"clear()\"\n            [hidden]=\"formControl.disabled || !formControl.value\">\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <!-- errors -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey\" [ngSwitch]=\"errorKey\">\n      <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n      <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</span>\n      <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n      <span *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>\n      <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n      <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n      <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n      <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n    </mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <!-- mat hint -->\n    <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <div class=\"mat-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <mat-datepicker #datePicker\n                  [touchUi]=\"mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  [startAt]=\"startDate\"\n                  ></mat-datepicker>\n\n\n\n</ng-template>\n\n<ng-template #iconDesktop>\n  <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n  <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n",
+                    template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                [appearance]=\"appearance\"\n                class=\"mat-form-field-disabled\">\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\"\n         readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{formControl.value|dateFormat: {pattern: datePattern} }}</ion-text>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n  <mat-form-field [floatLabel]=\"floatLabel\"\n                  [appearance]=\"appearance\">\n\n    <mat-label>{{placeholder}}</mat-label>\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"!mobile\"\n           [formControl]=\"textControl\"\n           [textMask]=\"{mask: mask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n           [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n           (blur)=\"checkIfTouched()\"\n           (keyup.arrowdown)=\"openDatePicker($event, datePicker)\"\n           (keyup.escape)=\"preventEvent($event)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           [appAutofocus]=\"autofocus\">\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"mobile\"\n           [formControl]=\"textControl\"\n           (click)=\"openDatePickerIfMobile($event, datePicker)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           readonly>\n\n    <!-- Hide the final input -->\n    <input matInput type=\"text\" [formControl]=\"formControl\"\n           hidden\n           [matDatepicker]=\"datePicker\"\n           [matDatepickerFilter]=\"datePickerFilter\"\n           (dateChange)=\"onDatePickerChange($event)\">\n\n    <button type=\"button\" mat-icon-button tabindex=\"-1\" matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"formControl.disabled\">\n      <div *ngIf=\"mobile; then iconDate; else iconDesktop\"></div>\n    </button>\n    <button matSuffix mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"clear()\"\n            [hidden]=\"formControl.disabled || !formControl.value\">\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <!-- errors -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey\" [ngSwitch]=\"errorKey\">\n      <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n      <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</span>\n      <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n      <span *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>\n      <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n      <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n      <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n      <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n    </mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <!-- mat hint -->\n    <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <div class=\"mat-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <mat-datepicker #datePicker\n                  [touchUi]=\"mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  [startAt]=\"startDate\"\n                  ></mat-datepicker>\n\n\n\n</ng-template>\n\n<ng-template #iconDesktop>\n  <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n  <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n",
                     providers: [
                         DEFAULT_VALUE_ACCESSOR,
                     ],
@@ -6116,6 +6106,7 @@
         formControlName: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         floatLabel: [{ type: i0.Input }],
+        appearance: [{ type: i0.Input }],
         required: [{ type: i0.Input }],
         compact: [{ type: i0.Input }],
         placeholderChar: [{ type: i0.Input }],
@@ -6511,12 +6502,12 @@
     MatDateTime.decorators = [
         { type: i0.Component, args: [{
                     selector: 'mat-date-time-field',
-                    template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                class=\"mat-form-field-disabled\">\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\"\n         readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{formControl.value|dateFormat: {pattern: displayPattern} }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable >\n  <ion-grid class=\"ion-no-padding\">\n    <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\">\n\n          <mat-label>{{placeholder}}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <input matInput #matInput autocomplete=\"off\" type=\"text\"\n                 *ngIf=\"!mobile\"\n                 [formControl]=\"dayControl\"\n                 [textMask]=\"{mask: dayMask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n                 [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n                 (blur)=\"checkIfTouched()\"\n                 (keyup.arrowdown)=\"openDatePicker($event, datePicker)\"\n                 (keyup.escape)=\"preventEvent($event)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\"\n                 [appAutofocus]=\"autofocus\">\n          <input matInput #matInput autocomplete=\"off\" type=\"text\"\n                 *ngIf=\"mobile\"\n                 [formControl]=\"dayControl\"\n                 (click)=\"openDatePickerIfMobile($event, datePicker)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\"\n                 readonly>\n\n          <!-- Hide the final input -->\n          <input matInput type=\"text\" [formControl]=\"formControl\"\n                 hidden\n                 [matDatepicker]=\"datePicker\"\n                 [matDatepickerFilter]=\"datePickerFilter\"\n                 (dateChange)=\"onDatePickerChange($event)\">\n\n          <button type=\"button\" mat-icon-button tabindex=\"-1\" matSuffix\n                  (click)=\"openDatePicker($event, datePicker)\"\n                  [disabled]=\"formControl.disabled\">\n            <div *ngIf=\"mobile; then iconDate; else iconDesktop\"></div>\n          </button>\n          <button matSuffix mat-icon-button tabindex=\"-1\"\n                  type=\"button\"\n                  *ngIf=\"clearable\"\n                  (click)=\"clear()\"\n                  [hidden]=\"formControl.disabled || !formControl.value\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-datepicker #datePicker\n                        [touchUi]=\"mobile\"\n                        [disabled]=\"formControl.disabled\"\n                        [startAt]=\"startDate\"></mat-datepicker>\n        <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\" >\n          <!-- errors -->\n          <ng-container [ngSwitch]=\"formControl.touched && formControl.errors|mapKeys|arrayFirst\">\n            <mat-error *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</mat-error>\n            <mat-error *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</mat-error>\n            <mat-error *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</mat-error>\n            <mat-error *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n            <mat-error *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n            <mat-error *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n            <mat-error *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</mat-error>\n          </ng-container>\n          <ng-content select=\"mat-error\"></ng-content>\n\n          <!-- mat hint -->\n          <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n            <div class=\"mat-form-field-hint-spacer\"></div>\n            <ng-content select=\"mat-hint\"></ng-content>\n          </div>\n        </div>\n\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && (hourControl.invalid || formControl.invalid)\">\n          <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.TIME</mat-label>\n          <input matInput #matInput type=\"text\"\n                 *ngIf=\"!mobile\"\n                 [formControl]=\"hourControl\"\n                 autocomplete=\"off\"\n                 min=\"0\" max=\"23\"\n                 [textMask]=\"{mask: hourMask, keepCharPositions: true, placeholderChar: placeholderChar, guide: true}\"\n                 [placeholder]=\"'COMMON.TIME_PLACEHOLDER'|translate\"\n                 [required]=\"required\"\n                 (keyup.arrowdown)=\"openTimePicker($event)\"\n                 (keyup.escape)=\"preventEvent($event)\"\n                 (blur)=\"checkIfTouched()\"\n                 [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n\n          <input matInput #matInput type=\"text\"\n                 *ngIf=\"mobile\"\n                 [formControl]=\"hourControl\"\n                 (click)=\"openTimePickerIfMobile($event)\"\n                 readonly>\n\n          <input matInput type=\"text\"\n                 [formControl]=\"hourControl\"\n                 hidden\n                 [ngxTimepicker]=\"timePicker\"\n                 [format]=\"24\">\n\n          <button matSuffix type=\"button\" mat-icon-button\n                  tabindex=\"-1\"\n                  *ngIf=\"!compact && !mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (click)=\"openTimePicker($event)\" >\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n          <button matSuffix type=\"button\" mat-icon-button\n                  tabindex=\"-1\"\n                  *ngIf=\"!compact && mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (click)=\"openTimePickerIfMobile($event)\">\n            <mat-icon>access_time</mat-icon>\n          </button>\n\n          <ngx-material-timepicker #timePicker [@.disabled]=\"true\"\n                                   (timeSet)=\"onTimePickerChange($event)\"\n                                   [ESC]=\"!mobile\"\n                                   [defaultTime]=\"'00:00'\"\n                                   [cancelBtnTmpl]=\"timePickerCancelButton\"\n                                   [confirmBtnTmpl]=\"timePickerOkButton\"\n                                   [preventOverlayClick]=\"mobile\"\n                                   [enableKeyboardInput]=\"false\"\n                                   [disableAnimation]=\"true\">\n            <!-- cancel button -->\n            <ng-template #timePickerCancelButton>\n              <ion-button fill=\"clear\" color=\"dark\">\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n            </ng-template>\n\n            <!-- confirm button -->\n            <ng-template #timePickerOkButton>\n              <ion-button fill=\"solid\" color=\"tertiary\">\n                <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n              </ion-button>\n            </ng-template>\n\n          </ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n\n</ng-template>\n\n<ng-template #iconDesktop>\n  <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n  <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n",
+                    template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                [appearance]=\"appearance\"\n                class=\"mat-form-field-disabled\">\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\"\n         readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{formControl.value|dateFormat: {pattern: displayPattern} }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable >\n  <ion-grid class=\"ion-no-padding mat-form-field-{{appearance}}\">\n    <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [appearance]=\"appearance\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\">\n\n          <mat-label>{{placeholder}}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <input matInput #matInput autocomplete=\"off\" type=\"text\"\n                 *ngIf=\"!mobile\"\n                 [formControl]=\"dayControl\"\n                 [textMask]=\"{mask: dayMask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n                 [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n                 (blur)=\"checkIfTouched()\"\n                 (keyup.arrowdown)=\"openDatePicker($event, datePicker)\"\n                 (keyup.escape)=\"preventEvent($event)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\"\n                 [appAutofocus]=\"autofocus\">\n          <input matInput #matInput autocomplete=\"off\" type=\"text\"\n                 *ngIf=\"mobile\"\n                 [formControl]=\"dayControl\"\n                 (click)=\"openDatePickerIfMobile($event, datePicker)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\"\n                 readonly>\n\n          <!-- Hide the final input -->\n          <input matInput type=\"text\" [formControl]=\"formControl\"\n                 hidden\n                 [matDatepicker]=\"datePicker\"\n                 [matDatepickerFilter]=\"datePickerFilter\"\n                 (dateChange)=\"onDatePickerChange($event)\">\n\n          <button type=\"button\" mat-icon-button tabindex=\"-1\" matSuffix\n                  (click)=\"openDatePicker($event, datePicker)\"\n                  [disabled]=\"formControl.disabled\">\n            <div *ngIf=\"mobile; then iconDate; else iconDesktop\"></div>\n          </button>\n          <button matSuffix mat-icon-button tabindex=\"-1\"\n                  type=\"button\"\n                  *ngIf=\"clearable\"\n                  (click)=\"clear()\"\n                  [hidden]=\"formControl.disabled || !formControl.value\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-datepicker #datePicker\n                        [touchUi]=\"mobile\"\n                        [disabled]=\"formControl.disabled\"\n                        [startAt]=\"startDate\"></mat-datepicker>\n        <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\" >\n          <!-- errors -->\n          <ng-container [ngSwitch]=\"formControl.touched && formControl.errors|mapKeys|arrayFirst\">\n            <mat-error *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</mat-error>\n            <mat-error *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</mat-error>\n            <mat-error *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</mat-error>\n            <mat-error *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n            <mat-error *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n            <mat-error *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n            <mat-error *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</mat-error>\n          </ng-container>\n          <ng-content select=\"mat-error\"></ng-content>\n\n          <!-- mat hint -->\n          <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n            <div class=\"mat-form-field-hint-spacer\"></div>\n            <ng-content select=\"mat-hint\"></ng-content>\n          </div>\n        </div>\n\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [appearance]=\"appearance\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && (hourControl.invalid || formControl.invalid)\">\n          <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.TIME</mat-label>\n          <input matInput #matInput type=\"text\"\n                 *ngIf=\"!mobile\"\n                 [formControl]=\"hourControl\"\n                 autocomplete=\"off\"\n                 min=\"0\" max=\"23\"\n                 [textMask]=\"{mask: hourMask, keepCharPositions: true, placeholderChar: placeholderChar, guide: true}\"\n                 [placeholder]=\"'COMMON.TIME_PLACEHOLDER'|translate\"\n                 [required]=\"required\"\n                 (keyup.arrowdown)=\"openTimePicker($event)\"\n                 (keyup.escape)=\"preventEvent($event)\"\n                 (blur)=\"checkIfTouched()\"\n                 [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n\n          <input matInput #matInput type=\"text\"\n                 *ngIf=\"mobile\"\n                 [formControl]=\"hourControl\"\n                 (click)=\"openTimePickerIfMobile($event)\"\n                 readonly>\n\n          <input matInput type=\"text\"\n                 [formControl]=\"hourControl\"\n                 hidden\n                 [ngxTimepicker]=\"timePicker\"\n                 [format]=\"24\">\n\n          <button matSuffix type=\"button\" mat-icon-button\n                  tabindex=\"-1\"\n                  *ngIf=\"!compact && !mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (click)=\"openTimePicker($event)\" >\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n          <button matSuffix type=\"button\" mat-icon-button\n                  tabindex=\"-1\"\n                  *ngIf=\"!compact && mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (click)=\"openTimePickerIfMobile($event)\">\n            <mat-icon>access_time</mat-icon>\n          </button>\n\n          <ngx-material-timepicker #timePicker [@.disabled]=\"true\"\n                                   (timeSet)=\"onTimePickerChange($event)\"\n                                   [ESC]=\"!mobile\"\n                                   [defaultTime]=\"'00:00'\"\n                                   [cancelBtnTmpl]=\"timePickerCancelButton\"\n                                   [confirmBtnTmpl]=\"timePickerOkButton\"\n                                   [preventOverlayClick]=\"mobile\"\n                                   [enableKeyboardInput]=\"false\"\n                                   [disableAnimation]=\"true\">\n            <!-- cancel button -->\n            <ng-template #timePickerCancelButton>\n              <ion-button fill=\"clear\" color=\"dark\">\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n            </ng-template>\n\n            <!-- confirm button -->\n            <ng-template #timePickerOkButton>\n              <ion-button fill=\"solid\" color=\"tertiary\">\n                <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n              </ion-button>\n            </ng-template>\n\n          </ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n\n</ng-template>\n\n<ng-template #iconDesktop>\n  <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n  <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n",
                     providers: [
                         DEFAULT_VALUE_ACCESSOR$1,
                     ],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field .datetime-md{padding:0!important}ion-row.no-wrap{flex-wrap:nowrap}ion-col.day{min-width:100px}ion-col.day .mat-form-field-subscript-wrapper{overflow:visible;right:-64px;width:calc(100% + 64px)}ion-col.day .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper{display:flex}ion-col.day .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper .mat-form-field-hint-spacer{flex:1 0 1em}ion-col.hour{min-width:55px;max-width:65px}ion-col.hour mat-form-field{width:100%}ion-col.hour mat-form-field input[type=text],ion-col.hour mat-form-field mat-label{text-align:left;min-width:50px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:100px}.hour .mat-form-field-label{max-width:40px}.hour mat-form-field.mat-form-field-should-float .mat-form-field-placeholder{max-width:inherit}mat-error{text-align:right;width:100%}"]
+                    styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field .datetime-md{padding:0!important}ion-row.no-wrap{flex-wrap:nowrap}ion-col.day{min-width:100px}ion-col.day .mat-form-field-subscript-wrapper{overflow:visible;right:-64px;width:calc(100% + 64px)}ion-col.day .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper{display:flex}ion-col.day .mat-form-field-subscript-wrapper .mat-form-field-hint-wrapper .mat-form-field-hint-spacer{flex:1 0 1em}ion-col.hour{min-width:55px;max-width:65px}ion-col.hour mat-form-field{width:100%}ion-col.hour mat-form-field input[type=text],ion-col.hour mat-form-field mat-label{text-align:left;min-width:50px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:100px}.mat-form-field-outline ion-col.day{min-width:153px}.mat-form-field-outline ion-col.hour{min-width:100px;max-width:110px}.hour .mat-form-field-label{max-width:40px}.hour mat-form-field.mat-form-field-should-float .mat-form-field-placeholder{max-width:inherit}mat-error{text-align:right;width:100%}"]
                 },] }
     ];
     MatDateTime.ctorParameters = function () { return [
@@ -6532,6 +6523,7 @@
         formControlName: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         floatLabel: [{ type: i0.Input }],
+        appearance: [{ type: i0.Input }],
         required: [{ type: i0.Input }],
         mobile: [{ type: i0.Input }],
         compact: [{ type: i0.Input }],
@@ -6843,7 +6835,7 @@
     MatDateShort.decorators = [
         { type: i0.Component, args: [{
                     selector: 'mat-date-short-field',
-                    template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly else writable\">\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\">\n  <ion-text>{{formControl.value|dateFormat: {pattern: displayPattern} }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<ng-template #writable>\n  <mat-form-field [floatLabel]=\"floatLabel\">\n\n    <mat-label>{{placeholder}}</mat-label>\n\n    <div matPrefix><ng-content select=\"[matPrefix]\"></ng-content></div>\n\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"!mobile\"\n           [formControl]=\"dayControl\"\n           [textMask]=\"{mask: dayMask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n           [placeholder]=\"'COMMON.DATE_YEAR_PLACEHOLDER'|translate\"\n           (blur)=\"checkIfTouched()\"\n           (keyup.arrowdown)=\"openDatePicker($event, datePicker1)\"\n           (keyup.escape)=\"preventEvent($event)\"\n           (click)=\"matInput.select()\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\">\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"mobile\"\n           [formControl]=\"dayControl\"\n           (click)=\"openDatePickerIfMobile($event, datePicker1)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           readonly>\n\n    <!-- Hide the final control -->\n    <input matInput type=\"text\"\n           [formControl]=\"formControl\"\n           hidden\n           [matDatepicker]=\"datePicker1\"\n           (dateChange)=\"onDatePickerChange($event)\">\n\n\n    <button matSuffix mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"openDatePicker($event, datePicker1)\"\n            [disabled]=\"formControl.disabled\">\n      <div *ngIf=\"mobile; then iconDate; else iconDesktop\"></div>\n    </button>\n    <button matSuffix mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"writeValue(null)\"\n            [hidden]=\"formControl.disabled || !formControl.value\">\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <mat-error *ngIf=\"formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey\" [ngSwitch]=\"errorKey\">\n      <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n      <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</span>\n      <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n      <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n      <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n      <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n      <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n    </mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n\n  <mat-datepicker #datePicker1\n                  startView=\"multi-year\"\n                  [touchUi]=\"mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (yearSelected)=\"closeDatePicker($event, datePicker1)\"\n                  [startAt]=\"startDate\"></mat-datepicker>\n\n  <ng-template #iconDesktop>\n    <mat-icon>keyboard_arrow_down</mat-icon>\n  </ng-template>\n\n  <ng-template #iconDate>\n    <mat-icon>date_range</mat-icon>\n  </ng-template>\n\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
+                    template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly else writable\"\n                [floatLabel]=\"floatLabel\"\n                [appearance]=\"appearance\"\n                class=\"mat-form-field-disabled\">\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\">\n  <ion-text>{{formControl.value|dateFormat: {pattern: displayPattern} }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<ng-template #writable>\n  <mat-form-field [floatLabel]=\"floatLabel\"\n                  [appearance]=\"appearance\">\n\n    <mat-label>{{placeholder}}</mat-label>\n\n    <div matPrefix><ng-content select=\"[matPrefix]\"></ng-content></div>\n\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"!mobile\"\n           [formControl]=\"dayControl\"\n           [textMask]=\"{mask: dayMask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n           [placeholder]=\"'COMMON.DATE_YEAR_PLACEHOLDER'|translate\"\n           (blur)=\"checkIfTouched()\"\n           (keyup.arrowdown)=\"openDatePicker($event, datePicker1)\"\n           (keyup.escape)=\"preventEvent($event)\"\n           (click)=\"matInput.select()\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\">\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"mobile\"\n           [formControl]=\"dayControl\"\n           (click)=\"openDatePickerIfMobile($event, datePicker1)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           readonly>\n\n    <!-- Hide the final control -->\n    <input matInput type=\"text\"\n           [formControl]=\"formControl\"\n           hidden\n           [matDatepicker]=\"datePicker1\"\n           (dateChange)=\"onDatePickerChange($event)\">\n\n\n    <button matSuffix mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"openDatePicker($event, datePicker1)\"\n            [disabled]=\"formControl.disabled\">\n      <div *ngIf=\"mobile; then iconDate; else iconDesktop\"></div>\n    </button>\n    <button matSuffix mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"writeValue(null)\"\n            [hidden]=\"formControl.disabled || !formControl.value\">\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <mat-error *ngIf=\"formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey\" [ngSwitch]=\"errorKey\">\n      <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n      <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</span>\n      <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n      <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n      <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n      <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n      <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n    </mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n\n  <mat-datepicker #datePicker1\n                  startView=\"multi-year\"\n                  [touchUi]=\"mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (yearSelected)=\"closeDatePicker($event, datePicker1)\"\n                  [startAt]=\"startDate\"></mat-datepicker>\n\n  <ng-template #iconDesktop>\n    <mat-icon>keyboard_arrow_down</mat-icon>\n  </ng-template>\n\n  <ng-template #iconDate>\n    <mat-icon>date_range</mat-icon>\n  </ng-template>\n\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
                     providers: [
                         DEFAULT_VALUE_ACCESSOR$2,
                     ],
@@ -6866,6 +6858,7 @@
         formControlName: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         floatLabel: [{ type: i0.Input }],
+        appearance: [{ type: i0.Input }],
         readonly: [{ type: i0.Input }],
         required: [{ type: i0.Input }],
         compact: [{ type: i0.Input }],
@@ -7129,7 +7122,7 @@
     MatDuration.decorators = [
         { type: i0.Component, args: [{
                     selector: 'mat-duration-field',
-                    template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly else writable\">\n  <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\">\n  <ion-text>{{ formControl.value|duration }}</ion-text>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n  <mat-form-field [floatLabel]=\"floatLabel\"\n                  [class.mat-form-field-disabled]=\"formControl.disabled\"\n                  [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\">\n    <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.TIME</mat-label>\n\n    <div matPrefix><ng-content select=\"[matPrefix]\"></ng-content></div>\n\n    <input matInput #matInput type=\"text\"\n           autocomplete=\"off\"\n           [formControl]=\"textControl\"\n           [textMask]=\"{mask: hourMask, keepCharPositions: true, placeholderChar: placeholderChar, guide: true}\"\n           [placeholder]=\"'COMMON.DURATION_PLACEHOLDER'|translate\"\n           [required]=\"required\"\n           (keydown.tab)=\"moveCaretToSeparator($event, true)\"\n           (keydown.shift.tab)=\"moveCaretToSeparator($event, false)\"\n           (keyup.escape)=\"preventEvent($event)\"\n           (blur)=\"checkIfTouched()\"\n           [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n\n\n    <!-- errors -->\n    <mat-error *ngIf=\"!formControl.hasError('required') && textControl.hasError('pattern')\" translate>ERROR.FIELD_NOT_VALID_PATTERN</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{(compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate:formControl.errors.min }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors.max }}</mat-error>\n\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n</ng-template>\n\n",
+                    template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly else writable\"\n                [floatLabel]=\"floatLabel\"\n                [appearance]=\"appearance\"\n                class=\"mat-form-field-disabled\">\n  <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\">\n  <ion-text>{{ formControl.value|duration }}</ion-text>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n  <mat-form-field [floatLabel]=\"floatLabel\"\n                  [appearance]=\"appearance\"\n                  [class.mat-form-field-disabled]=\"formControl.disabled\"\n                  [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\">\n    <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.TIME</mat-label>\n\n    <div matPrefix><ng-content select=\"[matPrefix]\"></ng-content></div>\n\n    <input matInput #matInput type=\"text\"\n           autocomplete=\"off\"\n           [formControl]=\"textControl\"\n           [textMask]=\"{mask: hourMask, keepCharPositions: true, placeholderChar: placeholderChar, guide: true}\"\n           [placeholder]=\"'COMMON.DURATION_PLACEHOLDER'|translate\"\n           [required]=\"required\"\n           (keydown.tab)=\"moveCaretToSeparator($event, true)\"\n           (keydown.shift.tab)=\"moveCaretToSeparator($event, false)\"\n           (keyup.escape)=\"preventEvent($event)\"\n           (blur)=\"checkIfTouched()\"\n           [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n\n\n    <!-- errors -->\n    <mat-error *ngIf=\"!formControl.hasError('required') && textControl.hasError('pattern')\" translate>ERROR.FIELD_NOT_VALID_PATTERN</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('min')\">\n      {{(compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate:formControl.errors.min }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('max')\">\n      {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors.max }}</mat-error>\n\n    <ng-content select=\"mat-error\"></ng-content>\n  </mat-form-field>\n</ng-template>\n\n",
                     providers: [
                         DEFAULT_VALUE_ACCESSOR$3,
                     ],
@@ -7151,6 +7144,7 @@
         formControlName: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         floatLabel: [{ type: i0.Input }],
+        appearance: [{ type: i0.Input }],
         readonly: [{ type: i0.Input }],
         required: [{ type: i0.Input }],
         compact: [{ type: i0.Input }],
@@ -7379,7 +7373,7 @@
     MatBooleanField.decorators = [
         { type: i0.Component, args: [{
                     selector: 'mat-boolean-field',
-                    template: "<mat-form-field  *ngIf=\"readonly; else writable\"\n                 [floatLabel]=\"floatLabel\"\n                 class=\"mat-form-field-disabled {{classList}}\">\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n  <input matInput hidden type=\"text\" readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{(value == null ? 'COMMON.EMPTY_OPTION' : (value === true ? yesLabel : noLabel)) | translate }}</ion-text>\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<ng-template #writable>\n  <ng-container [ngSwitch]=\"style\">\n\n    <!-- Radio -->\n    <mat-form-field *ngSwitchCase=\"'radio'\"\n                    [floatLabel]=\"showRadio && (!floatLabel || floatLabel === 'auto') ? 'always': floatLabel\"\n                    class=\"mat-boolean-field mat-boolean-field-radio {{classList}}\">\n      <mat-label *ngIf=\"placeholder && floatLabel!=='never'\">\n        {{placeholder}}\n        <span [hidden]=\"showRadio\">({{yesLabel|translate}}/{{'COMMON.NO'|translate}})</span>\n      </mat-label>\n      <div matPrefix>\n        <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n      </div>\n      <input matInput #fakeInput type=\"text\" readonly=\"true\"\n             [formControl]=\"formControl\"\n             (focus)=\"_onFocusFakeInput($event)\"\n             [required]=\"required\"\n             [class.cdk-visually-hidden]=\"showRadio\"\n             [tabindex]=\"tabindex\">\n\n      <!-- radio button -->\n      <mat-radio-group [hidden]=\"!showRadio\"\n                       [formControl]=\"formControl\"\n                       (change)=\"onRadioValueChanged($event)\">\n        <mat-radio-button #yesButton [value]=\"true\">\n          <span>{{yesLabel|translate}}</span>\n        </mat-radio-button>&nbsp;\n        <mat-radio-button #noButton [value]=\"false\">\n          <span>{{noLabel|translate}}</span>\n        </mat-radio-button>\n      </mat-radio-group>\n\n      <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n      <div matSuffix>\n        <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n      </div>\n    </mat-form-field>\n\n    <!-- Checkbox -->\n    <mat-form-field *ngSwitchCase=\"'checkbox'\"\n                    [floatLabel]=\"floatLabel\"\n                    class=\"mat-boolean-field mat-boolean-field-checkbox {{classList}}\">\n      <mat-label *ngIf=\"placeholder && !showRadio\">\n        {{placeholder}}\n      </mat-label>\n      <div matPrefix>\n        <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n      </div>\n      <input matInput #matInput\n             [formControl]=\"formControl\"\n             (focus)=\"_onFocusFakeInput($event)\"\n             [required]=\"required\"\n             [class.cdk-visually-hidden]=\"showRadio\"\n             [tabindex]=\"tabindex\">\n\n      <ion-label>&nbsp;</ion-label>\n\n      <!-- checkbox, when compact -->\n      <mat-checkbox #checkboxButton\n                    [formControl]=\"formControl\"\n                    (change)=\"onCheckboxValueChanged($event)\"\n                    [indeterminate]=\"value===null\"\n                    [hidden]=\"!showRadio\"\n                    [tabindex]=\"tabindex\">\n      </mat-checkbox>\n\n      <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n      <div matSuffix>\n        <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n      </div>\n    </mat-form-field>\n\n    <!-- Buttons -->\n    <mat-form-field *ngSwitchCase=\"'button'\"\n                    [floatLabel]=\"floatLabel === 'never' ? 'never' : 'always'\"\n                    class=\"mat-boolean-field mat-boolean-field-button {{classList}}\">\n      <div matPrefix>\n        <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n      </div>\n      <input matInput type=\"text\" hidden\n             [formControl]=\"formControl\"\n             [placeholder]=\"placeholder\"\n             [required]=\"required\">\n      <div class=\"mat-form-field-buttons\"\n           [style.--buttons-col-count]=\"buttonsColCount\"\n           *ngIf=\"!formControl.disabled; else disabledLabel\">\n        <!-- yes -->\n        <ion-button class=\"mat-form-field-button\"\n                    [tabindex]=\"_tabindex\"\n                    (click)=\"writeValue(true, $event)\"\n                    (keyup.enter)=\"writeValue(true, $event)\"\n                    [color]=\"_value == null ? 'tertiary' : (_value === true) ? 'accent' : 'light'\">\n          <ion-icon *ngIf=\"showButtonIcons && yesIcon; let icon\" slot=\"start\" [name]=\"icon\"></ion-icon>\n          {{yesLabel|translate}}\n        </ion-button>\n\n        <!-- No button -->\n        <ion-button class=\"mat-form-field-button\"\n                    [tabindex]=\"_tabindex !== undefined ? (_tabindex + 1) : undefined\"\n                    (click)=\"writeValue(false, $event)\"\n                    (keyup.enter)=\"writeValue(false, $event)\"\n                    [color]=\"_value == null ? 'tertiary' : (_value === false) ? 'accent' : 'light'\">\n          <ion-icon *ngIf=\"showButtonIcons && noIcon; let icon\" slot=\"start\" [name]=\"icon\"></ion-icon>\n          {{noLabel|translate}}\n        </ion-button>\n      </div>\n      <ng-template #disabledLabel>\n        <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n      </ng-template>\n\n      <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n      <div matSuffix>\n        <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n      </div>\n\n    </mat-form-field>\n  </ng-container>\n\n</ng-template>\n\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
+                    template: "<mat-form-field  *ngIf=\"readonly; else writable\"\n                 [floatLabel]=\"floatLabel\"\n                 class=\"mat-form-field-disabled {{classList}}\">\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n  <input matInput hidden type=\"text\" readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{(value == null ? 'COMMON.EMPTY_OPTION' : (value === true ? yesLabel : noLabel)) | translate }}</ion-text>\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<ng-template #writable>\n  <ng-container [ngSwitch]=\"style\">\n\n    <!-- Radio -->\n    <mat-form-field *ngSwitchCase=\"'radio'\"\n                    [floatLabel]=\"showRadio && (!floatLabel || floatLabel === 'auto') ? 'always': floatLabel\"\n                    [appearance]=\"appearance\"\n                    class=\"mat-boolean-field mat-boolean-field-radio {{classList}}\">\n      <mat-label *ngIf=\"placeholder && floatLabel!=='never'\">\n        {{placeholder}}\n        <span [hidden]=\"showRadio\">({{yesLabel|translate}}/{{'COMMON.NO'|translate}})</span>\n      </mat-label>\n      <div matPrefix>\n        <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n      </div>\n      <input matInput #fakeInput type=\"text\" readonly=\"true\"\n             [formControl]=\"formControl\"\n             (focus)=\"_onFocusFakeInput($event)\"\n             [required]=\"required\"\n             [class.cdk-visually-hidden]=\"showRadio\"\n             [tabindex]=\"tabindex\">\n\n      <!-- radio button -->\n      <mat-radio-group [hidden]=\"!showRadio\"\n                       [formControl]=\"formControl\"\n                       (change)=\"onRadioValueChanged($event)\">\n        <mat-radio-button #yesButton [value]=\"true\">\n          <span>{{yesLabel|translate}}</span>\n        </mat-radio-button>&nbsp;\n        <mat-radio-button #noButton [value]=\"false\">\n          <span>{{noLabel|translate}}</span>\n        </mat-radio-button>\n      </mat-radio-group>\n\n      <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n      <div matSuffix>\n        <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n      </div>\n    </mat-form-field>\n\n    <!-- Checkbox -->\n    <mat-form-field *ngSwitchCase=\"'checkbox'\"\n                    [floatLabel]=\"floatLabel\"\n                    [appearance]=\"appearance\"\n                    class=\"mat-boolean-field mat-boolean-field-checkbox {{classList}}\">\n      <mat-label *ngIf=\"placeholder && !showRadio\">\n        {{placeholder}}\n      </mat-label>\n      <div matPrefix>\n        <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n      </div>\n      <input matInput #matInput\n             [formControl]=\"formControl\"\n             (focus)=\"_onFocusFakeInput($event)\"\n             [required]=\"required\"\n             [class.cdk-visually-hidden]=\"showRadio\"\n             [tabindex]=\"tabindex\">\n\n      <ion-label>&nbsp;</ion-label>\n\n      <!-- checkbox, when compact -->\n      <mat-checkbox #checkboxButton\n                    [formControl]=\"formControl\"\n                    (change)=\"onCheckboxValueChanged($event)\"\n                    [indeterminate]=\"value===null\"\n                    [hidden]=\"!showRadio\"\n                    [tabindex]=\"tabindex\">\n      </mat-checkbox>\n\n      <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n\n      <div matSuffix>\n        <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n      </div>\n    </mat-form-field>\n\n    <!-- Buttons -->\n    <mat-form-field *ngSwitchCase=\"'button'\"\n                    [floatLabel]=\"floatLabel === 'never' ? 'never' : 'always'\"\n                    [appearance]=\"appearance\"\n                    class=\"mat-boolean-field mat-boolean-field-button {{classList}}\">\n      <div matPrefix>\n        <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n      </div>\n      <input matInput type=\"text\" hidden\n             [formControl]=\"formControl\"\n             [placeholder]=\"placeholder\"\n             [required]=\"required\">\n      <div class=\"mat-form-field-buttons\"\n           [style.--buttons-col-count]=\"buttonsColCount\"\n           *ngIf=\"!formControl.disabled; else disabledLabel\">\n        <!-- yes -->\n        <ion-button class=\"mat-form-field-button\"\n                    [tabindex]=\"_tabindex\"\n                    (click)=\"writeValue(true, $event)\"\n                    (keyup.enter)=\"writeValue(true, $event)\"\n                    [color]=\"_value == null ? 'tertiary' : (_value === true) ? 'accent' : 'light'\">\n          <ion-icon *ngIf=\"showButtonIcons && yesIcon; let icon\" slot=\"start\" [name]=\"icon\"></ion-icon>\n          {{yesLabel|translate}}\n        </ion-button>\n\n        <!-- No button -->\n        <ion-button class=\"mat-form-field-button\"\n                    [tabindex]=\"_tabindex !== undefined ? (_tabindex + 1) : undefined\"\n                    (click)=\"writeValue(false, $event)\"\n                    (keyup.enter)=\"writeValue(false, $event)\"\n                    [color]=\"_value == null ? 'tertiary' : (_value === false) ? 'accent' : 'light'\">\n          <ion-icon *ngIf=\"showButtonIcons && noIcon; let icon\" slot=\"start\" [name]=\"icon\"></ion-icon>\n          {{noLabel|translate}}\n        </ion-button>\n      </div>\n      <ng-template #disabledLabel>\n        <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n      </ng-template>\n\n      <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n      <div matSuffix>\n        <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n      </div>\n\n    </mat-form-field>\n  </ng-container>\n\n</ng-template>\n\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
                     providers: [
                         DEFAULT_VALUE_ACCESSOR$4
                     ],
@@ -7399,6 +7393,7 @@
         formControlName: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         floatLabel: [{ type: i0.Input }],
+        appearance: [{ type: i0.Input }],
         readonly: [{ type: i0.Input }],
         required: [{ type: i0.Input }],
         compact: [{ type: i0.Input }],
@@ -9052,7 +9047,7 @@
         { type: i0.Component, args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: 'mat-chips-field',
-                    template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field [floatLabel]=\"floatLabel\"\n                      [appearance]=\"appearance\"\n                      class=\"material-chips\" [class.mat-form-field-disabled]=\"disabled\">\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <mat-label>{{placeholder}}</mat-label>\n        <mat-chip-list #chipList\n                       (focus)=\"filterChipsFocusEvent($event)\" >\n          <mat-chip class=\"ion-no-margin\"\n            *ngFor=\"let item of value\"\n            [selectable]=\"false\"\n            [removable]=\"!disabled\"\n            (removed)=\"remove(item)\"\n            [color]=\"chipColor\"\n            >\n            {{displayWith(item)}}\n            <mat-icon matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n          </mat-chip>\n\n          <input #matInputText type=\"text\"\n                 [matAutocomplete]=\"autocomplete\"\n                 [matAutocompletePosition]=\"matAutocompletePosition\"\n                 [formControl]=\"inputControl\"\n                 [appAutofocus]=\"autofocus\"\n                 [tabindex]=\"_tabindex\"\n                 [readonly]=\"disabled\"\n                 [hidden]=\"disabled\"\n                 [required]=\"required\"\n                 (click)=\"clicked.emit($event)\"\n                 (focus)=\"filterInputTextFocusEvent($event)\"\n                 (blur)=\"filterInputTextBlurEvent($event)\"\n                 (keydown.escape)=\"keydownEscape.emit($event)\"\n                 (keyup.enter)=\"keyupEnter.emit($event)\"\n                 (keyup.arrowdown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n                 [matChipInputFor]=\"chipList\"\n          >\n        </mat-chip-list>\n\n        <!-- autocomplete -->\n        <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                          (optionSelected)=\"add($event)\"\n                          autoActiveFirstOption\n                          [displayWith]=\"displayWith\"\n                          [class]=\"classList\"\n                          [panelWidth]=\"panelWidth\">\n          <ion-row class=\"mat-autocomplete-header ion-no-padding column\">\n            <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n              <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n            </ion-col>\n          </ion-row>\n\n          <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\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: inputControl.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          <!-- footer -->\n          <ion-row *ngIf=\"itemCount as count\"\n                   class=\"mat-autocomplete-footer ion-no-padding\">\n            <ion-col>\n              <ion-text 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          <!-- 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        <div matSuffix class=\"mat-form-field-suffix-bottom\">\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n        <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <ng-content select=\"[matError]\"></ng-content>\n\n      </mat-form-field>\n\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</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 mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"dropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button 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 [floatLabel]=\"floatLabel\"\n                      [appearance]=\"appearance\"\n                      class=\"material-chips\"\n                      [class.mat-form-field-disabled]=\"disabled\">\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n        <mat-label>{{placeholder}}</mat-label>\n        <mat-chip-list #chipList\n                       (focus)=\"filterChipsFocusEvent($event)\" >\n          <mat-chip class=\"ion-no-margin\"\n            *ngFor=\"let item of value\"\n            [selectable]=\"false\"\n            [removable]=\"!disabled\"\n            (removed)=\"remove(item)\"\n            [color]=\"chipColor\"\n            >\n            {{displayWith(item)}}\n            <mat-icon matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n          </mat-chip>\n\n          <input #matInputText type=\"text\"\n                 [matAutocomplete]=\"autocomplete\"\n                 [matAutocompletePosition]=\"matAutocompletePosition\"\n                 [formControl]=\"inputControl\"\n                 [appAutofocus]=\"autofocus\"\n                 [tabindex]=\"_tabindex\"\n                 [readonly]=\"disabled\"\n                 [hidden]=\"disabled\"\n                 [required]=\"required\"\n                 (click)=\"clicked.emit($event)\"\n                 (focus)=\"filterInputTextFocusEvent($event)\"\n                 (blur)=\"filterInputTextBlurEvent($event)\"\n                 (keydown.escape)=\"keydownEscape.emit($event)\"\n                 (keyup.enter)=\"keyupEnter.emit($event)\"\n                 (keyup.arrowdown)=\"!autocomplete.showPanel && dropButtonClick.emit($event)\"\n                 [matChipInputFor]=\"chipList\"\n          >\n        </mat-chip-list>\n\n        <!-- autocomplete -->\n        <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                          (optionSelected)=\"add($event)\"\n                          autoActiveFirstOption\n                          [displayWith]=\"displayWith\"\n                          [class]=\"classList\"\n                          [panelWidth]=\"panelWidth\">\n          <ion-row class=\"mat-autocomplete-header ion-no-padding column\">\n            <ion-col *ngFor=\"let attr of displayAttributes; index as i\" [size]=\"displayColumnSizes[i]\">\n              <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n            </ion-col>\n          </ion-row>\n\n          <ng-container *ngIf=\"$filteredItems | async as items; else loadingTemplate\">\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: inputControl.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          <!-- footer -->\n          <ion-row *ngIf=\"itemCount as count\"\n                   class=\"mat-autocomplete-footer ion-no-padding\">\n            <ion-col>\n              <ion-text 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          <!-- 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        <div matSuffix class=\"mat-form-field-suffix-bottom\">\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n        <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n        <ng-content select=\"[matError]\"></ng-content>\n\n      </mat-form-field>\n\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</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 mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          (click)=\"dropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button 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: [{
                             provide: i1.NG_VALUE_ACCESSOR,
                             multi: true,
@@ -20724,14 +20719,14 @@
             }
             return this._onChange
                 .pipe(operators.filter(isNotNil), operators.mergeMap(function (_) { return waitFor(function () { return !_this._saving; }); }), operators.mergeMap(function (_) { return __awaiter(_this, void 0, void 0, function () {
-                var excludedDataByFilter, excludedDataByPagination, data, promiseOrData, _a, total;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var excludedDataByFilter, excludedDataByPagination, data, promiseOrData, _d, total;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0:
                             excludedDataByFilter = [];
-                            _b.label = 1;
+                            _e.label = 1;
                         case 1:
-                            _b.trys.push([1, , 6, 7]);
+                            _e.trys.push([1, , 6, 7]);
                             if (isEmptyArray(this.data)) {
                                 return [2 /*return*/, { data: [], total: 0 }];
                             }
@@ -20741,14 +20736,14 @@
                             if (!((promiseOrData instanceof Promise))) return [3 /*break*/, 3];
                             return [4 /*yield*/, promiseOrData];
                         case 2:
-                            _a = _b.sent();
+                            _d = _e.sent();
                             return [3 /*break*/, 4];
                         case 3:
-                            _a = promiseOrData;
-                            _b.label = 4;
+                            _d = promiseOrData;
+                            _e.label = 4;
                         case 4:
-                            data = _a;
-                            _b.label = 5;
+                            data = _d;
+                            _e.label = 5;
                         case 5:
                             // Apply filter (will update hiddenData)
                             data = this.filter(data, filterData, excludedDataByFilter);
@@ -20804,16 +20799,16 @@
         };
         InMemoryEntitiesService.prototype.saveAll = function (data, options) {
             return __awaiter(this, void 0, void 0, function () {
-                var res, _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var res, _d;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0:
                             if (!this.data)
                                 throw new Error('[memory-service] Could not save, because value not set');
                             this.markAsSaving();
-                            _b.label = 1;
+                            _e.label = 1;
                         case 1:
-                            _b.trys.push([1, , 6, 7]);
+                            _e.trys.push([1, , 6, 7]);
                             // Restore hidden data
                             if (isNotEmptyArray(this._hiddenData))
                                 data = data.concat.apply(data, __spread(this._hiddenData));
@@ -20822,14 +20817,14 @@
                             if (!((res instanceof Promise))) return [3 /*break*/, 3];
                             return [4 /*yield*/, res];
                         case 2:
-                            _a = _b.sent();
+                            _d = _e.sent();
                             return [3 /*break*/, 4];
                         case 3:
-                            _a = res;
-                            _b.label = 4;
+                            _d = res;
+                            _e.label = 4;
                         case 4:
-                            data = _a;
-                            _b.label = 5;
+                            data = _d;
+                            _e.label = 5;
                         case 5:
                             this.data = data;
                             this.dirty = true;
@@ -20846,7 +20841,7 @@
             return __awaiter(this, void 0, void 0, function () {
                 var updatedData, deleteCount;
                 var _this = this;
-                return __generator(this, function (_a) {
+                return __generator(this, function (_d) {
                     if (!this.data)
                         throw new Error('[memory-service] Could not delete, because value not set');
                     updatedData = this.data.filter(function (entity) {
@@ -20880,6 +20875,18 @@
                 return this._equalsFn(d1, d2);
             return d1 && d1.equals ? d1.equals(d2) : EntityUtils.equals(d1, d2, 'id');
         };
+        /**
+         * Count data inside the service.
+         * @param opts
+         */
+        InMemoryEntitiesService.prototype.count = function (opts) {
+            if (opts === void 0) { opts = { withHidden: false }; }
+            var _a, _b, _c;
+            if (opts.withHidden) {
+                return (((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) || 0) + (((_b = this._hiddenData) === null || _b === void 0 ? void 0 : _b.length) || 0);
+            }
+            return (((_c = this.data) === null || _c === void 0 ? void 0 : _c.length) || 0);
+        };
         /* -- protected methods -- */
         InMemoryEntitiesService.prototype.filter = function (data, _filter, hiddenData) {
             // if filter is DataFilter instance, use its test function
@@ -22683,7 +22690,7 @@
     FormButtonsBarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-form-buttons-bar',
-                    template: "\n<ion-toolbar [class]=\"classList\">\n  <ion-row class=\"ion-no-padding\" nowrap>\n    <!-- show menu button -->\n    <ion-col size=\"auto\" class=\"hidden-xs hidden-sm\">\n      <ion-menu-toggle>\n        <button\n          mat-icon-button\n          color=\"accent\"\n          [title]=\"'COMMON.BTN_SHOW_MENU' | translate\"\n          (click)=\"menu.toggleSplitPaneWhen()\">\n          <mat-icon><span>&#xbb;</span></mat-icon>\n        </button>\n      </ion-menu-toggle>\n    </ion-col>\n\n    <ion-col>\n      <ng-content></ng-content>\n    </ion-col>\n\n    <ion-col size=\"auto\">\n\n      <!-- close (go back) -->\n      <ion-button fill=\"clear\" color=\"dark\" (click)=\"onBack.emit($event)\"\n                  (keyup.enter)=\"onBack.emit($event)\"\n                  *ngIf=\"onBack.observers | isNotEmptyArray\">\n        <ion-label translate>COMMON.BTN_CLOSE</ion-label>\n      </ion-button>\n\n      <!-- reload -->\n      <ion-button fill=\"clear\" color=\"dark\" (click)=\"onCancel.emit($event)\"\n                  (keyup.enter)=\"onCancel.emit($event)\"\n                  [disabled]=\"disabledCancel\">\n        <ion-icon slot=\"start\" name=\"refresh\"></ion-icon>\n        <ion-label translate>COMMON.BTN_RESET</ion-label>\n      </ion-button>\n\n      <!-- next -->\n      <ion-button fill=\"solid\" (click)=\"onNext.emit($event)\" (keyup.enter)=\"onNext.emit($event)\" *ngIf=\"onNext.observers | isNotEmptyArray\">\n        <ion-label translate>COMMON.BTN_NEXT</ion-label>\n        <ion-icon slot=\"end\" name=\"arrow-forward\"></ion-icon>\n      </ion-button>\n\n      <!-- save -->\n      <ion-button [fill]=\"disabled ? 'clear' : 'solid'\"\n                  (click)=\"onSave.emit($event)\"\n                  (keyup.enter)=\"onSave.emit($event)\" color=\"danger\"\n                  [disabled]=\"disabled\">\n        <ion-label [innerHTML]=\"'COMMON.BTN_SAVE_WITH_SHORTCUT'|translate\" [title]=\"'COMMON.BTN_SAVE_WITH_SHORTCUT_HELP'|translate\"></ion-label>\n      </ion-button>\n    </ion-col>\n  </ion-row>\n</ion-toolbar>\n",
+                    template: "\n<ion-toolbar [class]=\"classList\">\n  <ion-row class=\"ion-no-padding\" nowrap>\n    <!-- show menu button -->\n    <ion-col size=\"auto\" class=\"hidden-xs hidden-sm\">\n      <ion-menu-toggle>\n        <button\n          mat-icon-button\n          color=\"accent\"\n          [title]=\"'COMMON.BTN_SHOW_MENU' | translate\"\n          (click)=\"menu.toggleSplitPaneWhen()\">\n          <mat-icon><span>&#xbb;</span></mat-icon>\n        </button>\n      </ion-menu-toggle>\n    </ion-col>\n\n    <ion-col>\n      <ng-content></ng-content>\n    </ion-col>\n\n    <ion-col size=\"auto\">\n\n      <ng-content select=\"[slot=end]\"></ng-content>\n\n      <!-- close (go back) -->\n      <ion-button fill=\"clear\" color=\"dark\" (click)=\"onBack.emit($event)\"\n                  (keyup.enter)=\"onBack.emit($event)\"\n                  *ngIf=\"onBack.observers | isNotEmptyArray\">\n        <ion-label translate>COMMON.BTN_CLOSE</ion-label>\n      </ion-button>\n\n      <!-- reload -->\n      <ion-button fill=\"clear\" color=\"dark\" (click)=\"onCancel.emit($event)\"\n                  (keyup.enter)=\"onCancel.emit($event)\"\n                  [disabled]=\"disabledCancel\">\n        <ion-icon slot=\"start\" name=\"refresh\"></ion-icon>\n        <ion-label translate>COMMON.BTN_RESET</ion-label>\n      </ion-button>\n\n      <!-- next -->\n      <ion-button fill=\"solid\" (click)=\"onNext.emit($event)\" (keyup.enter)=\"onNext.emit($event)\" *ngIf=\"onNext.observers | isNotEmptyArray\">\n        <ion-label translate>COMMON.BTN_NEXT</ion-label>\n        <ion-icon slot=\"end\" name=\"arrow-forward\"></ion-icon>\n      </ion-button>\n\n      <!-- save -->\n      <ion-button [fill]=\"disabled ? 'clear' : 'solid'\"\n                  (click)=\"onSave.emit($event)\"\n                  (keyup.enter)=\"onSave.emit($event)\" color=\"danger\"\n                  [disabled]=\"disabled\">\n        <ion-label [innerHTML]=\"'COMMON.BTN_SAVE_WITH_SHORTCUT'|translate\" [title]=\"'COMMON.BTN_SAVE_WITH_SHORTCUT_HELP'|translate\"></ion-label>\n      </ion-button>\n    </ion-col>\n  </ion-row>\n</ion-toolbar>\n",
                     providers: [
                         { provide: FormButtonsBarToken, useExisting: FormButtonsBarComponent }
                     ],