@sumaris-net/ngx-components 18.6.70 → 18.6.71

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

@@ -13607,7 +13607,7 @@ class MatLatLongFieldInput {
     secondsInput;
     signInput;
     formGroup = inject(FormBuilder).group({
-        degrees: ['', [Validators.required]],
+        degrees: [''],
         minutes: [''],
         seconds: [''],
         sign: [null],
@@ -13639,6 +13639,7 @@ class MatLatLongFieldInput {
     set required(value) {
         this._required = coerceBooleanProperty(value);
         this.stateChanges.next();
+        this.updateValidators();
     }
     _required = false;
     get disabled() {
@@ -13769,15 +13770,8 @@ class MatLatLongFieldInput {
                 });
                 break;
         }
-        if (this.showMinutes) {
-            this.formGroup.controls.minutes.addValidators(Validators.required);
-        }
-        if (this.showSeconds) {
-            this.formGroup.controls.seconds.addValidators(Validators.required);
-        }
-        if (this.showSign) {
-            this.formGroup.controls.sign.addValidators(Validators.required);
-        }
+        // Update validators (add required to controls)
+        this.updateValidators();
         if (this.readonly) {
             this._subscription.add(this.ngControl.valueChanges.subscribe(() => this.cd.markForCheck()));
         }
@@ -13942,6 +13936,30 @@ class MatLatLongFieldInput {
     safeParseFloat(value) {
         return isNotNilOrBlank(value) ? parseFloat(value) : undefined;
     }
+    updateValidators() {
+        const { minutes, seconds, sign } = this.formGroup.controls;
+        // Update minutes
+        if (this.showMinutes && this._required) {
+            minutes.addValidators(Validators.required);
+        }
+        else {
+            minutes.removeValidators(Validators.required);
+        }
+        // Update seconds
+        if (this.showSeconds && this._required) {
+            seconds.addValidators(Validators.required);
+        }
+        else {
+            seconds.removeValidators(Validators.required);
+        }
+        // Update sign
+        if (this.showSign && this._required) {
+            sign.addValidators(Validators.required);
+        }
+        else {
+            sign.removeValidators(Validators.required);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatLatLongFieldInput, deps: [{ token: i0.ElementRef }, { token: MAT_FORM_FIELD, optional: true }, { token: i1$3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatLatLongFieldInput, selector: "mat-latlong-input", inputs: { userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"], required: "required", disabled: "disabled", value: "value", type: "type", pattern: ["latLongPattern", "pattern"], defaultSign: "defaultSign", maxDecimals: "maxDecimals", readonly: "readonly" }, host: { properties: { "class.label-floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: MatLatLongFieldInput }], viewQueries: [{ propertyName: "degreesInput", first: true, predicate: ["degrees"], descendants: true, read: ElementRef }, { propertyName: "minutesInput", first: true, predicate: ["minutes"], descendants: true, read: ElementRef }, { propertyName: "secondsInput", first: true, predicate: ["seconds"], descendants: true, read: ElementRef }, { propertyName: "signInput", first: true, predicate: ["sign"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (readonly) {\n  <ion-text>\n    {{\n      ngControl.value\n        | latLongFormat: { pattern: pattern, maxDecimals: lastInputMaxDecimals, type: type, placeholderChar: '' }\n    }}\n  </ion-text>\n} @else {\n  <div\n    role=\"group\"\n    class=\"mat-latlong-input-container\"\n    [formGroup]=\"formGroup\"\n    [attr.aria-labelledby]=\"_formField?.getLabelId()\"\n    (focusin)=\"onFocusIn($event)\"\n    (focusout)=\"onFocusOut($event)\"\n  >\n    <input\n      #degrees\n      aria-label=\"Degrees\"\n      [class.degrees-only]=\"pattern === 'DD'\"\n      [class.degrees]=\"pattern !== 'DD'\"\n      [class.latitude]=\"type === 'latitude'\"\n      inputmode=\"decimal\"\n      autocomplete=\"off\"\n      [placeholder]=\"degreesPlaceholder | translate\"\n      formControlName=\"degrees\"\n      [maskito]=\"degreesMask\"\n      (input)=\"handleInput('degrees', 'minutes')\"\n    />\n    <span class=\"symbol-unit\">\n      {{ degreesSymbolUnit }}\n    </span>\n\n    @if (showMinutes) {\n      <input\n        #minutes\n        aria-label=\"Minutes\"\n        [class.minutes]=\"showSeconds\"\n        [class.minutes-seconds]=\"!showSeconds\"\n        inputmode=\"decimal\"\n        autocomplete=\"off\"\n        [placeholder]=\"minutesPlaceholder | translate\"\n        formControlName=\"minutes\"\n        [maskito]=\"minutesMask\"\n        (input)=\"handleInput('minutes', 'seconds')\"\n        (keyup.backspace)=\"autoFocusPrev('minutes', 'degrees')\"\n      />\n      <span class=\"symbol-unit\">\n        {{ minutesSymbolUnit }}\n      </span>\n    }\n\n    @if (showSeconds) {\n      <input\n        #seconds\n        aria-label=\"Seconds\"\n        class=\"seconds\"\n        inputmode=\"decimal\"\n        autocomplete=\"off\"\n        [placeholder]=\"secondsPlaceholder | translate\"\n        formControlName=\"seconds\"\n        [maskito]=\"secondsMask\"\n        (input)=\"handleInput('seconds', 'sign')\"\n        (keyup.backspace)=\"autoFocusPrev('seconds', 'minutes')\"\n      />\n      <span class=\"symbol-unit\">\n        {{ secondsSymbolUnit }}\n      </span>\n    }\n\n    <!-- sign -->\n    @if (showSign) {\n      <span class=\"sign-spacer\"></span>\n      <mat-select\n        #sign\n        aria-label=\"Sign\"\n        class=\"sign\"\n        formControlName=\"sign\"\n        [placeholder]=\"\n          (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER' : 'COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER')\n            | translate\n        \"\n        (focusin)=\"sign.open()\"\n        (selectionChange)=\"handleInput('sign')\"\n      >\n        <mat-option [value]=\"1\" (click)=\"sign.close()\">\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_N' : 'COMMON.LAT_LONG.LONG_SIGN_E') | translate }}\n        </mat-option>\n        <mat-option [value]=\"-1\" (click)=\"sign.close()\">\n          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_S' : 'COMMON.LAT_LONG.LONG_SIGN_W') | translate }}\n        </mat-option>\n      </mat-select>\n    }\n  </div>\n}\n", styles: [".mat-latlong-input-container{display:inline-flex;width:100%;opacity:0;transition:opacity .2s;pointer-events:none;--mat-select-arrow-transform: translateY(0)}input{border:none;background:none;padding:0;outline:none;font:inherit;text-align:right;color:var(--mdc-filled-text-field-input-text-color, var(--ion-text-color))}input::placeholder{letter-spacing:-.05em;color:var(--mdc-filled-text-field-input-text-placeholder-color, var(--app-form-field-label-color))}input.degrees-only{width:calc(100% - .5em)}input.degrees{width:1.9em}input.degrees.latitude{width:1.3em}input.minutes{width:1.7em}input.minutes-seconds{width:3.5em}input.seconds{width:3em}.symbol-unit{font-weight:700}.sign-spacer{width:.25em}.sign{max-width:2.6em;color:inherit}:host.label-floating .mat-latlong-input-container{opacity:1;pointer-events:revert}\n"], dependencies: [{ kind: "component", type: i2$1.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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[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: i11.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i12.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: "pipe", type: LatLongFormatPipe, name: "latLongFormat" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -14135,7 +14153,7 @@ class MatLatLongField {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatLatLongField, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.FormGroupDirective, optional: true }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatLatLongField, selector: "mat-latlong-field", inputs: { formControl: "formControl", formControlName: "formControlName", type: "type", pattern: ["latLongPattern", "pattern"], maxDecimals: "maxDecimals", required: "required", floatLabel: "floatLabel", placeholder: "placeholder", defaultSign: "defaultSign", autofocus: "autofocus", mobile: ["mobile", "mobile", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], classList: ["class", "classList"], tabindex: ["tabindex", "tabindex", numberAttribute], appearance: "appearance", readonly: "readonly", subscriptSizing: "subscriptSizing" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatLatLongField, selector: "mat-latlong-field", inputs: { formControl: "formControl", formControlName: "formControlName", type: "type", pattern: ["latLongPattern", "pattern"], maxDecimals: "maxDecimals", required: ["required", "required", booleanAttribute], floatLabel: "floatLabel", placeholder: "placeholder", defaultSign: "defaultSign", autofocus: ["autofocus", "autofocus", booleanAttribute], mobile: ["mobile", "mobile", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], classList: ["class", "classList"], tabindex: ["tabindex", "tabindex", numberAttribute], appearance: "appearance", readonly: "readonly", subscriptSizing: "subscriptSizing" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -14169,7 +14187,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], maxDecimals: [{
                 type: Input
             }], required: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], floatLabel: [{
                 type: Input
             }], placeholder: [{
@@ -14177,7 +14196,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], defaultSign: [{
                 type: Input
             }], autofocus: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], mobile: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -44360,6 +44380,10 @@ class LatLongTestPage {
                 latitude: [null, Validators.compose([Validators.required, SharedValidators.latitude])],
                 longitude: [null, Validators.compose([Validators.required, SharedValidators.longitude])],
             }),
+            notRequired: formBuilder.group({
+                latitude: [null, SharedValidators.latitude],
+                longitude: [null, SharedValidators.latitude],
+            }),
             enable: formBuilder.group({
                 latitude: [null, SharedValidators.latitude],
                 longitude: [null, SharedValidators.longitude],
@@ -44394,6 +44418,10 @@ class LatLongTestPage {
                 latitude: null,
                 longitude: null,
             },
+            notRequired: {
+                latitude: null,
+                longitude: null,
+            },
             enable: {
                 latitude: 50.1,
                 longitude: -2,
@@ -44444,11 +44472,11 @@ class LatLongTestPage {
     }
     stringify = JSON.stringify;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LatLongTestPage, deps: [{ token: i1$3.UntypedFormBuilder }, { token: PlatformService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\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 === 'dev'\" (click)=\"toggleMode('dev')\">\n      <mat-label>Dev</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    @if (mode === 'mobile') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: true }\"></ng-container>\n    } @else if (mode === 'desktop') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: false }\"></ng-container>\n    } @else if (mode === 'dev') {\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        <ion-row>\n          <ion-col>\n            <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"'dynamic'\">\n              <mat-label>LatLongFormat</mat-label>\n              <mat-select #selectLatLongFormat [(value)]=\"selectedFormat\">\n                <mat-option value=\"DDMM\" selected>DDMM</mat-option>\n                <mat-option value=\"DDMMSS\">DDMMSS</mat-option>\n                <mat-option value=\"DD\">DD</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n        @switch (selectedFormat) {\n          @case ('DDMM') {\n            <ion-row>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DDMM', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DDMM', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <!-- <ion-col> -->\n              <!--   <ng-container -->\n              <!--     *ngTemplateOutlet=\"testV2; context: { formGroup: 'disable', latLongPattern: 'DDMM', required: true }\" -->\n              <!--   ></ng-container> -->\n              <!-- </ion-col> -->\n            </ion-row>\n          }\n          @case ('DDMMSS') {\n            <ion-row>\n              <!-- DDMMSS -->\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DDMMSS', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DDMMSS', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'disable', latLongPattern: 'DDMMSS', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n          @case ('DD') {\n            <ion-row>\n              <!-- DDMMSS -->\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DD', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DD', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'disable', latLongPattern: 'DD', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n        }\n      </ion-grid>\n    } @else {\n      <!-- Temporay TAB (for DEV) -->\n      <form *ngIf=\"form | formGetGroup: 'enable' 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=\"DDMMSS\"\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=\"DDMMSS\"\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    }\n  </form>\n</ion-content>\n\n<ng-template #mainTest let-mobile=\"mobile\">\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      <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>{{ 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                      defaultSign=\"-\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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        <!-- DDMMSS Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS, 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=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\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=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\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  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'emptyRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, required (no defaults)</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, required</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                      [mobile]=\"mobile\"\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                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\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  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, required</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                      [mobile]=\"mobile\"\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                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                [mobile]=\"mobile\"\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-template>\n\n<ng-template #newComponent let-formGroupName=\"formGroup\" let-pattern=\"latLongPattern\" let-required=\"required\">\n  <form *ngIf=\"form | formGetGroup: formGroupName as formGroup\" [formGroup]=\"formGroup\">\n    <ion-card>\n      <ion-card-header>\n        <ion-card-title>\n          <ion-label color=\"primary\">{{ formGroupName }}</ion-label>\n        </ion-card-title>\n        <ion-card-subtitle>\n          <ion-grid class=\"ion-no-padding\">\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding\">\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ formGroup.value | json }}</pre>\n                    <pre>invalid ? : {{ (formGroup | formGetControl: 'latitude').invalid }}</pre>\n                    <pre>touched ? : {{ (formGroup | formGetControl: 'latitude').touched }}</pre>\n                    <pre>errors : {{ formGroup | formGetGroup: 'latitude' | formError }}</pre>\n                  </small>\n                </ion-text>\n              </ion-col>\n            </ion-row>\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\n                <mat-latlong-field\n                  formControlName=\"latitude\"\n                  type=\"latitude\"\n                  [readonly]=\"true\"\n                  [latLongPattern]=\"pattern\"\n                  defaultSign=\"-\"\n                  placeholder=\"Latitude\"\n                  [appearance]=\"appearance\"\n                ></mat-latlong-field>\n              </ion-col>\n              <ion-col sizeLg=\"6\">\n                <mat-latlong-field\n                  formControlName=\"longitude\"\n                  type=\"longitude\"\n                  [readonly]=\"true\"\n                  [latLongPattern]=\"pattern\"\n                  defaultSign=\"-\"\n                  placeholder=\"Longitude\"\n                  [appearance]=\"appearance\"\n                ></mat-latlong-field>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\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 class=\"ion-no-padding\" sizeLg=\"6\">\n              <mat-latlong-field\n                formControlName=\"latitude\"\n                type=\"latitude\"\n                [latLongPattern]=\"pattern\"\n                defaultSign=\"-\"\n                placeholder=\"Latitude\"\n                [appearance]=\"appearance\"\n                [required]=\"required\"\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 class=\"ion-no-padding\" sizeLg=\"6\">\n              <mat-latlong-field\n                formControlName=\"longitude\"\n                type=\"longitude\"\n                [latLongPattern]=\"pattern\"\n                defaultSign=\"-\"\n                placeholder=\"Longitude\"\n                [appearance]=\"appearance\"\n                [required]=\"required\"\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-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-template>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.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: "component", type: i7$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$1.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", "maxDecimals", "required", "floatLabel", "placeholder", "defaultSign", "autofocus", "mobile", "clearable", "class", "tabindex", "appearance", "readonly", "subscriptSizing"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: FormErrorPipe, name: "formError" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetGroupPipe, name: "formGetGroup" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\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 === 'dev'\" (click)=\"toggleMode('dev')\">\n      <mat-label>Dev</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    @if (mode === 'mobile') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: true }\"></ng-container>\n    } @else if (mode === 'desktop') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: false }\"></ng-container>\n    } @else if (mode === 'dev') {\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        <ion-row>\n          <ion-col>\n            <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"'dynamic'\">\n              <mat-label>LatLongFormat</mat-label>\n              <mat-select #selectLatLongFormat [(value)]=\"selectedFormat\">\n                <mat-option value=\"DDMM\" selected>DDMM</mat-option>\n                <mat-option value=\"DDMMSS\">DDMMSS</mat-option>\n                <mat-option value=\"DD\">DD</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n        @switch (selectedFormat) {\n          @case ('DDMM') {\n            <ion-row>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DDMM', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DDMM', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <!-- <ion-col> -->\n              <!--   <ng-container -->\n              <!--     *ngTemplateOutlet=\"testV2; context: { formGroup: 'disable', latLongPattern: 'DDMM', required: true }\" -->\n              <!--   ></ng-container> -->\n              <!-- </ion-col> -->\n            </ion-row>\n          }\n          @case ('DDMMSS') {\n            <ion-row>\n              <!-- DDMMSS -->\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DDMMSS', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DDMMSS', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'disable', latLongPattern: 'DDMMSS', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n          @case ('DD') {\n            <ion-row>\n              <!-- DDMMSS -->\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DD', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DD', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'disable', latLongPattern: 'DD', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n        }\n      </ion-grid>\n    } @else {\n      <!-- Temporay TAB (for DEV) -->\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Required</ion-label>\n            </ion-card-title>\n            <ion-card-subtitle>\n              <ion-text color=\"medium\">\n                <small>\n                  <pre>formGroup.value: {{ 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=\"DDMMSS\"\n                    defaultSign=\"-\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                    [required]=\"true\"\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=\"DDMMSS\"\n                    defaultSign=\"-\"\n                    placeholder=\"Longitude\"\n                    [appearance]=\"appearance\"\n                    [required]=\"true\"\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    }\n  </form>\n</ion-content>\n\n<ng-template #mainTest let-mobile=\"mobile\">\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      <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>{{ 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                      defaultSign=\"-\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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        <!-- DDMMSS Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS, 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=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\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=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\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  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'emptyRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, required (no defaults)</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, required</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                      [required]=\"true\"\n                      [mobile]=\"mobile\"\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                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\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  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, required</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                      [required]=\"true\"\n                      [mobile]=\"mobile\"\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                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\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  <form *ngIf=\"form | formGetGroup: 'notRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <!-- With value -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, not required</h4></ion-text>\n        </ion-col>\n      </ion-row>\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, not required</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                      [required]=\"false\"\n                      [mobile]=\"mobile\"\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                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\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 -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, not required</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                      [required]=\"false\"\n                      [mobile]=\"mobile\"\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=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\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      </ion-row>\n    </ion-grid>\n  </form>\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [required]=\"false\"\n                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                [mobile]=\"mobile\"\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-template>\n\n<ng-template #newComponent let-formGroupName=\"formGroup\" let-pattern=\"latLongPattern\" let-required=\"required\">\n  <form *ngIf=\"form | formGetGroup: formGroupName as formGroup\" [formGroup]=\"formGroup\">\n    <ion-card>\n      <ion-card-header>\n        <ion-card-title>\n          <ion-label color=\"primary\">{{ formGroupName }}</ion-label>\n        </ion-card-title>\n        <ion-card-subtitle>\n          <ion-grid class=\"ion-no-padding\">\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding\">\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ formGroup.value | json }}</pre>\n                    <pre>invalid ? : {{ (formGroup | formGetControl: 'latitude').invalid }}</pre>\n                    <pre>touched ? : {{ (formGroup | formGetControl: 'latitude').touched }}</pre>\n                    <pre>errors : {{ formGroup | formGetGroup: 'latitude' | formError }}</pre>\n                  </small>\n                </ion-text>\n              </ion-col>\n            </ion-row>\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\n                <mat-latlong-field\n                  formControlName=\"latitude\"\n                  type=\"latitude\"\n                  [readonly]=\"true\"\n                  [latLongPattern]=\"pattern\"\n                  defaultSign=\"-\"\n                  placeholder=\"Latitude\"\n                  [appearance]=\"appearance\"\n                ></mat-latlong-field>\n              </ion-col>\n              <ion-col sizeLg=\"6\">\n                <mat-latlong-field\n                  formControlName=\"longitude\"\n                  type=\"longitude\"\n                  [readonly]=\"true\"\n                  [latLongPattern]=\"pattern\"\n                  defaultSign=\"-\"\n                  placeholder=\"Longitude\"\n                  [appearance]=\"appearance\"\n                ></mat-latlong-field>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\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 class=\"ion-no-padding\" sizeLg=\"6\">\n              <mat-latlong-field\n                formControlName=\"latitude\"\n                type=\"latitude\"\n                [latLongPattern]=\"pattern\"\n                defaultSign=\"-\"\n                placeholder=\"Latitude\"\n                [appearance]=\"appearance\"\n                [required]=\"required\"\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 class=\"ion-no-padding\" sizeLg=\"6\">\n              <mat-latlong-field\n                formControlName=\"longitude\"\n                type=\"longitude\"\n                [latLongPattern]=\"pattern\"\n                defaultSign=\"-\"\n                placeholder=\"Longitude\"\n                [appearance]=\"appearance\"\n                [required]=\"required\"\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-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-template>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.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: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.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: "component", type: i7$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$1.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", "maxDecimals", "required", "floatLabel", "placeholder", "defaultSign", "autofocus", "mobile", "clearable", "class", "tabindex", "appearance", "readonly", "subscriptSizing"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: FormErrorPipe, name: "formError" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetGroupPipe, name: "formGetGroup" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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 === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\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 === 'dev'\" (click)=\"toggleMode('dev')\">\n      <mat-label>Dev</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    @if (mode === 'mobile') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: true }\"></ng-container>\n    } @else if (mode === 'desktop') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: false }\"></ng-container>\n    } @else if (mode === 'dev') {\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        <ion-row>\n          <ion-col>\n            <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"'dynamic'\">\n              <mat-label>LatLongFormat</mat-label>\n              <mat-select #selectLatLongFormat [(value)]=\"selectedFormat\">\n                <mat-option value=\"DDMM\" selected>DDMM</mat-option>\n                <mat-option value=\"DDMMSS\">DDMMSS</mat-option>\n                <mat-option value=\"DD\">DD</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n        @switch (selectedFormat) {\n          @case ('DDMM') {\n            <ion-row>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DDMM', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DDMM', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <!-- <ion-col> -->\n              <!--   <ng-container -->\n              <!--     *ngTemplateOutlet=\"testV2; context: { formGroup: 'disable', latLongPattern: 'DDMM', required: true }\" -->\n              <!--   ></ng-container> -->\n              <!-- </ion-col> -->\n            </ion-row>\n          }\n          @case ('DDMMSS') {\n            <ion-row>\n              <!-- DDMMSS -->\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DDMMSS', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DDMMSS', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'disable', latLongPattern: 'DDMMSS', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n          @case ('DD') {\n            <ion-row>\n              <!-- DDMMSS -->\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DD', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DD', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'disable', latLongPattern: 'DD', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n        }\n      </ion-grid>\n    } @else {\n      <!-- Temporay TAB (for DEV) -->\n      <form *ngIf=\"form | formGetGroup: 'enable' 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=\"DDMMSS\"\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=\"DDMMSS\"\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    }\n  </form>\n</ion-content>\n\n<ng-template #mainTest let-mobile=\"mobile\">\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      <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>{{ 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                      defaultSign=\"-\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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        <!-- DDMMSS Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS, 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=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\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=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\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  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'emptyRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, required (no defaults)</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, required</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                      [mobile]=\"mobile\"\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                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\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  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, required</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                      [mobile]=\"mobile\"\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                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                [mobile]=\"mobile\"\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-template>\n\n<ng-template #newComponent let-formGroupName=\"formGroup\" let-pattern=\"latLongPattern\" let-required=\"required\">\n  <form *ngIf=\"form | formGetGroup: formGroupName as formGroup\" [formGroup]=\"formGroup\">\n    <ion-card>\n      <ion-card-header>\n        <ion-card-title>\n          <ion-label color=\"primary\">{{ formGroupName }}</ion-label>\n        </ion-card-title>\n        <ion-card-subtitle>\n          <ion-grid class=\"ion-no-padding\">\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding\">\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ formGroup.value | json }}</pre>\n                    <pre>invalid ? : {{ (formGroup | formGetControl: 'latitude').invalid }}</pre>\n                    <pre>touched ? : {{ (formGroup | formGetControl: 'latitude').touched }}</pre>\n                    <pre>errors : {{ formGroup | formGetGroup: 'latitude' | formError }}</pre>\n                  </small>\n                </ion-text>\n              </ion-col>\n            </ion-row>\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\n                <mat-latlong-field\n                  formControlName=\"latitude\"\n                  type=\"latitude\"\n                  [readonly]=\"true\"\n                  [latLongPattern]=\"pattern\"\n                  defaultSign=\"-\"\n                  placeholder=\"Latitude\"\n                  [appearance]=\"appearance\"\n                ></mat-latlong-field>\n              </ion-col>\n              <ion-col sizeLg=\"6\">\n                <mat-latlong-field\n                  formControlName=\"longitude\"\n                  type=\"longitude\"\n                  [readonly]=\"true\"\n                  [latLongPattern]=\"pattern\"\n                  defaultSign=\"-\"\n                  placeholder=\"Longitude\"\n                  [appearance]=\"appearance\"\n                ></mat-latlong-field>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\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 class=\"ion-no-padding\" sizeLg=\"6\">\n              <mat-latlong-field\n                formControlName=\"latitude\"\n                type=\"latitude\"\n                [latLongPattern]=\"pattern\"\n                defaultSign=\"-\"\n                placeholder=\"Latitude\"\n                [appearance]=\"appearance\"\n                [required]=\"required\"\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 class=\"ion-no-padding\" sizeLg=\"6\">\n              <mat-latlong-field\n                formControlName=\"longitude\"\n                type=\"longitude\"\n                [latLongPattern]=\"pattern\"\n                defaultSign=\"-\"\n                placeholder=\"Longitude\"\n                [appearance]=\"appearance\"\n                [required]=\"required\"\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-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-template>\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 === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\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 === 'dev'\" (click)=\"toggleMode('dev')\">\n      <mat-label>Dev</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    @if (mode === 'mobile') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: true }\"></ng-container>\n    } @else if (mode === 'desktop') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: false }\"></ng-container>\n    } @else if (mode === 'dev') {\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        <ion-row>\n          <ion-col>\n            <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"'dynamic'\">\n              <mat-label>LatLongFormat</mat-label>\n              <mat-select #selectLatLongFormat [(value)]=\"selectedFormat\">\n                <mat-option value=\"DDMM\" selected>DDMM</mat-option>\n                <mat-option value=\"DDMMSS\">DDMMSS</mat-option>\n                <mat-option value=\"DD\">DD</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n        @switch (selectedFormat) {\n          @case ('DDMM') {\n            <ion-row>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DDMM', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DDMM', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <!-- <ion-col> -->\n              <!--   <ng-container -->\n              <!--     *ngTemplateOutlet=\"testV2; context: { formGroup: 'disable', latLongPattern: 'DDMM', required: true }\" -->\n              <!--   ></ng-container> -->\n              <!-- </ion-col> -->\n            </ion-row>\n          }\n          @case ('DDMMSS') {\n            <ion-row>\n              <!-- DDMMSS -->\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DDMMSS', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DDMMSS', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'disable', latLongPattern: 'DDMMSS', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n          @case ('DD') {\n            <ion-row>\n              <!-- DDMMSS -->\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'empty', latLongPattern: 'DD', required: false }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'enable', latLongPattern: 'DD', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: { formGroup: 'disable', latLongPattern: 'DD', required: true }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n        }\n      </ion-grid>\n    } @else {\n      <!-- Temporay TAB (for DEV) -->\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Required</ion-label>\n            </ion-card-title>\n            <ion-card-subtitle>\n              <ion-text color=\"medium\">\n                <small>\n                  <pre>formGroup.value: {{ 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=\"DDMMSS\"\n                    defaultSign=\"-\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                    [required]=\"true\"\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=\"DDMMSS\"\n                    defaultSign=\"-\"\n                    placeholder=\"Longitude\"\n                    [appearance]=\"appearance\"\n                    [required]=\"true\"\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    }\n  </form>\n</ion-content>\n\n<ng-template #mainTest let-mobile=\"mobile\">\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      <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>{{ 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                      defaultSign=\"-\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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        <!-- DDMMSS Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS, 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=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\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=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\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  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'emptyRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, required (no defaults)</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, required</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                      [required]=\"true\"\n                      [mobile]=\"mobile\"\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                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\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  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, required</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                      [required]=\"true\"\n                      [mobile]=\"mobile\"\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                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\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  <form *ngIf=\"form | formGetGroup: 'notRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <!-- With value -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, not required</h4></ion-text>\n        </ion-col>\n      </ion-row>\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, not required</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                      [required]=\"false\"\n                      [mobile]=\"mobile\"\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                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\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 -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, not required</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                      [required]=\"false\"\n                      [mobile]=\"mobile\"\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=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\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      </ion-row>\n    </ion-grid>\n  </form>\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [required]=\"false\"\n                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                      [mobile]=\"mobile\"\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                [mobile]=\"mobile\"\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-template>\n\n<ng-template #newComponent let-formGroupName=\"formGroup\" let-pattern=\"latLongPattern\" let-required=\"required\">\n  <form *ngIf=\"form | formGetGroup: formGroupName as formGroup\" [formGroup]=\"formGroup\">\n    <ion-card>\n      <ion-card-header>\n        <ion-card-title>\n          <ion-label color=\"primary\">{{ formGroupName }}</ion-label>\n        </ion-card-title>\n        <ion-card-subtitle>\n          <ion-grid class=\"ion-no-padding\">\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding\">\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ formGroup.value | json }}</pre>\n                    <pre>invalid ? : {{ (formGroup | formGetControl: 'latitude').invalid }}</pre>\n                    <pre>touched ? : {{ (formGroup | formGetControl: 'latitude').touched }}</pre>\n                    <pre>errors : {{ formGroup | formGetGroup: 'latitude' | formError }}</pre>\n                  </small>\n                </ion-text>\n              </ion-col>\n            </ion-row>\n            <ion-row class=\"ion-no-padding\">\n              <ion-col class=\"ion-no-padding\" sizeLg=\"6\">\n                <mat-latlong-field\n                  formControlName=\"latitude\"\n                  type=\"latitude\"\n                  [readonly]=\"true\"\n                  [latLongPattern]=\"pattern\"\n                  defaultSign=\"-\"\n                  placeholder=\"Latitude\"\n                  [appearance]=\"appearance\"\n                ></mat-latlong-field>\n              </ion-col>\n              <ion-col sizeLg=\"6\">\n                <mat-latlong-field\n                  formControlName=\"longitude\"\n                  type=\"longitude\"\n                  [readonly]=\"true\"\n                  [latLongPattern]=\"pattern\"\n                  defaultSign=\"-\"\n                  placeholder=\"Longitude\"\n                  [appearance]=\"appearance\"\n                ></mat-latlong-field>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\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 class=\"ion-no-padding\" sizeLg=\"6\">\n              <mat-latlong-field\n                formControlName=\"latitude\"\n                type=\"latitude\"\n                [latLongPattern]=\"pattern\"\n                defaultSign=\"-\"\n                placeholder=\"Latitude\"\n                [appearance]=\"appearance\"\n                [required]=\"required\"\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 class=\"ion-no-padding\" sizeLg=\"6\">\n              <mat-latlong-field\n                formControlName=\"longitude\"\n                type=\"longitude\"\n                [latLongPattern]=\"pattern\"\n                defaultSign=\"-\"\n                placeholder=\"Longitude\"\n                [appearance]=\"appearance\"\n                [required]=\"required\"\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-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-template>\n" }]
         }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }, { type: PlatformService }] });
 
 class SwipeTestPage {