@sumaris-net/ngx-components 2.7.3-rc35 → 2.7.3-rc37

package/fesm2022/sumaris-net.ngx-components.mjs

@@ -7270,7 +7270,7 @@ class MatLatLongField {
                 multi: true,
                 useExisting: forwardRef(() => MatLatLongField),
             },
-        ], queries: [{ propertyName: "matError", first: true, predicate: MatError, descendants: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field\n  *ngIf=\"readonly; else writable\"\n  [floatLabel]=\"floatLabel | asFloatLabelType\"\n  [appearance]=\"appearance\"\n  class=\"mat-form-field-disabled\"\n>\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n  <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n  <ion-text>{{ _format(formControl.value) }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n  <ion-grid class=\"ion-no-padding {{appearance}}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <ion-col class=\"text ion-no-padding\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (signFormControl.invalid || formControl.invalid)\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n          <input\n            matInput\n            #inputElement\n            [maskito]=\"inputPlaceholder | translate | maskitoPlaceholder: mask : !showSignControl && defaultSign\"\n            type=\"text\"\n            autocomplete=\"off\"\n            [placeholder]=\"inputPlaceholder | translate\"\n            (blur)=\"_onBlur($event)\"\n            [formControl]=\"textFormControl\"\n            [required]=\"required\"\n            [tabindex]=\"tabindex\"\n            [appAutofocus]=\"autofocus\"\n          />\n\n          <div matSuffix *ngIf=\"!showSignControl\">\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\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        <!-- sign on latitude -->\n        <mat-form-field\n          *ngSwitchCase=\"'latitude'\"\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && signFormControl.invalid\"\n        >\n          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>\n            COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER\n          </mat-label>\n\n          <mat-select [formControl]=\"signFormControl\" [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\">\n            <mat-option [value]=\"1\">{{ 'COMMON.LAT_LONG.LAT_SIGN_N' | translate }}</mat-option>\n            <mat-option [value]=\"-1\">{{ 'COMMON.LAT_LONG.LAT_SIGN_S' | translate }}</mat-option>\n          </mat-select>\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n        </mat-form-field>\n\n        <!-- sign on longitude -->\n        <mat-form-field\n          *ngSwitchCase=\"'longitude'\"\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && signFormControl.invalid\"\n        >\n          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>\n            COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER\n          </mat-label>\n\n          <mat-select [formControl]=\"signFormControl\" [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\">\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  <!-- Do the same as MatFromField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\">\n\n    <ng-container *ngIf=\"formControl.touched && formControl.invalid; else hints\">\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        <mat-error *ngIf=\"formControl.errors | mapKeys | arrayFirst; let errorKey; else parentError\" [ngSwitch]=\"errorKey\">\n          <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n          <span *ngSwitchCase=\"'latitude'\" translate>ERROR.FIELD_NOT_VALID_LATITUDE</span>\n          <span *ngSwitchCase=\"'longitude'\" translate>ERROR.FIELD_NOT_VALID_LONGITUDE</span>\n          <span *ngSwitchCase=\"'min'\">\n            {{ 'ERROR.FIELD_MIN_COMPACT' | translate: { min: _format(formControl.errors.min.min) } }}\n          </span>\n          <span *ngSwitchCase=\"'max'\">\n            {{ 'ERROR.FIELD_MAX_COMPACT' | translate: { max: _format(formControl.errors.max.max) } }}\n          </span>\n          <span *ngSwitchCase=\"'msg'\">\n            {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n          </span>\n        </mat-error>\n        <ng-template #parentError>\n          <ng-content select=\"mat-error\"></ng-content>\n        </ng-template>\n      </div>\n    </ng-container>\n\n    <ng-template #hints>\n      <!-- hints -->\n      <div class=\"mat-mdc-form-field-hint-wrapper\">\n        <ng-content select=\"mat-hint:not([align='end'])\"></ng-content>\n        <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n        <ng-content select=\"mat-hint[align='end']\"></ng-content>\n      </div>\n    </ng-template>\n  </div>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative;--ion-grid-column-padding: 0}mat-form-field{width:100%}mat-form-field .datetime-md{padding:0!important}.sign mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.text{min-width:100px}ion-grid.fill ion-col.sign{min-width:65px;max-width:85px}ion-grid.outline ion-col.text{min-width:100px}ion-grid.outline ion-col.sign{min-width:70px;max-width:85px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i1$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1$2.IonRow, selector: "ion-row" }, { kind: "component", type: i1$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: MaskitoPlaceholderPipe, name: "maskitoPlaceholder" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "matError", first: true, predicate: MatError, descendants: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field\n  *ngIf=\"readonly; else writable\"\n  [floatLabel]=\"floatLabel | asFloatLabelType\"\n  [appearance]=\"appearance\"\n  class=\"mat-form-field-disabled\"\n>\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n  <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n  <ion-text>{{ _format(formControl.value) }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n  <ion-grid class=\"ion-no-padding {{appearance}}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <ion-col class=\"text ion-no-padding\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (signFormControl.invalid || formControl.invalid)\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n          <input\n            matInput\n            #inputElement\n            [maskito]=\"inputPlaceholder | translate | maskitoPlaceholder: mask : !showSignControl && defaultSign\"\n            type=\"text\"\n            autocomplete=\"off\"\n            [placeholder]=\"inputPlaceholder | translate\"\n            (blur)=\"_onBlur($event)\"\n            [formControl]=\"textFormControl\"\n            [required]=\"required\"\n            [tabindex]=\"tabindex\"\n            [appAutofocus]=\"autofocus\"\n          />\n\n          <div matSuffix *ngIf=\"!showSignControl\">\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\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        <!-- sign on latitude -->\n        <mat-form-field\n          *ngSwitchCase=\"'latitude'\"\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && signFormControl.invalid\"\n        >\n          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>\n            COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER\n          </mat-label>\n\n          <mat-select [formControl]=\"signFormControl\" [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\">\n            <mat-option [value]=\"1\">{{ 'COMMON.LAT_LONG.LAT_SIGN_N' | translate }}</mat-option>\n            <mat-option [value]=\"-1\">{{ 'COMMON.LAT_LONG.LAT_SIGN_S' | translate }}</mat-option>\n          </mat-select>\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n        </mat-form-field>\n\n        <!-- sign on longitude -->\n        <mat-form-field\n          *ngSwitchCase=\"'longitude'\"\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && signFormControl.invalid\"\n        >\n          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>\n            COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER\n          </mat-label>\n\n          <mat-select [formControl]=\"signFormControl\" [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\">\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  <!-- Do the same as MatFromField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\">\n\n    <ng-container *ngIf=\"formControl.touched && formControl.invalid; else hints\">\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        <mat-error *ngIf=\"formControl.errors | mapKeys | arrayFirst; let errorKey; else parentError\" [ngSwitch]=\"errorKey\">\n          <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n          <span *ngSwitchCase=\"'latitude'\" translate>ERROR.FIELD_NOT_VALID_LATITUDE</span>\n          <span *ngSwitchCase=\"'longitude'\" translate>ERROR.FIELD_NOT_VALID_LONGITUDE</span>\n          <span *ngSwitchCase=\"'min'\">\n            {{ 'ERROR.FIELD_MIN_COMPACT' | translate: { min: _format(formControl.errors.min.min) } }}\n          </span>\n          <span *ngSwitchCase=\"'max'\">\n            {{ 'ERROR.FIELD_MAX_COMPACT' | translate: { max: _format(formControl.errors.max.max) } }}\n          </span>\n          <span *ngSwitchCase=\"'msg'\">\n            {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n          </span>\n        </mat-error>\n        <ng-template #parentError>\n          <ng-content select=\"mat-error\"></ng-content>\n        </ng-template>\n      </div>\n    </ng-container>\n\n    <ng-template #hints>\n      <!-- hints -->\n      <div class=\"mat-mdc-form-field-hint-wrapper\">\n        <ng-content select=\"mat-hint:not([align='end'])\"></ng-content>\n        <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n        <ng-content select=\"mat-hint[align='end']\"></ng-content>\n      </div>\n    </ng-template>\n  </div>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative;--ion-grid-column-padding: 0}mat-form-field{width:100%}mat-form-field .datetime-md{padding:0!important}.sign mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.text{min-width:100px}ion-grid.fill ion-col.sign{min-width:65px;max-width:85px}ion-grid.outline ion-col.text{min-width:100px}ion-grid.outline ion-col.sign{min-width:70px;max-width:85px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i1$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1$2.IonRow, selector: "ion-row" }, { kind: "component", type: i1$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: MaskitoPlaceholderPipe, name: "maskitoPlaceholder" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatLatLongField, decorators: [{
             type: Component,
@@ -7280,7 +7280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => MatLatLongField),
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field\n  *ngIf=\"readonly; else writable\"\n  [floatLabel]=\"floatLabel | asFloatLabelType\"\n  [appearance]=\"appearance\"\n  class=\"mat-form-field-disabled\"\n>\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n  <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n  <ion-text>{{ _format(formControl.value) }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n  <ion-grid class=\"ion-no-padding {{appearance}}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <ion-col class=\"text ion-no-padding\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (signFormControl.invalid || formControl.invalid)\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n          <input\n            matInput\n            #inputElement\n            [maskito]=\"inputPlaceholder | translate | maskitoPlaceholder: mask : !showSignControl && defaultSign\"\n            type=\"text\"\n            autocomplete=\"off\"\n            [placeholder]=\"inputPlaceholder | translate\"\n            (blur)=\"_onBlur($event)\"\n            [formControl]=\"textFormControl\"\n            [required]=\"required\"\n            [tabindex]=\"tabindex\"\n            [appAutofocus]=\"autofocus\"\n          />\n\n          <div matSuffix *ngIf=\"!showSignControl\">\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\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        <!-- sign on latitude -->\n        <mat-form-field\n          *ngSwitchCase=\"'latitude'\"\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && signFormControl.invalid\"\n        >\n          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>\n            COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER\n          </mat-label>\n\n          <mat-select [formControl]=\"signFormControl\" [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\">\n            <mat-option [value]=\"1\">{{ 'COMMON.LAT_LONG.LAT_SIGN_N' | translate }}</mat-option>\n            <mat-option [value]=\"-1\">{{ 'COMMON.LAT_LONG.LAT_SIGN_S' | translate }}</mat-option>\n          </mat-select>\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n        </mat-form-field>\n\n        <!-- sign on longitude -->\n        <mat-form-field\n          *ngSwitchCase=\"'longitude'\"\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && signFormControl.invalid\"\n        >\n          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>\n            COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER\n          </mat-label>\n\n          <mat-select [formControl]=\"signFormControl\" [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\">\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  <!-- Do the same as MatFromField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\">\n\n    <ng-container *ngIf=\"formControl.touched && formControl.invalid; else hints\">\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        <mat-error *ngIf=\"formControl.errors | mapKeys | arrayFirst; let errorKey; else parentError\" [ngSwitch]=\"errorKey\">\n          <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n          <span *ngSwitchCase=\"'latitude'\" translate>ERROR.FIELD_NOT_VALID_LATITUDE</span>\n          <span *ngSwitchCase=\"'longitude'\" translate>ERROR.FIELD_NOT_VALID_LONGITUDE</span>\n          <span *ngSwitchCase=\"'min'\">\n            {{ 'ERROR.FIELD_MIN_COMPACT' | translate: { min: _format(formControl.errors.min.min) } }}\n          </span>\n          <span *ngSwitchCase=\"'max'\">\n            {{ 'ERROR.FIELD_MAX_COMPACT' | translate: { max: _format(formControl.errors.max.max) } }}\n          </span>\n          <span *ngSwitchCase=\"'msg'\">\n            {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n          </span>\n        </mat-error>\n        <ng-template #parentError>\n          <ng-content select=\"mat-error\"></ng-content>\n        </ng-template>\n      </div>\n    </ng-container>\n\n    <ng-template #hints>\n      <!-- hints -->\n      <div class=\"mat-mdc-form-field-hint-wrapper\">\n        <ng-content select=\"mat-hint:not([align='end'])\"></ng-content>\n        <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n        <ng-content select=\"mat-hint[align='end']\"></ng-content>\n      </div>\n    </ng-template>\n  </div>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative;--ion-grid-column-padding: 0}mat-form-field{width:100%}mat-form-field .datetime-md{padding:0!important}.sign mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.text{min-width:100px}ion-grid.fill ion-col.sign{min-width:65px;max-width:85px}ion-grid.outline ion-col.text{min-width:100px}ion-grid.outline ion-col.sign{min-width:70px;max-width:85px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field\n  *ngIf=\"readonly; else writable\"\n  [floatLabel]=\"floatLabel | asFloatLabelType\"\n  [appearance]=\"appearance\"\n  class=\"mat-form-field-disabled\"\n>\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n  <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n  <ion-text>{{ _format(formControl.value) }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n  <ion-grid class=\"ion-no-padding {{appearance}}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <ion-col class=\"text ion-no-padding\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (signFormControl.invalid || formControl.invalid)\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n          <input\n            matInput\n            #inputElement\n            [maskito]=\"inputPlaceholder | translate | maskitoPlaceholder: mask : !showSignControl && defaultSign\"\n            type=\"text\"\n            autocomplete=\"off\"\n            [placeholder]=\"inputPlaceholder | translate\"\n            (blur)=\"_onBlur($event)\"\n            [formControl]=\"textFormControl\"\n            [required]=\"required\"\n            [tabindex]=\"tabindex\"\n            [appAutofocus]=\"autofocus\"\n          />\n\n          <div matSuffix *ngIf=\"!showSignControl\">\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\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        <!-- sign on latitude -->\n        <mat-form-field\n          *ngSwitchCase=\"'latitude'\"\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && signFormControl.invalid\"\n        >\n          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>\n            COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER\n          </mat-label>\n\n          <mat-select [formControl]=\"signFormControl\" [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\">\n            <mat-option [value]=\"1\">{{ 'COMMON.LAT_LONG.LAT_SIGN_N' | translate }}</mat-option>\n            <mat-option [value]=\"-1\">{{ 'COMMON.LAT_LONG.LAT_SIGN_S' | translate }}</mat-option>\n          </mat-select>\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n        </mat-form-field>\n\n        <!-- sign on longitude -->\n        <mat-form-field\n          *ngSwitchCase=\"'longitude'\"\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && signFormControl.invalid\"\n        >\n          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>\n            COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER\n          </mat-label>\n\n          <mat-select [formControl]=\"signFormControl\" [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\">\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  <!-- Do the same as MatFromField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\">\n\n    <ng-container *ngIf=\"formControl.touched && formControl.invalid; else hints\">\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        <mat-error *ngIf=\"formControl.errors | mapKeys | arrayFirst; let errorKey; else parentError\" [ngSwitch]=\"errorKey\">\n          <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n          <span *ngSwitchCase=\"'latitude'\" translate>ERROR.FIELD_NOT_VALID_LATITUDE</span>\n          <span *ngSwitchCase=\"'longitude'\" translate>ERROR.FIELD_NOT_VALID_LONGITUDE</span>\n          <span *ngSwitchCase=\"'min'\">\n            {{ 'ERROR.FIELD_MIN_COMPACT' | translate: { min: _format(formControl.errors.min.min) } }}\n          </span>\n          <span *ngSwitchCase=\"'max'\">\n            {{ 'ERROR.FIELD_MAX_COMPACT' | translate: { max: _format(formControl.errors.max.max) } }}\n          </span>\n          <span *ngSwitchCase=\"'msg'\">\n            {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n          </span>\n        </mat-error>\n        <ng-template #parentError>\n          <ng-content select=\"mat-error\"></ng-content>\n        </ng-template>\n      </div>\n    </ng-container>\n\n    <ng-template #hints>\n      <!-- hints -->\n      <div class=\"mat-mdc-form-field-hint-wrapper\">\n        <ng-content select=\"mat-hint:not([align='end'])\"></ng-content>\n        <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n        <ng-content select=\"mat-hint[align='end']\"></ng-content>\n      </div>\n    </ng-template>\n  </div>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;min-width:140px;position:relative;--ion-grid-column-padding: 0}mat-form-field{width:100%}mat-form-field .datetime-md{padding:0!important}.sign mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.text{min-width:100px}ion-grid.fill ion-col.sign{min-width:65px;max-width:85px}ion-grid.outline ion-col.text{min-width:100px}ion-grid.outline ion-col.sign{min-width:70px;max-width:85px}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1$3.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -8346,11 +8346,11 @@ class MatDateTime {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatDateTime, deps: [{ token: i1.MomentDateAdapter }, { token: i1$1.TranslateService }, { token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1$3.FormGroupDirective, optional: true }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: MatDateTime, selector: "mat-date-time-field", inputs: { placeholder: "placeholder", floatLabel: "floatLabel", mobile: "mobile", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", appearance: "appearance", subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR$2], queries: [{ propertyName: "matError", first: true, predicate: MatError, descendants: true }], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true }, { propertyName: "matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field\n  *ngIf=\"readonly; else writable\"\n  [floatLabel]=\"floatLabel | asFloatLabelType\"\n  [appearance]=\"appearance\"\n  class=\"mat-form-field-disabled\"\n>\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n  <input matInput hidden type=\"text\" readonly [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 {{appearance}}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (dateControl.invalid || formControl.invalid)\"\n          (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n          (focus)=\"_openDatePickerIfMobile($event)\"\n        >\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n          <!-- Desktop -->\n          <input\n            matInput\n            #matInput\n            autocomplete=\"off\"\n            type=\"text\"\n            class=\"mat-input-element\"\n            [maskito]=\"maskitoDateOptions\"\n            *ngIf=\"!mobile\"\n            [formControl]=\"dateControl\"\n            (blur)=\"_onBlur()\"\n            (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n            (keyup.escape)=\"_preventEvent($event)\"\n            [required]=\"required\"\n            [tabindex]=\"tabindex\"\n            [appAutofocus]=\"autofocus\"\n          />\n          <input\n            type=\"text\"\n            [formControl]=\"formControl\"\n            hidden\n            *ngIf=\"!mobile\"\n            [matDatepicker]=\"datePicker\"\n            [matDatepickerFilter]=\"datePickerFilter\"\n            (dateChange)=\"_onDatePickerChange($event)\"\n            readonly\n          />\n\n          <!-- Mobile -->\n          <input\n            #matInput\n            autocomplete=\"off\"\n            type=\"text\"\n            class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n            *ngIf=\"mobile\"\n            [formControl]=\"dateControl\"\n            [required]=\"required\"\n            [tabindex]=\"tabindex\"\n            readonly\n          />\n          <input\n            matInput\n            type=\"text\"\n            [formControl]=\"formControl\"\n            hidden\n            *ngIf=\"mobile\"\n            [matDatepicker]=\"datePicker\"\n            [matDatepickerFilter]=\"datePickerFilter\"\n            (dateChange)=\"_onDatePickerChange($event)\"\n            readonly\n          />\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"clear($event)\"\n            [hidden]=\"formControl.disabled || !formControl.value\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          <mat-datepicker-actions *ngIf=\"mobile\">\n            <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n              <ion-label>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n              <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n            </ion-button>\n          </mat-datepicker-actions>\n        </mat-datepicker>\n\n        <!-- cancel button -->\n        <ng-template #dateHeader>\n          <ion-button fill=\"clear\" color=\"dark\">\n            <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n          </ion-button>\n        </ng-template>\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n        >\n          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n          <input\n            matInput\n            #matInput\n            type=\"text\"\n            [formControl]=\"timeControl\"\n            *ngIf=\"!mobile\"\n            [maskito]=\"maskitoTimeOptions\"\n            class=\"mat-input-element\"\n            autocomplete=\"off\"\n            min=\"0\"\n            max=\"23\"\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\n          <input\n            #matInput\n            type=\"text\"\n            class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n            *ngIf=\"mobile\"\n            [formControl]=\"timeControl\"\n            (click)=\"_openTimePickerIfMobile($event)\"\n            readonly\n          />\n\n          <!-- Hide the final (hidden) input -->\n          <input\n            matInput\n            [formControl]=\"timeControl\"\n            hidden\n            [required]=\"required\"\n            [ngxTimepicker]=\"timePicker\"\n            [format]=\"24\"\n            readonly\n          />\n\n          <button\n            matSuffix\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            *ngIf=\"!compact && !mobile\"\n            [disabled]=\"formControl.disabled\"\n            (click)=\"openTimePicker($event)\"\n          >\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n          <button\n            matSuffix\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            *ngIf=\"!compact && mobile\"\n            [disabled]=\"formControl.disabled\"\n            (click)=\"_openTimePickerIfMobile($event)\"\n          >\n            <mat-icon>access_time</mat-icon>\n          </button>\n\n          <ngx-material-timepicker\n            #timePicker\n            [@.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          >\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          </ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFromField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    <ng-container *ngIf=\"formControl.touched && formControl.invalid; else hints\">\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n          <mat-error *ngIf=\"formControl.errors | mapKeys | arrayFirst; let errorKey; else parentError\" [ngSwitch]=\"errorKey\">\n            <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n            <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n            <span *ngSwitchCase=\"'dateIsAfter'\">\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n            </span>\n            <span *ngSwitchCase=\"'dateIsBefore'\">\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n            </span>\n            <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n            <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n            <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n            <span *ngSwitchCase=\"'msg'\">\n              {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n            </span>\n          </mat-error>\n        <ng-template #parentError>\n          <ng-content select=\"mat-error\"></ng-content>\n        </ng-template>\n      </div>\n    </ng-container>\n\n    <ng-template #hints>\n      <!-- hints -->\n      <div class=\"mat-mdc-form-field-hint-wrapper\">\n        <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n        <ng-content select=\"mat-hint\"></ng-content>\n      </div>\n    </ng-template>\n  </div>\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", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.day{min-width:150px}ion-grid.fill ion-col.hour{min-width:75px;max-width:110px}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:150px}ion-grid.outline ion-col.day{min-width:150px}ion-grid.outline ion-col.hour{min-width:75px;max-width:110px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i1$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$2.IonRow, selector: "ion-row" }, { kind: "component", type: i1$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i10.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i10.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i12.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i12.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: MatDateTime, selector: "mat-date-time-field", inputs: { placeholder: "placeholder", floatLabel: "floatLabel", mobile: "mobile", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", appearance: "appearance", subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR$2], queries: [{ propertyName: "matError", first: true, predicate: MatError, descendants: true }], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true }, { propertyName: "matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field\n  *ngIf=\"readonly; else writable\"\n  [floatLabel]=\"floatLabel | asFloatLabelType\"\n  [appearance]=\"appearance\"\n  class=\"mat-form-field-disabled\"\n>\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n  <input matInput hidden type=\"text\" readonly [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 {{appearance}}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (dateControl.invalid || formControl.invalid)\"\n          (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n          (focus)=\"_openDatePickerIfMobile($event)\"\n        >\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n          <!-- Desktop -->\n          <input\n            matInput\n            #matInput\n            autocomplete=\"off\"\n            type=\"text\"\n            class=\"mat-input-element\"\n            [maskito]=\"maskitoDateOptions\"\n            *ngIf=\"!mobile\"\n            [formControl]=\"dateControl\"\n            (blur)=\"_onBlur()\"\n            (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n            (keyup.escape)=\"_preventEvent($event)\"\n            [required]=\"required\"\n            [tabindex]=\"tabindex\"\n            [appAutofocus]=\"autofocus\"\n          />\n          <input\n            type=\"text\"\n            [formControl]=\"formControl\"\n            hidden\n            *ngIf=\"!mobile\"\n            [matDatepicker]=\"datePicker\"\n            [matDatepickerFilter]=\"datePickerFilter\"\n            (dateChange)=\"_onDatePickerChange($event)\"\n            readonly\n          />\n\n          <!-- Mobile -->\n          <input\n            #matInput\n            autocomplete=\"off\"\n            type=\"text\"\n            class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n            *ngIf=\"mobile\"\n            [formControl]=\"dateControl\"\n            [required]=\"required\"\n            [tabindex]=\"tabindex\"\n            readonly\n          />\n          <input\n            matInput\n            type=\"text\"\n            [formControl]=\"formControl\"\n            hidden\n            *ngIf=\"mobile\"\n            [matDatepicker]=\"datePicker\"\n            [matDatepickerFilter]=\"datePickerFilter\"\n            (dateChange)=\"_onDatePickerChange($event)\"\n            readonly\n          />\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"clear($event)\"\n            [hidden]=\"formControl.disabled || !formControl.value\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          <mat-datepicker-actions *ngIf=\"mobile\">\n            <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n              <ion-label>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n              <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n            </ion-button>\n          </mat-datepicker-actions>\n        </mat-datepicker>\n\n        <!-- cancel button -->\n        <ng-template #dateHeader>\n          <ion-button fill=\"clear\" color=\"dark\">\n            <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n          </ion-button>\n        </ng-template>\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n        >\n          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n          <input\n            matInput\n            #matInput\n            type=\"text\"\n            [formControl]=\"timeControl\"\n            *ngIf=\"!mobile\"\n            [maskito]=\"maskitoTimeOptions\"\n            class=\"mat-input-element\"\n            autocomplete=\"off\"\n            min=\"0\"\n            max=\"23\"\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\n          <input\n            #matInput\n            type=\"text\"\n            class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n            *ngIf=\"mobile\"\n            [formControl]=\"timeControl\"\n            (click)=\"_openTimePickerIfMobile($event)\"\n            readonly\n          />\n\n          <!-- Hide the final (hidden) input -->\n          <input\n            matInput\n            [formControl]=\"timeControl\"\n            hidden\n            [required]=\"required\"\n            [ngxTimepicker]=\"timePicker\"\n            [format]=\"24\"\n            readonly\n          />\n\n          <button\n            matSuffix\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            *ngIf=\"!compact && !mobile\"\n            [disabled]=\"formControl.disabled\"\n            (click)=\"openTimePicker($event)\"\n          >\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n          <button\n            matSuffix\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            *ngIf=\"!compact && mobile\"\n            [disabled]=\"formControl.disabled\"\n            (click)=\"_openTimePickerIfMobile($event)\"\n          >\n            <mat-icon>access_time</mat-icon>\n          </button>\n\n          <ngx-material-timepicker\n            #timePicker\n            [@.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          >\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          </ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFromField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    <ng-container *ngIf=\"formControl.touched && formControl.invalid; else hints\">\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n          <mat-error *ngIf=\"formControl.errors | mapKeys | arrayFirst; let errorKey; else parentError\" [ngSwitch]=\"errorKey\">\n            <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n            <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n            <span *ngSwitchCase=\"'dateIsAfter'\">\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n            </span>\n            <span *ngSwitchCase=\"'dateIsBefore'\">\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n            </span>\n            <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n            <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n            <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n            <span *ngSwitchCase=\"'msg'\">\n              {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n            </span>\n          </mat-error>\n        <ng-template #parentError>\n          <ng-content select=\"mat-error\"></ng-content>\n        </ng-template>\n      </div>\n    </ng-container>\n\n    <ng-template #hints>\n      <!-- hints -->\n      <div class=\"mat-mdc-form-field-hint-wrapper\">\n        <ng-content select=\"mat-hint:not([align='end'])\"></ng-content>\n        <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n        <ng-content select=\"mat-hint[align='end']\"></ng-content>\n      </div>\n    </ng-template>\n  </div>\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", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.day{min-width:150px}ion-grid.fill ion-col.hour{min-width:75px;max-width:110px}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:150px}ion-grid.outline ion-col.day{min-width:150px}ion-grid.outline ion-col.hour{min-width:75px;max-width:110px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i1$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$2.IonRow, selector: "ion-row" }, { kind: "component", type: i1$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i10.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i10.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "directive", type: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i12.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i12.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatDateTime, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-date-time-field', providers: [DEFAULT_VALUE_ACCESSOR$2], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field\n  *ngIf=\"readonly; else writable\"\n  [floatLabel]=\"floatLabel | asFloatLabelType\"\n  [appearance]=\"appearance\"\n  class=\"mat-form-field-disabled\"\n>\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n  <input matInput hidden type=\"text\" readonly [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 {{appearance}}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (dateControl.invalid || formControl.invalid)\"\n          (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n          (focus)=\"_openDatePickerIfMobile($event)\"\n        >\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n          <!-- Desktop -->\n          <input\n            matInput\n            #matInput\n            autocomplete=\"off\"\n            type=\"text\"\n            class=\"mat-input-element\"\n            [maskito]=\"maskitoDateOptions\"\n            *ngIf=\"!mobile\"\n            [formControl]=\"dateControl\"\n            (blur)=\"_onBlur()\"\n            (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n            (keyup.escape)=\"_preventEvent($event)\"\n            [required]=\"required\"\n            [tabindex]=\"tabindex\"\n            [appAutofocus]=\"autofocus\"\n          />\n          <input\n            type=\"text\"\n            [formControl]=\"formControl\"\n            hidden\n            *ngIf=\"!mobile\"\n            [matDatepicker]=\"datePicker\"\n            [matDatepickerFilter]=\"datePickerFilter\"\n            (dateChange)=\"_onDatePickerChange($event)\"\n            readonly\n          />\n\n          <!-- Mobile -->\n          <input\n            #matInput\n            autocomplete=\"off\"\n            type=\"text\"\n            class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n            *ngIf=\"mobile\"\n            [formControl]=\"dateControl\"\n            [required]=\"required\"\n            [tabindex]=\"tabindex\"\n            readonly\n          />\n          <input\n            matInput\n            type=\"text\"\n            [formControl]=\"formControl\"\n            hidden\n            *ngIf=\"mobile\"\n            [matDatepicker]=\"datePicker\"\n            [matDatepickerFilter]=\"datePickerFilter\"\n            (dateChange)=\"_onDatePickerChange($event)\"\n            readonly\n          />\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"clear($event)\"\n            [hidden]=\"formControl.disabled || !formControl.value\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          <mat-datepicker-actions *ngIf=\"mobile\">\n            <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n              <ion-label>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n              <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n            </ion-button>\n          </mat-datepicker-actions>\n        </mat-datepicker>\n\n        <!-- cancel button -->\n        <ng-template #dateHeader>\n          <ion-button fill=\"clear\" color=\"dark\">\n            <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n          </ion-button>\n        </ng-template>\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n        >\n          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n          <input\n            matInput\n            #matInput\n            type=\"text\"\n            [formControl]=\"timeControl\"\n            *ngIf=\"!mobile\"\n            [maskito]=\"maskitoTimeOptions\"\n            class=\"mat-input-element\"\n            autocomplete=\"off\"\n            min=\"0\"\n            max=\"23\"\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\n          <input\n            #matInput\n            type=\"text\"\n            class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n            *ngIf=\"mobile\"\n            [formControl]=\"timeControl\"\n            (click)=\"_openTimePickerIfMobile($event)\"\n            readonly\n          />\n\n          <!-- Hide the final (hidden) input -->\n          <input\n            matInput\n            [formControl]=\"timeControl\"\n            hidden\n            [required]=\"required\"\n            [ngxTimepicker]=\"timePicker\"\n            [format]=\"24\"\n            readonly\n          />\n\n          <button\n            matSuffix\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            *ngIf=\"!compact && !mobile\"\n            [disabled]=\"formControl.disabled\"\n            (click)=\"openTimePicker($event)\"\n          >\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n          <button\n            matSuffix\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            *ngIf=\"!compact && mobile\"\n            [disabled]=\"formControl.disabled\"\n            (click)=\"_openTimePickerIfMobile($event)\"\n          >\n            <mat-icon>access_time</mat-icon>\n          </button>\n\n          <ngx-material-timepicker\n            #timePicker\n            [@.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          >\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          </ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFromField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    <ng-container *ngIf=\"formControl.touched && formControl.invalid; else hints\">\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n          <mat-error *ngIf=\"formControl.errors | mapKeys | arrayFirst; let errorKey; else parentError\" [ngSwitch]=\"errorKey\">\n            <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n            <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n            <span *ngSwitchCase=\"'dateIsAfter'\">\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n            </span>\n            <span *ngSwitchCase=\"'dateIsBefore'\">\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n            </span>\n            <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n            <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n            <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n            <span *ngSwitchCase=\"'msg'\">\n              {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n            </span>\n          </mat-error>\n        <ng-template #parentError>\n          <ng-content select=\"mat-error\"></ng-content>\n        </ng-template>\n      </div>\n    </ng-container>\n\n    <ng-template #hints>\n      <!-- hints -->\n      <div class=\"mat-mdc-form-field-hint-wrapper\">\n        <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n        <ng-content select=\"mat-hint\"></ng-content>\n      </div>\n    </ng-template>\n  </div>\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", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.day{min-width:150px}ion-grid.fill ion-col.hour{min-width:75px;max-width:110px}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:150px}ion-grid.outline ion-col.day{min-width:150px}ion-grid.outline ion-col.hour{min-width:75px;max-width:110px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"] }]
+            args: [{ selector: 'mat-date-time-field', providers: [DEFAULT_VALUE_ACCESSOR$2], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field\n  *ngIf=\"readonly; else writable\"\n  [floatLabel]=\"floatLabel | asFloatLabelType\"\n  [appearance]=\"appearance\"\n  class=\"mat-form-field-disabled\"\n>\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n  <input matInput hidden type=\"text\" readonly [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 {{appearance}}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (dateControl.invalid || formControl.invalid)\"\n          (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n          (focus)=\"_openDatePickerIfMobile($event)\"\n        >\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n          <!-- Desktop -->\n          <input\n            matInput\n            #matInput\n            autocomplete=\"off\"\n            type=\"text\"\n            class=\"mat-input-element\"\n            [maskito]=\"maskitoDateOptions\"\n            *ngIf=\"!mobile\"\n            [formControl]=\"dateControl\"\n            (blur)=\"_onBlur()\"\n            (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n            (keyup.escape)=\"_preventEvent($event)\"\n            [required]=\"required\"\n            [tabindex]=\"tabindex\"\n            [appAutofocus]=\"autofocus\"\n          />\n          <input\n            type=\"text\"\n            [formControl]=\"formControl\"\n            hidden\n            *ngIf=\"!mobile\"\n            [matDatepicker]=\"datePicker\"\n            [matDatepickerFilter]=\"datePickerFilter\"\n            (dateChange)=\"_onDatePickerChange($event)\"\n            readonly\n          />\n\n          <!-- Mobile -->\n          <input\n            #matInput\n            autocomplete=\"off\"\n            type=\"text\"\n            class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n            *ngIf=\"mobile\"\n            [formControl]=\"dateControl\"\n            [required]=\"required\"\n            [tabindex]=\"tabindex\"\n            readonly\n          />\n          <input\n            matInput\n            type=\"text\"\n            [formControl]=\"formControl\"\n            hidden\n            *ngIf=\"mobile\"\n            [matDatepicker]=\"datePicker\"\n            [matDatepickerFilter]=\"datePickerFilter\"\n            (dateChange)=\"_onDatePickerChange($event)\"\n            readonly\n          />\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"clear($event)\"\n            [hidden]=\"formControl.disabled || !formControl.value\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          <mat-datepicker-actions *ngIf=\"mobile\">\n            <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n              <ion-label>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n              <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n            </ion-button>\n          </mat-datepicker-actions>\n        </mat-datepicker>\n\n        <!-- cancel button -->\n        <ng-template #dateHeader>\n          <ion-button fill=\"clear\" color=\"dark\">\n            <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n          </ion-button>\n        </ng-template>\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n        >\n          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n          <input\n            matInput\n            #matInput\n            type=\"text\"\n            [formControl]=\"timeControl\"\n            *ngIf=\"!mobile\"\n            [maskito]=\"maskitoTimeOptions\"\n            class=\"mat-input-element\"\n            autocomplete=\"off\"\n            min=\"0\"\n            max=\"23\"\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\n          <input\n            #matInput\n            type=\"text\"\n            class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n            *ngIf=\"mobile\"\n            [formControl]=\"timeControl\"\n            (click)=\"_openTimePickerIfMobile($event)\"\n            readonly\n          />\n\n          <!-- Hide the final (hidden) input -->\n          <input\n            matInput\n            [formControl]=\"timeControl\"\n            hidden\n            [required]=\"required\"\n            [ngxTimepicker]=\"timePicker\"\n            [format]=\"24\"\n            readonly\n          />\n\n          <button\n            matSuffix\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            *ngIf=\"!compact && !mobile\"\n            [disabled]=\"formControl.disabled\"\n            (click)=\"openTimePicker($event)\"\n          >\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n          <button\n            matSuffix\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            *ngIf=\"!compact && mobile\"\n            [disabled]=\"formControl.disabled\"\n            (click)=\"_openTimePickerIfMobile($event)\"\n          >\n            <mat-icon>access_time</mat-icon>\n          </button>\n\n          <ngx-material-timepicker\n            #timePicker\n            [@.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          >\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          </ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFromField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    <ng-container *ngIf=\"formControl.touched && formControl.invalid; else hints\">\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n          <mat-error *ngIf=\"formControl.errors | mapKeys | arrayFirst; let errorKey; else parentError\" [ngSwitch]=\"errorKey\">\n            <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n            <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n            <span *ngSwitchCase=\"'dateIsAfter'\">\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n            </span>\n            <span *ngSwitchCase=\"'dateIsBefore'\">\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n            </span>\n            <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n            <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n            <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n            <span *ngSwitchCase=\"'msg'\">\n              {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n            </span>\n          </mat-error>\n        <ng-template #parentError>\n          <ng-content select=\"mat-error\"></ng-content>\n        </ng-template>\n      </div>\n    </ng-container>\n\n    <ng-template #hints>\n      <!-- hints -->\n      <div class=\"mat-mdc-form-field-hint-wrapper\">\n        <ng-content select=\"mat-hint:not([align='end'])\"></ng-content>\n        <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n        <ng-content select=\"mat-hint[align='end']\"></ng-content>\n      </div>\n    </ng-template>\n  </div>\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", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-grid.fill ion-col.day{min-width:150px}ion-grid.fill ion-col.hour{min-width:75px;max-width:110px}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}mat-form-field.mat-form-field-disabled ion-col.day{min-width:150px}ion-grid.outline ion-col.day{min-width:150px}ion-grid.outline ion-col.hour{min-width:75px;max-width:110px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"] }]
         }], ctorParameters: () => [{ type: i1.MomentDateAdapter }, { type: i1$1.TranslateService }, { type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1$3.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -38521,11 +38521,11 @@ class LatLongTestPage {
     }
     stringify = JSON.stringify;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: LatLongTestPage, deps: [{ token: i1$3.UntypedFormBuilder }, { token: PlatformService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: LatLongTestPage, selector: "app-latlong-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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>\n  <!-- Tab nav - desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <ng-container *ngIf=\"mode === 'desktop'\">\n      <!-- Empty value -->\n      <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <ion-row>\n            <ion-col>\n              <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n            </ion-col>\n          </ion-row>\n\n\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>Empty, with defaults</h4></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <!-- DD Default sign -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ formGroup.value | json }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DD\"\n                          defaultSign=\"-\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\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\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DD\"\n                          defaultSign=\"-\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                    <ion-row *ngIf=\"geoPositionMessage\">\n                      <ion-col>{{ geoPositionMessage }}</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\">Format DDMM, defaultSign '+'</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          defaultSign=\"+\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (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\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          defaultSign=\"+\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (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          </ion-row>\n        </ion-grid>\n      </form>\n\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <!-- With value -->\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>With value</h4></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <!-- DD -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DD</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DD\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DD\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\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\">Format DDMM</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\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\">Format DDMMSS</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMMSS\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMMSS\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\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 | formGetGroup: 'disable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>Disabled control</h4></ion-text>\n            </ion-col>\n          </ion-row>\n          <ion-row>\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled control</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\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\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (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\">Readonly (control is enable)</ion-label>\n                  </ion-card-title>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-checkbox\n                    (change)=\"readonlyField.readonly = $event.checked\"\n                    [checked]=\"readonlyField.readonly\"\n                  ></mat-checkbox>\n\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          #readonlyField\n                          [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [readonly]=\"true\"\n                          [appearance]=\"appearance\"\n                        >\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    </ng-container>\n\n    <!-- Temporay TAB (for DEV) -->\n    <ng-container *ngIf=\"mode === 'temp'\">\n      <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n            </ion-card-title>\n            <ion-card-subtitle>\n              <ion-text color=\"medium\">\n                <small>\n                  <pre>{{ formGroup.value | json }}</pre>\n                </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\n                    formControlName=\"latitude\"\n                    type=\"latitude\"\n                    latLongPattern=\"DD\"\n                    defaultSign=\"- \"\n                    [required]=\"true\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                  >\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\n                    formControlName=\"longitude\"\n                    type=\"longitude\"\n                    latLongPattern=\"DD\"\n                    defaultSign=\"- \"\n                    placeholder=\"Longitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n              </ion-row>\n              <ion-row *ngIf=\"geoPositionMessage\">\n                <ion-col>{{ geoPositionMessage }}</ion-col>\n              </ion-row>\n            </ion-grid>\n          </ion-card-content>\n        </ion-card>\n      </form>\n    </ng-container>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1$2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1$2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1$2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i1$2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i1$2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i1$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$2.IonRow, selector: "ion-row" }, { kind: "component", type: i1$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1$2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatLatLongField, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "required", "floatLabel", "placeholder", "tabindex", "defaultSign", "maxDecimals", "placeholderChar", "autofocus", "appearance", "readonly", "subscriptSizing"], outputs: ["onBlur", "onFocus"] }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetGroupPipe, name: "formGetGroup" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: LatLongTestPage, selector: "app-latlong-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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>\n  <!-- Tab nav - desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <ng-container *ngIf=\"mode === 'desktop'\">\n      <!-- Empty value -->\n      <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <ion-row>\n            <ion-col>\n              <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n            </ion-col>\n          </ion-row>\n\n\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>Empty, with defaults</h4></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <!-- DD Default sign -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ formGroup.value | json }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DD\"\n                          defaultSign=\"-\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\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\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DD\"\n                          defaultSign=\"-\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                    <ion-row *ngIf=\"geoPositionMessage\">\n                      <ion-col>{{ geoPositionMessage }}</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\">Format DDMM, defaultSign '+'</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          defaultSign=\"+\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (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\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          defaultSign=\"+\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (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          </ion-row>\n        </ion-grid>\n      </form>\n\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <!-- With value -->\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>With value</h4></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <!-- DD -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DD</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DD\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DD\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\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\">Format DDMM</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\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\">Format DDMMSS</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMMSS\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMMSS\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\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 | formGetGroup: 'disable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>Disabled control</h4></ion-text>\n            </ion-col>\n          </ion-row>\n          <ion-row>\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled control</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\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\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (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\">Readonly (control is enable)</ion-label>\n                  </ion-card-title>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-checkbox\n                    (change)=\"readonlyField.readonly = $event.checked\"\n                    [checked]=\"readonlyField.readonly\"\n                  ></mat-checkbox>\n\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          #readonlyField\n                          [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [readonly]=\"true\"\n                          [appearance]=\"appearance\"\n                        >\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\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">With hint</ion-label>\n                  </ion-card-title>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-latlong-field\n                    #readonlyField\n                    [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                    type=\"latitude\"\n                    latLongPattern=\"DDMM\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-hint align=\"end\">This is a long long hint</mat-hint>\n                  </mat-latlong-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </form>\n    </ng-container>\n\n    <!-- Temporay TAB (for DEV) -->\n    <ng-container *ngIf=\"mode === 'temp'\">\n      <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n            </ion-card-title>\n            <ion-card-subtitle>\n              <ion-text color=\"medium\">\n                <small>\n                  <pre>{{ formGroup.value | json }}</pre>\n                </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\n                    formControlName=\"latitude\"\n                    type=\"latitude\"\n                    latLongPattern=\"DD\"\n                    defaultSign=\"- \"\n                    [required]=\"true\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                  >\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\n                    formControlName=\"longitude\"\n                    type=\"longitude\"\n                    latLongPattern=\"DD\"\n                    defaultSign=\"- \"\n                    placeholder=\"Longitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n              </ion-row>\n              <ion-row *ngIf=\"geoPositionMessage\">\n                <ion-col>{{ geoPositionMessage }}</ion-col>\n              </ion-row>\n            </ion-grid>\n          </ion-card-content>\n        </ion-card>\n      </form>\n    </ng-container>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1$2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1$2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1$2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i1$2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i1$2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i1$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$2.IonRow, selector: "ion-row" }, { kind: "component", type: i1$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1$2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatLatLongField, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "required", "floatLabel", "placeholder", "tabindex", "defaultSign", "maxDecimals", "placeholderChar", "autofocus", "appearance", "readonly", "subscriptSizing"], outputs: ["onBlur", "onFocus"] }, { kind: "pipe", type: i2$1.JsonPipe, name: "json" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetGroupPipe, name: "formGetGroup" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: LatLongTestPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-latlong-test', template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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>\n  <!-- Tab nav - desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <ng-container *ngIf=\"mode === 'desktop'\">\n      <!-- Empty value -->\n      <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <ion-row>\n            <ion-col>\n              <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n            </ion-col>\n          </ion-row>\n\n\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>Empty, with defaults</h4></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <!-- DD Default sign -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ formGroup.value | json }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DD\"\n                          defaultSign=\"-\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\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\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DD\"\n                          defaultSign=\"-\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                    <ion-row *ngIf=\"geoPositionMessage\">\n                      <ion-col>{{ geoPositionMessage }}</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\">Format DDMM, defaultSign '+'</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          defaultSign=\"+\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (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\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          defaultSign=\"+\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (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          </ion-row>\n        </ion-grid>\n      </form>\n\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <!-- With value -->\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>With value</h4></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <!-- DD -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DD</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DD\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DD\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\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\">Format DDMM</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\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\">Format DDMMSS</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMMSS\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMMSS\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\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 | formGetGroup: 'disable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>Disabled control</h4></ion-text>\n            </ion-col>\n          </ion-row>\n          <ion-row>\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled control</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\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\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (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\">Readonly (control is enable)</ion-label>\n                  </ion-card-title>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-checkbox\n                    (change)=\"readonlyField.readonly = $event.checked\"\n                    [checked]=\"readonlyField.readonly\"\n                  ></mat-checkbox>\n\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          #readonlyField\n                          [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [readonly]=\"true\"\n                          [appearance]=\"appearance\"\n                        >\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    </ng-container>\n\n    <!-- Temporay TAB (for DEV) -->\n    <ng-container *ngIf=\"mode === 'temp'\">\n      <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n            </ion-card-title>\n            <ion-card-subtitle>\n              <ion-text color=\"medium\">\n                <small>\n                  <pre>{{ formGroup.value | json }}</pre>\n                </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\n                    formControlName=\"latitude\"\n                    type=\"latitude\"\n                    latLongPattern=\"DD\"\n                    defaultSign=\"- \"\n                    [required]=\"true\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                  >\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\n                    formControlName=\"longitude\"\n                    type=\"longitude\"\n                    latLongPattern=\"DD\"\n                    defaultSign=\"- \"\n                    placeholder=\"Longitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n              </ion-row>\n              <ion-row *ngIf=\"geoPositionMessage\">\n                <ion-col>{{ geoPositionMessage }}</ion-col>\n              </ion-row>\n            </ion-grid>\n          </ion-card-content>\n        </ion-card>\n      </form>\n    </ng-container>\n  </form>\n</ion-content>\n" }]
+            args: [{ selector: 'app-latlong-test', template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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>\n  <!-- Tab nav - desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <ng-container *ngIf=\"mode === 'desktop'\">\n      <!-- Empty value -->\n      <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <ion-row>\n            <ion-col>\n              <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n            </ion-col>\n          </ion-row>\n\n\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>Empty, with defaults</h4></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <!-- DD Default sign -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ formGroup.value | json }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DD\"\n                          defaultSign=\"-\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\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\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DD\"\n                          defaultSign=\"-\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                            <mat-icon>gps_fixed</mat-icon>\n                          </button>\n                        </mat-latlong-field>\n                      </ion-col>\n                    </ion-row>\n                    <ion-row *ngIf=\"geoPositionMessage\">\n                      <ion-col>{{ geoPositionMessage }}</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\">Format DDMM, defaultSign '+'</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          defaultSign=\"+\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (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\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          defaultSign=\"+\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (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          </ion-row>\n        </ion-grid>\n      </form>\n\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <!-- With value -->\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>With value</h4></ion-text>\n            </ion-col>\n          </ion-row>\n\n          <ion-row>\n            <!-- DD -->\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Format DD</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DD\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DD\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\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\">Format DDMM</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\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\">Format DDMMSS</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMMSS\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        ></mat-latlong-field>\n                      </ion-col>\n                      <ion-col>\n                        <mat-latlong-field\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMMSS\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\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 | formGetGroup: 'disable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-grid>\n          <ion-row>\n            <ion-col>\n              <ion-text><h4>Disabled control</h4></ion-text>\n            </ion-col>\n          </ion-row>\n          <ion-row>\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">Disabled control</ion-label>\n                  </ion-card-title>\n                  <ion-card-subtitle>\n                    <ion-text color=\"medium\">\n                      <small>\n                        <pre>{{ stringify(formGroup.value) }}</pre>\n                      </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\n                          formControlName=\"latitude\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [appearance]=\"appearance\"\n                        >\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\n                          formControlName=\"longitude\"\n                          type=\"longitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Longitude\"\n                          [appearance]=\"appearance\"\n                        >\n                          <mat-icon matPrefix>room</mat-icon>\n                          <button type=\"button\" mat-icon-button matSuffix (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\">Readonly (control is enable)</ion-label>\n                  </ion-card-title>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-checkbox\n                    (change)=\"readonlyField.readonly = $event.checked\"\n                    [checked]=\"readonlyField.readonly\"\n                  ></mat-checkbox>\n\n                  <ion-grid class=\"ion-no-padding\">\n                    <ion-row>\n                      <ion-col>\n                        <mat-latlong-field\n                          #readonlyField\n                          [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                          type=\"latitude\"\n                          latLongPattern=\"DDMM\"\n                          placeholder=\"Latitude\"\n                          [readonly]=\"true\"\n                          [appearance]=\"appearance\"\n                        >\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\n            <ion-col>\n              <ion-card>\n                <ion-card-header>\n                  <ion-card-title>\n                    <ion-label color=\"primary\">With hint</ion-label>\n                  </ion-card-title>\n                </ion-card-header>\n                <ion-card-content>\n                  <mat-latlong-field\n                    #readonlyField\n                    [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                    type=\"latitude\"\n                    latLongPattern=\"DDMM\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-hint align=\"end\">This is a long long hint</mat-hint>\n                  </mat-latlong-field>\n                </ion-card-content>\n              </ion-card>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n      </form>\n    </ng-container>\n\n    <!-- Temporay TAB (for DEV) -->\n    <ng-container *ngIf=\"mode === 'temp'\">\n      <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n            </ion-card-title>\n            <ion-card-subtitle>\n              <ion-text color=\"medium\">\n                <small>\n                  <pre>{{ formGroup.value | json }}</pre>\n                </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\n                    formControlName=\"latitude\"\n                    type=\"latitude\"\n                    latLongPattern=\"DD\"\n                    defaultSign=\"- \"\n                    [required]=\"true\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                  >\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\n                    formControlName=\"longitude\"\n                    type=\"longitude\"\n                    latLongPattern=\"DD\"\n                    defaultSign=\"- \"\n                    placeholder=\"Longitude\"\n                    [appearance]=\"appearance\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n              </ion-row>\n              <ion-row *ngIf=\"geoPositionMessage\">\n                <ion-col>{{ geoPositionMessage }}</ion-col>\n              </ion-row>\n            </ion-grid>\n          </ion-card-content>\n        </ion-card>\n      </form>\n    </ng-container>\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }, { type: PlatformService }] });
 
 class SwipeTestPage {