@sumaris-net/ngx-components 18.14.0 → 18.14.1

package/src/app/shared/material/latlong/testing/latlong.test.html

@@ -1,1008 +0,0 @@
-<ion-header>
-  <ion-toolbar color="primary">
-    <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-    </ion-buttons>
-
-    <ion-title>Lat/Long field test page</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <!-- Tab nav - desktop mode -->
-  <nav mat-tab-nav-bar [tabPanel]="tabPanel">
-    <a mat-tab-link [active]="mode === 'mobile'" (click)="toggleMode('mobile')">
-      <mat-label>Mobile</mat-label>
-    </a>
-    <a mat-tab-link [active]="mode === 'desktop'" (click)="toggleMode('desktop')">
-      <mat-label>Desktop</mat-label>
-    </a>
-    <a mat-tab-link [active]="mode === 'dev'" (click)="toggleMode('dev')">
-      <mat-label>Dev</mat-label>
-    </a>
-    <a mat-tab-link [active]="mode === 'temp'" (click)="toggleMode('temp')">
-      <mat-label>Temporary</mat-label>
-    </a>
-  </nav>
-
-  <form #tabPanel class="form-container ion-padding" [formGroup]="form" (ngSubmit)="doSubmit($event)">
-    @if (mode === 'mobile') {
-      <ng-container *ngTemplateOutlet="mainTest; context: { mobile: true }"></ng-container>
-    } @else if (mode === 'desktop') {
-      <ng-container *ngTemplateOutlet="mainTest; context: { mobile: false }"></ng-container>
-    } @else if (mode === 'dev') {
-      <ion-grid>
-        <ion-row>
-          <ion-col>
-            <mat-checkbox (change)="toggleAppearance($event)">Change apparence</mat-checkbox>
-          </ion-col>
-        </ion-row>
-        <ion-row>
-          <ion-col>
-            <mat-form-field [appearance]="appearance" [subscriptSizing]="'dynamic'">
-              <mat-label>LatLongFormat</mat-label>
-              <mat-select #selectLatLongFormat [(value)]="selectedFormat">
-                <mat-option value="DDMM" selected>DDMM</mat-option>
-                <mat-option value="DDMMSS">DDMMSS</mat-option>
-                <mat-option value="DD">DD</mat-option>
-              </mat-select>
-            </mat-form-field>
-          </ion-col>
-        </ion-row>
-        @switch (selectedFormat) {
-          @case ('DDMM') {
-            <ion-row>
-              <ion-col>
-                <ng-container
-                  *ngTemplateOutlet="
-                    newComponent;
-                    context: { formGroup: 'empty', latLongPattern: 'DDMM', required: false }
-                  "
-                ></ng-container>
-              </ion-col>
-              <ion-col>
-                <ng-container
-                  *ngTemplateOutlet="
-                    newComponent;
-                    context: { formGroup: 'enable', latLongPattern: 'DDMM', required: true }
-                  "
-                ></ng-container>
-              </ion-col>
-              <!-- <ion-col> -->
-              <!--   <ng-container -->
-              <!--     *ngTemplateOutlet="testV2; context: { formGroup: 'disable', latLongPattern: 'DDMM', required: true }" -->
-              <!--   ></ng-container> -->
-              <!-- </ion-col> -->
-            </ion-row>
-          }
-          @case ('DDMMSS') {
-            <ion-row>
-              <!-- DDMMSS -->
-              <ion-col>
-                <ng-container
-                  *ngTemplateOutlet="
-                    newComponent;
-                    context: { formGroup: 'empty', latLongPattern: 'DDMMSS', required: false }
-                  "
-                ></ng-container>
-              </ion-col>
-              <ion-col>
-                <ng-container
-                  *ngTemplateOutlet="
-                    newComponent;
-                    context: { formGroup: 'enable', latLongPattern: 'DDMMSS', required: true }
-                  "
-                ></ng-container>
-              </ion-col>
-              <ion-col>
-                <ng-container
-                  *ngTemplateOutlet="
-                    newComponent;
-                    context: { formGroup: 'disable', latLongPattern: 'DDMMSS', required: true }
-                  "
-                ></ng-container>
-              </ion-col>
-            </ion-row>
-          }
-          @case ('DD') {
-            <ion-row>
-              <!-- DDMMSS -->
-              <ion-col>
-                <ng-container
-                  *ngTemplateOutlet="
-                    newComponent;
-                    context: { formGroup: 'empty', latLongPattern: 'DD', required: false }
-                  "
-                ></ng-container>
-              </ion-col>
-              <ion-col>
-                <ng-container
-                  *ngTemplateOutlet="
-                    newComponent;
-                    context: { formGroup: 'enable', latLongPattern: 'DD', required: true }
-                  "
-                ></ng-container>
-              </ion-col>
-              <ion-col>
-                <ng-container
-                  *ngTemplateOutlet="
-                    newComponent;
-                    context: { formGroup: 'disable', latLongPattern: 'DD', required: true }
-                  "
-                ></ng-container>
-              </ion-col>
-            </ion-row>
-          }
-        }
-      </ion-grid>
-    } @else {
-      <!-- Temporay TAB (for DEV) -->
-      <form *ngIf="form | formGetGroup: 'enable' as formGroup" [formGroup]="formGroup">
-        <ion-card>
-          <ion-card-header>
-            <ion-card-title>
-              <ion-label color="primary">Required</ion-label>
-            </ion-card-title>
-            <ion-card-subtitle>
-              <ion-text color="medium">
-                <small>
-                  <pre>formGroup.value: {{ formGroup.value | json }}</pre>
-                </small>
-              </ion-text>
-            </ion-card-subtitle>
-          </ion-card-header>
-          <ion-card-content>
-            <ion-grid class="ion-no-padding">
-              <ion-row>
-                <ion-col>
-                  <mat-latlong-field
-                    formControlName="latitude"
-                    type="latitude"
-                    latLongPattern="DDMMSS"
-                    defaultSign="-"
-                    placeholder="Latitude"
-                    [appearance]="appearance"
-                    [required]="true"
-                  >
-                    <mat-icon matPrefix>room</mat-icon>
-                    <button matSuffix mat-icon-button (click)="geoPosition($event)">
-                      <mat-icon>gps_fixed</mat-icon>
-                    </button>
-                  </mat-latlong-field>
-                </ion-col>
-                <ion-col>
-                  <mat-latlong-field
-                    formControlName="longitude"
-                    type="longitude"
-                    latLongPattern="DDMMSS"
-                    defaultSign="-"
-                    placeholder="Longitude"
-                    [appearance]="appearance"
-                    [required]="true"
-                  >
-                    <mat-icon matPrefix>room</mat-icon>
-                    <button type="button" mat-icon-button matSuffix (click)="geoPosition($event)">
-                      <mat-icon>gps_fixed</mat-icon>
-                    </button>
-                  </mat-latlong-field>
-                </ion-col>
-              </ion-row>
-              <ion-row *ngIf="geoPositionMessage">
-                <ion-col>{{ geoPositionMessage }}</ion-col>
-              </ion-row>
-            </ion-grid>
-          </ion-card-content>
-        </ion-card>
-      </form>
-    }
-  </form>
-</ion-content>
-
-<ng-template #mainTest let-mobile="mobile">
-  <!-- Empty value -->
-  <form *ngIf="form | formGetGroup: 'empty' as formGroup" [formGroup]="formGroup">
-    <ion-grid>
-      <ion-row>
-        <ion-col>
-          <mat-checkbox (change)="toggleAppearance($event)">Change apparence</mat-checkbox>
-        </ion-col>
-      </ion-row>
-
-      <ion-row>
-        <ion-col>
-          <ion-text><h4>Empty, with defaults</h4></ion-text>
-        </ion-col>
-      </ion-row>
-
-      <ion-row>
-        <!-- DD Default sign -->
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Format DD, defaultSign '-'</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ stringify(formGroup.value) }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <ion-grid class="ion-no-padding">
-                <ion-row>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="latitude"
-                      type="latitude"
-                      latLongPattern="DD"
-                      defaultSign="-"
-                      placeholder="Latitude"
-                      [appearance]="appearance"
-                      [mobile]="mobile"
-                    >
-                      <mat-icon matPrefix>room</mat-icon>
-                      <button matSuffix mat-icon-button (click)="geoPosition($event)">
-                        <mat-icon>gps_fixed</mat-icon>
-                      </button>
-                    </mat-latlong-field>
-                  </ion-col>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="longitude"
-                      type="longitude"
-                      latLongPattern="DD"
-                      defaultSign="-"
-                      placeholder="Longitude"
-                      [appearance]="appearance"
-                      [mobile]="mobile"
-                    >
-                      <mat-icon matPrefix>room</mat-icon>
-                      <button type="button" mat-icon-button matSuffix (click)="geoPosition($event)">
-                        <mat-icon>gps_fixed</mat-icon>
-                      </button>
-                    </mat-latlong-field>
-                  </ion-col>
-                </ion-row>
-                <ion-row *ngIf="geoPositionMessage">
-                  <ion-col>{{ geoPositionMessage }}</ion-col>
-                </ion-row>
-              </ion-grid>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <!-- DDMM Default sign -->
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Format DDMM, defaultSign '+'</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ stringify(formGroup.value) }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <ion-grid class="ion-no-padding">
-                <ion-row>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="latitude"
-                      type="latitude"
-                      latLongPattern="DDMM"
-                      defaultSign="+"
-                      placeholder="Latitude"
-                      [appearance]="appearance"
-                      [mobile]="mobile"
-                    >
-                      <mat-icon matPrefix>room</mat-icon>
-                      <button type="button" mat-icon-button matSuffix (click)="geoPosition($event)">
-                        <mat-icon>gps_fixed</mat-icon>
-                      </button>
-                    </mat-latlong-field>
-                  </ion-col>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="longitude"
-                      type="longitude"
-                      latLongPattern="DDMM"
-                      defaultSign="+"
-                      placeholder="Longitude"
-                      [appearance]="appearance"
-                      [mobile]="mobile"
-                    >
-                      <mat-icon matPrefix>room</mat-icon>
-                      <button type="button" mat-icon-button matSuffix (click)="geoPosition($event)">
-                        <mat-icon>gps_fixed</mat-icon>
-                      </button>
-                    </mat-latlong-field>
-                  </ion-col>
-                </ion-row>
-              </ion-grid>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <!-- DDMMSS Default sign -->
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Format DDMMSS, defaultSign '+'</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ stringify(formGroup.value) }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <ion-grid class="ion-no-padding">
-                <ion-row>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="latitude"
-                      type="latitude"
-                      latLongPattern="DDMMSS"
-                      defaultSign="+"
-                      placeholder="Latitude"
-                      [appearance]="appearance"
-                      [mobile]="mobile"
-                    >
-                      <mat-icon matPrefix>room</mat-icon>
-                      <button type="button" mat-icon-button matSuffix (click)="geoPosition($event)">
-                        <mat-icon>gps_fixed</mat-icon>
-                      </button>
-                    </mat-latlong-field>
-                  </ion-col>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="longitude"
-                      type="longitude"
-                      latLongPattern="DDMMSS"
-                      defaultSign="+"
-                      placeholder="Longitude"
-                      [appearance]="appearance"
-                      [mobile]="mobile"
-                    >
-                      <mat-icon matPrefix>room</mat-icon>
-                      <button type="button" mat-icon-button matSuffix (click)="geoPosition($event)">
-                        <mat-icon>gps_fixed</mat-icon>
-                      </button>
-                    </mat-latlong-field>
-                  </ion-col>
-                </ion-row>
-              </ion-grid>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-  </form>
-
-  <!-- Empty value -->
-  <form *ngIf="form | formGetGroup: 'emptyRequired' as formGroup" [formGroup]="formGroup">
-    <ion-grid>
-      <ion-row>
-        <ion-col>
-          <ion-text><h4>Empty, required (no defaults)</h4></ion-text>
-        </ion-col>
-      </ion-row>
-
-      <ion-row>
-        <!-- DD -->
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Format DD, required</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ stringify(formGroup.value) }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <ion-grid class="ion-no-padding">
-                <ion-row>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="latitude"
-                      type="latitude"
-                      latLongPattern="DD"
-                      placeholder="Latitude"
-                      [appearance]="appearance"
-                      [required]="true"
-                      [mobile]="mobile"
-                    >
-                      <mat-icon matPrefix>room</mat-icon>
-                      <button matSuffix mat-icon-button (click)="geoPosition($event)">
-                        <mat-icon>gps_fixed</mat-icon>
-                      </button>
-                    </mat-latlong-field>
-                  </ion-col>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="longitude"
-                      type="longitude"
-                      latLongPattern="DD"
-                      placeholder="Longitude"
-                      [appearance]="appearance"
-                      [required]="true"
-                      [mobile]="mobile"
-                    >
-                      <mat-icon matPrefix>room</mat-icon>
-                      <button type="button" mat-icon-button matSuffix (click)="geoPosition($event)">
-                        <mat-icon>gps_fixed</mat-icon>
-                      </button>
-                    </mat-latlong-field>
-                  </ion-col>
-                </ion-row>
-                <ion-row *ngIf="geoPositionMessage">
-                  <ion-col>{{ geoPositionMessage }}</ion-col>
-                </ion-row>
-              </ion-grid>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <!-- DDMM  -->
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Format DDMM, required</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ stringify(formGroup.value) }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <ion-grid class="ion-no-padding">
-                <ion-row>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="latitude"
-                      type="latitude"
-                      latLongPattern="DDMM"
-                      placeholder="Latitude"
-                      [appearance]="appearance"
-                      [required]="true"
-                      [mobile]="mobile"
-                    >
-                      <mat-icon matPrefix>room</mat-icon>
-                      <button type="button" mat-icon-button matSuffix (click)="geoPosition($event)">
-                        <mat-icon>gps_fixed</mat-icon>
-                      </button>
-                    </mat-latlong-field>
-                  </ion-col>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="longitude"
-                      type="longitude"
-                      latLongPattern="DDMM"
-                      placeholder="Longitude"
-                      [appearance]="appearance"
-                      [required]="true"
-                      [mobile]="mobile"
-                    >
-                      <mat-icon matPrefix>room</mat-icon>
-                      <button type="button" mat-icon-button matSuffix (click)="geoPosition($event)">
-                        <mat-icon>gps_fixed</mat-icon>
-                      </button>
-                    </mat-latlong-field>
-                  </ion-col>
-                </ion-row>
-              </ion-grid>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-  </form>
-  <form *ngIf="form | formGetGroup: 'notRequired' as formGroup" [formGroup]="formGroup">
-    <ion-grid>
-      <!-- With value -->
-      <ion-row>
-        <ion-col>
-          <ion-text><h4>Empty, not required</h4></ion-text>
-        </ion-col>
-      </ion-row>
-      <ion-row>
-        <!-- DD -->
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Format DD, not required</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ stringify(formGroup.value) }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <ion-grid class="ion-no-padding">
-                <ion-row>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="latitude"
-                      type="latitude"
-                      latLongPattern="DD"
-                      placeholder="Latitude"
-                      [appearance]="appearance"
-                      [required]="false"
-                      [mobile]="mobile"
-                    >
-                      <mat-icon matPrefix>room</mat-icon>
-                      <button matSuffix mat-icon-button (click)="geoPosition($event)">
-                        <mat-icon>gps_fixed</mat-icon>
-                      </button>
-                    </mat-latlong-field>
-                  </ion-col>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="longitude"
-                      type="longitude"
-                      latLongPattern="DD"
-                      placeholder="Longitude"
-                      [appearance]="appearance"
-                      [required]="false"
-                      [mobile]="mobile"
-                    >
-                      <mat-icon matPrefix>room</mat-icon>
-                      <button type="button" mat-icon-button matSuffix (click)="geoPosition($event)">
-                        <mat-icon>gps_fixed</mat-icon>
-                      </button>
-                    </mat-latlong-field>
-                  </ion-col>
-                </ion-row>
-                <ion-row *ngIf="geoPositionMessage">
-                  <ion-col>{{ geoPositionMessage }}</ion-col>
-                </ion-row>
-              </ion-grid>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <!-- DDMM -->
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Format DDMM, not required</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ stringify(formGroup.value) }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <ion-grid class="ion-no-padding">
-                <ion-row>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="latitude"
-                      type="latitude"
-                      latLongPattern="DDMM"
-                      placeholder="Latitude"
-                      [appearance]="appearance"
-                      [required]="false"
-                      [mobile]="mobile"
-                    >
-                      <mat-icon matPrefix>room</mat-icon>
-                      <button matSuffix mat-icon-button (click)="geoPosition($event)">
-                        <mat-icon>gps_fixed</mat-icon>
-                      </button>
-                    </mat-latlong-field>
-                  </ion-col>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="longitude"
-                      type="longitude"
-                      latLongPattern="DDMM"
-                      placeholder="Longitude"
-                      [appearance]="appearance"
-                      [required]="false"
-                      [mobile]="mobile"
-                    >
-                      <mat-icon matPrefix>room</mat-icon>
-                      <button type="button" mat-icon-button matSuffix (click)="geoPosition($event)">
-                        <mat-icon>gps_fixed</mat-icon>
-                      </button>
-                    </mat-latlong-field>
-                  </ion-col>
-                </ion-row>
-                <ion-row *ngIf="geoPositionMessage">
-                  <ion-col>{{ geoPositionMessage }}</ion-col>
-                </ion-row>
-              </ion-grid>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-  </form>
-  <form *ngIf="form | formGetGroup: 'enable' as formGroup" [formGroup]="formGroup">
-    <ion-grid>
-      <!-- With value -->
-      <ion-row>
-        <ion-col>
-          <ion-text><h4>With value</h4></ion-text>
-        </ion-col>
-      </ion-row>
-
-      <ion-row>
-        <!-- DD -->
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Format DD</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ stringify(formGroup.value) }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <ion-grid class="ion-no-padding">
-                <ion-row>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="latitude"
-                      type="latitude"
-                      latLongPattern="DD"
-                      placeholder="Latitude"
-                      [appearance]="appearance"
-                      [mobile]="mobile"
-                    ></mat-latlong-field>
-                  </ion-col>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="longitude"
-                      type="longitude"
-                      latLongPattern="DD"
-                      placeholder="Longitude"
-                      [appearance]="appearance"
-                      [mobile]="mobile"
-                    ></mat-latlong-field>
-                  </ion-col>
-                </ion-row>
-              </ion-grid>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <!-- DDMMSS -->
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Format DDMM</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ stringify(formGroup.value) }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <ion-grid class="ion-no-padding">
-                <ion-row>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="latitude"
-                      type="latitude"
-                      latLongPattern="DDMM"
-                      placeholder="Latitude"
-                      [appearance]="appearance"
-                      [mobile]="mobile"
-                    ></mat-latlong-field>
-                  </ion-col>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="longitude"
-                      type="longitude"
-                      latLongPattern="DDMM"
-                      placeholder="Longitude"
-                      [appearance]="appearance"
-                      [mobile]="mobile"
-                    ></mat-latlong-field>
-                  </ion-col>
-                </ion-row>
-              </ion-grid>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <!-- DDMMSS -->
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Format DDMMSS</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ stringify(formGroup.value) }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <ion-grid class="ion-no-padding">
-                <ion-row>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="latitude"
-                      type="latitude"
-                      latLongPattern="DDMMSS"
-                      placeholder="Latitude"
-                      [appearance]="appearance"
-                      [mobile]="mobile"
-                    ></mat-latlong-field>
-                  </ion-col>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="longitude"
-                      type="longitude"
-                      latLongPattern="DDMMSS"
-                      placeholder="Longitude"
-                      [appearance]="appearance"
-                      [mobile]="mobile"
-                    ></mat-latlong-field>
-                  </ion-col>
-                </ion-row>
-              </ion-grid>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-  </form>
-
-  <!-- Disable  -->
-  <form *ngIf="form | formGetGroup: 'disable' as formGroup" [formGroup]="formGroup">
-    <ion-grid>
-      <ion-row>
-        <ion-col>
-          <ion-text><h4>Disabled control</h4></ion-text>
-        </ion-col>
-      </ion-row>
-      <ion-row>
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Disabled control</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ stringify(formGroup.value) }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <ion-grid class="ion-no-padding">
-                <ion-row>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="latitude"
-                      type="latitude"
-                      latLongPattern="DDMM"
-                      placeholder="Latitude"
-                      [appearance]="appearance"
-                      [required]="false"
-                      [mobile]="mobile"
-                    >
-                      <mat-icon matPrefix>room</mat-icon>
-                      <mat-icon matSuffix>gps_fixed</mat-icon>
-                    </mat-latlong-field>
-                  </ion-col>
-                  <ion-col>
-                    <mat-latlong-field
-                      formControlName="longitude"
-                      type="longitude"
-                      latLongPattern="DDMM"
-                      placeholder="Longitude"
-                      [appearance]="appearance"
-                      [mobile]="mobile"
-                    >
-                      <mat-icon matPrefix>room</mat-icon>
-                      <button type="button" mat-icon-button matSuffix (click)="geoPosition($event)">
-                        <mat-icon>gps_fixed</mat-icon>
-                      </button>
-                    </mat-latlong-field>
-                  </ion-col>
-                </ion-row>
-              </ion-grid>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Readonly (control is enable)</ion-label>
-              </ion-card-title>
-            </ion-card-header>
-            <ion-card-content>
-              <mat-checkbox
-                (change)="readonlyField.readonly = $event.checked"
-                [checked]="readonlyField.readonly"
-              ></mat-checkbox>
-
-              <ion-grid class="ion-no-padding">
-                <ion-row>
-                  <ion-col>
-                    <mat-latlong-field
-                      #readonlyField
-                      [formControl]="form | formGetControl: 'enable.latitude'"
-                      type="latitude"
-                      latLongPattern="DDMM"
-                      placeholder="Latitude"
-                      [readonly]="true"
-                      [appearance]="appearance"
-                      [mobile]="mobile"
-                    >
-                      <mat-icon matPrefix>room</mat-icon>
-                      <mat-icon matSuffix>gps_fixed</mat-icon>
-                    </mat-latlong-field>
-                  </ion-col>
-                </ion-row>
-              </ion-grid>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">With hint</ion-label>
-              </ion-card-title>
-            </ion-card-header>
-            <ion-card-content>
-              <mat-latlong-field
-                #readonlyField
-                [formControl]="form | formGetControl: 'enable.latitude'"
-                type="latitude"
-                latLongPattern="DDMM"
-                placeholder="Latitude"
-                [appearance]="appearance"
-                [mobile]="mobile"
-              >
-                <mat-hint align="end">This is a long long hint</mat-hint>
-              </mat-latlong-field>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-  </form>
-</ng-template>
-
-<ng-template #newComponent let-formGroupName="formGroup" let-pattern="latLongPattern" let-required="required">
-  <form *ngIf="form | formGetGroup: formGroupName as formGroup" [formGroup]="formGroup">
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title>
-          <ion-label color="primary">{{ formGroupName }}</ion-label>
-        </ion-card-title>
-        <ion-card-subtitle>
-          <ion-grid class="ion-no-padding">
-            <ion-row class="ion-no-padding">
-              <ion-col class="ion-no-padding">
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ formGroup.value | json }}</pre>
-                    <pre>invalid ? : {{ (formGroup | formGetControl: 'latitude').invalid }}</pre>
-                    <pre>touched ? : {{ (formGroup | formGetControl: 'latitude').touched }}</pre>
-                    <pre>errors : {{ formGroup | formGetGroup: 'latitude' | formError }}</pre>
-                  </small>
-                </ion-text>
-              </ion-col>
-            </ion-row>
-            <ion-row class="ion-no-padding">
-              <ion-col class="ion-no-padding" sizeLg="6">
-                <mat-latlong-field
-                  formControlName="latitude"
-                  type="latitude"
-                  [readonly]="true"
-                  [latLongPattern]="pattern"
-                  defaultSign="-"
-                  placeholder="Latitude"
-                  [appearance]="appearance"
-                ></mat-latlong-field>
-              </ion-col>
-              <ion-col sizeLg="6">
-                <mat-latlong-field
-                  formControlName="longitude"
-                  type="longitude"
-                  [readonly]="true"
-                  [latLongPattern]="pattern"
-                  defaultSign="-"
-                  placeholder="Longitude"
-                  [appearance]="appearance"
-                ></mat-latlong-field>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-        </ion-card-subtitle>
-      </ion-card-header>
-      <ion-card-content>
-        <ion-grid class="ion-no-padding">
-          <ion-row>
-            <ion-col class="ion-no-padding" sizeLg="6">
-              <mat-latlong-field
-                formControlName="latitude"
-                type="latitude"
-                [latLongPattern]="pattern"
-                defaultSign="-"
-                placeholder="Latitude"
-                [appearance]="appearance"
-                [required]="required"
-              >
-                <mat-icon matPrefix>room</mat-icon>
-                <button matSuffix mat-icon-button (click)="geoPosition($event)">
-                  <mat-icon>gps_fixed</mat-icon>
-                </button>
-              </mat-latlong-field>
-            </ion-col>
-            <ion-col class="ion-no-padding" sizeLg="6">
-              <mat-latlong-field
-                formControlName="longitude"
-                type="longitude"
-                [latLongPattern]="pattern"
-                defaultSign="-"
-                placeholder="Longitude"
-                [appearance]="appearance"
-                [required]="required"
-              >
-                <mat-icon matPrefix>room</mat-icon>
-                <button matSuffix mat-icon-button (click)="geoPosition($event)">
-                  <mat-icon>gps_fixed</mat-icon>
-                </button>
-              </mat-latlong-field>
-            </ion-col>
-          </ion-row>
-          <ion-row *ngIf="geoPositionMessage">
-            <ion-col>{{ geoPositionMessage }}</ion-col>
-          </ion-row>
-        </ion-grid>
-      </ion-card-content>
-    </ion-card>
-  </form>
-</ng-template>