@sumaris-net/ngx-components 18.23.55 → 18.23.57

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

@@ -13589,16 +13589,8 @@ class MatLatLongFieldInput {
         return null;
     }
     set value(value) {
-        const result = this.computeLatLongFormGroupValue(value);
-        // DEBUG
-        //console.debug(`${this.logPrefix} Setting value`, value, result);
-        this.formGroup.setValue({
-            degrees: result.degrees?.toString() || null,
-            minutes: result.minutes?.toString() || null,
-            seconds: result.seconds?.toString() || null,
-            sign: result.sign,
-        });
-        this.stateChanges.next();
+        this._value = value;
+        this.updateFormGroup(value);
     }
     get errorState() {
         return this.formGroup.invalid && this.touched;
@@ -13616,9 +13608,16 @@ class MatLatLongFieldInput {
         return this._defaultSign;
     }
     type;
-    pattern;
+    set pattern(value) {
+        this.updatePattern(value);
+    }
+    get pattern() {
+        return this._pattern;
+    }
     maxDecimals;
     readonly = false;
+    _value;
+    _pattern;
     degreesSymbolUnit = '°';
     minutesSymbolUnit = "'";
     secondsSymbolUnit = '"';
@@ -13645,11 +13644,40 @@ class MatLatLongFieldInput {
     }
     ngOnInit() {
         this.type = this.type || 'latitude';
-        this.pattern = this.pattern || 'DDMM';
+        this.updatePattern(this.pattern ?? 'DDMM');
+        // Update validators (add required to controls)
+        this.updateValidators();
+        if (this.readonly) {
+            this._subscription.add(this.ngControl.valueChanges.subscribe(() => this.cd.markForCheck()));
+        }
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+        this._subscription.unsubscribe();
+    }
+    onFocusIn(event) {
+        if (!this.focused) {
+            this.focused = true;
+            this.stateChanges.next();
+        }
+    }
+    onFocusOut(event) {
+        if (!this._elementRef.nativeElement.contains(event.relatedTarget)) {
+            this.touched = true;
+            this.focused = false;
+            this.onTouched();
+            this.stateChanges.next();
+        }
+    }
+    updatePattern(pattern) {
+        const mustUpdateFormGroup = this._pattern !== pattern;
+        this._pattern = pattern;
         this.showSign = this.pattern !== 'DD';
         switch (this.pattern) {
             case 'DD':
                 this.lastInputMaxDecimals = 7;
+                this.showMinutes = false;
+                this.showSeconds = false;
                 this.degreesPlaceholder = this.type === 'latitude' ? 'COMMON.LAT_LONG.DD_DDDDDDD_PLACEHOLDER' : 'COMMON.LAT_LONG.DDD_DDDDDDD_PLACEHOLDER';
                 this.degreesMask = maskitoNumberOptionsGenerator({
                     precision: this.lastInputMaxDecimals,
@@ -13661,6 +13689,7 @@ class MatLatLongFieldInput {
             case 'DDMM':
                 this.lastInputMaxDecimals = 3;
                 this.showMinutes = true;
+                this.showSeconds = false;
                 this.degreesPlaceholder = this.type === 'latitude' ? 'COMMON.LAT_LONG.DD_PLACEHOLDER' : 'COMMON.LAT_LONG.DDD_PLACEHOLDER';
                 this.minutesPlaceholder = 'COMMON.LAT_LONG.MM_MMM_PLACEHOLDER';
                 this.degreesMask = maskitoNumberOptionsGenerator({
@@ -13698,29 +13727,22 @@ class MatLatLongFieldInput {
                 });
                 break;
         }
-        // Update validators (add required to controls)
-        this.updateValidators();
-        if (this.readonly) {
-            this._subscription.add(this.ngControl.valueChanges.subscribe(() => this.cd.markForCheck()));
-        }
-    }
-    ngOnDestroy() {
-        this.stateChanges.complete();
-        this._subscription.unsubscribe();
-    }
-    onFocusIn(event) {
-        if (!this.focused) {
-            this.focused = true;
-            this.stateChanges.next();
+        this.cd.detectChanges();
+        if (mustUpdateFormGroup) {
+            this.updateFormGroup(this._value);
         }
     }
-    onFocusOut(event) {
-        if (!this._elementRef.nativeElement.contains(event.relatedTarget)) {
-            this.touched = true;
-            this.focused = false;
-            this.onTouched();
-            this.stateChanges.next();
-        }
+    updateFormGroup(value) {
+        const result = this.computeLatLongFormGroupValue(value);
+        // DEBUG
+        //console.debug(`${this.logPrefix} Setting value`, value, result);
+        this.formGroup.setValue({
+            degrees: result.degrees?.toString() || null,
+            minutes: result.minutes?.toString() || null,
+            seconds: result.seconds?.toString() || null,
+            sign: result.sign,
+        });
+        this.stateChanges.next();
     }
     handleInput(controlName, nextControlName) {
         // Can autofocus next control ?
@@ -13751,7 +13773,9 @@ class MatLatLongFieldInput {
         if (focusNext) {
             this.autoFocusNext(controlName, nextControlName);
         }
-        this.onChange(this.value);
+        // Update value
+        this._value = this.value;
+        this.onChange(this._value);
     }
     autoFocusNext(controlName, nextControlName) {
         if (!this.formGroup.controls[controlName].errors && nextControlName) {
@@ -28895,7 +28919,7 @@ class ResizableDirective {
         // La largeur minimale est la largeur du conteneur moins les autres colonnes
         // avec un minimum absolu défini par minWidth
         const calculatedMinWidth = containerWidth - otherColumnsWidth;
-        return Math.max(calculatedMinWidth, this.minWidth);
+        return Math.min(calculatedMinWidth, this.minWidth);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ResizableDirective, deps: [{ token: DOCUMENT }, { token: ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ResizableDirective, selector: "[resizable]", inputs: { minWidth: "minWidth" }, outputs: { resizable: "resizable", fit: "fit" }, ngImport: i0 });
@@ -49448,11 +49472,11 @@ class LatLongTestPage {
     }
     stringify = JSON.stringify;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LatLongTestPage, deps: [{ token: i1$3.UntypedFormBuilder }, { token: PlatformService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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            <ion-button [disabled]=\"testUpdateDefaultSign === '-'\" (click)=\"testUpdateDefaultSign = '-'\">\n              Set default sign to \"-\"\n            </ion-button>\n          </ion-col>\n          <ion-col>\n            <ion-button [disabled]=\"testUpdateDefaultSign === '+'\" (click)=\"testUpdateDefaultSign = '+'\">\n              Set default sign to \"+\"\n            </ion-button>\n          </ion-col>\n        </ion-row>\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: {\n                      formGroup: 'empty',\n                      latLongPattern: 'DDMM',\n                      required: false,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                  jjj\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'enable',\n                      latLongPattern: 'DDMM',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\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: {\n                      formGroup: 'empty',\n                      latLongPattern: 'DDMMSS',\n                      required: false,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'enable',\n                      latLongPattern: 'DDMMSS',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'disable',\n                      latLongPattern: 'DDMMSS',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\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: {\n                      formGroup: 'empty',\n                      latLongPattern: 'DD',\n                      required: false,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'enable',\n                      latLongPattern: 'DD',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'disable',\n                      latLongPattern: 'DD',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n        }\n      </ion-grid>\n\n      <ion-grid></ion-grid>\n    } @else {\n      <!-- Temporay TAB (for DEV) -->\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Required</ion-label>\n            </ion-card-title>\n            <ion-card-subtitle>\n              <ion-text color=\"medium\">\n                <small>\n                  <pre>formGroup.value: {{ formGroup.value | json }}</pre>\n                </small>\n              </ion-text>\n            </ion-card-subtitle>\n          </ion-card-header>\n          <ion-card-content>\n            <ion-grid class=\"ion-no-padding\">\n              <ion-row>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"latitude\"\n                    type=\"latitude\"\n                    latLongPattern=\"DDMMSS\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                    [required]=\"true\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"longitude\"\n                    type=\"longitude\"\n                    latLongPattern=\"DDMMSS\"\n                    placeholder=\"Longitude\"\n                    [appearance]=\"appearance\"\n                    [required]=\"true\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n              </ion-row>\n              <ion-row *ngIf=\"geoPositionMessage\">\n                <ion-col>{{ geoPositionMessage }}</ion-col>\n              </ion-row>\n            </ion-grid>\n          </ion-card-content>\n        </ion-card>\n      </form>\n    }\n  </form>\n</ion-content>\n\n<ng-template #mainTest let-mobile=\"mobile\">\n  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, with defaults</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      defaultSign=\"-\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      defaultSign=\"-\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, defaultSign '+'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS, defaultSign '+'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'emptyRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, required (no defaults)</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n  <form *ngIf=\"form | formGetGroup: 'notRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <!-- With value -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, not required</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, not required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, not required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n  <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <!-- With value -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>With value</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMMSS\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMMSS\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n  <!-- Disable  -->\n  <form *ngIf=\"form | formGetGroup: 'disable' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Disabled control</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled control</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Readonly (control is enable)</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox\n                (change)=\"readonlyField.readonly = $event.checked\"\n                [checked]=\"readonlyField.readonly\"\n              ></mat-checkbox>\n\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      #readonlyField\n                      [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [readonly]=\"true\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">With hint</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-latlong-field\n                #readonlyField\n                [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                type=\"latitude\"\n                latLongPattern=\"DDMM\"\n                placeholder=\"Latitude\"\n                [appearance]=\"appearance\"\n                [mobile]=\"mobile\"\n              >\n                <mat-hint align=\"end\">This is a long long hint</mat-hint>\n              </mat-latlong-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ng-template>\n\n<ng-template\n  #newComponent\n  let-formGroupName=\"formGroup\"\n  let-pattern=\"latLongPattern\"\n  let-required=\"required\"\n  let-defaultSign=\"defaultSign\"\n>\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                    <pre>defaultSign : {{ defaultSign }}</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]=\"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]=\"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]=\"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]=\"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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i8.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatLatLongField, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "maxDecimals", "required", "floatLabel", "placeholder", "defaultSign", "autofocus", "mobile", "clearable", "class", "tabindex", "appearance", "readonly", "subscriptSizing"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: FormErrorPipe, name: "formError" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetGroupPipe, name: "formGetGroup" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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            <ion-button [disabled]=\"testUpdateDefaultSign === '-'\" (click)=\"testUpdateDefaultSign = '-'\">\n              Set default sign to \"-\"\n            </ion-button>\n          </ion-col>\n          <ion-col>\n            <ion-button [disabled]=\"testUpdateDefaultSign === '+'\" (click)=\"testUpdateDefaultSign = '+'\">\n              Set default sign to \"+\"\n            </ion-button>\n          </ion-col>\n        </ion-row>\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        <ion-row>\n          <!-- DDMMSS -->\n          <ion-col>\n            <ng-container\n              *ngTemplateOutlet=\"\n                newComponent;\n                context: {\n                  formGroup: 'empty',\n                  latLongPattern: selectedFormat,\n                  required: false,\n                  defaultSign: testUpdateDefaultSign,\n                }\n              \"\n            ></ng-container>\n          </ion-col>\n          <ion-col>\n            <ng-container\n              *ngTemplateOutlet=\"\n                newComponent;\n                context: {\n                  formGroup: 'enable',\n                  latLongPattern: selectedFormat,\n                  required: true,\n                  defaultSign: testUpdateDefaultSign,\n                }\n              \"\n            ></ng-container>\n          </ion-col>\n          <ion-col>\n            <ng-container\n              *ngTemplateOutlet=\"\n                newComponent;\n                context: {\n                  formGroup: 'disable',\n                  latLongPattern: selectedFormat,\n                  required: true,\n                  defaultSign: testUpdateDefaultSign,\n                }\n              \"\n            ></ng-container>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n\n      <ion-grid></ion-grid>\n    } @else {\n      <!-- Temporay TAB (for DEV) -->\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Required</ion-label>\n            </ion-card-title>\n            <ion-card-subtitle>\n              <ion-text color=\"medium\">\n                <small>\n                  <pre>formGroup.value: {{ formGroup.value | json }}</pre>\n                </small>\n              </ion-text>\n            </ion-card-subtitle>\n          </ion-card-header>\n          <ion-card-content>\n            <ion-grid class=\"ion-no-padding\">\n              <ion-row>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"latitude\"\n                    type=\"latitude\"\n                    latLongPattern=\"DDMMSS\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                    [required]=\"true\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"longitude\"\n                    type=\"longitude\"\n                    latLongPattern=\"DDMMSS\"\n                    placeholder=\"Longitude\"\n                    [appearance]=\"appearance\"\n                    [required]=\"true\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n              </ion-row>\n              <ion-row *ngIf=\"geoPositionMessage\">\n                <ion-col>{{ geoPositionMessage }}</ion-col>\n              </ion-row>\n            </ion-grid>\n          </ion-card-content>\n        </ion-card>\n      </form>\n    }\n  </form>\n</ion-content>\n\n<ng-template #mainTest let-mobile=\"mobile\">\n  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, with defaults</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      defaultSign=\"-\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      defaultSign=\"-\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, defaultSign '+'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS, defaultSign '+'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'emptyRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, required (no defaults)</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n  <form *ngIf=\"form | formGetGroup: 'notRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <!-- With value -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, not required</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, not required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, not required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n  <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <!-- With value -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>With value</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMMSS\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMMSS\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n  <!-- Disable  -->\n  <form *ngIf=\"form | formGetGroup: 'disable' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Disabled control</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled control</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Readonly (control is enable)</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox\n                (change)=\"readonlyField.readonly = $event.checked\"\n                [checked]=\"readonlyField.readonly\"\n              ></mat-checkbox>\n\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      #readonlyField\n                      [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [readonly]=\"true\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">With hint</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-latlong-field\n                #readonlyField\n                [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                type=\"latitude\"\n                latLongPattern=\"DDMM\"\n                placeholder=\"Latitude\"\n                [appearance]=\"appearance\"\n                [mobile]=\"mobile\"\n              >\n                <mat-hint align=\"end\">This is a long long hint</mat-hint>\n              </mat-latlong-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ng-template>\n\n<ng-template\n  #newComponent\n  let-formGroupName=\"formGroup\"\n  let-pattern=\"latLongPattern\"\n  let-required=\"required\"\n  let-defaultSign=\"defaultSign\"\n>\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                    <pre>defaultSign : {{ defaultSign }}</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]=\"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]=\"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]=\"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]=\"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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i8.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatLatLongField, selector: "mat-latlong-field", inputs: ["formControl", "formControlName", "type", "latLongPattern", "maxDecimals", "required", "floatLabel", "placeholder", "defaultSign", "autofocus", "mobile", "clearable", "class", "tabindex", "appearance", "readonly", "subscriptSizing"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: FormErrorPipe, name: "formError" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetGroupPipe, name: "formGetGroup" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LatLongTestPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-latlong-test', template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Lat/Long field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'dev'\" (click)=\"toggleMode('dev')\">\n      <mat-label>Dev</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'mobile') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: true }\"></ng-container>\n    } @else if (mode === 'desktop') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: false }\"></ng-container>\n    } @else if (mode === 'dev') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-button [disabled]=\"testUpdateDefaultSign === '-'\" (click)=\"testUpdateDefaultSign = '-'\">\n              Set default sign to \"-\"\n            </ion-button>\n          </ion-col>\n          <ion-col>\n            <ion-button [disabled]=\"testUpdateDefaultSign === '+'\" (click)=\"testUpdateDefaultSign = '+'\">\n              Set default sign to \"+\"\n            </ion-button>\n          </ion-col>\n        </ion-row>\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: {\n                      formGroup: 'empty',\n                      latLongPattern: 'DDMM',\n                      required: false,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                  jjj\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'enable',\n                      latLongPattern: 'DDMM',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\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: {\n                      formGroup: 'empty',\n                      latLongPattern: 'DDMMSS',\n                      required: false,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'enable',\n                      latLongPattern: 'DDMMSS',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'disable',\n                      latLongPattern: 'DDMMSS',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\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: {\n                      formGroup: 'empty',\n                      latLongPattern: 'DD',\n                      required: false,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'enable',\n                      latLongPattern: 'DD',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n              <ion-col>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    newComponent;\n                    context: {\n                      formGroup: 'disable',\n                      latLongPattern: 'DD',\n                      required: true,\n                      defaultSign: testUpdateDefaultSign,\n                    }\n                  \"\n                ></ng-container>\n              </ion-col>\n            </ion-row>\n          }\n        }\n      </ion-grid>\n\n      <ion-grid></ion-grid>\n    } @else {\n      <!-- Temporay TAB (for DEV) -->\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Required</ion-label>\n            </ion-card-title>\n            <ion-card-subtitle>\n              <ion-text color=\"medium\">\n                <small>\n                  <pre>formGroup.value: {{ formGroup.value | json }}</pre>\n                </small>\n              </ion-text>\n            </ion-card-subtitle>\n          </ion-card-header>\n          <ion-card-content>\n            <ion-grid class=\"ion-no-padding\">\n              <ion-row>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"latitude\"\n                    type=\"latitude\"\n                    latLongPattern=\"DDMMSS\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                    [required]=\"true\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"longitude\"\n                    type=\"longitude\"\n                    latLongPattern=\"DDMMSS\"\n                    placeholder=\"Longitude\"\n                    [appearance]=\"appearance\"\n                    [required]=\"true\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n              </ion-row>\n              <ion-row *ngIf=\"geoPositionMessage\">\n                <ion-col>{{ geoPositionMessage }}</ion-col>\n              </ion-row>\n            </ion-grid>\n          </ion-card-content>\n        </ion-card>\n      </form>\n    }\n  </form>\n</ion-content>\n\n<ng-template #mainTest let-mobile=\"mobile\">\n  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, with defaults</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      defaultSign=\"-\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      defaultSign=\"-\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, defaultSign '+'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS, defaultSign '+'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'emptyRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, required (no defaults)</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n  <form *ngIf=\"form | formGetGroup: 'notRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <!-- With value -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, not required</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, not required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, not required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n  <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <!-- With value -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>With value</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMMSS\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMMSS\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n  <!-- Disable  -->\n  <form *ngIf=\"form | formGetGroup: 'disable' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Disabled control</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled control</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Readonly (control is enable)</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox\n                (change)=\"readonlyField.readonly = $event.checked\"\n                [checked]=\"readonlyField.readonly\"\n              ></mat-checkbox>\n\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      #readonlyField\n                      [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [readonly]=\"true\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">With hint</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-latlong-field\n                #readonlyField\n                [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                type=\"latitude\"\n                latLongPattern=\"DDMM\"\n                placeholder=\"Latitude\"\n                [appearance]=\"appearance\"\n                [mobile]=\"mobile\"\n              >\n                <mat-hint align=\"end\">This is a long long hint</mat-hint>\n              </mat-latlong-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ng-template>\n\n<ng-template\n  #newComponent\n  let-formGroupName=\"formGroup\"\n  let-pattern=\"latLongPattern\"\n  let-required=\"required\"\n  let-defaultSign=\"defaultSign\"\n>\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                    <pre>defaultSign : {{ defaultSign }}</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]=\"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]=\"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]=\"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]=\"defaultSign\"\n                placeholder=\"Longitude\"\n                [appearance]=\"appearance\"\n                [required]=\"required\"\n              >\n                <mat-icon matPrefix>room</mat-icon>\n                <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                  <mat-icon>gps_fixed</mat-icon>\n                </button>\n              </mat-latlong-field>\n            </ion-col>\n          </ion-row>\n          <ion-row *ngIf=\"geoPositionMessage\">\n            <ion-col>{{ geoPositionMessage }}</ion-col>\n          </ion-row>\n        </ion-grid>\n      </ion-card-content>\n    </ion-card>\n  </form>\n</ng-template>\n" }]
+            args: [{ selector: 'app-latlong-test', template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Lat/Long field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'dev'\" (click)=\"toggleMode('dev')\">\n      <mat-label>Dev</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    @if (mode === 'mobile') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: true }\"></ng-container>\n    } @else if (mode === 'desktop') {\n      <ng-container *ngTemplateOutlet=\"mainTest; context: { mobile: false }\"></ng-container>\n    } @else if (mode === 'dev') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-button [disabled]=\"testUpdateDefaultSign === '-'\" (click)=\"testUpdateDefaultSign = '-'\">\n              Set default sign to \"-\"\n            </ion-button>\n          </ion-col>\n          <ion-col>\n            <ion-button [disabled]=\"testUpdateDefaultSign === '+'\" (click)=\"testUpdateDefaultSign = '+'\">\n              Set default sign to \"+\"\n            </ion-button>\n          </ion-col>\n        </ion-row>\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        <ion-row>\n          <!-- DDMMSS -->\n          <ion-col>\n            <ng-container\n              *ngTemplateOutlet=\"\n                newComponent;\n                context: {\n                  formGroup: 'empty',\n                  latLongPattern: selectedFormat,\n                  required: false,\n                  defaultSign: testUpdateDefaultSign,\n                }\n              \"\n            ></ng-container>\n          </ion-col>\n          <ion-col>\n            <ng-container\n              *ngTemplateOutlet=\"\n                newComponent;\n                context: {\n                  formGroup: 'enable',\n                  latLongPattern: selectedFormat,\n                  required: true,\n                  defaultSign: testUpdateDefaultSign,\n                }\n              \"\n            ></ng-container>\n          </ion-col>\n          <ion-col>\n            <ng-container\n              *ngTemplateOutlet=\"\n                newComponent;\n                context: {\n                  formGroup: 'disable',\n                  latLongPattern: selectedFormat,\n                  required: true,\n                  defaultSign: testUpdateDefaultSign,\n                }\n              \"\n            ></ng-container>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n\n      <ion-grid></ion-grid>\n    } @else {\n      <!-- Temporay TAB (for DEV) -->\n      <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n        <ion-card>\n          <ion-card-header>\n            <ion-card-title>\n              <ion-label color=\"primary\">Required</ion-label>\n            </ion-card-title>\n            <ion-card-subtitle>\n              <ion-text color=\"medium\">\n                <small>\n                  <pre>formGroup.value: {{ formGroup.value | json }}</pre>\n                </small>\n              </ion-text>\n            </ion-card-subtitle>\n          </ion-card-header>\n          <ion-card-content>\n            <ion-grid class=\"ion-no-padding\">\n              <ion-row>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"latitude\"\n                    type=\"latitude\"\n                    latLongPattern=\"DDMMSS\"\n                    placeholder=\"Latitude\"\n                    [appearance]=\"appearance\"\n                    [required]=\"true\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n                <ion-col>\n                  <mat-latlong-field\n                    formControlName=\"longitude\"\n                    type=\"longitude\"\n                    latLongPattern=\"DDMMSS\"\n                    placeholder=\"Longitude\"\n                    [appearance]=\"appearance\"\n                    [required]=\"true\"\n                    [clearable]=\"true\"\n                  >\n                    <mat-icon matPrefix>room</mat-icon>\n                    <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                      <mat-icon>gps_fixed</mat-icon>\n                    </button>\n                  </mat-latlong-field>\n                </ion-col>\n              </ion-row>\n              <ion-row *ngIf=\"geoPositionMessage\">\n                <ion-col>{{ geoPositionMessage }}</ion-col>\n              </ion-row>\n            </ion-grid>\n          </ion-card-content>\n        </ion-card>\n      </form>\n    }\n  </form>\n</ion-content>\n\n<ng-template #mainTest let-mobile=\"mobile\">\n  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'empty' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, with defaults</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, defaultSign '-'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      defaultSign=\"-\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      defaultSign=\"-\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, defaultSign '+'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS Default sign -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS, defaultSign '+'</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMMSS\"\n                      defaultSign=\"+\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n  <!-- Empty value -->\n  <form *ngIf=\"form | formGetGroup: 'emptyRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, required (no defaults)</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"true\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n  <form *ngIf=\"form | formGetGroup: 'notRequired' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <!-- With value -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Empty, not required</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD, not required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMM -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM, not required</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n                <ion-row *ngIf=\"geoPositionMessage\">\n                  <ion-col>{{ geoPositionMessage }}</ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n  <form *ngIf=\"form | formGetGroup: 'enable' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <!-- With value -->\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>With value</h4></ion-text>\n        </ion-col>\n      </ion-row>\n\n      <ion-row>\n        <!-- DD -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DD</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DD\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMM</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- DDMMSS -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Format DDMMSS</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMMSS\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMMSS\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    ></mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n  <!-- Disable  -->\n  <form *ngIf=\"form | formGetGroup: 'disable' as formGroup\" [formGroup]=\"formGroup\">\n    <ion-grid>\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Disabled control</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Disabled control</ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small>\n                    <pre>{{ stringify(formGroup.value) }}</pre>\n                  </small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"latitude\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [appearance]=\"appearance\"\n                      [required]=\"false\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\n                    </mat-latlong-field>\n                  </ion-col>\n                  <ion-col>\n                    <mat-latlong-field\n                      formControlName=\"longitude\"\n                      type=\"longitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Longitude\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <button type=\"button\" mat-icon-button matSuffix (click)=\"geoPosition($event)\">\n                        <mat-icon>gps_fixed</mat-icon>\n                      </button>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">Readonly (control is enable)</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox\n                (change)=\"readonlyField.readonly = $event.checked\"\n                [checked]=\"readonlyField.readonly\"\n              ></mat-checkbox>\n\n              <ion-grid class=\"ion-no-padding\">\n                <ion-row>\n                  <ion-col>\n                    <mat-latlong-field\n                      #readonlyField\n                      [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                      type=\"latitude\"\n                      latLongPattern=\"DDMM\"\n                      placeholder=\"Latitude\"\n                      [readonly]=\"true\"\n                      [appearance]=\"appearance\"\n                      [mobile]=\"mobile\"\n                    >\n                      <mat-icon matPrefix>room</mat-icon>\n                      <mat-icon matSuffix>gps_fixed</mat-icon>\n                    </mat-latlong-field>\n                  </ion-col>\n                </ion-row>\n              </ion-grid>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">With hint</ion-label>\n              </ion-card-title>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-latlong-field\n                #readonlyField\n                [formControl]=\"form | formGetControl: 'enable.latitude'\"\n                type=\"latitude\"\n                latLongPattern=\"DDMM\"\n                placeholder=\"Latitude\"\n                [appearance]=\"appearance\"\n                [mobile]=\"mobile\"\n              >\n                <mat-hint align=\"end\">This is a long long hint</mat-hint>\n              </mat-latlong-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ng-template>\n\n<ng-template\n  #newComponent\n  let-formGroupName=\"formGroup\"\n  let-pattern=\"latLongPattern\"\n  let-required=\"required\"\n  let-defaultSign=\"defaultSign\"\n>\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                    <pre>defaultSign : {{ defaultSign }}</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]=\"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]=\"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]=\"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]=\"defaultSign\"\n                placeholder=\"Longitude\"\n                [appearance]=\"appearance\"\n                [required]=\"required\"\n              >\n                <mat-icon matPrefix>room</mat-icon>\n                <button matSuffix mat-icon-button (click)=\"geoPosition($event)\">\n                  <mat-icon>gps_fixed</mat-icon>\n                </button>\n              </mat-latlong-field>\n            </ion-col>\n          </ion-row>\n          <ion-row *ngIf=\"geoPositionMessage\">\n            <ion-col>{{ geoPositionMessage }}</ion-col>\n          </ion-row>\n        </ion-grid>\n      </ion-card-content>\n    </ion-card>\n  </form>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1$3.UntypedFormBuilder }, { type: PlatformService }] });
 
 class SwipeTestPage {
@@ -51599,7 +51623,7 @@ class Table2TestPage extends AppAsyncTable {
                 provide: APP_CELL_SELECTION_SERVICE_TOKEN,
                 useClass: CellSelectionService,
             },
-        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table 2 (click to select)</ion-title>\n\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && !mobile\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        (click)=\"addRow()\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n        (click)=\"duplicateRow($event, selection.selected[0])\"\n      >\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\n  >\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        color=\"accent\"\n        *ngIf=\"filterPanelFloating\"\n        (click)=\"toggleFilterPanelFloating()\"\n        class=\"hidden-xs hidden-sm hidden-md\"\n        [title]=\"!showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\"\n      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\" style=\"position: relative\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n      [style.--mat-row-height]=\"rowHeight + 'px'\"\n      appCellSelection\n      [appSelectableColumns]=\"selectableColumns\"\n      [appCellSelectionDisabled]=\"invalid\"\n      (appCellSelectionChange)=\"onCellSelectionChange($event)\"\n      (appCellRightClick)=\"onCellRightClick($event)\"\n    >\n      <ng-container matColumnDef=\"select\" [sticky]=\"checkBoxSelection\" [class.mat-column-sticky]=\"checkBoxSelection\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox [checked]=\"selection | isSelected: row\" (click)=\"toggleSelectRow($event, row)\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span mat-sort-header>\n            <ion-label title=\"Id\">#</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'id' }\">\n          <mat-form-field *ngIf=\"!readOnly && row.id === -1 && row.editing; else readOnlyId\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              required\n              [formControl]=\"row.validator | formGetControl: 'id'\"\n              placeholder=\"Id\"\n              [appAutofocus]=\"true\"\n            />\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('alreadyExists')\" translate>\n              ERROR.FIELD_NOT_UNIQUE_ID\n            </mat-error>\n          </mat-form-field>\n\n          <ng-template #readOnlyId>\n            <ion-label appAutoTooltip>\n              {{ (row.validator | formGetValue: 'id') || (row.currentData | propertyGet: 'id') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label\n              [title]=\"!showTooltip ? ('TABLE.TESTING.NAME' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('TABLE.TESTING.NAME' | translate) : ''\"\n            >\n              {{ 'TABLE.TESTING.NAME' | translate }}\n            </ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          (click)=\"focusColumn = 'name'\"\n          [appCellId]=\"{ rowId: row.id, columnName: 'name' }\"\n        >\n          <mat-form-field *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              [required]=\"true\"\n              [formControl]=\"row.validator | formGetControl: 'name'\"\n              [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n              [appAutofocus]=\"row.id === -1 || focusColumn === 'name'\"\n            />\n            <ng-content select=\"[suffix]\"></ng-content>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('maxlength')\" translate>\n              ERROR.FIELD_MAX_LENGTH_COMPACT\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('minlength')\" translate>\n              ERROR.FIELD_MIN_LENGTH_COMPACT\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{ (row.validator | formGetValue: 'name') || (row.currentData | propertyGet: 'name') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <span mat-sort-header>\n            <ion-label>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'levelId' }\">\n          <mat-autocomplete-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            panelWidth=\"750px\"\n            [formControl]=\"row.validator | formGetControl: 'levelId'\"\n            [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n            floatLabel=\"never\"\n            [required]=\"true\"\n            [config]=\"autocompleteFields.level\"\n            [highlightAccent]=\"true\"\n          >\n            <mat-error matError *ngIf=\"(row.validator | formGetControl: 'levelId').hasError('invalid')\" translate>\n              ERROR.FIELD_INVALID\n            </mat-error>\n          </mat-autocomplete-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                autocompleteFields.level?.displayWith(\n                  (row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                ) ||\n                  ((row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                    | referentialToString)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'boolean' }\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'checkbox'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean') || formBuilder.control(row.currentData['boolean'])\n            \"\n            [compact]=\"true\"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                (row.validator | formGetValue: 'boolean') || (row.currentData | propertyGet: 'boolean')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean2\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 2</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'boolean2' }\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            [floatLabel]=\"'never'\"\n            [style]=\"'radio'\"\n            [showRadio]=\"true\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean3\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 3</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'button'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        [canCancel]=\"false\"\n        [style]=\"'table'\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n        (backward)=\"confirmAndBackward($event.event, $event.row)\"\n        (forward)=\"confirmAndForward($event.event, $event.row)\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-selected]=\"row.editing\"\n        [class.mat-row-error]=\"row.invalid\"\n        [class.mat-row-disabled]=\"!row.editing\"\n        [class.mat-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n      ></ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"errorSubject | async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$4.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "arrowUp", "arrowDown", "enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTooltipDirective, selector: "ion-label[appAutoTooltip], mat-label[appAutoTooltip]", inputs: ["appAutoTooltip"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "showPendingSpinner", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ResizableComponent, selector: "th[resizable]", inputs: ["resizable"], outputs: ["sizeChanged"] }, { kind: "directive", type: ResizableDirective, selector: "[resizable]", inputs: ["minWidth"], outputs: ["resizable", "fit"] }, { kind: "directive", type: CellIdentifierDirective, selector: "[appCellId]", inputs: ["appCellId"] }, { kind: "directive", type: CellSelectionDirective, selector: "[appCellSelection]", inputs: ["appSelectableColumns", "appCellSelectionDisabled"], outputs: ["appCellSelectionChange", "appCellRightClick"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsMultipleSelectionPipe, name: "isMultipleSelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table 2 (click to select)</ion-title>\n\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && !mobile\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        (click)=\"addRow()\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n        (click)=\"duplicateRow($event, selection.selected[0])\"\n      >\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\n  >\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        color=\"accent\"\n        *ngIf=\"filterPanelFloating\"\n        (click)=\"toggleFilterPanelFloating()\"\n        class=\"hidden-xs hidden-sm hidden-md\"\n        [title]=\"!showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\"\n      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\" style=\"position: relative\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n      [style.--mat-row-height]=\"rowHeight + 'px'\"\n      appCellSelection\n      [appSelectableColumns]=\"selectableColumns\"\n      [appCellSelectionDisabled]=\"invalid\"\n      (appCellSelectionChange)=\"onCellSelectionChange($event)\"\n      (appCellRightClick)=\"onCellRightClick($event)\"\n    >\n      <ng-container matColumnDef=\"select\" [sticky]=\"checkBoxSelection\" [class.mat-column-sticky]=\"checkBoxSelection\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox [checked]=\"selection | isSelected: row\" (click)=\"toggleSelectRow($event, row)\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span mat-sort-header>\n            <ion-label title=\"Id\">#</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'id' }\">\n          <mat-form-field *ngIf=\"!readOnly && row.id === -1 && row.editing; else readOnlyId\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              required\n              [formControl]=\"row.validator | formGetControl: 'id'\"\n              placeholder=\"Id\"\n              [appAutofocus]=\"true\"\n            />\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('alreadyExists')\" translate>\n              ERROR.FIELD_NOT_UNIQUE_ID\n            </mat-error>\n          </mat-form-field>\n\n          <ng-template #readOnlyId>\n            <ion-label appAutoTooltip>\n              {{ (row.validator | formGetValue: 'id') || (row.currentData | propertyGet: 'id') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label\n              [title]=\"!showTooltip ? ('TABLE.TESTING.NAME' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('TABLE.TESTING.NAME' | translate) : ''\"\n            >\n              {{ 'TABLE.TESTING.NAME' | translate }}\n            </ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          (click)=\"focusColumn = 'name'\"\n          [appCellId]=\"{ rowId: row.id, columnName: 'name' }\"\n        >\n          <mat-form-field *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              [required]=\"true\"\n              [formControl]=\"row.validator | formGetControl: 'name'\"\n              [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n              [appAutofocus]=\"row.id === -1 || focusColumn === 'name'\"\n            />\n            <ng-content select=\"[suffix]\"></ng-content>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('maxlength')\" translate>\n              ERROR.FIELD_MAX_LENGTH_COMPACT\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('minlength')\" translate>\n              ERROR.FIELD_MIN_LENGTH_COMPACT\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{ (row.validator | formGetValue: 'name') || (row.currentData | propertyGet: 'name') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <span mat-sort-header>\n            <ion-label>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'levelId' }\">\n          <mat-autocomplete-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            panelWidth=\"750px\"\n            [formControl]=\"row.validator | formGetControl: 'levelId'\"\n            [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n            floatLabel=\"never\"\n            [required]=\"true\"\n            [config]=\"autocompleteFields.level\"\n            [highlightAccent]=\"true\"\n          >\n            <mat-error matError *ngIf=\"(row.validator | formGetControl: 'levelId').hasError('invalid')\" translate>\n              ERROR.FIELD_INVALID\n            </mat-error>\n          </mat-autocomplete-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                autocompleteFields.level?.displayWith(\n                  (row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                ) ||\n                  ((row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                    | referentialToString)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'boolean' }\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'checkbox'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean') || formBuilder.control(row.currentData['boolean'])\n            \"\n            [compact]=\"true\"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                (row.validator | formGetValue: 'boolean') || (row.currentData | propertyGet: 'boolean')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean2\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 2</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'boolean2' }\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            [floatLabel]=\"'never'\"\n            [style]=\"'radio'\"\n            [showRadio]=\"true\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean3\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 3</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'button'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        [canCancel]=\"false\"\n        [style]=\"'table'\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n        (backward)=\"confirmAndBackward($event.event, $event.row)\"\n        (forward)=\"confirmAndForward($event.event, $event.row)\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-selected]=\"row.editing\"\n        [class.mat-row-error]=\"row.invalid\"\n        [class.mat-row-disabled]=\"!row.editing\"\n        [class.mat-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n      ></ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"errorSubject | async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table .mat-column-select{min-width:60px;width:60px}.table-container .mat-mdc-table .mat-column-id{width:90px;min-width:90px;max-width:90px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px;width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px;width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px;width:110px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$4.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "arrowUp", "arrowDown", "enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTooltipDirective, selector: "ion-label[appAutoTooltip], mat-label[appAutoTooltip]", inputs: ["appAutoTooltip"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "showPendingSpinner", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ResizableComponent, selector: "th[resizable]", inputs: ["resizable"], outputs: ["sizeChanged"] }, { kind: "directive", type: ResizableDirective, selector: "[resizable]", inputs: ["minWidth"], outputs: ["resizable", "fit"] }, { kind: "directive", type: CellIdentifierDirective, selector: "[appCellId]", inputs: ["appCellId"] }, { kind: "directive", type: CellSelectionDirective, selector: "[appCellSelection]", inputs: ["appSelectableColumns", "appCellSelectionDisabled"], outputs: ["appCellSelectionChange", "appCellRightClick"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsMultipleSelectionPipe, name: "isMultipleSelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Table2TestPage, decorators: [{
             type: Component,
@@ -51628,7 +51652,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             provide: APP_CELL_SELECTION_SERVICE_TOKEN,
                             useClass: CellSelectionService,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table 2 (click to select)</ion-title>\n\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && !mobile\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        (click)=\"addRow()\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n        (click)=\"duplicateRow($event, selection.selected[0])\"\n      >\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\n  >\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        color=\"accent\"\n        *ngIf=\"filterPanelFloating\"\n        (click)=\"toggleFilterPanelFloating()\"\n        class=\"hidden-xs hidden-sm hidden-md\"\n        [title]=\"!showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\"\n      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\" style=\"position: relative\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n      [style.--mat-row-height]=\"rowHeight + 'px'\"\n      appCellSelection\n      [appSelectableColumns]=\"selectableColumns\"\n      [appCellSelectionDisabled]=\"invalid\"\n      (appCellSelectionChange)=\"onCellSelectionChange($event)\"\n      (appCellRightClick)=\"onCellRightClick($event)\"\n    >\n      <ng-container matColumnDef=\"select\" [sticky]=\"checkBoxSelection\" [class.mat-column-sticky]=\"checkBoxSelection\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox [checked]=\"selection | isSelected: row\" (click)=\"toggleSelectRow($event, row)\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span mat-sort-header>\n            <ion-label title=\"Id\">#</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'id' }\">\n          <mat-form-field *ngIf=\"!readOnly && row.id === -1 && row.editing; else readOnlyId\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              required\n              [formControl]=\"row.validator | formGetControl: 'id'\"\n              placeholder=\"Id\"\n              [appAutofocus]=\"true\"\n            />\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('alreadyExists')\" translate>\n              ERROR.FIELD_NOT_UNIQUE_ID\n            </mat-error>\n          </mat-form-field>\n\n          <ng-template #readOnlyId>\n            <ion-label appAutoTooltip>\n              {{ (row.validator | formGetValue: 'id') || (row.currentData | propertyGet: 'id') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label\n              [title]=\"!showTooltip ? ('TABLE.TESTING.NAME' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('TABLE.TESTING.NAME' | translate) : ''\"\n            >\n              {{ 'TABLE.TESTING.NAME' | translate }}\n            </ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          (click)=\"focusColumn = 'name'\"\n          [appCellId]=\"{ rowId: row.id, columnName: 'name' }\"\n        >\n          <mat-form-field *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              [required]=\"true\"\n              [formControl]=\"row.validator | formGetControl: 'name'\"\n              [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n              [appAutofocus]=\"row.id === -1 || focusColumn === 'name'\"\n            />\n            <ng-content select=\"[suffix]\"></ng-content>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('maxlength')\" translate>\n              ERROR.FIELD_MAX_LENGTH_COMPACT\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('minlength')\" translate>\n              ERROR.FIELD_MIN_LENGTH_COMPACT\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{ (row.validator | formGetValue: 'name') || (row.currentData | propertyGet: 'name') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <span mat-sort-header>\n            <ion-label>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'levelId' }\">\n          <mat-autocomplete-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            panelWidth=\"750px\"\n            [formControl]=\"row.validator | formGetControl: 'levelId'\"\n            [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n            floatLabel=\"never\"\n            [required]=\"true\"\n            [config]=\"autocompleteFields.level\"\n            [highlightAccent]=\"true\"\n          >\n            <mat-error matError *ngIf=\"(row.validator | formGetControl: 'levelId').hasError('invalid')\" translate>\n              ERROR.FIELD_INVALID\n            </mat-error>\n          </mat-autocomplete-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                autocompleteFields.level?.displayWith(\n                  (row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                ) ||\n                  ((row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                    | referentialToString)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'boolean' }\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'checkbox'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean') || formBuilder.control(row.currentData['boolean'])\n            \"\n            [compact]=\"true\"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                (row.validator | formGetValue: 'boolean') || (row.currentData | propertyGet: 'boolean')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean2\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 2</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'boolean2' }\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            [floatLabel]=\"'never'\"\n            [style]=\"'radio'\"\n            [showRadio]=\"true\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean3\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 3</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'button'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        [canCancel]=\"false\"\n        [style]=\"'table'\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n        (backward)=\"confirmAndBackward($event.event, $event.row)\"\n        (forward)=\"confirmAndForward($event.event, $event.row)\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-selected]=\"row.editing\"\n        [class.mat-row-error]=\"row.invalid\"\n        [class.mat-row-disabled]=\"!row.editing\"\n        [class.mat-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n      ></ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"errorSubject | async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table 2 (click to select)</ion-title>\n\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && !mobile\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_ADD' | translate) : ''\"\n        (click)=\"addRow()\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\n          filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_DELETE' | translate) : ''\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit && selection.selected | isArrayLength: { equals: 1 }\"\n        [title]=\"!showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ('COMMON.BTN_DUPLICATE' | translate) : ''\"\n        (click)=\"duplicateRow($event, selection.selected[0])\"\n      >\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\n  >\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput formControlName=\"searchText\" autocomplete=\"off\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        color=\"accent\"\n        *ngIf=\"filterPanelFloating\"\n        (click)=\"toggleFilterPanelFloating()\"\n        class=\"hidden-xs hidden-sm hidden-md\"\n        [title]=\"!showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\"\n        [matTooltip]=\"showTooltip ? ((filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') | translate) : ''\"\n      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\" style=\"position: relative\">\n    <table\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n      [style.--mat-row-height]=\"rowHeight + 'px'\"\n      appCellSelection\n      [appSelectableColumns]=\"selectableColumns\"\n      [appCellSelectionDisabled]=\"invalid\"\n      (appCellSelectionChange)=\"onCellSelectionChange($event)\"\n      (appCellRightClick)=\"onCellRightClick($event)\"\n    >\n      <ng-container matColumnDef=\"select\" [sticky]=\"checkBoxSelection\" [class.mat-column-sticky]=\"checkBoxSelection\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox [checked]=\"selection | isSelected: row\" (click)=\"toggleSelectRow($event, row)\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span mat-sort-header>\n            <ion-label title=\"Id\">#</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'id' }\">\n          <mat-form-field *ngIf=\"!readOnly && row.id === -1 && row.editing; else readOnlyId\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              required\n              [formControl]=\"row.validator | formGetControl: 'id'\"\n              placeholder=\"Id\"\n              [appAutofocus]=\"true\"\n            />\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'id').hasError('alreadyExists')\" translate>\n              ERROR.FIELD_NOT_UNIQUE_ID\n            </mat-error>\n          </mat-form-field>\n\n          <ng-template #readOnlyId>\n            <ion-label appAutoTooltip>\n              {{ (row.validator | formGetValue: 'id') || (row.currentData | propertyGet: 'id') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label\n              [title]=\"!showTooltip ? ('TABLE.TESTING.NAME' | translate) : ''\"\n              [matTooltip]=\"showTooltip ? ('TABLE.TESTING.NAME' | translate) : ''\"\n            >\n              {{ 'TABLE.TESTING.NAME' | translate }}\n            </ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let row\"\n          (click)=\"focusColumn = 'name'\"\n          [appCellId]=\"{ rowId: row.id, columnName: 'name' }\"\n        >\n          <mat-form-field *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              [required]=\"true\"\n              [formControl]=\"row.validator | formGetControl: 'name'\"\n              [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n              [appAutofocus]=\"row.id === -1 || focusColumn === 'name'\"\n            />\n            <ng-content select=\"[suffix]\"></ng-content>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('maxlength')\" translate>\n              ERROR.FIELD_MAX_LENGTH_COMPACT\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl: 'name').hasError('minlength')\" translate>\n              ERROR.FIELD_MIN_LENGTH_COMPACT\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{ (row.validator | formGetValue: 'name') || (row.currentData | propertyGet: 'name') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <span mat-sort-header>\n            <ion-label>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'levelId' }\">\n          <mat-autocomplete-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            panelWidth=\"750px\"\n            [formControl]=\"row.validator | formGetControl: 'levelId'\"\n            [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n            floatLabel=\"never\"\n            [required]=\"true\"\n            [config]=\"autocompleteFields.level\"\n            [highlightAccent]=\"true\"\n          >\n            <mat-error matError *ngIf=\"(row.validator | formGetControl: 'levelId').hasError('invalid')\" translate>\n              ERROR.FIELD_INVALID\n            </mat-error>\n          </mat-autocomplete-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                autocompleteFields.level?.displayWith(\n                  (row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                ) ||\n                  ((row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                    | referentialToString)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'boolean' }\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'checkbox'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean') || formBuilder.control(row.currentData['boolean'])\n            \"\n            [compact]=\"true\"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                (row.validator | formGetValue: 'boolean') || (row.currentData | propertyGet: 'boolean')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean2\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 2</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [appCellId]=\"{ rowId: row.id, columnName: 'boolean2' }\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            [floatLabel]=\"'never'\"\n            [style]=\"'radio'\"\n            [showRadio]=\"true\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean3\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 3</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'button'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTooltip>\n              {{\n                (row.validator | formGetValue: 'boolean2') || (row.currentData | propertyGet: 'boolean2')\n                  ? ('COMMON.YES' | translate)\n                  : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        [canCancel]=\"false\"\n        [style]=\"'table'\"\n        (optionsClick)=\"openSelectColumnsModal($event)\"\n        (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n        (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n        (backward)=\"confirmAndBackward($event.event, $event.row)\"\n        (forward)=\"confirmAndForward($event.event, $event.row)\"\n        [cellTemplate]=\"cellInjection\"\n      >\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-selected]=\"row.editing\"\n        [class.mat-row-error]=\"row.invalid\"\n        [class.mat-row-disabled]=\"!row.editing\"\n        [class.mat-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject | async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS' | translate\"\n      ></ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\n    <!-- error -->\n    <ion-item *ngIf=\"errorSubject | async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table .mat-column-select{min-width:60px;width:60px}.table-container .mat-mdc-table .mat-column-id{width:90px;min-width:90px;max-width:90px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px;width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px;width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px;width:110px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: AppValidatorService }, { type: i1$3.UntypedFormBuilder }], propDecorators: { filterPanelFloating: [{
                 type: Input
             }], sticky: [{