@sumaris-net/ngx-components 0.25.8 → 0.25.12

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

@@ -972,7 +972,7 @@ class MatAutocompleteField {
             }));
         }
         else {
-            if (value !== this.$inputItems.getValue()) {
+            if (value !== this.$inputItems.value) {
                 this.$inputItems.next(value);
             }
         }
@@ -1182,6 +1182,12 @@ class MatAutocompleteField {
     }
     ngOnDestroy() {
         this._subscription.unsubscribe();
+        if (this._itemsSubscription) {
+            this._itemsSubscription.unsubscribe();
+        }
+        if (this._openedSubscription) {
+            this._openedSubscription.unsubscribe();
+        }
         this.$inputItems.complete();
         this.$filteredItems.complete();
         this._reload$.complete();
@@ -1192,6 +1198,7 @@ class MatAutocompleteField {
         this.onFocus.complete();
         this.onKeydownEscape.complete();
         this.onKeyupEnter.complete();
+        this._fetchMore$.complete();
         this._implicitValue = undefined;
         this.formControl = null;
         this.displayWith = null;
@@ -1483,7 +1490,7 @@ MatAutocompleteField.decorators = [
     { type: Component, args: [{
                 // eslint-disable-next-line @angular-eslint/component-selector
                 selector: 'mat-autocomplete-field',
-                template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field [floatLabel]=\"floatLabel\"\n                      [class.mat-form-field-disabled]=\"disabled\"\n                      [title]=\"displayValue\">\n\n        <div matPrefix><ng-content select=\"[matPrefix]\"></ng-content></div>\n\n        <!-- readonly -->\n        <ng-container *ngIf=\"_readonly; else writable\">\n          <input matInput hidden type=\"text\"\n                 [placeholder]=\"placeholder\"\n                 [formControl]=\"formControl\" readonly>\n          <ion-text>{{displayWith(value)}}</ion-text>\n        </ng-container>\n\n        <ng-template #writable>\n\n          <!-- Basic select -->\n          <mat-select #matSelect\n                      *ngIf=\"!searchable; else searchableTemplate\"\n                      [placeholder]=\"placeholder\"\n                      [formControl]=\"formControl\"\n                      [tabindex]=\"_tabindex\"\n                      [panelClass]=\"classList\"\n                      [style.width]=\"panelWidth\"\n                      (focus)=\"filterMatSelectFocusEvent($event)\"\n                      (blur)=\"filterMatSelectBlurEvent($event)\"\n                      (keydown.escape)=\"onKeydownEscape.emit($event)\"\n                      [compareWith]=\"compareWith\"\n                      [multiple]=\"multiple\"\n                      [required]=\"required\">\n            <mat-select-trigger>{{ displayWith(value) }}</mat-select-trigger>\n\n            <!-- header -->\n            <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n              <ion-col *ngFor=\"let attr of displayAttributes; index as i; last as isLast\" [size]=\"displayColumnSizes[i]\" >\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              </ion-col>\n            </ion-row>\n\n            <!-- None option -->\n            <mat-option *ngIf=\"!required\" class=\"ion-no-padding\">\n              <ion-row class=\"ion-no-padding\">\n                <ion-col class=\"ion-no-padding\">\n                  <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <ng-container *ngIf=\"$filteredItems | async; let items\">\n              <!-- No item option -->\n              <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                  <ion-label>{{noResultMessage | translate}}</ion-label>\n              </mat-option>\n\n              <!-- options -->\n              <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item.classList\">\n                  <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                           [size]=\"displayColumnSizes[i]\">\n                    <ion-text>{{item | propertyGet: path }}</ion-text>\n                  </ion-col>\n                </ion-row>\n              </mat-option>\n\n              <!-- More item -->\n              <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initMatSelectInfiniteScroll()\"\n                          class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-container>\n          </mat-select>\n        </ng-template>\n\n        <!--\n          NOTE :\n           - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n        -->\n        <ng-template #searchableTemplate>\n          <input matInput #matInputText type=\"text\"\n                 [matAutocomplete]=\"autocomplete\"\n                 [matAutocompletePosition]=\"matAutocompletePosition\"\n                 [formControl]=\"formControl\"\n                 [placeholder]=\"placeholder\"\n                 [appAutofocus]=\"autofocus\"\n                 [tabindex]=\"_tabindex\"\n                 [required]=\"required\"\n                 (click)=\"onClick.emit($event)\"\n                 (focus)=\"filterInputTextFocusInEvent($event)\"\n                 (blur)=\"filterInputTextBlurEvent($event)\"\n                 (keydown.escape)=\"onKeydownEscape.emit($event)\"\n                 (keyup.enter)=\"onKeyupEnter.emit($event)\"\n                 (keyup.arrowdown)=\"!autocomplete.opened && onDropButtonClick.emit($event)\">\n\n          <!-- autocomplete -->\n          <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                            autoActiveFirstOption\n                            [displayWith]=\"displayWith\"\n                            [class]=\"classList\"\n                            [class.cdk-visually-hidden]=\"!searchable\"\n                            [panelWidth]=\"panelWidth\">\n\n            <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n              <ion-col *ngFor=\"let attr of displayAttributes; index as i; last as last\" [size]=\"displayColumnSizes[i]\" >\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                <ion-text color=\"light\" *ngIf=\"last && itemCount; let count \" class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n              </ion-col>\n            </ion-row>\n\n            <ng-container *ngIf=\"$filteredItems | async; else loadingTemplate; let items\">\n              <!-- No item option -->\n              <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                <ion-label>{{noResultMessage | translate}}</ion-label>\n              </mat-option>\n\n              <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\" >\n                <ion-row [classList]=\"item.classList\">\n                  <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                           [size]=\"displayColumnSizes[i]\">\n                    <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: formControl.value, withAccent: highlightAccent }\"></ion-text>\n                  </ion-col>\n                </ion-row>\n              </mat-option>\n\n              <!-- More item -->\n              <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                          class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-container>\n\n            <!-- Loading spinner -->\n            <ng-template #loadingTemplate>\n              <mat-option *ngIf=\"(matInputText.value | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                          class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-template>\n\n            <!-- Need more characters -->\n            <ng-template #waitMoreCharacterTemplate>\n              <mat-option class=\"ion-padding text-italic\" disabled>\n                <ion-label>\n                  {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n                </ion-label>\n              </mat-option>\n            </ng-template>\n          </mat-autocomplete>\n\n        </ng-template>\n\n\n        <button matSuffix mat-icon-button tabindex=\"-1\"\n                type=\"button\"\n                *ngIf=\"searchable\"\n                (click)=\"onDropButtonClick.emit($event)\"\n                [hidden]=\"disabled\">\n          <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n        </button>\n        <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\"\n                *ngIf=\"enabled && mobile && !searchable && !multiple\"\n                [title]=\"'COMMON.BTN_SEARCH'|translate\"\n                (click)=\"toggleSearch($event)\">\n          <mat-icon>search</mat-icon>\n        </button>\n        <button matSuffix mat-icon-button tabindex=\"-1\"\n                type=\"button\"\n                *ngIf=\"clearable\"\n                (click)=\"clearValue($event)\"\n                [hidden]=\"disabled || !formControl.value\">\n          <mat-icon>close</mat-icon>\n        </button>\n\n        <ng-content matSuffix select=\"[matSuffix]\"></ng-content>\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    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n\n</ion-grid>\n",
+                template: "<ion-grid class=\"ion-no-padding\">\n  <ion-row>\n    <ion-col class=\"ion-no-padding\">\n      <mat-form-field *ngIf=\"_readonly; else writable\"\n                      [floatLabel]=\"floatLabel\"\n                      [title]=\"displayValue\"\n                      class=\"mat-form-field-disabled\">\n\n        <div matPrefix>\n          <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n        </div>\n\n        <!-- readonly -->\n        <ng-container>\n          <input matInput hidden type=\"text\"\n                 [placeholder]=\"placeholder\"\n                 [formControl]=\"formControl\" readonly>\n          <ion-text>{{displayWith(value)}}</ion-text>\n        </ng-container>\n\n        <div matSuffix>\n          <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n        </div>\n\n      </mat-form-field>\n\n      <ng-template #writable>\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-disabled]=\"disabled\"\n                        [title]=\"displayValue\">\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Basic select -->\n          <mat-select #matSelect\n                      *ngIf=\"!searchable; else searchableTemplate\"\n                      [placeholder]=\"placeholder\"\n                      [formControl]=\"formControl\"\n                      [tabindex]=\"_tabindex\"\n                      [panelClass]=\"classList\"\n                      [style.width]=\"panelWidth\"\n                      (focus)=\"filterMatSelectFocusEvent($event)\"\n                      (blur)=\"filterMatSelectBlurEvent($event)\"\n                      (keydown.escape)=\"onKeydownEscape.emit($event)\"\n                      [compareWith]=\"compareWith\"\n                      [multiple]=\"multiple\"\n                      [required]=\"required\">\n            <mat-select-trigger>{{ displayWith(value) }}</mat-select-trigger>\n\n            <!-- header -->\n            <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n              <ion-col *ngFor=\"let attr of displayAttributes; index as i; last as isLast\" [size]=\"displayColumnSizes[i]\">\n                <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n              </ion-col>\n            </ion-row>\n\n            <!-- None option -->\n            <mat-option *ngIf=\"!required\" class=\"ion-no-padding\">\n              <ion-row class=\"ion-no-padding\">\n                <ion-col class=\"ion-no-padding\">\n                  <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>\n                </ion-col>\n              </ion-row>\n            </mat-option>\n\n            <ng-container *ngIf=\"$filteredItems | async; let items\">\n              <!-- No item option -->\n              <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                <ion-label>{{noResultMessage | translate}}</ion-label>\n              </mat-option>\n\n              <!-- options -->\n              <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                <ion-row [classList]=\"item.classList\">\n                  <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                           [size]=\"displayColumnSizes[i]\">\n                    <ion-text>{{item | propertyGet: path }}</ion-text>\n                  </ion-col>\n                </ion-row>\n              </mat-option>\n\n              <!-- More item -->\n              <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initMatSelectInfiniteScroll()\"\n                          class=\"ion-padding\" disabled>\n                <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n              </mat-option>\n            </ng-container>\n          </mat-select>\n\n\n          <!--\n            NOTE :\n             - \"selectInputContent($event) || onFocus.emit($event)\" : call onFocus only when to the input is empty (nothing to select)\n          -->\n          <ng-template #searchableTemplate>\n            <input matInput #matInputText type=\"text\"\n                   [matAutocomplete]=\"autocomplete\"\n                   [matAutocompletePosition]=\"matAutocompletePosition\"\n                   [formControl]=\"formControl\"\n                   [placeholder]=\"placeholder\"\n                   [appAutofocus]=\"autofocus\"\n                   [tabindex]=\"_tabindex\"\n                   [required]=\"required\"\n                   (click)=\"onClick.emit($event)\"\n                   (focus)=\"filterInputTextFocusInEvent($event)\"\n                   (blur)=\"filterInputTextBlurEvent($event)\"\n                   (keydown.escape)=\"onKeydownEscape.emit($event)\"\n                   (keyup.enter)=\"onKeyupEnter.emit($event)\"\n                   (keyup.arrowdown)=\"!autocomplete.opened && onDropButtonClick.emit($event)\">\n\n            <!-- autocomplete -->\n            <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                              autoActiveFirstOption\n                              [displayWith]=\"displayWith\"\n                              [class]=\"classList\"\n                              [class.cdk-visually-hidden]=\"!searchable\"\n                              [panelWidth]=\"panelWidth\">\n\n              <ion-row class=\"mat-autocomplete-header ion-no-padding\">\n                <ion-col *ngFor=\"let attr of displayAttributes; index as i; last as last\" [size]=\"displayColumnSizes[i]\">\n                  <ion-label [innerHTML]=\"displayColumnNames[i] | translate\"></ion-label>\n                  <ion-text color=\"light\" *ngIf=\"last && itemCount; let count \" class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n                </ion-col>\n              </ion-row>\n\n              <ng-container *ngIf=\"$filteredItems | async; else loadingTemplate; let items\">\n                <!-- No item option -->\n                <mat-option *ngIf=\"items | isEmptyArray\" class=\"ion-padding text-italic\" disabled>\n                  <ion-label>{{noResultMessage | translate}}</ion-label>\n                </mat-option>\n\n                <mat-option *ngFor=\"let item of items\" [value]=\"item\" class=\"ion-no-padding\">\n                  <ion-row [classList]=\"item.classList\">\n                    <ion-col *ngFor=\"let path of displayAttributes; index as i;\"\n                             [size]=\"displayColumnSizes[i]\">\n                      <ion-text [innerHTML]=\"item | propertyGet: path | highlight: { search: formControl.value, withAccent: highlightAccent }\"></ion-text>\n                    </ion-col>\n                  </ion-row>\n                </mat-option>\n\n                <!-- More item -->\n                <mat-option *ngIf=\"_moreItemsCount\" (ngInit)=\"_initAutocompleteInfiniteScroll()\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-container>\n\n              <!-- Loading spinner -->\n              <ng-template #loadingTemplate>\n                <mat-option *ngIf=\"(matInputText.value | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate\"\n                            class=\"ion-padding\" disabled>\n                  <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n                </mat-option>\n              </ng-template>\n\n              <!-- Need more characters -->\n              <ng-template #waitMoreCharacterTemplate>\n                <mat-option class=\"ion-padding text-italic\" disabled>\n                  <ion-label>\n                    {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}\n                  </ion-label>\n                </mat-option>\n              </ng-template>\n            </mat-autocomplete>\n\n          </ng-template>\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          <mat-error *ngIf=\"formControl.hasError('entity')\" translate>ERROR.FIELD_INVALID</mat-error>\n          <ng-content select=\"[matError]\"></ng-content>\n\n        </mat-form-field>\n      </ng-template>\n    </ion-col>\n    <ion-col size=\"auto\" class=\"ion-align-self-center\">\n      <ng-content select=\"[matAfter]\"></ng-content>\n    </ion-col>\n  </ion-row>\n\n</ion-grid>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n\n<ng-template #matSuffixTemplate>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"searchable\"\n          (click)=\"onDropButtonClick.emit($event)\"\n          [hidden]=\"disabled\">\n    <mat-icon class=\"large select-arrow\">arrow_drop_down</mat-icon>\n  </button>\n  <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\"\n          *ngIf=\"enabled && mobile && !searchable && !multiple\"\n          [title]=\"'COMMON.BTN_SEARCH'|translate\"\n          (click)=\"toggleSearch($event)\">\n    <mat-icon>search</mat-icon>\n  </button>\n  <button matSuffix mat-icon-button tabindex=\"-1\"\n          type=\"button\"\n          *ngIf=\"clearable\"\n          (click)=\"clearValue($event)\"\n          [hidden]=\"disabled || !formControl.value\">\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n",
                 providers: [DEFAULT_VALUE_ACCESSOR$6],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [":host{display:inline-block;position:relative}:host.ion-text-wrap ion-label{white-space:normal!important}button[hidden]{display:none}mat-icon.select-arrow{color:rgba(0,0,0,.47);font-size:150%}.fact-scroll-viewport{height:100%;width:100%}.fact-item{height:54px;display:flex}.fact-item .fact-date{min-width:100px;text-align:center;font-size:24pt}.fact-item .fact-date,.fact-item .fact-text{height:100%;align-items:center;justify-content:center;display:flex}.fact-item .fact-text{border-radius:10px}cdk-virtual-scroll-viewport{border:1px solid #000}cdk-virtual-scroll-viewport li{list-style:none}"]
@@ -3187,10 +3194,10 @@ class MatLatLongField {
         this._subscription = new Subscription();
         this.disabling = false;
         this.writing = false;
+        this._readonly = false;
         this.maxDecimals = LAT_LONG_DEFAULT_MAX_DECIMALS;
         this.placeholderChar = DEFAULT_PLACEHOLDER_CHAR;
         this.floatLabel = 'auto';
-        this.readonly = false;
         this.required = false;
         this.onBlur = new EventEmitter();
         this.onFocus = new EventEmitter();
@@ -3199,6 +3206,13 @@ class MatLatLongField {
     get disabled() {
         return this.readonly || this.formControl.disabled;
     }
+    set readonly(value) {
+        this._readonly = value;
+        this.markForCheck();
+    }
+    get readonly() {
+        return this._readonly;
+    }
     ngOnInit() {
         this.type = this.type || 'latitude';
         this.pattern = this.pattern || 'DDMM';
@@ -3256,16 +3270,6 @@ class MatLatLongField {
         )
             .subscribe((_) => this.markForCheck()));
     }
-    ngAfterViewInit() {
-        // Inject suffix elements, into the first injection point found
-        if (this.suffixDiv) {
-            this.suffixInjections.find(item => {
-                item.nativeElement.append(this.suffixDiv.nativeElement);
-                this.suffixDiv.nativeElement.classList.remove('cdk-visually-hidden');
-                return true; // take only the first injection point
-            });
-        }
-    }
     ngOnDestroy() {
         this._subscription.unsubscribe();
     }
@@ -3457,7 +3461,7 @@ class MatLatLongField {
 MatLatLongField.decorators = [
     { type: 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  <input matInput hidden type=\"text\"\n         readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{formatFn(value, formatFnOptions)}}</ion-text>\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><ng-content select=\"[matPrefix]\"></ng-content></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 *ngIf=\"!showSignControl\" matSuffix #injectMatSuffix></div>\n\n          <!--<div matSuffix *ngIf=\"!showSignControl\"><ng-content select=\"[matSuffix]\"></ng-content></div>-->\n\n          <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\">\n\n            <!-- errors -->\n            <ng-container *ngIf=\"formControl.touched\">\n              <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n              <mat-error *ngIf=\"formControl.hasError('latitude')\" translate>ERROR.FIELD_NOT_VALID_LATITUDE</mat-error>\n              <mat-error *ngIf=\"formControl.hasError('longitude')\" translate>ERROR.FIELD_NOT_VALID_LONGITUDE</mat-error>\n              <ng-content select=\"mat-error\"></ng-content>\n            </ng-container>\n\n            <!-- mat hint -->\n            <div class=\"mat-form-field-hint-wrapper\" [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 #injectMatSuffix></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 #injectMatSuffix></div>\n          </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <div class=\"cdk-visually-hidden\">\n    <div #suffix><ng-content select=\"[matSuffix]\"></ng-content></div>\n  </div>\n\n</ng-template>\n",
+                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>{{formatFn(value, formatFnOptions)}}</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 *ngIf=\"!showSignControl\" matSuffix #injectMatSuffix></div>\n\n          <!--<div matSuffix *ngIf=\"!showSignControl\"><ng-content select=\"[matSuffix]\"></ng-content></div>-->\n\n          <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\">\n\n            <!-- errors -->\n            <ng-container *ngIf=\"formControl.touched\">\n              <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n              <mat-error *ngIf=\"formControl.hasError('latitude')\" translate>ERROR.FIELD_NOT_VALID_LATITUDE</mat-error>\n              <mat-error *ngIf=\"formControl.hasError('longitude')\" translate>ERROR.FIELD_NOT_VALID_LONGITUDE</mat-error>\n              <ng-content select=\"mat-error\"></ng-content>\n            </ng-container>\n\n            <!-- mat hint -->\n            <div class=\"mat-form-field-hint-wrapper\" [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\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: NG_VALUE_ACCESSOR,
@@ -3492,9 +3496,7 @@ MatLatLongField.propDecorators = {
     tabindex: [{ type: Input }],
     onBlur: [{ type: Output }],
     onFocus: [{ type: Output }],
-    inputElement: [{ type: ViewChild, args: ['inputElement',] }],
-    suffixDiv: [{ type: ViewChild, args: ['suffix', { static: false },] }],
-    suffixInjections: [{ type: ViewChildren, args: ['injectMatSuffix',] }]
+    inputElement: [{ type: ViewChild, args: ['inputElement',] }]
 };
 
 class SharedMatLatLongModule {
@@ -3840,17 +3842,23 @@ class MatDateTime {
         this._subscription = new Subscription();
         this.writing = true;
         this.disabling = false;
-        this._onDestroy = new EventEmitter();
+        this._readonly = false;
         this.dayMask = DAY_MASK$1;
         this.hourMask = HOUR_MASK$1;
         this.floatLabel = 'auto';
-        this.readonly = false;
         this.compact = false;
         this.placeholderChar = DEFAULT_PLACEHOLDER_CHAR;
         this.autofocus = false;
         this.clearable = false;
         this.locale = (translate.currentLang || translate.defaultLang).substr(0, 2);
     }
+    set readonly(value) {
+        this._readonly = value;
+        this.markForCheck();
+    }
+    get readonly() {
+        return this._readonly;
+    }
     set tabindex(value) {
         if (this._tabindex !== value) {
             this._tabindex = value;
@@ -3900,7 +3908,6 @@ class MatDateTime {
     }
     ngOnDestroy() {
         this._subscription.unsubscribe();
-        this._onDestroy.emit();
     }
     writeValue(valueStr) {
         if (this.writing)
@@ -4146,7 +4153,7 @@ class MatDateTime {
 MatDateTime.decorators = [
     { type: 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  <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><ng-content select=\"[matPrefix]\"></ng-content></div>\n\n          <input matInput #matInput autocomplete=\"off\" type=\"text\"\n                 *ngIf=\"!mobile\"\n                 [formControl]=\"dateFormControl\"\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]=\"dateFormControl\"\n                 (click)=\"openDatePickerIfMobile($event, datePicker)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\"\n                 readonly>\n          <input matInput type=\"text\" [formControl]=\"formControl\"\n                 hidden\n                 [matDatepicker]=\"datePicker\"\n                 (dateChange)=\"onDatePickerChange($event)\">\n\n          <button type=\"button\" mat-icon-button tabindex=\"-1\" matSuffix #datePickerButton2 (click)=\"openDatePicker($event, datePicker)\" [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=\"'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 && (timeFormControl.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]=\"timeFormControl\"\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]=\"timeFormControl\"\n                 (click)=\"openTimePickerIfMobile($event)\"\n                 readonly>\n\n          <input matInput type=\"text\"\n                 [formControl]=\"timeFormControl\"\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",
+                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]=\"dateFormControl\"\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]=\"dateFormControl\"\n                 (click)=\"openDatePickerIfMobile($event, datePicker)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\"\n                 readonly>\n          <input matInput type=\"text\" [formControl]=\"formControl\"\n                 hidden\n                 [matDatepicker]=\"datePicker\"\n                 (dateChange)=\"onDatePickerChange($event)\">\n\n          <button type=\"button\" mat-icon-button tabindex=\"-1\" matSuffix #datePickerButton2 (click)=\"openDatePicker($event, datePicker)\" [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=\"'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 && (timeFormControl.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]=\"timeFormControl\"\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]=\"timeFormControl\"\n                 (click)=\"openTimePickerIfMobile($event)\"\n                 readonly>\n\n          <input matInput type=\"text\"\n                 [formControl]=\"timeFormControl\"\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$4,
                 ],
@@ -4169,11 +4176,11 @@ MatDateTime.propDecorators = {
     formControlName: [{ type: Input }],
     placeholder: [{ type: Input }],
     floatLabel: [{ type: Input }],
-    readonly: [{ type: Input }],
     required: [{ type: Input }],
     compact: [{ type: Input }],
     placeholderChar: [{ type: Input }],
     autofocus: [{ type: Input }],
+    readonly: [{ type: Input }],
     tabindex: [{ type: Input }],
     startDate: [{ type: Input }],
     clearable: [{ type: Input }],
@@ -10881,12 +10888,12 @@ Person = Person_1 = __decorate([
 ], Person);
 class PersonUtils {
     static getMainProfile(profiles) {
-        if (!profiles && !profiles.length)
+        if (isEmptyArray(profiles))
             return 'GUEST';
         return PRIORITIZED_AUTHORITIES.find(label => profiles.includes(label)) || 'GUEST';
     }
     static getMainProfileIndex(profiles) {
-        if (!profiles && !profiles.length)
+        if (isEmptyArray(profiles))
             return PRIORITIZED_AUTHORITIES.length - 1; // return last (lower) profile
         const index = PRIORITIZED_AUTHORITIES.findIndex(label => profiles.includes(label));
         return (index !== -1) ? index : (PRIORITIZED_AUTHORITIES.length - 1);
@@ -15324,7 +15331,7 @@ class AutocompleteTestPage {
 AutocompleteTestPage.decorators = [
     { type: Component, args: [{
                 selector: 'app-autocomplete-test',
-                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar>\n    <a mat-tab-link\n       [active]=\"mode==='mobile'\"\n       (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='desktop'\"\n       (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='memory'\"\n       (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link\n       [active]=\"mode==='temp'\"\n       (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!--<ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n    </ion-grid>-->\n\n\n    <ion-grid *ngIf=\"mode === 'memory'\">\n\n      <!-- debugging memory leak -->\n      <ion-row><ion-col><ion-text><h4>Debug memory leak</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Items type\">\n            <mat-select (selectionChange)=\"memoryAutocompleteFieldName=$event.value\" [value]=\"memoryAutocompleteFieldName\">\n              <mat-option value=\"entity-$items\">Observable</mat-option>\n              <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n        <ion-col size=\"1\" class=\"ion-no-padding\">\n          <mat-form-field floatLabel=\"always\" >\n            <input matInput type=\"text\" hidden placeholder=\"Mobile ?\">\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field formControlName=\"entity\"\n                                  *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n                                  [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                                  [mobile]=\"memoryMobile\"\n                                  [compareWith]=\"compareWithFn\"\n                                  [logPrefix]=\"'[combo-memory-leak]'\">\n          </mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [mobile]=\"true\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-mobile-1]'\"\n                                      [required]=\"true\"\n                                      placeholder=\"Suggest field\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Items is an Observable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>mobile: true, items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-mobile-observable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>mobile: true, items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Change filter\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre></pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-button (click)=\"updateFilter('entity-items-filter')\">Filter on: {{autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}</ion-button>\n                  </ion-col>\n                  <ion-col>\n                    <mat-autocomplete-field formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [mobile]=\"true\"\n                                            [compareWith]=\"compareWithFn\"\n                                            [logPrefix]=\"'[combo-mobile-filter]'\"\n                    ></mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>class=\"min-width-large\"</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"true\"\n                                      class=\"min-width-large\"\n                                      panelWidth=\"400px\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-mobile-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Desktop mode -->\n    <ion-grid *ngIf=\"mode === 'desktop'\">\n      <ion-row>\n        <ion-col><ion-text><h4>Desktop mode</h4></ion-text></ion-col>\n      </ion-row>\n      <ion-row>\n\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  items from suggest function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [mobile]=\"false\"\n                                      [compareWith]=\"compareWithFn\"\n                                      suggestLengthThreshold=\"3\"\n                                      [logPrefix]=\"'[combo-desktop-suggest]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an array\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: [], value: {{stringify(form.controls.entity.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items')\"\n                                      [logPrefix]=\"'[combo-desktop-array-1]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-desktop-missing]'\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size panel\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>class: 'mat-autocomplete-panel-full-size'</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-desktop-disable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                      [readonly]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\" >\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>class=\"mat-autocomplete-panel-full-size\"</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      class=\"mat-autocomplete-panel-full-size\"\n                                      panelWidth=\"100vw\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\" >\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>panelWidth: string</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      panelWidth=\"400px\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-desktop-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
+                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Autocomplete field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar>\n    <a mat-tab-link\n       [active]=\"mode==='mobile'\"\n       (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='desktop'\"\n       (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode==='memory'\"\n       (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link\n       [active]=\"mode==='temp'\"\n       (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!--<ion-grid *ngIf=\"mode === 'temp'\">\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n\n    </ion-grid>-->\n\n\n    <ion-grid *ngIf=\"mode === 'memory'\">\n\n      <!-- debugging memory leak -->\n      <ion-row><ion-col><ion-text><h4>Debug memory leak</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"always\">\n            <input matInput type=\"text\" hidden placeholder=\"Items type\">\n            <mat-select (selectionChange)=\"memoryAutocompleteFieldName=$event.value\" [value]=\"memoryAutocompleteFieldName\">\n              <mat-option value=\"entity-$items\">Observable</mat-option>\n              <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ion-col>\n        <ion-col size=\"1\" class=\"ion-no-padding\">\n          <mat-form-field floatLabel=\"always\" >\n            <input matInput type=\"text\" hidden placeholder=\"Mobile ?\">\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <mat-autocomplete-field formControlName=\"entity\"\n                                  *ngIf=\"!memoryHide && memoryAutocompleteFieldName\"\n                                  [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n                                  [mobile]=\"memoryMobile\"\n                                  [compareWith]=\"compareWithFn\"\n                                  [logPrefix]=\"'[combo-memory-leak]'\">\n          </mat-autocomplete-field>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n    <!-- Mobile mode -->\n    <ion-grid *ngIf=\"mode === 'mobile'\">\n\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Suggest() function\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[]</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-suggestFn')\"\n                                      [mobile]=\"true\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-mobile-1]'\"\n                                      [required]=\"true\"\n                                      placeholder=\"Suggest field\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Items is an Observable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>mobile: true, items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-mobile-observable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>mobile: true, items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"true\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-mobile-2]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Change filter\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre></pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <ion-button (click)=\"updateFilter('entity-items-filter')\">Filter on: {{autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}</ion-button>\n                  </ion-col>\n                  <ion-col>\n                    <mat-autocomplete-field formControlName=\"entity\"\n                                            [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                            [mobile]=\"true\"\n                                            [compareWith]=\"compareWithFn\"\n                                            [logPrefix]=\"'[combo-mobile-filter]'\"\n                    ></mat-autocomplete-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>class=\"min-width-large\"</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"true\"\n                                      class=\"min-width-large\"\n                                      panelWidth=\"400px\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-mobile-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n    <!-- Desktop mode -->\n    <ion-grid *ngIf=\"mode === 'desktop'\">\n      <ion-row>\n        <ion-col><ion-text><h4>Desktop mode</h4></ion-text></ion-col>\n      </ion-row>\n      <ion-row>\n\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  items from suggest function\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>suggest: (value, filter) => LoadResult&lt;any&gt;\nsuggestLengthThreshold: '3'</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [compareWith]=\"compareWithFn\"\n                                      suggestLengthThreshold=\"3\"\n                                      [logPrefix]=\"'[combo-desktop-suggest]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an array\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: [], value: {{stringify(form.controls.entity.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items')\"\n                                      [logPrefix]=\"'[combo-desktop-array-1]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Items is an Observable\n                </ion-text>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [logPrefix]=\"'[combo-desktop-2]'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Control value if missing in items\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>items: Observable&lt;any[]&gt;</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"missingEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-desktop-missing]'\"\n                                      [mobile]=\"false\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size panel\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>class: 'mat-autocomplete-panel-full-size'</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [class]=\"'mat-autocomplete-panel-full-size'\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [matAutocompletePosition]=\"'above'\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disabled control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"disableEntity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-desktop-disable]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly control\n                </ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-$items')\"\n                                      [mobile]=\"false\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                      [readonly]=\"true\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col size=\"9\" >\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Full size combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>class=\"mat-autocomplete-panel-full-size\"</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      class=\"mat-autocomplete-panel-full-size\"\n                                      panelWidth=\"100vw\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-desktop-full-size]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"3\" >\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Large combo\n                </ion-label>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>panelWidth: string</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-autocomplete-field formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-large')\"\n                                      [mobile]=\"false\"\n                                      panelWidth=\"400px\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-desktop-large]'\"\n              ></mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col size=\"6\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-text color=\"primary\">\n                  Readonly toggle\n                </ion-text>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-autocomplete-field #readonlyField formControlName=\"entity\"\n                                      [config]=\"autocompleteFields.get('entity-items-filter')\"\n                                      [placeholder]=\"'Entity'\"\n                                      [mobile]=\"false\"\n                                      [compareWith]=\"compareWithFn\"\n                                      [logPrefix]=\"'[combo-desktop-readonly]'\"\n                                      [readonly]=\"true\">\n                  <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n                  <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n              </mat-autocomplete-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </form>\n\n</ion-content>\n"
             },] }
 ];
 AutocompleteTestPage.ctorParameters = () => [
@@ -15390,7 +15397,7 @@ class LatLongTestPage {
 LatLongTestPage.decorators = [
     { type: Component, args: [{
                 selector: 'app-latlong-test',
-                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Lat/Long field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!-- Empty value -->\n    <form *ngIf=\"form.get('empty') as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row><ion-col><ion-text><h4>Empty, with defaults</h4></ion-text></ion-col></ion-row>\n\n      <ion-row >\n\n        <!-- DD Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Format DD, defaultSign '-'\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"latitude\"\n                                       type=\"latitude\"\n                                       latLongPattern=\"DD\"\n                                       defaultSign=\"-\"\n                                       placeholder=\"Latitude\">\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"longitude\"\n                                       type=\"longitude\"\n                                       latLongPattern=\"DD\"\n                                       defaultSign=\"-\"\n                                       placeholder=\"Longitude\">\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix\n                              (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Format DDMM, defaultSign '+'\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"latitude\"\n                                       type=\"latitude\"\n                                       latLongPattern=\"DDMM\"\n                                       defaultSign=\"+\"\n                                       placeholder=\"Latitude\">\n\n                      <mat-icon matPrefix >room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix\n                              (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"longitude\"\n                                       type=\"longitude\"\n                                       latLongPattern=\"DDMM\"\n                                       defaultSign=\"+\"\n                                       placeholder=\"Longitude\">\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix\n                              (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Mobile + DDMM -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Mobile=true\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"latitude\"\n                                       type=\"latitude\"\n                                       latLongPattern=\"DDMM\"\n                                       defaultSign=\"+\"\n                                       placeholder=\"Latitude\"\n                                       mobile=\"true\">\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"longitude\"\n                                       type=\"longitude\"\n                                       latLongPattern=\"DDMM\"\n                                       defaultSign=\"+\"\n                                       placeholder=\"Longitude\">\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n    </form>\n\n    <form *ngIf=\"form.get('enable') as formGroup\" [formGroup]=\"formGroup\">\n      <ion-grid>\n        <!-- With value -->\n        <ion-row><ion-col><ion-text><h4>With value</h4></ion-text></ion-col></ion-row>\n\n        <ion-row>\n\n          <!-- DD -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">\n                    Format DD\n                  </ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"latitude\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DD\"\n                                         placeholder=\"Latitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"longitude\"\n                                         type=\"longitude\"\n                                         latLongPattern=\"DD\"\n                                         placeholder=\"Longitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- DDMMSS -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">\n                    Format DDMM\n                  </ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"latitude\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Latitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"longitude\"\n                                         type=\"longitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Longitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n\n          <!-- DDMMSS -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">\n                    Format DDMMSS\n                  </ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"latitude\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DDMMSS\"\n                                         placeholder=\"Latitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"longitude\"\n                                         type=\"longitude\"\n                                         latLongPattern=\"DDMMSS\"\n                                         placeholder=\"Longitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <!-- Disable  -->\n    <form *ngIf=\"form.get('disable') as formGroup\" [formGroup]=\"formGroup\">\n      <ion-grid>\n        <ion-row><ion-col><ion-text><h4>Disabled control</h4></ion-text></ion-col></ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">\n                    Disabled control\n                  </ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"latitude\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Latitude\">\n                        <mat-icon matPrefix>room</mat-icon>\n                        <mat-icon matSuffix>gps_fixed</mat-icon>\n                      </mat-latlong-field>\n                    </ion-col>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"longitude\"\n                                         type=\"longitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Longitude\">\n                        <mat-icon matPrefix>room</mat-icon>\n                        <button type=\"button\" mat-icon-button matSuffix\n                                (click)=\"geoPosition($event)\">\n                          <mat-icon>gps_fixed</mat-icon>\n                        </button>\n                      </mat-latlong-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">\n                    Readonly (control is enable)\n                  </ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field [formControl]=\"form.get('enable.latitude')\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Latitude\"\n                                         [readonly]=\"true\">\n                        <mat-icon matPrefix>room</mat-icon>\n                        <mat-icon matSuffix>gps_fixed</mat-icon>\n                      </mat-latlong-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n  </form>\n\n</ion-content>\n"
+                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Lat/Long field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <!-- Empty value -->\n    <form *ngIf=\"form.get('empty') as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row><ion-col><ion-text><h4>Empty, with defaults</h4></ion-text></ion-col></ion-row>\n\n      <ion-row >\n\n        <!-- DD Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Format DD, defaultSign '-'\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"latitude\"\n                                       type=\"latitude\"\n                                       latLongPattern=\"DD\"\n                                       defaultSign=\"-\"\n                                       placeholder=\"Latitude\">\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"longitude\"\n                                       type=\"longitude\"\n                                       latLongPattern=\"DD\"\n                                       defaultSign=\"-\"\n                                       placeholder=\"Longitude\">\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix\n                              (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Format DDMM, defaultSign '+'\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"latitude\"\n                                       type=\"latitude\"\n                                       latLongPattern=\"DDMM\"\n                                       defaultSign=\"+\"\n                                       placeholder=\"Latitude\">\n\n                      <mat-icon matPrefix >room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix\n                              (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"longitude\"\n                                       type=\"longitude\"\n                                       latLongPattern=\"DDMM\"\n                                       defaultSign=\"+\"\n                                       placeholder=\"Longitude\">\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix\n                              (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Mobile + DDMM -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Mobile=true\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"latitude\"\n                                       type=\"latitude\"\n                                       latLongPattern=\"DDMM\"\n                                       defaultSign=\"+\"\n                                       placeholder=\"Latitude\"\n                                       mobile=\"true\">\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field formControlName=\"longitude\"\n                                       type=\"longitude\"\n                                       latLongPattern=\"DDMM\"\n                                       defaultSign=\"+\"\n                                       placeholder=\"Longitude\">\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n    </form>\n\n    <form *ngIf=\"form.get('enable') as formGroup\" [formGroup]=\"formGroup\">\n      <ion-grid>\n        <!-- With value -->\n        <ion-row><ion-col><ion-text><h4>With value</h4></ion-text></ion-col></ion-row>\n\n        <ion-row>\n\n          <!-- DD -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">\n                    Format DD\n                  </ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"latitude\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DD\"\n                                         placeholder=\"Latitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"longitude\"\n                                         type=\"longitude\"\n                                         latLongPattern=\"DD\"\n                                         placeholder=\"Longitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- DDMMSS -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">\n                    Format DDMM\n                  </ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"latitude\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Latitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"longitude\"\n                                         type=\"longitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Longitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n\n          <!-- DDMMSS -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">\n                    Format DDMMSS\n                  </ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"latitude\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DDMMSS\"\n                                         placeholder=\"Latitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"longitude\"\n                                         type=\"longitude\"\n                                         latLongPattern=\"DDMMSS\"\n                                         placeholder=\"Longitude\">\n                      </mat-latlong-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <!-- Disable  -->\n    <form *ngIf=\"form.get('disable') as formGroup\" [formGroup]=\"formGroup\">\n      <ion-grid>\n        <ion-row><ion-col><ion-text><h4>Disabled control</h4></ion-text></ion-col></ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">\n                    Disabled control\n                  </ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small><pre>{{stringify(formGroup.value)}}</pre></small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"latitude\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Latitude\">\n                        <mat-icon matPrefix>room</mat-icon>\n                        <mat-icon matSuffix>gps_fixed</mat-icon>\n                      </mat-latlong-field>\n                    </ion-col>\n                    <ion-col>\n                      <mat-latlong-field formControlName=\"longitude\"\n                                         type=\"longitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Longitude\">\n                        <mat-icon matPrefix>room</mat-icon>\n                        <button type=\"button\" mat-icon-button matSuffix\n                                (click)=\"geoPosition($event)\">\n                          <mat-icon>gps_fixed</mat-icon>\n                        </button>\n                      </mat-latlong-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">\n                    Readonly (control is enable)\n                  </ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n\n                <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n                </mat-checkbox>\n\n                <ion-grid class=\"ion-no-padding\">\n                  <ion-row>\n                    <ion-col>\n                      <mat-latlong-field #readonlyField [formControl]=\"form.get('enable.latitude')\"\n                                         type=\"latitude\"\n                                         latLongPattern=\"DDMM\"\n                                         placeholder=\"Latitude\"\n                                         [readonly]=\"true\">\n                        <mat-icon matPrefix>room</mat-icon>\n                        <mat-icon matSuffix>gps_fixed</mat-icon>\n                      </mat-latlong-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n  </form>\n\n</ion-content>\n"
             },] }
 ];
 LatLongTestPage.ctorParameters = () => [
@@ -16077,7 +16084,8 @@ class DateTimeTestPage {
         this.form = formBuilder.group({
             empty: [null, Validators.required],
             enable: [null, Validators.required],
-            disable: [null, Validators.required]
+            disable: [null, Validators.required],
+            readonly: [null]
         }, {
             validators: SharedFormGroupValidators.dateRange('empty', 'enable')
         });
@@ -16099,6 +16107,7 @@ class DateTimeTestPage {
                 empty: toDateISOString(now.clone().add(2, 'hours')),
                 enable: toDateISOString(now),
                 disable: now,
+                readonly: now
             };
             this.form.setValue(data);
             this.log('[test-page] Data loaded: ' + JSON.stringify(data));
@@ -16145,7 +16154,7 @@ class DateTimeTestPage {
 DateTimeTestPage.decorators = [
     { type: Component, args: [{
                 selector: 'app-data-time-test',
-                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date/Time field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <!-- debugging memory leak -->\n      <ion-row><ion-col><ion-text><h4>Debug memory leak</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\">Start timer</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n        </ion-col>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput type=\"text\" hidden>\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [value]=\"memoryMobile\">\n              Mobile ?\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n        <ion-col>\n          <mat-date-time-field formControlName=\"empty\"\n                               *ngIf=\"!memoryHide\"\n                               placeholder=\"Date/Time\"\n                               [required]=\"true\"\n                               [mobile]=\"memoryMobile\"\n                               [clearable]=\"true\">\n            <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n          </mat-date-time-field>\n        </ion-col>\n      </ion-row>\n\n      <!-- Mobile mode -->\n      <ion-row><ion-col><ion-text><h4>Mobile mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <!-- debug console -->\n      <ion-row>\n        <!-- buttons -->\n        <ion-col size=\"2\">\n          <!-- submit form -->\n          <ion-button (click)=\"doSubmit($event)\"\n                      fill=\"outline\">\n            <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n\n          <!-- clear log  -->\n          <ion-button (click)=\"clearLogPanel()\"\n                      fill=\"outline\">\n            <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </ion-col>\n        <ion-col size=\"10\" *ngIf=\"showLogPanel\">\n          <ion-text color=\"primary\">Log:<br/></ion-text>\n          <div class=\"ion-padding-start\">\n            <ion-text color=\"medium\">\n              <small [innerHTML]=\"logContent\"></small>\n            </ion-text>\n          </div>\n        </ion-col>\n      </ion-row>\n\n      <!-- Desktop mode -->\n      <ion-row><ion-col><ion-text><h4>Desktop mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n</ion-content>\n"
+                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date/Time field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <!-- debugging memory leak -->\n      <ion-row><ion-col><ion-text><h4>Debug memory leak</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\">Start timer</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n        </ion-col>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput type=\"text\" hidden>\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [value]=\"memoryMobile\">\n              Mobile ?\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n        <ion-col>\n          <mat-date-time-field formControlName=\"empty\"\n                               *ngIf=\"!memoryHide\"\n                               placeholder=\"Date/Time\"\n                               [required]=\"true\"\n                               [mobile]=\"memoryMobile\"\n                               [clearable]=\"true\">\n            <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n          </mat-date-time-field>\n        </ion-col>\n      </ion-row>\n\n      <!-- Mobile mode -->\n      <ion-row><ion-col><ion-text><h4>Mobile mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <!-- debug console -->\n      <ion-row>\n        <!-- buttons -->\n        <ion-col size=\"2\">\n          <!-- submit form -->\n          <ion-button (click)=\"doSubmit($event)\"\n                      fill=\"outline\">\n            <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n\n          <!-- clear log  -->\n          <ion-button (click)=\"clearLogPanel()\"\n                      fill=\"outline\">\n            <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </ion-col>\n        <ion-col size=\"10\" *ngIf=\"showLogPanel\">\n          <ion-text color=\"primary\">Log:<br/></ion-text>\n          <div class=\"ion-padding-start\">\n            <ion-text color=\"medium\">\n              <small [innerHTML]=\"logContent\"></small>\n            </ion-text>\n          </div>\n        </ion-col>\n      </ion-row>\n\n      <!-- Desktop mode -->\n      <ion-row><ion-col><ion-text><h4>Desktop mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Readonly  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly toggle\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.readonly.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-date-time-field #readonlyField formControlName=\"readonly\"\n                                   placeholder=\"Date/Time\"\n                                   [readonly]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n</ion-content>\n"
             },] }
 ];
 DateTimeTestPage.ctorParameters = () => [
@@ -18487,6 +18496,7 @@ class AppInstallUpgradeCard {
         this._subscription = new Subscription();
         this._showUpdateOfflineFeature = false;
         this.loading = true;
+        this.canDownload = false;
         this.downloading = false;
         this.waitingNetwork = false;
         this.showUpgradeWarning = true;
@@ -18504,26 +18514,23 @@ class AppInstallUpgradeCard {
         return this._showUpdateOfflineFeature;
     }
     ngOnInit() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.platform.ready();
-            this.offline = this.network.offline;
-            // Listen pod config
-            this._subscription.add(this.configService.config
-                .pipe(debounceTime(1000), filter(() => this.network.online))
-                .subscribe(config => this.checkNeedInstallOrUpdate(config)));
-            // Listen network changes
-            this._subscription.add(this.network.onNetworkStatusChanges
-                .pipe(
-            //debounceTime(450),
-            //tap(() => this.waitingNetwork = false),
-            map(connectionType => connectionType === 'none'), distinctUntilChanged())
-                .subscribe(offline => {
-                if (this.offline !== offline) {
-                    this.offline = offline;
-                    this.markForCheck();
-                }
-            }));
-        });
+        this.offline = this.network.offline;
+        // Listen pod config
+        this._subscription.add(from(this.network.ready())
+            .pipe(debounceTime(1000), switchMap(() => this.configService.config), filter(isNotNil))
+            .subscribe(config => this.checkNeedInstallOrUpdate(config)));
+        // Listen network changes
+        this._subscription.add(this.network.onNetworkStatusChanges
+            .pipe(
+        //debounceTime(450),
+        //tap(() => this.waitingNetwork = false),
+        map(connectionType => connectionType === 'none'), distinctUntilChanged())
+            .subscribe(offline => {
+            if (this.offline !== offline) {
+                this.offline = offline;
+                this.markForCheck();
+            }
+        }));
     }
     ngOnDestroy() {
         this._subscription.unsubscribe();
@@ -18579,25 +18586,32 @@ class AppInstallUpgradeCard {
     /* -- private method  -- */
     checkNeedInstallOrUpdate(config) {
         return __awaiter(this, void 0, void 0, function* () {
-            console.info('[install] Check if need to install or upgrade...');
+            if (!config)
+                return; // Skip
+            console.info('[install-upgrade-card] Check if need to install or upgrade...');
+            this.canDownload = this.platform.canDownload;
             try {
                 const links = this.getLinks(config);
                 // Check for upgrade
                 this.upgradeLinks = this.getCompatibleUpgradeLinks(links, config);
-                // Check for install links (if no upgrade need)
-                this.installLinks = !this.upgradeLinks && this.getCompatibleInstallLinks(links);
-                yield sleep(1000); // Add a delay, for animation
+                if (isNotEmptyArray(this.upgradeLinks)) {
+                    console.info(`[install-upgrade-card] Find upgrade links: ${this.upgradeLinks.map(l => l.url).join(',')}`);
+                    this.installLinks = null;
+                    this.listenDownloadJobs();
+                }
+                else {
+                    // Check for install links
+                    this.installLinks = this.getCompatibleInstallLinks(links);
+                    if (isNotEmptyArray(this.installLinks)) {
+                        console.info(`[install-upgrade-card] Find install links ${this.installLinks.map(l => l.url).join(',')}`);
+                        yield sleep(1000); // Add a delay, for animation
+                    }
+                }
             }
             finally {
                 this.loading = false;
                 this.markForCheck();
             }
-            // Listening downloading promise, if exists
-            (this.upgradeLinks || []).forEach(link => {
-                const job = this.platform.getDownloadingJob(link.url);
-                if (job)
-                    this.listenDownloadJob(link.url, job);
-            });
         });
     }
     getCompatibleInstallLinks(installLinks) {
@@ -18690,12 +18704,12 @@ class AppInstallUpgradeCard {
         }
         return filename;
     }
-    markForCheck() {
-        this.cd.markForCheck();
-    }
-    showToast(opts) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield Toasts.show(this.toastController, this.translate, opts);
+    listenDownloadJobs() {
+        // Listening downloading promise, if exists
+        (this.upgradeLinks || []).forEach(link => {
+            const job = this.platform.getDownloadingJob(link.url);
+            if (job)
+                this.listenDownloadJob(link.url, job);
         });
     }
     listenDownloadJob(url, job) {
@@ -18705,7 +18719,7 @@ class AppInstallUpgradeCard {
             try {
                 // Mark as downloading
                 if (!this.downloading) {
-                    console.info(`[install-upgrade-card] Platform is downloading \'${url}\' ...`);
+                    console.info(`[install-upgrade-card] Platform is already downloading \'${url}\' ...`);
                     this.downloading = true;
                     this.markForCheck();
                 }
@@ -18717,7 +18731,7 @@ class AppInstallUpgradeCard {
             }
             // Failed: display a toast
             catch (err) {
-                console.error('[install-upgrade] Download failed: ' + (err && err.message || err));
+                console.error('[install-upgrade-card] Download failed: ' + (err && err.message || err));
                 return this.showDownloadFailedToast(err);
             }
             finally {
@@ -18758,11 +18772,21 @@ class AppInstallUpgradeCard {
             yield alert.onDidDismiss();
         });
     }
+    markForCheck() {
+        this.cd.markForCheck();
+    }
+    showToast(opts) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this._subscription)
+                return; // Skip if component has been destroyed
+            yield Toasts.show(this.toastController, this.translate, opts);
+        });
+    }
 }
 AppInstallUpgradeCard.decorators = [
     { type: Component, args: [{
                 selector: 'app-install-upgrade-card',
-                template: "\n\n<!-- Offline mode card-->\n<ion-card *ngIf=\"showOfflineWarning && (!loading && offline || waitingNetwork)\"\n          color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\" *ngIf=\"!waitingNetwork; else waitingNetworkText\">\n            <h4>\n            <b *ngIf=\"isLogin; else notLogin\"  [innerHTML]=\"'NETWORK.INFO.OFFLINE_OR_UNAUTHORIZED'| translate\"></b>\n            <ng-template #notLogin>\n              <b [innerHTML]=\"'NETWORK.INFO.OFFLINE'| translate\"></b>\n            </ng-template>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.OFFLINE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n          <ng-template #waitingNetworkText>\n            <ion-text class=\"ion-text-wrap\" [innerHTML]=\"'NETWORK.INFO.RETRY_TO_CONNECT'| translate\"></ion-text>\n          </ng-template>\n        </ion-col>\n        <ion-col size=\"auto\">\n\n          <!-- Retry button -->\n          <ion-button *ngIf=\"!waitingNetwork; else waitingSpinner\" color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"tryOnline()\">\n            <span translate>NETWORK.BTN_CHECK_ALIVE</span>\n          </ion-button>\n\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Upgrade links -->\n<ion-card *ngIf=\"showUpgradeWarning && !loading && !offline && upgradeLinks\"\n          color=\"accent\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of upgradeLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3>\n              <span *ngIf=\"link.version\" [innerHTML]=\"'INFO.UPDATE_APP_TO_VERSION'| translate: link\"></span>\n              <span *ngIf=\"!link.version\" [innerHTML]=\"'INFO.UPDATE_APP'| translate: link\"></span>\n            </h3>\n            <h4>\n              <small *ngIf=\"last\" [innerHTML]=\"'INFO.UPDATE_APP_HELP'|translate\"></small>\n            </h4>\n          </ion-text>\n        </ion-col>\n\n        <ion-col size=\"auto\">\n          <ng-container *ngTemplateOutlet=\"downloadButton; context: { $implicit: link  }\"></ng-container>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Install links -->\n<ion-card *ngIf=\"showInstallButton && !loading && !offline && installLinks\"\n          color=\"secondary\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of installLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3 [innerHTML]=\"'INFO.DOWNLOAD_APP_TITLE'| translate: {name: link.name, platform: getPlatformName(link.platform) }\"></h3>\n            <h4><small *ngIf=\"last\" [innerHTML]=\"'INFO.DOWNLOAD_APP_HELP'|translate\"></small></h4>\n          </ion-text>\n        </ion-col>\n        <ion-col size=\"auto\">\n          <ng-container *ngTemplateOutlet=\"downloadButton; context: { $implicit: link  }\"></ng-container>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Update offline feature card-->\n<ion-card *ngIf=\"showUpdateOfflineFeature && !loading && !offline\"\n          color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h4>\n              <b [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE'| translate\"></b>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n        </ion-col>\n        <ion-col size=\"auto\">\n\n          <!-- Retry button -->\n          <ion-button color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"onUpdateOfflineModeClick.emit($event)\">\n            <span translate>NETWORK.BTN_UPDATE</span>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Display a download button, depending on the link URL, and the device platform -->\n<ng-template #downloadButton let-link>\n\n  <ng-container *ngIf=\"link.downloadFilename; else redirectButton\">\n\n    <ng-container *ngIf=\"platform.canDownload; else webDownloadButton\">\n      <!-- Download using platform -->\n      <ion-button (click)=\"download($event, asLink(link))\"\n                  [disabled]=\"link.downloading\"\n                  color=\"tertiary\" class=\"ion-float-end\">\n        <ion-icon slot=\"start\" *ngIf=\"!link.downloading\" name=\"download\"></ion-icon>\n        <ion-spinner slot=\"start\" class=\"ion-no-padding\" *ngIf=\"link.downloading\"></ion-spinner>\n        <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n      </ion-button>\n    </ng-container>\n\n    <!-- Web download button -->\n    <ng-template #webDownloadButton>\n      <ion-button [download]=\"link.downloadFilename\"\n                  [href]=\"link.url\"\n                  color=\"tertiary\" class=\"ion-float-end\" >\n        <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n      </ion-button>\n    </ng-template>\n  </ng-container>\n\n  <!-- Web redirect button -->\n  <ng-template #redirectButton>\n    <ion-button [href]=\"link.url\" rel=\"external\" color=\"tertiary\" class=\"ion-float-end\" target=\"_blank\">\n      <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n    </ion-button>\n  </ng-template>\n</ng-template>\n\n\n<!-- Waiting spinner -->\n<ng-template #waitingSpinner>\n  <ion-spinner color=\"light\"></ion-spinner>\n</ng-template>\n",
+                template: "\n\n<!-- Offline mode card-->\n<ion-card *ngIf=\"showOfflineWarning && (!loading && offline || waitingNetwork)\"\n          color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\" *ngIf=\"!waitingNetwork; else waitingNetworkText\">\n            <h4>\n            <b *ngIf=\"isLogin; else notLogin\"  [innerHTML]=\"'NETWORK.INFO.OFFLINE_OR_UNAUTHORIZED'| translate\"></b>\n            <ng-template #notLogin>\n              <b [innerHTML]=\"'NETWORK.INFO.OFFLINE'| translate\"></b>\n            </ng-template>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.OFFLINE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n          <ng-template #waitingNetworkText>\n            <ion-text class=\"ion-text-wrap\" [innerHTML]=\"'NETWORK.INFO.RETRY_TO_CONNECT'| translate\"></ion-text>\n          </ng-template>\n        </ion-col>\n        <ion-col size=\"auto\">\n\n          <!-- Retry button -->\n          <ion-button *ngIf=\"!waitingNetwork; else waitingSpinner\" color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"tryOnline()\">\n            <span translate>NETWORK.BTN_CHECK_ALIVE</span>\n          </ion-button>\n\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Upgrade links -->\n<ion-card *ngIf=\"showUpgradeWarning && !loading && !offline && upgradeLinks\"\n          color=\"accent\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of upgradeLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3>\n              <span *ngIf=\"link.version\" [innerHTML]=\"'INFO.UPDATE_APP_TO_VERSION'| translate: link\"></span>\n              <span *ngIf=\"!link.version\" [innerHTML]=\"'INFO.UPDATE_APP'| translate: link\"></span>\n            </h3>\n            <h4>\n              <small *ngIf=\"last\" [innerHTML]=\"'INFO.UPDATE_APP_HELP'|translate\"></small>\n            </h4>\n          </ion-text>\n        </ion-col>\n\n        <ion-col size=\"auto\">\n          <ng-container *ngTemplateOutlet=\"downloadButton; context: { $implicit: link  }\"></ng-container>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Install links -->\n<ion-card *ngIf=\"showInstallButton && !loading && !offline && installLinks\"\n          color=\"secondary\"\n          class=\"ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row *ngFor=\"let link of installLinks; last as last\">\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h3 [innerHTML]=\"'INFO.DOWNLOAD_APP_TITLE'| translate: {name: link.name, platform: getPlatformName(link.platform) }\"></h3>\n            <h4><small *ngIf=\"last\" [innerHTML]=\"'INFO.DOWNLOAD_APP_HELP'|translate\"></small></h4>\n          </ion-text>\n        </ion-col>\n        <ion-col size=\"auto\">\n          <ng-container *ngTemplateOutlet=\"downloadButton; context: { $implicit: link  }\"></ng-container>\n        </ion-col>\n      </ion-row>\n\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Update offline feature card-->\n<ion-card *ngIf=\"showUpdateOfflineFeature && !loading && !offline\"\n          color=\"accent\"\n          class=\"main ion-no-margin\"\n          @slideUpDownAnimation>\n  <ion-card-content class=\"ion-no-padding\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text class=\"ion-text-wrap\">\n            <h4>\n              <b [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE'| translate\"></b>\n            </h4>\n            <h3>\n              <small [innerHTML]=\"'NETWORK.INFO.UPDATE_OFFLINE_MODE_HELP'|translate\"></small>\n            </h3>\n          </ion-text>\n        </ion-col>\n        <ion-col size=\"auto\">\n\n          <!-- Retry button -->\n          <ion-button color=\"tertiary\" class=\"ion-float-end\"\n                      (click)=\"onUpdateOfflineModeClick.emit($event)\">\n            <span translate>NETWORK.BTN_UPDATE</span>\n          </ion-button>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n\n  </ion-card-content>\n</ion-card>\n\n<!-- Display a download button, depending on the link URL, and the device platform -->\n<ng-template #downloadButton let-link>\n\n  <ng-container *ngIf=\"link.filename; else redirectButton\">\n\n    <ng-container *ngIf=\"canDownload; else webDownloadButton\">\n      <!-- Download using platform -->\n      <ion-button (click)=\"download($event, asLink(link))\"\n                  [disabled]=\"link.downloading\"\n                  color=\"tertiary\" class=\"ion-float-end\">\n        <ion-icon slot=\"start\" *ngIf=\"!link.downloading\" name=\"download\"></ion-icon>\n        <ion-spinner slot=\"start\" class=\"ion-no-padding\" *ngIf=\"link.downloading\"></ion-spinner>\n        <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n      </ion-button>\n    </ng-container>\n\n    <!-- Web download button -->\n    <ng-template #webDownloadButton>\n      <ion-button [download]=\"link.downloadFilename\"\n                  [href]=\"link.url\"\n                  color=\"tertiary\" class=\"ion-float-end\" >\n        <ion-label translate>COMMON.BTN_DOWNLOAD</ion-label>\n      </ion-button>\n    </ng-template>\n  </ng-container>\n\n  <!-- Web redirect button -->\n  <ng-template #redirectButton>\n    <ion-button [href]=\"link.url\" rel=\"external\" color=\"tertiary\" class=\"ion-float-end\" target=\"_blank\">\n      <ion-label translate>COMMON.BTN_SHOW_MORE</ion-label>\n    </ion-button>\n  </ng-template>\n</ng-template>\n\n\n<!-- Waiting spinner -->\n<ng-template #waitingSpinner>\n  <ion-spinner color=\"light\"></ion-spinner>\n</ng-template>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 animations: [slideUpDownAnimation],
                 styles: ["ion-text small{font-size:85%}"]
@@ -19207,6 +19231,80 @@ ActionsColumnComponent.propDecorators = {
     forward: [{ type: Output }]
 };
 
+class IFormI18nService {
+}
+class FormErrorAdapter {
+    constructor(translate) {
+        this.translate = translate;
+    }
+    formatError(form, opts) {
+        if (!form || !form.invalid)
+            return '';
+        const separator = opts && opts.separator || ', ';
+        const recursive = !opts || opts.recursive !== false;
+        const errors = AppFormUtils.getFormErrors(form, { recursive });
+        const i18nErrors = errors && Object.keys(errors).reduce((res, fieldName) => {
+            const control = form.get(fieldName);
+            // Should be a control map of errors
+            if (control) {
+                // Try to convert from a map, for one column control
+                const i18nFieldNameKey = this.getI18nKey(fieldName, opts);
+                const i18nFieldName = this.translate.instant(i18nFieldNameKey);
+                // OK, we have a field name: use it
+                const columnErrors = Object.keys(control.errors).map(errorKey => this.getI18nError(errorKey, control.errors[errorKey]));
+                if (isEmptyArray(columnErrors))
+                    return res;
+                // Add separator
+                if (res.length)
+                    res += separator;
+                return res + i18nFieldName + ": " + columnErrors.join(separator);
+            }
+            // Or try as global form error
+            const formError = this.getI18nError(fieldName, errors[fieldName]);
+            if (isNil(formError))
+                return res;
+            return res + (res.length ? separator : '') + formError;
+        }, "");
+        return i18nErrors;
+    }
+    getI18nKey(fieldName, opts) {
+        if (opts === null || opts === void 0 ? void 0 : opts.i18nService) {
+            return opts === null || opts === void 0 ? void 0 : opts.i18nService.getI18nFieldName(fieldName);
+        }
+        return (opts && opts.i18nPrefix || '') + changeCaseToUnderscore(fieldName).toUpperCase();
+    }
+    getI18nError(errorKey, errorContent, opts) {
+        if ((opts === null || opts === void 0 ? void 0 : opts.i18nService) && (opts === null || opts === void 0 ? void 0 : opts.i18nService.getI18nError)) {
+            return opts === null || opts === void 0 ? void 0 : opts.i18nService.getI18nError(errorKey, errorContent);
+        }
+        return SharedValidators.translateError((a, b) => this.translate.instant(a, b), errorKey, errorContent);
+    }
+}
+FormErrorAdapter.ɵprov = i0.ɵɵdefineInjectable({ factory: function FormErrorAdapter_Factory() { return new FormErrorAdapter(i0.ɵɵinject(i1$1.TranslateService)); }, token: FormErrorAdapter, providedIn: "root" });
+FormErrorAdapter.decorators = [
+    { type: Injectable, args: [{ providedIn: 'root' },] }
+];
+FormErrorAdapter.ctorParameters = () => [
+    { type: TranslateService }
+];
+
+class FormErrorTranslatePipe {
+    constructor(adapter) {
+        this.adapter = adapter;
+    }
+    transform(form, opts) {
+        return this.adapter.formatError(form, opts);
+    }
+}
+FormErrorTranslatePipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'translateFormError',
+            },] }
+];
+FormErrorTranslatePipe.ctorParameters = () => [
+    { type: FormErrorAdapter }
+];
+
 class CoreModule {
     static forRoot() {
         console.info('[core] Creating module (root)');
@@ -19236,6 +19334,7 @@ CoreModule.decorators = [
                     IsLoginAccountPipe,
                     AccountToStringPipe,
                     DepartmentToStringPipe,
+                    FormErrorTranslatePipe,
                     // Home and menu
                     HomePage,
                     AboutModal,
@@ -19269,6 +19368,7 @@ CoreModule.decorators = [
                     PersonToStringPipe,
                     IsLoginAccountPipe,
                     AccountToStringPipe,
+                    FormErrorTranslatePipe,
                     // Components
                     HomePage,
                     AuthForm,
@@ -20179,13 +20279,18 @@ class AppTable {
         this.onError = new EventEmitter();
         this._paginator = null;
         this.mobile = this.platform.is('mobile');
-        this.translate = injector && injector.get(TranslateService);
-        this.alertCtrl = injector && injector.get(AlertController);
-        this.toastController = injector && injector.get(ToastController);
+        this.translate = injector === null || injector === void 0 ? void 0 : injector.get(TranslateService);
+        this.formErrorAdapter = injector === null || injector === void 0 ? void 0 : injector.get(FormErrorAdapter);
+        this.alertCtrl = injector === null || injector === void 0 ? void 0 : injector.get(AlertController);
+        this.toastController = injector === null || injector === void 0 ? void 0 : injector.get(ToastController);
         this._autocompleteConfigHolder = new MatAutocompleteConfigHolder({
             getUserAttributes: (a, b) => settings.getFieldDisplayAttributes(a, b)
         });
         this.autocompleteFields = this._autocompleteConfigHolder.fields;
+        this.i18nService = (injector === null || injector === void 0 ? void 0 : injector.get(IFormI18nService)) || {
+            getI18nFieldName: (f) => this.getI18nFieldName(f),
+            getI18nError: (e, c) => this.getI18nError(e, c)
+        };
     }
     get error() {
         return this.errorSubject.value;
@@ -21391,38 +21496,13 @@ class AppTable {
     }
     getRowError(row, opts) {
         row = row || this.editedRow;
-        if (!row || !this.translate)
+        if (!row || !this.formErrorAdapter)
             return undefined;
-        const separator = opts && opts.separator || ', ';
-        const recursive = !opts || opts.recursive !== false;
-        const errors = AppFormUtils.getFormErrors(row.validator, { recursive });
-        const i18nErrors = errors && Object.keys(errors).reduce((res, key) => {
-            const control = row.validator.get(key);
-            // Should be a control map of errors
-            if (control) {
-                // Try to convert from a map, for one column control
-                const i18nFieldNameKey = this.getI18nFieldName(key);
-                const i18nFieldName = this.translate.instant(i18nFieldNameKey);
-                // OK, we have a field name: use it
-                const columnErrors = Object.keys(control.errors).map(errorKey => this.getI18nError(errorKey, control.errors[errorKey]));
-                if (isEmptyArray(columnErrors))
-                    return res;
-                // Add separator
-                if (res.length)
-                    res += separator;
-                return res + i18nFieldName + ": " + columnErrors.join(separator);
-            }
-            // Or try as global form error
-            const formError = this.getI18nError(key, errors[key]);
-            if (isNil(formError))
-                return res;
-            return res + (res.length ? separator : '') + formError;
-        }, "");
-        return i18nErrors;
+        return this.formErrorAdapter.formatError(row.validator, Object.assign({ i18nService: this.i18nService }, opts));
     }
     getI18nFieldName(fieldName) {
-        // Use columns has default name
         // Can be override by subclasses, to resolve all field name
+        // Use columns has default name
         return this.getI18nColumnName(fieldName);
     }
     getI18nError(errorKey, errorContent) {
@@ -23823,5 +23903,5 @@ const ErrorCodes = {
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_MENU_ITEMS, APP_TESTING_PAGES, AboutModal, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, Alerts, AnimationState, AppEditorOptions, AppEntityEditor, AppForm, AppFormField, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppInMemoryTable, AppInstallUpgradeCard, AppListForm, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppTabEditor, AppTabEditorOptions, AppTable, AppTableDataSourceOptions, AppTableUtils, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayLengthPipe, ArrayPluckPipe, AudioProvider, AuthForm, AuthGuardService, AuthModal, AutocompleteTestPage, AutofocusDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CryptoService, DATE_ISO_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFromNowPipe, DateTimeTestPage, DateUtils, Department, DepartmentToStringPipe, DurationPipe, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesService, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileService, FileSizePipe, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormFieldValuesHolder, Fragments, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNotNilOrBlankPipe, IsNotOnFieldModePipe, IsOnFieldModePipe, JobUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatBooleanField, MatChipsField, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialChipsModule, MaterialTestingModule, MaterialTestingPage, MathAbsPipe, MenuComponent, MenuItems, MenuService, ModalToolbarComponent, NetworkService, NgInitDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, OddPipe, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialRef, ReferentialUtils, RegisterConfirmPage, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, SettingsPage, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedValidators, SocialModule, Software, StartableService, StatusById, StatusIds, StatusList, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, ToStringPipe, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UserEvent, UserEventFilter, UserEventService, UserEventTypes, UserEventsTable, UserSettings, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equalsOrNil, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, firstArrayValue, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, isControlHasInput, isEmptyArray, isInputElement, isInstanceOf, isInt, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, updateValueAndValidity, waitFor, waitIdle, waitWhilePending, ɵ0$5 as ɵ0, CustomReuseStrategy as ɵa, MatNumpadDomService as ɵb, isFocusableElement as ɵc, RegisterForm as ɵd, AccountValidatorService as ɵe, RegisterModal as ɵf, UserSettingsValidatorService as ɵg, LocalSettingsValidatorService as ɵh };
+export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_MENU_ITEMS, APP_TESTING_PAGES, AboutModal, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, Alerts, AnimationState, AppEditorOptions, AppEntityEditor, AppForm, AppFormField, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppInMemoryTable, AppInstallUpgradeCard, AppListForm, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppTabEditor, AppTabEditorOptions, AppTable, AppTableDataSourceOptions, AppTableUtils, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayLengthPipe, ArrayPluckPipe, AudioProvider, AuthForm, AuthGuardService, AuthModal, AutocompleteTestPage, AutofocusDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CryptoService, DATE_ISO_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFromNowPipe, DateTimeTestPage, DateUtils, Department, DepartmentToStringPipe, DurationPipe, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesService, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileService, FileSizePipe, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorAdapter, FormErrorTranslatePipe, FormFieldValuesHolder, Fragments, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, IFormI18nService, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNotNilOrBlankPipe, IsNotOnFieldModePipe, IsOnFieldModePipe, JobUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatBooleanField, MatChipsField, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialChipsModule, MaterialTestingModule, MaterialTestingPage, MathAbsPipe, MenuComponent, MenuItems, MenuService, ModalToolbarComponent, NetworkService, NgInitDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, OddPipe, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialRef, ReferentialUtils, RegisterConfirmPage, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, SettingsPage, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBooleanModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedValidators, SocialModule, Software, StartableService, StatusById, StatusIds, StatusList, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, ToStringPipe, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UserEvent, UserEventFilter, UserEventService, UserEventTypes, UserEventsTable, UserSettings, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equalsOrNil, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, firstArrayValue, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, isControlHasInput, isEmptyArray, isInputElement, isInstanceOf, isInt, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, updateValueAndValidity, waitFor, waitIdle, waitWhilePending, ɵ0$5 as ɵ0, CustomReuseStrategy as ɵa, MatNumpadDomService as ɵb, isFocusableElement as ɵc, RegisterForm as ɵd, AccountValidatorService as ɵe, RegisterModal as ɵf, UserSettingsValidatorService as ɵg, LocalSettingsValidatorService as ɵh };
 //# sourceMappingURL=sumaris-net.ngx-components.js.map