@sumaris-net/ngx-components 18.2.28-alpha4 → 18.2.28-alpha5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/esm2022/src/app/core/table/testing/table.testing.mjs +1 -1
  2. package/esm2022/src/app/shared/material/latlong/material.latlong2.mjs +9 -5
  3. package/esm2022/src/app/shared/material/latlong/testing/latlong.test.mjs +1 -1
  4. package/fesm2022/sumaris-net.ngx-components.mjs +9 -5
  5. package/fesm2022/sumaris-net.ngx-components.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/src/app/shared/inputs.d.ts +1 -1
  8. package/src/app/shared/material/latlong/material.latlong2.d.ts +2 -1
  9. package/src/theme/_material.scss +2 -2
package/esm2022/src/app/shared/material/latlong/testing/latlong.test.mjs CHANGED
@@ -120,7 +120,7 @@ export class LatLongTestPage {
120
120
  }
121
121
  stringify = JSON.stringify;
122
122
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: LatLongTestPage, deps: [{ token: i1.UntypedFormBuilder }, { token: i2.PlatformService }], target: i0.ɵɵFactoryTarget.Component });
123
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", 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: i4.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i4.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i4.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i4.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i4.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i4.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i4.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: i4.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i4.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i4.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i4.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i4.IonRow, selector: "ion-row" }, { kind: "component", type: i4.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i4.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i4.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i4.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6.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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i9.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: i10.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i11.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i11.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i12.MatLatLongField2, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "maxDecimals", "required", "floatLabel", "placeholder", "defaultSign", "autofocus", "mobile", "degreesSymbolUnit", "minutesSymbolUnit", "secondsSymbolUnit", "clearable", "tabindex", "appearance", "readonly", "subscriptSizing"], outputs: ["keyup.enter", "blur", "focus"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: i13.FormErrorPipe, name: "formError" }, { kind: "pipe", type: i13.FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: i13.FormGetGroupPipe, name: "formGetGroup" }] });
123
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", 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: i4.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i4.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i4.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i4.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i4.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i4.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i4.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: i4.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i4.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i4.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i4.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i4.IonRow, selector: "ion-row" }, { kind: "component", type: i4.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i4.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i4.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i4.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6.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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i9.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: i10.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i11.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i11.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i12.MatLatLongField2, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "maxDecimals", "required", "floatLabel", "placeholder", "defaultSign", "autofocus", "mobile", "degreesSymbolUnit", "minutesSymbolUnit", "secondsSymbolUnit", "clearable", "class", "tabindex", "appearance", "readonly", "subscriptSizing"], outputs: ["keyup.enter", "blur", "focus"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: i13.FormErrorPipe, name: "formError" }, { kind: "pipe", type: i13.FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: i13.FormGetGroupPipe, name: "formGetGroup" }] });
124
124
  }
125
125
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: LatLongTestPage, decorators: [{
126
126
  type: Component,